1.0.152

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.145",
+  "version": "1.0.152",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "@designestate/dees-domtools": "^2.0.28",
-    "@designestate/dees-element": "^2.0.18",
+    "@designestate/dees-element": "^2.0.19",
     "@designestate/dees-wcctools": "^1.0.76",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@pushrocks/smartpromise": "^3.1.7",
-    "@tsclass/tsclass": "^4.0.29",
+    "@tsclass/tsclass": "^4.0.34",
     "pdfjs-dist": "^2.15.349"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@gitzone/tswatch": "^2.0.5",
     "@pushrocks/projectinfo": "^5.0.1",
     "@pushrocks/tapbundle": "^5.0.4",
-    "@types/node": "^18.11.18"
+    "@types/node": "^18.15.9"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.145',
+  version: '1.0.152',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button.ts

@@ -31,7 +31,12 @@ export class DeesButton extends DeesElement {
     <p><dees-button disabled status="error">Error Status</dees-button></p>
   `;
 
-  @property()
+  @property({
+    reflect: true,
+    hasChanged() {
+      return true;
+    }
+  })
   public text: string;
 
   @property()

ts_web/elements/dees-form-submit.ts

@@ -41,8 +41,7 @@ export class DeesFormSubmit extends DeesElement {
 
   public render() {
     return html`
-      <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
-        ${this.text ? this.text : html`<slot></slot>`}
+      <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
       </dees-button>
     `;
   }

ts_web/elements/dees-icon.ts

@@ -43,8 +43,11 @@ import {
   faCircleXmark as faCircleXmarkSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
+  faEye as faEyeSolid,
+  faEyeSlash as faEyeSlashSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
+  faMugHot as faMugHotSolid,
   faMinus as faMinusSolid,
   faPaste as faPasteSolid,
   faPenToSquare as faPenToSquareSolid,
@@ -82,10 +85,16 @@ export const faIcons = {
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
   desktopSolid: faDesktopSolid,
+  eye: faEyeSolid,
+  eyeSolid: faEyeSolid,
+  eyeSlash: faEyeSlashSolid,
+  eyeSlashSolid: faEyeSlashSolid,
   grip: faGripSolid,
   gripSolid: faGripSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
+  mugHot: faMugHotSolid,
+  faMugHotSolid: faMugHotSolid,
   minus: faMinusSolid,
   minusSolid: faMinusSolid,
   paste: faPasteRegular,
@@ -181,7 +190,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-dropdown.ts

@@ -1,4 +1,4 @@
-import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
+import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
 declare global {
@@ -9,7 +9,15 @@ declare global {
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesElement {
-  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
+  public static demo = () => html`
+    <dees-input-dropdown
+      .options=${[
+        {option: 'option 1', key: 'option1'},
+        {option: 'option 2', key: 'option2'},
+        {option: 'option 3', key: 'option3'}
+      ]}
+    ></dees-input-dropdown>
+  `
 
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject();
@@ -40,11 +48,10 @@ export class DeesInputDropdown extends DeesElement {
   })
   public disabled: boolean = false;
 
-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        * {
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      * {
           box-sizing: border-box;
         }
 
@@ -52,6 +59,7 @@ export class DeesInputDropdown extends DeesElement {
           position: relative;
           display: block;
           height: 40px;
+          color: ${cssManager.bdTheme('#222', '#fff')};
         }
 
         .maincontainer {
@@ -68,8 +76,9 @@ export class DeesInputDropdown extends DeesElement {
           position: relative;
           max-width: 420px;
           height: 40px;
+          line-height: 40px;
           border: 1px solid #CCC;
-          padding: 12px;
+          padding: 0px 8px;
           z-index: 0px;
         }
 
@@ -79,12 +88,14 @@ export class DeesInputDropdown extends DeesElement {
           transition: all 0.2s ease;
           opacity: 0;
           position: relative;
-          background: #ffffff;
+          background: ${cssManager.bdTheme('#ffffff', '#222222')};
           max-width: 420px;
           box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
           height: 40px;
           margin-top: -40px;
           z-index: 100;
+          border-radius: 3px;
+          padding: 4px;
         }
 
         .selectionBox.show {
@@ -94,12 +105,22 @@ export class DeesInputDropdown extends DeesElement {
         }
 
         .option {
-          padding: 12px;
+          line-height: 40px;
+          padding: 0px 4px;
+          border-radius: 3px;
         }
 
         .option:hover {
-          background: #fafafa;
+          background: ${cssManager.bdTheme('#fafafa', '#444')};;
         }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        
       </style>
       <div class="maincontainer">
         <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">

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>
@@ -77,7 +92,8 @@ export class DeesInputText extends DeesElement {
           transition: all 0.2s;
           outline: none;
           font-size: 16px;
-          font-family: Inter;
+          font-family: ${this.isPasswordBool ? 'monospace': 'Inter'};
+          letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
           color: ${this.goBright ? '#333' : '#ccc'};
         }
 
@@ -92,10 +108,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 +149,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-table.ts

@@ -147,6 +147,7 @@ export class DeesTable<T> extends DeesElement {
         border-radius: 3px;
         border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+        overflow-x: auto;
       }
       .headingSeparation {
         margin-top: 7px;