1.0.145

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.139",
+  "version": "1.0.145",
   "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: '@designestate/dees-catalog',
-  version: '1.0.139',
+  version: '1.0.145',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button.ts

@@ -81,8 +81,8 @@ export class DeesButton extends DeesElement {
         display: flex;
         justify-content: center;
         align-items: center;
-        background: ${cssManager.bdTheme('#eee', '#333')};
-        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
         border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
         border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
         border-radius: 4px;

ts_web/elements/dees-contextmenu.ts

@@ -29,8 +29,29 @@ export class DeesContextmenu extends DeesElement {
         margin: 20px;
       }
     </style>
-    <dees-button @click=${() => {
-      DeesContextmenu.openContextMenuWithOptions();
+    <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
@@ -55,13 +76,20 @@ export class DeesContextmenu extends DeesElement {
   `;
 
   // STATIC
-  public static openContextMenuWithOptions(eventArg, contextOptions: plugins.tsclass.website.IMenuItem[]) {
+  public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
+    eventArg.preventDefault();
     const contextMenu = new DeesContextmenu();
     contextMenu.style.position = 'absolute';
-    contextMenu;
-    const windowLayer = new DeesWindowLayer();
-    windowLayer.append(contextMenu);
-    document.body.append(windowLayer);
+    contextMenu.style.top = `${eventArg.clientY.toString()}px`;
+    contextMenu.style.left = `${eventArg.clientX.toString()}px`;
+    contextMenu.style.opacity = '0';
+    contextMenu.style.transform = 'scale(0.95,0.95)';
+    contextMenu.style.transformOrigin = 'top left';
+    contextMenu.menuItems = menuItemsArg;
+    document.body.append(contextMenu);
+    await domtools.plugins.smartdelay.delayFor(0);
+    contextMenu.style.opacity = '1';
+    contextMenu.style.transform = 'scale(1,1)';
   }
 
   @property({
@@ -78,6 +106,7 @@ export class DeesContextmenu extends DeesElement {
     css`
       :host {
         display: block;
+        transition: all 0.1s;
       }
 
       .mainbox {
@@ -120,7 +149,7 @@ export class DeesContextmenu extends DeesElement {
       <div class="mainbox">
         ${this.menuItems.map((menuItemArg) => {
           return html`
-            <div class="menuitem">
+            <div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
               <dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
               >${menuItemArg.name}
             </div>
@@ -136,4 +165,16 @@ export class DeesContextmenu extends DeesElement {
       mainbox.textContent = 'no menu items present';
     }
   }
+
+  public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
+    menuItem.action();
+    await this.destroy();
+  }
+
+  public async destroy() {
+    this.style.opacity = '0';
+    this.style.transform = 'scale(0.95,0,95)';
+    await domtools.plugins.smartdelay.delayFor(100);
+    this.parentElement.removeChild(this);
+  }
 }

ts_web/elements/dees-speechbubble.ts

@@ -134,7 +134,7 @@ export class DeesSpeechbubble extends DeesElement {
     return html`
       <div class="maincontainer" @click=${this.handleClick}>
         <div class="arrow"></div>
-        <div class="speechbubble"><span class="wave">👋</span> Hey! We are API-driven.</div>
+        <div class="speechbubble"><span class="wave">👋</span> We build with launch.sh, and you can too.</div>
       </div>
     `;
   }
@@ -144,7 +144,7 @@ export class DeesSpeechbubble extends DeesElement {
       return;
     }
 
-    globalThis.location.href = "https://api.global"
+    globalThis.location.href = "https://launch.sh"
   }
 
   public async firstUpdated() {

ts_web/elements/dees-table.ts

@@ -143,10 +143,10 @@ export class DeesTable<T> extends DeesElement {
         display: block;
         width: 100%;
         min-height: 50px;
-        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#333333')};
         border-radius: 3px;
         border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
       }
       .headingSeparation {
         margin-top: 7px;