initial

2025-01-09 00:43:01 +01:00 · 2025-01-09 00:43:01 +01:00 · 8abdeba706
commit 8abdeba706
16 changed files with 9225 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,20 @@
+.nogit/
+
+# artifacts
+coverage/
+public/
+pages/
+
+# installs
+node_modules/
+
+# caches
+.yarn/
+.cache/
+.rpt2_cache
+
+# builds
+dist/
+dist_*/
+
+# custom
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,146 @@
+# gitzone ci_default_private
+image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+
+cache:
+  paths:
+    - .npmci_cache/
+  key: '$CI_BUILD_STAGE'
+
+stages:
+  - security
+  - test
+  - release
+  - metadata
+
+before_script:
+  - npm install -g @shipzone/npmci
+
+# ====================
+# security stage
+# ====================
+mirror:
+  stage: security
+  script:
+    - npmci git mirror
+  only:
+    - tags
+  tags:
+    - lossless
+    - docker
+    - notpriv
+
+auditProductionDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --production --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=prod --production
+  tags:
+    - lossless
+    - docker
+  allow_failure: true
+
+auditDevDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=dev
+  tags:
+    - lossless
+    - docker
+  allow_failure: true
+
+# ====================
+# test stage
+# ====================
+
+testStable:
+  stage: test
+  script:
+    - npmci npm prepare
+    - npmci node install stable
+    - npmci npm install
+    - npmci npm test
+  coverage: /\d+.?\d+?\%\s*coverage/
+  tags:
+    - lossless
+    - docker
+    - notpriv
+
+testBuild:
+  stage: test
+  script:
+    - npmci npm prepare
+    - npmci node install stable
+    - npmci npm install
+    - npmci command npm run build
+  coverage: /\d+.?\d+?\%\s*coverage/
+  tags:
+    - lossless
+    - docker
+    - notpriv
+
+release:
+  stage: release
+  script:
+    - npmci node install stable
+    - npmci npm publish
+  only:
+    - tags
+  tags:
+    - lossless
+    - docker
+    - notpriv
+
+# ====================
+# metadata stage
+# ====================
+codequality:
+  stage: metadata
+  allow_failure: true
+  only:
+    - tags
+  script:
+    - npmci command npm install -g typescript
+    - npmci npm prepare
+    - npmci npm install
+  tags:
+    - lossless
+    - docker
+    - priv
+
+trigger:
+  stage: metadata
+  script:
+    - npmci trigger
+  only:
+    - tags
+  tags:
+    - lossless
+    - docker
+    - notpriv
+
+pages:
+  stage: metadata
+  script:
+    - npmci node install lts
+    - npmci command npm install -g @gitzone/tsdoc
+    - npmci npm prepare
+    - npmci npm install
+    - npmci command tsdoc
+  tags:
+    - lossless
+    - docker
+    - notpriv
+  only:
+    - tags
+  artifacts:
+    expire_in: 1 week
+    paths:
+      - public
+  allow_failure: true
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "npm test",
+      "name": "Run npm test",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,26 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["/npmextra.json"],
+      "schema": {
+        "type": "object",
+        "properties": {
+          "npmci": {
+            "type": "object",
+            "description": "settings for npmci"
+          },
+          "gitzone": {
+            "type": "object",
+            "description": "settings for gitzone",
+            "properties": {
+              "projectType": {
+                "type": "string",
+                "enum": ["website", "element", "service", "npm", "wcc"]
+              }
+            }
+          }
+        }
+      }
+    }
+  ]
+}
--- a/html/index.html
+++ b/html/index.html
@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
--- a/html/index.ts
+++ b/html/index.ts
@ -0,0 +1,10 @@
+// dees tools
+import * as deesWccTools from '@design.estate/dees-wcctools';
+import * as deesDomTools from '@design.estate/dees-domtools';
+
+// elements and pages
+import * as elements from '../ts_web/elements/index.js';
+import * as pages from '../ts_web/pages/index.js';
+
+deesWccTools.setupWccTools(elements as any, pages);
+deesDomTools.elementBasic.setup();
--- a/npmextra.json
+++ b/npmextra.json
@ -0,0 +1,19 @@
+{
+  "gitzone": {
+    "projectType": "wcc",
+    "module": {
+      "githost": "gitlab.com",
+      "gitscope": "consentsoftware",
+      "gitrepo": "private/catalog",
+      "description": "webcomponents for consent.software widget",
+      "npmPackagename": "@consentsoftware_private/catalog",
+      "license": "UNLICENSED",
+      "projectDomain": "consent.software"
+    }
+  },
+  "npmci": {
+    "npmGlobalTools": [],
+    "npmAccessLevel": "private",
+    "npmRegistryUrl": "verdaccio.lossless.one"
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,46 @@
+{
+  "name": "@consent.software_private/catalog",
+  "version": "1.0.79",
+  "private": false,
+  "description": "webcomponents for consent.software widget",
+  "main": "dist_ts_web/index.js",
+  "typings": "dist_ts_web/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "test": "npm run build",
+    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element"
+  },
+  "author": "Lossless GmbH",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@consent.software/interfaces": "^1.0.11",
+    "@consent.software/webclient": "^1.0.14",
+    "@design.estate/dees-catalog": "^1.3.3",
+    "@design.estate/dees-domtools": "^2.1.1",
+    "@design.estate/dees-element": "^2.0.39",
+    "@push.rocks/smartdelay": "^3.0.5"
+  },
+  "devDependencies": {
+    "@design.estate/dees-wcctools": "^1.0.90",
+    "@git.zone/tsbuild": "^2.2.0",
+    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tswatch": "^2.0.37",
+    "@push.rocks/projectinfo": "^5.0.2"
+  },
+  "files": [
+    "ts/**/*",
+    "ts_web/**/*",
+    "dist/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
+    "dist_ts_web/**/*",
+    "assets/**/*",
+    "cli.js",
+    "npmextra.json",
+    "readme.md"
+  ],
+  "browserslist": [
+    "last 1 Chrome versions"
+  ]
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@ -0,0 +1,34 @@
+# @consentsoftware/private/catalog
+webcomponents for consent.software widget
+
+## Availabililty and Links
+* [npmjs.org (npm package)](https://www.npmjs.com/package/@consentsoftware_private/catalog)
+* [gitlab.com (source)](https://gitlab.com/consentsoftware/private/catalog)
+* [github.com (source mirror)](https://github.com/consentsoftware/private/catalog)
+* [docs (typedoc)](https://consentsoftware.gitlab.io/private/catalog/)
+
+## Status for master
+
+Status Category | Status Badge
+-- | --
+GitLab Pipelines | [![pipeline status](https://gitlab.com/consentsoftware/private/catalog/badges/master/pipeline.svg)](https://lossless.cloud)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/consentsoftware/private/catalog/badges/master/coverage.svg)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@consentsoftware_private/catalog)](https://lossless.cloud)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/consentsoftware/private/catalog)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@consentsoftware_private/catalog)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@consentsoftware_private/catalog)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@consentsoftware_private/catalog)](https://lossless.cloud)
+Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
+
+## Usage
+
+Use TypeScript for best in class intellisense
+For further information read the linked docs at the top of this readme.
+
+> UNLICENSED licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
+| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
+
+[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)
--- a/ts_web/00_commitinfo_data.ts
+++ b/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'
+}
--- a/ts_web/elements/consentsoftware-cookieconsent.ts
+++ b/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();
+  }
+
+}
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -0,0 +1 @@
+export * from './consentsoftware-cookieconsent.js';
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -0,0 +1 @@
+export * from './elements/index.js';
--- a/ts_web/tsconfig.json
+++ b/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
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node12"
+  }
+}
				`@ -0,0 +1 @@`
				`export * from './consentsoftware-cookieconsent.js';`