1.0.221

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.211",
+  "version": "1.0.221",
   "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.211',
+  version: '1.0.221',
   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-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,18 +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';
@@ -68,51 +74,38 @@ export const faIcons = {
   // normal
   arrowRight: faArrowRightSolid,
   arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
-  arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
   bell: faBellSolid,
-  bellSolid: faBellSolid,
   bug: faBugSolid,
-  bugSolid: faBugSolid,
   building: faBuildingSolid,
-  buildingSolid: faBuildingSolid,
   caretLeft: faCaretLeftSolid,
-  caretLeftSolid: faCaretLeftSolid,
   caretRight: faCaretRightSolid,
-  caretRightSolid: faCaretRightSolid,
   check: faCheckSolid,
-  checkSolid: faCheckSolid,
   circleInfo: faCircleInfoSolid,
-  circleInfoSolid: faCircleInfoSolid,
   circleCheck: faCircleCheckRegular,
   circleCheckSolid: faCircleCheckSolid,
   circleXmark: faCircleXmarkRegular,
   circleXmarkSolid: faCircleXmarkSolid,
   clockRotateLeft: faClockRotateLeftSolid,
-  clockRotateLeftSolid: faClockRotateLeftSolid,
   copy: faCopyRegular,
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
-  desktopSolid: faDesktopSolid,
   eye: faEyeSolid,
-  eyeSolid: faEyeSolid,
   eyeSlash: faEyeSlashSolid,
-  eyeSlashSolid: faEyeSlashSolid,
+  fileInvoice: faFileInvoiceSolid,
+  fileInvoiceDoller: faFileInvoiceDollarSolid,
   grip: faGripSolid,
-  gripSolid: faGripSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
+  moneyCheckDollar: faMoneyCheckDollarSolid,
   mugHot: faMugHotSolid,
-  mugHotSolid: faMugHotSolid,
   minus: faMinusSolid,
-  minusSolid: faMinusSolid,
   paste: faPasteRegular,
   pasteSolid: faPasteSolid,
   penToSquare: faPenToSquareSolid,
-  penToSquareSolid: faPenToSquareSolid,
+  plus: faPlusSolid,
+  receipt: faReceiptSolid,
   rss: faRssSolid,
-  rssSolid: faRssSolid,
   share: faShareSolid,
-  shareSolid: faShareSolid,
   sun: faSunRegular,
   sunSolid: faSunSolid,
   trash: faTrashSolid,
@@ -120,8 +113,8 @@ export const faIcons = {
   trashCan: faTrashCanRegular,
   trashCanSolid: faTrashCanSolid,
   users: faUsersSolid,
+  wallet: faWalletSolid,
   xmark: faXmarkSolid,
-  xmarkSolid: faXmarkSolid,
   // brands
   facebook: faFacebook,
   google: faGoogle,

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-mobilenavigation.ts

@@ -89,8 +89,8 @@ export class DeesMobilenavigation extends DeesElement {
         right: 0px;
         top: 0px;
         bottom: 0px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
-        border-left: 1px dashed #444;
+        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.demo.ts

@@ -58,8 +58,8 @@ export const demoFunc = () => html`
           iconName: 'bell',
           useTableBehaviour: 'upload',
           type: ['inRow'],
-          actionFunc: async (itemArg) => {
+          actionFunc: async (optionsArg) => {
-            alert(itemArg.amount);
+            alert(optionsArg.item.amount);
           },
         },
         {
@@ -112,7 +112,7 @@ export const demoFunc = () => html`
           type: ['doubleClick', 'contextmenu'],
           iconName: 'eye',
           actionFunc: async (itemArg) => {
-            alert(itemArg.amount);
+            alert(itemArg.item.amount);
             return null;
           },
         }

ts_web/elements/dees-table.ts

@@ -57,7 +57,12 @@ export interface ITableAction<T = any> {
    * @param itemArg
    * @returns
    */
-  actionFunc: (itemArg: T) => Promise<any>;
+  actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
+}
+
+export interface ITableActionDataArg<T> {
+  item: T,
+  table: DeesTable<T>,
 }
 
 export type TDisplayFunction<T = any> = (itemArg: T) => object;
@@ -117,7 +122,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();
@@ -128,7 +133,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;
@@ -146,13 +151,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 {
@@ -223,7 +228,9 @@ export class DeesTable<T> extends DeesElement {
       }
 
       th {
-        text-transform: uppercase;
+        text-transform: none;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 500;
       }
       th,
       td {
@@ -262,7 +269,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;
@@ -287,6 +294,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')};
@@ -339,7 +347,10 @@ export class DeesTable<T> extends DeesElement {
                   html`<div
                     class="headerAction"
                     @click=${() => {
-                      action.actionFunc(this.selectedDataRow);
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        table: this,
+                      });
                     }}
                   >
                     ${action.iconName
@@ -439,7 +450,10 @@ export class DeesTable<T> extends DeesElement {
                                 name: action.name,
                                 iconName: action.iconName as any,
                                 action: async () => {
-                                  await action.actionFunc(itemArg);
+                                  await action.actionFunc({
+                                    item: itemArg,
+                                    table: this,
+                                  });
                                   return null;
                                 },
                               };
@@ -460,7 +474,10 @@ export class DeesTable<T> extends DeesElement {
                                     actionArg.type.includes('doubleClick')
                                   );
                                   if (wantedAction) {
-                                    wantedAction.actionFunc(itemArg);
+                                    wantedAction.actionFunc({
+                                      item: itemArg,
+                                      table: this,
+                                    });
                                   }
                                 }
                               }}
@@ -477,7 +494,10 @@ export class DeesTable<T> extends DeesElement {
                                   ${this.getActionsForType('inRow').map(
                                     (actionArg) => html`<div
                                       class="action"
-                                      @click=${() => actionArg.actionFunc(itemArg)}
+                                      @click=${() => actionArg.actionFunc({
+                                        item: itemArg,
+                                        table: this,
+                                      })}
                                     >
                                       ${actionArg.iconName
                                         ? html`
@@ -513,7 +533,10 @@ export class DeesTable<T> extends DeesElement {
                   html`<div
                     class="footerAction"
                     @click=${() => {
-                      action.actionFunc(this.selectedDataRow);
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        table: this,
+                      });
                     }}
                   >
                     ${action.iconName
@@ -580,8 +603,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
@@ -589,16 +615,16 @@ 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;
       }
+      input.remove();
+      target.style.color = originalColor;
+      this.requestUpdate();
     };
 
     // When the input loses focus or the Enter key is pressed, update the data
@@ -612,7 +638,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';