1.0.231

.gitea/workflows/default_tags.yaml

@@ -119,6 +119,6 @@ jobs:
         run: |
           npmci node install stable
           npmci npm install
-          pnpm install -g @gitzone/tsdoc
+          pnpm install -g @git.zone/tsdoc
           npmci command tsdoc
         continue-on-error: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.228",
+  "version": "1.0.231",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -16,28 +16,28 @@
   "license": "MIT",
   "dependencies": {
     "@design.estate/dees-domtools": "^2.0.55",
-    "@design.estate/dees-element": "^2.0.31",
+    "@design.estate/dees-element": "^2.0.33",
     "@design.estate/dees-wcctools": "^1.0.81",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.0",
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.0.3",
     "@push.rocks/smartstring": "^4.0.9",
     "@tsclass/tsclass": "^4.0.46",
     "highlight.js": "11.9.0",
-    "ibantools": "^4.3.5",
+    "ibantools": "^4.3.6",
     "pdfjs-dist": "^3.11.174"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.66",
+    "@git.zone/tsbuild": "^2.1.66",
-    "@gitzone/tsbundle": "^2.0.8",
+    "@git.zone/tsbundle": "^2.0.8",
-    "@gitzone/tstest": "^1.0.77",
+    "@git.zone/tstest": "^1.0.77",
-    "@gitzone/tswatch": "^2.0.7",
+    "@git.zone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.8.7"
+    "@types/node": "^20.10.0"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-chips.demo.ts

@@ -1,20 +1,32 @@
 import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
+  <style>
+    .demoContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background: #222;
+    }
+  </style>
+  <div class="demoContainer">
     <dees-chips
       selectionMode="none"
       .selectableChips=${[
         { key: 'account1', value: 'Payment Account 1' },
         { key: 'account2', value: 'PaymentAccount2' },
-      { key: 'account3', value: 'Payment Account 3' }
+        { key: 'account3', value: 'Payment Account 3' },
       ]}
     ></dees-chips>
     <dees-chips
       selectionMode="single"
+      chipsAreRemovable
       .selectableChips=${[
         { key: 'account1', value: 'Payment Account 1' },
         { key: 'account2', value: 'PaymentAccount2' },
-      { key: 'account3', value: 'Payment Account 3' }
+        { key: 'account3', value: 'Payment Account 3' },
       ]}
     ></dees-chips>
     <dees-chips
@@ -22,7 +34,8 @@ export const demoFunc = () => html`
       .selectableChips=${[
         { key: 'account1', value: 'Payment Account 1' },
         { key: 'account2', value: 'PaymentAccount2' },
-      { key: 'account3', value: 'Payment Account 3' }
+        { key: 'account3', value: 'Payment Account 3' },
       ]}
     ></dees-chips>
+  </div>
 `;

ts_web/elements/dees-chips.ts

@@ -19,7 +19,7 @@ declare global {
   }
 }
 
