ontotext-yasgui-web-component 1.8.0 → 1.8.1

package/dist/cjs/alert-box.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 
 const alertBoxCss = ".alert-box{position:relative}.alert-box .close-button{position:absolute;top:10px;right:10px;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#8a6d3b;opacity:0.2}.alert-box .close-button:hover{text-decoration:none;color:#000;opacity:0.5}";
 

package/dist/cjs/confirmation-dialog_10.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const htmlUtil = require('./html-util-1182b066.js');
 const eventService = require('./event-service-3e3039cd.js');
 const internalEventTypes = require('./internal-event-types-60ebe97d.js');
@@ -72002,6 +72002,109 @@ const SaveQueryDialog = class {
 const Alert = ({ messages }) => (index.h("div", { class: "alert alert-danger" }, messages.map((message) => (index.h("div", { class: "error-message" }, message)))));
 SaveQueryDialog.style = saveQueryDialogCss;
 
+const savedQueriesPopupCss = ":host{display:block}.saved-queries-container{position:absolute;z-index:1015;border:1px solid #ccc;font-family:\"Roboto\", \"Helvetica Neue\", Arial, sans-serif;font-weight:300;background-color:#fff}.saved-queries-container .saved-queries-popup{max-height:250px;width:300px;overflow-y:scroll;box-shadow:0 4px 8px rgba(0, 0, 0, 0.3)}.saved-queries-container .saved-queries-popup ul{padding:15px;margin:0}.saved-queries-container .saved-queries-popup ul .saved-query{position:relative;display:flex;justify-content:space-between;padding:5px 0;list-style-type:none}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-queries-container .saved-queries-popup ul .saved-query:hover .saved-query-actions{display:block}.saved-queries-container .saved-queries-popup ul .saved-query a{flex-grow:2;text-decoration:none;cursor:pointer;color:#003663}.saved-queries-container .saved-queries-popup ul .saved-query a:hover{text-decoration:underline}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-actions{display:none;position:absolute;right:0}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-action{border:none;background-color:#fff;color:#e84e0f;outline:none;cursor:pointer;font-size:1em;transition:all 0.15s ease-out}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-action:hover{color:#d0460d;transform:scale(1.2)}.saved-queries-container .arrow{position:absolute;display:block;right:calc(-0.5rem - 1px);width:8px;height:16px;margin:0.3rem 0}.saved-queries-container .arrow::before,.saved-queries-container .arrow::after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid}.saved-queries-container .arrow::before{right:0;border-width:0.5rem 0 0.5rem 0.5rem;border-left-color:rgba(0, 0, 0, 0.25)}.saved-queries-container .arrow::after{right:1px;border-width:0.5rem 0 0.5rem 0.5rem;border-left-color:#fff}";
+
+const SavedQueriesPopup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalSaveQuerySelectedEvent = index.createEvent(this, "internalSaveQuerySelectedEvent", 7);
+    this.internalEditSavedQueryEvent = index.createEvent(this, "internalEditSavedQueryEvent", 7);
+    this.internalSavedQuerySelectedForDeleteEvent = index.createEvent(this, "internalSavedQuerySelectedForDeleteEvent", 7);
+    this.internalSavedQuerySelectedForShareEvent = index.createEvent(this, "internalSavedQuerySelectedForShareEvent", 7);
+    this.internalCloseSavedQueriesPopupEvent = index.createEvent(this, "internalCloseSavedQueriesPopupEvent", 7);
+    this.config = undefined;
+    this.serviceFactory = undefined;
+  }
+  onWindowResize(event) {
+    const target = event.target;
+    if (!target.closest('.saved-queries-container')) {
+      this.internalCloseSavedQueriesPopupEvent.emit();
+    }
+  }
+  /**
+   * Handles the Escape key keydown event and closes the dialog.
+   * @param ev The keyboard event.
+   */
+  keydownListener(ev) {
+    if (ev.key === 'Escape') {
+      this.internalCloseSavedQueriesPopupEvent.emit();
+    }
+  }
+  onSelect(evt, selectedQuery) {
+    evt.stopPropagation();
+    this.internalSaveQuerySelectedEvent.emit(selectedQuery);
+  }
+  componentWillLoad() {
+    // TranslationService is injected here because the service factory is not available
+    // in the constructor.
+    this.translationService = this.serviceFactory.get(TranslationService);
+  }
+  componentDidRender() {
+    this.setPopupPosition();
+  }
+  onEdit(evt, selectedQuery) {
+    evt.stopPropagation();
+    this.internalEditSavedQueryEvent.emit(new UpdateQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic, selectedQuery.originalQueryName, false));
+  }
+  onDelete(evt, selectedQuery) {
+    evt.stopPropagation();
+    this.internalSavedQuerySelectedForDeleteEvent.emit(new DeleteQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic));
+  }
+  onShare(evt, selectedQuery) {
+    evt.stopPropagation();
+    this.internalSavedQuerySelectedForShareEvent.emit(new DeleteQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic));
+  }
+  setPopupPosition() {
+    const panelRect = this.hostElement.getBoundingClientRect();
+    const buttonRect = this.config.popupTarget.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const isFullScreen = this.hostElement.closest('ontotext-yasgui').querySelector('.yasqe').classList.contains('yasqe-fullscreen');
+    const arrowEl = this.hostElement.querySelector('.arrow');
+    if (isFullScreen) {
+      this.hostElement.style.top = `${scrollTop + 13}px`;
+      this.hostElement.style.left = `${scrollLeft + buttonRect.left - panelRect.width - 10}px`;
+      arrowEl.style.top = '40px';
+    }
+    else {
+      this.hostElement.style.top = `${scrollTop + buttonRect.top + buttonRect.height / 2 - panelRect.height / 2}px`;
+      this.hostElement.style.left = `${scrollLeft + buttonRect.left - panelRect.width - 10}px`;
+      arrowEl.style.top = panelRect.height / 2 - 16 + 'px';
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: "saved-queries-container" }, index.h("div", { class: "arrow" }), index.h("div", { class: "saved-queries-popup" }, index.h("ul", null, this.config.savedQueriesList.map((savedQuery) => (index.h("yasgui-tooltip", { placement: "top", key: savedQuery.queryName, "yasgui-data-tooltip": savedQuery.queryName }, index.h("li", { class: "saved-query" }, index.h("a", { class: "saved-query-link", onClick: (evt) => this.onSelect(evt, savedQuery) }, savedQuery.queryName), index.h("span", { class: "saved-query-actions" }, !savedQuery.readonly ?
+      index.h("button", { class: "saved-query-action edit-saved-query ri-edit-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.edit.button.tooltip'), onClick: (evt) => this.onEdit(evt, savedQuery) })
+      : '', !savedQuery.readonly ?
+      index.h("button", { class: "saved-query-action delete-saved-query ri-delete-bin-6-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.delete.button.tooltip'), onClick: (evt) => this.onDelete(evt, savedQuery) })
+      : '', index.h("button", { class: "saved-query-action share-saved-query ri-links-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.share.button.tooltip'), onClick: (evt) => this.onShare(evt, savedQuery) }))))))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+SavedQueriesPopup.style = savedQueriesPopupCss;
+
+const shareQueryDialogCss = "";
+
+const ShareQueryDialog = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalShareQueryDialogClosedEvent = index.createEvent(this, "internalShareQueryDialogClosedEvent", 7);
+    this.internalQueryShareLinkCopiedEvent = index.createEvent(this, "internalQueryShareLinkCopiedEvent", 7);
+    this.config = undefined;
+    this.serviceFactory = undefined;
+  }
+  onDialogClosed() {
+    this.internalShareQueryDialogClosedEvent.emit();
+  }
+  onLinkCopied() {
+    this.internalQueryShareLinkCopiedEvent.emit();
+  }
+  render() {
+    return (index.h("copy-link-dialog", { config: { copyLink: this.config.shareQueryLink }, serviceFactory: this.serviceFactory, classes: "share-saved-query-dialog", copyLinkEventsObserver: this }));
+  }
+};
+ShareQueryDialog.style = shareQueryDialogCss;
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -73612,227 +73715,6 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-/**
-* Provides functionality for displaying and positioning tooltips using Floating UI.
-*
-* The tooltip is rendered in the document body and automatically updates its
-* position when the reference element moves, resizes, or the viewport changes.
-*/
-class YasguiFloatingTooltipService {
-  /**
-   * Displays a tooltip attached to the specified target element.
-   *
-   * Any previously displayed tooltip is removed before the new one is shown.
-   *
-   * @param target The element to which the tooltip should be attached.
-   * @param text The text content of the tooltip.
-   * @param placement The preferred placement of the tooltip relative to the target element.
-   */
-  show(target, text, placement) {
-    this.hide();
-    this.tooltipElement = this.createTooltipElement(text);
-    this.arrowElement = this.createArrowElement();
-    this.tooltipElement.appendChild(this.arrowElement);
-    document.body.appendChild(this.tooltipElement);
-    this.cleanupAutoUpdate = autoUpdate(target, this.tooltipElement, async () => {
-      var _a;
-      if (!this.tooltipElement || !this.arrowElement) {
-        return;
-      }
-      const { x, y, placement: finalPlacement, middlewareData } = await computePosition(target, this.tooltipElement, {
-        placement,
-        strategy: 'fixed',
-        middleware: [
-          offset(8),
-          flip(),
-          shift({ padding: 8 }),
-          arrow({ element: this.arrowElement }),
-        ],
-      });
-      if (!this.tooltipElement || !this.arrowElement) {
-        return;
-      }
-      Object.assign(this.tooltipElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      });
-      const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : {};
-      const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-      }[finalPlacement.split('-')[0]];
-      Object.assign(this.arrowElement.style, {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [staticSide]: '-4px',
-      });
-    });
-  }
-  /**
-   * Hides the currently displayed tooltip and removes all associated listeners.
-   */
-  hide() {
-    var _a, _b;
-    (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = undefined;
-    (_b = this.tooltipElement) === null || _b === void 0 ? void 0 : _b.remove();
-    this.tooltipElement = undefined;
-    this.arrowElement = undefined;
-  }
-  /**
-   * Creates a tooltip element with the provided text content.
-   *
-   * @param text The text content of the tooltip.
-   * @returns The created tooltip element.
-   */
-  createTooltipElement(text) {
-    const tooltipElement = document.createElement('div');
-    tooltipElement.className = 'yasgui-floating-tooltip';
-    tooltipElement.setAttribute('role', 'tooltip');
-    tooltipElement.textContent = text;
-    return tooltipElement;
-  }
-  /**
-   * Creates an arrow element used to visually connect the tooltip to its target.
-   *
-   * @returns The created tooltip arrow element.
-   */
-  createArrowElement() {
-    const arrowElement = document.createElement('div');
-    arrowElement.className = 'yasgui-floating-tooltip-arrow';
-    return arrowElement;
-  }
-}
-
-const savedQueriesPopupCss = ":host{display:block}.saved-queries-container{position:absolute;z-index:1015;border:1px solid #ccc;font-family:\"Roboto\", \"Helvetica Neue\", Arial, sans-serif;font-weight:300;background-color:#fff}.saved-queries-container .saved-queries-popup{max-height:250px;width:300px;overflow-y:scroll;box-shadow:0 4px 8px rgba(0, 0, 0, 0.3)}.saved-queries-container .saved-queries-popup ul{padding:15px;margin:0}.saved-queries-container .saved-queries-popup ul .saved-query{position:relative;display:flex;justify-content:space-between;padding:5px 0;list-style-type:none}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-queries-container .saved-queries-popup ul .saved-query:hover .saved-query-actions{display:block}.saved-queries-container .saved-queries-popup ul .saved-query a{flex-grow:2;text-decoration:none;cursor:pointer;color:#003663}.saved-queries-container .saved-queries-popup ul .saved-query a:hover{text-decoration:underline}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-actions{display:none;position:absolute;right:0}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-action{border:none;background-color:#fff;color:#e84e0f;outline:none;cursor:pointer;font-size:1em;transition:all 0.15s ease-out}.saved-queries-container .saved-queries-popup ul .saved-query .saved-query-action:hover{color:#d0460d;transform:scale(1.2)}.saved-queries-container .arrow{position:absolute;display:block;right:calc(-0.5rem - 1px);width:8px;height:16px;margin:0.3rem 0}.saved-queries-container .arrow::before,.saved-queries-container .arrow::after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid}.saved-queries-container .arrow::before{right:0;border-width:0.5rem 0 0.5rem 0.5rem;border-left-color:rgba(0, 0, 0, 0.25)}.saved-queries-container .arrow::after{right:1px;border-width:0.5rem 0 0.5rem 0.5rem;border-left-color:#fff}";
-
-const SavedQueriesPopup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.internalSaveQuerySelectedEvent = index.createEvent(this, "internalSaveQuerySelectedEvent", 7);
-    this.internalEditSavedQueryEvent = index.createEvent(this, "internalEditSavedQueryEvent", 7);
-    this.internalSavedQuerySelectedForDeleteEvent = index.createEvent(this, "internalSavedQuerySelectedForDeleteEvent", 7);
-    this.internalSavedQuerySelectedForShareEvent = index.createEvent(this, "internalSavedQuerySelectedForShareEvent", 7);
-    this.internalCloseSavedQueriesPopupEvent = index.createEvent(this, "internalCloseSavedQueriesPopupEvent", 7);
-    this.config = undefined;
-    this.serviceFactory = undefined;
-  }
-  onWindowResize(event) {
-    const target = event.target;
-    if (!target.closest('.saved-queries-container')) {
-      this.internalCloseSavedQueriesPopupEvent.emit();
-    }
-  }
-  /**
-   * Handles the Escape key keydown event and closes the dialog.
-   * @param ev The keyboard event.
-   */
-  keydownListener(ev) {
-    if (ev.key === 'Escape') {
-      this.internalCloseSavedQueriesPopupEvent.emit();
-    }
-  }
-  onSelect(evt, selectedQuery) {
-    evt.stopPropagation();
-    this.internalSaveQuerySelectedEvent.emit(selectedQuery);
-  }
-  /**
-   * Displays a tooltip for the element that triggered the event.
-   *
-   * @param event The mouse event originating from the tooltip target element.
-   * @param text The text content to display in the tooltip.
-   */
-  showTooltip(event, text) {
-    this.ontotextYasguiTooltipService.show(event.currentTarget, text, 'top');
-  }
-  /**
-   * Hides the currently displayed tooltip.
-   */
-  hideTooltip() {
-    this.ontotextYasguiTooltipService.hide();
-  }
-  componentWillLoad() {
-    // TranslationService is injected here because the service factory is not available
-    // in the constructor.
-    this.translationService = this.serviceFactory.get(TranslationService);
-    this.ontotextYasguiTooltipService = this.serviceFactory.get(YasguiFloatingTooltipService);
-  }
-  componentDidRender() {
-    this.setPopupPosition();
-  }
-  /**
-   * Cleans up component resources when the component is removed from the DOM.
-   */
-  disconnectedCallback() {
-    this.ontotextYasguiTooltipService.hide();
-  }
-  onEdit(evt, selectedQuery) {
-    evt.stopPropagation();
-    this.internalEditSavedQueryEvent.emit(new UpdateQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic, selectedQuery.originalQueryName, false));
-  }
-  onDelete(evt, selectedQuery) {
-    evt.stopPropagation();
-    this.internalSavedQuerySelectedForDeleteEvent.emit(new DeleteQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic));
-  }
-  onShare(evt, selectedQuery) {
-    evt.stopPropagation();
-    this.internalSavedQuerySelectedForShareEvent.emit(new DeleteQueryData(selectedQuery.queryName, selectedQuery.query, selectedQuery.isPublic));
-  }
-  setPopupPosition() {
-    const panelRect = this.hostElement.getBoundingClientRect();
-    const buttonRect = this.config.popupTarget.getBoundingClientRect();
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-    const isFullScreen = this.hostElement.closest('ontotext-yasgui').querySelector('.yasqe').classList.contains('yasqe-fullscreen');
-    const arrowEl = this.hostElement.querySelector('.arrow');
-    if (isFullScreen) {
-      this.hostElement.style.top = `${scrollTop + 13}px`;
-      this.hostElement.style.left = `${scrollLeft + buttonRect.left - panelRect.width - 10}px`;
-      arrowEl.style.top = '40px';
-    }
-    else {
-      this.hostElement.style.top = `${scrollTop + buttonRect.top + buttonRect.height / 2 - panelRect.height / 2}px`;
-      this.hostElement.style.left = `${scrollLeft + buttonRect.left - panelRect.width - 10}px`;
-      arrowEl.style.top = panelRect.height / 2 - 16 + 'px';
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: "saved-queries-container" }, index.h("div", { class: "arrow" }), index.h("div", { class: "saved-queries-popup" }, index.h("ul", null, this.config.savedQueriesList.map((savedQuery) => (index.h("li", { class: "saved-query" }, index.h("a", { class: "saved-query-link", onMouseEnter: (event) => this.showTooltip(event, savedQuery.queryName), onMouseLeave: () => this.hideTooltip(), onFocus: (event) => this.showTooltip(event, savedQuery.queryName), onBlur: () => this.ontotextYasguiTooltipService.hide(), onClick: (evt) => this.onSelect(evt, savedQuery) }, savedQuery.queryName), index.h("span", { class: "saved-query-actions" }, !savedQuery.readonly ?
-      index.h("button", { class: "saved-query-action edit-saved-query ri-edit-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.edit.button.tooltip'), onClick: (evt) => this.onEdit(evt, savedQuery) })
-      : '', !savedQuery.readonly ?
-      index.h("button", { class: "saved-query-action delete-saved-query ri-delete-bin-6-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.delete.button.tooltip'), onClick: (evt) => this.onDelete(evt, savedQuery) })
-      : '', index.h("button", { class: "saved-query-action share-saved-query ri-links-line", title: this.translationService.translate('yasqe.actions.saved_query_dialog.share.button.tooltip'), onClick: (evt) => this.onShare(evt, savedQuery) })))))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-SavedQueriesPopup.style = savedQueriesPopupCss;
-
-const shareQueryDialogCss = "";
-
-const ShareQueryDialog = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.internalShareQueryDialogClosedEvent = index.createEvent(this, "internalShareQueryDialogClosedEvent", 7);
-    this.internalQueryShareLinkCopiedEvent = index.createEvent(this, "internalQueryShareLinkCopiedEvent", 7);
-    this.config = undefined;
-    this.serviceFactory = undefined;
-  }
-  onDialogClosed() {
-    this.internalShareQueryDialogClosedEvent.emit();
-  }
-  onLinkCopied() {
-    this.internalQueryShareLinkCopiedEvent.emit();
-  }
-  render() {
-    return (index.h("copy-link-dialog", { config: { copyLink: this.config.shareQueryLink }, serviceFactory: this.serviceFactory, classes: "share-saved-query-dialog", copyLinkEventsObserver: this }));
-  }
-};
-ShareQueryDialog.style = shareQueryDialogCss;
-
 const ontotextTooltipWebComponentCss = ".tooltip-box{background-color:#003663;color:#fff;padding:5px 9px;font-size:14px;max-width:320px;white-space:normal}.ontotext-yasgui-tooltip .tooltip-arrow{position:absolute;width:16px;height:16px;color:#003663}.ontotext-yasgui-tooltip .tooltip-arrow::before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.ontotext-yasgui-tooltip[data-placement^=top] .tooltip-arrow{bottom:0}.ontotext-yasgui-tooltip[data-placement^=top] .tooltip-arrow::before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:#003663}.ontotext-yasgui-tooltip[data-placement^=bottom] .tooltip-arrow{top:0}.ontotext-yasgui-tooltip[data-placement^=bottom] .tooltip-arrow::before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:#003663}.ontotext-yasgui-tooltip[data-placement^=left] .tooltip-arrow{right:0}.ontotext-yasgui-tooltip[data-placement^=left] .tooltip-arrow::before{right:-7px;border-width:8px 0 8px 8px;border-left-color:#003663}.ontotext-yasgui-tooltip[data-placement^=right] .tooltip-arrow{left:0}.ontotext-yasgui-tooltip[data-placement^=right] .tooltip-arrow::before{left:-7px;border-width:8px 8px 8px 0;border-right-color:#003663}";
 
 const TOOLTIP_CLASS_NAME = 'ontotext-yasgui-tooltip';

package/dist/cjs/copy-resource-link-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const eventService = require('./event-service-3e3039cd.js');
 const internalEventTypes = require('./internal-event-types-60ebe97d.js');
 require('./internal-download-as-event-215b3e1b.js');

package/dist/cjs/{index-fb62c0ab.js → index-12ca1818.js}

@@ -78,6 +78,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -106,6 +107,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -130,6 +135,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -146,6 +154,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -333,6 +344,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -649,6 +662,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -656,6 +671,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -757,7 +773,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -808,7 +858,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };

package/dist/cjs/loader-component.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const svgUtil = require('./svg-util-24ae60b9.js');
 
 const loaderComponentCss = ".ontotext-yasgui-loader{display:block}.ontotext-yasgui-loader .loader-component{text-align:center}";

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ontotext-download-as.cjs",[[0,"ontotext-download-as",{"translationService":[16],"nameLabelKey":[1,"name-label-key"],"tooltipLabelKey":[1,"tooltip-label-key"],"items":[16],"pluginName":[1,"plugin-name"],"query":[1],"infer":[4],"sameAs":[4,"same-as"]}]]],["alert-box.cjs",[[0,"alert-box",{"type":[1],"message":[1],"noIcon":[4,"no-icon"],"noButton":[4,"no-button"],"isVisible":[32]}]]],["copy-resource-link-button.cjs",[[0,"copy-resource-link-button",{"uri":[1],"classes":[1]}]]],["loader-component.cjs",[[4,"loader-component",{"timeFormattingService":[16],"showQueryProgress":[4,"show-query-progress"],"message":[1],"additionalMessage":[1,"additional-message"],"size":[1],"hidden":[4],"queryProgress":[32]}]]],["ontotext-editable-text-field.cjs",[[0,"ontotext-editable-text-field",{"value":[1025],"edit":[1028],"translationService":[16]},[[8,"click","handleClickOutside"],[4,"keydown","keydownListener"]]]]],["ontotext-explain-plan.cjs",[[0,"ontotext-explain-plan",{"binding":[16],"forHtml":[4,"for-html"],"translationService":[16],"themeName":[1,"theme-name"]}]]],["ontotext-pagination.cjs",[[0,"ontotext-pagination",{"pageNumber":[2,"page-number"],"pageSize":[2,"page-size"],"totalElements":[2,"total-elements"],"pageElements":[2,"page-elements"],"hasMorePages":[4,"has-more-pages"]}]]],["query-split-button.cjs",[[0,"query-split-button",{"yasqe":[8],"translationService":[16],"eventService":[16],"querySplitOpen":[32]},[[10,"click","onWindowClick"],[11,"scroll","onWindowScroll"],[8,"keydown","onKeyDown"],[9,"resize","onWindowResize"]]]]],["confirmation-dialog_10.cjs",[[0,"ontotext-yasgui",{"config":[16],"language":[1],"savedQueryConfig":[16],"saveQueryData":[32],"savedQueryData":[32],"deleteQueryData":[32],"isVerticalOrientation":[32],"renderingMode":[32],"showSaveQueryDialog":[32],"showSavedQueriesPopup":[32],"showSavedQueriesPopupTarget":[32],"showConfirmationDialog":[32],"showShareQueryDialog":[32],"showCopyResourceLinkDialog":[32],"copiedResourceLink":[32],"loaderMessage":[32],"additionalLoaderMessage":[32],"yasqeBtnLabel":[32],"yasguiBtnLabel":[32],"yasrBtnLabel":[32],"showKeyboardShortcutsDialog":[32],"changeRenderMode":[64],"setTheme":[64],"setQuery":[64],"query":[64],"getQuery":[64],"isQueryValid":[64],"openTab":[64],"getQueryMode":[64],"getQueryType":[64],"getEmbeddedResultAsJson":[64],"getEmbeddedResultAsCSV":[64],"hideYasqeActionButton":[64],"showYasqeActionButton":[64],"getOngoingRequestsInfo":[64],"abortQuery":[64],"abortAllRequests":[64],"reInitYasgui":[64],"isQueryDirty":[64]},[[9,"resize","onResize"],[8,"beforeunload","onBeforeunloadHandler"],[0,"internalCreateSavedQueryEvent","saveQueryHandler"],[0,"internalSaveQueryEvent","createSavedQueryHandler"],[0,"internalUpdateQueryEvent","updateSavedQueryHandler"],[0,"internalSaveQueryDialogClosedEvent","closeSaveDialogHandler"],[0,"internalShowSavedQueriesEvent","showSavedQueriesHandler"],[0,"internalSaveQuerySelectedEvent","savedQuerySelectedHandler"],[0,"internalEditSavedQueryEvent","editSavedQueryHandler"],[0,"internalSavedQuerySelectedForDeleteEvent","savedQuerySelectedForEditHandler"],[0,"internalConfirmationApprovedEvent","deleteSavedQueryHandler"],[0,"internalConfirmationRejectedEvent","closeSavedQueryDeleteConfirmationHandler"],[0,"internalCloseSavedQueriesPopupEvent","closeSavedQueriesPopupHandler"],[0,"internalSavedQuerySelectedForShareEvent","savedQuerySelectedForShareHandler"],[0,"internalShareQueryEvent","shareQueryHandler"],[0,"internalExplainQueryEvent","explainQueryHandler"],[0,"internalYasqeDropdownActionSelected","onYasqeDropdownActionSelected"],[0,"internalQueryShareLinkCopiedEvent","savedQueryShareLinkCopiedHandler"],[0,"internalShareQueryDialogClosedEvent","closeShareQueryDialogHandler"],[0,"internalResourceLinkDialogClosedEvent","resourceLinkDialogClosedHandler"],[0,"internalResourceLinkCopiedEvent","resourceLinkCopiedHandler"],[0,"internalShowResourceCopyLinkDialogEvent","showResourceCopyLinkDialogHandler"],[0,"internalDownloadAsEvent","onDownloadAsEventHandler"],[0,"internalNotificationMessageEvent","notificationMessageHandler"],[0,"internalQueryEvent","onQuery"],[0,"internalQueryExecuted","onInternalQueryExecuted"],[0,"internalCountQueryEvent","onCountQuery"],[0,"internalCountQueryResponseEvent","onCountQueryResponse"],[0,"internalRequestAbortedEvent","onQueryAborted"],[0,"internalKeyboardShortcutsClickedEvent","onShortcutsOpenEvent"]]],[0,"copy-resource-link-dialog",{"serviceFactory":[16],"resourceLink":[1,"resource-link"]}],[0,"share-query-dialog",{"config":[16],"serviceFactory":[16]}],[0,"keyboard-shortcuts-dialog",{"open":[4],"items":[16],"translationService":[16]},[[8,"keydown","keydownListener"]]],[0,"save-query-dialog",{"serviceFactory":[16],"data":[16],"queryName":[32],"originalQueryName":[32],"query":[32],"isPublic":[32],"isNew":[32],"isSaveAllowed":[32]},[[8,"keydown","keydownListener"]]],[0,"confirmation-dialog",{"translationService":[16],"config":[16]},[[8,"keydown","keydownListener"]]],[0,"saved-queries-popup",{"config":[16],"serviceFactory":[16]},[[8,"click","onWindowResize"],[8,"keydown","keydownListener"]]],[0,"copy-link-dialog",{"config":[16],"serviceFactory":[16],"copyLinkEventsObserver":[16],"classes":[1]}],[4,"yasgui-tooltip",{"yasguiDataTooltip":[1,"yasgui-data-tooltip"],"placement":[1],"showOnClick":[4,"show-on-click"]}],[4,"ontotext-dialog-web-component",{"config":[16]},[[4,"keydown","keydownListener"]]]]],["ontotext-dropdown.cjs",[[0,"ontotext-dropdown",{"translationService":[16],"nameLabelKey":[1,"name-label-key"],"tooltipLabelKey":[1,"tooltip-label-key"],"items":[16],"iconClass":[1,"icon-class"],"open":[32],"showTooltip":[32]},[[8,"keydown","keydownListener"],[8,"click","mouseClickListener"]]]]]], options);
+  return index.bootstrapLazy([["ontotext-download-as.cjs",[[0,"ontotext-download-as",{"translationService":[16],"nameLabelKey":[1,"name-label-key"],"tooltipLabelKey":[1,"tooltip-label-key"],"items":[16],"pluginName":[1,"plugin-name"],"query":[1],"infer":[4],"sameAs":[4,"same-as"]}]]],["alert-box.cjs",[[0,"alert-box",{"type":[1],"message":[1],"noIcon":[4,"no-icon"],"noButton":[4,"no-button"],"isVisible":[32]}]]],["copy-resource-link-button.cjs",[[0,"copy-resource-link-button",{"uri":[1],"classes":[1]}]]],["loader-component.cjs",[[4,"loader-component",{"timeFormattingService":[16],"showQueryProgress":[4,"show-query-progress"],"message":[1],"additionalMessage":[1,"additional-message"],"size":[1],"hidden":[4],"queryProgress":[32]}]]],["ontotext-editable-text-field.cjs",[[0,"ontotext-editable-text-field",{"value":[1025],"edit":[1028],"translationService":[16]},[[8,"click","handleClickOutside"],[4,"keydown","keydownListener"]]]]],["ontotext-explain-plan.cjs",[[0,"ontotext-explain-plan",{"binding":[16],"forHtml":[4,"for-html"],"translationService":[16],"themeName":[1,"theme-name"]}]]],["ontotext-pagination.cjs",[[0,"ontotext-pagination",{"pageNumber":[2,"page-number"],"pageSize":[2,"page-size"],"totalElements":[2,"total-elements"],"pageElements":[2,"page-elements"],"hasMorePages":[4,"has-more-pages"]}]]],["query-split-button.cjs",[[0,"query-split-button",{"yasqe":[8],"translationService":[16],"eventService":[16],"querySplitOpen":[32]},[[10,"click","onWindowClick"],[11,"scroll","onWindowScroll"],[8,"keydown","onKeyDown"],[9,"resize","onWindowResize"]]]]],["confirmation-dialog_10.cjs",[[0,"ontotext-yasgui",{"config":[16],"language":[1],"savedQueryConfig":[16],"saveQueryData":[32],"savedQueryData":[32],"deleteQueryData":[32],"isVerticalOrientation":[32],"renderingMode":[32],"showSaveQueryDialog":[32],"showSavedQueriesPopup":[32],"showSavedQueriesPopupTarget":[32],"showConfirmationDialog":[32],"showShareQueryDialog":[32],"showCopyResourceLinkDialog":[32],"copiedResourceLink":[32],"loaderMessage":[32],"additionalLoaderMessage":[32],"yasqeBtnLabel":[32],"yasguiBtnLabel":[32],"yasrBtnLabel":[32],"showKeyboardShortcutsDialog":[32],"changeRenderMode":[64],"setTheme":[64],"setQuery":[64],"query":[64],"getQuery":[64],"isQueryValid":[64],"openTab":[64],"getQueryMode":[64],"getQueryType":[64],"getEmbeddedResultAsJson":[64],"getEmbeddedResultAsCSV":[64],"hideYasqeActionButton":[64],"showYasqeActionButton":[64],"getOngoingRequestsInfo":[64],"abortQuery":[64],"abortAllRequests":[64],"reInitYasgui":[64],"isQueryDirty":[64]},[[9,"resize","onResize"],[8,"beforeunload","onBeforeunloadHandler"],[0,"internalCreateSavedQueryEvent","saveQueryHandler"],[0,"internalSaveQueryEvent","createSavedQueryHandler"],[0,"internalUpdateQueryEvent","updateSavedQueryHandler"],[0,"internalSaveQueryDialogClosedEvent","closeSaveDialogHandler"],[0,"internalShowSavedQueriesEvent","showSavedQueriesHandler"],[0,"internalSaveQuerySelectedEvent","savedQuerySelectedHandler"],[0,"internalEditSavedQueryEvent","editSavedQueryHandler"],[0,"internalSavedQuerySelectedForDeleteEvent","savedQuerySelectedForEditHandler"],[0,"internalConfirmationApprovedEvent","deleteSavedQueryHandler"],[0,"internalConfirmationRejectedEvent","closeSavedQueryDeleteConfirmationHandler"],[0,"internalCloseSavedQueriesPopupEvent","closeSavedQueriesPopupHandler"],[0,"internalSavedQuerySelectedForShareEvent","savedQuerySelectedForShareHandler"],[0,"internalShareQueryEvent","shareQueryHandler"],[0,"internalExplainQueryEvent","explainQueryHandler"],[0,"internalYasqeDropdownActionSelected","onYasqeDropdownActionSelected"],[0,"internalQueryShareLinkCopiedEvent","savedQueryShareLinkCopiedHandler"],[0,"internalShareQueryDialogClosedEvent","closeShareQueryDialogHandler"],[0,"internalResourceLinkDialogClosedEvent","resourceLinkDialogClosedHandler"],[0,"internalResourceLinkCopiedEvent","resourceLinkCopiedHandler"],[0,"internalShowResourceCopyLinkDialogEvent","showResourceCopyLinkDialogHandler"],[0,"internalDownloadAsEvent","onDownloadAsEventHandler"],[0,"internalNotificationMessageEvent","notificationMessageHandler"],[0,"internalQueryEvent","onQuery"],[0,"internalQueryExecuted","onInternalQueryExecuted"],[0,"internalCountQueryEvent","onCountQuery"],[0,"internalCountQueryResponseEvent","onCountQueryResponse"],[0,"internalRequestAbortedEvent","onQueryAborted"],[0,"internalKeyboardShortcutsClickedEvent","onShortcutsOpenEvent"]]],[0,"copy-resource-link-dialog",{"serviceFactory":[16],"resourceLink":[1,"resource-link"]}],[0,"share-query-dialog",{"config":[16],"serviceFactory":[16]}],[0,"keyboard-shortcuts-dialog",{"open":[4],"items":[16],"translationService":[16]},[[8,"keydown","keydownListener"]]],[0,"save-query-dialog",{"serviceFactory":[16],"data":[16],"queryName":[32],"originalQueryName":[32],"query":[32],"isPublic":[32],"isNew":[32],"isSaveAllowed":[32]},[[8,"keydown","keydownListener"]]],[0,"saved-queries-popup",{"config":[16],"serviceFactory":[16]},[[8,"click","onWindowResize"],[8,"keydown","keydownListener"]]],[0,"confirmation-dialog",{"translationService":[16],"config":[16]},[[8,"keydown","keydownListener"]]],[0,"copy-link-dialog",{"config":[16],"serviceFactory":[16],"copyLinkEventsObserver":[16],"classes":[1]}],[4,"ontotext-dialog-web-component",{"config":[16]},[[4,"keydown","keydownListener"]]],[4,"yasgui-tooltip",{"yasguiDataTooltip":[1,"yasgui-data-tooltip"],"placement":[1],"showOnClick":[4,"show-on-click"]}]]],["ontotext-dropdown.cjs",[[0,"ontotext-dropdown",{"translationService":[16],"nameLabelKey":[1,"name-label-key"],"tooltipLabelKey":[1,"tooltip-label-key"],"items":[16],"iconClass":[1,"icon-class"],"open":[32],"showTooltip":[32]},[[8,"keydown","keydownListener"],[8,"click","mouseClickListener"]]]]]], options);
   });
 };
 

package/dist/cjs/ontotext-download-as.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const internalDownloadAsEvent = require('./internal-download-as-event-215b3e1b.js');
 require('./internal-event-types-60ebe97d.js');
 

package/dist/cjs/ontotext-dropdown.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const internalDropdownValueSelectedEvent = require('./internal-dropdown-value-selected-event-b17e46a7.js');
 require('./internal-event-types-60ebe97d.js');
 

package/dist/cjs/ontotext-editable-text-field.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 
 const ontotextEditableTextFieldCss = ":host{display:flex;flex-direction:row;align-items:stretch}.editable-text-field-wrapper:hover{cursor:pointer}.editable-text-field-wrapper{display:flex;align-items:center}.editable-text-field-wrapper .edit-mode-container{display:flex;justify-content:space-between}.editable-text-field-wrapper .editable-text-field{outline-color:#00000059;border:1px solid #00000059;padding:0}.editable-text-field-wrapper .save-btn,.editable-text-field-wrapper .cancel-btn{border:none;outline:none;margin-left:6px}.editable-text-field-wrapper .save-btn{color:white;background-color:#e84e0f}.editable-text-field-wrapper .save-btn:hover{background-color:#d0460d}.editable-text-field-wrapper .cancel-btn:hover,.editable-text-field-wrapper .save-btn:hover{cursor:pointer}.editable-text-field-wrapper .cancel-btn:hover .cancel-btn-label,.editable-text-field-wrapper .save-btn:hover .save-btn-label{transform:scale(1.2);transition:transform 0.15s ease-out}.editable-text-field-wrapper .preview-value{padding-top:1px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 

package/dist/cjs/ontotext-explain-plan.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 const htmlUtil = require('./html-util-1182b066.js');
 const eventService = require('./event-service-3e3039cd.js');
 const internalEventTypes = require('./internal-event-types-60ebe97d.js');

package/dist/cjs/ontotext-pagination.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb62c0ab.js');
+const index = require('./index-12ca1818.js');
 
 class Page {
   constructor(_pageSize, _pageNumber) {