@design.estate/dees-catalog 1.0.173

package/ts_web/elements/dees-button.ts

@@ -0,0 +1,218 @@
+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-button': DeesButton;
+  }
+}
+
+@customElement('dees-button')
+export class DeesButton extends DeesElement {
+  public static demo = () => html`
+    <dees-button>This is a slotted Text</dees-button>
+    <p><dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button></p>
+    <p><dees-button type="discreet">This is discreete button</dees-button></p>
+    <p><dees-button disabled>This is a disabled button</dees-button></p>
+    <p><dees-button type="big">This is a slotted Text</dees-button></p>
+    <p><dees-button status="normal">Normal Status</dees-button></p>
+    <p><dees-button disabled status="pending">Pending Status</dees-button></p>
+    <p><dees-button disabled status="success">Success Status</dees-button></p>
+    <p><dees-button disabled status="error">Error Status</dees-button></p>
+  `;
+
+  @property({
+    reflect: true,
+    hasChanged() {
+      return true;
+    }
+  })
+  public text: string;
+
+  @property()
+  public eventDetailData: string;
+
+  @property({
+    type: Boolean
+  })
+  public disabled = false;
+
+  @property({
+    type: Boolean
+  })
+  public isHidden = false;
+
+  @property({
+    type: String
+  })
+  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+
+  @property({
+    type: String
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .button {
+        transition: all 0.1s , color 0s;
+        position: relative;
+        font-size: 14px;
+        font-weight: 400;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 3px rgba(0,0,0,0.3)', 'none')};
+        border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
+        border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
+        border-radius: 4px;
+        line-height: 40px;
+        padding: 0px 8px;
+        min-width: 100px;
+        user-select: none;
+        color: ${cssManager.bdTheme('#333', ' #ccc')};
+        max-width: 500px;
+      }
+
+      .button:hover {
+        cursor: pointer;
+        background: #039be5;
+        color: #ffffff;
+        border: 1px solid #039be5;
+        border-top: 1px solid #039be5;
+      }
+
+      .button:active {
+        background: #0277bd;
+        border-top: 1px solid #0277bd;
+      }
+
+      .button.disabled {
+        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        color: #9b9b9e;
+        cursor: default;
+      }
+
+      .button.highlighted {
+        background: #e4002b;
+        border: none;
+        color: #fff;
+      }
+
+      .button.highlighted:hover {
+        background: #b50021;
+        border: none;
+        color: #fff;
+      }
+
+      .button.discreet {
+        background: none;
+        border: 1px solid #9b9b9e;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
+      .button.discreet:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      }
+      .button.hidden {
+        display: none;
+      }
+
+      .button.big {
+        width: 300px;
+        line-height: 48px;
+        font-size: 16px;
+        padding: 0px 48px;
+        margin-top: 32px;
+      }
+
+      .button.pending {
+        border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        color: #fff;
+      }
+
+      .button.success {
+        border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
+        background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
+        color: #fff;
+      }
+
+      .button.error {
+        border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
+        background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
+        color: #fff;
+      }
+
+      dees-spinner {
+        position: absolute;
+        left: 10px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
+          ? 'disabled'
+          : null}"
+        @click="${this.dispatchClick}"
+      >
+        ${this.status === 'normal' ? html``: html`
+          <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
+        `}
+        <div class="textbox">${this.text ? this.text : this.textContent}</div>
+      </div>
+    `;
+  }
+
+  public async dispatchClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        bubbles: true,
+      })
+    );
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+}

package/ts_web/elements/dees-chips.ts

@@ -0,0 +1,124 @@
+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-chips': DeesChips;
+  }
+}
+
+@customElement('dees-chips')
+export class DeesChips extends DeesElement {
+  public static demo = () => html`
+    <dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
+    <dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
+    
+  `;
+
+  @property()
+  public selectionMode: 'single' | 'multiple' = 'single';
+
+  @property({
+    type: Array
+  })
+  public selectableChips: string[] = [];
+
+  @property()
+  public selectedChip: string = null;
+
+  @property({
+    type: Array
+  })
+  public selectedChips: string[] = [];
+  
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .mainbox {
+
+      }
+
+      .chip {
+        background: #494949;
+        display: inline-block;
+        padding: 8px 12px;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 40px;
+        margin-right: 4px;
+        margin-bottom: 8px;
+      }
+
+      .chip:hover {
+        background: #666666;
+        cursor: pointer; 
+      }
+
+      .chip.selected {
+        background: #00A3FF;
+      }
+      
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        ${this.selectableChips.map(chipArg => html`
+          <div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
+            ${chipArg}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+
+  public async selectChip(chipArg: string) {
+    if (this.selectionMode === 'single') {
+      if (this.selectedChip === chipArg) {
+        this.selectedChip = null;
+        this.selectedChips = [];
+      } else {
+        this.selectedChip = chipArg;
+        this.selectedChips = [chipArg];
+      }
+    } else if(this.selectionMode === 'multiple') {
+      if (this.selectedChips.includes(chipArg)) {
+        this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
+      } else {
+        this.selectedChips.push(chipArg);
+      }
+      this.requestUpdate();
+    }
+    console.log(this.selectedChips);
+  }
+}

package/ts_web/elements/dees-contextmenu.ts

@@ -0,0 +1,181 @@
+import * as plugins from './plugins.js';
+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';
+import { DeesWindowLayer } from './dees-windowlayer.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-contextmenu': DeesContextmenu;
+  }
+}
+
+@customElement('dees-contextmenu')
+export class DeesContextmenu extends DeesElement {
+  // DEMO
+  public static demo = () => html`
+    <style>
+      .withMargin {
+        display: block;
+        margin: 20px;
+      }
+    </style>
+    <dees-button @contextmenu=${(eventArg) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: 'copy',
+          iconName: 'copySolid',
+          action: async () => {
+            return null;
+          },
+        },
+        {
+          name: 'edit',
+          iconName: 'penToSquare',
+          action: async () => {
+            return null;
+          },
+        },{
+          name: 'paste',
+          iconName: 'pasteSolid',
+          action: async () => {
+            return null;
+          },
+        },
+      ]);
+    }}>Hello</dees-button>
+    <dees-contextmenu class="withMargin"></dees-contextmenu>
+    <dees-contextmenu
+      class="withMargin"
+      .menuItems=${[
+        {
+          name: 'copy',
+          iconName: 'copySolid',
+          action: async () => {},
+        },
+        {
+          name: 'edit',
+          iconName: 'penToSquare',
+          action: async () => {},
+        },{
+          name: 'paste',
+          iconName: 'pasteSolid',
+          action: async () => {},
+        },
+      ] as plugins.tsclass.website.IMenuItem[]}
+    ></dees-contextmenu>
+  `;
+
+  // STATIC
+  public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
+    eventArg.preventDefault();
+    const contextMenu = new DeesContextmenu();
+    contextMenu.style.position = 'absolute';
+    contextMenu.style.top = `${eventArg.clientY.toString()}px`;
+    contextMenu.style.left = `${eventArg.clientX.toString()}px`;
+    contextMenu.style.opacity = '0';
+    contextMenu.style.transform = 'scale(0.95,0.95)';
+    contextMenu.style.transformOrigin = 'top left';
+    contextMenu.menuItems = menuItemsArg;
+    document.body.append(contextMenu);
+    await domtools.plugins.smartdelay.delayFor(0);
+    contextMenu.style.opacity = '1';
+    contextMenu.style.transform = 'scale(1,1)';
+  }
+
+  @property({
+    type: Array,
+  })
+  public menuItems: plugins.tsclass.website.IMenuItem[] = [];
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        transition: all 0.1s;
+      }
+
+      .mainbox {
+        color: ${cssManager.bdTheme('#222', '#ccc')};
+        font-size: 14px;
+        width: 200px;
+        border: 1px solid #444;
+        min-height: 40px;
+        border-radius: 3px;
+        background: #222;
+        box-shadow: 0px 1px 4px #000;
+        user-select: none;
+      }
+
+      .mainbox .menuitem {
+        padding: 8px;
+      }
+
+      .mainbox .menuitem dees-icon {
+        display: inline-block;
+        margin-right: 8px;
+        width: 14px;
+        transform: translateY(2px);
+      }
+
+      .mainbox .menuitem:hover {
+        cursor: pointer;
+        background: #ffffff10;
+      }
+
+      .mainbox .menuitem:active {
+        cursor: pointer;
+        background: #ffffff05;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        ${this.menuItems.map((menuItemArg) => {
+          return html`
+            <div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
+              <dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
+              >${menuItemArg.name}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (!this.menuItems || this.menuItems.length === 0) {
+      const mainbox = this.shadowRoot.querySelector('.mainbox');
+      mainbox.textContent = 'no menu items present';
+    }
+  }
+
+  public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
+    menuItem.action();
+    await this.destroy();
+  }
+
+  public async destroy() {
+    this.style.opacity = '0';
+    this.style.transform = 'scale(0.95,0,95)';
+    await domtools.plugins.smartdelay.delayFor(100);
+    this.parentElement.removeChild(this);
+  }
+}

package/ts_web/elements/dees-dataview-codebox.ts

@@ -0,0 +1,178 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+} from '@design.estate/dees-element';
+
+import hlight from 'highlight.js';
+
+import * as smartstring from '@push.rocks/smartstring';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-dataview-codebox': DeesDataviewCodebox;
+  }
+}
+
+@customElement('dees-dataview-codebox')
+export class DeesDataviewCodebox extends DeesElement {
+  public static demo = () => html`<dees-dataview-codebox proglang="typescript">
+    import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
+    console.log('nice one'); }
+  </dees-dataview-codebox>`;
+
+  @property()
+  public progLang: string = 'typescript';
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public codeToDisplay: string = '';
+
+  constructor() {
+    super();
+  }
+
+  render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          position: relative;
+          display: block;
+          text-align: left;
+          font-size: 16px;
+        }
+        .mainbox {
+          position: relative;
+          color: ${this.goBright ? '#333333' : '#ffffff'};
+        }
+
+        .languageLabel {
+          color: #fff;
+          font-size: 12px;
+          z-index: 10;
+          background: #6596ff;
+          display: inline-block;
+          position: absolute;
+          right: 32px;
+          padding: 4px;
+          border-bottom-left-radius: 3px;
+          border-bottom-right-radius: 3px;
+        }
+
+        .hljs-keyword {
+          color: #ff65ec;
+        }
+
+        .codegrid {
+          display: grid;
+          grid-template-columns: 50px auto;
+          background: ${this.goBright ? '#ffffff' : '#191919'};
+          border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
+          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
+          border-radius: 3px;
+          overflow: hidden;
+        }
+
+        .lineNumbers {
+          background: ${this.goBright ? '#fafafa' : '#151515'};
+          color: ${this.goBright ? '#acacac' : '#666666'};
+          padding: 30px 16px 0px 0px;
+          text-align: right;
+        }
+
+        .lineCounter:last-child {
+          opacity: 50%;
+        }
+
+        pre {
+          overflow-x: auto;
+          margin: 0px;
+          padding: 30px 40px;
+        }
+
+        code {
+          font-weight: ${this.goBright ? '400' : '300'};
+          padding: 0px;
+          margin: 0px;
+        }
+
+        code,
+        code *,
+        .lineNumbers {
+          line-height: 1.4em;
+          font-weight: 200;
+          font-family: 'Intel One Mono', 'monospace';
+        }
+
+        .hljs-string {
+          color: #ffa465;
+        }
+
+        .hljs-built_in {
+          color: #65ff6a;
+        }
+
+        .hljs-function {
+          color: ${this.goBright ? '#2765DF': '#6596ff' };
+        }
+
+        .hljs-params {
+          color: ${this.goBright ? '#3DB420' : '#65d5ff' };
+        }
+
+        .hljs-comment {
+          color: ${this.goBright ? '#EF9300' : '#ffd765' };
+        }
+      </style>
+      <div class="mainbox">
+        <div class="languageLabel">${this.progLang}</div>
+        <div class="codegrid">
+          <div class="lineNumbers">
+            ${(() => {
+              let lineCounter = 0;
+              return this.codeToDisplay.split('\n').map(lineArg => {
+                lineCounter++;
+                return html`<div class="lineCounter">${lineCounter}</div>`;
+              })
+            })()}
+          </div>
+          <pre><code></code></pre>
+        </div>
+      </div>
+    `;
+  }
+
+  @state()
+  private codeToDisplayStore = '';
+
+  public async updated(_changedProperties) {
+    super.updated(_changedProperties);
+    console.log('highlighting now');
+    console.log(this.childNodes);
+    const slottedCodeNodes: Text[] = [];
+    this.childNodes.forEach((childNode) => {
+      if (childNode.nodeName === '#text') {
+        slottedCodeNodes.push(childNode as Text);
+      }
+    });
+    if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
+      this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
+    }
+    if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
+      this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart();
+      this.codeToDisplay = this.codeToDisplayStore;
+    }
+    await domtools.plugins.smartdelay.delayFor(0);
+    const localCodeNode = this.shadowRoot.querySelector('code');
+    const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
+    localCodeNode.innerHTML = html.value;
+  }
+}