1.0.32

package.json

@@ -1,28 +1,34 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.20",
+  "version": "1.0.32",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "scripts": {
-    "test": "npm run build",
+    "test": "tstest test/ --web",
     "build": "tsbuild element && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.47",
+    "@designestate/dees-domtools": "^1.0.84",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@designestate/dees-element": "^1.0.10",
-    "lit-element": "^2.4.0",
+    "@designestate/dees-wcctools": "^1.0.54",
-    "typescript": "^4.0.2"
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "typescript": "^4.1.5"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.25",
     "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tstest": "^1.0.52",
     "@gitzone/tswatch": "^1.0.50",
     "@pushrocks/projectinfo": "^4.0.5",
+    "@pushrocks/tapbundle": "^3.2.14",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"
   },

test/test.browser.ts

@@ -0,0 +1,12 @@
+import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
+
+import * as deesCatalog from '../ts_web';
+
+tap.test('should create a working button', async () => {
+  const button: deesCatalog.DeesButton = await webhelpers.fixture(
+    webhelpers.html`<dees-button></dees-button>`
+  );
+  expect(button).to.be.instanceOf(deesCatalog.DeesButton);
+});
+
+tap.start();

ts_web/elements/dees-button.ts

@@ -1,9 +1,17 @@
-import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button': DeesButton;
+  }
+}
+
 @customElement('dees-button')
-export class DeesButton extends LitElement {
+export class DeesButton extends DeesElement {
+  public static demo = () => html`<dees-button></dees-button>`
+
   @property()
   text: string;
 
@@ -13,9 +21,6 @@ export class DeesButton extends LitElement {
   @property()
   disabled = false;
 
-  @property()
-  isQuote = false;
-
   @property()
   isHidden = false;
 
@@ -43,15 +48,14 @@ export class DeesButton extends LitElement {
           font-size: 14px;
           display: block;
           text-align: center;
-          background: #333;
+          background: ${this.goBright ? '#eee' : '#333'};
-          border-top: 1px solid #444;
+          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
           border-radius: 2px;
           line-height: 40px;
           padding: 0px 10px;
           min-width: 100px;
-          color: ${this.isQuote ? '#ffffff' : '#333333' };
           user-select: none;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : ' #ccc'};
         }
 
         .button:hover {

ts_web/elements/dees-form-submit.ts

@@ -2,6 +2,12 @@ import { customElement, html, LitElement } from 'lit-element';
 
 import {DeesForm} from './dees-form';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form-submit': DeesFormSubmit;
+  }
+}
+
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends LitElement {
 

ts_web/elements/dees-form.ts

@@ -5,14 +5,22 @@ import { DeesInputText } from './dees-input-text';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector';
 import { DeesInputRadio } from './dees-input-radio';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form': DeesForm;
+  }
+}
+
 @customElement('dees-form')
 export class DeesForm extends LitElement {
   public static demo = () => html`
-    <dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
+    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
-      <dees-input-text key="hello1"></dees-input-text>
+      <dees-input-text key="hello1" label="a text"></dees-input-text>
-      <dees-input-text key="hello2"></dees-input-text>
+      <dees-input-text key="hello2" label="also a text"></dees-input-text>
+      <dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
       <dees-form-submit>Submit</dees-form-submit>
-    </dees-form>`;
+    </dees-form>
+    `;
 
   public name: string = 'myform';
 

ts_web/elements/dees-icon.ts

@@ -0,0 +1,124 @@
+import { LitElement, html, property, customElement } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFacebook,
+  faGoogle,
+  faLinkedin,
+  faMedium,
+  faSlackHash,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
+
+import {} from '@fortawesome/free-regular-svg-icons';
+import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+  // normal
+  | 'desktop'
+  | 'rss'
+  // brands
+  | 'facebook'
+  | 'google'
+  | 'twitter'
+  | 'linkedin'
+  | 'medium'
+  | 'slack'
+  | 'users';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
+  facebook: faFacebook,
+  google: faGoogle,
+  linkedin: faLinkedin,
+  medium: faMedium,
+  slack: faSlackHash,
+  twitter: faTwitter,
+  users: faUsers,
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-icon': DeesIcon;
+  }
+}
+
+@customElement('dees-icon')
+export class DeesIcon extends LitElement {
+  public static demo = () => html`
+    <div style="background: #fff; padding: 10px;">
+      <dees-icon iconName="visibility"></dees-icon>
+      <dees-icon brandName="facebook"></dees-icon>
+    </div>
+  `;
+
+  @property()
+  public iconName: string;
+
+  @property()
+  public brandName: TFontAwesomeIcon;
+
+  @property()
+  public svgSize: number = 20;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render() {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          display: block;
+          line-height: inherit;
+          font-size: inherit;
+        }
+        #iconContainer svg {
+          display: inline-block;
+          height: ${this.svgSize}px;
+        }
+        .material-icons {
+          font-family: 'Material Icons';
+          font-weight: normal;
+          font-style: normal;
+          line-height: inherit;
+          font-size: inherit;
+          display: inline-block;
+          line-height: inherit;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+
+          /* Support for all WebKit browsers. */
+          -webkit-font-smoothing: antialiased;
+          /* Support for Safari and Chrome. */
+          text-rendering: optimizeLegibility;
+
+          /* Support for Firefox. */
+          -moz-osx-font-smoothing: grayscale;
+
+          /* Support for IE. */
+          font-feature-settings: 'liga';
+        }
+      </style>
+      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+    `;
+  }
+
+  firstUpdated() {
+    if (this.brandName && !this.iconName) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+        faIcons[this.brandName]
+      ).html[0];
+    }
+  }
+}

