@design.estate/dees-catalog 1.0.223 → 1.0.225

package/dist_watch/bundle.js

@@ -8385,7 +8385,7 @@ var require_core = __commonJS({
     var HLJS = function(hljs) {
       const languages = /* @__PURE__ */ Object.create(null);
       const aliases = /* @__PURE__ */ Object.create(null);
-      const plugins9 = [];
+      const plugins8 = [];
       let SAFE_MODE = true;
       const LANGUAGE_NOT_FOUND = "Could not find the language '{}', did you forget to load/include a language module?";
       const PLAINTEXT_LANGUAGE = { disableAutodetect: true, name: "Plain text", contains: [] };
@@ -8954,17 +8954,17 @@ var require_core = __commonJS({
       }
       function addPlugin(plugin) {
         upgradePluginAPI(plugin);
-        plugins9.push(plugin);
+        plugins8.push(plugin);
       }
       function removePlugin(plugin) {
-        const index = plugins9.indexOf(plugin);
+        const index = plugins8.indexOf(plugin);
         if (index !== -1) {
-          plugins9.splice(index, 1);
+          plugins8.splice(index, 1);
         }
       }
       function fire(event, args) {
         const cb = event;
-        plugins9.forEach(function(plugin) {
+        plugins8.forEach(function(plugin) {
           if (plugin[cb]) {
             plugin[cb](args);
           }
@@ -69438,7 +69438,6 @@ var DeesInputText = class extends DeesElement {
     super(...arguments);
     // INSTANCE
     this.changeSubject = new smartrx_plugins_rxjs_exports.Subject();
-    this.valueChangeSubject = new smartrx_plugins_rxjs_exports.Subject();
     this.value = "";
     this.required = false;
     this.disabled = false;
@@ -69530,7 +69529,6 @@ var DeesInputText = class extends DeesElement {
     const target = eventArg.target;
     this.value = target.value;
     this.changeSubject.next(this);
-    this.valueChangeSubject.next(this.value);
   }
   async freeze() {
     this.disabled = true;
@@ -69838,12 +69836,733 @@ DeesInputRadio = __decorateClass([
   e7("dees-input-radio")
 ], DeesInputRadio);
 
+// ts_web/elements/dees-table.demo.ts
+var demoFunc5 = () => x`
+  <style>
+    .demoWrapper {
+      box-sizing: border-box;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding: 20px;
+      background: #000000;
+    }
+  </style>
+  <div class="demoWrapper">
+    <dees-table
+      heading1="Current Account Statement"
+      heading2="Bunq - Payment Account 2 - April 2021"
+      .editableFields="${["description"]}"
+      .data=${[
+  {
+    date: "2021-04-01",
+    amount: "2464.65 \u20AC",
+    description: "Printing Paper (Office Supplies) - STAPLES BREMEN"
+  },
+  {
+    date: "2021-04-02",
+    amount: "165.65 \u20AC",
+    description: "Logitech Mouse (Hardware) - logi.com OnlineShop"
+  },
+  {
+    date: "2021-04-03",
+    amount: "2999,00 \u20AC",
+    description: "Macbook Pro 16inch (Hardware) - Apple.de OnlineShop"
+  },
+  {
+    date: "2021-04-01",
+    amount: "2464.65 \u20AC",
+    description: "Office-Supplies - STAPLES BREMEN"
+  },
+  {
+    date: "2021-04-01",
+    amount: "2464.65 \u20AC",
+    description: "Office-Supplies - STAPLES BREMEN"
+  }
+]}
+      dataName="transactions"
+      .dataActions="${[
+  {
+    name: "upload",
+    iconName: "bell",
+    useTableBehaviour: "upload",
+    type: ["inRow"],
+    actionFunc: async (optionsArg) => {
+      alert(optionsArg.item.amount);
+    }
+  },
+  {
+    name: "visibility",
+    iconName: "copy",
+    type: ["inRow"],
+    useTableBehaviour: "preview",
+    actionFunc: async (itemArg) => {
+    }
+  },
+  {
+    name: "create new",
+    iconName: "instagram",
+    type: ["header"],
+    useTableBehaviour: "preview",
+    actionFunc: async (itemArg) => {
+    }
+  },
+  {
+    name: "to gallery",
+    iconName: "message",
+    type: ["footer"],
+    useTableBehaviour: "preview",
+    actionFunc: async (itemArg) => {
+    }
+  },
+  {
+    name: "copy",
+    iconName: "copySolid",
+    type: ["contextmenu", "inRow"],
+    action: async () => {
+      return null;
+    }
+  },
+  {
+    name: "edit (from demo)",
+    iconName: "penToSquare",
+    type: ["contextmenu"],
+    action: async () => {
+      return null;
+    }
+  },
+  {
+    name: "paste",
+    iconName: "pasteSolid",
+    type: ["contextmenu"],
+    action: async () => {
+      return null;
+    }
+  },
+  {
+    name: "preview",
+    type: ["doubleClick", "contextmenu"],
+    iconName: "eye",
+    actionFunc: async (itemArg) => {
+      alert(itemArg.item.amount);
+      return null;
+    }
+  }
+]}"
+      .displayFunction=${(itemArg) => {
+  return {
+    ...itemArg,
+    onlyDisplayProp: "onlyDisplay"
+  };
+}}
+      >This is a slotted Text</dees-table
+    >
+  </div>
+`;
+
+// ts_web/elements/dees-table.ts
+var DeesTable = class extends DeesElement {
+  constructor() {
+    super();
+    this.heading1 = "heading 1";
+    this.heading2 = "heading 2";
+    this.data = [];
+    this.disabled = false;
+    this.required = false;
+    this.changeSubject = new smartrx_plugins_rxjs_exports.Subject();
+    this.dataActions = [];
+    this.displayFunction = (itemArg) => itemArg;
+    this.reverseDisplayFunction = (itemArg) => itemArg;
+    this.editableFields = [];
+    this.files = [];
+    this.fileWeakMap = /* @__PURE__ */ new WeakMap();
+    this.dataChangeSubject = new plugins.smartrx.rxjs.Subject();
+  }
+  get value() {
+    return this.data;
+  }
+  set value(valueArg) {
+  }
+  render() {
+    return x`
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div class="header">
+          <div class="headingContainer">
+            <div class="heading heading1">${this.label || this.heading1}</div>
+            <div class="heading heading2">${this.heading2}</div>
+          </div>
+          <div class="headerActions">
+            ${resolveExec(async () => {
+      const resultArray = [];
+      for (const action of this.dataActions) {
+        if (!action.type.includes("header"))
+          continue;
+        resultArray.push(
+          x`<div
+                    class="headerAction"
+                    @click=${() => {
+            action.actionFunc({
+              item: this.selectedDataRow,
+              table: this
+            });
+          }}
+                  >
+                    ${action.iconName ? x`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                          ${action.name}` : action.name}
+                  </div>`
+        );
+      }
+      return resultArray;
+    })}
+          </div>
+        </div>
+        <div class="headingSeparation"></div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0 ? (() => {
+      const firstTransformedItem = this.displayFunction(this.data[0]);
+      const headings = Object.keys(firstTransformedItem);
+      return x`
+                <table>
+                  <tr>
+                    ${headings.map(
+        (headingArg) => x`
+                        <th>
+                          <div class="innerCellContainer">${headingArg}</div>
+                        </th>
+                      `
+      )}
+                    ${(() => {
+        if (this.dataActions && this.dataActions.length > 0) {
+          return x`
+                          <th>
+                            <div class="innerCellContainer">Actions</div>
+                          </th>
+                        `;
+        }
+      })()}
+                  </tr>
+                  ${this.data.map((itemArg) => {
+        const transformedItem = this.displayFunction(itemArg);
+        const getTr = (elementArg) => {
+          if (elementArg.tagName === "TR") {
+            return elementArg;
+          } else {
+            return getTr(elementArg.parentElement);
+          }
+        };
+        return x`
+                      <tr
+                        @click=${() => {
+          this.selectedDataRow = itemArg;
+        }}
+                        @dragenter=${async (eventArg) => {
+          eventArg.preventDefault();
+          eventArg.stopPropagation();
+          const realTarget = getTr(eventArg.target);
+          console.log("dragenter");
+          console.log(realTarget);
+          setTimeout(() => {
+            realTarget.classList.add("hasAttachment");
+          }, 0);
+        }}
+                        @dragleave=${async (eventArg) => {
+          eventArg.preventDefault();
+          eventArg.stopPropagation();
+          const realTarget = getTr(eventArg.target);
+          realTarget.classList.remove("hasAttachment");
+        }}
+                        @dragover=${async (eventArg) => {
+          eventArg.preventDefault();
+        }}
+                        @drop=${async (eventArg) => {
+          eventArg.preventDefault();
+          const newFiles = [];
+          for (const file of Array.from(eventArg.dataTransfer.files)) {
+            this.files.push(file);
+            newFiles.push(file);
+            this.requestUpdate();
+          }
+          const result = this.fileWeakMap.get(itemArg);
+          if (!result) {
+            this.fileWeakMap.set(itemArg, newFiles);
+          } else {
+            result.push(...newFiles);
+          }
+        }}
+                        @contextmenu=${async (eventArg) => {
+          DeesContextmenu.openContextMenuWithOptions(
+            eventArg,
+            this.getActionsForType("contextmenu").map((action) => {
+              const menuItem = {
+                name: action.name,
+                iconName: action.iconName,
+                action: async () => {
+                  await action.actionFunc({
+                    item: itemArg,
+                    table: this
+                  });
+                  return null;
+                }
+              };
+              return menuItem;
+            })
+          );
+        }}
+                        class="${itemArg === this.selectedDataRow ? "selected" : ""}"
+                      >
+                        ${headings.map(
+          (headingArg) => x`
+                            <td
+                              @dblclick=${(e12) => {
+            if (this.editableFields.includes(headingArg)) {
+              this.handleCellEditing(e12, itemArg, headingArg);
+            } else {
+              const wantedAction = this.dataActions.find(
+                (actionArg) => actionArg.type.includes("doubleClick")
+              );
+              if (wantedAction) {
+                wantedAction.actionFunc({
+                  item: itemArg,
+                  table: this
+                });
+              }
+            }
+          }}
+                            >
+                              <div class="innerCellContainer">${transformedItem[headingArg]}</div>
+                            </td>
+                          `
+        )}
+                        ${(() => {
+          if (this.dataActions && this.dataActions.length > 0) {
+            return x`
+                              <td>
+                                <div class="innerCellContainer">
+                                  ${this.getActionsForType("inRow").map(
+              (actionArg) => x`<div
+                                      class="action"
+                                      @click=${() => actionArg.actionFunc({
+                item: itemArg,
+                table: this
+              })}
+                                    >
+                                      ${actionArg.iconName ? x`
+                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
+                                          ` : actionArg.name}
+                                    </div>`
+            )}
+                                </div>
+                              </td>
+                            `;
+          }
+        })()}
+                      </tr>
+                    `;
+      })}
+                </table>
+              `;
+    })() : x` <div class="noDataSet">No data set!</div> `}
+        <div class="footer">
+          <div class="tableStatistics">
+            ${this.data.length} ${this.dataName || "data rows"} (total) |
+            ${this.selectedDataRow ? `# ${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
+            selected
+          </div>
+          <div class="footerActions">
+            ${resolveExec(async () => {
+      const resultArray = [];
+      for (const action of this.dataActions) {
+        if (!action.type.includes("footer"))
+          continue;
+        resultArray.push(
+          x`<div
+                    class="footerAction"
+                    @click=${() => {
+            action.actionFunc({
+              item: this.selectedDataRow,
+              table: this
+            });
+          }}
+                  >
+                    ${action.iconName ? x`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                          ${action.name}` : action.name}
+                  </div>`
+        );
+      }
+      return resultArray;
+    })}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  async firstUpdated() {
+  }
+  async updated(changedProperties) {
+    super.updated(changedProperties);
+    this.determineColumnWidths();
+  }
+  async determineColumnWidths() {
+    const domtools6 = await this.domtoolsPromise;
+    await domtools6.convenience.smartdelay.delayFor(0);
+    const table = this.shadowRoot.querySelector("table");
+    if (!table)
+      return;
+    const cells = table.rows[0].cells;
+    const handleColumnByIndex = async (i8, waitForRenderArg = false) => {
+      const done = dist_ts_exports.defer();
+      const cell = cells[i8];
+      const width = window.getComputedStyle(cell).width;
+      if (cell.textContent.includes("Actions")) {
+        cell.style.minWidth = "68px";
+        cell.style.width = `${this.dataActions.filter((actionArg) => actionArg.type.includes("inRow")).length * 35}px`;
+      } else {
+        cell.style.width = width;
+      }
+      if (waitForRenderArg) {
+        requestAnimationFrame(() => {
+          done.resolve();
+        });
+        await done.promise;
+      }
+    };
+    if (cells[cells.length - 1].textContent.includes("Actions")) {
+      await handleColumnByIndex(cells.length - 1, true);
+    }
+    for (let i8 = 0; i8 < cells.length; i8++) {
+      if (cells[i8].textContent.includes("Actions")) {
+        continue;
+      }
+      await handleColumnByIndex(i8);
+    }
+    table.style.tableLayout = "fixed";
+  }
+  getActionsForType(typeArg) {
+    const actions = [];
+    for (const action of this.dataActions) {
+      if (!action.type.includes(typeArg))
+        continue;
+      actions.push(action);
+    }
+    return actions;
+  }
+  async handleCellEditing(event, itemArg, key) {
+    const domtools6 = await this.domtoolsPromise;
+    const target = event.target;
+    const originalColor = target.style.color;
+    target.style.color = "transparent";
+    const transformedItem = this.displayFunction(itemArg);
+    const initialValue = transformedItem[key] || "";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = initialValue;
+    const blurInput = async (blurArg = true, saveArg = false) => {
+      if (blurArg) {
+        input.blur();
+      }
+      if (saveArg) {
+        itemArg[key] = input.value;
+        this.changeSubject.next(this);
+      }
+      input.remove();
+      target.style.color = originalColor;
+      this.requestUpdate();
+    };
+    input.addEventListener("blur", () => {
+      blurInput(false, false);
+    });
+    input.addEventListener("keydown", (e12) => {
+      if (e12.key === "Enter") {
+        blurInput(true, true);
+      }
+    });
+    target.appendChild(input);
+    input.focus();
+  }
+};
+DeesTable.demo = demoFunc5;
+DeesTable.styles = [
+  cssManager.defaultStyles,
+  i`
+      .mainbox {
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 400;
+        font-size: 14px;
+        padding: 16px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: ${cssManager.bdTheme("#ffffff", "#333333")};
+        border-radius: 3px;
+        border-top: 1px solid ${cssManager.bdTheme("#fff", "#444")};
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+        overflow-x: auto;
+      }
+
+      .header {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-family: 'Roboto', 'Inter', sans-serif;
+      }
+
+      .headingContainer {
+      }
+
+      .heading {
+      }
+
+      .heading1 {
+        font-weight: 600;
+      }
+      .heading2 {
+        opacity: 0.6;
+      }
+
+      .headingSeparation {
+        margin-top: 7px;
+        border-bottom: 1px solid ${cssManager.bdTheme("#bcbcbc", "#bcbcbc")};
+      }
+
+      .headerActions {
+        margin-left: auto;
+        cursor: pointer;
+      }
+      .headerAction {
+        display: flex;
+        color: ${cssManager.bdTheme("#333", "#ccc")};
+      }
+
+      .headerAction:hover {
+        color: ${cssManager.bdTheme("#555", "#fff")};
+      }
+
+      .headerAction dees-icon {
+        margin-right: 8px;
+      }
+
+      table,
+      .noDataSet {
+        margin-top: 16px;
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        border-collapse: collapse;
+        width: 100%;
+      }
+      .noDataSet {
+        text-align: center;
+      }
+      tr {
+        border-bottom: 1px dashed ${cssManager.bdTheme("#999", "#808080")};
+        text-align: left;
+      }
+      tr:last-child {
+        border-bottom: none;
+        text-align: left;
+      }
+      tr:hover {
+        cursor: pointer;
+      }
+      tr:hover td {
+        background: ${cssManager.bdTheme("#22222210", "#ffffff10")};
+      }
+      tr:first-child:hover {
+        cursor: auto;
+      }
+      tr:first-child:hover .innerCellContainer {
+        background: none;
+      }
+      tr.selected td {
+        background: ${cssManager.bdTheme("#22222220", "#ffffff20")};
+      }
+
+      tr.hasAttachment td {
+        background: ${cssManager.bdTheme("#0098847c", "#0098847c")};
+      }
+
+      th {
+        text-transform: none;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 500;
+      }
+      th,
+      td {
+        position: relative;
+        vertical-align: top;
+
+        padding: 0px;
+        border-right: 1px dashed ${cssManager.bdTheme("#999", "#808080")};
+      }
+      .innerCellContainer {
+        min-height: 36px;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        padding: 6px 8px;
+        line-height: 24px;
+      }
+      th:first-child .innerCellContainer,
+      td:first-child .innerCellContainer {
+        padding-left: 0px;
+      }
+      th:last-child .innerCellContainer,
+      td:last-child .innerCellContainer {
+        padding-right: 0px;
+      }
+      th:last-child,
+      td:last-child {
+        border-right: none;
+      }
+      td input {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        border: 2px solid #fa6101;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        background: #fa610140;
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        padding: 0px 6px;
+      }
+
+      .action {
+        margin: -6px 0px;
+        padding: 10px;
+        line-height: 36px;
+        height: 36px;
+        display: inline-block;
+      }
+
+      .action:first-child {
+        margin-left: -8px;
+        width: min-content;
+      }
+
+      .action:hover {
+        background: ${cssManager.bdTheme("#CCC", "#00000030")};
+      }
+
+      .footer {
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#111", "#ffffff90")};
+        background: ${cssManager.bdTheme("#eeeeeb", "#00000050")};
+        margin: 16px -16px -16px -16px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        display: flex;
+      }
+
+      .tableStatistics {
+        padding: 8px 16px;
+      }
+
+      .footerActions {
+        margin-left: auto;
+      }
+
+      .footerActions .footerAction {
+        cursor: pointer;
+        padding: 8px 16px;
+        display: flex;
+      }
+
+      .footerActions .footerAction:hover {
+        background: ${cssManager.bdTheme("#CCC", "#111")};
+      }
+
+      .footerActions dees-icon {
+        display: flex;
+        margin-right: 8px;
+      }
+    `
+];
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesTable.prototype, "heading1", 2);
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesTable.prototype, "heading2", 2);
+__decorateClass([
+  n5({
+    type: Array
+  })
+], DeesTable.prototype, "data", 2);
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesTable.prototype, "key", 2);
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesTable.prototype, "label", 2);
+__decorateClass([
+  n5({
+    type: Boolean
+  })
+], DeesTable.prototype, "disabled", 2);
+__decorateClass([
+  n5({
+    type: Boolean
+  })
+], DeesTable.prototype, "required", 2);
+__decorateClass([
+  n5({
+    type: String,
+    reflect: true
+  })
+], DeesTable.prototype, "dataName", 2);
+__decorateClass([
+  n5({
+    type: Array
+  })
+], DeesTable.prototype, "dataActions", 2);
+__decorateClass([
+  n5({
+    attribute: false
+  })
+], DeesTable.prototype, "displayFunction", 2);
+__decorateClass([
+  n5({
+    attribute: false
+  })
+], DeesTable.prototype, "reverseDisplayFunction", 2);
+__decorateClass([
+  n5({
+    type: Object
+  })
+], DeesTable.prototype, "selectedDataRow", 2);
+__decorateClass([
+  n5({
+    type: Array
+  })
+], DeesTable.prototype, "editableFields", 2);
+DeesTable = __decorateClass([
+  e7("dees-table")
+], DeesTable);
+
 // ts_web/elements/dees-form.ts
 var FORM_INPUT_TYPES = [
   DeesInputCheckbox,
   DeesInputText,
   DeesInputQuantitySelector,
-  DeesInputRadio
+  DeesInputRadio,
+  DeesTable
 ];
 var DeesForm = class extends DeesElement {
   constructor() {
@@ -70061,7 +70780,7 @@ DeesFormSubmit = __decorateClass([
 ], DeesFormSubmit);
 
 // ts_web/elements/dees-hint.demo.ts
-var demoFunc5 = () => x`
+var demoFunc6 = () => x`
   <dees-hint></dees-hint>
 `;
 
@@ -70076,7 +70795,7 @@ var DeesHint = class extends DeesElement {
     return x` <div class="mainbox"></div> `;
   }
 };
-DeesHint.demo = demoFunc5;
+DeesHint.demo = demoFunc6;
 DeesHint.styles = [cssManager.defaultStyles, i``];
 __decorateClass([
   n5({ type: String })
@@ -72546,8 +73265,8 @@ var SvgSymbols = {
     };
   }
 };
-var plugins4 = [InjectCSS, ReplaceElements, Layers, LayersCounter, LayersText, PseudoElements, MutationObserver$1, PowerTransforms, Masks, MissingIconIndicator, SvgSymbols];
-registerPlugins(plugins4, {
+var plugins5 = [InjectCSS, ReplaceElements, Layers, LayersCounter, LayersText, PseudoElements, MutationObserver$1, PowerTransforms, Masks, MissingIconIndicator, SvgSymbols];
+registerPlugins(plugins5, {
   mixoutsTo: api
 });
 var noAuto$1 = api.noAuto;
@@ -72820,7 +73539,7 @@ var faFileInvoice = {
 };
 
 // ts_web/elements/dees-icon.demo.ts
-var demoFunc6 = () => x`
+var demoFunc7 = () => x`
   <style>
     .demoContainer {
       
@@ -72954,7 +73673,7 @@ var DeesIcon = class extends DeesElement {
     }
   }
 };
-DeesIcon.demo = demoFunc6;
+DeesIcon.demo = demoFunc7;
 DeesIcon.styles = [
   cssManager.defaultStyles,
   i`
@@ -73511,7 +74230,7 @@ DeesMobilenavigation = __decorateClass([
 ], DeesMobilenavigation);
 
 // ts_web/elements/dees-modal.demo.ts
-var demoFunc7 = () => x`
+var demoFunc8 = () => x`
   <dees-button @click=${() => {
   DeesModal.createAndShow({
     heading: "This is a heading",
@@ -73616,7 +74335,7 @@ var DeesModal = class extends DeesElement {
   }
 };
 // STATIC
-DeesModal.demo = demoFunc7;
+DeesModal.demo = demoFunc8;
 DeesModal.styles = [
   cssManager.defaultStyles,
   i`
@@ -73799,7 +74518,7 @@ DeesPdf = __decorateClass([
 ], DeesPdf);
 
 // ts_web/elements/dees-simple-appdash.demo.ts
-var demoFunc8 = () => x`
+var demoFunc9 = () => x`
   <dees-simple-appdash>Hello there</dees-simple-appdash>
 `;
 
@@ -73825,7 +74544,7 @@ var DeesSimpleAppDash = class extends DeesElement {
   }
 };
 // STATIC
-DeesSimpleAppDash.demo = demoFunc8;
+DeesSimpleAppDash.demo = demoFunc9;
 DeesSimpleAppDash.styles = [
   cssManager.defaultStyles,
   i`
@@ -73862,7 +74581,7 @@ DeesSimpleAppDash = __decorateClass([
 ], DeesSimpleAppDash);
 
 // ts_web/elements/dees-simple-login.demo.ts
-var demoFunc9 = () => x` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;
+var demoFunc10 = () => x` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;
 
 // ts_web/elements/dees-simple-login.ts
 var DeesSimpleLogin = class extends DeesElement {
@@ -73919,7 +74638,7 @@ var DeesSimpleLogin = class extends DeesElement {
   }
 };
 // STATIC
-DeesSimpleLogin.demo = demoFunc9;
+DeesSimpleLogin.demo = demoFunc10;
 DeesSimpleLogin.styles = [
   cssManager.defaultStyles,
   i`
@@ -73984,1126 +74703,451 @@ var DeesSpeechbubble = class extends DeesElement {
     }
     globalThis.location.href = "https://launch.sh";
   }
-  async firstUpdated() {
-    if (!this.textContent) {
-      this.textContent = "Button";
-      this.performUpdate();
-    }
-  }
-};
-DeesSpeechbubble.demo = () => x` <dees-speechbubble></dees-speechbubble> `;
-DeesSpeechbubble.styles = [
-  cssManager.defaultStyles,
-  i`
-      :host {
-        position: relative;
-        display: block;
-        box-sizing: border-box;
-        color: ${cssManager.bdTheme("#333", "#fff")};
-        cursor: pointer;
-        user-select: none;
-      }
-      :host([hidden]) {
-        display: none;
-      }
-
-      .maincontainer {
-        will-change: transform;
-        transition: transform 0.2s;
-        transform: translateX(0px);
-        position: relative;
-        transition: all 0.2s;
-        margin-left: 0px;
-      }
-
-      .maincontainer:hover {
-        transform: translateX(3px);
-      }
-
-      .arrow {
-        position: absolute;
-        transform: rotate(45deg);
-        background: ${cssManager.bdTheme("#fff", "#333")};
-        height: 15px;
-        width: 15px;
-        left: 4px;
-        top: 5px;
-        border-radius: 2px;
-      }
-
-      .speechbubble {
-        background: ${cssManager.bdTheme("#fff", "#333")};
-        padding: 0px 10px;
-        border-radius: 3px;
-        position: absolute;
-        line-height: 25px;
-        font-size: 12px;
-        top: 0px;
-        left: 8px;
-      }
-
-      .wave {
-        animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
-        animation-duration: 2.5s; /* Change to speed up or slow down */
-        animation-iteration-count: infinite; /* Never stop waving :) */
-        transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
-        display: inline-block;
-      }
-
-      @keyframes wave-animation {
-        0% {
-          transform: rotate(0deg);
-        }
-        10% {
-          transform: rotate(14deg);
-        } /* The following five values can be played with to make the waving more or less extreme */
-        20% {
-          transform: rotate(-8deg);
-        }
-        30% {
-          transform: rotate(14deg);
-        }
-        40% {
-          transform: rotate(-4deg);
-        }
-        50% {
-          transform: rotate(10deg);
-        }
-        60% {
-          transform: rotate(0deg);
-        } /* Reset for the last half to pause */
-        100% {
-          transform: rotate(0deg);
-        }
-      }
-    `
-];
-__decorateClass([
-  n5()
-], DeesSpeechbubble.prototype, "text", 2);
-__decorateClass([
-  n5({
-    type: Boolean
-  })
-], DeesSpeechbubble.prototype, "disabled", 2);
-__decorateClass([
-  n5({
-    type: Boolean
-  })
-], DeesSpeechbubble.prototype, "isHidden", 2);
-__decorateClass([
-  n5({
-    type: String
-  })
-], DeesSpeechbubble.prototype, "status", 2);
-DeesSpeechbubble = __decorateClass([
-  e7("dees-speechbubble")
-], DeesSpeechbubble);
-
-// ts_web/elements/dees-spinner.ts
-var DeesSpinner = class extends DeesElement {
-  constructor() {
-    super();
-    this.size = 20;
-    this.bnw = false;
-    this.status = "normal";
-  }
-  render() {
-    return x`
-      <style>
-        #loading {
-          width: ${this.size}px;
-          height: ${this.size}px;
-        }
-        #loading.success {
-          color: ${cssManager.bdTheme(this.bnw ? "#333" : `#8bc34a`, this.bnw ? "#fff" : `#8bc34a`)};
-          
-        }
-        #loading.error {
-          color: ${cssManager.bdTheme(this.bnw ? "#333" : `#e64a19`, this.bnw ? "#fff" : `#e64a19`)};
-        }
-        dees-icon {
-          font-size: ${this.size}px;
-        }
-      </style>
-      <div class="${this.status}" id="loading">
-        ${(() => {
-      if (this.status === "success") {
-        return x`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${"circleCheck"}></dees-icon>`;
-      } else if (this.status === "error") {
-        return x`<dees-icon .iconFA=${"circleXmark"}></dees-icon>`;
-      }
-    })()}
-      </div>
-    `;
-  }
-};
-DeesSpinner.demo = () => x`
-    <dees-spinner></dees-spinner>
-    <dees-spinner status="success"></dees-spinner>
-    <dees-spinner status="error"></dees-spinner>
-    <dees-spinner size=${64} status="success"></dees-spinner>
-    <dees-spinner .size=${64} status="error"></dees-spinner>
-  `;
-DeesSpinner.styles = [
-  cssManager.defaultStyles,
-  i`
-      :host {
-        display: block;
-      }
-
-      #loading {
-        position: relative;
-        transition: none;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        background: #8bc34a00;
-        border: 3px solid ${cssManager.bdTheme("rgba(0, 0, 0, 0.1)", "rgba(255, 255, 255, 0.3)")};
-        border-radius: 50%;
-        border-top-color: ${cssManager.bdTheme("#333", "#fff")};
-        animation: spin 1s ease-in-out infinite;
-        -webkit-animation: spin 1s ease-in-out infinite;
-      }
-
-      #loading.success {
-        border: none;
-        border-radius: 50%;
-        animation: none;
-        -webkit-animation: none;
-      }
-
-      #loading.error {
-        border: none;
-        border-radius: 50%;
-        animation: none;
-        -webkit-animation: none;
-      }
-
-      @keyframes spin {
-        to {
-          -webkit-transform: rotate(360deg);
-        }
-      }
-      @-webkit-keyframes spin {
-        to {
-          -webkit-transform: rotate(360deg);
-        }
-      }
-
-      dees-icon {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-      }
-    `
-];
-__decorateClass([
-  n5({
-    type: Number
-  })
-], DeesSpinner.prototype, "size", 2);
-__decorateClass([
-  n5({
-    type: String
-  })
-], DeesSpinner.prototype, "bnw", 2);
-__decorateClass([
-  n5()
-], DeesSpinner.prototype, "status", 2);
-DeesSpinner = __decorateClass([
-  e7("dees-spinner")
-], DeesSpinner);
-
-// ts_web/elements/dees-stepper.ts
-var DeesStepper = class extends DeesElement {
-  constructor() {
-    super();
-    this.steps = [];
-    this.getIndexOfStep = (stepArg) => {
-      return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
-    };
-  }
-  render() {
-    return x`
-      <div class="stepperContainer">
-        ${this.steps.map(
-      (stepArg) => x`<div
-              class="step ${stepArg === this.selectedStep ? "selected" : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? "hiddenStep" : ""}"
-            >
-              ${this.getIndexOfStep(stepArg) > 0 ? x`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
-              <div class="stepCounter">
-                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
-                ${this.steps.length}
-              </div>
-              <div class="title">${stepArg.title}</div>
-              <div class="content">${stepArg.content}</div>
-            </div> `
-    )}
-      </div>
-    `;
-  }
-  async firstUpdated() {
-    await this.domtoolsPromise;
-    await this.domtools.convenience.smartdelay.delayFor(0);
-    this.selectedStep = this.steps[0];
-    this.setScrollStatus();
-  }
-  async updated() {
-    this.setScrollStatus();
-  }
-  async setScrollStatus() {
-    const stepperContainer = this.shadowRoot.querySelector(".stepperContainer");
-    const firstStepElement = this.shadowRoot.querySelector(".step");
-    const selectedStepElement = this.shadowRoot.querySelector(".selected");
-    if (!selectedStepElement) {
-      return;
-    }
-    if (!stepperContainer.style.paddingTop) {
-      stepperContainer.style.paddingTop = `${stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2}px`;
-    }
-    console.log("Setting scroll status");
-    console.log(selectedStepElement);
-    const scrollPosition = selectedStepElement.offsetTop - stepperContainer.offsetHeight / 2 + selectedStepElement.offsetHeight / 2;
-    console.log(scrollPosition);
-    const domtoolsInstance = await DomTools.setupDomTools();
-    if (!this.scroller) {
-      this.scroller = new plugins.SweetScroll(
-        {
-          vertical: true,
-          horizontal: false,
-          easing: "easeInOutExpo",
-          duration: 700
-        },
-        stepperContainer
-      );
-    }
-    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
-      this.selectedStep.validationFuncCalled = true;
-      await this.selectedStep.validationFunc(this, selectedStepElement);
-    }
-    this.scroller.to(scrollPosition);
-  }
-  async goBack() {
-    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
-    this.selectedStep = this.steps[currentIndex - 1];
-    await this.domtoolsPromise;
-    await this.domtools.convenience.smartdelay.delayFor(100);
-    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector(".selected"));
-  }
-  goNext() {
-    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
-    this.selectedStep = this.steps[currentIndex + 1];
-  }
-};
-DeesStepper.demo = () => x`
-      <dees-stepper
-        .steps=${[
-  {
-    title: "Whats your name?",
-    content: x`
-              <dees-form>
-                <dees-input-text
-                  key="email"
-                  label="Your Email"
-                  value="hello@something.com"
-                  disabled
-                ></dees-input-text>
-                <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
-                <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
-                <dees-form-submit>Next</dees-form-submit>
-              </dees-form>
-            `,
-    validationFunc: async (stepperArg, elementArg) => {
-      const deesForm = elementArg.querySelector("dees-form");
-      deesForm.addEventListener("formData", (eventArg) => {
-        stepperArg.goNext();
-      });
+  async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = "Button";
+      this.performUpdate();
     }
-  },
-  {
-    title: "Whats your mobile number?",
-    content: x``
   }
-]}
-      ></dees-stepper>
-    `;
-DeesStepper.styles = [
+};
+DeesSpeechbubble.demo = () => x` <dees-speechbubble></dees-speechbubble> `;
+DeesSpeechbubble.styles = [
   cssManager.defaultStyles,
   i`
       :host {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .stepperContainer {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background: ${cssManager.bdTheme("#eeeeeb", "#000")};
-        overflow: hidden;
-      }
-
-      .step {
         position: relative;
-        pointer-events: none;
-        overflow: hidden;
-        transition: all 0.7s ease-in-out;
-        max-width: 500px;
-        min-height: 300px;
-        border-radius: 3px;
-        background: ${cssManager.bdTheme("#ffffff", "#181818")};
-        border-top: 1px solid ${cssManager.bdTheme("#ffffff", "#181818")};
+        display: block;
+        box-sizing: border-box;
         color: ${cssManager.bdTheme("#333", "#fff")};
-        margin: auto;
-        margin-bottom: 20px;
-        filter: opacity(0.5) grayscale(1);
-        box-shadow: 0px 0px 3px #00000010;
+        cursor: pointer;
         user-select: none;
       }
-
-      .step.selected {
-        border-top: 1px solid #e4002b;
-        pointer-events: all;
-        filter: opacity(1) grayscale(0);
-        box-shadow: 0px 0px 5px #00000010;
-        user-select: auto;
+      :host([hidden]) {
+        display: none;
       }
 
-      .step.hiddenStep {
-        filter: opacity(0);
+      .maincontainer {
+        will-change: transform;
+        transition: transform 0.2s;
+        transform: translateX(0px);
+        position: relative;
+        transition: all 0.2s;
+        margin-left: 0px;
       }
 
-      .step:last-child {
-        margin-bottom: 100vh;
+      .maincontainer:hover {
+        transform: translateX(3px);
       }
 
-      .step .stepCounter {
+      .arrow {
         position: absolute;
-        top: 0px;
-        right: 0px;
-        padding: 10px 15px;
-        font-size: 12px;
-        border-bottom-left-radius: 3px;
-        background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
+        transform: rotate(45deg);
+        background: ${cssManager.bdTheme("#fff", "#333")};
+        height: 15px;
+        width: 15px;
+        left: 4px;
+        top: 5px;
+        border-radius: 2px;
       }
 
-      .step .goBack {
+      .speechbubble {
+        background: ${cssManager.bdTheme("#fff", "#333")};
+        padding: 0px 10px;
+        border-radius: 3px;
         position: absolute;
-        top: 0px;
-        left: 0px;
-        padding: 10px 15px;
+        line-height: 25px;
         font-size: 12px;
-        border-bottom-right-radius: 3px;
-        background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
-        cursor: pointer;
-      }
-
-      .step .goBack:hover {
-        background: ${cssManager.bdTheme("#00000012", "#ffffff12")};
+        top: 0px;
+        left: 8px;
       }
 
-      .step .title {
-        text-align: center;
-        padding-top: 50px;
-        font-family: 'Roboto', 'Inter', sans-serif;
-        font-size: 25px;
-        font-weight: 300;
+      .wave {
+        animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
+        animation-duration: 2.5s; /* Change to speed up or slow down */
+        animation-iteration-count: infinite; /* Never stop waving :) */
+        transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
+        display: inline-block;
       }
 
-      .step .content {
-        padding: 20px;
+      @keyframes wave-animation {
+        0% {
+          transform: rotate(0deg);
+        }
+        10% {
+          transform: rotate(14deg);
+        } /* The following five values can be played with to make the waving more or less extreme */
+        20% {
+          transform: rotate(-8deg);
+        }
+        30% {
+          transform: rotate(14deg);
+        }
+        40% {
+          transform: rotate(-4deg);
+        }
+        50% {
+          transform: rotate(10deg);
+        }
+        60% {
+          transform: rotate(0deg);
+        } /* Reset for the last half to pause */
+        100% {
+          transform: rotate(0deg);
+        }
       }
     `
 ];
+__decorateClass([
+  n5()
+], DeesSpeechbubble.prototype, "text", 2);
 __decorateClass([
   n5({
-    type: Array
+    type: Boolean
   })
-], DeesStepper.prototype, "steps", 2);
+], DeesSpeechbubble.prototype, "disabled", 2);
 __decorateClass([
   n5({
-    type: Object
+    type: Boolean
   })
-], DeesStepper.prototype, "selectedStep", 2);
-DeesStepper = __decorateClass([
-  e7("dees-stepper")
-], DeesStepper);
-
-// ts_web/elements/dees-table.demo.ts
-var demoFunc10 = () => x`
-  <style>
-    .demoWrapper {
-      box-sizing: border-box;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      padding: 20px;
-      background: #000000;
-    }
-  </style>
-  <div class="demoWrapper">
-    <dees-table
-      heading1="Current Account Statement"
-      heading2="Bunq - Payment Account 2 - April 2021"
-      .editableFields="${["description"]}"
-      .data=${[
-  {
-    date: "2021-04-01",
-    amount: "2464.65 \u20AC",
-    description: "Printing Paper (Office Supplies) - STAPLES BREMEN"
-  },
-  {
-    date: "2021-04-02",
-    amount: "165.65 \u20AC",
-    description: "Logitech Mouse (Hardware) - logi.com OnlineShop"
-  },
-  {
-    date: "2021-04-03",
-    amount: "2999,00 \u20AC",
-    description: "Macbook Pro 16inch (Hardware) - Apple.de OnlineShop"
-  },
-  {
-    date: "2021-04-01",
-    amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
-  },
-  {
-    date: "2021-04-01",
-    amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
-  }
-]}
-      dataName="transactions"
-      .dataActions="${[
-  {
-    name: "upload",
-    iconName: "bell",
-    useTableBehaviour: "upload",
-    type: ["inRow"],
-    actionFunc: async (optionsArg) => {
-      alert(optionsArg.item.amount);
-    }
-  },
-  {
-    name: "visibility",
-    iconName: "copy",
-    type: ["inRow"],
-    useTableBehaviour: "preview",
-    actionFunc: async (itemArg) => {
-    }
-  },
-  {
-    name: "create new",
-    iconName: "instagram",
-    type: ["header"],
-    useTableBehaviour: "preview",
-    actionFunc: async (itemArg) => {
-    }
-  },
-  {
-    name: "to gallery",
-    iconName: "message",
-    type: ["footer"],
-    useTableBehaviour: "preview",
-    actionFunc: async (itemArg) => {
-    }
-  },
-  {
-    name: "copy",
-    iconName: "copySolid",
-    type: ["contextmenu", "inRow"],
-    action: async () => {
-      return null;
-    }
-  },
-  {
-    name: "edit (from demo)",
-    iconName: "penToSquare",
-    type: ["contextmenu"],
-    action: async () => {
-      return null;
-    }
-  },
-  {
-    name: "paste",
-    iconName: "pasteSolid",
-    type: ["contextmenu"],
-    action: async () => {
-      return null;
-    }
-  },
-  {
-    name: "preview",
-    type: ["doubleClick", "contextmenu"],
-    iconName: "eye",
-    actionFunc: async (itemArg) => {
-      alert(itemArg.item.amount);
-      return null;
-    }
-  }
-]}"
-      .displayFunction=${(itemArg) => {
-  return {
-    ...itemArg,
-    onlyDisplayProp: "onlyDisplay"
-  };
-}}
-      >This is a slotted Text</dees-table
-    >
-  </div>
-`;
+], DeesSpeechbubble.prototype, "isHidden", 2);
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesSpeechbubble.prototype, "status", 2);
+DeesSpeechbubble = __decorateClass([
+  e7("dees-speechbubble")
+], DeesSpeechbubble);
 
-// ts_web/elements/dees-table.ts
-var DeesTable = class extends DeesElement {
+// ts_web/elements/dees-spinner.ts
+var DeesSpinner = class extends DeesElement {
   constructor() {
     super();
-    this.heading1 = "heading 1";
-    this.heading2 = "heading 2";
-    this.data = [];
-    this.dataActions = [];
-    this.displayFunction = (itemArg) => itemArg;
-    this.reverseDisplayFunction = (itemArg) => itemArg;
-    this.editableFields = [];
-    this.files = [];
-    this.fileWeakMap = /* @__PURE__ */ new WeakMap();
-    this.dataChangeSubject = new plugins.smartrx.rxjs.Subject();
+    this.size = 20;
+    this.bnw = false;
+    this.status = "normal";
   }
   render() {
     return x`
-      <div class="mainbox">
-        <!-- the heading part -->
-        <div class="header">
-          <div class="headingContainer">
-            <div class="heading heading1">${this.heading1}</div>
-            <div class="heading heading2">${this.heading2}</div>
-          </div>
-          <div class="headerActions">
-            ${resolveExec(async () => {
-      const resultArray = [];
-      for (const action of this.dataActions) {
-        if (!action.type.includes("header"))
-          continue;
-        resultArray.push(
-          x`<div
-                    class="headerAction"
-                    @click=${() => {
-            action.actionFunc({
-              item: this.selectedDataRow,
-              table: this
-            });
-          }}
-                  >
-                    ${action.iconName ? x`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
-                          ${action.name}` : action.name}
-                  </div>`
-        );
-      }
-      return resultArray;
-    })}
-          </div>
-        </div>
-        <div class="headingSeparation"></div>
-
-        <!-- the actual table -->
-        <style></style>
-        ${this.data.length > 0 ? (() => {
-      const firstTransformedItem = this.displayFunction(this.data[0]);
-      const headings = Object.keys(firstTransformedItem);
-      return x`
-                <table>
-                  <tr>
-                    ${headings.map(
-        (headingArg) => x`
-                        <th>
-                          <div class="innerCellContainer">${headingArg}</div>
-                        </th>
-                      `
-      )}
-                    ${(() => {
-        if (this.dataActions && this.dataActions.length > 0) {
-          return x`
-                          <th>
-                            <div class="innerCellContainer">Actions</div>
-                          </th>
-                        `;
+      <style>
+        #loading {
+          width: ${this.size}px;
+          height: ${this.size}px;
         }
-      })()}
-                  </tr>
-                  ${this.data.map((itemArg) => {
-        const transformedItem = this.displayFunction(itemArg);
-        const getTr = (elementArg) => {
-          if (elementArg.tagName === "TR") {
-            return elementArg;
-          } else {
-            return getTr(elementArg.parentElement);
-          }
-        };
-        return x`
-                      <tr
-                        @click=${() => {
-          this.selectedDataRow = itemArg;
-        }}
-                        @dragenter=${async (eventArg) => {
-          eventArg.preventDefault();
-          eventArg.stopPropagation();
-          const realTarget = getTr(eventArg.target);
-          console.log("dragenter");
-          console.log(realTarget);
-          setTimeout(() => {
-            realTarget.classList.add("hasAttachment");
-          }, 0);
-        }}
-                        @dragleave=${async (eventArg) => {
-          eventArg.preventDefault();
-          eventArg.stopPropagation();
-          const realTarget = getTr(eventArg.target);
-          realTarget.classList.remove("hasAttachment");
-        }}
-                        @dragover=${async (eventArg) => {
-          eventArg.preventDefault();
-        }}
-                        @drop=${async (eventArg) => {
-          eventArg.preventDefault();
-          const newFiles = [];
-          for (const file of Array.from(eventArg.dataTransfer.files)) {
-            this.files.push(file);
-            newFiles.push(file);
-            this.requestUpdate();
-          }
-          const result = this.fileWeakMap.get(itemArg);
-          if (!result) {
-            this.fileWeakMap.set(itemArg, newFiles);
-          } else {
-            result.push(...newFiles);
-          }
-        }}
-                        @contextmenu=${async (eventArg) => {
-          DeesContextmenu.openContextMenuWithOptions(
-            eventArg,
-            this.getActionsForType("contextmenu").map((action) => {
-              const menuItem = {
-                name: action.name,
-                iconName: action.iconName,
-                action: async () => {
-                  await action.actionFunc({
-                    item: itemArg,
-                    table: this
-                  });
-                  return null;
-                }
-              };
-              return menuItem;
-            })
-          );
-        }}
-                        class="${itemArg === this.selectedDataRow ? "selected" : ""}"
-                      >
-                        ${headings.map(
-          (headingArg) => x`
-                            <td
-                              @dblclick=${(e12) => {
-            if (this.editableFields.includes(headingArg)) {
-              this.handleCellEditing(e12, itemArg, headingArg);
-            } else {
-              const wantedAction = this.dataActions.find(
-                (actionArg) => actionArg.type.includes("doubleClick")
-              );
-              if (wantedAction) {
-                wantedAction.actionFunc({
-                  item: itemArg,
-                  table: this
-                });
-              }
-            }
-          }}
-                            >
-                              <div class="innerCellContainer">${transformedItem[headingArg]}</div>
-                            </td>
-                          `
-        )}
-                        ${(() => {
-          if (this.dataActions && this.dataActions.length > 0) {
-            return x`
-                              <td>
-                                <div class="innerCellContainer">
-                                  ${this.getActionsForType("inRow").map(
-              (actionArg) => x`<div
-                                      class="action"
-                                      @click=${() => actionArg.actionFunc({
-                item: itemArg,
-                table: this
-              })}
-                                    >
-                                      ${actionArg.iconName ? x`
-                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
-                                          ` : actionArg.name}
-                                    </div>`
-            )}
-                                </div>
-                              </td>
-                            `;
-          }
-        })()}
-                      </tr>
-                    `;
-      })}
-                </table>
-              `;
-    })() : x` <div class="noDataSet">No data set!</div> `}
-        <div class="footer">
-          <div class="tableStatistics">
-            ${this.data.length} ${this.dataName || "data rows"} (total) |
-            ${this.selectedDataRow ? `# ${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
-            selected
-          </div>
-          <div class="footerActions">
-            ${resolveExec(async () => {
-      const resultArray = [];
-      for (const action of this.dataActions) {
-        if (!action.type.includes("footer"))
-          continue;
-        resultArray.push(
-          x`<div
-                    class="footerAction"
-                    @click=${() => {
-            action.actionFunc({
-              item: this.selectedDataRow,
-              table: this
-            });
-          }}
-                  >
-                    ${action.iconName ? x`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
-                          ${action.name}` : action.name}
-                  </div>`
-        );
+        #loading.success {
+          color: ${cssManager.bdTheme(this.bnw ? "#333" : `#8bc34a`, this.bnw ? "#fff" : `#8bc34a`)};
+          
+        }
+        #loading.error {
+          color: ${cssManager.bdTheme(this.bnw ? "#333" : `#e64a19`, this.bnw ? "#fff" : `#e64a19`)};
+        }
+        dees-icon {
+          font-size: ${this.size}px;
+        }
+      </style>
+      <div class="${this.status}" id="loading">
+        ${(() => {
+      if (this.status === "success") {
+        return x`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${"circleCheck"}></dees-icon>`;
+      } else if (this.status === "error") {
+        return x`<dees-icon .iconFA=${"circleXmark"}></dees-icon>`;
       }
-      return resultArray;
-    })}
-          </div>
-        </div>
+    })()}
       </div>
     `;
   }
-  async firstUpdated() {
-  }
-  async updated(changedProperties) {
-    super.updated(changedProperties);
-    this.freezeColumnWidths();
-  }
-  freezeColumnWidths() {
-    const table = this.shadowRoot.querySelector("table");
-    if (!table)
-      return;
-    let colgroup = table.querySelector("colgroup");
-    if (!colgroup) {
-      colgroup = document.createElement("colgroup");
-      table.insertBefore(colgroup, table.firstChild);
-    }
-    const cells = table.rows[0].cells;
-    for (let i8 = 0; i8 < cells.length; i8++) {
-      const cell = cells[i8];
-      const width = window.getComputedStyle(cell).width;
-      let col = colgroup.children[i8];
-      if (!col) {
-        col = document.createElement("col");
-        colgroup.appendChild(col);
-      }
-      col.style.width = width;
-    }
-  }
-  getActionsForType(typeArg) {
-    const actions = [];
-    for (const action of this.dataActions) {
-      if (!action.type.includes(typeArg))
-        continue;
-      actions.push(action);
-    }
-    return actions;
-  }
-  async handleCellEditing(event, itemArg, key) {
-    const domtools6 = await this.domtoolsPromise;
-    const target = event.target;
-    const originalColor = target.style.color;
-    target.style.color = "transparent";
-    const transformedItem = this.displayFunction(itemArg);
-    const initialValue = transformedItem[key] || "";
-    const input = document.createElement("input");
-    input.type = "text";
-    input.value = initialValue;
-    const blurInput = async (blurArg = true, saveArg = false) => {
-      if (blurArg) {
-        input.blur();
-      }
-      if (saveArg) {
-        itemArg[key] = input.value;
-      }
-      input.remove();
-      target.style.color = originalColor;
-      this.requestUpdate();
-    };
-    input.addEventListener("blur", () => {
-      blurInput(false, false);
-    });
-    input.addEventListener("keydown", (e12) => {
-      if (e12.key === "Enter") {
-        blurInput(true, true);
-      }
-    });
-    target.appendChild(input);
-    input.focus();
-  }
 };
-DeesTable.demo = demoFunc10;
-DeesTable.styles = [
+DeesSpinner.demo = () => x`
+    <dees-spinner></dees-spinner>
+    <dees-spinner status="success"></dees-spinner>
+    <dees-spinner status="error"></dees-spinner>
+    <dees-spinner size=${64} status="success"></dees-spinner>
+    <dees-spinner .size=${64} status="error"></dees-spinner>
+  `;
+DeesSpinner.styles = [
   cssManager.defaultStyles,
   i`
-      .mainbox {
-        color: ${cssManager.bdTheme("#333", "#fff")};
-        font-family: 'Roboto', 'Inter', sans-serif;
-        font-weight: 400;
-        font-size: 14px;
-        padding: 16px;
+      :host {
         display: block;
-        width: 100%;
-        min-height: 50px;
-        background: ${cssManager.bdTheme("#ffffff", "#333333")};
-        border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme("#fff", "#444")};
-        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
-        overflow-x: auto;
       }
 
-      .header {
+      #loading {
+        position: relative;
+        transition: none;
         display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        font-family: 'Roboto', 'Inter', sans-serif;
-      }
-
-      .headingContainer {
-      }
-
-      .heading {
-      }
-
-      .heading1 {
-        font-weight: 600;
-      }
-      .heading2 {
-        opacity: 0.6;
+        justify-content: center;
+        align-content: center;
+        background: #8bc34a00;
+        border: 3px solid ${cssManager.bdTheme("rgba(0, 0, 0, 0.1)", "rgba(255, 255, 255, 0.3)")};
+        border-radius: 50%;
+        border-top-color: ${cssManager.bdTheme("#333", "#fff")};
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
       }
 
-      .headingSeparation {
-        margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme("#bcbcbc", "#bcbcbc")};
+      #loading.success {
+        border: none;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
       }
 
-      .headerActions {
-        margin-left: auto;
-        cursor: pointer;
-      }
-      .headerAction {
-        display: flex;
-        color: ${cssManager.bdTheme("#333", "#ccc")};
+      #loading.error {
+        border: none;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
       }
 
-      .headerAction:hover {
-        color: ${cssManager.bdTheme("#555", "#fff")};
+      @keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
       }
-
-      .headerAction dees-icon {
-        margin-right: 8px;
+      @-webkit-keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
       }
 
-      table,
-      .noDataSet {
-        margin-top: 16px;
-        color: ${cssManager.bdTheme("#333", "#fff")};
-        border-collapse: collapse;
+      dees-icon {
+        position: absolute;
+        height: 100%;
         width: 100%;
       }
-      .noDataSet {
-        text-align: center;
-      }
-      tr {
-        border-bottom: 1px dashed ${cssManager.bdTheme("#999", "#808080")};
-        text-align: left;
-      }
-      tr:last-child {
-        border-bottom: none;
-        text-align: left;
-      }
-      tr:hover {
-        cursor: pointer;
-      }
-      tr:hover td {
-        background: ${cssManager.bdTheme("#22222210", "#ffffff10")};
-      }
-      tr:first-child:hover {
-        cursor: auto;
-      }
-      tr:first-child:hover .innerCellContainer {
-        background: none;
-      }
-      tr.selected td {
-        background: ${cssManager.bdTheme("#22222220", "#ffffff20")};
-      }
-
-      tr.hasAttachment td {
-        background: ${cssManager.bdTheme("#0098847c", "#0098847c")};
-      }
+    `
+];
+__decorateClass([
+  n5({
+    type: Number
+  })
+], DeesSpinner.prototype, "size", 2);
+__decorateClass([
+  n5({
+    type: String
+  })
+], DeesSpinner.prototype, "bnw", 2);
+__decorateClass([
+  n5()
+], DeesSpinner.prototype, "status", 2);
+DeesSpinner = __decorateClass([
+  e7("dees-spinner")
+], DeesSpinner);
 
-      th {
-        text-transform: none;
-        font-family: 'Roboto', 'Inter', sans-serif;
-        font-weight: 500;
-      }
-      th,
-      td {
-        position: relative;
-        padding: 0px;
-        border-right: 1px dashed ${cssManager.bdTheme("#999", "#808080")};
-      }
-      .innerCellContainer {
-        min-height: 36px;
-        position: relative;
-        height: 100%;
+// ts_web/elements/dees-stepper.ts
+var DeesStepper = class extends DeesElement {
+  constructor() {
+    super();
+    this.steps = [];
+    this.getIndexOfStep = (stepArg) => {
+      return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
+    };
+  }
+  render() {
+    return x`
+      <div class="stepperContainer">
+        ${this.steps.map(
+      (stepArg) => x`<div
+              class="step ${stepArg === this.selectedStep ? "selected" : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? "hiddenStep" : ""}"
+            >
+              ${this.getIndexOfStep(stepArg) > 0 ? x`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
+              <div class="stepCounter">
+                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+                ${this.steps.length}
+              </div>
+              <div class="title">${stepArg.title}</div>
+              <div class="content">${stepArg.content}</div>
+            </div> `
+    )}
+      </div>
+    `;
+  }
+  async firstUpdated() {
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(0);
+    this.selectedStep = this.steps[0];
+    this.setScrollStatus();
+  }
+  async updated() {
+    this.setScrollStatus();
+  }
+  async setScrollStatus() {
+    const stepperContainer = this.shadowRoot.querySelector(".stepperContainer");
+    const firstStepElement = this.shadowRoot.querySelector(".step");
+    const selectedStepElement = this.shadowRoot.querySelector(".selected");
+    if (!selectedStepElement) {
+      return;
+    }
+    if (!stepperContainer.style.paddingTop) {
+      stepperContainer.style.paddingTop = `${stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2}px`;
+    }
+    console.log("Setting scroll status");
+    console.log(selectedStepElement);
+    const scrollPosition = selectedStepElement.offsetTop - stepperContainer.offsetHeight / 2 + selectedStepElement.offsetHeight / 2;
+    console.log(scrollPosition);
+    const domtoolsInstance = await DomTools.setupDomTools();
+    if (!this.scroller) {
+      this.scroller = new plugins.SweetScroll(
+        {
+          vertical: true,
+          horizontal: false,
+          easing: "easeInOutExpo",
+          duration: 700
+        },
+        stepperContainer
+      );
+    }
+    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+      this.selectedStep.validationFuncCalled = true;
+      await this.selectedStep.validationFunc(this, selectedStepElement);
+    }
+    this.scroller.to(scrollPosition);
+  }
+  async goBack() {
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+    this.selectedStep = this.steps[currentIndex - 1];
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(100);
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector(".selected"));
+  }
+  goNext() {
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+    this.selectedStep = this.steps[currentIndex + 1];
+  }
+};
+DeesStepper.demo = () => x`
+      <dees-stepper
+        .steps=${[
+  {
+    title: "Whats your name?",
+    content: x`
+              <dees-form>
+                <dees-input-text
+                  key="email"
+                  label="Your Email"
+                  value="hello@something.com"
+                  disabled
+                ></dees-input-text>
+                <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
+                <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
+                <dees-form-submit>Next</dees-form-submit>
+              </dees-form>
+            `,
+    validationFunc: async (stepperArg, elementArg) => {
+      const deesForm = elementArg.querySelector("dees-form");
+      deesForm.addEventListener("formData", (eventArg) => {
+        stepperArg.goNext();
+      });
+    }
+  },
+  {
+    title: "Whats your mobile number?",
+    content: x``
+  }
+]}
+      ></dees-stepper>
+    `;
+DeesStepper.styles = [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        position: absolute;
         width: 100%;
-        padding: 6px 8px;
-        line-height: 24px;
-      }
-      th:first-child .innerCellContainer,
-      td:first-child .innerCellContainer {
-        padding-left: 0px;
-      }
-      th:last-child .innerCellContainer,
-      td:last-child .innerCellContainer {
-        padding-right: 0px;
-      }
-      th:last-child,
-      td:last-child {
-        border-right: none;
+        height: 100%;
       }
-      td input {
+      .stepperContainer {
+        position: absolute;
         width: 100%;
         height: 100%;
-        outline: none;
-        border: 2px solid #fa6101;
-        top: 0px;
-        bottom: 0px;
-        right: 0px;
-        left: 0px;
-        position: absolute;
-        background: #fa610140;
-        color: ${cssManager.bdTheme("#333", "#fff")};
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        padding: 0px 6px;
+        background: ${cssManager.bdTheme("#eeeeeb", "#000")};
+        overflow: hidden;
       }
 
-      .action {
-        margin: -6px 0px;
-        padding: 10px;
-        line-height: 36px;
-        height: 36px;
-        display: inline-block;
+      .step {
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        transition: all 0.7s ease-in-out;
+        max-width: 500px;
+        min-height: 300px;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme("#ffffff", "#181818")};
+        border-top: 1px solid ${cssManager.bdTheme("#ffffff", "#181818")};
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        margin: auto;
+        margin-bottom: 20px;
+        filter: opacity(0.5) grayscale(1);
+        box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
       }
 
-      .action:first-child {
-        margin-left: -8px;
-        width: min-content;
+      .step.selected {
+        border-top: 1px solid #e4002b;
+        pointer-events: all;
+        filter: opacity(1) grayscale(0);
+        box-shadow: 0px 0px 5px #00000010;
+        user-select: auto;
       }
 
-      .action:hover {
-        background: ${cssManager.bdTheme("#CCC", "#00000030")};
+      .step.hiddenStep {
+        filter: opacity(0);
       }
 
-      .footer {
-        font-family: 'Roboto', 'Inter', sans-serif;
-        font-size: 14px;
-        color: ${cssManager.bdTheme("#111", "#ffffff90")};
-        background: ${cssManager.bdTheme("#eeeeeb", "#00000050")};
-        margin: 16px -16px -16px -16px;
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-        display: flex;
+      .step:last-child {
+        margin-bottom: 100vh;
       }
 
-      .tableStatistics {
-        padding: 8px 16px;
+      .step .stepCounter {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-left-radius: 3px;
+        background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
       }
 
-      .footerActions {
-        margin-left: auto;
+      .step .goBack {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-right-radius: 3px;
+        background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
+        cursor: pointer;
       }
 
-      .footerActions .footerAction {
-        cursor: pointer;
-        padding: 8px 16px;
-        display: flex;
+      .step .goBack:hover {
+        background: ${cssManager.bdTheme("#00000012", "#ffffff12")};
       }
 
-      .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme("#CCC", "#111")};
+      .step .title {
+        text-align: center;
+        padding-top: 50px;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-size: 25px;
+        font-weight: 300;
       }
 
-      .footerActions dees-icon {
-        display: flex;
-        margin-right: 8px;
+      .step .content {
+        padding: 20px;
       }
     `
 ];
-__decorateClass([
-  n5({
-    type: String
-  })
-], DeesTable.prototype, "heading1", 2);
-__decorateClass([
-  n5({
-    type: String
-  })
-], DeesTable.prototype, "heading2", 2);
-__decorateClass([
-  n5({
-    type: Array
-  })
-], DeesTable.prototype, "data", 2);
-__decorateClass([
-  n5({
-    type: String,
-    reflect: true
-  })
-], DeesTable.prototype, "dataName", 2);
 __decorateClass([
   n5({
     type: Array
   })
-], DeesTable.prototype, "dataActions", 2);
-__decorateClass([
-  n5({
-    attribute: false
-  })
-], DeesTable.prototype, "displayFunction", 2);
-__decorateClass([
-  n5({
-    attribute: false
-  })
-], DeesTable.prototype, "reverseDisplayFunction", 2);
+], DeesStepper.prototype, "steps", 2);
 __decorateClass([
   n5({
     type: Object
   })
-], DeesTable.prototype, "selectedDataRow", 2);
-__decorateClass([
-  n5({
-    type: Array
-  })
-], DeesTable.prototype, "editableFields", 2);
-DeesTable = __decorateClass([
-  e7("dees-table")
-], DeesTable);
+], DeesStepper.prototype, "selectedStep", 2);
+DeesStepper = __decorateClass([
+  e7("dees-stepper")
+], DeesStepper);
 
 // ts_web/elements/dees-toast.demo.ts
 var demoFunc11 = async () => {