catalog/ts_web/elements/consentsoftware-cookieconsent.ts

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();
  }

}