fix(core): update

2020-09-13 16:24:48 +00:00
parent 4ad638dad8
commit 9f8a5fedfa
20 changed files with 3879 additions and 2513 deletions
--- a/ts_web/elements/dees-button.ts
+++ b/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();
+    }
+  }
+}