@design.estate/dees-catalog 1.0.228 → 1.0.230

package/dist_watch/bundle.js

@@ -69074,30 +69074,43 @@ DeesButton = __decorateClass([
 
 // ts_web/elements/dees-chips.demo.ts
 var demoFunc2 = () => x`
-  <dees-chips
-    selectionMode="none"
-    .selectableChips=${[
+  <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=${[
+    ></dees-chips>
+    <dees-chips
+      selectionMode="single"
+      chipsAreRemovable
+      .selectableChips=${[
   { key: "account1", value: "Payment Account 1" },
   { key: "account2", value: "PaymentAccount2" },
   { key: "account3", value: "Payment Account 3" }
 ]}
-  ></dees-chips>
-  <dees-chips
-    selectionMode="multiple"
-    .selectableChips=${[
+    ></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>
+    ></dees-chips>
+  </div>
 `;
 
 // ts_web/elements/dees-chips.ts
@@ -69105,6 +69118,7 @@ var DeesChips = class extends DeesElement {
   constructor() {
     super();
     this.selectionMode = "single";
+    this.chipsAreRemovable = false;
     this.selectableChips = [];
     this.selectedChip = null;
     this.selectedChips = [];
@@ -69112,11 +69126,25 @@ var DeesChips = class extends DeesElement {
   render() {
     return x`
       <div class="mainbox">
-        ${this.selectableChips.map((chip) => x`
-          <div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? "selected" : ""}">
-            ${chip.key ? x`<div class="chipKey">${chip.key}</div>` : x``}${chip.value}
-          </div>
-        `)}
+        ${this.selectableChips.map(
+      (chip) => x`
+            <div
+              @click=${() => this.selectChip(chip)}
+              class="chip ${this.isSelected(chip) ? "selected" : ""}"
+            >
+              ${chip.key ? x`<div class="chipKey">${chip.key}</div>` : x``} ${chip.value}
+              ${this.chipsAreRemovable ? x`
+                    <dees-icon
+                      @click=${(event) => {
+        event.stopPropagation();
+        this.removeChip(chip);
+      }}
+                      .iconFA=${"xmark"}
+                    ></dees-icon>
+                  ` : x``}
+            </div>
+          `
+    )}
       </div>
     `;
   }
@@ -69155,12 +69183,19 @@ var DeesChips = class extends DeesElement {
     }
     console.log(this.selectedChips);
   }
+  removeChip(chipToRemove) {
+    this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);
+    this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);
+    if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
+      this.selectedChip = null;
+    }
+    this.requestUpdate();
+  }
 };
 DeesChips.demo = demoFunc2;
 DeesChips.styles = [
   cssManager.defaultStyles,
   i`
-
       :host {
         display: block;
         box-sizing: border-box;
@@ -69181,22 +69216,23 @@ DeesChips.styles = [
         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 {
         background: #666666;
-        cursor: pointer; 
+        cursor: pointer;
       }
 
       .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;
@@ -69204,12 +69240,27 @@ DeesChips.styles = [
         padding-right: 8px;
         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;
+      }
     `
 ];
 __decorateClass([
   n4()
 ], DeesChips.prototype, "selectionMode", 2);
+__decorateClass([
+  n4({
+    type: Boolean
+  })
+], DeesChips.prototype, "chipsAreRemovable", 2);
 __decorateClass([
   n4({
     type: Array
@@ -69388,8 +69439,29 @@ var DeesContextmenu = class extends DeesElement {
     super();
     this.menuItems = [];
   }
-  // STATIC
+  // Add a global event listener for the right-click context menu
+  static initializeGlobalListener() {
+    document.addEventListener("contextmenu", (event) => {
+      if (this.contextMenuDeactivated) {
+        return;
+      }
+      event.preventDefault();
+      let target = event.target;
+      DeesContextmenu.accumulatedMenuItems = [];
+      while (target) {
+        if (target.getContextMenuItems) {
+          DeesContextmenu.accumulatedMenuItems.push(...target.getContextMenuItems());
+        }
+        target = target.parentNode;
+      }
+      DeesContextmenu.openContextMenuWithOptions(event, DeesContextmenu.accumulatedMenuItems);
+    });
+  }
+  // allows opening of a contextmenu with options
   static async openContextMenuWithOptions(eventArg, menuItemsArg) {
+    if (this.contextMenuDeactivated) {
+      return;
+    }
     eventArg.preventDefault();
     eventArg.stopPropagation();
     const contextMenu = new DeesContextmenu();
@@ -69423,10 +69495,11 @@ var DeesContextmenu = class extends DeesElement {
     })}
         ${this.menuItems.length === 0 ? x`
             <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>
         ` : x``}
       </div>
@@ -69450,6 +69523,13 @@ var DeesContextmenu = class extends DeesElement {
 };
 // DEMO
 DeesContextmenu.demo = demoFunc3;
+// STATIC
+// This will store all the accumulated menu items
+DeesContextmenu.contextMenuDeactivated = false;
+DeesContextmenu.accumulatedMenuItems = [];
+/**
+ * STATIC STYLES
+ */
 DeesContextmenu.styles = [
   cssManager.defaultStyles,
   i`
@@ -69500,6 +69580,7 @@ __decorateClass([
 DeesContextmenu = __decorateClass([
   t4("dees-contextmenu")
 ], DeesContextmenu);
+DeesContextmenu.initializeGlobalListener();
 
 // ts_web/elements/dees-dataview-codebox.demo.ts
 var demoFunc4 = () => x` <style>
@@ -70749,6 +70830,8 @@ var DeesTable = class extends DeesElement {
         </div>
         <div class="headingSeparation"></div>
 
+        <dees-input-text></dees-input-text>
+
         <!-- the actual table -->
         <style></style>
         ${this.data.length > 0 ? (() => {