-
-
+
`;
}
- @property({type: Number})
- public heightPixels: number = 60;
-
+ /**
+ * Called when the element is inserted into the DOM.
+ */
public async connectedCallback() {
super.connectedCallback();
- this.setAttribute('gotIt', 'true');
+ this.updateTheme();
+
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
- if(!cookieLevel) {
+ if (!cookieLevel) {
delayFor(300).then(() => {
this.setAttribute('show', 'true');
this.setAttribute('gotIt', 'false');
@@ -215,28 +271,46 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
}
}
- public firstUpdated() {
- this.heightPixels = this.shadowRoot.host.clientHeight;
- }
+ /**
+ * Called after the first render of the component.
+ * We measure the actual height of the banner and update the CSS variable.
+ */
+ public firstUpdated() {}
+ /**
+ * Called whenever the element is updated or re-rendered.
+ */
public async updated() {
- console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
+ 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[]) {
+ /**
+ * Sets the user’s chosen cookie level(s) and hides the banner.
+ */
+ 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');
+ // After user selection, re-check for any required scripts to run
this.updated();
}
+ /**
+ * Dynamically switches the theme between light/dark,
+ * respecting `prefers-color-scheme` by default.
+ */
+ private updateTheme() {
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ this.theme = prefersDark ? 'dark' : 'light';
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+ this.theme = e.matches ? 'dark' : 'light';
+ });
+ }
}
diff --git a/ts_web/elements/consentsoftware-header.ts b/ts_web/elements/consentsoftware-header.ts
new file mode 100644
index 0000000..744352d
--- /dev/null
+++ b/ts_web/elements/consentsoftware-header.ts
@@ -0,0 +1,36 @@
+import * as shared from './shared.js';
+
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-header')
+export class ConsentsoftwareHeader extends LitElement {
+ public static demo = () => html`
+
-
-
+
-
+
+
+
+ This page uses cookies. Please review our
+ cookie policy
+ and choose which cookie level you are willing to accept.
+
+
+ consent management powered by
+ consent.software
+
This page uses cookies. Please review our cookie policy and choose which cookie level you are willing to accept.
-
- consent management powered by consent.software
+ What about cookies?
+
+ `;
+ }
+}
\ No newline at end of file
diff --git a/ts_web/elements/consentsoftware-mainselection.ts b/ts_web/elements/consentsoftware-mainselection.ts
new file mode 100644
index 0000000..0b5c881
--- /dev/null
+++ b/ts_web/elements/consentsoftware-mainselection.ts
@@ -0,0 +1,62 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-mainselection')
+export class ConsentsoftwareMainSelection extends LitElement {
+ public static demo = () => html`
+
+ `;
+ }
+
+ public async getResults(mouseEvent) {}
+}
diff --git a/ts_web/elements/consentsoftware-tabs.ts b/ts_web/elements/consentsoftware-tabs.ts
new file mode 100644
index 0000000..2115c3a
--- /dev/null
+++ b/ts_web/elements/consentsoftware-tabs.ts
@@ -0,0 +1,64 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-tabs')
+export class ConsentsoftwareTabs extends LitElement {
+ public static demo = () => html`
+ Required
+
+
+ Preferences
+
+
+ Statistics
+
+
+ Marketing
+
+
+
+
+ `;
+ }
+
+ public async handleClick(mouseEvent) {
+ const target = mouseEvent.target as HTMLElement;
+ const tab: HTMLDivElement = target.closest('.tab');
+ if (tab) {
+ const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
+ if (selector) {
+ selector.style.left = `${tab.offsetLeft}px`;
+ selector.style.width = `${tab.offsetWidth}px`;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/ts_web/elements/consentsoftware-toggle.ts b/ts_web/elements/consentsoftware-toggle.ts
new file mode 100644
index 0000000..27bf62f
--- /dev/null
+++ b/ts_web/elements/consentsoftware-toggle.ts
@@ -0,0 +1,96 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-toggle')
+export class ConsentsoftwareToggle extends LitElement {
+ public static demo = () => html`Consent
+ Details
+ About Cookies
+ ${this.getText()}
+
+
+ `;
+ }
+
+ public async handleClick(mouseEvent) {
+ this.selected = !this.selected;
+ mouseEvent.stopPropagation();
+ mouseEvent.preventDefault();
+ this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+ console.log(`Selected ${this.selected}`);
+ const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover');
+ if (this.selected) {
+ moverElement.style.transform = 'translateX(30px)';
+ } else {
+ moverElement.style.transform = 'translateX(0px)';
+ }
+ }
+
+ public getText() {
+ return this.textContent;
+ }
+}
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index d3da175..848120f 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -1 +1,5 @@
export * from './consentsoftware-cookieconsent.js';
+export * from './consentsoftware-header.js';
+export * from './consentsoftware-mainselection.js';
+export * from './consentsoftware-toggle.js';
+export * from './consentsoftware-tabs.js';
\ No newline at end of file
diff --git a/ts_web/elements/shared.ts b/ts_web/elements/shared.ts
new file mode 100644
index 0000000..65b207c
--- /dev/null
+++ b/ts_web/elements/shared.ts
@@ -0,0 +1,3 @@
+import { unsafeCSS } from 'lit'
+
+export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
\ No newline at end of file
+
+
+
+
+