fix(core): update

license

@@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+copies or substantial portions of the Software. You agree to being mentioned
+as reference by Lossless GmbH. This includes the use of your entity logos
+or profile picture by Lossless GmbH on websites and readme's, also on third party
+pages like gitlab.com or github.com.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

package.json

@@ -13,9 +13,9 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.94",
-    "@designestate/dees-element": "^1.0.23",
-    "@designestate/dees-wcctools": "^1.0.57",
+    "@designestate/dees-domtools": "^1.0.96",
+    "@designestate/dees-element": "^1.0.26",
+    "@designestate/dees-wcctools": "^1.0.59",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
@@ -23,9 +23,9 @@
     "typescript": "^4.4.3"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.27",
-    "@gitzone/tsbundle": "^1.0.87",
-    "@gitzone/tstest": "^1.0.57",
+    "@gitzone/tsbuild": "^2.1.28",
+    "@gitzone/tsbundle": "^1.0.88",
+    "@gitzone/tstest": "^1.0.59",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "@pushrocks/tapbundle": "^3.2.14",

ts_web/elements/dees-chips.ts

@@ -0,0 +1,123 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chips': DeesChips;
+  }
+}
+
+@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>
+    
+  `;
+
+  @property()
+  public selectionMode: 'single' | 'multiple' = 'single';
+
+  @property({
+    type: Array
+  })
+  public selectableChips: string[] = [];
+
+  @property()
+  public selectedChip: string = null;
+
+  @property({
+    type: Array
+  })
+  public selectedChips: string[] = [];
+  
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .mainbox {
+
+      }
+
+      .chip {
+        background: #494949;
+        display: inline-block;
+        padding: 8px 12px;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 30px;
+        margin-right: 3px;
+        margin-bottom: 7px;
+      }
+
+      .chip:hover {
+        background: #666666;
+        cursor: pointer; 
+      }
+
+      .chip.selected {
+        background: #00A3FF;
+      }
+      
+    `,
+  ];
+
+  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}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+
+  public async selectChip(chipArg: string) {
+    if (this.selectionMode === 'single') {
+      if (this.selectedChip === chipArg) {
+        this.selectedChip = null;
+        this.selectedChips = [];
+      } else {
+        this.selectedChip = chipArg;
+        this.selectedChips = [chipArg];
+      }
+    } else if(this.selectionMode === 'multiple') {
+      if (this.selectedChips.includes(chipArg)) {
+        this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
+      } else {
+        this.selectedChips.push(chipArg);
+      }
+      this.requestUpdate();
+    }
+    console.log(this.selectedChips);
+  }
+}

ts_web/elements/index.ts

@@ -1,4 +1,5 @@
 export * from './dees-button';
+export * from './dees-chips';
 export * from './dees-form';
 export * from './dees-form-submit';
 export * from './dees-icon';