@lexriver/dome 2.0.1 → 2.0.3

package/out/index.cjs

@@ -0,0 +1,802 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.mts
+var src_exports = {};
+__export(src_exports, {
+  AnimatedArray: () => AnimatedArray,
+  AnimatedTable: () => AnimatedTable,
+  AnimatedText: () => AnimatedText,
+  DomeComponent: () => DomeComponent,
+  DomeManipulator: () => DomeManipulator,
+  React: () => React,
+  h: () => h
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@lexriver/async"), module.exports);
+__reExport(src_exports, require("@lexriver/data-types"), module.exports);
+__reExport(src_exports, require("@lexriver/observable"), module.exports);
+__reExport(src_exports, require("@lexriver/type-event"), module.exports);
+
+// src/DomeManipulator.mts
+var import_async = require("@lexriver/async");
+var import_data_types = require("@lexriver/data-types");
+var import_observable = require("@lexriver/observable");
+var replacementPromiseByElement = /* @__PURE__ */ new WeakMap();
+var DomeManipulator;
+((DomeManipulator2) => {
+  async function hideElementAsync(element, animation) {
+    if (!element) throw new Error("hideElementAsync failed, no element");
+    if (element.hidden) return;
+    if (animation) {
+      await addCssClassAsync(element, animation.cssClassName, animation.timeMs);
+    }
+    element.style.display = "none";
+    element.hidden = true;
+  }
+  DomeManipulator2.hideElementAsync = hideElementAsync;
+  async function unhideElementAsync(element, animation) {
+    if (!element) throw new Error("unhideElementAsync failed, no element");
+    if (!element.hidden) return;
+    element.style.display = "";
+    element.hidden = false;
+    if (animation) {
+      await addCssClassAsync(element, animation.cssClassName, animation.timeMs);
+    }
+  }
+  DomeManipulator2.unhideElementAsync = unhideElementAsync;
+  async function insertAsFirstChildAsync(elementToInsert, parentElement, animation) {
+    parentElement.insertBefore(elementToInsert, parentElement.firstChild);
+    if (animation) {
+      await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs);
+    }
+  }
+  DomeManipulator2.insertAsFirstChildAsync = insertAsFirstChildAsync;
+  async function insertBeforeAsync(elementToInsert, refElement, parentElement, animation) {
+    parentElement.insertBefore(elementToInsert, refElement);
+    if (animation) {
+      await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs);
+    }
+  }
+  DomeManipulator2.insertBeforeAsync = insertBeforeAsync;
+  async function insertAfterAsync(elementToInsert, refElement, parentElement, animation) {
+    if (refElement) {
+      parentElement.insertBefore(elementToInsert, refElement.nextSibling);
+    } else {
+      parentElement.appendChild(elementToInsert);
+    }
+    if (animation) {
+      await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs);
+    }
+  }
+  DomeManipulator2.insertAfterAsync = insertAfterAsync;
+  async function insertByIndexAsync(elementToInsert, index, parentElement, animation) {
+    if (index == 0) {
+      parentElement.appendChild(elementToInsert);
+      if (animation) {
+        await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs);
+      }
+      return;
+    }
+    await insertAfterAsync(elementToInsert, parentElement.children[index], parentElement, animation);
+  }
+  DomeManipulator2.insertByIndexAsync = insertByIndexAsync;
+  async function replaceAsync(oldElement, newElement, animationHide, animationShow) {
+    if (!oldElement.parentNode) {
+      console.error("replaceAsync() failed, no parentNode.", "oldElement=", oldElement);
+      throw new Error("no parent node for replaceAsync");
+    }
+    if (animationHide) {
+      await addCssClassAsync(oldElement, animationHide.cssClassName, animationHide.timeMs);
+    }
+    const parent = oldElement.parentNode;
+    if (!parent) {
+      console.error("replaceAsync() failed, no parent. Probably node was deleted while hide animation.", "oldElement=", oldElement, "type=", typeof oldElement, "parent=", oldElement.parentElement, oldElement.parentNode);
+      throw new Error("no parent for replaceAsync()");
+    }
+    parent.replaceChild(newElement, oldElement);
+    if (animationShow) {
+      await addCssClassAsync(newElement, animationShow.cssClassName, animationShow.timeMs);
+    }
+    return newElement;
+  }
+  DomeManipulator2.replaceAsync = replaceAsync;
+  async function removeElementAsync(element, animation) {
+    if (animation) {
+      await addCssClassAsync(element, animation.cssClassName, animation.timeMs);
+    }
+    element.remove();
+  }
+  DomeManipulator2.removeElementAsync = removeElementAsync;
+  function forEachChildrenOf(element, action) {
+    for (let i = 0; i < element.childNodes.length; i++) {
+      action(element.childNodes[i]);
+    }
+  }
+  DomeManipulator2.forEachChildrenOf = forEachChildrenOf;
+  async function removeAllChildrenAsync(element, animation) {
+    if (!animation) {
+      while (element.firstChild) {
+        element.firstChild.remove();
+      }
+    } else {
+      forEachChildrenOf(element, (child) => child.nodeType == Node.ELEMENT_NODE && child.classList.add(animation.cssClassName));
+      await import_async.Async.waitMsAsync(animation.timeMs);
+      Array.from(element.childNodes).forEach((child) => child.remove());
+    }
+  }
+  DomeManipulator2.removeAllChildrenAsync = removeAllChildrenAsync;
+  async function appendChildAsync(containerElement, child, animation) {
+    containerElement.appendChild(child);
+    if (animation) {
+      await addCssClassAsync(child, animation.cssClassName, animation.timeMs);
+    }
+  }
+  DomeManipulator2.appendChildAsync = appendChildAsync;
+  async function appendChildrenAsync(containerElement, children, animation) {
+    if (import_data_types.DataTypes.isString(children)) {
+      containerElement.appendChild(document.createTextNode(children));
+    } else if (import_data_types.DataTypes.isArray(children)) {
+      await Promise.all(
+        children.map((child) => appendChildAsync(containerElement, child, animation))
+      );
+    } else if (children) {
+      await appendChildAsync(containerElement, children, animation);
+    }
+  }
+  DomeManipulator2.appendChildrenAsync = appendChildrenAsync;
+  async function replaceAllChildrenAsync(containerElement, childrenToInsert, animationForHide, animationForShow) {
+    const previousReplacement = replacementPromiseByElement.get(containerElement);
+    const replacement = (previousReplacement != null ? previousReplacement : Promise.resolve()).catch(() => void 0).then(async () => {
+      if (containerElement.childNodes.length > 0) {
+        await removeAllChildrenAsync(containerElement, animationForHide);
+      }
+      await appendChildrenAsync(containerElement, childrenToInsert, animationForShow);
+    });
+    replacementPromiseByElement.set(containerElement, replacement);
+    try {
+      await replacement;
+    } finally {
+      if (replacementPromiseByElement.get(containerElement) === replacement) {
+        replacementPromiseByElement.delete(containerElement);
+      }
+    }
+  }
+  DomeManipulator2.replaceAllChildrenAsync = replaceAllChildrenAsync;
+  function isInDom(el) {
+    if (!el) return false;
+    return document.body.contains(el);
+  }
+  DomeManipulator2.isInDom = isInDom;
+  function isOnScreen(el) {
+    if (!el) return false;
+    var rect = el.getBoundingClientRect();
+    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
+  }
+  DomeManipulator2.isOnScreen = isOnScreen;
+  async function addCssClassAsync(element, cssClassName, removeAfterMs) {
+    if (element.nodeType !== Node.ELEMENT_NODE) return;
+    element.classList.add(cssClassName);
+    if (removeAfterMs && removeAfterMs > 0) {
+      await import_async.Async.waitMsAsync(removeAfterMs);
+      element.classList.remove(cssClassName);
+    }
+  }
+  DomeManipulator2.addCssClassAsync = addCssClassAsync;
+  async function addCssClassesAsync(element, cssClassNames, removeAfterMs) {
+    await Promise.all(cssClassNames.map((cssClassName) => addCssClassAsync(element, cssClassName, removeAfterMs)));
+  }
+  DomeManipulator2.addCssClassesAsync = addCssClassesAsync;
+  function removeCssClass(element, cssClassName) {
+    element.classList.remove(cssClassName);
+  }
+  DomeManipulator2.removeCssClass = removeCssClass;
+  function removeCssClasses(element, cssClassNames) {
+    for (let cssClassName of cssClassNames) {
+      element.classList.remove(cssClassName);
+    }
+  }
+  DomeManipulator2.removeCssClasses = removeCssClasses;
+  function setCssClasses(element, value) {
+    if (!value) return;
+    if (import_data_types.DataTypes.isArray(value)) {
+      setAttribute(element, "class", value.join(" "));
+    } else if (import_data_types.DataTypes.isObjectWithKeys(value)) {
+      let classNameArray = [];
+      for (let [k, v] of Object.entries(value)) {
+        if ((0, import_observable.checkIfObservable)(v)) {
+          if (v.get()) {
+            classNameArray.push(k);
+          }
+        } else if (v) {
+          classNameArray.push(k);
+        }
+      }
+      setAttribute(element, "class", classNameArray.join(" "));
+    } else {
+      setAttribute(element, "class", value);
+    }
+  }
+  DomeManipulator2.setCssClasses = setCssClasses;
+  function setAttribute(element, name, value) {
+    if (value === void 0 || value === null) {
+      return;
+    }
+    if (/^xlink[AHRST]/.test(name)) {
+      element.setAttributeNS("http://www.w3.org/1999/xlink", name.replace("xlink", "xlink:").toLowerCase(), value);
+    } else {
+      element.setAttribute(name, value);
+    }
+  }
+  DomeManipulator2.setAttribute = setAttribute;
+  function hasFocus(el) {
+    return document.activeElement == el;
+  }
+  DomeManipulator2.hasFocus = hasFocus;
+  function scrollIntoView(element, paddingFromTop = 100) {
+    if (isOnScreen(element)) {
+      return;
+    }
+    let expectedPosition = element.getBoundingClientRect().top + window.pageYOffset;
+    expectedPosition -= paddingFromTop;
+    window.scrollTo({ top: expectedPosition, behavior: "smooth" });
+  }
+  DomeManipulator2.scrollIntoView = scrollIntoView;
+  DomeManipulator2.scrollToTop = () => {
+    let position = getCurrentScrollPosition();
+    if (position > 0) {
+      window.requestAnimationFrame(DomeManipulator2.scrollToTop);
+      if (position < 20) {
+        window.scrollTo(0, 0);
+      } else {
+        window.scrollTo(0, position - position / 9);
+      }
+    }
+  };
+  function getCurrentScrollPosition() {
+    return document.documentElement.scrollTop || document.body.scrollTop;
+  }
+  DomeManipulator2.getCurrentScrollPosition = getCurrentScrollPosition;
+  async function scrollToAsync(p) {
+    var _a, _b;
+    const msStep = (_a = p.msStep) != null ? _a : 50;
+    const maxMsToWait = (_b = p.maxMsToWait) != null ? _b : 5e3;
+    let scrollOptions = {};
+    if (p.pxFromTop) {
+      scrollOptions.top = p.pxFromTop;
+    }
+    if (p.pxFromLeft) {
+      scrollOptions.left = p.pxFromLeft;
+    }
+    if (p.smooth) {
+      scrollOptions.behavior = "smooth";
+    }
+    try {
+      if (p.pxFromLeft || p.pxFromTop) {
+        await import_async.Async.waitForFunctionToReturnTrueAsync(() => {
+          if (p.pxFromTop) {
+            return document.body.scrollHeight >= p.pxFromTop;
+          }
+          if (p.pxFromLeft) {
+            return document.body.scrollWidth >= p.pxFromLeft;
+          }
+          return false;
+        }, msStep, maxMsToWait);
+      }
+    } catch (error) {
+    }
+    window.scrollTo(scrollOptions);
+  }
+  DomeManipulator2.scrollToAsync = scrollToAsync;
+})(DomeManipulator || (DomeManipulator = {}));
+
+// src/LongestCommonSubsequence.mts
+var LongestCommonSubsequence;
+((LongestCommonSubsequence2) => {
+  function getLongestCommonSubsequence(set1, set2) {
+    const lcsMatrix = Array(set2.length + 1).fill(null).map(() => Array(set1.length + 1).fill(null));
+    for (let columnIndex2 = 0; columnIndex2 <= set1.length; columnIndex2 += 1) {
+      lcsMatrix[0][columnIndex2] = 0;
+    }
+    for (let rowIndex2 = 0; rowIndex2 <= set2.length; rowIndex2 += 1) {
+      lcsMatrix[rowIndex2][0] = 0;
+    }
+    for (let rowIndex2 = 1; rowIndex2 <= set2.length; rowIndex2 += 1) {
+      for (let columnIndex2 = 1; columnIndex2 <= set1.length; columnIndex2 += 1) {
+        if (set1[columnIndex2 - 1] === set2[rowIndex2 - 1]) {
+          lcsMatrix[rowIndex2][columnIndex2] = lcsMatrix[rowIndex2 - 1][columnIndex2 - 1] + 1;
+        } else {
+          lcsMatrix[rowIndex2][columnIndex2] = Math.max(
+            lcsMatrix[rowIndex2 - 1][columnIndex2],
+            lcsMatrix[rowIndex2][columnIndex2 - 1]
+          );
+        }
+      }
+    }
+    if (!lcsMatrix[set2.length][set1.length]) {
+      return [""];
+    }
+    const longestSequence = [];
+    let columnIndex = set1.length;
+    let rowIndex = set2.length;
+    while (columnIndex > 0 || rowIndex > 0) {
+      if (set1[columnIndex - 1] === set2[rowIndex - 1]) {
+        longestSequence.unshift(set1[columnIndex - 1]);
+        columnIndex -= 1;
+        rowIndex -= 1;
+      } else if (lcsMatrix[rowIndex][columnIndex] === lcsMatrix[rowIndex][columnIndex - 1]) {
+        columnIndex -= 1;
+      } else {
+        rowIndex -= 1;
+      }
+    }
+    return longestSequence;
+  }
+  LongestCommonSubsequence2.getLongestCommonSubsequence = getLongestCommonSubsequence;
+  function getPatch({ oldArray, newArray, onRemove, onAdd }) {
+    const lcsArray = getLongestCommonSubsequence(oldArray, newArray);
+    let countOfOperations = 0;
+    let lcsIndex = 0;
+    for (let oldIndex = 0; oldIndex < oldArray.length; oldIndex++) {
+      let oldItem = oldArray[oldIndex];
+      let oldItemInLcs = lcsArray[lcsIndex] == oldItem;
+      if (oldItemInLcs) {
+        lcsIndex++;
+      } else {
+        onRemove(oldIndex - countOfOperations, oldItem);
+        countOfOperations++;
+      }
+    }
+    lcsIndex = 0;
+    for (let newIndex = 0; newIndex < newArray.length; newIndex++) {
+      let newItem = newArray[newIndex];
+      let newItemInLcs = lcsArray[lcsIndex] == newItem;
+      if (newItemInLcs) {
+        lcsIndex++;
+      } else {
+        onAdd(newIndex, newItem);
+        countOfOperations++;
+      }
+    }
+    return countOfOperations;
+  }
+  LongestCommonSubsequence2.getPatch = getPatch;
+  function getPatchOrdered({ oldArray, newArray, onRemove, onAdd }) {
+    const lcsArray = getLongestCommonSubsequence(oldArray, newArray);
+    let lcsIndexForOld = 0;
+    let lcsIndexForNew = 0;
+    let oldIndex = 0;
+    let newIndex = 0;
+    let countOfRemoveOperations = 0;
+    let countOfAddOperations = 0;
+    let indexForOperation = 0;
+    while (oldIndex < oldArray.length || newIndex < newArray.length) {
+      while (oldIndex < oldArray.length) {
+        let oldItem = oldArray[oldIndex];
+        let oldItemInLcs = lcsArray[lcsIndexForOld] == oldItem;
+        if (oldItemInLcs) {
+          lcsIndexForOld++;
+          oldIndex++;
+          break;
+        } else {
+          onRemove(indexForOperation, oldItem);
+          countOfRemoveOperations++;
+          oldIndex++;
+        }
+      }
+      while (newIndex < newArray.length) {
+        let newItem = newArray[newIndex];
+        let newItemInLcs = lcsArray[lcsIndexForNew] == newItem;
+        if (newItemInLcs) {
+          lcsIndexForNew++;
+          indexForOperation++;
+          newIndex++;
+          break;
+        } else {
+          onAdd(indexForOperation, newItem);
+          indexForOperation++;
+          countOfAddOperations++;
+          newIndex++;
+        }
+      }
+    }
+    return countOfAddOperations + countOfRemoveOperations;
+  }
+  LongestCommonSubsequence2.getPatchOrdered = getPatchOrdered;
+})(LongestCommonSubsequence || (LongestCommonSubsequence = {}));
+
+// src/AnimatedArray.mts
+var AnimatedArray = class {
+  constructor(params) {
+    this.params = params;
+    __publicField(this, "arrayOfKeyToElement", []);
+    if (params.array && params.parentElement) {
+      this.update(params.array);
+    }
+  }
+  get size() {
+    return this.arrayOfKeyToElement.length;
+  }
+  update(array, parentElement) {
+    parentElement = parentElement || this.params.parentElement;
+    if (!parentElement) {
+      console.warn("AnimatedArray unable to update, no parentElement");
+      return;
+    }
+    if (array.length == 0 && this.params.emptyList) {
+      DomeManipulator.replaceAllChildrenAsync(parentElement, this.params.emptyList);
+      return;
+    }
+    if (array.length > 0 && this.params.emptyList) {
+      DomeManipulator.removeElementAsync(this.params.emptyList, this.params.animationHide);
+    }
+    let newArrayOfKeys = array.map((item) => this.params.getKey(item));
+    let oldArrayOfKeys = this.arrayOfKeyToElement.map((x) => x.key);
+    LongestCommonSubsequence.getPatchOrdered({
+      oldArray: oldArrayOfKeys,
+      newArray: newArrayOfKeys,
+      onAdd: (index, key) => {
+        if (!parentElement) throw new Error("no parent element");
+        let itemIndex = newArrayOfKeys.indexOf(key);
+        if (itemIndex == -1) throw new Error("no itemIndex");
+        let item = array[itemIndex];
+        let element = this.params.getHtmlElement(item);
+        this.arrayOfKeyToElement.splice(index, 0, { key, element });
+        DomeManipulator.insertByIndexAsync(element, index, parentElement, this.params.animationShow);
+      },
+      onRemove: (index, key) => {
+        DomeManipulator.removeElementAsync(this.arrayOfKeyToElement[index].element, this.params.animationHide);
+        this.arrayOfKeyToElement.splice(index, 1);
+      }
+    });
+  }
+};
+
+// src/DomeComponent.mts
+var import_ts_debounce = require("ts-debounce");
+var DomeComponent = class {
+  constructor(attrs, children) {
+    this.attrs = attrs;
+    this.children = children;
+    __publicField(this, "rootElement");
+    __publicField(this, "updateInProgress", false);
+    __publicField(this, "updateRequested", false);
+    __publicField(this, "scheduleUpdate", (0, import_ts_debounce.debounce)(() => this.runScheduledUpdateAsync(), 5));
+  }
+  //abstract render(attrs:Attrs, children:any):HTMLElement
+  init() {
+  }
+  afterRender() {
+  }
+  // protected onMount(){
+  // }
+  async updateAsync() {
+    if (!this.rootElement) {
+      console.error("DomeComponent: unable to update, no rootElement", "this=", this);
+      return;
+    }
+    if (!this.rootElement.parentNode) {
+      console.error("DomeComponent: unable to update, no parent for rootElement, not mounted?", "this=", this);
+      return;
+    }
+    const newEl = this.render();
+    await DomeManipulator.replaceAsync(this.rootElement, newEl, this.attrs.onHideAnimation, this.attrs.onShowAnimation);
+    this.rootElement = newEl;
+    this.afterUpdate();
+  }
+  async runScheduledUpdateAsync() {
+    if (this.updateInProgress) {
+      this.updateRequested = true;
+      return;
+    }
+    this.updateInProgress = true;
+    try {
+      do {
+        this.updateRequested = false;
+        try {
+          await this.updateAsync();
+        } catch (error) {
+          console.error("DomeComponent: scheduled update failed", error);
+        }
+      } while (this.updateRequested);
+    } finally {
+      this.updateInProgress = false;
+    }
+  }
+  afterUpdate() {
+  }
+};
+DomeComponent.prototype["__DomeComponent"] = true;
+
+// src/AnimatedTable.mts
+var AnimatedTable = class extends DomeComponent {
+  constructor() {
+    super(...arguments);
+    // rootElement
+    //   table
+    //     thead
+    //     tbody
+    //     tfooter
+    //   emptyList
+    __publicField(this, "refRoot", this.attrs.rootElement || document.createElement("div"));
+    __publicField(this, "refTable", this.attrs.tableElement || document.createElement("table"));
+    __publicField(this, "refTableHead", this.attrs.renderTableHead ? this.attrs.renderTableHead(this.attrs.itemsO.get()) : document.createElement("thead"));
+    __publicField(this, "refTableBody", this.attrs.tableBody || document.createElement("tbody"));
+    __publicField(this, "refTableFooter", this.attrs.renderTableFooter ? this.attrs.renderTableFooter(this.attrs.itemsO.get()) : document.createElement("tfoot"));
+    __publicField(this, "refEmptyList", this.attrs.renderEmptyList ? this.attrs.renderEmptyList() : document.createElement("div"));
+    __publicField(this, "refLoading", this.attrs.renderLoading ? this.attrs.renderLoading() : document.createElement("div"));
+    __publicField(this, "animatedArray", new AnimatedArray({
+      animationHide: this.attrs.animationHideRow,
+      animationShow: this.attrs.animationShowRow,
+      array: [],
+      getKey: this.attrs.getKey,
+      getHtmlElement: this.attrs.renderTableRow
+    }));
+  }
+  render() {
+    this.refRoot.appendChild(this.refTable);
+    this.refRoot.appendChild(this.refEmptyList);
+    this.refRoot.appendChild(this.refLoading);
+    if (this.refTableHead) this.refTable.appendChild(this.refTableHead);
+    if (this.refTableBody) this.refTable.appendChild(this.refTableBody);
+    if (this.refTableFooter) this.refTable.appendChild(this.refTableFooter);
+    console.log("AnimatedTable render()", "refRoot=", this.refRoot);
+    return this.refRoot;
+  }
+  afterRender() {
+    this.updateAsync();
+  }
+  async updateAsync() {
+    try {
+      if (this.attrs.renderLoading) {
+        this.refLoading = await DomeManipulator.replaceAsync(this.refLoading, this.attrs.renderLoading());
+      }
+      if (this.attrs.isLoadingO && this.attrs.isLoadingO.get()) {
+        await DomeManipulator.unhideElementAsync(this.refLoading, this.attrs.animationShowLoading);
+      } else {
+        await DomeManipulator.hideElementAsync(this.refLoading, this.attrs.animationHideLoading);
+      }
+      const items = this.attrs.itemsO.get();
+      const currentCount = items.length;
+      if (currentCount == 0) {
+        await DomeManipulator.hideElementAsync(this.refTable, this.attrs.animationHideTable);
+        if (this.attrs.renderEmptyList) {
+          this.refEmptyList = await DomeManipulator.replaceAsync(this.refEmptyList, this.attrs.renderEmptyList());
+        }
+        await DomeManipulator.unhideElementAsync(this.refEmptyList, this.attrs.animationShowEmptyList);
+      } else {
+        await DomeManipulator.hideElementAsync(this.refEmptyList, this.attrs.animationHideEmptyList);
+        if (this.attrs.renderTableHead) {
+          this.refTableHead = await DomeManipulator.replaceAsync(this.refTableHead, this.attrs.renderTableHead(items));
+        }
+        if (this.attrs.renderTableFooter) {
+          this.refTableFooter = await DomeManipulator.replaceAsync(this.refTableFooter, this.attrs.renderTableFooter(items));
+        }
+        await DomeManipulator.unhideElementAsync(this.refTable, this.attrs.animationShowTable);
+        this.animatedArray.update(items, this.refTableBody);
+      }
+    } catch (x) {
+      console.error("AnimatedTable update failed", x);
+    }
+  }
+};
+
+// src/AnimatedText.mts
+var AnimatedText = class extends DomeComponent {
+  render() {
+    const result = document.createElement(this.attrs.tag || "span");
+    if (this.attrs.class) {
+      DomeManipulator.setCssClasses(result, this.attrs.class);
+    }
+    result.append(this.attrs.textO.get());
+    return result;
+  }
+  async updateAsync() {
+    if (!this.rootElement) return;
+    try {
+      this.rootElement = await DomeManipulator.replaceAsync(this.rootElement, this.render(), this.attrs.onHideAnimation, this.attrs.onShowAnimation);
+    } catch (x) {
+      console.error("AnimatedText update failed", x);
+    }
+  }
+};
+
+// src/Dome.mts
+var import_svg_tag_names = require("svg-tag-names");
+var import_data_types2 = require("@lexriver/data-types");
+var import_observable2 = require("@lexriver/observable");
+function flattenArray(arr, res = []) {
+  var i = 0, cur;
+  var len = arr.length;
+  for (; i < len; i++) {
+    cur = arr[i];
+    Array.isArray(cur) ? flattenArray(cur, res) : res.push(cur);
+  }
+  return res;
+}
+function checkIfNonDimensionalCssName(name) {
+  const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+  return IS_NON_DIMENSIONAL.test(name);
+}
+var excludeSvgTags = [
+  "a",
+  "audio",
+  "canvas",
+  "iframe",
+  "script",
+  "video"
+];
+var svgTags = import_svg_tag_names.svgTagNames.filter((name) => !excludeSvgTags.includes(name));
+var isSVG = (tagName) => svgTags.includes(tagName);
+var setCSSProps = (el, style) => {
+  if (import_data_types2.DataTypes.isString(style)) {
+    el.style = style;
+  } else if (import_data_types2.DataTypes.isObjectWithKeys(style)) {
+    Object.keys(style).forEach((name) => {
+      let value = style[name];
+      if (typeof value === "number" && !checkIfNonDimensionalCssName(name)) {
+        value = `${value}px`;
+      }
+      el.style[name] = value;
+    });
+  }
+};
+var createElement = (tagName) => {
+  if (isSVG(tagName)) {
+    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
+  }
+  if (tagName === DocumentFragment) {
+    return document.createDocumentFragment();
+  }
+  return document.createElement(tagName);
+};
+var build = (tagName, attrs, children) => {
+  if (!tagName) {
+    console.trace();
+    throw new Error("tagName=" + tagName);
+  }
+  if (tagName == DocumentFragment) {
+    const el = createElement(tagName);
+    el.appendChild(children);
+    return el;
+  }
+  if (tagName.prototype && tagName.prototype["__DomeComponent"]) {
+    try {
+      const instance = new tagName(attrs, children);
+      if (instance["render"] && import_data_types2.DataTypes.isFunction(instance["render"])) {
+        if (attrs.ref && import_data_types2.DataTypes.isFunction(attrs.ref)) {
+          attrs.ref(instance);
+        }
+        instance["init"]();
+        instance.rootElement = instance["render"]();
+        for (let attribute of Object.values(attrs)) {
+          if ((0, import_observable2.checkIfObservable)(attribute)) {
+            attribute.eventOnChange.subscribe(() => {
+              instance.scheduleUpdate();
+            });
+          }
+        }
+        instance["afterRender"]();
+        return instance.rootElement;
+      }
+    } catch (error) {
+      console.error("error while creating DomeComponent class", error);
+    }
+    return;
+  }
+  if (import_data_types2.DataTypes.isFunction(tagName)) {
+    return tagName(attrs, children);
+  } else if (import_data_types2.DataTypes.isString(tagName)) {
+    const el = createElement(tagName);
+    Object.keys(attrs).forEach((name) => {
+      const value = attrs[name];
+      if (name === "class" || name === "className" || name === "cssClasses") {
+        assignDynamicCssClasses(name, value, el);
+      } else if (name === "style") {
+        setCSSProps(el, value);
+      } else if (["disabled", "autocomplete", "selected", "checked"].indexOf(name) >= 0) {
+        if (attrs[name]) {
+          DomeManipulator.setAttribute(el, name, name);
+        }
+      } else if (name === "onCreate" || name === "ref") {
+        if (import_data_types2.DataTypes.isFunction(value) == false) throw new Error(`Please provide function <${tagName} ${name}={ref => myRef=ref} />`);
+        value(el);
+      } else if (name == "visibleIf") {
+        if ((0, import_observable2.checkIfObservable)(value) == false) {
+          console.error("value=", value);
+          throw new Error("Please provide Observable<boolean> as argument for visibleIf");
+        }
+        let obs = value;
+        obs.eventOnChange.subscribe((isVisible) => {
+          if (isVisible) {
+            DomeManipulator.unhideElementAsync(el);
+          } else {
+            DomeManipulator.hideElementAsync(el);
+          }
+        });
+        setTimeout(() => {
+          obs.eventOnChange.triggerAsync(obs.get());
+        }, 1);
+      } else if (name.indexOf("on") === 0 && value) {
+        const eventName = name.slice(2).toLowerCase();
+        if (import_data_types2.DataTypes.isFunction(value) == false) {
+          console.error("unable to subscribe for event", eventName, "listener is not a function", "element=", el, "listener=", value);
+          return;
+        }
+        el.addEventListener(eventName, value);
+      } else if (name === "innerHtml") {
+        el.innerHTML = value;
+      } else if (name !== "key" && value !== false) {
+        DomeManipulator.setAttribute(el, name, value === true ? "" : value);
+      }
+    });
+    if (!attrs.innerHtml) {
+      el.appendChild(children);
+    }
+    return el;
+  } else throw new Error("not implemented");
+};
+function assignDynamicCssClasses(name, value, element) {
+  if (import_data_types2.DataTypes.isObjectWithKeys(value) == false) {
+    DomeManipulator.setCssClasses(element, value);
+    return;
+  }
+  let resultArray = [];
+  for (let [k, v] of Object.entries(value)) {
+    if (v === void 0) {
+    } else if (import_data_types2.DataTypes.isBoolean(v)) {
+      if (v) {
+        resultArray.push(k);
+      }
+    } else if ((0, import_observable2.checkIfObservable)(v)) {
+      let o = v;
+      o.eventOnChange.subscribe((showThiCssClass) => {
+        if (!DomeManipulator.isInDom(element)) return { unsubscribe: true };
+        DomeManipulator.setCssClasses(element, value);
+      });
+      if (o.get()) {
+        resultArray.push(k);
+      }
+    } else {
+      console.error(`Please provide classNames as a keys and boolean or Observable<boolean> for values., ex: {class1:true, class2:myVarO}`, "name=", name, "value=", value, "typeof value =", typeof value);
+      throw new Error("Wrong value for `class` attribute");
+    }
+  }
+  DomeManipulator.setCssClasses(element, resultArray);
+}
+function h(tagName, attrs, ...childrenArgs) {
+  const children = document.createDocumentFragment();
+  flattenArray(childrenArgs).forEach((child) => {
+    if (child instanceof Node) {
+      children.appendChild(child);
+    } else if (typeof child !== "boolean" && typeof child !== "undefined" && child !== null) {
+      children.appendChild(document.createTextNode(child));
+    }
+  });
+  return build(tagName, attrs || {}, children);
+}
+var React = {
+  createElement: h,
+  Fragment: typeof DocumentFragment === "function" ? DocumentFragment : () => {
+  }
+};