1.0.70

.gitlab-ci.yml

@@ -36,6 +36,7 @@ auditProductionDependencies:
     - npmci command npm audit --audit-level=high --only=prod --production
   tags:
     - docker
+  allow_failure: true
 
 auditDevDependencies:
   image: registry.gitlab.com/hosttoday/ht-docker-node:npmci

.vscode/launch.json

@@ -2,28 +2,10 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "current file",
+      "command": "npm test",
-      "type": "node",
+      "name": "Run npm test",
       "request": "launch",
-      "args": [
+      "type": "node-terminal"
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }

license

@@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+copies or substantial portions of the Software. You agree to being mentioned
+as reference by Lossless GmbH. This includes the use of your entity logos
+or profile picture by Lossless GmbH on websites and readme's, also on third party
+pages like gitlab.com or github.com.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.52",
+  "version": "1.0.70",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,19 +13,19 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.90",
+    "@designestate/dees-domtools": "^1.0.96",
-    "@designestate/dees-element": "^1.0.19",
+    "@designestate/dees-element": "^1.0.26",
-    "@designestate/dees-wcctools": "^1.0.57",
+    "@designestate/dees-wcctools": "^1.0.59",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.3"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.26",
+    "@gitzone/tsbuild": "^2.1.28",
-    "@gitzone/tsbundle": "^1.0.87",
+    "@gitzone/tsbundle": "^1.0.88",
-    "@gitzone/tstest": "^1.0.57",
+    "@gitzone/tstest": "^1.0.59",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "@pushrocks/tapbundle": "^3.2.14",

ts_web/elements/dees-chips.ts

