@design.estate/dees-catalog 1.0.227 → 1.0.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.227",
+  "version": "1.0.229",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/dees-chips.demo.ts

@@ -0,0 +1,40 @@
+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' },
+      ]}
+    ></dees-chips>
+    <dees-chips
+      selectionMode="single"
+      .selectableChips=${[
+        { key: 'account1', value: 'Payment Account 1' },
+        { key: 'account2', value: 'PaymentAccount2' },
+        { key: 'account3', value: 'Payment Account 3' },
+      ]}
+    ></dees-chips>
+    <dees-chips
+      selectionMode="multiple"
+      .selectableChips=${[
+        { key: 'account1', value: 'Payment Account 1' },
+        { key: 'account2', value: 'PaymentAccount2' },
+        { key: 'account3', value: 'Payment Account 3' },
+      ]}
+    ></dees-chips>
+  </div>
+`;

package/ts_web/elements/dees-chips.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chips.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,29 +19,27 @@ declare global {
   }
 }
 
+type Tag = { key: string, value: string };
+
 @customElement('dees-chips')
 export class DeesChips extends DeesElement {
-  public static demo = () => html`
-    <dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
-    <dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
-    
-  `;
+  public static demo = demoFunc;
 
   @property()
-  public selectionMode: 'single' | 'multiple' = 'single';
+  public selectionMode: 'none' | 'single' | 'multiple' = 'single';
 
   @property({
     type: Array
   })
-  public selectableChips: string[] = [];
+  public selectableChips: Tag[] = [];
 
   @property()
-  public selectedChip: string = null;
+  public selectedChip: Tag = null;
 
   @property({
     type: Array
   })
-  public selectedChips: string[] = [];
+  public selectedChips: Tag[] = [];
   
 
   constructor() {
@@ -57,18 +56,24 @@ export class DeesChips extends DeesElement {
       }
 
       .mainbox {
-
+        user-select: none;
       }
 
       .chip {
-        background: #494949;
-        display: inline-block;
-        padding: 8px 12px;
-        font-size: 14px;
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        background: #333333;
+        display: inline-flex;
+        height: 20px;
+        line-height: 20px;
+        padding: 0px 8px;
+        font-size: 12px;
         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 {
@@ -79,6 +84,16 @@ export class DeesChips extends DeesElement {
       .chip.selected {
         background: #00A3FF;
       }
+
+      .chipKey {
+        background: rgba(0,0,0,0.3);
+        height: 100%;
+        display: inline-block;
+        margin-left: -8px;
+        padding-left: 8px;
+        padding-right: 8px;
+        margin-right: 8px;
+      }
       
     `,
   ];
@@ -86,9 +101,9 @@ export class DeesChips extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="mainbox">
-        ${this.selectableChips.map(chipArg => html`
-          <div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
-            ${chipArg}
+        ${this.selectableChips.map(chip => html`
+          <div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
+            ${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``}${chip.value}
           </div>
         `)}
       </div>
@@ -102,20 +117,32 @@ export class DeesChips extends DeesElement {
     }
   }
 
-  public async selectChip(chipArg: string) {
+  private isSelected(chip: Tag): boolean {
+    if (this.selectionMode === 'single') {
+      return this.selectedChip?.key === chip.key;
+    } else {
+      return this.selectedChips.some(selected => selected.key === chip.key);
+    }
+  }
+
+  public async selectChip(chip: Tag) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
     if (this.selectionMode === 'single') {
-      if (this.selectedChip === chipArg) {
+      if (this.isSelected(chip)) {
         this.selectedChip = null;
         this.selectedChips = [];
       } else {
-        this.selectedChip = chipArg;
-        this.selectedChips = [chipArg];
+        this.selectedChip = chip;
+        this.selectedChips = [chip];
       }
     } else if(this.selectionMode === 'multiple') {
-      if (this.selectedChips.includes(chipArg)) {
-        this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
+      if (this.isSelected(chip)) {
+        this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
       } else {
-        this.selectedChips.push(chipArg);
+        this.selectedChips = [...this.selectedChips, chip];
       }
       this.requestUpdate();
     }

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

package/ts_web/elements/dees-table.ts

@@ -61,8 +61,8 @@ export interface ITableAction<T = any> {
 }
 
 export interface ITableActionDataArg<T> {
-  item: T,
-  table: DeesTable<T>,
+  item: 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,10 +526,11 @@ export class DeesTable<T> extends DeesElement {
                                   ${this.getActionsForType('inRow').map(
                                     (actionArg) => html`<div
                                       class="action"
-                                      @click=${() => actionArg.actionFunc({
-                                        item: itemArg,
-                                        table: this,
-                                      })}
+                                      @click=${() =>
+                                        actionArg.actionFunc({
+                                          item: itemArg,
+                                          table: this,
+                                        })}
                                     >
                                       ${actionArg.iconName
                                         ? html`
@@ -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);