-type Tag = { key: string, value: string };
+type Tag = { key: string; value: string };
 
 @customElement('dees-chips')
 export class DeesChips extends DeesElement {
@@ -29,7 +29,12 @@ export class DeesChips extends DeesElement {
   public selectionMode: 'none' | 'single' | 'multiple' = 'single';
 
   @property({
-    type: Array
+    type: Boolean,
+  })
+  public chipsAreRemovable: boolean = false;
+
+  @property({
+    type: Array,
   })
   public selectableChips: Tag[] = [];
 
@@ -37,11 +42,10 @@ export class DeesChips extends DeesElement {
   public selectedChip: Tag = null;
 
   @property({
-    type: Array
+    type: Array,
   })
   public selectedChips: Tag[] = [];
 
-
   constructor() {
     super();
   }
@@ -49,7 +53,6 @@ export class DeesChips extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     css`
-
       :host {
         display: block;
         box-sizing: border-box;
@@ -70,9 +73,10 @@ export class DeesChips extends DeesElement {
         color: #fff;
         border-radius: 40px;
         margin-right: 4px;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
         position: relative;
         overflow: hidden;
+        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
       }
 
       .chip:hover {
@@ -81,11 +85,11 @@ export class DeesChips extends DeesElement {
       }
 
       .chip.selected {
-        background: #00A3FF;
+        background: #00a3ff;
       }
 
       .chipKey {
-        background: rgba(0,0,0,0.3);
+        background: rgba(0, 0, 0, 0.3);
         height: 100%;
         display: inline-block;
         margin-left: -8px;
@@ -94,17 +98,43 @@ export class DeesChips extends DeesElement {
         margin-right: 8px;
       }
 
+      dees-icon {
+        padding: 0px 6px 0px 4px;
+        margin-left: 4px;
+        margin-right: -8px;
+        background: rgba(0, 0, 0, 0.3);
+      }
+
+      dees-icon:hover {
+        background: #e4002b;
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
       <div class="mainbox">
-        ${this.selectableChips.map(chip => html`
+        ${this.selectableChips.map(
-          <div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
+          (chip) => html`
-            ${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``}${chip.value}
+            <div
+              @click=${() => this.selectChip(chip)}
+              class="chip ${this.isSelected(chip) ? 'selected' : ''}"
+            >
+              ${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``} ${chip.value}
+              ${this.chipsAreRemovable
+                ? html`
+                    <dees-icon
+                      @click=${(event: Event) => {
+                        event.stopPropagation(); // prevent the selectChip event from being triggered
+                        this.removeChip(chip);
+                      }}
+                      .iconFA=${'xmark'}
+                    ></dees-icon>
+                  `
+                : html``}
             </div>
-        `)}
+          `
+        )}
       </div>
     `;
   }
@@ -120,7 +150,7 @@ export class DeesChips extends DeesElement {
     if (this.selectionMode === 'single') {
       return this.selectedChip?.key === chip.key;
     } else {
-      return this.selectedChips.some(selected => selected.key === chip.key);
+      return this.selectedChips.some((selected) => selected.key === chip.key);
     }
   }
 
@@ -137,9 +167,9 @@ export class DeesChips extends DeesElement {
         this.selectedChip = chip;
         this.selectedChips = [chip];
       }
-    } else if(this.selectionMode === 'multiple') {
+    } else if (this.selectionMode === 'multiple') {
       if (this.isSelected(chip)) {
-        this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
+        this.selectedChips = this.selectedChips.filter((selected) => selected.key !== chip.key);
       } else {
         this.selectedChips = [...this.selectedChips, chip];
       }
@@ -147,4 +177,20 @@ export class DeesChips extends DeesElement {
     }
     console.log(this.selectedChips);
   }
+
+  public removeChip(chipToRemove: Tag): void {
+    // Remove the chip from selectableChips
+    this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);
+
+    // Remove the chip from selectedChips if present
+    this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);
+
+    // If the removed chip was the selectedChip, set selectedChip to null
+    if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
+      this.selectedChip = null;
+    }
+
+    // Trigger an update to re-render the component
+    this.requestUpdate();
+  }
 }

ts_web/elements/dees-contextmenu.ts

@@ -27,7 +27,42 @@ export class DeesContextmenu extends DeesElement {
   public static demo = demoFunc
 
   // STATIC
+  // This will store all the accumulated menu items
+  public static contextMenuDeactivated = false;
+  public static accumulatedMenuItems: plugins.tsclass.website.IMenuItem[] = [];
+
+  // Add a global event listener for the right-click context menu
+  public static initializeGlobalListener() {
+    document.addEventListener('contextmenu', (event: MouseEvent) => {
+      if (this.contextMenuDeactivated) {
+        return;
+      }
+      event.preventDefault();
+
+      // Get the target element of the right-click
+      let target: EventTarget | null = event.target;
+
+      // Clear previously accumulated items
+      DeesContextmenu.accumulatedMenuItems = [];
+
+      // Traverse up the DOM tree to accumulate menu items
+      while (target) {
+        if ((target as any).getContextMenuItems) {
+          DeesContextmenu.accumulatedMenuItems.push(...(target as any).getContextMenuItems());
+        }
+        target = (target as Node).parentNode;
+      }
+
+      // Open the context menu with the accumulated items
+      DeesContextmenu.openContextMenuWithOptions(event, DeesContextmenu.accumulatedMenuItems);
+    });
+  }
+
+  // allows opening of a contextmenu with options
   public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
+    if (this.contextMenuDeactivated) {
+      return;
+    }
     eventArg.preventDefault();
     eventArg.stopPropagation();
     const contextMenu = new DeesContextmenu();
@@ -49,6 +84,7 @@ export class DeesContextmenu extends DeesElement {
     contextMenu.style.transform = 'scale(1,1)';
   }
 
+  // INSTANCE
   @property({
     type: Array,
   })
@@ -59,6 +95,9 @@ export class DeesContextmenu extends DeesElement {
     super();
   }
 
+  /**
+   * STATIC STYLES
+   */
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -115,10 +154,11 @@ export class DeesContextmenu extends DeesElement {
         })}
         ${this.menuItems.length === 0 ? html`
             <div class="menuitem" @click=${() => {
-              alert('No menu items...')
+              DeesContextmenu.contextMenuDeactivated = true;
+              this.destroy();
             }}>
               <dees-icon .iconFA=${'xmark'}></dees-icon
-              >No menu item present...
+              >Deactivate Contextmenu globally.
             </div>
         ` : html``}
       </div>
