fix(core): update

package.json

@@ -13,20 +13,20 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.84",
+    "@designestate/dees-domtools": "^1.0.87",
-    "@designestate/dees-element": "^1.0.10",
+    "@designestate/dees-element": "^1.0.19",
-    "@designestate/dees-wcctools": "^1.0.54",
+    "@designestate/dees-wcctools": "^1.0.57",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "typescript": "^4.1.5"
+    "typescript": "^4.2.4"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tsbundle": "^1.0.80",
     "@gitzone/tstest": "^1.0.52",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tswatch": "^1.0.52",
     "@pushrocks/projectinfo": "^4.0.5",
     "@pushrocks/tapbundle": "^3.2.14",
     "tslint": "^6.1.3",

ts_web/elements/dees-button.ts

@@ -1,4 +1,13 @@
-import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
@@ -10,7 +19,7 @@ declare global {
 
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
-  public static demo = () => html`<dees-button></dees-button>`
+  public static demo = () => html`<dees-button></dees-button>`;
 
   @property()
   text: string;
@@ -31,79 +40,87 @@ export class DeesButton extends DeesElement {
     super();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :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: ${cssManager.bdTheme('#eee', '#333')};
+        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')};
+      }
+
+      .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;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
+      <div
-      <style>
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled
-        :host {
+          ? 'disabled'
-          display: block;
+          : null}"
-          box-sizing: border-box;
+        @click="${this.dispatchClick}"
-        }
+      >
-        :host([hidden]) {
-          display: none;
-        }
-
-        .button {
-          transition: all 0.2s ease;
-          font-size: 14px;
-          display: block;
-          text-align: center;
-          background: ${this.goBright ? '#eee' : '#333'};
-          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
-          border-radius: 2px;
-          line-height: 40px;
-          padding: 0px 10px;
-          min-width: 100px;
-          user-select: none;
-          color: ${this.goBright ? '#333' : ' #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>
     `;
@@ -111,19 +128,20 @@ export class DeesButton extends DeesElement {
 
   public async dispatchClick() {
     if (this.disabled) {
-
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('clicked', {
+    this.dispatchEvent(
-      detail: {
+      new CustomEvent('clicked', {
-        data: this.eventDetailData
+        detail: {
-      },
+          data: this.eventDetailData,
-      bubbles: true
+        },
-    }));
+        bubbles: true,
+      })
+    );
   }
 
-  public async firstUpdated () {
+  public async firstUpdated() {
     if (!this.textContent) {
       this.textContent = 'Button';
       this.performUpdate();

ts_web/elements/dees-form-submit.ts

@@ -1,6 +1,5 @@
-import { customElement, html, LitElement } from 'lit-element';
+import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
-
+import { DeesForm } from './dees-form';
-import {DeesForm} from './dees-form';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -9,13 +8,15 @@ declare global {
 }
 
 @customElement('dees-form-submit')
-export class DeesFormSubmit extends LitElement {
+export class DeesFormSubmit extends DeesElement {
+  constructor() {
+    super();
+  }
 
+  public static styles = [cssManager.defaultStyles, css``];
 
   public render() {
-    return html`
+    return html` <dees-button @click="${this.submit}">${this.textContent}</dees-button> `;
-      <dees-button @click="${this.submit}">${this.textContent}</dees-button>
-    `;
   }
 
   public async submit() {

ts_web/elements/dees-input-fileupload.ts

@@ -0,0 +1,124 @@
+import {
+  customElement,
+  DeesElement,
+  TemplateResult,
+  property,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+} from '@designestate/dees-element';
+
+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>`;
+
+  @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';
+
+  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;
+  }
+
+  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-newelement.ts

@@ -0,0 +1,22 @@
+import { DeesElement, html, customElement, cssManager, css } from '@designestate/dees-element';
+
+@customElement('dees-newelement')
+export class NewElement extends DeesElement {
+  public static css = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        background: ${cssManager.bdTheme('#000', '#fff')};
+      }
+    `
+  ]
+
+  public static demo = () => html`<dees-newelement></dees-newelement>`;
+
+  public render() {
+    return html`
+      Hello
+    `;
+  }
+}

ts_web/elements/index.ts

@@ -4,9 +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-toast';
 export * from './dees-updater';
 export * from './dees-windowlayer';
+export * from './dees-newelement';