fix(core): update

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.41",
       "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",
@@ -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",
@@ -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",

package.json

@@ -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",

ts_web/elements/dees-form.ts

@@ -18,7 +18,12 @@ 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) => {
+      const form: DeesForm = eventArg.currentTarget;
+      form.setStatus('freeze', 'authenticating...');
+      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>
@@ -65,8 +70,7 @@ export class DeesForm extends DeesElement {
     return formChildren;
   }
 
-  public async checkRequiredStatus() {
+  public getSubmitButton() {
-    console.log('checking the required status.')
     const children: Array<DeesElement> = this.children as any;
     let submitButton: DeesFormSubmit;
     for (const childArg of children) {
@@ -74,6 +78,12 @@ export class DeesForm extends DeesElement {
         submitButton = childArg;
       }
     }
+    return submitButton;
+  }
+
+  public async checkRequiredStatus() {
+    console.log('checking the required status.')
+    
     
     let requiredOK = true;
     for (const childArg of this.getFormChildren()) {
@@ -81,8 +91,7 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
-    submitButton.disabled = !requiredOK;
+    this.getSubmitButton().disabled = !requiredOK;
-    console.log(submitButton);
   }
 
   public async gatherData() {
@@ -106,4 +115,21 @@ export class DeesForm extends DeesElement {
     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

@@ -4,6 +4,8 @@ import {
   TemplateResult,
   property,
   html,
+  css,
+  cssManager
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
@@ -41,6 +43,11 @@ export class DeesInputCheckbox extends DeesElement {
   })
   public required: boolean = false;
 
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}
@@ -95,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;
@@ -127,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">
@@ -143,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

@@ -35,6 +35,11 @@ export class DeesInputDropdown extends LitElement {
   })
   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

@@ -47,8 +47,13 @@ export class DeesInputFileupload extends DeesElement {
   })
   public required: boolean = false;
 
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   constructor() {
-    super();
+    super()
   }
 
   public static styles = [

ts_web/elements/dees-input-quantityselector.ts

@@ -27,6 +27,11 @@ export class DeesInputQuantitySelector extends DeesElement {
   })
   public required: boolean = false;
 
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   constructor() {
     super();
   }

ts_web/elements/dees-input-radio.ts

@@ -28,6 +28,11 @@ export class DeesInputRadio extends LitElement {
   })
   public required: boolean = false;
 
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   constructor() {
     super();
   }

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,13 +14,19 @@ 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({
@@ -28,6 +34,11 @@ export class DeesInputText extends DeesElement {
   })
   public required: boolean = false;
 
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
   public render(): TemplateResult {
     return html `
       <style>
@@ -65,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 {
@@ -76,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>
     `;
   }
@@ -86,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;
+  }
 }