@@ -144,3 +184,5 @@ export class DeesContextmenu extends DeesElement {
     this.parentElement.removeChild(this);
   }
 }
+
+DeesContextmenu.initializeGlobalListener();

ts_web/elements/dees-input-dropdown.demo.ts

@@ -0,0 +1,11 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+<dees-input-dropdown
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
+`

ts_web/elements/dees-input-dropdown.ts

@@ -1,5 +1,6 @@
 import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-input-dropdown.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -9,15 +10,7 @@ declare global {
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesElement {
-  public static demo = () => html`
+  public static demo = demoFunc
-    <dees-input-dropdown
-      .options=${[
-        {option: 'option 1', key: 'option1'},
-        {option: 'option 2', key: 'option2'},
-        {option: 'option 3', key: 'option3'}
-      ]}
-    ></dees-input-dropdown>
-  `
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -100,12 +93,11 @@ export class DeesInputDropdown extends DeesElement {
           cursor: pointer;
           transition: all 0.2s ease;
           opacity: 0;
-          position: relative;
+          position: absolute;
           background: ${cssManager.bdTheme('#ffffff', '#222222')};
           max-width: 420px;
           box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
           min-height: 40px;
-          margin-top: -40px;
           z-index: 100;
           border-radius: 3px;
           padding: 4px;
@@ -135,12 +127,8 @@ export class DeesInputDropdown extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        
-      </style>
       <div class="maincontainer">
-        <div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
+        <div class="selectedBox show" @click="${event => {this.openSelectionBox();}}">
           ${this.selectedOption?.option}
         </div>
         <div class="selectionBox">
@@ -165,12 +153,16 @@ export class DeesInputDropdown extends DeesElement {
       detail: selectedOption,
       bubbles: true
     }));
-    this.toggleSelectionBox();
+    this.openSelectionBox();
     this.changeSubject.next(this);
   }
 
-  public toggleSelectionBox() {
+  public openSelectionBox() {
     this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
     this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
   }
+
+  public closeSelectionBox() {
+    
+  }
 }

ts_web/elements/dees-modal.ts

@@ -71,6 +71,7 @@ export class DeesModal extends DeesElement {
       :host {
         font-family: 'Roboto', 'Inter', sans-serif;
         color: ${cssManager.bdTheme('#333', '#fff')};
+        will-change: transform;
       }
       .modalContainer {
         display: flex;

ts_web/elements/dees-table.ts

@@ -61,8 +61,8 @@ export interface ITableAction<T = any> {
 }
 
 export interface ITableActionDataArg<T> {
-  item: T,
+  item: T;
-  table: DeesTable<T>,
+  table: DeesTable<T>;
 }
 
 export type TDisplayFunction<T = any> = (itemArg: T) => object;
@@ -396,6 +396,8 @@ export class DeesTable<T> extends DeesElement {
         </div>
         <div class="headingSeparation"></div>
 
+        <dees-input-text></dees-input-text>
+
         <!-- the actual table -->
         <style></style>
         ${this.data.length > 0
@@ -524,7 +526,8 @@ export class DeesTable<T> extends DeesElement {
                                   ${this.getActionsForType('inRow').map(
                                     (actionArg) => html`<div
                                       class="action"
-                                      @click=${() => actionArg.actionFunc({
+                                      @click=${() =>
+                                        actionArg.actionFunc({
                                           item: itemArg,
                                           table: this,
                                         })}
@@ -584,8 +587,7 @@ 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);
@@ -609,7 +611,8 @@ export class DeesTable<T> extends DeesElement {
       // Get computed width
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
-        const neededWidth = this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35;
+        const neededWidth =
+          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 35;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;
@@ -620,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
         });
         await done.promise;
       }
-    }
+    };
 
     if (cells[cells.length - 1].textContent.includes('Actions')) {
       await handleColumnByIndex(cells.length - 1, true);

ts_web/elements/dees-windowlayer.ts

@@ -66,14 +66,22 @@ export class DeesWindowLayer extends DeesElement {
           pointer-events: none;
           z-index: 200;
         }
+        .slotContent {
+          height: 100vh;
+          width: 100vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
         
         .visible {
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
-          pointer-events: all;
         }
       </style>
-      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
+      <div class="windowOverlay ${this.visible ? 'visible' : null}">
+      </div>
+      <div @click=${this.dispatchClicked} class="slotContent">
         <slot></slot>
       </div>
     `;

tsconfig.json

@@ -3,8 +3,8 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "target": "ES2022",
-    "module": "ES2022",
+    "module": "NodeNext",
-    "moduleResolution": "nodenext",
+    "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "verbatimModuleSyntax": true
   },