@design.estate/dees-catalog 1.0.173

package/ts_web/elements/dees-table.ts

@@ -0,0 +1,360 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+  type CSSResult,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-table': DeesTable<any>;
+  }
+}
+
+export interface IDataAction<T = any> {
+  name: string;
+  iconName: string;
+  useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
+  actionFunc: (itemArg: T) => Promise<any>;
+}
+
+@customElement('dees-table')
+export class DeesTable<T> extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 60px;
+        background: #000000;
+      }
+    </style>
+    <div class="demoWrapper">
+      <dees-table
+        heading1="Current Account Statement"
+        heading2="Bunq - Payment Account 2 - April 2021"
+        .data=${[
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-02',
+            amount: '165.65 €',
+            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+          },
+          {
+            date: '2021-04-03',
+            amount: '2999,00 €',
+            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+        ]}
+        .dataActions="${[{
+          name: 'upload',
+          iconName: 'upload',
+          useTableBehaviour: 'upload',
+          actionFunc: async (itemArg: any) => {
+
+          },
+        },{
+          name: 'visibility',
+          iconName: 'visibility',
+          useTableBehaviour: 'preview',
+          actionFunc: async (itemArg: any) => {
+
+          },
+        }] as IDataAction[]}"
+        >This is a slotted Text</dees-table>
+    </div>
+  `;
+
+  // INSTANCE
+  @property({
+    type: String,
+  })
+  public heading1: string = 'heading 1';
+
+  @property({
+    type: String,
+  })
+  public heading2: string = 'heading 2';
+
+  @property({
+    type: Array,
+  })
+  public data: T[] = [];
+
+  @property({
+    type: Array,
+  })
+  public dataActions: IDataAction[] = [];
+
+  @property({
+    type: Object,
+  })
+  public selectedDataRow: T;
+
+  @property({
+    type: String,
+  })
+  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+
+  @property({
+    type: String,
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  public files: File[] = [];
+  public fileWeakMap = new WeakMap();
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .mainbox {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        padding: 16px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        border-radius: 3px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+        overflow-x: auto;
+      }
+      .headingSeparation {
+        margin-top: 7px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+      }
+
+      table,
+      .noDataSet {
+        margin-top: 16px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        border-collapse: collapse;
+        width: 100%;
+      }
+      .noDataSet {
+        text-align: center;
+      }
+      tr {
+        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+        text-align: left;
+      }
+      tr:last-child {
+        border-bottom: none;
+        text-align: left;
+      }
+      tr:hover {
+        cursor: pointer;
+      }
+      tr:hover .innerCellContainer {
+        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
+      }
+      tr:first-child:hover {
+        cursor: auto;
+      }
+      tr:first-child:hover .innerCellContainer {
+        background: none;
+      }
+      tr.selected .innerCellContainer {
+        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
+      }
+      th {
+        text-transform: uppercase;
+      }
+      th,
+      td {
+        padding: 3px 0px;
+        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+      }
+      .innerCellContainer {
+        padding: 6px 8px;
+      }
+      th:first-child .innerCellContainer,
+      td:first-child .innerCellContainer {
+        padding-left: 0px;
+      }
+      th:last-child .innerCellContainer,
+      td:last-child .innerCellContainer {
+        padding-right: 0px;
+      }
+      th:last-child,
+      td:last-child {
+        border-right: none;
+      }
+
+      .action {
+        margin: -8px 0px;
+        padding: 8px;
+        line-height: 16px;
+        display: inline-block;
+      }
+
+      .action:first-child {
+        margin-left: -8px;
+        width: min-content;
+      }
+
+      .action:hover {
+        background: ${cssManager.bdTheme('#CCC', '#111')};
+      }
+
+      .tableStatistics {
+        padding: 4px 16px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#111', '#ffffff90')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
+        margin: 16px -16px -16px -16px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div>${this.heading1}</div>
+        <div>${this.heading2}</div>
+        <div class="headingSeparation"></div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0
+          ? (() => {
+              const headings: string[] = Object.keys(this.data[0]);
+              return html`
+                <table>
+                  <tr>
+                    ${headings.map(
+                      (headingArg) => html`
+                        <th>
+                          <div class="innerCellContainer">${headingArg}</div>
+                        </th>
+                      `
+                    )}
+                    ${(() => {
+                      if (this.dataActions && this.dataActions.length > 0) {
+                        return html`
+                          <th>
+                            <div class="innerCellContainer">Actions</div>
+                          </th>
+                        `;
+                      }
+                    })()}
+                  </tr>
+                  ${this.data.map(
+                    (itemArg) => html`
+                      <tr
+                        @click=${() => {
+                          this.selectedDataRow = itemArg;
+                        }}
+                        @dragenter=${async (eventArg: DragEvent) => {
+                          console.log((eventArg.target as HTMLElement).tagName)
+                          console.log('dragenter');
+                          eventArg.preventDefault();
+                          eventArg.stopPropagation();
+                          (eventArg.target as HTMLElement).parentElement.style.background = '#800000';
+                        }}
+                        @dragleave=${async (eventArg: DragEvent) => {
+                          console.log((eventArg.target as HTMLElement).tagName)
+                          console.log('dragleave');
+                          eventArg.preventDefault();
+                          eventArg.stopPropagation();
+                          (eventArg.target as HTMLElement).parentElement.style.background = 'none';
+                        }}
+                        @dragover=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                        }}
+                        @drop=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                          const newFiles = []
+                          for (const file of Array.from(eventArg.dataTransfer.files)) {
+                            this.files.push(file);
+                            newFiles.push(file);
+                            this.requestUpdate();
+                          }
+                          const result: File[] = this.fileWeakMap.get(itemArg as object);
+                          if (!result) {
+                            this.fileWeakMap.set(itemArg as object, newFiles)
+                          } else {
+                            result.push(...newFiles);
+                          }
+                        }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${headings.map(
+                          (headingArg) => html`
+                            <td>
+                              <div class="innerCellContainer">${itemArg[headingArg]}</div>
+                            </td>
+                          `
+                        )}
+                        ${(() => {
+                          if (this.dataActions && this.dataActions.length > 0) {
+                            return html`
+                              <td>
+                                <div class="innerCellContainer">
+                                  ${(() => {
+                                    const actions: TemplateResult[] = [];
+                                    for (const action of this.dataActions) {
+                                      actions.push(html`<div class="action">${action.iconName ? html`
+                                        <dees-icon .iconName=${'upload_file'}></dees-icon>
+                                      ` : action.name}</div>`)
+                                    }
+                                    return actions;
+                                  })()}
+                                </div>
+                              </td>
+                            `;
+                          }
+                        })()}
+                      </tr>
+                    `
+                  )}
+                </table>
+              `;
+            })()
+          : html` <div class="noDataSet">No data set!</div> `}
+        <div class="tableStatistics">
+          ${this.data.length} data rows (total) |
+          ${this.selectedDataRow
+            ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
+            : html`No row selected`}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {}
+}

package/ts_web/elements/dees-toast.ts

@@ -0,0 +1,26 @@
+import { customElement, DeesElement, type TemplateResult, html, type CSSResult, } from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-toast': DeesToast;
+  }
+}
+
+@customElement('dees-toast')
+export class DeesToast extends DeesElement {
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      
+    `;
+  }
+}

