1.0.146

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.136",
+  "version": "1.0.146",
   "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.136',
+  version: '1.0.146',
   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;
@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
         @click="${this.dispatchClick}"
       >
         ${this.status === 'normal' ? html``: html`
-          <dees-spinner status="${this.status}"></dees-spinner>
+          <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
         `}
         <div class="textbox">${this.text ? this.text : this.textContent}</div>
       </div>

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-icon.ts

@@ -23,6 +23,8 @@ import {
 
 import {
   faCopy as faCopyRegular,
+  faCircleCheck as faCircleCheckRegular,
+  faCircleXmark as faCircleXmarkRegular,
   faMessage as faMessageRegular,
   faPaste as faPasteRegular,
   faSun as faSunRegular,
@@ -37,8 +39,12 @@ import {
   faCaretRight as faCaretRightSolid,
   faCheck as faCheckSolid,
   faCircleInfo as faCircleInfoSolid,
+  faCircleCheck as faCircleCheckSolid,
+  faCircleXmark as faCircleXmarkSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
+  faEye as faEyeSolid,
+  faEyeSlash as faEyeSlashSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
   faMinus as faMinusSolid,
@@ -68,12 +74,20 @@ export const faIcons = {
   caretRightSolid: faCaretRightSolid,
   check: faCheckSolid,
   checkSolid: faCheckSolid,
-  circleinfo: faCircleInfoSolid,
-  circleinfoSolid: faCircleInfoSolid,
+  circleInfo: faCircleInfoSolid,
+  circleInfoSolid: faCircleInfoSolid,
+  circleCheck: faCircleCheckRegular,
+  circleCheckSolid: faCircleCheckSolid,
+  circleXmark: faCircleXmarkRegular,
+  circleXmarkSolid: faCircleXmarkSolid,
   copy: faCopyRegular,
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
   desktopSolid: faDesktopSolid,
+  eye: faEyeSolid,
+  eyeSolid: faEyeSolid,
+  eyeSlash: faEyeSlashSolid,
+  eyeSlashSolid: faEyeSlashSolid,
   grip: faGripSolid,
   gripSolid: faGripSolid,
   message: faMessageRegular,
@@ -173,7 +187,7 @@ export class DeesIcon extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {
+  public async updated() {
     if (!this.iconSize) {
       this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
     }

ts_web/elements/dees-input-text.ts

@@ -9,7 +9,10 @@ declare global {
 
 @customElement('dees-input-text')
 export class DeesInputText extends DeesElement {
-  public static demo = () => html`<dees-input-text></dees-input-text>`;
+  public static demo = () => html`
+    <dees-input-text .label=${'this is a label'}></dees-input-text>
+    <dees-input-text .isPasswordBool=${true}></dees-input-text>
+  `;
 
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject();
@@ -17,7 +20,7 @@ export class DeesInputText extends DeesElement {
   @property({
     type: String
   })
-  public label: string = 'Label';
+  public label: string;
 
   @property({
     type: String
@@ -39,6 +42,18 @@ export class DeesInputText extends DeesElement {
   })
   public disabled: boolean = false;
 
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public isPasswordBool = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public showPasswordBool = false;
+
   public render(): TemplateResult {
     return html `
       <style>
@@ -92,10 +107,30 @@ export class DeesInputText extends DeesElement {
           outline: none;
           border-bottom: 1px solid #e4002b;
         }
+
+        .showPassword {
+          position: absolute;
+          bottom: 8px;
+          right: 10px;
+          border: 1px dashed #444;
+          border-radius: 7px;
+          padding: 8px 0px;
+          width: 40px;
+        }
+
+        .showPassword:hover {
+          cursor: pointer;
+          background: #333;
+        }
       </style>
       <div class="maincontainer">
-        <div class="label">${this.label}</div>
-        <input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
+        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+        ${this.isPasswordBool ? html`
+          <div class="showPassword" @click=${this.togglePasswordView}>
+            <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
+          </div>
+        ` : html``}
       </div>
     `;
   }
@@ -113,4 +148,10 @@ export class DeesInputText extends DeesElement {
   public async unfreeze() {
     this.disabled = false;
   }
+
+  public async togglePasswordView () {
+    const domtools = await this.domtoolsPromise;
+    this.showPasswordBool = !this.showPasswordBool;
+    console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
+  }
 }

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-spinner.ts

@@ -32,6 +32,11 @@ export class DeesSpinner extends DeesElement {
   })
   public size = 20;
 
+  @property({
+    type: String,
+  })
+  public bnw: boolean = false;
+
   @property()
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
@@ -61,16 +66,14 @@ export class DeesSpinner extends DeesElement {
       }
 
       #loading.success {
-        border: 0px solid rgba(255, 255, 255, 0);
-        background: #8bc34a;
+        border: none;
         border-radius: 50%;
         animation: none;
         -webkit-animation: none;
       }
 
       #loading.error {
-        border: 0px solid rgba(255, 255, 255, 0);
-        background: #e64a19;
+        border: none;
         border-radius: 50%;
         animation: none;
         -webkit-animation: none;
@@ -88,7 +91,6 @@ export class DeesSpinner extends DeesElement {
       }
 
       dees-icon {
-        color: #fff;
         position: absolute;
         height: 100%;
         width: 100%;
@@ -103,16 +105,23 @@ export class DeesSpinner extends DeesElement {
           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: ${Math.round(this.size * 0.6)}px;
+          font-size: ${this.size}px;
         }
       </style>
       <div class="${this.status}" id="loading">
         ${(() => {
           if (this.status === 'success') {
-            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'check' as any}></dees-icon>`;
+            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
           } else if (this.status === 'error') {
-            return  html`<dees-icon .iconFA=${'xmark' as any}></dees-icon>`;
+            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
           }
         })()}
       </div>

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;