1.0.170

html/index.html

@@ -10,11 +10,9 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
 
     <style>
       body {

package.json

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

ts_web/elements/dees-button.ts

@@ -87,7 +87,7 @@ export class DeesButton extends DeesElement {
         justify-content: center;
         align-items: center;
         background: ${cssManager.bdTheme('#fff', '#333')};
-        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 3px 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-dataview-codebox.ts

@@ -30,9 +30,10 @@ export class DeesDataviewCodebox extends DeesElement {
   public progLang: string = 'typescript';
 
   @property({
-    type: String
+    type: String,
+    reflect: true,
   })
-  public codeToDisplay: string = '// no code set';
+  public codeToDisplay: string = '';
 
   constructor() {
     super();
@@ -143,12 +144,15 @@ export class DeesDataviewCodebox extends DeesElement {
               })
             })()}
           </div>
-          <pre><code class="${this.progLang}">${this.codeToDisplay}</code></pre>
+          <pre><code></code></pre>
         </div>
       </div>
     `;
   }
 
+  @state()
+  private codeToDisplayStore = '';
+
   public async updated(_changedProperties) {
     super.updated(_changedProperties);
     console.log('highlighting now');
@@ -159,11 +163,16 @@ export class DeesDataviewCodebox extends DeesElement {
         slottedCodeNodes.push(childNode as Text);
       }
     });
-    if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText) {
-      this.codeToDisplay = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
+    if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
+      this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
+    }
+    if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
+      this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart();
+      this.codeToDisplay = this.codeToDisplayStore;
     }
     await domtools.plugins.smartdelay.delayFor(0);
     const localCodeNode = this.shadowRoot.querySelector('code');
-    hlight.highlightBlock(localCodeNode);
+    const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
+    localCodeNode.innerHTML = html.value;
   }
 }

ts_web/elements/dees-dataview-statusobject.ts

@@ -11,12 +11,6 @@ import {
 
 import * as tsclass from '@tsclass/tsclass';
 
-import hlight from 'highlight.js';
-
-import * as smartstring from '@pushrocks/smartstring';
-
-import * as domtools from '@designestate/dees-domtools';
-
 declare global {
   interface HTMLElementTagNameMap {
     'dees-dataview-statusobject': DeesDataviewStatusobject;
@@ -52,7 +46,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         },
         {
           name: 'Detail 4',
-          value: 'Value 4',
+          value: 'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
           status: 'ok',
           statusText: 'OK',
         },
@@ -67,9 +61,9 @@ export class DeesDataviewStatusobject extends DeesElement {
     cssManager.defaultStyles,
     css`
       .mainbox {
-        max-width: 600px;
         border-radius: 3px;
-        background: #1b1b1b;
+        background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
+        box-shadow: 0px 1px 3px #00000030;
         min-height: 48px;
         color: ${cssManager.bdTheme('#000', '#fff')};
       }
@@ -123,13 +117,20 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        height: 60px;
+        minheight: 60px;
         align-items: center;
         display: grid;
         grid-template-columns: 40px auto;
         border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
       }
 
+      .detail .detailsText {
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-right: 8px;
+        word-break: break-all;
+      }
+
       .detail .detailsText .label {
         font-size: 12px;
       }
