@design.estate/dees-catalog 1.0.218 → 1.0.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.218",
+  "version": "1.0.220",
   "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.50",
+    "@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",
@@ -35,7 +35,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.8.2"
+    "@types/node": "^20.8.3"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

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

package/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>
+`;

package/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> `;
+  }
+}

package/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;
       }
 
@@ -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();
       });

package/ts_web/elements/dees-table.ts

@@ -269,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;
@@ -606,6 +606,8 @@ export class DeesTable<T> extends DeesElement {
   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
@@ -621,6 +623,7 @@ export class DeesTable<T> extends DeesElement {
         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();
     };
 

package/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>`;
+}

package/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();

package/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';