fix(core): update

ts_web/elements/dees-button.ts

@@ -0,0 +1,128 @@
+import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-button')
+export class DeesButton extends LitElement {
+  @property()
+  text: string;
+
+  @property()
+  eventDetailData: string;
+
+  @property()
+  disabled = false;
+
+  @property()
+  isQuote = false;
+
+  @property()
+  isHidden = false;
+
+  @property()
+  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  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>
+    `;
+  }
+
+  public async dispatchClick() {
+    if (this.disabled) {
+
+      return;
+    }
+
+    this.dispatchEvent(new CustomEvent('clicked', {
+      detail: {
+        data: this.eventDetailData
+      },
+      bubbles: true
+    }));
+  }
+
+  public async firstUpdated () {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+}

ts_web/elements/dees-form-submit.ts

@@ -0,0 +1,19 @@
+import { customElement, html, LitElement } from 'lit-element';
+
+import {DeesForm} from './dees-form';
+
+@customElement('dees-form-submit')
+export class DeesFormSubmit extends LitElement {
+
+
+  public render() {
+    return html`
+      <dees-button @click="${this.submit}">${this.textContent}</dees-button>
+    `;
+  }
+
+  public async submit() {
+    const parentElement: DeesForm = this.parentElement as DeesForm;
+    parentElement.gatherAndDispatch();
+  }
+}

ts_web/elements/dees-form.ts

@@ -0,0 +1,50 @@
+import { customElement, html, TemplateResult, LitElement } from 'lit-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';
+
+@customElement('dees-form')
+export class DeesForm extends LitElement {
+  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-submit>Submit</dees-form-submit>
+    </dees-form>`;
+
+  public name: string = 'myform';
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: contents;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+
+  public async gatherAndDispatch() {
+
+    const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
+    const valueObject: { [key: string]: string | number | boolean} = {};
+    for (const child of children) {
+      if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
+        valueObject[child.key] = child.value;
+      }
+    }
+
+
+    console.log(valueObject);
+    const formDataEvent = new CustomEvent('formData', {
+      detail: {
+        data: valueObject
+      },
+      bubbles: true
+    });
+    this.dispatchEvent(formDataEvent);
+  }
+}

ts_web/elements/dees-input-checkbox.ts

@@ -0,0 +1,127 @@
+import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-input-checkbox')
+export class DeesInputCheckbox extends LitElement {
+  public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
+
+  @property()
+  public key: string;
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public value: boolean = false;
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: #ccc;
+        }
+
+        .maincontainer:hover {
+          color: #fff;
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.1s;
+          box-sizing: border-box;
+          border: 1px solid #999;
+          border-radius: 2px;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: #222;
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .checkmark {
+          display: inline-block;
+          width: 22px;
+          height: 22px;
+          -ms-transform: rotate(45deg); /* IE 9 */
+          -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+          transform: rotate(45deg);
+        }
+
+        .checkmark_stem {
+          position: absolute;
+          width: 3px;
+          height: 9px;
+          background-color: #ccc;
+          left: 11px;
+          top: 6px;
+        }
+
+        .checkmark_kick {
+          position: absolute;
+          width: 3px;
+          height: 3px;
+          background-color: #fff;
+          left: 8px;
+          top: 12px;
+        }
+
+        img {
+          padding: 4px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''}">
+          ${this.value
+            ? html`
+                <span class="checkmark">
+                  <div class="checkmark_stem"></div>
+                  <div class="checkmark_kick"></div>
+                </span>
+              `
+            : html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected() {
+    this.value = !this.value;
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+  }
+}

ts_web/elements/dees-input-dropdown.ts

@@ -0,0 +1,116 @@
+import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-input-dropdown')
+export class DeesInputDropdown extends LitElement {
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public key: string;
+
+  @property()
+  public options: {option: string, key: string, payload?: any}[] = [];
+
+  @property()
+  public selectedOption: {option: string, key: string, payload?: any} = {
+    key: null,
+    option: null,
+    payload: null
+  };
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: block;
+          height: 40px;
+        }
+
+        .maincontainer {
+          display: block;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 15px;
+        }
+
+        .selectedBox {
+          cursor: pointer;
+          position: relative;
+          max-width: 420px;
+          height: 40px;
+          border: 1px solid #CCC;
+          padding: 12px;
+          z-index: 0px;
+        }
+
+        .selectionBox {
+          pointer-events: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          opacity: 0;
+          position: relative;
+          background: #ffffff;
+          max-width: 420px;
+          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
+          height: 40px;
+          margin-top: -40px;
+          z-index: 100;
+        }
+
+        .selectionBox.show {
+          pointer-events: all;
+          opacity: 1;
+          min-height: 160px;
+        }
+
+        .option {
+          padding: 12px;
+        }
+
+        .option:hover {
+          background: #fafafa;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
+          ${this.selectedOption?.option}
+        </div>
+        <div class="selectionBox">
+          ${this.options.map(option => {
+            return html`
+              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
+            `
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    this.selectedOption = this.options[0] || null;
+  }
+
+  public async updateSelection(selectedOption) {
+    this.selectedOption = selectedOption;
+
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      detail: selectedOption,
+      bubbles: true
+    }));
+    this.toggleSelectionBox();
+  }
+
+  public toggleSelectionBox() {
+    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+  }
+}

