1.0.88

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.80",
+  "version": "1.0.88",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -8,14 +8,14 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web",
-    "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --production",
+    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
     "@designestate/dees-domtools": "^2.0.22",
-    "@designestate/dees-element": "^2.0.14",
+    "@designestate/dees-element": "^2.0.15",
     "@designestate/dees-wcctools": "^1.0.74",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
@@ -24,9 +24,9 @@
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.61",
-    "@gitzone/tsbundle": "^1.0.103",
+    "@gitzone/tsbundle": "^2.0.3",
-    "@gitzone/tstest": "^1.0.70",
+    "@gitzone/tstest": "^1.0.71",
-    "@gitzone/tswatch": "^1.0.81",
+    "@gitzone/tswatch": "^2.0.1",
     "@pushrocks/projectinfo": "^5.0.1",
     "@pushrocks/tapbundle": "^5.0.3"
   },

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.80',
+  version: '1.0.88',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button-exit.ts

@@ -0,0 +1,53 @@
+import {
+  cssManager,
+  customElement,
+  DeesElement,
+  html,
+  TemplateResult,
+  css,
+  state,
+  property
+} from '@designestate/dees-element';
+
+@customElement('dees-button-exit')
+export class DeesButtonExit extends DeesElement {
+  // DEMO
+  public static demo = () => html`
+    <dees-button-exit></dees-button-exit>
+  `;
+
+  // INSTANCE
+  @property({
+    type: Number
+  })
+  public size: number = 20;
+
+  public styles = [
+    cssManager.defaultStyles,
+    css`
+
+    `
+  ]
+
+  public render (): TemplateResult {
+    return html`
+      <style>
+        .maincontainer {
+          position: relative;
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+        .firstLine {
+          position: absolute;
+        }
+        .secondLine {
+          position: absolute;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="firstLine"></div>
+        <div class="secondLine"></div>
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-speechbubble.ts

@@ -0,0 +1,156 @@
+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-speechbubble': DeesSpeechbubble;
+  }
+}
+
+@customElement('dees-speechbubble')
+export class DeesSpeechbubble extends DeesElement {
+  public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
+
+  @property()
+  public text: string;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled = false;
+
+  @property({
+    type: Boolean,
+  })
+  public isHidden = false;
+
+  @property({
+    type: String,
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: relative;
+        display: block;
+        box-sizing: border-box;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        cursor: pointer;
+        user-select: none;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .maincontainer {
+        will-change: transform;
+        transition: transform 0.2s;
+        transform: translateX(0px);
+        position: relative;
+        transition: all 0.2s;
+        margin-left: 0px;
+      }
+
+      .maincontainer:hover {
+        transform: translateX(3px);
+      }
+
+      .arrow {
+        position: absolute;
+        transform: rotate(45deg);
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        height: 15px;
+        width: 15px;
+        left: 4px;
+        top: 5px;
+        border-radius: 2px;
+      }
+
+      .speechbubble {
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        padding: 0px 10px;
+        border-radius: 3px;
+        position: absolute;
+        line-height: 25px;
+        font-size: 12px;
+        top: 0px;
+        left: 8px;
+      }
+
+      .wave {
+        animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
+        animation-duration: 2.5s; /* Change to speed up or slow down */
+        animation-iteration-count: infinite; /* Never stop waving :) */
+        transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
+        display: inline-block;
+      }
+
+      @keyframes wave-animation {
+        0% {
+          transform: rotate(0deg);
+        }
+        10% {
+          transform: rotate(14deg);
+        } /* The following five values can be played with to make the waving more or less extreme */
+        20% {
+          transform: rotate(-8deg);
+        }
+        30% {
+          transform: rotate(14deg);
+        }
+        40% {
+          transform: rotate(-4deg);
+        }
+        50% {
+          transform: rotate(10deg);
+        }
+        60% {
+          transform: rotate(0deg);
+        } /* Reset for the last half to pause */
+        100% {
+          transform: rotate(0deg);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer" @click=${this.handleClick}>
+        <div class="arrow"></div>
+        <div class="speechbubble"><span class="wave">👋</span> Hey! We are consulting.</div>
+      </div>
+    `;
+  }
+
+  public async handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    globalThis.location.href = "https://lossless.consulting"
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+}

ts_web/elements/dees-table.ts

@@ -104,24 +104,25 @@ export class DeesTable<T> extends DeesElement {
     cssManager.defaultStyles,
     css`
       .mainbox {
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         font-family: Roboto Mono;
         padding: 20px;
         display: block;
         width: 100%;
         min-height: 50px;
-        background: #393939;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
         border-radius: 3px;
+        box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
       }
       .headingSeparation {
         margin-top: 7px;
-        border-bottom: 1px solid #bcbcbc;
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
       }
 
       table,
       .noDataSet {
         margin-top: 20px;
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         border-collapse: collapse;
         width: 100%;
       }
@@ -129,7 +130,7 @@ export class DeesTable<T> extends DeesElement {
         text-align: center;
       }
       tr {
-        border-bottom: 1px dashed #808080;
+        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
         text-align: left;
       }
       tr:last-child {
@@ -140,7 +141,7 @@ export class DeesTable<T> extends DeesElement {
         cursor: pointer;
       }
       tr:hover .innerCellContainer {
-        background: #ffffff10;
+        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
       }
       tr:first-child:hover {
         cursor: auto;
@@ -149,7 +150,7 @@ export class DeesTable<T> extends DeesElement {
         background: none;
       }
       tr.selected .innerCellContainer {
-        background: #ffffff20
+        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
       }
       th {
         text-transform: uppercase;
@@ -157,7 +158,7 @@ export class DeesTable<T> extends DeesElement {
       th,
       td {
         padding: 3px 0px;
-        border-right: 1px dashed #808080;
+        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
       }
       .innerCellContainer {
         padding: 7px 10px;
@@ -178,8 +179,8 @@ export class DeesTable<T> extends DeesElement {
       .tableStatistics {
         padding: 5px 20px;
         font-size: 14px;
-        color: #ffffff90;
+        color: ${cssManager.bdTheme('#111', '#ffffff90')};
-        background: #00000050;
+        background: ${cssManager.bdTheme('#00000020', '#00000050')};
         margin: 20px -20px -20px -20px;
       }
     `,

ts_web/elements/index.ts

@@ -1,3 +1,4 @@
+export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chips.js';
 export * from './dees-form.js';
@@ -9,6 +10,7 @@ export * from './dees-input-fileupload.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
+export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-stepper.js';
 export * from './dees-table.js';

ts_web/index.ts

@@ -1,2 +1,2 @@
 export * from './elements/index.js';
-export { commitinfo } from './00_commitinfo_data';
+export { commitinfo } from './00_commitinfo_data.js';

ts_web/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "declaration": true,
-    "inlineSources": true,
-    "inlineSourceMap": true,
-    "noUnusedLocals": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist/",
-    "skipLibCheck": true,
-    "experimentalDecorators": true
-  }
-}