ts_web/elements/dees-input-checkbox.ts

@@ -1,8 +1,14 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-checkbox': DeesInputCheckbox;
+  }
+}
+
 @customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends LitElement {
+export class DeesInputCheckbox extends DeesElement {
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
   @property()
@@ -33,11 +39,11 @@ export class DeesInputCheckbox extends LitElement {
           display: grid;
           grid-template-columns: 25px auto;
           padding: 5px 0px;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .maincontainer:hover {
-          color: #fff;
+          ${this.goBright ? '#000' : '#ccc'};
         }
 
         .label {
@@ -55,12 +61,12 @@ export class DeesInputCheckbox extends LitElement {
         .checkbox {
           transition: all 0.1s;
           box-sizing: border-box;
-          border: 1px solid #999;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
           border-radius: 2px;
           height: 24px;
           width: 24px;
           display: inline-block;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
         }
 
         .checkbox.selected {

ts_web/elements/dees-input-dropdown.ts

@@ -2,8 +2,16 @@ import { customElement, LitElement, TemplateResult, property, html } from 'lit-e
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-dropdown': DeesInputDropdown;
+  }
+}
+
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends LitElement {
+  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
+
   @property()
   public label: string = 'Label';
 

ts_web/elements/dees-input-quantityselector.ts

@@ -1,8 +1,14 @@
-import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-quantityselector': DeesInputQuantitySelector;
+  }
+}
+
 @customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends LitElement {
+export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
   @property()
@@ -32,8 +38,13 @@ export class DeesInputQuantitySelector extends LitElement {
           line-height: 40px;
           padding: 0px;
           min-width: 100px;
-          color: #CCC;
+          color: ${this.goBright ? '#666' : '#CCC'};
-          border: 1px solid #CCC;
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+        }
+
+        .mainContainer:hover {
+          color: ${this.goBright ? '#333' : '#fff'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
         }
 
         .minus {
@@ -57,10 +68,7 @@ export class DeesInputQuantitySelector extends LitElement {
           text-align: center;
         }
 
-        .mainContainer:hover {
+        
-          color: #fff;
-          border: 1px solid #fff;
-        }
       </style>
 
       <div class="maincontainer">

ts_web/elements/dees-input-radio.ts

@@ -1,5 +1,11 @@
 import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-radio': DeesInputRadio;
+  }
+}
+
 @customElement('dees-input-radio')
 export class DeesInputRadio extends LitElement {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;

ts_web/elements/dees-input-text.ts

@@ -1,7 +1,13 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-text': DeesInputText;
+  }
+}
 
 @customElement('dees-input-text')
-export class DeesInputText extends LitElement {
+export class DeesInputText extends DeesElement {
   public static demo = () => html`<dees-input-text></dees-input-text>`;
 
   @property()
@@ -28,7 +34,7 @@ export class DeesInputText extends LitElement {
         }
 
         .maincontainer {
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .label {
@@ -38,10 +44,11 @@ export class DeesInputText extends LitElement {
 
         input {
           margin-top: 5px;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
-          border: none;
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
-          border-top: 1px solid #444;
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
-          border-bottom: 1px solid #333;
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
           padding-left:10px;
           padding-right: 10px;
           border-radius: 2px;

ts_web/elements/dees-toast.ts

@@ -2,6 +2,12 @@ import { customElement, LitElement, TemplateResult, html } from 'lit-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-toast': DeesToast;
+  }
+}
+
 @customElement('dees-toast')
 export class DeesToast extends LitElement {
 

ts_web/elements/dees-updater.ts

@@ -0,0 +1,47 @@
+import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+
+import './dees-windowlayer';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-updater': DeesUpdater;
+  }
+}
+
+@customElement('dees-updater')
+export class DeesUpdater extends LitElement {
+  public static demo = () => html`<dees-updater ></dees-updater>`;
+
+  @property()
+  currentVersion: string;
+
+  @property()
+  updatedVersion: string;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        .modalContainer {
+          background: #333333;
+          margin: auto;
+          height: 200px;
+          width: 800px;
+          margin-top: 80px;
+          border-radius: 10px;
+        }
+      </style>
+      <dees-windowlayer>
+        <div class="modalContainer"></div>
+      </dees-windowlayer>>
+    `;
+  }
+}

ts_web/elements/dees-windowlayer.ts

@@ -0,0 +1,50 @@
+import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowlayer': DeesWindowLayer;
+  }
+}
+
+@customElement('dees-windowlayer')
+export class DeesWindowLayer extends LitElement {
+  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        .windowOverlay {
+          transition: all 1s;
+          position: fixed;
+          top: 0px;
+          left: 0px;
+          height: 100vh;
+          width: 100vw;
+          background: rgba(0, 0, 0, 0.0);
+          backdrop-filter: blur(0px);
+        }
+        .visible {
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: blur(3px);
+        }
+      </style>
+      <div class="windowOverlay">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
+    }, 100);
+  }
+}

ts_web/elements/index.ts

@@ -1,9 +1,12 @@
 export * from './dees-button';
 export * from './dees-form';
 export * from './dees-form-submit';
+export * from './dees-icon';
 export * from './dees-input-checkbox';
 export * from './dees-input-dropdown';
 export * from './dees-input-quantityselector';
 export * from './dees-input-radio';
 export * from './dees-input-text';
 export * from './dees-toast';
+export * from './dees-updater';
+export * from './dees-windowlayer';