experiment: add LitElement based version of vaadin-cookie-consent (#8492

)

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",

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';

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

packages/cookie-consent/test/cookie-consent-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-cookie-consent.js';
+import './cookie-consent.common.js';

packages/cookie-consent/test/cookie-consent-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-cookie-consent.js';
+import './cookie-consent.common.js';

packages/cookie-consent/test/cookie-consent.test.js → 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', () => {

packages/cookie-consent/theme/lumo/vaadin-lit-cookie-consent.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-cookie-consent.js';

packages/cookie-consent/theme/material/vaadin-lit-cookie-consent.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-cookie-consent.js';

packages/cookie-consent/vaadin-lit-cookie-consent.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-cookie-consent.js';

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';