From 962aa34dcb61eb485a7809fb26a9d5678c28feff Mon Sep 17 00:00:00 2001 From: Serhii Kulykov <iamkulykov@gmail.com> Date: Fri, 10 Jan 2025 15:39:06 +0200 Subject: [PATCH] experiment: add LitElement based version of vaadin-cookie-consent (#8492) --- packages/cookie-consent/package.json | 3 +- .../src/vaadin-lit-cookie-consent.d.ts | 11 ++++ .../src/vaadin-lit-cookie-consent.js | 50 +++++++++++++++++++ .../test/cookie-consent-lit.test.js | 2 + .../test/cookie-consent-polymer.test.js | 2 + ...nsent.test.js => cookie-consent.common.js} | 1 - .../theme/lumo/vaadin-lit-cookie-consent.js | 1 + .../material/vaadin-lit-cookie-consent.js | 1 + .../vaadin-lit-cookie-consent.d.ts | 1 + .../vaadin-lit-cookie-consent.js | 2 + 10 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 packages/cookie-consent/src/vaadin-lit-cookie-consent.d.ts create mode 100644 packages/cookie-consent/src/vaadin-lit-cookie-consent.js create mode 100644 packages/cookie-consent/test/cookie-consent-lit.test.js create mode 100644 packages/cookie-consent/test/cookie-consent-polymer.test.js rename packages/cookie-consent/test/{cookie-consent.test.js => cookie-consent.common.js} (99%) create mode 100644 packages/cookie-consent/theme/lumo/vaadin-lit-cookie-consent.js create mode 100644 packages/cookie-consent/theme/material/vaadin-lit-cookie-consent.js create mode 100644 packages/cookie-consent/vaadin-lit-cookie-consent.d.ts create mode 100644 packages/cookie-consent/vaadin-lit-cookie-consent.js diff --git a/packages/cookie-consent/package.json b/packages/cookie-consent/package.json index 19e8985b1af..6b94d0d7c2b 100644 --- a/packages/cookie-consent/package.json +++ b/packages/cookie-consent/package.json @@ -40,7 +40,8 @@ "@vaadin/component-base": "24.7.0-alpha4", "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4", "@vaadin/vaadin-material-styles": "24.7.0-alpha4", - "cookieconsent": "^3.0.6" + "cookieconsent": "^3.0.6", + "lit": "^3.0.0" }, "devDependencies": { "@vaadin/chai-plugins": "24.7.0-alpha4", diff --git a/packages/cookie-consent/src/vaadin-lit-cookie-consent.d.ts b/packages/cookie-consent/src/vaadin-lit-cookie-consent.d.ts new file mode 100644 index 00000000000..ba5f2d2d06a --- /dev/null +++ b/packages/cookie-consent/src/vaadin-lit-cookie-consent.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2025 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-cookie-consent.js'; diff --git a/packages/cookie-consent/src/vaadin-lit-cookie-consent.js b/packages/cookie-consent/src/vaadin-lit-cookie-consent.js new file mode 100644 index 00000000000..47ac77bfc5e --- /dev/null +++ b/packages/cookie-consent/src/vaadin-lit-cookie-consent.js @@ -0,0 +1,50 @@ +/** + * @license + * Copyright (c) 2000 - 2025 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import { css, html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { CookieConsentMixin } from './vaadin-cookie-consent-mixin.js'; + +/** + * LitElement based version of `<vaadin-cookie-consent>` web component. + * + * ## Disclaimer + * + * This component is an experiment and not yet a part of Vaadin platform. + * There is no ETA regarding specific Vaadin version where it'll land. + */ +class CookieConsent extends CookieConsentMixin(ElementMixin(PolylitMixin(LitElement))) { + static get is() { + return 'vaadin-cookie-consent'; + } + + static get cvdlName() { + return 'vaadin-cookie-consent'; + } + + static get styles() { + return css` + :host { + display: none !important; + } + `; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(CookieConsent); + +export { CookieConsent }; diff --git a/packages/cookie-consent/test/cookie-consent-lit.test.js b/packages/cookie-consent/test/cookie-consent-lit.test.js new file mode 100644 index 00000000000..274bf7f29bf --- /dev/null +++ b/packages/cookie-consent/test/cookie-consent-lit.test.js @@ -0,0 +1,2 @@ +import '../vaadin-lit-cookie-consent.js'; +import './cookie-consent.common.js'; diff --git a/packages/cookie-consent/test/cookie-consent-polymer.test.js b/packages/cookie-consent/test/cookie-consent-polymer.test.js new file mode 100644 index 00000000000..1dcd3e0d473 --- /dev/null +++ b/packages/cookie-consent/test/cookie-consent-polymer.test.js @@ -0,0 +1,2 @@ +import '../vaadin-cookie-consent.js'; +import './cookie-consent.common.js'; diff --git a/packages/cookie-consent/test/cookie-consent.test.js b/packages/cookie-consent/test/cookie-consent.common.js similarity index 99% rename from packages/cookie-consent/test/cookie-consent.test.js rename to packages/cookie-consent/test/cookie-consent.common.js index af7191658ff..5c6edf82688 100644 --- a/packages/cookie-consent/test/cookie-consent.test.js +++ b/packages/cookie-consent/test/cookie-consent.common.js @@ -1,6 +1,5 @@ import { expect } from '@vaadin/chai-plugins'; import { aTimeout, fixtureSync, keyboardEventFor } from '@vaadin/testing-helpers'; -import '../vaadin-cookie-consent.js'; describe('vaadin-cookie-consent', () => { describe('custom element definition', () => { diff --git a/packages/cookie-consent/theme/lumo/vaadin-lit-cookie-consent.js b/packages/cookie-consent/theme/lumo/vaadin-lit-cookie-consent.js new file mode 100644 index 00000000000..0bc81bfe590 --- /dev/null +++ b/packages/cookie-consent/theme/lumo/vaadin-lit-cookie-consent.js @@ -0,0 +1 @@ +import '../../src/vaadin-lit-cookie-consent.js'; diff --git a/packages/cookie-consent/theme/material/vaadin-lit-cookie-consent.js b/packages/cookie-consent/theme/material/vaadin-lit-cookie-consent.js new file mode 100644 index 00000000000..0bc81bfe590 --- /dev/null +++ b/packages/cookie-consent/theme/material/vaadin-lit-cookie-consent.js @@ -0,0 +1 @@ +import '../../src/vaadin-lit-cookie-consent.js'; diff --git a/packages/cookie-consent/vaadin-lit-cookie-consent.d.ts b/packages/cookie-consent/vaadin-lit-cookie-consent.d.ts new file mode 100644 index 00000000000..c688d2013bc --- /dev/null +++ b/packages/cookie-consent/vaadin-lit-cookie-consent.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-cookie-consent.js'; diff --git a/packages/cookie-consent/vaadin-lit-cookie-consent.js b/packages/cookie-consent/vaadin-lit-cookie-consent.js new file mode 100644 index 00000000000..02abb745cb2 --- /dev/null +++ b/packages/cookie-consent/vaadin-lit-cookie-consent.js @@ -0,0 +1,2 @@ +import './theme/lumo/vaadin-lit-cookie-consent.js'; +export * from './src/vaadin-lit-cookie-consent.js';