@design.estate/dees-catalog 1.0.173

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

@@ -0,0 +1,175 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+  type CSSResult,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-checkbox': DeesInputCheckbox;
+  }
+}
+
+@customElement('dees-input-checkbox')
+export class DeesInputCheckbox extends DeesElement {
+  // STATIC
+  public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    type: String,
+  })
+  public label: string = 'Label';
+
+  @property({
+    type: Boolean,
+  })
+  public value: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        .maincontainer:hover {
+          ${this.goBright ? '#000' : '#ccc'};
+        }
+
+        .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.1s;
+          box-sizing: border-box;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
+          border-radius: 2px;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .checkbox.disabled {
+          background: none;
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        }
+
+        .checkbox .checkmark {
+          display: inline-block;
+          width: 22px;
+          height: 22px;
+          -ms-transform: rotate(45deg); /* IE 9 */
+          -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+          transform: rotate(45deg);
+        }
+
+        .checkbox .checkmark_stem {
+          position: absolute;
+          width: 3px;
+          height: 9px;
+          background-color: #fff;
+          left: 11px;
+          top: 6px;
+        }
+
+        .checkbox .checkmark_kick {
+          position: absolute;
+          width: 3px;
+          height: 3px;
+          background-color: #fff;
+          left: 8px;
+          top: 12px;
+        }
+
+        .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
+          background-color: ${cssManager.bdTheme('#333', '#fff')};
+        }
+
+        img {
+          padding: 4px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
+          ${this.value
+            ? html`
+                <span class="checkmark">
+                  <div class="checkmark_stem"></div>
+                  <div class="checkmark_kick"></div>
+                </span>
+              `
+            : html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+  }
+}

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

@@ -0,0 +1,173 @@
+import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-dropdown': DeesInputDropdown;
+  }
+}
+
+@customElement('dees-input-dropdown')
+export class DeesInputDropdown extends DeesElement {
+  public static demo = () => html`
+    <dees-input-dropdown
+      .options=${[
+        {option: 'option 1', key: 'option1'},
+        {option: 'option 2', key: 'option2'},
+        {option: 'option 3', key: 'option3'}
+      ]}
+    ></dees-input-dropdown>
+  `
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public key: string;
+
+  @property()
+  public options: {option: string, key: string, payload?: any}[] = [];
+
+  @property()
+  public selectedOption: {option: string, key: string, payload?: any} = {
+    key: null,
+    option: null,
+    payload: null
+  };
+
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: block;
+          height: 40px;
+          color: ${cssManager.bdTheme('#222', '#fff')};
+        }
+
+        .maincontainer {
+          display: block;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 15px;
+        }
+
+        .selectedBox {
+          cursor: pointer;
+          position: relative;
+          max-width: 420px;
+          height: 40px;
+          line-height: 40px;
+          padding: 0px 8px;
+          z-index: 0px;
+          background: ${cssManager.bdTheme('#ffffff', '#333333')};
+          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+          border-radius: 3px;
+          border-top: 1px solid #CCCCCC00;
+          border-bottom: 1px solid #66666600;
+        }
+
+        .selectedBox.show {
+          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
+        }
+
+        .selectionBox {
+          will-change:transform;
+          pointer-events: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          opacity: 0;
+          position: relative;
+          background: ${cssManager.bdTheme('#ffffff', '#222222')};
+          max-width: 420px;
+          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
+          min-height: 40px;
+          margin-top: -40px;
+          z-index: 100;
+          border-radius: 3px;
+          padding: 4px;
+          transform: scale(0.99,0.99);
+        }
+
+        .selectionBox.show {
+          pointer-events: all;
+          opacity: 1;
+          transform: scale(1,1);
+        }
+
+        .option {
+          transition: all 0.1s;
+          line-height: 40px;
+          padding: 0px 4px;
+          border-radius: 3px;
+        }
+
+        .option:hover {
+          color: #fff;
+          padding-left: 8px;
+          background: #0277bd;
+        }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        
+      </style>
+      <div class="maincontainer">
+        <div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
+          ${this.selectedOption?.option}
+        </div>
+        <div class="selectionBox">
+          ${this.options.map(option => {
+            return html`
+              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
+            `
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    this.selectedOption = this.options[0] || null;
+  }
+
+  public async updateSelection(selectedOption) {
+    this.selectedOption = selectedOption;
+
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      detail: selectedOption,
+      bubbles: true
+    }));
+    this.toggleSelectionBox();
+    this.changeSubject.next(this);
+  }
+
+  public toggleSelectionBox() {
+    this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
+    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+  }
+}

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

