@design.estate/dees-catalog 1.0.226 → 1.0.228

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.226",
+  "version": "1.0.228",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,18 +15,18 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.51",
-    "@design.estate/dees-element": "^2.0.29",
+    "@design.estate/dees-domtools": "^2.0.55",
+    "@design.estate/dees-element": "^2.0.31",
     "@design.estate/dees-wcctools": "^1.0.81",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@push.rocks/smarti18n": "^1.0.3",
+    "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.0.3",
     "@push.rocks/smartstring": "^4.0.9",
-    "@tsclass/tsclass": "^4.0.43",
-    "highlight.js": "11.8.0",
+    "@tsclass/tsclass": "^4.0.46",
+    "highlight.js": "11.9.0",
     "ibantools": "^4.3.5",
     "pdfjs-dist": "^3.11.174"
   },
@@ -37,7 +37,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.8.3"
+    "@types/node": "^20.8.7"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

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

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

@@ -0,0 +1,28 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <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>
+`;

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,23 @@ 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;
+        position: relative;
+        overflow: hidden;
       }
 
       .chip:hover {
@@ -79,6 +83,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 +100,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 +116,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-form.ts

@@ -45,7 +45,7 @@ export class DeesForm extends DeesElement {
   public static demo = demoFunc;
 
   public name: string = 'myform';
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
   public readyDeferred = domtools.plugins.smartpromise.defer();
 
   public render(): TemplateResult {

package/ts_web/elements/dees-input-checkbox.ts

@@ -22,7 +22,7 @@ export class DeesInputCheckbox extends DeesElement {
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

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

@@ -20,7 +20,7 @@ export class DeesInputDropdown extends DeesElement {
   `
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-fileupload.ts

@@ -22,7 +22,7 @@ export class DeesInputFileupload extends DeesElement {
   public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-iban.ts

@@ -48,7 +48,7 @@ export class DeesInputIban extends DeesElement {
   })
   public value = '';
 
-  public changeSubject = new domtools.rxjs.Subject<DeesInputIban>();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputIban>();
 
   public render(): TemplateResult {
     return html`

package/ts_web/elements/dees-input-quantityselector.ts

@@ -12,7 +12,7 @@ export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property()
   public label: string = 'Label';

package/ts_web/elements/dees-input-radio.ts

@@ -12,7 +12,7 @@ export class DeesInputRadio extends DeesElement {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-text.ts

@@ -24,7 +24,7 @@ export class DeesInputText extends DeesElement {
   `;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputText>();
 
   @property({
     type: String,

package/ts_web/elements/dees-table.ts

@@ -113,7 +113,7 @@ export class DeesTable<T> extends DeesElement {
     return this.data;
   }
   set value(valueArg) {}
-  public changeSubject = new domtools.rxjs.Subject<DeesTable<T>>();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
   @property({