@design.estate/dees-catalog 1.0.188 → 1.0.190

package/dist_watch/bundle.js

@@ -8492,7 +8492,7 @@ var require_core = __commonJS({
     var HLJS = function(hljs) {
       const languages = /* @__PURE__ */ Object.create(null);
       const aliases = /* @__PURE__ */ Object.create(null);
-      const plugins5 = [];
+      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: [] };
@@ -9061,17 +9061,17 @@ var require_core = __commonJS({
       }
       function addPlugin(plugin) {
         upgradePluginAPI(plugin);
-        plugins5.push(plugin);
+        plugins8.push(plugin);
       }
       function removePlugin(plugin) {
-        const index = plugins5.indexOf(plugin);
+        const index = plugins8.indexOf(plugin);
         if (index !== -1) {
-          plugins5.splice(index, 1);
+          plugins8.splice(index, 1);
         }
       }
       function fire(event, args) {
         const cb = event;
-        plugins5.forEach(function(plugin) {
+        plugins8.forEach(function(plugin) {
           if (plugin[cb]) {
             plugin[cb](args);
           }
@@ -59178,7 +59178,7 @@ var Action = function(_super) {
   function Action2(scheduler, work) {
     return _super.call(this) || this;
   }
-  Action2.prototype.schedule = function(state5, delay) {
+  Action2.prototype.schedule = function(state6, delay) {
     if (delay === void 0) {
       delay = 0;
     }
@@ -59217,7 +59217,7 @@ var AsyncAction = function(_super) {
     _this.pending = false;
     return _this;
   }
-  AsyncAction2.prototype.schedule = function(state5, delay) {
+  AsyncAction2.prototype.schedule = function(state6, delay) {
     var _a2;
     if (delay === void 0) {
       delay = 0;
@@ -59225,7 +59225,7 @@ var AsyncAction = function(_super) {
     if (this.closed) {
       return this;
     }
-    this.state = state5;
+    this.state = state6;
     var id = this.id;
     var scheduler = this.scheduler;
     if (id != null) {
@@ -59254,23 +59254,23 @@ var AsyncAction = function(_super) {
     }
     return void 0;
   };
-  AsyncAction2.prototype.execute = function(state5, delay) {
+  AsyncAction2.prototype.execute = function(state6, delay) {
     if (this.closed) {
       return new Error("executing a cancelled action");
     }
     this.pending = false;
-    var error = this._execute(state5, delay);
+    var error = this._execute(state6, delay);
     if (error) {
       return error;
     } else if (this.pending === false && this.id != null) {
       this.id = this.recycleAsyncId(this.scheduler, this.id, null);
     }
   };
-  AsyncAction2.prototype._execute = function(state5, _delay) {
+  AsyncAction2.prototype._execute = function(state6, _delay) {
     var errored = false;
     var errorValue;
     try {
-      this.work(state5);
+      this.work(state6);
     } catch (e12) {
       errored = true;
       errorValue = e12 ? e12 : new Error("Scheduled action threw falsy error");
@@ -59306,11 +59306,11 @@ var Scheduler = function() {
     this.schedulerActionCtor = schedulerActionCtor;
     this.now = now2;
   }
-  Scheduler2.prototype.schedule = function(work, delay, state5) {
+  Scheduler2.prototype.schedule = function(work, delay, state6) {
     if (delay === void 0) {
       delay = 0;
     }
-    return new this.schedulerActionCtor(this, work).schedule(state5, delay);
+    return new this.schedulerActionCtor(this, work).schedule(state6, delay);
   };
   Scheduler2.now = dateTimestampProvider.now;
   return Scheduler2;
@@ -64077,18 +64077,18 @@ var isNode = Object.prototype.toString.call(typeof process !== "undefined" ? pro
 var microSeconds2 = microSeconds;
 var type = "native";
 function create(channelName) {
-  var state5 = {
+  var state6 = {
     messagesCallback: null,
     bc: new BroadcastChannel(channelName),
     subFns: []
     // subscriberFunctions
   };
-  state5.bc.onmessage = function(msg) {
-    if (state5.messagesCallback) {
-      state5.messagesCallback(msg.data);
+  state6.bc.onmessage = function(msg) {
+    if (state6.messagesCallback) {
+      state6.messagesCallback(msg.data);
     }
   };
-  return state5;
+  return state6;
 }
 function close(channelState) {
   channelState.bc.close();
@@ -64332,7 +64332,7 @@ function cleanOldMessages(db, ttl) {
 function create2(channelName, options) {
   options = fillOptionsWithDefaults(options);
   return createDatabase(channelName).then(function(db) {
-    var state5 = {
+    var state6 = {
       closed: false,
       lastCursorId: 0,
       channelName,
@@ -64351,54 +64351,54 @@ function create2(channelName, options) {
       db
     };
     db.onclose = function() {
-      state5.closed = true;
+      state6.closed = true;
       if (options.idb.onclose)
         options.idb.onclose();
     };
-    _readLoop(state5);
-    return state5;
+    _readLoop(state6);
+    return state6;
   });
 }
-function _readLoop(state5) {
-  if (state5.closed)
+function _readLoop(state6) {
+  if (state6.closed)
     return;
-  readNewMessages(state5).then(function() {
-    return sleep(state5.options.idb.fallbackInterval);
+  readNewMessages(state6).then(function() {
+    return sleep(state6.options.idb.fallbackInterval);
   }).then(function() {
-    return _readLoop(state5);
+    return _readLoop(state6);
   });
 }
-function _filterMessage(msgObj, state5) {
-  if (msgObj.uuid === state5.uuid)
+function _filterMessage(msgObj, state6) {
+  if (msgObj.uuid === state6.uuid)
     return false;
-  if (state5.eMIs.has(msgObj.id))
+  if (state6.eMIs.has(msgObj.id))
     return false;
-  if (msgObj.data.time < state5.messagesCallbackTime)
+  if (msgObj.data.time < state6.messagesCallbackTime)
     return false;
   return true;
 }
-function readNewMessages(state5) {
-  if (state5.closed)
+function readNewMessages(state6) {
+  if (state6.closed)
     return Promise.resolve();
-  if (!state5.messagesCallback)
+  if (!state6.messagesCallback)
     return Promise.resolve();
-  return getMessagesHigherThan(state5.db, state5.lastCursorId).then(function(newerMessages) {
+  return getMessagesHigherThan(state6.db, state6.lastCursorId).then(function(newerMessages) {
     var useMessages = newerMessages.filter(function(msgObj) {
       return !!msgObj;
     }).map(function(msgObj) {
-      if (msgObj.id > state5.lastCursorId) {
-        state5.lastCursorId = msgObj.id;
+      if (msgObj.id > state6.lastCursorId) {
+        state6.lastCursorId = msgObj.id;
       }
       return msgObj;
     }).filter(function(msgObj) {
-      return _filterMessage(msgObj, state5);
+      return _filterMessage(msgObj, state6);
     }).sort(function(msgObjA, msgObjB) {
       return msgObjA.time - msgObjB.time;
     });
     useMessages.forEach(function(msgObj) {
-      if (state5.messagesCallback) {
-        state5.eMIs.add(msgObj.id);
-        state5.messagesCallback(msgObj.data);
+      if (state6.messagesCallback) {
+        state6.eMIs.add(msgObj.id);
+        state6.messagesCallback(msgObj.data);
       }
     });
     return Promise.resolve();
@@ -64504,25 +64504,25 @@ function create3(channelName, options) {
   }
   var uuid = randomToken();
   var eMIs = new ObliviousSet(options.localstorage.removeTimeout);
-  var state5 = {
+  var state6 = {
     channelName,
     uuid,
     eMIs
     // emittedMessagesIds
   };
-  state5.listener = addStorageEventListener(channelName, function(msgObj) {
-    if (!state5.messagesCallback)
+  state6.listener = addStorageEventListener(channelName, function(msgObj) {
+    if (!state6.messagesCallback)
       return;
     if (msgObj.uuid === uuid)
       return;
     if (!msgObj.token || eMIs.has(msgObj.token))
       return;
-    if (msgObj.data.time && msgObj.data.time < state5.messagesCallbackTime)
+    if (msgObj.data.time && msgObj.data.time < state6.messagesCallbackTime)
       return;
     eMIs.add(msgObj.token);
-    state5.messagesCallback(msgObj.data);
+    state6.messagesCallback(msgObj.data);
   });
-  return state5;
+  return state6;
 }
 function close3(channelState) {
   removeStorageEventListener(channelState.listener);
@@ -64570,12 +64570,12 @@ var microSeconds5 = microSeconds;
 var type4 = "simulate";
 var SIMULATE_CHANNELS = /* @__PURE__ */ new Set();
 function create4(channelName) {
-  var state5 = {
+  var state6 = {
     name: channelName,
     messagesCallback: null
   };
-  SIMULATE_CHANNELS.add(state5);
-  return state5;
+  SIMULATE_CHANNELS.add(state6);
+  return state6;
 }
 function close4(channelState) {
   SIMULATE_CHANNELS["delete"](channelState);
@@ -68071,11 +68071,11 @@ var SmartRouter = class {
   /**
    * Push route state to history stack
    */
-  async pushUrl(url3 = "/", state5 = {}) {
+  async pushUrl(url3 = "/", state6 = {}) {
     if (url3 !== window.location.pathname) {
-      window.history.pushState(state5, window.document.title, url3);
+      window.history.pushState(state6, window.document.title, url3);
     } else {
-      window.history.replaceState(state5, window.document.title, url3);
+      window.history.replaceState(state6, window.document.title, url3);
     }
     await this._handleRouteState();
   }
@@ -68205,7 +68205,7 @@ var StatePart = class {
    */
   select(selectorFn) {
     if (!selectorFn) {
-      selectorFn = (state5) => state5;
+      selectorFn = (state6) => state6;
     }
     const mapped = this.state.pipe(dist_ts_exports2.rxjs.ops.startWith(this.getState()), dist_ts_exports2.rxjs.ops.map((stateArg) => {
       try {
@@ -70707,6 +70707,7 @@ __export(elements_exports, {
   DeesInputText: () => DeesInputText,
   DeesMobilenavigation: () => DeesMobilenavigation,
   DeesPdf: () => DeesPdf,
+  DeesSimpleAppDash: () => DeesSimpleAppDash,
   DeesSimpleLogin: () => DeesSimpleLogin,
   DeesSpeechbubble: () => DeesSpeechbubble,
   DeesSpinner: () => DeesSpinner,
@@ -71063,6 +71064,65 @@ DeesChips = __decorateClass([
   e7("dees-chips")
 ], DeesChips);
 
+// ts_web/elements/dees-contextmenu.demo.ts
+var demoFunc = () => x`
+<style>
+  .withMargin {
+    display: block;
+    margin: 20px;
+  }
+</style>
+<dees-button @contextmenu=${(eventArg) => {
+  DeesContextmenu.openContextMenuWithOptions(eventArg, [
+    {
+      name: "copy",
+      iconName: "copySolid",
+      action: async () => {
+        return null;
+      }
+    },
+    {
+      name: "edit",
+      iconName: "penToSquare",
+      action: async () => {
+        return null;
+      }
+    },
+    {
+      name: "paste",
+      iconName: "pasteSolid",
+      action: async () => {
+        return null;
+      }
+    }
+  ]);
+}}>Hello</dees-button>
+<dees-contextmenu class="withMargin"></dees-contextmenu>
+<dees-contextmenu
+  class="withMargin"
+  .menuItems=${[
+  {
+    name: "copy",
+    iconName: "copySolid",
+    action: async () => {
+    }
+  },
+  {
+    name: "edit",
+    iconName: "penToSquare",
+    action: async () => {
+    }
+  },
+  {
+    name: "paste",
+    iconName: "pasteSolid",
+    action: async () => {
+    }
+  }
+]}
+></dees-contextmenu>
+`;
+
 // ts_web/elements/dees-windowlayer.ts
 var DeesWindowLayer = class extends DeesElement {
   constructor() {
@@ -71158,6 +71218,7 @@ var DeesContextmenu = class extends DeesElement {
   // STATIC
   static async openContextMenuWithOptions(eventArg, menuItemsArg) {
     eventArg.preventDefault();
+    eventArg.stopPropagation();
     const contextMenu = new DeesContextmenu();
     contextMenu.style.position = "absolute";
     contextMenu.style.zIndex = "2000";
@@ -71187,14 +71248,18 @@ var DeesContextmenu = class extends DeesElement {
             </div>
           `;
     })}
+        ${this.menuItems.length === 0 ? x`
+            <div class="menuitem" @click=${() => {
+      alert("No menu items...");
+    }}>
+              <dees-icon .iconFA=${"xmark"}></dees-icon
+              >No menu item present...
+            </div>
+        ` : x``}
       </div>
     `;
   }
   async firstUpdated() {
-    if (!this.menuItems || this.menuItems.length === 0) {
-      const mainbox = this.shadowRoot.querySelector(".mainbox");
-      mainbox.textContent = "no menu items present";
-    }
   }
   async handleClick(menuItem) {
     menuItem.action();
@@ -71211,63 +71276,7 @@ var DeesContextmenu = class extends DeesElement {
   }
 };
 // DEMO
-DeesContextmenu.demo = () => x`
-    <style>
-      .withMargin {
-        display: block;
-        margin: 20px;
-      }
-    </style>
-    <dees-button @contextmenu=${(eventArg) => {
-  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-    {
-      name: "copy",
-      iconName: "copySolid",
-      action: async () => {
-        return null;
-      }
-    },
-    {
-      name: "edit",
-      iconName: "penToSquare",
-      action: async () => {
-        return null;
-      }
-    },
-    {
-      name: "paste",
-      iconName: "pasteSolid",
-      action: async () => {
-        return null;
-      }
-    }
-  ]);
-}}>Hello</dees-button>
-    <dees-contextmenu class="withMargin"></dees-contextmenu>
-    <dees-contextmenu
-      class="withMargin"
-      .menuItems=${[
-  {
-    name: "copy",
-    iconName: "copySolid",
-    action: async () => {
-    }
-  },
-  {
-    name: "edit",
-    iconName: "penToSquare",
-    action: async () => {
-    }
-  },
-  {
-    name: "paste",
-    iconName: "pasteSolid",
-    action: async () => {
-    }
-  }
-]}
-    ></dees-contextmenu>
-  `;
+DeesContextmenu.demo = demoFunc;
 DeesContextmenu.styles = [
   cssManager.defaultStyles,
   i`
@@ -71281,7 +71290,7 @@ DeesContextmenu.styles = [
         font-size: 14px;
         width: 200px;
         border: 1px solid #444;
-        min-height: 40px;
+        min-height: 34px;
         border-radius: 3px;
         background: #222;
         box-shadow: 0px 1px 4px #000;
@@ -71320,7 +71329,7 @@ DeesContextmenu = __decorateClass([
 ], DeesContextmenu);
 
 // ts_web/elements/dees-dataview-codebox.demo.ts
-var demoFunc = () => x` <style>
+var demoFunc2 = () => x` <style>
 .demoWrapper {
   box-sizing: border-box;
   position: absolute;
@@ -71517,7 +71526,7 @@ var DeesDataviewCodebox = class extends DeesElement {
     localCodeNode.innerHTML = html.value;
   }
 };
-DeesDataviewCodebox.demo = demoFunc;
+DeesDataviewCodebox.demo = demoFunc2;
 __decorateClass([
   n5()
 ], DeesDataviewCodebox.prototype, "progLang", 2);
@@ -71535,7 +71544,7 @@ DeesDataviewCodebox = __decorateClass([
 ], DeesDataviewCodebox);
 
 // ts_web/elements/dees-dataview-statusobject.demo.ts
-var demoFunc2 = () => x`<dees-dataview-statusobject
+var demoFunc3 = () => x`<dees-dataview-statusobject
   .statusObject=${{
   id: "1",
   name: "Demo Item",
@@ -71598,7 +71607,7 @@ var DeesDataviewStatusobject = class extends DeesElement {
   async firstUpdated() {
   }
 };
-DeesDataviewStatusobject.demo = demoFunc2;
+DeesDataviewStatusobject.demo = demoFunc3;
 DeesDataviewStatusobject.styles = [
   cssManager.defaultStyles,
   i`
@@ -74951,8 +74960,8 @@ var SvgSymbols = {
     };
   }
 };
-var plugins3 = [InjectCSS, ReplaceElements, Layers, LayersCounter, LayersText, PseudoElements, MutationObserver$1, PowerTransforms, Masks, MissingIconIndicator, SvgSymbols];
-registerPlugins(plugins3, {
+var plugins4 = [InjectCSS, ReplaceElements, Layers, LayersCounter, LayersText, PseudoElements, MutationObserver$1, PowerTransforms, Masks, MissingIconIndicator, SvgSymbols];
+registerPlugins(plugins4, {
   mixoutsTo: api
 });
 var noAuto$1 = api.noAuto;
@@ -75923,6 +75932,72 @@ DeesPdf = __decorateClass([
   e7("dees-pdf")
 ], DeesPdf);
 
+// ts_web/elements/dees-simple-appdash.demo.ts
+var demoFunc4 = () => x`
+  <dees-simple-appdash>Hello there</dees-simple-appdash>
+`;
+
+// ts_web/elements/dees-simple-appdash.ts
+var DeesSimpleAppDash = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.title = "Dees Simple Login";
+  }
+  render() {
+    return x`
+      <div class="appbar">
+        configvault v1.2.3
+      </div>
+      <div class="appcontent">
+        <slot></slot>
+      </div>
+    `;
+  }
+  async firstUpdated(_changedProperties) {
+    const domtools6 = await this.domtoolsPromise;
+    super.firstUpdated(_changedProperties);
+  }
+};
+// STATIC
+DeesSimpleAppDash.demo = demoFunc4;
+DeesSimpleAppDash.styles = [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        user-select: none;
+      }
+      .appbar {
+        position: absolute;
+        top: 0;
+        height: 40px;
+        width: 100%;
+        background: ${cssManager.bdTheme("#eeeeeb", "#000")};
+        border-bottom: 1px solid ${cssManager.bdTheme("#ccc", "#333")};
+        font-size: 14px;
+        line-height: 40px;
+        font-family: 'Hubot Sans', 'Inter', sans-serif;
+        padding: 0px 16px;
+      }
+      .appcontent {
+        position: absolute;
+        top: 40px;
+        bottom: 0;
+        width: 100%;
+        background: ${cssManager.bdTheme("#eeeeeb", "#000")};
+      }
+    `
+];
+__decorateClass([
+  n5()
+], DeesSimpleAppDash.prototype, "title", 2);
+DeesSimpleAppDash = __decorateClass([
+  e7("dees-simple-appdash")
+], DeesSimpleAppDash);
+
+// ts_web/elements/dees-simple-login.demo.ts
+var demoFunc5 = () => x` <dees-simple-login> Hello there </dees-simple-login> `;
+
 // ts_web/elements/dees-simple-login.ts
 var DeesSimpleLogin = class extends DeesElement {
   constructor() {
@@ -75978,11 +76053,7 @@ var DeesSimpleLogin = class extends DeesElement {
   }
 };
 // STATIC
-DeesSimpleLogin.demo = () => x`
-    <dees-simple-login>
-      Hello there
-    </dees-simple-login>
-  `;
+DeesSimpleLogin.demo = demoFunc5;
 DeesSimpleLogin.styles = [
   cssManager.defaultStyles,
   i`
@@ -76493,6 +76564,120 @@ DeesStepper = __decorateClass([
   e7("dees-stepper")
 ], DeesStepper);
 
+// ts_web/elements/dees-table.demo.ts
+var demoFunc6 = () => 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"
+      .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 (itemArg) => {
+      alert(itemArg.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;
+    }
+  }
+]}"
+      .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() {
@@ -76518,7 +76703,7 @@ var DeesTable = class extends DeesElement {
             ${resolveExec(async () => {
       const resultArray = [];
       for (const action of this.dataActions) {
-        if (action.type !== "header")
+        if (!action.type.includes("header"))
           continue;
         resultArray.push(
           x`<div
@@ -76612,29 +76797,17 @@ var DeesTable = class extends DeesElement {
           }
         }}
                         @contextmenu=${async (eventArg) => {
-          DeesContextmenu.openContextMenuWithOptions(eventArg, [
-            {
-              name: "copy",
-              iconName: "copySolid",
-              action: async () => {
-                return null;
-              }
-            },
-            {
-              name: "edit",
-              iconName: "penToSquare",
-              action: async () => {
-                return null;
-              }
-            },
-            {
-              name: "paste",
-              iconName: "pasteSolid",
+          DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType("contextmenu").map((action) => {
+            const menuItem = {
+              name: action.name,
+              iconName: action.iconName,
               action: async () => {
+                await action.actionFunc(itemArg);
                 return null;
               }
-            }
-          ]);
+            };
+            return menuItem;
+          }));
         }}
                         class="${itemArg === this.selectedDataRow ? "selected" : ""}"
                       >
@@ -76650,24 +76823,16 @@ var DeesTable = class extends DeesElement {
             return x`
                               <td>
                                 <div class="innerCellContainer">
-                                  ${(() => {
-              const actions = [];
-              for (const action of this.dataActions) {
-                if (action.type !== "inRow")
-                  continue;
-                actions.push(
-                  x`<div
-                                          class="action"
-                                          @click=${() => action.actionFunc(itemArg)}
-                                        >
-                                          ${action.iconName ? x`
-                                                <dees-icon .iconFA=${action.iconName}></dees-icon>
-                                              ` : action.name}
-                                        </div>`
-                );
-              }
-              return actions;
-            })()}
+                                  ${this.getActionsForType("inRow").map(
+              (actionArg) => x`<div
+                                      class="action"
+                                      @click=${() => actionArg.actionFunc(itemArg)}
+                                    >
+                                      ${actionArg.iconName ? x`
+                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
+                                          ` : actionArg.name}
+                                    </div>`
+            )}
                                 </div>
                               </td>
                             `;
@@ -76689,7 +76854,7 @@ var DeesTable = class extends DeesElement {
             ${resolveExec(async () => {
       const resultArray = [];
       for (const action of this.dataActions) {
-        if (action.type !== "footer")
+        if (!action.type.includes("footer"))
           continue;
         resultArray.push(
           x`<div
@@ -76712,95 +76877,17 @@ var DeesTable = class extends DeesElement {
   }
   async firstUpdated() {
   }
-};
-DeesTable.demo = () => 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"
-        .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 (itemArg) => {
-      alert(itemArg.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) => {
+  getActionsForType(typeArg) {
+    const actions = [];
+    for (const action of this.dataActions) {
+      if (!action.type.includes(typeArg))
+        continue;
+      actions.push(action);
     }
+    return actions;
   }
-]}"
-        .displayFunction=${(itemArg) => {
-  return {
-    ...itemArg,
-    onlyDisplayProp: "onlyDisplay"
-  };
-}}
-        >This is a slotted Text</dees-table
-      >
-    </div>
-  `;
+};
+DeesTable.demo = demoFunc6;
 DeesTable.styles = [
   cssManager.defaultStyles,
   i`