1.0.43

package.json

@@ -1,32 +1,34 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.24",
+  "version": "1.0.43",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "scripts": {
-    "test": "npm run build",
+    "test": "tstest test/ --web",
     "build": "tsbuild element && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.79",
-    "@designestate/dees-wcctools": "^1.0.49",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "lit-element": "^2.4.0",
-    "typescript": "^4.1.2"
+    "@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",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "typescript": "^4.3.5"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tsbuild": "^2.1.26",
+    "@gitzone/tsbundle": "^1.0.84",
+    "@gitzone/tstest": "^1.0.57",
+    "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
+    "@pushrocks/tapbundle": "^3.2.14",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"
   },

test/test.browser.ts

@@ -0,0 +1,12 @@
+import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
+
+import * as deesCatalog from '../ts_web';
+
+tap.test('should create a working button', async () => {
+  const button: deesCatalog.DeesButton = await webhelpers.fixture(
+    webhelpers.html`<dees-button></dees-button>`
+  );
+  expect(button).to.be.instanceOf(deesCatalog.DeesButton);
+});
+
+tap.start();

ts_web/elements/dees-button.ts

@@ -1,125 +1,203 @@
-import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button': DeesButton;
+  }
+}
+
 @customElement('dees-button')
-export class DeesButton extends LitElement {
-  @property()
-  text: string;
+export class DeesButton extends DeesElement {
+  public static demo = () => html`
+    <dees-button>This is a slotted Text</dees-button>
+    <p><dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button></p>
+    <p><dees-button type="discreet">This is discreete button</dees-button></p>
+    <p><dees-button disabled>This is a disabled button</dees-button></p>
+    <p><dees-button type="big">This is a slotted Text</dees-button></p>
+    <p><dees-button status="normal">Normal Status</dees-button></p>
+    <p><dees-button disabled status="pending">Pending Status</dees-button></p>
+    <p><dees-button disabled status="success">Success Status</dees-button></p>
+    <p><dees-button disabled status="error">Error Status</dees-button></p>
+  `;
 
   @property()
-  eventDetailData: string;
+  public text: string;
 
   @property()
-  disabled = false;
+  public eventDetailData: string;
 
-  @property()
-  isQuote = false;
+  @property({
+    type: Boolean
+  })
+  public disabled = false;
 
-  @property()
-  isHidden = false;
+  @property({
+    type: Boolean
+  })
+  public isHidden = false;
 
-  @property()
+  @property({
+    type: String
+  })
   public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
 
+  @property({
+    type: String
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
   constructor() {
     super();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .button {
+        position: relative;
+        transition: all 0.2s ease;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        align-items: 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;
+        padding: 0px 10px;
+        min-width: 100px;
+        user-select: none;
+        color: ${cssManager.bdTheme('#333', ' #ccc')};
+        max-width: 500px;
+      }
+
+      .button:hover {
+        cursor: pointer;
+        background: #039be5;
+        border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
+        border-top: 1px solid #039be5;
+        color: #ffffff;
+      }
+
+      .button:active {
+        background: #0277bd;
+        border-top: 1px solid #0277bd;
+      }
+
+      .button.disabled {
+        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        color: #9b9b9e;
+        cursor: default;
+      }
+
+      .button.highlighted {
+        background: #e4002b;
+        border: none;
+        color: #fff;
+      }
+
+      .button.highlighted:hover {
+        background: #b50021;
+        border: none;
+        color: #fff;
+      }
+
+      .button.discreet {
+        background: none;
+        border: 1px solid #9b9b9e;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
+      .button.discreet:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      }
+      .button.hidden {
+        display: none;
+      }
+
+      .button.big {
+        width: 300px;
+        line-height: 48px;
+        font-size: 16px;
+        padding: 0px 48px;
+        margin-top: 36px;
+      }
+
+      .button.pending {
+        background: #0277bd70;
+        color: #fff;
+      }
+
+      .button.success {
+        background: #8BC34A70;
+        color: #fff;
+      }
+
+      .button.error {
+        background: #E64A1970;
+        color: #fff;
+      }
+
+      dees-spinner {
+        position: absolute;
+        left: 10px;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          display: block;
-          box-sizing: border-box;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-
-        .button {
-          transition: all 0.2s ease;
-          font-size: 14px;
-          display: block;
-          text-align: center;
-          background: #333;
-          border-top: 1px solid #444;
-          border-radius: 2px;
-          line-height: 40px;
-          padding: 0px 10px;
-          min-width: 100px;
-          color: ${this.isQuote ? '#ffffff' : '#333333' };
-          user-select: none;
-          color: #ccc;
-        }
-
-        .button:hover {
-          cursor: pointer;
-          background: #039BE5;
-          border-top: 1px solid #039BE5;
-          color: #ffffff;
-        }
-
-        .button:active {
-          background: #0277BD;
-          border-top: 1px solid #0277BD;
-        }
-
-        .button.disabled {
-          background: #fff;
-          border: 1px solid #eeeff3;
-          color: #9b9b9e;
-          cursor: default;
-        }
-
-        .button.highlighted {
-          background: #e4002b;
-          color: #fff;
-        }
-
-        .button.discreet {
-          background: none;
-          border: 1px solid #9b9b9e;
-          color: #000;
-        }
-
-        .button.discreet:hover {
-          background: rgba(0,0,0,0.1)
-        }
-        .hidden {
-            display: none;
-        }
-
-        .big {
-          display: inline-block;
-          line-height: 48px;
-          font-size: 16px;
-          padding: 0px 48px;
-          margin-top: 36px;
-        }
-      </style>
-      <div class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
-        ${this.text ? this.text : this.textContent}
+      <div
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
+          ? 'disabled'
+          : null}"
+        @click="${this.dispatchClick}"
+      >
+        ${this.status === 'normal' ? html``: html`
+          <dees-spinner status="${this.status}"></dees-spinner>
+        `}
+        <div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
       </div>
     `;
   }
 
   public async dispatchClick() {
     if (this.disabled) {
-
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('clicked', {
-      detail: {
-        data: this.eventDetailData
-      },
-      bubbles: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        bubbles: true,
+      })
+    );
   }
 
-  public async firstUpdated () {
+  public async firstUpdated() {
     if (!this.textContent) {
       this.textContent = 'Button';
       this.performUpdate();

ts_web/elements/dees-form-submit.ts

@@ -1,18 +1,56 @@
-import { customElement, html, LitElement } from 'lit-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  css,
+  cssManager,
+  property,
+} from '@designestate/dees-element';
+import { DeesForm } from './dees-form';
 
-import {DeesForm} from './dees-form';
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form-submit': DeesFormSubmit;
+  }
+}
 
 @customElement('dees-form-submit')
-export class DeesFormSubmit extends LitElement {
+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;
+
+  @property({
+    type: String
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [cssManager.defaultStyles, css``];
 
   public render() {
     return html`
-      <dees-button @click="${this.submit}">${this.textContent}</dees-button>
+      <dees-button status=${this.status} @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

@@ -1,20 +1,38 @@
-import { customElement, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 
 import { DeesInputCheckbox } from './dees-input-checkbox';
 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>;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form': DeesForm;
+  }
+}
 
 @customElement('dees-form')
-export class DeesForm extends LitElement {
+export class DeesForm extends DeesElement {
   public static demo = () => html`
-    <dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
-      <dees-input-text key="hello1"></dees-input-text>
-      <dees-input-text key="hello2"></dees-input-text>
+    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
+      const form: DeesForm = eventArg.currentTarget;
+      form.setStatus('pending', '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>
       <dees-form-submit>Submit</dees-form-submit>
-    </dees-form>`;
+    </dees-form>
+    `;
 
   public name: string = 'myform';
+  public changeSubject = new domtools.rxjs.Subject();
 
   public render(): TemplateResult {
     return html`
@@ -27,18 +45,66 @@ export class DeesForm extends LitElement {
     `;
   }
 
-  public async gatherAndDispatch() {
+  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();
+      });
+    }
+  }
 
-    const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
-    const valueObject: { [key: string]: string | number | boolean} = {};
+  public getFormChildren() {
+    const children: Array<DeesElement> = this.children as any;
+    const formChildren: TFormElement = [];
+    
     for (const child of children) {
       if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
-        valueObject[child.key] = child.value;
+        formChildren.push(child);
       }
     }
+    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;
+  }
 
-    console.log(valueObject);
+  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} = {};
+    for (const child of children) {
+      valueObject[child.key] = child.value;
+    }
+    return valueObject;
+  }
+
+  public async gatherAndDispatch() {
+    const valueObject = await this.gatherData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
         data: valueObject
@@ -46,5 +112,32 @@ export class DeesForm extends LitElement {
       bubbles: true
     });
     this.dispatchEvent(formDataEvent);
+    console.log('dispatched data:')
+    console.log(valueObject);
   }
-}
+
+  public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
+    const inputChildren = this.getFormChildren();
+    const submitButton = this.getSubmitButton();
+
+    switch(visualStateArg) {
+      case 'pending':
+        submitButton.disabled = true;
+        submitButton.status = 'pending';
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = true;
+        }
+        break;
+      case 'success':
+        submitButton.disabled = true;
+        submitButton.status = 'success';
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = true;
+        }
+        break;
+    }
+
+    submitButton.text = textStateArg;
+
+  }
+}

ts_web/elements/dees-icon.ts

@@ -8,12 +8,12 @@ import {
   faGoogle,
   faLinkedin,
   faMedium,
-  faSlack,
+  faSlackHash,
   faTwitter,
 } from '@fortawesome/free-brands-svg-icons';
 
 import {} from '@fortawesome/free-regular-svg-icons';
-import { faDesktop, faRss } from '@fortawesome/free-solid-svg-icons';
+import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
 
 type TFontAwesomeIcon =
   // normal
@@ -25,7 +25,8 @@ type TFontAwesomeIcon =
   | 'twitter'
   | 'linkedin'
   | 'medium'
-  | 'slack';
+  | 'slack'
+  | 'users';
 const faIcons: { [key: string]: IconDefinition } = {
   // normal
   desktop: faDesktop,
@@ -35,10 +36,17 @@ const faIcons: { [key: string]: IconDefinition } = {
   google: faGoogle,
   linkedin: faLinkedin,
   medium: faMedium,
-  slack: faSlack,
+  slack: faSlackHash,
   twitter: faTwitter,
+  users: faUsers,
 };
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-icon': DeesIcon;
+  }
+}
+
 @customElement('dees-icon')
 export class DeesIcon extends LitElement {
   public static demo = () => html`

ts_web/elements/dees-input-checkbox.ts

@@ -1,19 +1,53 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import {
+  customElement,
+  DeesElement,
+  TemplateResult,
+  property,
+  html,
+  css,
+  cssManager
+} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-checkbox': DeesInputCheckbox;
+  }
+}
+
 @customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends LitElement {
+export class DeesInputCheckbox extends DeesElement {
+  // STATIC
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
-  @property()
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @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`
       ${domtools.elementBasic.styles}
@@ -33,11 +67,11 @@ export class DeesInputCheckbox extends LitElement {
           display: grid;
           grid-template-columns: 25px auto;
           padding: 5px 0px;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .maincontainer:hover {
-          color: #fff;
+          ${this.goBright ? '#000' : '#ccc'};
         }
 
         .label {
@@ -55,12 +89,12 @@ export class DeesInputCheckbox extends LitElement {
         .checkbox {
           transition: all 0.1s;
           box-sizing: border-box;
-          border: 1px solid #999;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
           border-radius: 2px;
           height: 24px;
           width: 24px;
           display: inline-block;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
         }
 
         .checkbox.selected {
@@ -68,7 +102,12 @@ export class DeesInputCheckbox extends LitElement {
           border: 1px solid #039BE5;
         }
 
-        .checkmark {
+        .checkbox.disabled {
+          background: none;
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        }
+
+        .checkbox .checkmark {
           display: inline-block;
           width: 22px;
           height: 22px;
@@ -77,16 +116,16 @@ export class DeesInputCheckbox extends LitElement {
           transform: rotate(45deg);
         }
 
-        .checkmark_stem {
+        .checkbox .checkmark_stem {
           position: absolute;
           width: 3px;
           height: 9px;
-          background-color: #ccc;
+          background-color: #fff;
           left: 11px;
           top: 6px;
         }
 
-        .checkmark_kick {
+        .checkbox .checkmark_kick {
           position: absolute;
           width: 3px;
           height: 3px;
@@ -95,12 +134,16 @@ export class DeesInputCheckbox extends LitElement {
           top: 12px;
         }
 
+        .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
+          background-color: ${cssManager.bdTheme('#333', '#fff')};
+        }
+
         img {
           padding: 4px;
         }
       </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">
@@ -116,6 +159,9 @@ export class DeesInputCheckbox extends LitElement {
   }
 
   public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
     this.value = !this.value;
     this.dispatchEvent(
       new CustomEvent('newValue', {
@@ -123,5 +169,6 @@ export class DeesInputCheckbox extends LitElement {
         bubbles: true,
       })
     );
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-dropdown.ts

@@ -1,9 +1,19 @@
 import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
-
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-dropdown': DeesInputDropdown;
+  }
+}
+
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends LitElement {
+  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public label: string = 'Label';
 
@@ -20,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}
@@ -108,6 +128,7 @@ export class DeesInputDropdown extends LitElement {
       bubbles: true
     }));
     this.toggleSelectionBox();
+    this.changeSubject.next(this);
   }
 
   public toggleSelectionBox() {

ts_web/elements/dees-input-fileupload.ts

@@ -0,0 +1,144 @@
+import {
+  customElement,
+  DeesElement,
+  TemplateResult,
+  property,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-fileupload': DeesInputFileupload;
+  }
+}
+
+@customElement('dees-input-fileupload')
+export class DeesInputFileupload extends DeesElement {
+  public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String,
+  })
+  public label: string = null;
+
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    attribute: false,
+  })
+  public value: File[] = [];
+
+  @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`
+      :host {
+        position: relative;
+        display: grid;
+        margin: 10px 0px;
+        margin-bottom: 24px;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .uploadButton {
+        position: relative;
+        cursor: pointer;
+        padding: 20px 20px;
+        max-width: 200px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+      }
+      .uploadButton::after {
+        top: 7px;
+        right: 7px;
+        left: 7px;
+        bottom: 7px;
+        transform: scale3d(0.9, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 4px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+      }
+      .uploadButton.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 4px dashed rgba(255, 255, 255, 0.3);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        ${this.label ? html`<div class="label">${this.label}</div>` : null}
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
+      </div>
+    `;
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target: any = eventArg.target;
+    this.value = target.value;
+    this.changeSubject.next(this);
+  }
+
+  public firstUpdated() {
+    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const handlerFunction = (eventArg: DragEvent) => {
+      eventArg.preventDefault();
+      switch(eventArg.type) {
+        case 'dragover':
+          this.state = 'dragOver';
+          break;
+        case 'dragleave':
+          this.state = 'idle';
+          break;
+      }
+      console.log(eventArg);
+      for (const file of Array.from(eventArg.dataTransfer.files)) {
+        this.value.push(file);
+      };
+      console.log(`Got ${this.value.length} files!`);
+    };
+    dropArea.addEventListener('dragenter', handlerFunction, false);
+    dropArea.addEventListener('dragleave', handlerFunction, false);
+    dropArea.addEventListener('dragover', handlerFunction, false);
+    dropArea.addEventListener('drop', handlerFunction, false);
+  }
+}

ts_web/elements/dees-input-quantityselector.ts

@@ -1,10 +1,19 @@
-import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-quantityselector': DeesInputQuantitySelector;
+  }
+}
+
 @customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends LitElement {
+export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public key: string;
 
@@ -13,6 +22,20 @@ export class DeesInputQuantitySelector extends LitElement {
   })
   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}
@@ -32,8 +55,13 @@ export class DeesInputQuantitySelector extends LitElement {
           line-height: 40px;
           padding: 0px;
           min-width: 100px;
-          color: #CCC;
-          border: 1px solid #CCC;
+          color: ${this.goBright ? '#666' : '#CCC'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+        }
+
+        .mainContainer:hover {
+          color: ${this.goBright ? '#333' : '#fff'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
         }
 
         .minus {
@@ -57,10 +85,7 @@ export class DeesInputQuantitySelector extends LitElement {
           text-align: center;
         }
 
-        .mainContainer:hover {
-          color: #fff;
-          border: 1px solid #fff;
-        }
+        
       </style>
 
       <div class="maincontainer">
@@ -73,6 +98,7 @@ export class DeesInputQuantitySelector extends LitElement {
 
   public increase () {
     this.value++;
+    this.changeSubject.next(this);
   }
 
   public decrease () {
@@ -81,5 +107,6 @@ export class DeesInputQuantitySelector extends LitElement {
     } else {
       // nothing to do here
     }
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-radio.ts

@@ -1,9 +1,19 @@
 import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-radio': DeesInputRadio;
+  }
+}
 
 @customElement('dees-input-radio')
 export class DeesInputRadio extends LitElement {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public key: string;
 
@@ -13,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>
@@ -96,5 +120,6 @@ export class DeesInputRadio extends LitElement {
       detail: this.value,
       bubbles: true
     }));
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-text.ts

@@ -1,18 +1,44 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-text': DeesInputText;
+  }
+}
 
 @customElement('dees-input-text')
-export class DeesInputText extends LitElement {
+export class DeesInputText extends DeesElement {
   public static demo = () => html`<dees-input-text></dees-input-text>`;
 
-  @property()
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @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>
@@ -28,7 +54,7 @@ export class DeesInputText extends LitElement {
         }
 
         .maincontainer {
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .label {
@@ -38,10 +64,11 @@ export class DeesInputText extends LitElement {
 
         input {
           margin-top: 5px;
-          background: #222;
-          border: none;
-          border-top: 1px solid #444;
-          border-bottom: 1px solid #333;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
           padding-left:10px;
           padding-right: 10px;
           border-radius: 2px;
@@ -49,8 +76,15 @@ export class DeesInputText extends LitElement {
           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 {
@@ -60,7 +94,7 @@ export class DeesInputText extends LitElement {
       </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>
     `;
   }
@@ -68,6 +102,14 @@ export class DeesInputText extends LitElement {
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
+    this.changeSubject.next(this);
+  }
 
+  public async freeze() {
+    this.disabled = true;
+  }
+
+  public async unfreeze() {
+    this.disabled = false;
   }
 }

ts_web/elements/dees-spinner.ts

@@ -0,0 +1,141 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-spinner': DeesSpinner;
+  }
+}
+
+@customElement('dees-spinner')
+export class DeesSpinner extends DeesElement {
+  public static demo = () => html`
+    <dees-spinner></dees-spinner>
+    <dees-spinner status="success"></dees-spinner>
+    <dees-spinner status="error"></dees-spinner>
+  `;
+
+  @property({
+    type: Number,
+  })
+  public size = 20;
+
+  @property()
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      #loading {
+        transition: all 0.3s;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        background: #8bc34a00;
+        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
+        border-radius: 50%;
+        border-top-color: ${cssManager.bdTheme('#333', '#fff')};
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+      }
+
+      #loading.success {
+        border: 0px solid rgba(255, 255, 255, 0);
+        background: #8bc34a;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      #loading.error {
+        border: 0px solid rgba(255, 255, 255, 0);
+        background: #e64a19;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      @keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+
+      #loading .checkmark {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+        transform: rotate(45deg);
+      }
+
+      #loading .checkmark_stem {
+        position: absolute;
+        width: 3px;
+        height: 9px;
+        background-color: #fff;
+        left: 9px;
+        top: 5px;
+      }
+
+      #loading .checkmark_kick {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: #fff;
+        left: 6px;
+        top: 11px;
+      }
+
+      #loading.disabled .checkmark_stem,
+      #loading.disabled .checkmark_kick {
+        background-color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <style>
+        #loading {
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+      </style>
+      <div class="${this.status}" id="loading">
+        ${this.status === 'success' || this.status === 'error'
+          ? html`
+              <span class="checkmark">
+                <div class="checkmark_stem"></div>
+                <div class="checkmark_kick"></div>
+              </span>
+            `
+          : null}
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-toast.ts

@@ -2,6 +2,12 @@ import { customElement, LitElement, TemplateResult, html } from 'lit-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-toast': DeesToast;
+  }
+}
+
 @customElement('dees-toast')
 export class DeesToast extends LitElement {
 

ts_web/elements/dees-updater.ts

@@ -0,0 +1,47 @@
+import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+
+import './dees-windowlayer';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-updater': DeesUpdater;
+  }
+}
+
+@customElement('dees-updater')
+export class DeesUpdater extends LitElement {
+  public static demo = () => html`<dees-updater ></dees-updater>`;
+
+  @property()
+  currentVersion: string;
+
+  @property()
+  updatedVersion: string;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        .modalContainer {
+          background: #333333;
+          margin: auto;
+          height: 200px;
+          width: 800px;
+          margin-top: 80px;
+          border-radius: 10px;
+        }
+      </style>
+      <dees-windowlayer>
+        <div class="modalContainer"></div>
+      </dees-windowlayer>>
+    `;
+  }
+}

ts_web/elements/dees-windowlayer.ts

@@ -0,0 +1,50 @@
+import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowlayer': DeesWindowLayer;
+  }
+}
+
+@customElement('dees-windowlayer')
+export class DeesWindowLayer extends LitElement {
+  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        .windowOverlay {
+          transition: all 1s;
+          position: fixed;
+          top: 0px;
+          left: 0px;
+          height: 100vh;
+          width: 100vw;
+          background: rgba(0, 0, 0, 0.0);
+          backdrop-filter: blur(0px);
+        }
+        .visible {
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: blur(3px);
+        }
+      </style>
+      <div class="windowOverlay">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
+    }, 100);
+  }
+}

ts_web/elements/index.ts

@@ -4,7 +4,11 @@ export * from './dees-form-submit';
 export * from './dees-icon';
 export * from './dees-input-checkbox';
 export * from './dees-input-dropdown';
+export * from './dees-input-fileupload';
 export * from './dees-input-quantityselector';
 export * from './dees-input-radio';
 export * from './dees-input-text';
+export * from './dees-spinner';
 export * from './dees-toast';
+export * from './dees-updater';
+export * from './dees-windowlayer';

ts_web/themelogic/index.ts

@@ -1 +0,0 @@
-export {}