@design.estate/dees-catalog 1.0.173

package/ts_web/elements/dees-input-radio.ts

@@ -0,0 +1,125 @@
+import {customElement, DeesElement, type TemplateResult, property, html, type CSSResult,} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-radio': DeesInputRadio;
+  }
+}
+
+@customElement('dees-input-radio')
+export class DeesInputRadio extends DeesElement {
+  public static demo = () => html`<dees-input-radio></dees-input-radio>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property()
+  public key: string;
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public value: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          transition: all 0.3s;
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: #ccc;
+        }
+
+        .maincontainer:hover {
+          color: #fff;
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.3s;
+          box-sizing: border-box;
+          border-radius: 20px;
+          border: 1px solid #999;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: #222;
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .maincontainer:hover .checkbox.selected {
+          background: #03A9F4;
+        }
+
+        .innercircle {
+          transition: all 0.3s;
+          margin: 6px 0px 0px 6px;
+          background: #222;
+          width: 10px;
+          height: 10px;
+          border-radius: 10px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''}">
+        ${this.value ? html`<div class="innercircle"></div>`: html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected () {
+    this.value = !this.value;
+    this.dispatchEvent(new CustomEvent('newValue', {
+      detail: this.value,
+      bubbles: true
+    }));
+    this.changeSubject.next(this);
+  }
+}

package/ts_web/elements/dees-input-text.ts

@@ -0,0 +1,171 @@
+import {customElement, DeesElement, type TemplateResult, property, html, cssManager, type CSSResult,} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-text': DeesInputText;
+  }
+}
+
+@customElement('dees-input-text')
+export class DeesInputText extends DeesElement {
+  public static demo = () => html`
+    <dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
+    <dees-input-text .isPasswordBool=${true}></dees-input-text>
+  `;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
+  public valueChangeSubject = new domtools.rxjs.Subject<string>();
+
+  @property({
+    type: String
+  })
+  public label: string;
+
+  @property({
+    type: String
+  })
+  public key: string;
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public value: string = '';
+
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public isPasswordBool = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public showPasswordBool = false;
+
+  public render(): TemplateResult {
+    return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: grid;
+          margin: 10px 0px;
+          margin-bottom: 24px;
+        }
+
+        .maincontainer {
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 5px;
+        }
+
+        input {
+          margin-top: 5px;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
+          padding-left:10px;
+          padding-right: 10px;
+          border-radius: 2px;
+          width: 100%;
+          line-height: 48px;
+          transition: all 0.2s;
+          outline: none;
+          font-size: 16px;
+          font-family: ${this.isPasswordBool ? 'monospace': 'Inter'};
+          letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        input:disabled {
+          background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+          color: #9b9b9e;
+          cursor: default;
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .showPassword {
+          position: absolute;
+          bottom: 8px;
+          right: 10px;
+          border: 1px dashed #444;
+          border-radius: 7px;
+          padding: 8px 0px;
+          width: 40px;
+        }
+
+        .showPassword:hover {
+          cursor: pointer;
+          background: #333;
+        }
+      </style>
+      <div class="maincontainer">
+        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
+        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+        ${this.isPasswordBool ? html`
+          <div class="showPassword" @click=${this.togglePasswordView}>
+            <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
+          </div>
+        ` : html``}
+      </div>
+    `;
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target: any = eventArg.target;
+    this.value = target.value;
+    this.changeSubject.next(this);
+    this.valueChangeSubject.next(this.value);
+  }
+
+  public async freeze() {
+    this.disabled = true;
+  }
+
+  public async unfreeze() {
+    this.disabled = false;
+  }
+
+  public async togglePasswordView () {
+    const domtools = await this.domtoolsPromise;
+    this.showPasswordBool = !this.showPasswordBool;
+    console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
+  }
+
+  public async focus() {
+    const textInput = this.shadowRoot.querySelector('input');
+    textInput.focus();
+  }
+
+  public async blur() {
+    const textInput = this.shadowRoot.querySelector('input');
+    textInput.blur();
+  }
+}

package/ts_web/elements/dees-mobilenavigation.ts