@@ -0,0 +1,123 @@
+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-chips': DeesChips;
+  }
+}
+
+@customElement('dees-chips')
+export class DeesChips extends DeesElement {
+  public static demo = () => html`
+    <dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
+    <dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
+    
+  `;
+
+  @property()
+  public selectionMode: 'single' | 'multiple' = 'single';
+
+  @property({
+    type: Array
+  })
+  public selectableChips: string[] = [];
+
+  @property()
+  public selectedChip: string = null;
+
+  @property({
+    type: Array
+  })
+  public selectedChips: string[] = [];
+  
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .mainbox {
+
+      }
+
+      .chip {
+        background: #494949;
+        display: inline-block;
+        padding: 8px 12px;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 30px;
+        margin-right: 3px;
+        margin-bottom: 7px;
+      }
+
+      .chip:hover {
+        background: #666666;
+        cursor: pointer; 
+      }
+
+      .chip.selected {
+        background: #00A3FF;
+      }
+      
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        ${this.selectableChips.map(chipArg => html`
+          <div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
+            ${chipArg}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+
+  public async selectChip(chipArg: string) {
+    if (this.selectionMode === 'single') {
+      if (this.selectedChip === chipArg) {
+        this.selectedChip = null;
+        this.selectedChips = [];
+      } else {
+        this.selectedChip = chipArg;
+        this.selectedChips = [chipArg];
+      }
+    } else if(this.selectionMode === 'multiple') {
+      if (this.selectedChips.includes(chipArg)) {
+        this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
+      } else {
+        this.selectedChips.push(chipArg);
+      }
+      this.requestUpdate();
+    }
+    console.log(this.selectedChips);
+  }
+}

ts_web/elements/dees-form.ts

@@ -103,8 +103,10 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
+    if (this.getSubmitButton()) {
       this.getSubmitButton().disabled = !requiredOK;
     }
+  }
 
   public async gatherData() {
     const children = this.getFormChildren();
@@ -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

@@ -14,44 +14,57 @@ import * as domtools from '@designestate/dees-domtools';
 export interface IStep {
   title: string;
   content: TemplateResult;
+  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  validationFuncCalled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-stepper': DeesStepper;
+  }
 }
 
 @customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
-  public static demo = () => html` <dees-stepper></dees-stepper> `;
+  public static demo = () =>
-
+    html`
-  @property({
+      <dees-stepper
-    type: Array,
+        .steps=${[
-  })
-  public steps: IStep[] = [
           {
             title: 'Whats your name?',
             content: html`
               <dees-form>
-          <dees-input-text key="email" label="Your Email" value="hello@something.com" disabled></dees-input-text>
+                <dees-input-text
+                  key="email"
+                  label="Your Email"
+                  value="hello@something.com"
+                  disabled
+                ></dees-input-text>
                 <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
                 <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
                 <dees-form-submit>Next</dees-form-submit>
               </dees-form>
             `,
+            validationFunc: async (stepperArg, elementArg) => {
+              const deesForm = elementArg.querySelector('dees-form');
+              deesForm.addEventListener('formData', eventArg => {
+                stepperArg.goNext();
+              })
+            }
           },
           {
             title: 'Whats your mobile number?',
             content: html``,
-    },
+          }
-    {
+        ] as IStep[]}
-      title: 'Whats the verification code?',
+      ></dees-stepper>
-      content: html``,
+    `;
-    },
+
-    {
+  @property({
-      title: 'Whats your new password?',
+    type: Array,
-      content: html``,
+  })
-    },
+  public steps: IStep[] = [];
-    {
-      title: 'Verification:',
-      content: html``,
-    },
-  ];
 
   @property({
     type: Object,
@@ -87,23 +100,31 @@ 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;
-        filter: opacity(0.5);
+        filter: opacity(0.5) grayscale(1);
         box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
       }
 
       .step.selected {
+        border-top: 1px solid #e4002b;
         pointer-events: all;
-        filter: opacity(1);
+        filter: opacity(1) grayscale(0);
         box-shadow: 0px 0px 5px #00000010;
+        user-select: auto;
       }
 
       .step.hiddenStep {
         filter: opacity(0);
       }
 
+      .step:last-child {
+        margin-bottom: 100vh;
+      }
+
       .step .stepCounter {
         position: absolute;
         top: 0px;
@@ -148,9 +169,20 @@ export class DeesStepper extends DeesElement {
       <div class="stepperContainer">
         ${this.steps.map(
           (stepArg) =>
-            html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
+            html`<div
-              ${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
+              class="step ${stepArg === this.selectedStep
-              <div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
+                ? 'selected'
+                : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
+                ? 'hiddenStep'
+                : ''}"
+            >
+              ${this.getIndexOfStep(stepArg) > 0
+                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+                : ``}
+              <div class="stepCounter">
+                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+                ${this.steps.length}
+              </div>
               <div class="title">${stepArg.title}</div>
               <div class="content">${stepArg.content}</div>
             </div> `
@@ -160,22 +192,19 @@ export class DeesStepper extends DeesElement {
   }
 
   public getIndexOfStep = (stepArg: IStep): number => {
-    return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
+    return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
-  }
+  };
 
   public firstUpdated() {
     this.selectedStep = this.steps[0];
     this.setScrollStatus();
-    domtools.plugins.smartdelay.delayFor(2000).then(() => {
-      this.goNext();
-    })
   }
 
   public updated() {
     this.setScrollStatus();
   }
 
-  public scroller: typeof domtools.plugins.sweetScroll.prototype;
+  public scroller: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
     await domtools.plugins.smartdelay.delayFor(50);
@@ -183,30 +212,45 @@ export class DeesStepper extends DeesElement {
     const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
     const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
     if (!stepperContainer.style.paddingTop) {
-      stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
+      stepperContainer.style.paddingTop = `${
+        stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
+      }px`;
     }
     console.log('Setting scroll status');
     console.log(selectedStepElement);
-    const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
+    const scrollPosition =
+      selectedStepElement.offsetTop -
+      stepperContainer.offsetHeight / 2 +
+      selectedStepElement.offsetHeight / 2;
     console.log(scrollPosition);
-    const domtoolsInstance = await domtools.DomTools.setupDomTools()
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
     if (!this.scroller) {
-      this.scroller = new domtools.plugins.sweetScroll({
+      this.scroller = new domtools.plugins.SweetScroll(
+        {
           vertical: true,
           horizontal: false,
-        easing: 'easeInOutQuint'
+          easing: 'easeInOutQuint',
-      }, stepperContainer);
+        },
+        stepperContainer
+      );
+    }
+    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+      this.selectedStep.validationFuncCalled = true;
+      await this.selectedStep.validationFunc(this, selectedStepElement);
     }
     this.scroller.to(scrollPosition);
   }
 
-  public goBack() {
+  public async goBack() {
-    const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
     this.selectedStep = this.steps[currentIndex - 1];
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(100);
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
   }
 
   public goNext() {
-    const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
     this.selectedStep = this.steps[currentIndex + 1];
   }
 }

ts_web/elements/dees-table.ts

@@ -0,0 +1,237 @@
+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;
+      }
+      tr.selected .innerCellContainer {
+        background: #ffffff20
+      }
+      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
+                        @click=${() => {
+                          this.selectedDataRow = itemArg;
+                        }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${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`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {}
+}

ts_web/elements/index.ts

@@ -1,4 +1,5 @@
 export * from './dees-button';
+export * from './dees-chips';
 export * from './dees-form';
 export * from './dees-form-submit';
 export * from './dees-icon';
@@ -10,6 +11,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';