1.0.202

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.195",
+  "version": "1.0.202",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.195',
+  version: '1.0.202',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-icon.ts

@@ -42,6 +42,7 @@ import {
   faCircleInfo as faCircleInfoSolid,
   faCircleCheck as faCircleCheckSolid,
   faCircleXmark as faCircleXmarkSolid,
+  faClockRotateLeft as faClockRotateLeftSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
   faEye as faEyeSolid,
@@ -82,6 +83,8 @@ export const faIcons = {
   circleCheckSolid: faCircleCheckSolid,
   circleXmark: faCircleXmarkRegular,
   circleXmarkSolid: faCircleXmarkSolid,
+  clockRotateLeft: faClockRotateLeftSolid,
+  clockRotateLeftSolid: faClockRotateLeftSolid,
   copy: faCopyRegular,
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
@@ -95,7 +98,7 @@ export const faIcons = {
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   mugHot: faMugHotSolid,
-  faMugHotSolid: faMugHotSolid,
+  mugHotSolid: faMugHotSolid,
   minus: faMinusSolid,
   minusSolid: faMinusSolid,
   paste: faPasteRegular,

ts_web/elements/dees-modal.ts

@@ -86,7 +86,7 @@ export class DeesModal extends DeesElement {
       }
       .modal {
         will-change: transform;
-        transform: translateY(10px);
+        transform: translateY(0px) scale(0.95);
         opacity: 0;
         width: 480px;
         min-height: 120px;
@@ -95,11 +95,17 @@ export class DeesModal extends DeesElement {
         border: 1px solid #222;
         transition: all 0.2s;
         overflow: hidden;
+        box-shadow: 0px 2px 5px #00000080;
       }
 
       .modal.show {
         opacity: 1;
-        transform: translateY(0px);
+        transform: translateY(0px) scale(1);
+      }
+
+      .modal.show.predestroy {
+        opacity: 0;
+        transform: translateY(10px) scale(1);
       }
 
       .modal .heading {
@@ -182,7 +188,7 @@ export class DeesModal extends DeesElement {
   public async destroy() {
     const domtools = await this.domtoolsPromise;
     const modal = this.shadowRoot.querySelector('.modal');
-    modal.classList.remove('show');
+    modal.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();

ts_web/elements/dees-table.demo.ts

@@ -2,6 +2,12 @@ import { type ITableAction } from './dees-table.js';
 import * as plugins from './plugins.js';
 import { html } from '@design.estate/dees-element';
 
+interface ITableDemoData {
+  date: string;
+  amount: string;
+  description: string;
+}
+
 export const demoFunc = () => html`
   <style>
     .demoWrapper {
@@ -51,7 +57,7 @@ export const demoFunc = () => html`
           iconName: 'bell',
           useTableBehaviour: 'upload',
           type: ['inRow'],
-          actionFunc: async (itemArg: any) => {
+          actionFunc: async (itemArg) => {
             alert(itemArg.amount);
           },
         },
@@ -100,7 +106,16 @@ export const demoFunc = () => html`
             return null;
           },
         },
-      ] as ITableAction[]}"
+        {
+          name: 'preview',
+          type: ['doubleClick', 'contextmenu'],
+          iconName: 'eye',
+          actionFunc: async (itemArg) => {
+            alert(itemArg.amount);
+            return null;
+          },
+        }
+      ] as (ITableAction<ITableDemoData>)[] as any}"
       .displayFunction=${(itemArg) => {
         return {
           ...itemArg,

ts_web/elements/dees-table.ts

@@ -37,7 +37,7 @@ export interface ITableAction<T = any> {
   /**
    * the type of the action
    */
-  type: ('inRow' | 'contextmenu' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
+  type: ('inRow' | 'contextmenu' | 'doubleClick' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
   /**
    * allows to check if the action is relevant for the given item
    * @param itemArg
@@ -84,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: Array,
   })
-  public dataActions: ITableAction[] = [];
+  public dataActions: ITableAction<T>[] = [];
 
   @property({
     attribute: false,
@@ -399,7 +399,11 @@ export class DeesTable<T> extends DeesElement {
                       >
                         ${headings.map(
                           (headingArg) => html`
-                            <td>
+                            <td @dblclick=${() => {
+                              const wantedAction = this.dataActions.find((actionArg) => actionArg.type.includes('doubleClick'));
+                              if (!wantedAction) return;
+                              wantedAction.actionFunc(itemArg);
+                            }}>
                               <div class="innerCellContainer">${transformedItem[headingArg]}</div>
                             </td>
                           `