package/ts_web/elements/dees-tooltip.ts

@@ -0,0 +1 @@
+import {} from '@design.estate/dees-element';

package/ts_web/elements/dees-updater.ts

@@ -0,0 +1,90 @@
+import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+
+import './dees-windowlayer';
+import { css, cssManager } from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-updater': DeesUpdater;
+  }
+}
+
+@customElement('dees-updater')
+export class DeesUpdater extends DeesElement {
+  public static demo = () => html`<dees-updater></dees-updater>`;
+
+  @property({
+    type: String,
+  })
+  currentVersion: string;
+
+  @property({
+    type: String,
+  })
+  updatedVersion: string;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .modalContainer {
+          will-change: transform;
+          position: relative;
+          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+          margin: auto;
+          max-width: 800px;
+          border-radius: 3px;
+          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+        }
+
+        .headingContainer {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 40px 40px;
+        }
+
+        h1 {
+          margin: none;
+          font-size: 20px;
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          margin-left: 20px;
+          font-weight: normal;
+        }
+
+        .buttonContainer {
+          display: grid;
+          grid-template-columns: 50% 50%;
+        }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <dees-windowlayer @clicked="${this.windowLayerClicked}">
+        <div class="modalContainer">
+          <div class="headingContainer">
+            <dees-spinner .size=${60}></dees-spinner>
+            <h1>Updating the application...</h1>
+          </div>
+          <div class="buttonContainer">
+            <dees-button>More info</dees-button>
+            <dees-button>Changelog</dees-button>
+          </div>
+        </div>
+      </dees-windowlayer>>
+    `;
+  }
+
+  private windowLayerClicked() {
+    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
+    windowLayer.toggleVisibility();
+  }
+}

package/ts_web/elements/dees-windowlayer.ts

@@ -0,0 +1,85 @@
+import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowlayer': DeesWindowLayer;
+  }
+}
+
+@customElement('dees-windowlayer')
+export class DeesWindowLayer extends DeesElement {
+  // STATIC
+  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
+
+  // INSTANCE
+  @property({
+    type: Boolean
+  })
+  public visible = false;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        .windowOverlay {
+          transition: all 0.3s;
+          will-change: transform;
+          position: fixed;
+          top: 0px;
+          left: 0px;
+          height: 100vh;
+          width: 100vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: rgba(0, 0, 0, 0.0);
+          backdrop-filter: brightness(1);
+          pointer-events: none;
+          z-index: 200;
+        }
+        
+        .visible {
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: brightness(0.3);
+          pointer-events: all;
+        }
+      </style>
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.visible = true;
+    }, 100);
+  }
+
+  dispatchClicked() {
+    this.dispatchEvent(new CustomEvent('clicked'));
+  }
+
+  public toggleVisibility () {
+    this.visible = !this.visible;
+  }
+
+  public async show() {
+    const domtools = await this.domtoolsPromise;
+    await domtools.convenience.smartdelay.delayFor(0);
+    this.visible = true;
+  }
+
+  public async hide() {
+    const domtools = await this.domtoolsPromise;
+    await domtools.convenience.smartdelay.delayFor(0);
+    this.visible = false;
+  }
+}

package/ts_web/elements/index.ts

@@ -0,0 +1,24 @@
+export * from './dees-button-exit.js';
+export * from './dees-button.js';
+export * from './dees-chips.js';
+export * from './dees-contextmenu.js';
+export * from './dees-dataview-codebox.js';
+export * from './dees-dataview-statusobject.js';
+export * from './dees-form.js';
+export * from './dees-form-submit.js';
+export * from './dees-icon.js';
+export * from './dees-input-checkbox.js';
+export * from './dees-input-dropdown.js';
+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-mobilenavigation.js';
+export * from './dees-pdf.js';
+export * from './dees-speechbubble.js';
+export * from './dees-spinner.js';
+export * from './dees-stepper.js';
+export * from './dees-table.js';
+export * from './dees-toast.js';
+export * from './dees-updater.js';
+export * from './dees-windowlayer.js';

package/ts_web/elements/plugins.ts

@@ -0,0 +1,13 @@
+// @push.rocks scope
+import * as smartpromise from '@push.rocks/smartpromise';
+
+export {
+  smartpromise,
+}
+
+// @tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export {
+  tsclass
+}

package/ts_web/index.ts

@@ -0,0 +1,2 @@
+export * from './elements/index.js';
+export { commitinfo } from './00_commitinfo_data.js';