ts_web/elements/dees-input-quantityselector.ts

@@ -0,0 +1,85 @@
+import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-input-quantityselector')
+export class DeesInputQuantitySelector extends LitElement {
+  public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
+
+  @property()
+  public key: string;
+
+  @property({
+    type: Number
+  })
+  public value: number = 1;
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          display: block;
+          width: 110px;
+          user-select: none;
+        }
+        .maincontainer {
+          transition: all 0.1s;
+          font-size: 14px;
+          display: grid;
+          grid-template-columns: 33% 34% 33%;
+          text-align: center;
+          background:none;
+          line-height: 40px;
+          padding: 0px;
+          min-width: 100px;
+          color: #CCC;
+          border: 1px solid #CCC;
+        }
+
+        .minus {
+          padding-left: 5px;
+        }
+
+        .plus {
+          padding-right: 5px;
+        }
+
+        .selector {
+          text-align: center;
+          font-size: 20px;
+        }
+
+        .selector:hover {
+          cursor: pointer;
+        }
+
+        .quantity {
+          text-align: center;
+        }
+
+        .mainContainer:hover {
+          color: #fff;
+          border: 1px solid #fff;
+        }
+      </style>
+
+      <div class="maincontainer">
+        <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
+        <div class="quantity">${this.value}</div>
+        <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+      </div>
+    `;
+  }
+
+  public increase () {
+    this.value++;
+  }
+
+  public decrease () {
+    if (this.value > 0) {
+      this.value--;
+    } else {
+      // nothing to do here
+    }
+  }
+}

ts_web/elements/dees-input-radio.ts

@@ -0,0 +1,100 @@
+import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+
+@customElement('dees-input-radio')
+export class DeesInputRadio extends LitElement {
+  public static demo = () => html`<dees-input-radio></dees-input-radio>`;
+
+  @property()
+  public key: string;
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public value: boolean = false;
+
+  public render(): TemplateResult {
+    return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          transition: all 0.3s;
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: #ccc;
+        }
+
+        .maincontainer:hover {
+          color: #fff;
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.3s;
+          box-sizing: border-box;
+          border-radius: 20px;
+          border: 1px solid #999;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: #222;
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .maincontainer:hover .checkbox.selected {
+          background: #03A9F4;
+        }
+
+        .innercircle {
+          transition: all 0.3s;
+          margin: 6px 0px 0px 6px;
+          background: #222;
+          width: 10px;
+          height: 10px;
+          border-radius: 10px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''}">
+        ${this.value ? html`<div class="innercircle"></div>`: html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected () {
+    this.value = !this.value;
+    this.dispatchEvent(new CustomEvent('newValue', {
+      detail: this.value,
+      bubbles: true
+    }));
+  }
+}

ts_web/elements/dees-input-text.ts

@@ -0,0 +1,73 @@
+import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+
+@customElement('dees-input-text')
+export class DeesInputText extends LitElement {
+  public static demo = () => html`<dees-input-text></dees-input-text>`;
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public key: string;
+
+  @property()
+  public value: string;
+
+  public render(): TemplateResult {
+    return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: grid;
+          margin: 10px 0px;
+          margin-bottom: 24px;
+        }
+
+        .maincontainer {
+          color: #ccc;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 5px;
+        }
+
+        input {
+          margin-top: 5px;
+          background: #222;
+          border: none;
+          border-top: 1px solid #444;
+          border-bottom: 1px solid #333;
+          padding-left:10px;
+          padding-right: 10px;
+          border-radius: 2px;
+          width: 100%;
+          line-height: 48px;
+          transition: all 0.2s;
+          outline: none;
+          color: #ccc;
+          font-size: 16px;
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="label">${this.label}</div>
+        <input type="text" @input="${this.updateValue}" />
+      </div>
+    `;
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target: any = eventArg.target;
+    this.value = target.value;
+
+  }
+}

ts_web/elements/dees-toast.ts

@@ -0,0 +1,20 @@
+import { customElement, LitElement, TemplateResult, html } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-toast')
+export class DeesToast extends LitElement {
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      
+    `;
+  }
+}

ts_web/elements/index.ts

@@ -0,0 +1,9 @@
+export * from './dees-button';
+export * from './dees-form';
+export * from './dees-form-submit';
+export * from './dees-input-checkbox';
+export * from './dees-input-dropdown';
+export * from './dees-input-quantityselector';
+export * from './dees-input-radio';
+export * from './dees-input-text';
+export * from './dees-toast';

ts_web/elements/lele-element.ts

@@ -1,35 +0,0 @@
-import { LitElement, property, html, customElement } from 'lit-element';
-import { TemplateResult } from 'lit-html';
-
-@customElement('lele-element')
-export class LeleElement extends LitElement {
-  @property()
-  public footerText = `Lossless GmbH - 2018`;
-
-  constructor() {
-    super();
-
-    // you have access to all kinds of things through this.
-    // this.setAttribute('gotIt','true');
-    
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
-        :host {
-          font-family: 'Roboto', sans-serif;
-          background: #FCFCFC;
-          box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-          display: block;
-          box-sizing: border-box;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
-}

ts_web/index.ts

@@ -1,5 +1 @@
-import { LeleElement } from './elements/lele-element';
-
-export {
-  LeleElement
-};
+export * from './elements/index';

ts_web/themelogic/index.ts

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