1.0.224

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.214",
+  "version": "1.0.224",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,9 +15,9 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.41",
+    "@design.estate/dees-domtools": "^2.0.51",
     "@design.estate/dees-element": "^2.0.29",
-    "@design.estate/dees-wcctools": "^1.0.78",
+    "@design.estate/dees-wcctools": "^1.0.81",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
@@ -26,7 +26,7 @@
     "@push.rocks/smartstring": "^4.0.9",
     "@tsclass/tsclass": "^4.0.43",
     "highlight.js": "11.8.0",
-    "pdfjs-dist": "^3.10.111"
+    "pdfjs-dist": "^3.11.174"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.66",
@@ -35,7 +35,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.6.2"
+    "@types/node": "^20.8.3"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.214',
+  version: '1.0.224',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button.ts

@@ -65,6 +65,7 @@ export class DeesButton extends DeesElement {
       :host {
         display: block;
         box-sizing: border-box;
+        font-family: 'Roboto', 'monospace';
       }
       :host([hidden]) {
         display: none;

ts_web/elements/dees-dataview-codebox.ts

@@ -48,6 +48,7 @@ export class DeesDataviewCodebox extends DeesElement {
           display: block;
           text-align: left;
           font-size: 16px;
+          font-family: 'Roboto', 'Inter', sans-serif;
         }
         .mainbox {
           position: relative;
@@ -65,7 +66,6 @@ export class DeesDataviewCodebox extends DeesElement {
           border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
           height: 24px;
           font-size: 12px;
-          font-family: 'Hubot Sans', 'monospace';
           line-height: 24px;
         }
 
@@ -115,7 +115,6 @@ export class DeesDataviewCodebox extends DeesElement {
           border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
           height: 24px;
           font-size: 12px;
-          font-family: 'Hubot Sans', 'monospace';
           line-height: 24px;
           text-align: right;
           padding-right: 100px;

ts_web/elements/dees-dataview-statusobject.ts

@@ -29,7 +29,7 @@ export class DeesDataviewStatusobject extends DeesElement {
     cssManager.defaultStyles,
     css`
       .mainbox {
-        border-radius: 3px;
+        border-radius: 8px;
         background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
         box-shadow: 0px 1px 3px #00000030;
         min-height: 48px;

ts_web/elements/dees-form.ts

@@ -6,16 +6,18 @@ import { DeesInputText } from './dees-input-text.js';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
+import { DeesTable } from './dees-table.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
   DeesInputText,
   DeesInputQuantitySelector,
-  DeesInputRadio
+  DeesInputRadio,
+  DeesTable,
 ];
 
-export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
+export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio | DeesTable<any>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -102,7 +104,7 @@ export class DeesForm extends DeesElement {
 
   public async collectFormData() {
     const children = this.getFormElements();
-    const valueObject: { [key: string]: string | number | boolean } = {};
+    const valueObject: { [key: string]: string | number | boolean | any [] } = {};
     for (const child of children) {
       if (!child.key) {
         console.log(`form element with label "${child.label}" has no key. skipping.`);

ts_web/elements/dees-hint.demo.ts

@@ -0,0 +1,5 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-hint></dees-hint>
+`;

ts_web/elements/dees-hint.ts

@@ -0,0 +1,38 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-hint.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-hint': DeesHint;
+  }
+}
+
+@customElement('dees-hint')
+export class DeesHint extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  public type: 'info' | 'warn' | 'error' | 'critical' = 'info';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [cssManager.defaultStyles, css``];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox"></div> `;
+  }
+}

ts_web/elements/dees-icon.ts

@@ -48,19 +48,24 @@ import {
   faDesktop as faDesktopSolid,
   faEye as faEyeSolid,
   faEyeSlash as faEyeSlashSolid,
+  faFileInvoice as faFileInvoiceSolid,
+  faFileInvoiceDollar as faFileInvoiceDollarSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
+  faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
   faMinus as faMinusSolid,
   faPaste as faPasteSolid,
   faPenToSquare as faPenToSquareSolid,
   faPlus as faPlusSolid,
+  faReceipt as faReceiptSolid,
   faRss as faRssSolid,
   faUsers as faUsersSolid,
   faShare as faShareSolid,
   faSun as faSunSolid,
   faTrash as faTrashSolid,
   faTrashCan as faTrashCanSolid,
+  faWallet as faWalletSolid,
   faXmark as faXmarkSolid,
 } from '@fortawesome/free-solid-svg-icons';
 import { demoFunc } from './dees-icon.demo.js';
@@ -86,15 +91,19 @@ export const faIcons = {
   desktop: faDesktopSolid,
   eye: faEyeSolid,
   eyeSlash: faEyeSlashSolid,
+  fileInvoice: faFileInvoiceSolid,
+  fileInvoiceDoller: faFileInvoiceDollarSolid,
   grip: faGripSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
+  moneyCheckDollar: faMoneyCheckDollarSolid,
   mugHot: faMugHotSolid,
   minus: faMinusSolid,
   paste: faPasteRegular,
   pasteSolid: faPasteSolid,
   penToSquare: faPenToSquareSolid,
   plus: faPlusSolid,
+  receipt: faReceiptSolid,
   rss: faRssSolid,
   share: faShareSolid,
   sun: faSunRegular,
@@ -104,6 +113,7 @@ export const faIcons = {
   trashCan: faTrashCanRegular,
   trashCanSolid: faTrashCanSolid,
   users: faUsersSolid,
+  wallet: faWalletSolid,
   xmark: faXmarkSolid,
   // brands
   facebook: faFacebook,

ts_web/elements/dees-input-fileupload.ts

@@ -124,7 +124,7 @@ export class DeesInputFileupload extends DeesElement {
         border-bottom: 1px dashed #444;
         color: ${cssManager.bdTheme('#666', '#ccc')};
         padding: 8px;
-        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
       }
 
       .uploadButton:hover .uploadCandidate {

ts_web/elements/dees-input-text.ts

@@ -16,7 +16,6 @@ export class DeesInputText extends DeesElement {
 
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
-  public valueChangeSubject = new domtools.rxjs.Subject<string>();
 
   @property({
     type: String
@@ -143,7 +142,6 @@ export class DeesInputText extends DeesElement {
     const target: any = eventArg.target;
     this.value = target.value;
     this.changeSubject.next(this);
-    this.valueChangeSubject.next(this.value);
   }
 
   public async freeze() {

ts_web/elements/dees-mobilenavigation.ts

@@ -89,8 +89,8 @@ export class DeesMobilenavigation extends DeesElement {
         right: 0px;
         top: 0px;
         bottom: 0px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
-        border-left: 1px dashed #444;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        border-left: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222')};
         pointer-events: none;
       }
 
@@ -116,7 +116,7 @@ export class DeesMobilenavigation extends DeesElement {
         text-align: left;
         font-size: 24px;
         padding: 8px 0px;
-        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         font-weight: 300;
         border-bottom: 1px dashed #444;
         margin-top: 16px;
@@ -156,6 +156,7 @@ export class DeesMobilenavigation extends DeesElement {
     const main = this.shadowRoot.querySelector('.main');
     if (!this.windowLayer) {
       this.windowLayer = new DeesWindowLayer();
+      this.windowLayer.options.blur = true;
       this.windowLayer.addEventListener('click', () => {
         this.hide();
       });

ts_web/elements/dees-modal.ts

@@ -69,7 +69,7 @@ export class DeesModal extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         color: ${cssManager.bdTheme('#333', '#fff')};
       }
       .modalContainer {
@@ -110,7 +110,7 @@ export class DeesModal extends DeesElement {
 
       .modal .heading {
         height: 32px;
-        font-family: 'Hubot Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         line-height: 32px;
         text-align: center;
         font-weight: 600;

ts_web/elements/dees-pdf.ts

@@ -32,7 +32,7 @@ export class DeesPdf extends DeesElement {
     return html`
       <style>
         :host {
-          font-family: 'Mona Sans', 'Inter', sans-serif;
+          font-family: 'Roboto', 'Inter', sans-serif;
           display: block;
           box-sizing: border-box;
           max-width: 800px;

ts_web/elements/dees-simple-appdash.ts

@@ -43,7 +43,7 @@ export class DeesSimpleAppDash extends DeesElement {
         border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
         font-size: 14px;
         line-height: 40px;
-        font-family: 'Hubot Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         padding: 0px 16px;
       }
       .appcontent {

ts_web/elements/dees-stepper.ts

@@ -154,7 +154,7 @@ export class DeesStepper extends DeesElement {
       .step .title {
         text-align: center;
         padding-top: 50px;
-        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         font-size: 25px;
         font-weight: 300;
       }

ts_web/elements/dees-table.ts

@@ -62,7 +62,7 @@ export interface ITableAction<T = any> {
 
 export interface ITableActionDataArg<T> {
   item: T,
-  dataArray: T[],
+  table: DeesTable<T>,
 }
 
 export type TDisplayFunction<T = any> = (itemArg: T) => object;
@@ -88,6 +88,34 @@ export class DeesTable<T> extends DeesElement {
   })
   public data: T[] = [];
 
+  // dees-form compatibility -----------------------------------------
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  get value() {
+    return this.data;
+  }
+  set value(valueArg) {}
+  public changeSubject = new domtools.rxjs.Subject<DeesTable<T>>();
+  // end dees-form compatibility -----------------------------------------
+
   @property({
     type: String,
     reflect: true,
@@ -122,7 +150,7 @@ export class DeesTable<T> extends DeesElement {
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
-  public itemChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
+  public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   constructor() {
     super();
@@ -133,7 +161,7 @@ export class DeesTable<T> extends DeesElement {
     css`
       .mainbox {
         color: ${cssManager.bdTheme('#333', '#fff')};
-        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-family: 'Roboto', 'Inter', sans-serif;
         font-weight: 400;
         font-size: 14px;
         padding: 16px;
@@ -151,13 +179,13 @@ export class DeesTable<T> extends DeesElement {
         display: flex;
         justify-content: flex-end;
         align-items: center;
+        font-family: 'Roboto', 'Inter', sans-serif;
       }
 
       .headingContainer {
       }
 
       .heading {
-        font-family: 'Hubot Sans', 'Inter', sans-serif;
       }
 
       .heading1 {
@@ -228,11 +256,15 @@ export class DeesTable<T> extends DeesElement {
       }
 
       th {
-        text-transform: uppercase;
+        text-transform: none;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 500;
       }
       th,
       td {
         position: relative;
+        vertical-align: top;
+
         padding: 0px;
         border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
       }
@@ -267,7 +299,7 @@ export class DeesTable<T> extends DeesElement {
         left: 0px;
         position: absolute;
         background: #fa610140;
-        color: inherit;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
@@ -292,6 +324,7 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footer {
+        font-family: 'Roboto', 'Inter', sans-serif;
         font-size: 14px;
         color: ${cssManager.bdTheme('#111', '#ffffff90')};
         background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
@@ -332,7 +365,7 @@ export class DeesTable<T> extends DeesElement {
         <!-- the heading part -->
         <div class="header">
           <div class="headingContainer">
-            <div class="heading heading1">${this.heading1}</div>
+            <div class="heading heading1">${this.label || this.heading1}</div>
             <div class="heading heading2">${this.heading2}</div>
           </div>
           <div class="headerActions">
@@ -346,7 +379,7 @@ export class DeesTable<T> extends DeesElement {
                     @click=${() => {
                       action.actionFunc({
                         item: this.selectedDataRow,
-                        dataArray: this.data
+                        table: this,
                       });
                     }}
                   >
@@ -449,7 +482,7 @@ export class DeesTable<T> extends DeesElement {
                                 action: async () => {
                                   await action.actionFunc({
                                     item: itemArg,
-                                    dataArray: this.data
+                                    table: this,
                                   });
                                   return null;
                                 },
@@ -473,7 +506,7 @@ export class DeesTable<T> extends DeesElement {
                                   if (wantedAction) {
                                     wantedAction.actionFunc({
                                       item: itemArg,
-                                      dataArray: this.data
+                                      table: this,
                                     });
                                   }
                                 }
@@ -493,7 +526,7 @@ export class DeesTable<T> extends DeesElement {
                                       class="action"
                                       @click=${() => actionArg.actionFunc({
                                         item: itemArg,
-                                        dataArray: this.data
+                                        table: this,
                                       })}
                                     >
                                       ${actionArg.iconName
@@ -532,7 +565,7 @@ export class DeesTable<T> extends DeesElement {
                     @click=${() => {
                       action.actionFunc({
                         item: this.selectedDataRow,
-                        dataArray: this.data
+                        table: this,
                       });
                     }}
                   >
@@ -551,44 +584,55 @@ export class DeesTable<T> extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {}
+  public async firstUpdated() {
+  }
 
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
-    this.freezeColumnWidths();
+    this.determineColumnWidths();
   }
 
-  freezeColumnWidths() {
+  public async determineColumnWidths() {
+    const domtools = await this.domtoolsPromise;
+    await domtools.convenience.smartdelay.delayFor(0);
     // Get the table element
     const table = this.shadowRoot.querySelector('table');
     if (!table) return;
 
-    // Create a colgroup if it doesn't exist
-    let colgroup = table.querySelector('colgroup');
-    if (!colgroup) {
-      colgroup = document.createElement('colgroup');
-      table.insertBefore(colgroup, table.firstChild);
-    }
-
     // Get the first row's cells to measure the widths
     const cells = table.rows[0].cells;
 
-    for (let i = 0; i < cells.length; i++) {
+    const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
+      const done = plugins.smartpromise.defer();
       const cell = cells[i];
 
       // Get computed width
       const width = window.getComputedStyle(cell).width;
-
-      // Check if there's already a <col> for this cell
-      let col = colgroup.children[i] as HTMLElement;
-      if (!col) {
-        col = document.createElement('col');
-        colgroup.appendChild(col);
+      if (cell.textContent.includes('Actions')) {
+        cell.style.minWidth = '68px';
+        cell.style.width = `${this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35}px`;
+      } else {
+        cell.style.width = width;
+      }
+      if (waitForRenderArg) {
+        requestAnimationFrame(() => {
+          done.resolve();
+        });
+        await done.promise;
+      }
     }
 
-      // Set the width
-      col.style.width = width;
+    if (cells[cells.length - 1].textContent.includes('Actions')) {
+      await handleColumnByIndex(cells.length - 1, true);
     }
+
+    for (let i = 0; i < cells.length; i++) {
+      if (cells[i].textContent.includes('Actions')) {
+        continue;
+      }
+      await handleColumnByIndex(i);
+    }
+    table.style.tableLayout = 'fixed';
   }
 
   getActionsForType(typeArg: ITableAction['type'][0]) {
@@ -600,8 +644,11 @@ export class DeesTable<T> extends DeesElement {
     return actions;
   }
 
-  handleCellEditing(event: Event, itemArg: T, key: string) {
+  async handleCellEditing(event: Event, itemArg: T, key: string) {
+    const domtools = await this.domtoolsPromise;
     const target = event.target as HTMLElement;
+    const originalColor = target.style.color;
+    target.style.color = 'transparent';
     const transformedItem = this.displayFunction(itemArg);
     const initialValue = (transformedItem[key] as unknown as string) || '';
     // Create an input element
@@ -609,16 +656,17 @@ export class DeesTable<T> extends DeesElement {
     input.type = 'text';
     input.value = initialValue;
 
-    const blurInput = (blurArg = true, saveArg = false) => {
+    const blurInput = async (blurArg = true, saveArg = false) => {
       if (blurArg) {
         input.blur();
       }
       if (saveArg) {
         itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
-        target.innerHTML = input.value; // Update the cell's display
-      } else {
-        target.innerHTML = initialValue;
+        this.changeSubject.next(this);
       }
+      input.remove();
+      target.style.color = originalColor;
+      this.requestUpdate();
     };
 
     // When the input loses focus or the Enter key is pressed, update the data
@@ -632,7 +680,6 @@ export class DeesTable<T> extends DeesElement {
     });
 
     // Replace the cell's content with the input
-    target.innerHTML = '';
     target.appendChild(input);
     input.focus();
   }

ts_web/elements/dees-toast.demo.ts

@@ -0,0 +1,5 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = async () => {
+  return html`<dees-toast></dees-toast>`;
+}

ts_web/elements/dees-toast.ts

@@ -1,6 +1,7 @@
 import { customElement, DeesElement, type TemplateResult, html, type CSSResult, } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-toast.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,6 +11,7 @@ declare global {
 
 @customElement('dees-toast')
 export class DeesToast extends DeesElement {
+  public static demo = demoFunc;
 
   constructor() {
     super();

ts_web/elements/index.ts

@@ -6,6 +6,7 @@ export * from './dees-dataview-codebox.js';
 export * from './dees-dataview-statusobject.js';
 export * from './dees-form-submit.js';
 export * from './dees-form.js';
+export * from './dees-hint.js';
 export * from './dees-icon.js';
 export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';