@design.estate/dees-catalog 1.0.229 → 1.0.230

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '1.0.228',
+    version: '1.0.229',
     description: 'website for lossless.com'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxTQUFTO0lBQ2xCLFdBQVcsRUFBRSwwQkFBMEI7Q0FDeEMsQ0FBQSJ9

package/dist_ts_web/elements/dees-chips.d.ts

@@ -11,6 +11,7 @@ type Tag = {
 export declare class DeesChips extends DeesElement {
     static demo: () => TemplateResult<1>;
     selectionMode: 'none' | 'single' | 'multiple';
+    chipsAreRemovable: boolean;
     selectableChips: Tag[];
     selectedChip: Tag;
     selectedChips: Tag[];
@@ -20,5 +21,6 @@ export declare class DeesChips extends DeesElement {
     firstUpdated(): Promise<void>;
     private isSelected;
     selectChip(chip: Tag): Promise<void>;
+    removeChip(chipToRemove: Tag): void;
 }
 export {};

package/dist_ts_web/elements/dees-chips.demo.js

@@ -21,6 +21,7 @@ export const demoFunc = () => html `
     ></dees-chips>
     <dees-chips
       selectionMode="single"
+      chipsAreRemovable
       .selectableChips=${[
     { key: 'account1', value: 'Payment Account 1' },
     { key: 'account2', value: 'PaymentAccount2' },
@@ -37,4 +38,4 @@ export const demoFunc = () => html `
     ></dees-chips>
   </div>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtY2hpcHMuZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7eUJBY1Q7SUFDakIsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtJQUMvQyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFO0lBQzdDLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7Q0FDaEQ7Ozs7eUJBSWtCO0lBQ2pCLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7SUFDL0MsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRTtJQUM3QyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO0NBQ2hEOzs7O3lCQUlrQjtJQUNqQixFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO0lBQy9DLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUU7SUFDN0MsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtDQUNoRDs7O0NBR04sQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtY2hpcHMuZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7eUJBY1Q7SUFDakIsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtJQUMvQyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFO0lBQzdDLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7Q0FDaEQ7Ozs7O3lCQUtrQjtJQUNqQixFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO0lBQy9DLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUU7SUFDN0MsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtDQUNoRDs7Ozt5QkFJa0I7SUFDakIsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtJQUMvQyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFO0lBQzdDLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7Q0FDaEQ7OztDQUdOLENBQUMifQ==

package/dist_ts_web/elements/dees-chips.js

@@ -15,6 +15,7 @@ export let DeesChips = class DeesChips extends DeesElement {
     constructor() {
         super();
         this.selectionMode = 'single';
+        this.chipsAreRemovable = false;
         this.selectableChips = [];
         this.selectedChip = null;
         this.selectedChips = [];
@@ -22,7 +23,6 @@ export let DeesChips = class DeesChips extends DeesElement {
     static { this.styles = [
         cssManager.defaultStyles,
         css `
-
       :host {
         display: block;
         box-sizing: border-box;
@@ -46,20 +46,20 @@ export let DeesChips = 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;
@@ -67,17 +67,41 @@ export let DeesChips = 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;
+      }
     `,
     ]; }
     render() {
         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.stopPropagation(); // prevent the selectChip event from being triggered
+                this.removeChip(chip);
+            }}
+                      .iconFA=${'xmark'}
+                    ></dees-icon>
+                  `
+            : html ``}
+            </div>
+          `)}
       </div>
     `;
     }
@@ -92,7 +116,7 @@ export let DeesChips = class DeesChips extends DeesElement {
             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);
         }
     }
     async selectChip(chip) {
@@ -111,7 +135,7 @@ export let DeesChips = class DeesChips extends DeesElement {
         }
         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];
@@ -120,6 +144,18 @@ export let DeesChips = class DeesChips extends DeesElement {
         }
         console.log(this.selectedChips);
     }
+    removeChip(chipToRemove) {
+        // 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();
+    }
 };
 __decorate([
     property(),
@@ -127,7 +163,13 @@ __decorate([
 ], DeesChips.prototype, "selectionMode", void 0);
 __decorate([
     property({
-        type: Array
+        type: Boolean,
+    }),
+    __metadata("design:type", Boolean)
+], DeesChips.prototype, "chipsAreRemovable", void 0);
+__decorate([
+    property({
+        type: Array,
     }),
     __metadata("design:type", Array)
 ], DeesChips.prototype, "selectableChips", void 0);
@@ -137,7 +179,7 @@ __decorate([
 ], DeesChips.prototype, "selectedChip", void 0);
 __decorate([
     property({
-        type: Array
+        type: Array,
     }),
     __metadata("design:type", Array)
 ], DeesChips.prototype, "selectedChips", void 0);
@@ -145,4 +187,4 @@ DeesChips = __decorate([
     customElement('dees-chips'),
     __metadata("design:paramtypes", [])
 ], DeesChips);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWNoaXBzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsSUFBSSxFQUNKLFdBQVcsRUFDWCxRQUFRLEVBRVIsVUFBVSxFQUNWLEdBQUcsRUFFSCxTQUFTLEdBQ1YsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVd6QyxXQUFNLFNBQVMsR0FBZixNQUFNLFNBQVUsU0FBUSxXQUFXO2FBQzFCLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTtJQW1COUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWpCSCxrQkFBYSxHQUFtQyxRQUFRLENBQUM7UUFLekQsb0JBQWUsR0FBVSxFQUFFLENBQUM7UUFHNUIsaUJBQVksR0FBUSxJQUFJLENBQUM7UUFLekIsa0JBQWEsR0FBVSxFQUFFLENBQUM7SUFLakMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7Ozs7Ozs7Ozs7OztzQkFZZSxVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGdCQUFnQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW1DdkU7S0FDRixBQWxEbUIsQ0FrRGxCO0lBRUssTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFBOztVQUVMLElBQUksQ0FBQyxlQUFlLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFBO3dCQUN2QixHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxFQUFFO2NBQzVGLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSx3QkFBd0IsSUFBSSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLOztTQUVsRixDQUFDOztLQUVMLENBQUM7SUFDSixDQUFDO0lBRU0sS0FBSyxDQUFDLFlBQVk7UUFDdkIsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxRQUFRLENBQUM7WUFDNUIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVPLFVBQVUsQ0FBQyxJQUFTO1FBQzFCLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxRQUFRLEVBQUU7WUFDbkMsT0FBTyxJQUFJLENBQUMsWUFBWSxFQUFFLEdBQUcsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDO1NBQzVDO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDdkU7SUFDSCxDQUFDO0lBRU0sS0FBSyxDQUFDLFVBQVUsQ0FBQyxJQUFTO1FBQy9CLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxNQUFNLEVBQUU7WUFDakMsT0FBTztTQUNSO1FBRUQsSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLFFBQVEsRUFBRTtZQUNuQyxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUU7Z0JBQ3pCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO2dCQUN6QixJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQzthQUN6QjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztnQkFDekIsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO2FBQzdCO1NBQ0Y7YUFBTSxJQUFHLElBQUksQ0FBQyxhQUFhLEtBQUssVUFBVSxFQUFFO1lBQzNDLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDekIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ3ZGO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLENBQUM7YUFDcEQ7WUFDRCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7U0FDdEI7UUFDRCxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNsQyxDQUFDOztBQXpITTtJQUROLFFBQVEsRUFBRTs7Z0RBQ3FEO0FBS3pEO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLEtBQUs7S0FDWixDQUFDOztrREFDaUM7QUFHNUI7SUFETixRQUFRLEVBQUU7OytDQUNxQjtBQUt6QjtJQUhOLFFBQVEsQ0FBQztRQUNSLElBQUksRUFBRSxLQUFLO0tBQ1osQ0FBQzs7Z0RBQytCO0FBakJ0QixTQUFTO0lBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7O0dBQ2YsU0FBUyxDQThIckIifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWNoaXBzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsSUFBSSxFQUNKLFdBQVcsRUFDWCxRQUFRLEVBRVIsVUFBVSxFQUNWLEdBQUcsRUFFSCxTQUFTLEdBQ1YsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVd6QyxXQUFNLFNBQVMsR0FBZixNQUFNLFNBQVUsU0FBUSxXQUFXO2FBQzFCLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTtJQXVCOUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQXJCSCxrQkFBYSxHQUFtQyxRQUFRLENBQUM7UUFLekQsc0JBQWlCLEdBQVksS0FBSyxDQUFDO1FBS25DLG9CQUFlLEdBQVUsRUFBRSxDQUFDO1FBRzVCLGlCQUFZLEdBQVEsSUFBSSxDQUFDO1FBS3pCLGtCQUFhLEdBQVUsRUFBRSxDQUFDO0lBSWpDLENBQUM7YUFFYSxXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7OztzQkFXZSxVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGdCQUFnQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0E2Q3ZFO0tBQ0YsQUEzRG1CLENBMkRsQjtJQUVLLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTs7VUFFTCxJQUFJLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FDeEIsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQTs7dUJBRUQsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUM7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

package/dist_watch/bundle.js

@@ -69095,6 +69095,7 @@ var demoFunc2 = () => x`
     ></dees-chips>
     <dees-chips
       selectionMode="single"
+      chipsAreRemovable
       .selectableChips=${[
   { key: "account1", value: "Payment Account 1" },
   { key: "account2", value: "PaymentAccount2" },
@@ -69117,6 +69118,7 @@ var DeesChips = class extends DeesElement {
   constructor() {
     super();
     this.selectionMode = "single";
+    this.chipsAreRemovable = false;
     this.selectableChips = [];
     this.selectedChip = null;
     this.selectedChips = [];
@@ -69124,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>
     `;
   }
@@ -69167,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;
@@ -69196,20 +69219,20 @@ DeesChips.styles = [
         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;
@@ -69217,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