@@ -0,0 +1,189 @@
+import * as plugins from './plugins.js';
+import {
+  cssManager,
+  css,
+  type CSSResult,
+  customElement,
+  DeesElement,
+  domtools,
+  html,
+  property,
+} from '@design.estate/dees-element';
+import { DeesWindowLayer } from './dees-windowlayer.js';
+
+@customElement('dees-mobilenavigation')
+export class DeesMobilenavigation extends DeesElement {
+  // STATIC
+  public static demo = () => html`
+    <dees-mobilenavigation
+      .menuItems="${[
+        {
+          name: 'hello1',
+          action: async () => {},
+        },
+        {
+          name: 'hello2',
+          action: async () => {},
+        },
+        {
+          name: 'hello3',
+          action: async () => {},
+        },
+      ]}"
+    ></dees-mobilenavigation>
+  `;
+
+  private static singletonRef: DeesMobilenavigation;
+  public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
+    if (!this.singletonRef) {
+      this.singletonRef = new DeesMobilenavigation();
+      document.body.append(this.singletonRef);
+      await this.singletonRef.init();
+    }
+    this.singletonRef.menuItems = menuItemsArg;
+    await this.singletonRef.readyDeferred.promise;
+    this.singletonRef.show();
+    return this.singletonRef;
+  }
+
+  // INSTANCE
+  @property({
+    type: Array,
+  })
+  public heading: string = `MENU`;
+
+  @property({
+    type: Array,
+  })
+  public menuItems: plugins.tsclass.website.IMenuItem[] = [];
+
+  readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
+
+  constructor() {
+    super();
+    /* this.init().then(() => {
+      this.show();
+    }); */
+  }
+
+  /**
+   * inits the mobile navigation
+   */
+  public async init() {
+    await this.updateComplete;
+    this.readyDeferred.resolve();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+      }
+
+      .main {
+        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+        will-change: transform;
+        position: fixed;
+        height: 100vh;
+        min-width: 280px;
+        transform: translateX(200px);
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        z-index: 250;
+        opacity: 0;
+        padding: 16px 32px;
+        right: 0px;
+        top: 0px;
+        bottom: 0px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
+        border-left: 1px dashed #444;
+        pointer-events: none;
+      }
+
+      .main.show {
+        pointer-events: all;
+        transform: translateX(0px);
+        opacity: 1;
+      }
+
+      .menuItem {
+        text-align: left;
+        padding: 8px;
+        margin-left: -8px;
+        margin-right: -8px;
+        cursor: pointer;
+        border-radius: 3px;
+      }
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#CCC', '#333')};;
+      }
+
+      .heading {
+        text-align: left;
+        font-size: 24px;
+        padding: 8px 0px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-weight: 300;
+        border-bottom: 1px dashed #444;
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div class="main">
+        <div class="heading">${this.heading}</div>
+        ${this.menuItems.map((menuItem) => {
+          return html`
+            <div
+              class="menuItem"
+              @click="${() => {
+                this.hide();
+                menuItem.action();
+              }}"
+            >
+              ${menuItem.name}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  private windowLayer: DeesWindowLayer;
+
+  /**
+   * inits the show
+   */
+  public async show() {
+    const domtools = await this.domtoolsPromise;
+    const main = this.shadowRoot.querySelector('.main');
+    if (!this.windowLayer) {
+      this.windowLayer = new DeesWindowLayer();
+      this.windowLayer.addEventListener('click', () => {
+        this.hide();
+      });
+    }
+    document.body.append(this.windowLayer);
+    await domtools.convenience.smartdelay.delayFor(0);
+    this.windowLayer.show();
+
+    await domtools.convenience.smartdelay.delayFor(0);
+    main.classList.add('show');
+  }
+
+  /**
+   * inits the hide function
+   */
+  public async hide() {
+    const domtools = await this.domtoolsPromise;
+    const main = this.shadowRoot.querySelector('.main');
+    main.classList.remove('show');
+    this.windowLayer.hide();
+  }
+
+  async disconnectedCallback() {
+    document.body.removeChild(this.windowLayer);
+  }
+}

package/ts_web/elements/dees-pdf.ts

@@ -0,0 +1,119 @@
+import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';
+
+import { Deferred } from '@push.rocks/smartpromise';
+
+import type pdfjsTypes from 'pdfjs-dist';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-pdf': DeesPdf;
+  }
+}
+
+@customElement('dees-pdf')
+export class DeesPdf extends DeesElement {
+  // DEMO
+  public static demo = () => html` <dees-pdf></dees-pdf> `;
+
+  // INSTANCE
+
+  @property()
+  public pdfUrl: string =
+    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
+
+  constructor() {
+    super();
+
+    // you have access to all kinds of things through this.
+    // this.setAttribute('gotIt','true');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          font-family: 'Mona Sans', 'Inter', sans-serif;
+          display: block;
+          box-sizing: border-box;
+          max-width: 800px;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+
+        #pdfcanvas {
+          box-shadow: 0px 0px 5px #ccc;
+          width: 100%;
+        }
+      </style>
+      <canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
+    `;
+  }
+
+  public static pdfJsReady: Promise<any>;
+  public static pdfjsLib: typeof pdfjsTypes;
+  public async connectedCallback() {
+    super.connectedCallback();
+    if (!DeesPdf.pdfJsReady) {
+      const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
+      DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
+      const loadDeferred = domtools.plugins.smartpromise.defer();
+      const script = document.createElement('script');
+      script.addEventListener('load', () => {
+        console.log('pdf.js loaded!');
+        loadDeferred.resolve();
+      });
+      script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
+      document.getElementsByTagName('head')[0].appendChild(script);
+      // The workerSrc property shall be specified.
+      await loadDeferred.promise;
+      DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
+      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+      pdfJsReadyDeferred.resolve();
+    }
+    await DeesPdf.pdfJsReady;
+    this.displayContent();
+  }
+
+  public async displayContent() {
+    await DeesPdf.pdfJsReady;
+
+    // Asynchronous download of PDF
+    const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
+    loadingTask.promise.then(
+      (pdf) => {
+        console.log('PDF loaded');
+
+        // Fetch the first page
+        const pageNumber = 1;
+        pdf.getPage(pageNumber).then((page) => {
+          console.log('Page loaded');
+
+          const scale = 10;
+          const viewport = page.getViewport({ scale: scale });
+
+          // Prepare canvas using PDF page dimensions
+          const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
+          const context = canvas.getContext('2d');
+          canvas.height = viewport.height;
+          canvas.width = viewport.width;
+
+          // Render PDF page into canvas context
+          const renderContext = {
+            canvasContext: context,
+            viewport: viewport,
+          };
+
+          const renderTask = page.render(renderContext);
+          renderTask.promise.then(function () {
+            console.log('Page rendered');
+          });
+        });
+      },
+      (reason) => {
+        // PDF loading error
+        console.error(reason);
+      }
+    );
+  }
+}