@@ -145,11 +146,11 @@ export class DeesDataviewStatusobject extends DeesElement {
     return html`
       <div class="mainbox">
         <div class="heading">
-          <div class="statusdot ${this.statusObject.combinedStatus}"></div>
+          <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
           <h1>${this.statusObject?.name || 'no status object assigned'}</h1>
           <div class="copyMain">Copy as JSON</div>
         </div>
-        ${this.statusObject.details.map((detailArg) => {
+        ${this.statusObject?.details?.map((detailArg) => {
           return html`
             <div class="detail">
               <div class="statusdot ${detailArg.status}"></div>

ts_web/elements/dees-form-submit.ts

@@ -29,7 +29,7 @@ export class DeesFormSubmit extends DeesElement {
   public text: string;
 
   @property({
-    type: String
+    type: String,
   })
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
@@ -41,7 +41,12 @@ export class DeesFormSubmit extends DeesElement {
 
   public render() {
     return html`
-      <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
+      <dees-button
+        status=${this.status}
+        @click=${this.submit}
+        .disabled=${this.disabled}
+        .text=${this.text ? this.text : this.textContent}
+      >
       </dees-button>
     `;
   }
@@ -53,4 +58,12 @@ export class DeesFormSubmit extends DeesElement {
     const parentElement: DeesForm = this.parentElement as DeesForm;
     parentElement.gatherAndDispatch();
   }
+
+  public async focus() {
+    const domtools = await this.domtoolsPromise;
+    if (!this.disabled) {
+      domtools.convenience.smartdelay.delayFor(0);
+      this.submit();
+    }
+  }
 }

ts_web/elements/dees-form.ts

@@ -54,7 +54,7 @@ export class DeesForm extends DeesElement {
     `;
   }
 
-  public firstUpdated() {
+  public async firstUpdated() {
     const formChildren = this.getFormChildren();
     this.checkRequiredStatus();
     for (const child of formChildren) {
@@ -65,6 +65,7 @@ export class DeesForm extends DeesElement {
         this.checkRequiredStatus();
       });
     }
+    await this.instrumentBehaviours();
   }
 
   public getFormChildren() {
@@ -170,4 +171,21 @@ export class DeesForm extends DeesElement {
 
     submitButton.text = textStateArg;
   }
+
+  public async instrumentBehaviours() {
+    const children = this.getFormChildren();
+    for (const child of children) {
+      child.addEventListener('keydown', (eventArg) => {
+        if (eventArg.key === 'Enter') {
+          const currentIndex = children.indexOf(child);
+          if (currentIndex < children.length - 1) {
+            children[currentIndex + 1].focus();
+          } else {
+            children[currentIndex].blur();
+            this.getSubmitButton().focus();
+          }
+        }
+      });
+    }
+  }
 }

ts_web/elements/dees-input-text.ts

@@ -10,7 +10,7 @@ declare global {
 @customElement('dees-input-text')
 export class DeesInputText extends DeesElement {
   public static demo = () => html`
-    <dees-input-text .label=${'this is a label'}></dees-input-text>
+    <dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
     <dees-input-text .isPasswordBool=${true}></dees-input-text>
   `;
 
@@ -29,7 +29,8 @@ export class DeesInputText extends DeesElement {
   public key: string;
 
   @property({
-    type: String
+    type: String,
+    reflect: true,
   })
   public value: string = '';
 
@@ -162,4 +163,9 @@ export class DeesInputText extends DeesElement {
     const textInput = this.shadowRoot.querySelector('input');
     textInput.focus();
   }
+
+  public async blur() {
+    const textInput = this.shadowRoot.querySelector('input');
+    textInput.blur();
+  }
 }

ts_web/elements/dees-stepper.ts

@@ -48,15 +48,15 @@ export class DeesStepper extends DeesElement {
             `,
             validationFunc: async (stepperArg, elementArg) => {
               const deesForm = elementArg.querySelector('dees-form');
-              deesForm.addEventListener('formData', eventArg => {
+              deesForm.addEventListener('formData', (eventArg) => {
                 stepperArg.goNext();
-              })
-            }
+              });
+            },
           },
           {
             title: 'Whats your mobile number?',
             content: html``,
-          }
+          },
         ] as IStep[]}
       ></dees-stepper>
     `;
@@ -195,22 +195,26 @@ export class DeesStepper extends DeesElement {
     return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
   };
 
-  public firstUpdated() {
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(0);
     this.selectedStep = this.steps[0];
     this.setScrollStatus();
   }
 
-  public updated() {
+  public async updated() {
     this.setScrollStatus();
   }
 
   public scroller: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
-    await domtools.plugins.smartdelay.delayFor(50);
     const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
     const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
     const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    if (!selectedStepElement) {
+      return;
+    }
     if (!stepperContainer.style.paddingTop) {
       stepperContainer.style.paddingTop = `${
         stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2