fix(core): update

package.json

@@ -15,7 +15,7 @@
   "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/tstest": "^1.0.70",
-    "@gitzone/tswatch": "^1.0.81",
+    "@gitzone/tsbundle": "^2.0.3",
+    "@gitzone/tstest": "^1.0.71",
+    "@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.81',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-speechbubble.ts

@@ -0,0 +1,147 @@
+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: #fff;
+        cursor: pointer;
+        user-select: none;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .arrow {
+        position: absolute;
+        transform: rotate(45deg);
+        background: #333;
+        height: 20px;
+        width: 20px;
+        left: 5px;
+        top: 5px;
+        border-radius: 3px;
+      }
+
+      .maincontainer {
+        background: #333;
+        padding: 0px 10px;
+        border-radius: 3px;
+        position: absolute;
+        line-height: 30px;
+        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="arrow"></div>
+      <div class="maincontainer"><span class="wave">👋</span> Hey! We are consulting.</div>
+    `;
+  }
+
+  public async dispatchClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: null,
+        },
+        bubbles: true,
+      })
+    );
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+}

ts_web/elements/index.ts

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