1.0.146

package.json

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

ts_web/elements/dees-button.ts

@@ -82,7 +82,7 @@ export class DeesButton extends DeesElement {
         justify-content: center;
         align-items: center;
         background: ${cssManager.bdTheme('#fff', '#333')};
-        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
+        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-icon.ts

@@ -43,6 +43,8 @@ import {
   faCircleXmark as faCircleXmarkSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
+  faEye as faEyeSolid,
+  faEyeSlash as faEyeSlashSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
   faMinus as faMinusSolid,
@@ -82,6 +84,10 @@ export const faIcons = {
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
   desktopSolid: faDesktopSolid,
+  eye: faEyeSolid,
+  eyeSolid: faEyeSolid,
+  eyeSlash: faEyeSlashSolid,
+  eyeSlashSolid: faEyeSlashSolid,
   grip: faGripSolid,
   gripSolid: faGripSolid,
   message: faMessageRegular,
@@ -181,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() {