fix(core): update

ts_web/elements/index.ts

@@ -0,0 +1 @@
+export * from './lele-card';

ts_web/elements/lele-card.ts

@@ -0,0 +1,182 @@
+import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('lele-card')
+export class LeleCard extends LitElement {
+  public static demo = () => html`
+    <lele-card
+      imgsrc="https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg"
+      .links="${[
+        {
+          text: 'Visit Website',
+          url: 'https://lossless.com'
+        }
+      ]}"
+      .tabledata="${[
+        {
+          key: 'name',
+          value: 'Lossless GmbH'
+        },
+        {
+          key: 'domain',
+          value: 'https://lossless.com'
+        }
+      ]}"
+    ></lele-card>
+  `;
+
+  @property()
+  public heading: string = 'loading...';
+
+  @property()
+  public imgsrc: string = 'https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg';
+
+  @property({type: Array})
+  public links: {text: string; url: string}[] = [];
+
+  @property({type: Array})
+  public tabledata: {key: string, value: string}[] = [];
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+
+        :host(:hover) .mainbox {
+          border-top: 1px solid var(--lelecv-color-accent, #e4002b);
+        }
+
+        :host(:hover) .mainbox .topimage img {
+          filter: grayscale(0%);
+        }
+
+        .mainbox {
+          display: block;
+          position: relative;
+          max-width: 400px;
+          max-height: 600px; 
+          background: #212121;
+          transition: border-top 0.1s ease;
+          border-top: 1px solid #444;
+          box-sizing: border-box;
+          border-radius: 3px;
+          box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
+          overflow: hidden;
+          min-height: 100px;
+          color: #ccc;
+        }
+
+        .topimage {
+          position: relative;
+          width: 100%;
+        }
+
+        .topimage img {
+          display: block;
+          width: 100%;
+          height: auto;
+          min-height: 20px;
+          transition: all 0.1s;
+          filter: grayscale(100%);
+        }
+
+        .heading {
+          font-size: 25px;
+          font-weight: 100;
+          position: absolute;
+          padding: 10px;
+          top: 55px;
+          left: 0px;
+        }
+
+        .content {
+          position: relative;
+          padding: 10px;
+          min-height: 100px;
+          box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
+          border-top: 1px #444 dotted;
+          border-bottom: 1px #444 dotted;
+        }
+
+        .links {
+          position: relative;
+          height: 35px;
+          text-align: right;
+        }
+        
+        .link {
+          display: inline-block; 
+          padding: 0px 5px;
+          line-height: 35px;
+          height: 35px;
+          font-size: 15px;
+        }
+
+        a {
+          transition: color 0.1s ease;
+          text-decoration: none;
+          color: #888;
+        }
+
+        a:hover {
+          color: #CCC;
+        }
+
+        .tableline {
+          margin-left: -5px;
+          margin-right: -5px;
+          padding: 10px;
+          color: #cccccc;
+          font-size: 14px;
+        }
+        .tableline:hover {
+          color: #ffffff;
+        }
+
+        .tableline:nth-child(even) {
+          background: rgba(0,0,0,0.2);
+        }
+        .tableline .key {
+          font-family: 'Roboto Mono', monospace;
+          font-size: 12px;
+          color: #bbbbbb;
+          font-weight: bold;
+        }
+        .tableline .value {
+          font-family: 'Roboto Mono', monospace;
+        }
+        
+      </style>
+      <div class="mainbox">
+        <div class="topimage"><img src="${this.imgsrc}" width="100" height="100" loading="lazy"></div>
+        <div class="content">
+          <slot>
+            ${this.tabledata ? this.tabledata.map(datapoint => html`
+              <div class="tableline">
+                <div class="key">
+                  ${datapoint.key}:
+                </div>
+                <div class="value">
+                  ${datapoint.value}
+                </div>
+              </div>
+            `) : null}
+          </slot>
+        </div>
+        <div class="links">
+          ${this.links.map(linkArg => {
+            return html`
+              <div class="link"><a target="_blank" href="${linkArg.url}">${linkArg.text}</a></div>
+            `;
+          })}
+        </div>
+      </div>
+
+    `;
+  }
+}

ts_web/index.ts

@@ -0,0 +1,8 @@
+export * from './elements/index';
+
+import * as themelogic from './themelogic';
+
+export {
+  themelogic
+};
+

ts_web/themelogic/index.ts

@@ -0,0 +1,5 @@
+import * as leleCv from './lelecv';
+
+export {
+  leleCv
+}

ts_web/themelogic/lelecv.ts

@@ -0,0 +1,3 @@
+
+export const backgroundAccent = '#303f9f';
+export const pageWidth = '1200px';

ts_web/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "lib": ["es2017", "dom"],
+    "declaration": true,
+    "inlineSources": true,
+    "inlineSourceMap": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "dist/",
+    "skipLibCheck": true,
+    "experimentalDecorators": true
+  }
+}