initial

ts_web/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@consent.software_private/catalog',
+  version: '1.0.79',
+  description: 'webcomponents for consent.software widget'
+}

ts_web/elements/consentsoftware-cookieconsent.ts

@@ -0,0 +1,242 @@
+import { customElement, DeesElement, property, html, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import '@design.estate/dees-catalog';
+
+import * as csInterfaces from '@consent.software/interfaces';
+import * as csWebclient from '@consent.software/webclient';
+
+import { delayFor } from '@push.rocks/smartdelay';
+
+@customElement('consentsoftware-cookieconsent')
+export class ConsentsoftwareCookieconsent extends DeesElement {
+  public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
+
+  public csWebclientInstance = new csWebclient.CsWebclient();
+  public csWebclientRan = false;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+    // lets determine wether to show the cookieconsent dialog or not
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+        * {
+          box-sizing: border-box;
+        }
+
+        .content {
+          max-width: 1100px;
+          margin: auto;
+          line-height: var(--cookieconsent-height);
+          padding-bottom: 20px;
+        }
+
+
+        .text-container {
+          line-height: var(--cookieconsent-height);
+          display: grid;
+          grid-template-columns: 30px auto;
+        }
+
+        .text-container .icon-container {
+          height: var(--cookieconsent-height);
+          display: inline-block;
+          color: #4496F5;
+        }
+
+        .text-container .toptext {
+
+        }
+
+        .text-container a {
+          color: ${cssManager.bdTheme('#333', '#fff')};
+        }
+
+        .button-container {
+          display: grid;
+          grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
+          grid-column-gap: 20px;
+          grid-row-gap: 20px;
+        }
+
+        .info-container {
+          color: ${cssManager.bdTheme('#444', '#CCC')};
+          text-align: center;
+        }
+
+        .info-container a {
+          text-decoration: underline;
+          color: ${cssManager.bdTheme('#444', '#CCC')};
+          transition: color 0.2s;
+        }
+
+        .info-container a:hover {
+          color: #ffffff;
+        }
+
+
+        .consent-button {
+          border-radius: 3px;
+          background: ${cssManager.bdTheme('#ffffff', '#252525')};
+          box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', '0px 0px 5px rgba(0,0,0,0.4)')};
+          padding: 10px;
+          line-height: 30px;
+          text-align: center;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+
+        .consent-button:hover {
+          background: ${cssManager.bdTheme('#f2f2f2', '#222222')};
+        }
+
+        .consent-button:first-child {
+          margin-left: 0px;
+        }
+
+        ${cssManager.cssForNotebook(css`
+          .content {
+            padding-left: 30px;
+            padding-right: 30px;
+          }
+        `)}
+
+        ${cssManager.cssForTablet(css`
+          :host {
+            text-align: center;
+          }
+
+          .content {
+            padding-top: 20px;
+          }
+
+          .icon-container {
+            margin-top: -10px;
+            line-height: 50px;
+            font-size: 40px;
+          }
+
+          .text-container {
+            line-height: 20px;
+            margin-bottom: 10px;
+            grid-template-columns: 50px auto;
+          }
+
+          .button-container {
+            grid-template-columns: ${cssManager.cssGridColumns(2, 20)};
+          }
+        `)}
+
+        ${cssManager.cssForPhablet(css`
+          .button-container {
+            grid-template-columns: 100%;
+          }
+        `)}
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Roboto', sans-serif;
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          background: ${cssManager.bdTheme('#eeeeee', '#111')};
+          box-shadow: ${cssManager.bdTheme('0px 0px 15px rgba(0,0,0,0.4)', '0px -30px 30px rgba(0,0,0,1)')};
+          position: fixed;
+          bottom: 0px;
+          border-top: ${cssManager.bdTheme('none', '1px solid  #e4002b')};
+          left: 0px;
+          width: 100%;
+          box-sizing: border-box;
+          --cookieconsent-height: 60px;
+          min-height: var(--cookieconsent-height);
+          margin-bottom: -${this.heightPixels}px;
+          will-change: transform; /* make sure it is rendered efficiently */
+          z-index: 1000; /* the standard z-index for fixed elements at Lossless */
+        }
+
+        :host([show=false]) {
+          display: none;
+        }
+
+        :host([show=true]) {
+          display: block;
+          transition: margin-bottom 0.3s ease;
+        }
+
+        :host([gotIt=true]) {
+          margin-bottom: -${this.heightPixels + 1}px;
+        }
+
+        :host([gotIt=false]) {
+          margin-bottom: 0px;
+        }
+      </style>
+      <div class="content">
+        <div class="text-container">
+          <div class="icon-container">
+            <dees-icon iconName="info"></dees-icon>
+          </div>
+          <div class="toptext">This page uses cookies. Please review our <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a> and choose which cookie level you are willing to accept.</div>
+        </div>
+        <div class="button-container">
+          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional']);}}>Functional cookies</div>
+          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics']);}}>Analytics cookies</div>
+          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing']);}}>Marketing cookies</div>
+          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']);}}>All cookies</div>
+        </div>
+        <div class="info-container">
+          consent management powered by <a href="https://consent.software">consent.software</a>
+        </div>
+      </div>
+    `;
+  }
+
+  @property({type: Number})
+  public heightPixels: number = 60;
+
+  public async connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('gotIt', 'true');
+    const cookieLevel = await this.csWebclientInstance.getCookieLevels();
+    if(!cookieLevel) {
+      delayFor(300).then(() => {
+        this.setAttribute('show', 'true');
+        this.setAttribute('gotIt', 'false');
+      });
+    } else {
+      this.setAttribute('show', 'false');
+      this.setAttribute('gotIt', 'true');
+    }
+  }
+
+  public firstUpdated() {
+    this.heightPixels = this.shadowRoot.host.clientHeight;
+  }
+
+  public async updated() {
+    console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
+    const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
+    if (!this.csWebclientRan && acceptedCookieLevels) {
+      this.csWebclientRan = true;
+      await this.csWebclientInstance.getAndRunConsentTuples();
+    }
+
+  }
+
+  
+  private async setLevel (event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
+    console.log(`Set level to ${levelsArg}`);
+    await this.csWebclientInstance.setCookieLevels(levelsArg);
+    this.setAttribute('gotIt', 'true');
+    await delayFor(300);
+    this.setAttribute('show', 'false');
+    this.updated();
+  }
+
+}

ts_web/elements/index.ts

@@ -0,0 +1 @@
+export * from './consentsoftware-cookieconsent.js';

ts_web/index.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

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
+  }
+}