@design.estate/dees-catalog 1.0.173

package/ts_web/elements/dees-speechbubble.ts

@@ -0,0 +1,157 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  type CSSResult,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/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> We build with launch.sh, and you can too.</div>
+      </div>
+    `;
+  }
+
+  public async handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    globalThis.location.href = "https://launch.sh"
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+}

package/ts_web/elements/dees-spinner.ts

@@ -0,0 +1,131 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  type CSSResult,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/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>
+    <dees-spinner size=${64} status="success"></dees-spinner>
+    <dees-spinner .size=${64} status="error"></dees-spinner>
+  `;
+
+  @property({
+    type: Number,
+  })
+  public size = 20;
+
+  @property({
+    type: String,
+  })
+  public bnw: boolean = false;
+
+  @property()
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      #loading {
+        position: relative;
+        transition: none;
+        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: none;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      #loading.error {
+        border: none;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      @keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+
+      dees-icon {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <style>
+        #loading {
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+        #loading.success {
+          color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
+          
+        }
+        #loading.error {
+          color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
+        }
+        dees-icon {
+          font-size: ${this.size}px;
+        }
+      </style>
+      <div class="${this.status}" id="loading">
+        ${(() => {
+          if (this.status === 'success') {
+            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
+          } else if (this.status === 'error') {
+            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
+          }
+        })()}
+      </div>
+    `;
+  }
+}

package/ts_web/elements/dees-stepper.ts

@@ -0,0 +1,262 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  unsafeCSS,
+  type CSSResult,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/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
+        .steps=${[
+          {
+            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="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[]}
+      ></dees-stepper>
+    `;
+
+  @property({
+    type: Array,
+  })
+  public steps: IStep[] = [];
+
+  @property({
+    type: Object,
+  })
+  public selectedStep: IStep;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .stepperContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        overflow: hidden;
+      }
+
+      .step {
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        transition: all 0.7s ease-in-out;
+        max-width: 500px;
+        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) grayscale(1);
+        box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
+      }
+
+      .step.selected {
+        border-top: 1px solid #e4002b;
+        pointer-events: all;
+        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;
+        right: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-left-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+      }
+
+      .step .goBack {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-right-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+        cursor: pointer;
+      }
+
+      .step .goBack:hover {
+        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+      }
+
+      .step .title {
+        text-align: center;
+        padding-top: 50px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-size: 25px;
+        font-weight: 300;
+      }
+
+      .step .content {
+        padding: 20px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div class="stepperContainer">
+        ${this.steps.map(
+          (stepArg) =>
+            html`<div
+              class="step ${stepArg === this.selectedStep
+                ? '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> `
+        )}
+      </div>
+    `;
+  }
+
+  public getIndexOfStep = (stepArg: IStep): number => {
+    return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
+  };
+
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(0);
+    this.selectedStep = this.steps[0];
+    this.setScrollStatus();
+  }
+
+  public async updated() {
+    this.setScrollStatus();
+  }
+
+  public scroller: typeof domtools.plugins.SweetScroll.prototype;
+
+  public async setScrollStatus() {
+    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
+    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
+    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    if (!selectedStepElement) {
+      return;
+    }
+    if (!stepperContainer.style.paddingTop) {
+      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;
+    console.log(scrollPosition);
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    if (!this.scroller) {
+      this.scroller = new domtools.plugins.SweetScroll(
+        {
+          vertical: true,
+          horizontal: false,
+          easing: 'easeInOutExpo',
+          duration: 700,
+        },
+        stepperContainer
+      );
+    }
+    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+      this.selectedStep.validationFuncCalled = true;
+      await this.selectedStep.validationFunc(this, selectedStepElement);
+    }
+    this.scroller.to(scrollPosition);
+  }
+
+  public async goBack() {
+    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);
+    this.selectedStep = this.steps[currentIndex + 1];
+  }
+}