fix(core): update

ts_web/elements/dees-button.ts

@@ -19,7 +19,17 @@ declare global {
 
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
-  public static demo = () => html`<dees-button>This is a slotted Text</dees-button>`;
+  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()
   public text: string;
@@ -32,12 +42,21 @@ export class DeesButton extends DeesElement {
   })
   public disabled = false;
 
-  @property()
+  @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();
   }
@@ -54,10 +73,12 @@ export class DeesButton extends DeesElement {
       }
 
       .button {
+        position: relative;
         transition: all 0.2s ease;
         font-size: 14px;
-        display: block;
+        display: flex;
-        text-align: center;
+        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')};
@@ -67,6 +88,7 @@ export class DeesButton extends DeesElement {
         min-width: 100px;
         user-select: none;
         color: ${cssManager.bdTheme('#333', ' #ccc')};
+        max-width: 500px;
       }
 
       .button:hover {
@@ -91,41 +113,71 @@ export class DeesButton extends DeesElement {
 
       .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: #000;
+        color: ${cssManager.bdTheme('#000', '#fff')};
       }
 
       .button.discreet:hover {
-        background: rgba(0, 0, 0, 0.1);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
       }
-      .hidden {
+      .button.hidden {
         display: none;
       }
 
-      .big {
+      .button.big {
-        display: inline-block;
+        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`
       <div
-        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
           ? 'disabled'
           : null}"
         @click="${this.dispatchClick}"
       >
-        ${this.text ? this.text : html`<slot></slot>`}
+        ${this.status === 'normal' ? html``: html`
+          <dees-spinner status="${this.status}"></dees-spinner>
+        `}
+        <div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
       </div>
     `;
   }

ts_web/elements/dees-form-submit.ts

@@ -28,6 +28,11 @@ export class DeesFormSubmit extends DeesElement {
   })
   public text: string;
 
+  @property({
+    type: String
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
   constructor() {
     super();
   }
@@ -36,7 +41,7 @@ export class DeesFormSubmit extends DeesElement {
 
   public render() {
     return html`
-      <dees-button @click="${this.submit}" .disabled="${this.disabled}">
+      <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
         ${this.text ? this.text : html`<slot></slot>`}
       </dees-button>
     `;

ts_web/elements/dees-form.ts

@@ -20,7 +20,7 @@ export class DeesForm extends DeesElement {
   public static demo = () => html`
     <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
       const form: DeesForm = eventArg.currentTarget;
-      form.setStatus('freeze', 'authenticating...');
+      form.setStatus('pending', 'authenticating...');
       await domtools.plugins.smartdelay.delayFor(1000);
       form.setStatus('success', 'authenticated!');
     }}>
@@ -116,13 +116,21 @@ export class DeesForm extends DeesElement {
     console.log(valueObject);
   }
 
-  public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
+  public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
     const inputChildren = this.getFormChildren();
     const submitButton = this.getSubmitButton();
 
     switch(visualStateArg) {
-      case 'freeze':
+      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;
         }

ts_web/elements/dees-input-checkbox.ts

@@ -107,7 +107,7 @@ export class DeesInputCheckbox extends DeesElement {
           border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
         }
 
-        .checkmark {
+        .checkbox .checkmark {
           display: inline-block;
           width: 22px;
           height: 22px;
@@ -116,16 +116,16 @@ export class DeesInputCheckbox extends DeesElement {
           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;
@@ -134,6 +134,10 @@ export class DeesInputCheckbox extends DeesElement {
           top: 12px;
         }
 
+        .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
+          background-color: ${cssManager.bdTheme('#333', '#fff')};
+        }
+
         img {
           padding: 4px;
         }

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/index.ts

@@ -8,6 +8,7 @@ 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';