@@ -0,0 +1,195 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+  type CSSResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-fileupload': DeesInputFileupload;
+  }
+}
+
+@customElement('dees-input-fileupload')
+export class DeesInputFileupload extends DeesElement {
+  public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String,
+  })
+  public label: string = null;
+
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    attribute: false,
+  })
+  public value: File[] = [];
+
+  @property()
+  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled: boolean = false;
+
+  @property({
+    type: String,
+  })
+  public buttonText: string = 'Upload File...';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: relative;
+        display: grid;
+        margin: 10px 0px;
+        margin-bottom: 24px;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .uploadButton {
+        position: relative;
+        cursor: pointer;
+        padding: 8px;
+        max-width: 600px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+      }
+
+      .uploadButton:hover {
+        color: #fff;
+        background: rgb(3, 155, 229);
+      }
+
+      .uploadButton::after {
+        top: 2px;
+        right: 2px;
+        left: 2px;
+        bottom: 2px;
+        transform: scale3d(0.98, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 2px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+      }
+      .uploadButton.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 2px dashed rgba(255, 255, 255, 0.3);
+      }
+
+      .uploadCandidate {
+        text-align: left;
+        border-bottom: 1px dashed #444;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        padding: 8px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+      }
+
+      .uploadButton:hover .uploadCandidate {
+        color: ${cssManager.bdTheme('#fff', '#fff')};
+        border-bottom: 1px dashed #fff;
+      }
+
+      .uploadCandidate:last-child {
+        margin-bottom: 8px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="hidden">
+        <input type="file"></div>
+      </div>
+      <div class="maincontainer">
+        ${this.label ? html`<div class="label">${this.label}</div>` : null}
+        ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
+          ${this.buttonText}
+        </div>
+      </div>
+    `;
+  }
+
+  public async openFileSelector() {
+    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
+    inputFile.click();
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target: any = eventArg.target;
+    this.value = target.value;
+    this.changeSubject.next(this);
+  }
+
+  public firstUpdated() {
+    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const handlerFunction = (eventArg: DragEvent) => {
+      eventArg.preventDefault();
+      switch (eventArg.type) {
+        case 'dragover':
+          this.state = 'dragOver';
+          this.buttonText = 'release to upload file...';
+          break;
+        case 'dragleave':
+          this.state = 'idle';
+          this.buttonText = 'Upload File...';
+          break;
+        case 'drop':
+          this.state = 'idle';
+          this.buttonText = 'Upload more files...';
+      }
+      console.log(eventArg);
+      for (const file of Array.from(eventArg.dataTransfer.files)) {
+        this.value.push(file);
+        this.requestUpdate();
+      }
+      console.log(`Got ${this.value.length} files!`);
+    };
+    dropArea.addEventListener('dragenter', handlerFunction, false);
+    dropArea.addEventListener('dragleave', handlerFunction, false);
+    dropArea.addEventListener('dragover', handlerFunction, false);
+    dropArea.addEventListener('drop', handlerFunction, false);
+  }
+}

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

@@ -0,0 +1,113 @@
+import { customElement, property, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-quantityselector': DeesInputQuantitySelector;
+  }
+}
+
+@customElement('dees-input-quantityselector')
+export class DeesInputQuantitySelector extends DeesElement {
+  public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property()
+  public key: string;
+
+  @property({
+    type: Number
+  })
+  public value: number = 1;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          display: block;
+          width: 110px;
+          user-select: none;
+        }
+        .maincontainer {
+          transition: all 0.1s;
+          font-size: 14px;
+          display: grid;
+          grid-template-columns: 33% 34% 33%;
+          text-align: center;
+          background:none;
+          line-height: 40px;
+          padding: 0px;
+          min-width: 100px;
+          color: ${this.goBright ? '#666' : '#CCC'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+          border-radius: 4px;
+        }
+
+        .mainContainer:hover {
+          color: ${this.goBright ? '#333' : '#fff'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
+        }
+
+        .minus {
+          padding-left: 5px;
+        }
+
+        .plus {
+          padding-right: 5px;
+        }
+
+        .selector {
+          text-align: center;
+          font-size: 20px;
+        }
+
+        .selector:hover {
+          cursor: pointer;
+        }
+
+        .quantity {
+          text-align: center;
+        }
+
+        
+      </style>
+
+      <div class="maincontainer">
+        <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
+        <div class="quantity">${this.value}</div>
+        <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+      </div>
+    `;
+  }
+
+  public increase () {
+    this.value++;
+    this.changeSubject.next(this);
+  }
+
+  public decrease () {
+    if (this.value > 0) {
+      this.value--;
+    } else {
+      // nothing to do here
+    }
+    this.changeSubject.next(this);
+  }
+}