1.0.221

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.207",
+  "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.40",
-    "@design.estate/dees-element": "^2.0.27",
-    "@design.estate/dees-wcctools": "^1.0.78",
+    "@design.estate/dees-domtools": "^2.0.51",
+    "@design.estate/dees-element": "^2.0.29",
+    "@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.0"
+    "@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.207',
+  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

@@ -1,4 +1,4 @@
-import  { demoFunc } from './dees-dataview-codebox.demo.js';
+import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
   DeesElement,
   html,
@@ -6,6 +6,7 @@ import {
   type TemplateResult,
   property,
   state,
+  cssManager,
 } from '@design.estate/dees-element';
 
 import hlight from 'highlight.js';
@@ -13,6 +14,7 @@ import hlight from 'highlight.js';
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
+import { DeesContextmenu } from './dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -46,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;
@@ -58,31 +61,67 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .appbar {
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
           height: 24px;
-          background: #161616;
-          border-bottom: 1px solid #222222;
           font-size: 12px;
-          color: #CCC;
-          font-family: 'Hubot Sans', 'monospace';
           line-height: 24px;
         }
 
+        .appbar .macControls {
+          position: absolute;
+          top: 6px;
+          left: 20px;
+          width: 200px;
+          display: grid;
+          grid-template-columns: 24px 24px 24px;
+        }
+
+        .appbar .macControls div {
+          width: 12px;
+          height: 12px;
+          display: inline-block;
+          border-radius: 50%;
+          margin: 0px;
+          padding: 0px;
+          cursor: pointer;
+          background: #222222;
+        }
+
+        .appbar .macControls div.close {
+          background: #ff5f57;
+        }
+
+        .appbar .macControls div.toDock {
+          background: #ffbd2e;
+        }
+
+        .appbar .macControls div.minMax {
+          background: #27c93f;
+        }
+
+        .appbar .macControls div:hover {
+          background: #333333;
+        }
+
         .appbar .fileName {
           text-align: center;
         }
 
         .bottomBar {
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
           height: 24px;
-          background: #161616;
-          border-top: 1px solid #222222;
           font-size: 12px;
-          color: #CCC;
-          font-family: 'Hubot Sans', 'monospace';
           line-height: 24px;
+          text-align: right;
+          padding-right: 100px;
         }
 
         .languageLabel {
-          color: #fff;
+          color: ${cssManager.bdTheme('#333', '#ccc')};
           font-size: 12px;
           line-height: 24px;
           z-index: 10;
@@ -105,7 +144,6 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          
           color: ${this.goBright ? '#acacac' : '#666666'};
           padding: 30px 16px 0px 0px;
           text-align: right;
@@ -156,8 +194,26 @@ export class DeesDataviewCodebox extends DeesElement {
           color: ${this.goBright ? '#EF9300' : '#ffd765'};
         }
       </style>
-      <div class="mainbox">
+      <div
+        class="mainbox"
+        @contextmenu="${(eventArg) => {
+          DeesContextmenu.openContextMenuWithOptions(eventArg, [
+            {
+              name: 'About',
+              iconName: 'circleInfo',
+              action: async () => {
+                return null;
+              },
+            },
+          ]);
+        }}"
+      >
         <div class="appbar">
+          <div class="macControls">
+            <div class="close"></div>
+            <div class="toDock"></div>
+            <div class="minMax"></div>
+          </div>
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">

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

