1.0.67

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.63",
+  "version": "1.0.67",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.63",
+      "version": "1.0.67",
       "license": "MIT",
       "dependencies": {
         "@designestate/dees-domtools": "^1.0.94",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.63",
+  "version": "1.0.67",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/elements/dees-form.ts

@@ -103,7 +103,9 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
-    this.getSubmitButton().disabled = !requiredOK;
+    if (this.getSubmitButton()) {
+      this.getSubmitButton().disabled = !requiredOK;
+    }
   }
 
   public async gatherData() {
@@ -136,6 +138,13 @@ export class DeesForm extends DeesElement {
     const submitButton = this.getSubmitButton();
 
     switch (visualStateArg) {
+      case 'normal':
+        submitButton.disabled = false;
+        submitButton.status = 'normal';
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = false;
+        }
+        break;
       case 'pending':
         submitButton.disabled = true;
         submitButton.status = 'pending';

ts_web/elements/dees-stepper.ts

@@ -100,6 +100,7 @@ export class DeesStepper extends DeesElement {
         min-height: 300px;
         border-radius: 3px;
         background: ${cssManager.bdTheme('#ffffff', '#181818')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
         color: ${cssManager.bdTheme('#333', '#fff')};
         margin: auto;
         margin-bottom: 20px;
@@ -109,6 +110,7 @@ export class DeesStepper extends DeesElement {
       }
 
       .step.selected {
+        border-top: 1px solid #e4002b;
         pointer-events: all;
         filter: opacity(1) grayscale(0);
         box-shadow: 0px 0px 5px #00000010;

ts_web/elements/dees-table.ts

@@ -0,0 +1,223 @@
+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-table': DeesTable<any>;
+  }
+}
+
+@customElement('dees-table')
+export class DeesTable<T> extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 60px;
+        background: #000000;
+      }
+    </style>
+    <div class="demoWrapper">
+      <dees-table
+        heading1="Current Account Statement"
+        heading2="Bunq - Payment Account 2 - April 2021"
+        .data=${[
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-02',
+            amount: '165.65 €',
+            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+          },
+          {
+            date: '2021-04-03',
+            amount: '2999,00 €',
+            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+        ]}
+        >This is a slotted Text</dees-table
+      >
+    </div>
+  `;
+
+  @property()
+  public heading1: string;
+
+  @property()
+  public heading2: string;
+
+  @property({
+    type: Array
+  })
+  public data: T[] = [];
+
+  @property()
+  public selectedDataRow: T;
+
+  @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`
+      .mainbox {
+        color: #fff;
+        font-family: Roboto Mono;
+        padding: 20px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: #393939;
+        border-radius: 3px;
+      }
+      .headingSeparation {
+        margin-top: 7px;
+        border-bottom: 1px solid #bcbcbc;
+      }
+
+      table,
+      .noDataSet {
+        margin-top: 20px;
+        color: #fff;
+        border-collapse: collapse;
+        width: 100%;
+      }
+      .noDataSet {
+        text-align: center;
+      }
+      tr {
+        border-bottom: 1px dashed #808080;
+        text-align: left;
+      }
+      tr:last-child {
+        border-bottom: none;
+        text-align: left;
+      }
+      tr:hover {
+        cursor: pointer;
+      }
+      tr:hover .innerCellContainer {
+        background: #ffffff10;
+      }
+      tr:first-child:hover {
+        cursor: auto;
+      }
+      tr:first-child:hover .innerCellContainer {
+        background: none;
+      }
+      th {
+        text-transform: uppercase;
+      }
+      th,
+      td {
+        padding: 3px 0px;
+        border-right: 1px dashed #808080;
+      }
+      .innerCellContainer {
+        padding: 7px 10px;
+      }
+      th:first-child .innerCellContainer,
+      td:first-child .innerCellContainer {
+        padding-left: 0px;
+      }
+      th:last-child .innerCellContainer,
+      td:last-child .innerCellContainer {
+        padding-right: 0px;
+      }
+      th:last-child,
+      td:last-child {
+        border-right: none;
+      }
+
+      .tableStatistics {
+        padding: 5px 20px;
+        font-size: 14px;
+        color: #ffffff90;
+        background: #00000050;
+        margin: 20px -20px -20px -20px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div>${this.heading1}</div>
+        <div>${this.heading2}</div>
+        <div class="headingSeparation"></div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0
+          ? (() => {
+              const headings: string[] = Object.keys(this.data[0]);
+              return html`
+                <table>
+                  <tr>
+                    ${headings.map(headingArg => html`
+                      <th>
+                        <div class="innerCellContainer">${headingArg}</div>
+                      </th>
+                    `)}
+                  </tr>
+                  ${this.data.map(itemArg => html`
+                    <tr>
+                      ${headings.map(headingArg => html`
+                        <td>
+                          <div class="innerCellContainer">${itemArg[headingArg]}</div>
+                        </td>
+                      `)}
+                    </tr>
+                  `)}
+                </table>
+              `;
+            })()
+          : html` <div class="noDataSet">No data set!</div> `}
+        <div class="tableStatistics">
+          ${this.data.length} data rows (total) |
+          ${this.selectedDataRow ? html`` : html`No row selected`}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {}
+}

ts_web/elements/index.ts

@@ -10,6 +10,7 @@ export * from './dees-input-radio';
 export * from './dees-input-text';
 export * from './dees-spinner';
 export * from './dees-stepper';
+export * from './dees-table';
 export * from './dees-toast';
 export * from './dees-updater';
 export * from './dees-windowlayer';