1.0.230

package.json

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-chips.demo.ts

@@ -22,6 +22,7 @@ export const demoFunc = () => html`
     ></dees-chips>
     <dees-chips
       selectionMode="single"
+      chipsAreRemovable
       .selectableChips=${[
         { key: 'account1', value: 'Payment Account 1' },
         { key: 'account2', value: 'PaymentAccount2' },

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,10 +42,9 @@ 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;
@@ -73,20 +76,20 @@ export class DeesChips extends DeesElement {
         margin-bottom: 4px;
         position: relative;
         overflow: hidden;
-        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
+        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;
@@ -94,18 +97,44 @@ export class DeesChips extends DeesElement {
         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;
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
       <div class="mainbox">
-        ${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>
-        `)}
+        ${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}
+              ${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>
     `;
   }
@@ -121,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);
     }
   }
 
@@ -138,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];
       }
@@ -148,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();
+  }
 }