@@ -0,0 +1,55 @@
+import { html } from '@design.estate/dees-element';
+
+import { faIcons } from './dees-icon.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demoContainer {
+      
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      background: #111111;
+      padding: 10px; font-size: 30px;
+    }
+    dees-icon {
+      transition: color 0.02s;
+      color: #ffffff;
+    }
+    dees-icon:hover {
+      color: #e4002b;
+    }
+
+    .iconContainer {
+      display: block;
+      padding: 16px 16px 0px 16px;
+      border: 1px solid #333333;
+      margin-right: 8px;
+      margin-bottom: 8px;
+    }
+
+    .iconName {
+      font-size: 12px;
+      text-align: center;
+      color: #ccc;
+      background: #333333;
+      padding: 4px 8px;
+      padding-bottom: 4px;
+      margin-left: -16px;
+      margin-right: -16px;
+      margin-top: 16px;
+    }
+  </style>
+  
+    <div class="demoContainer">
+      ${Object.keys(faIcons).map(
+        (iconName) => html`
+          <div class="iconContainer">
+            <dees-icon .iconFA=${iconName as any}></dees-icon>
+            <div class="iconName">${iconName}</div>
+          </div>
+        `
+      )}
+    </div>
+  
+`;

ts_web/elements/dees-icon.ts

@@ -29,6 +29,7 @@ import {
   faMessage as faMessageRegular,
   faPaste as faPasteRegular,
   faSun as faSunRegular,
+  faTrashCan as faTrashCanRegular,
 } from '@fortawesome/free-regular-svg-icons';
 import {
   faArrowRight as faArrowRightSolid,
@@ -47,72 +48,73 @@ 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';
 
 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,
+  trashSolid: faTrashSolid,
+  trashCan: faTrashCanRegular,
+  trashCanSolid: faTrashCanSolid,
+  users: faUsersSolid,
+  wallet: faWalletSolid,
   xmark: faXmarkSolid,
-  xmarkSolid: faXmarkSolid,
   // brands
   facebook: faFacebook,
   google: faGoogle,
@@ -122,7 +124,6 @@ export const faIcons = {
   slack: faSlackHash,
   tiktok: faTiktok,
   twitter: faTwitter,
-  users: faUsersSolid,
 };
 
 export type TIconKey = keyof typeof faIcons;
@@ -135,24 +136,7 @@ declare global {
 
 @customElement('dees-icon')
 export class DeesIcon extends DeesElement {
-  public static demo = () => html`
-    <dees-icon iconName="visibility"></dees-icon>
-    <div style="background: #fff; padding: 10px; font-size: 30px">
-      <style>
-        dees-icon {
-          transition: color 0.05s;
-        }
-        dees-icon:hover {
-          color: #e4002b;
-        }
-      </style>
-      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
-      <dees-icon .iconFA=${'sun'}></dees-icon>
-      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
-      <dees-icon .iconFA=${'facebook'}></dees-icon>
-      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
-    </div>
-  `;
+  public static demo = demoFunc;
 
   @property({
     type: String

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')};;
-        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.demo.ts

@@ -58,8 +58,8 @@ export const demoFunc = () => html`
           iconName: 'bell',
           useTableBehaviour: 'upload',
           type: ['inRow'],
-          actionFunc: async (itemArg) => {
-            alert(itemArg.amount);
+          actionFunc: async (optionsArg) => {
+            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;
@@ -99,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
   })
   public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
 
+  @property({
+    attribute: false,
+  })
+  public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;
+
   @property({
     type: Object,
   })
@@ -112,6 +122,8 @@ export class DeesTable<T> extends DeesElement {
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
+  public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
+
   constructor() {
     super();
   }
@@ -121,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;
@@ -139,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 {
@@ -216,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 {
@@ -255,11 +269,11 @@ 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;
-        padding: 0px 6px
+        padding: 0px 6px;
       }
 
       .action {
@@ -280,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')};
@@ -332,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
@@ -432,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;
                                 },
                               };
@@ -453,7 +474,10 @@ export class DeesTable<T> extends DeesElement {
                                     actionArg.type.includes('doubleClick')
                                   );
                                   if (wantedAction) {
-                                    wantedAction.actionFunc(itemArg);
+                                    wantedAction.actionFunc({
+                                      item: itemArg,
+                                      table: this,
+                                    });
                                   }
                                 }
                               }}
@@ -470,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`
@@ -506,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
@@ -535,35 +565,34 @@ export class DeesTable<T> extends DeesElement {
     // 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 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);
       }
-  
+
       // Set the width
       col.style.width = width;
     }
   }
-  
 
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
@@ -574,27 +603,41 @@ export class DeesTable<T> extends DeesElement {
     return actions;
   }
 
-  handleCellEditing(event: Event, item: 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
     const input = document.createElement('input');
     input.type = 'text';
-    input.value = (item[key] as unknown as string) || '';
+    input.value = initialValue;
+
+    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)
+      }
+      input.remove();
+      target.style.color = originalColor;
+      this.requestUpdate();
+    };
 
     // When the input loses focus or the Enter key is pressed, update the data
     input.addEventListener('blur', () => {
-      item[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
+      blurInput(false, false);
     });
     input.addEventListener('keydown', (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        input.blur(); // This will trigger the blur event handler above
+        blurInput(true, true); // This will trigger the blur event handler above
       }
     });
 
     // 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';