1.0.42

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.35",
+  "version": "1.0.42",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.35",
+      "version": "1.0.42",
       "license": "MIT",
       "dependencies": {
-        "@designestate/dees-domtools": "^1.0.88",
+        "@designestate/dees-domtools": "^1.0.89",
         "@designestate/dees-element": "^1.0.19",
         "@designestate/dees-wcctools": "^1.0.57",
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -21,7 +21,7 @@
       "devDependencies": {
         "@gitzone/tsbuild": "^2.1.26",
         "@gitzone/tsbundle": "^1.0.84",
-        "@gitzone/tstest": "^1.0.54",
+        "@gitzone/tstest": "^1.0.57",
         "@gitzone/tswatch": "^1.0.56",
         "@pushrocks/projectinfo": "^4.0.5",
         "@pushrocks/tapbundle": "^3.2.14",
@@ -1893,9 +1893,9 @@
       }
     },
     "node_modules/@designestate/dees-domtools": {
-      "version": "1.0.88",
+      "version": "1.0.89",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
-      "integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==",
+      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^1.0.56",
@@ -2368,22 +2368,22 @@
       }
     },
     "node_modules/@gitzone/tstest": {
-      "version": "1.0.54",
+      "version": "1.0.57",
-      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftstest/-/tstest-1.0.54.tgz",
+      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftstest/-/tstest-1.0.57.tgz",
-      "integrity": "sha512-KsKGxXxxSWC4AJYU2HGJfpYoyAwvWikNaJJH2VeKfAlUhvuZwZepLIUoqwYdoGa55pqatamuNiC282sn3rsB1g==",
+      "integrity": "sha512-mjkgeVcoO91fET5K9ZcZ6kChh334ZxEGpTR/kO8j9jQ8mVjxuRLo3MtvEX1XD1iSB7f95GlA6m+7+7UqmZTfSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@gitzone/tsbundle": "^1.0.80",
+        "@gitzone/tsbundle": "^1.0.84",
-        "@gitzone/tsrun": "^1.2.12",
+        "@gitzone/tsrun": "^1.2.17",
         "@pushrocks/consolecolor": "^2.0.1",
         "@pushrocks/smartbrowser": "^1.0.17",
-        "@pushrocks/smartdelay": "^2.0.10",
+        "@pushrocks/smartdelay": "^2.0.13",
-        "@pushrocks/smartexpress": "^3.0.100",
+        "@pushrocks/smartexpress": "^3.0.102",
         "@pushrocks/smartfile": "^8.0.10",
-        "@pushrocks/smartlog": "^2.0.39",
+        "@pushrocks/smartlog": "^2.0.44",
-        "@pushrocks/smartpromise": "^3.1.5",
+        "@pushrocks/smartpromise": "^3.1.6",
-        "@pushrocks/smartshell": "^2.0.25",
+        "@pushrocks/smartshell": "^2.0.28",
         "@pushrocks/tapbundle": "^3.2.14",
         "@types/figures": "^3.0.1",
         "figures": "^3.0.0"
@@ -17435,9 +17435,9 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.88",
+      "version": "1.0.89",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
-      "integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==",
+      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.56",
         "@designestate/dees-comms": "^1.0.9",
@@ -17818,21 +17818,21 @@
       }
     },
     "@gitzone/tstest": {
-      "version": "1.0.54",
+      "version": "1.0.57",
-      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftstest/-/tstest-1.0.54.tgz",
+      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftstest/-/tstest-1.0.57.tgz",
-      "integrity": "sha512-KsKGxXxxSWC4AJYU2HGJfpYoyAwvWikNaJJH2VeKfAlUhvuZwZepLIUoqwYdoGa55pqatamuNiC282sn3rsB1g==",
+      "integrity": "sha512-mjkgeVcoO91fET5K9ZcZ6kChh334ZxEGpTR/kO8j9jQ8mVjxuRLo3MtvEX1XD1iSB7f95GlA6m+7+7UqmZTfSw==",
       "dev": true,
       "requires": {
-        "@gitzone/tsbundle": "^1.0.80",
+        "@gitzone/tsbundle": "^1.0.84",
-        "@gitzone/tsrun": "^1.2.12",
+        "@gitzone/tsrun": "^1.2.17",
         "@pushrocks/consolecolor": "^2.0.1",
         "@pushrocks/smartbrowser": "^1.0.17",
-        "@pushrocks/smartdelay": "^2.0.10",
+        "@pushrocks/smartdelay": "^2.0.13",
-        "@pushrocks/smartexpress": "^3.0.100",
+        "@pushrocks/smartexpress": "^3.0.102",
         "@pushrocks/smartfile": "^8.0.10",
-        "@pushrocks/smartlog": "^2.0.39",
+        "@pushrocks/smartlog": "^2.0.44",
-        "@pushrocks/smartpromise": "^3.1.5",
+        "@pushrocks/smartpromise": "^3.1.6",
-        "@pushrocks/smartshell": "^2.0.25",
+        "@pushrocks/smartshell": "^2.0.28",
         "@pushrocks/tapbundle": "^3.2.14",
         "@types/figures": "^3.0.1",
         "figures": "^3.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.35",
+  "version": "1.0.42",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,7 +13,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.88",
+    "@designestate/dees-domtools": "^1.0.89",
     "@designestate/dees-element": "^1.0.19",
     "@designestate/dees-wcctools": "^1.0.57",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.26",
     "@gitzone/tsbundle": "^1.0.84",
-    "@gitzone/tstest": "^1.0.54",
+    "@gitzone/tstest": "^1.0.57",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "@pushrocks/tapbundle": "^3.2.14",

ts_web/elements/dees-button.ts

@@ -19,19 +19,21 @@ declare global {
 
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
-  public static demo = () => html`<dees-button></dees-button>`;
+  public static demo = () => html`<dees-button>This is a slotted Text</dees-button>`;
 
   @property()
-  text: string;
+  public text: string;
 
   @property()
-  eventDetailData: string;
+  public eventDetailData: string;
+
+  @property({
+    type: Boolean
+  })
+  public disabled = false;
 
   @property()
-  disabled = false;
+  public isHidden = false;
-
-  @property()
-  isHidden = false;
 
   @property()
   public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@@ -57,6 +59,7 @@ export class DeesButton extends DeesElement {
         display: block;
         text-align: center;
         background: ${cssManager.bdTheme('#eee', '#333')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
         border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
         border-radius: 2px;
         line-height: 40px;
@@ -69,6 +72,7 @@ export class DeesButton extends DeesElement {
       .button:hover {
         cursor: pointer;
         background: #039be5;
+        border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
         border-top: 1px solid #039be5;
         color: #ffffff;
       }
@@ -79,8 +83,8 @@ export class DeesButton extends DeesElement {
       }
 
       .button.disabled {
-        background: #fff;
+        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
-        border: 1px solid #eeeff3;
+        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
         color: #9b9b9e;
         cursor: default;
       }
@@ -121,7 +125,7 @@ export class DeesButton extends DeesElement {
           : null}"
         @click="${this.dispatchClick}"
       >
-        ${this.text ? this.text : this.textContent}
+        ${this.text ? this.text : html`<slot></slot>`}
       </div>
     `;
   }

ts_web/elements/dees-form-submit.ts

@@ -1,4 +1,11 @@
-import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  css,
+  cssManager,
+  property,
+} from '@designestate/dees-element';
 import { DeesForm } from './dees-form';
 
 declare global {
@@ -9,6 +16,18 @@ declare global {
 
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
+  public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled = false;
+
+  @property({
+    type: String,
+  })
+  public text: string;
+
   constructor() {
     super();
   }
@@ -16,10 +35,17 @@ export class DeesFormSubmit extends DeesElement {
   public static styles = [cssManager.defaultStyles, css``];
 
   public render() {
-    return html` <dees-button @click="${this.submit}">${this.textContent}</dees-button> `;
+    return html`
+      <dees-button @click="${this.submit}" .disabled="${this.disabled}">
+        ${this.text ? this.text : html`<slot></slot>`}
+      </dees-button>
+    `;
   }
 
   public async submit() {
+    if (this.disabled) {
+      return;
+    }
     const parentElement: DeesForm = this.parentElement as DeesForm;
     parentElement.gatherAndDispatch();
   }

ts_web/elements/dees-form.ts

@@ -5,6 +5,7 @@ import { DeesInputText } from './dees-input-text';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector';
 import { DeesInputRadio } from './dees-input-radio';
 import * as domtools from '@designestate/dees-domtools';
+import { DeesFormSubmit } from './dees-form-submit';
 
 export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
 
@@ -17,10 +18,15 @@ declare global {
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
   public static demo = () => html`
-    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
+    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
-      <dees-input-text key="hello1" label="a text"></dees-input-text>
+      const form: DeesForm = eventArg.currentTarget;
-      <dees-input-text key="hello2" label="also a text"></dees-input-text>
+      form.setStatus('freeze', 'authenticating...');
-      <dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
+      await domtools.plugins.smartdelay.delayFor(1000);
+      form.setStatus('success', 'authenticated!');
+    }}>
+      <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
+      <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
+      <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
       <dees-form-submit>Submit</dees-form-submit>
     </dees-form>
     `;
@@ -41,12 +47,14 @@ export class DeesForm extends DeesElement {
 
   public firstUpdated() {
     const formChildren = this.getFormChildren();
+    this.checkRequiredStatus();
     for (const child of formChildren) {
       child.changeSubject.subscribe(async (elementArg: TFormElement) => {
         const valueObject = await this.gatherData();
         this.changeSubject.next(valueObject);
         console.log(valueObject);
-      })
+        this.checkRequiredStatus();
+      });
     }
   }
 
@@ -62,6 +70,30 @@ export class DeesForm extends DeesElement {
     return formChildren;
   }
 
+  public getSubmitButton() {
+    const children: Array<DeesElement> = this.children as any;
+    let submitButton: DeesFormSubmit;
+    for (const childArg of children) {
+      if(childArg instanceof DeesFormSubmit) {
+        submitButton = childArg;
+      }
+    }
+    return submitButton;
+  }
+
+  public async checkRequiredStatus() {
+    console.log('checking the required status.')
+    
+    
+    let requiredOK = true;
+    for (const childArg of this.getFormChildren()) {
+      if (childArg.required && !childArg.value) {
+        requiredOK = false;
+      }
+    }
+    this.getSubmitButton().disabled = !requiredOK;
+  }
+
   public async gatherData() {
     const children = this.getFormChildren();
     const valueObject: { [key: string]: string | number | boolean} = {};
@@ -80,5 +112,24 @@ export class DeesForm extends DeesElement {
       bubbles: true
     });
     this.dispatchEvent(formDataEvent);
+    console.log('dispatched data:')
+    console.log(valueObject);
+  }
+
+  public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
+    const inputChildren = this.getFormChildren();
+    const submitButton = this.getSubmitButton();
+
+    switch(visualStateArg) {
+      case 'freeze':
+        submitButton.disabled = true;
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = true;
+        }
+        break;
+    }
+
+    submitButton.text = textStateArg;
+
   }
 }

ts_web/elements/dees-input-checkbox.ts

@@ -1,4 +1,12 @@
-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 {
@@ -15,15 +23,30 @@ export class DeesInputCheckbox extends DeesElement {
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject();
 
-  @property()
+  @property({
+    type: String,
+  })
   public key: string;
 
-  @property()
+  @property({
+    type: String,
+  })
   public label: string = 'Label';
 
-  @property()
+  @property({
+    type: Boolean,
+  })
   public value: boolean = false;
 
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
 
   public render(): TemplateResult {
     return html`
@@ -79,6 +102,11 @@ export class DeesInputCheckbox extends DeesElement {
           border: 1px solid #039BE5;
         }
 
+        .checkbox.disabled {
+          background: none;
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        }
+
         .checkmark {
           display: inline-block;
           width: 22px;
@@ -111,7 +139,7 @@ export class DeesInputCheckbox extends DeesElement {
         }
       </style>
       <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''}">
+        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
           ${this.value
             ? html`
                 <span class="checkmark">
@@ -127,6 +155,9 @@ export class DeesInputCheckbox extends DeesElement {
   }
 
   public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
     this.value = !this.value;
     this.dispatchEvent(
       new CustomEvent('newValue', {

ts_web/elements/dees-input-dropdown.ts

@@ -30,6 +30,16 @@ export class DeesInputDropdown extends LitElement {
     payload: null
   };
 
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}

ts_web/elements/dees-input-fileupload.ts

@@ -42,6 +42,20 @@ export class DeesInputFileupload extends DeesElement {
   @property()
   public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
 
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super()
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`

ts_web/elements/dees-input-quantityselector.ts

@@ -22,6 +22,20 @@ export class DeesInputQuantitySelector extends DeesElement {
   })
   public value: number = 1;
 
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super();
+  }
+
   public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}

ts_web/elements/dees-input-radio.ts

@@ -23,6 +23,20 @@ export class DeesInputRadio extends LitElement {
   @property()
   public value: boolean = false;
 
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super();
+  }
+
   public render(): TemplateResult {
     return html `
       <style>

ts_web/elements/dees-input-text.ts

@@ -1,4 +1,4 @@
-import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
+import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
 declare global {
@@ -14,15 +14,31 @@ export class DeesInputText extends DeesElement {
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject();
 
-  @property()
+  @property({
+    type: String
+  })
   public label: string = 'Label';
 
-  @property()
+  @property({
+    type: String
+  })
   public key: string;
 
-  @property()
+  @property({
+    type: String
+  })
   public value: string;
 
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   public render(): TemplateResult {
     return html `
       <style>
@@ -60,8 +76,15 @@ export class DeesInputText extends DeesElement {
           line-height: 48px;
           transition: all 0.2s;
           outline: none;
-          color: #ccc;
           font-size: 16px;
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        input:disabled {
+          background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+          color: #9b9b9e;
+          cursor: default;
         }
 
         input:focus {
@@ -71,7 +94,7 @@ export class DeesInputText extends DeesElement {
       </style>
       <div class="maincontainer">
         <div class="label">${this.label}</div>
-        <input type="text" @input="${this.updateValue}" />
+        <input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
       </div>
     `;
   }
@@ -81,4 +104,12 @@ export class DeesInputText extends DeesElement {
     this.value = target.value;
     this.changeSubject.next(this);
   }
+
+  public async freeze() {
+    this.disabled = true;
+  }
+
+  public async unfreeze() {
+    this.disabled = false;
+  }
 }