@vaadin/vaadin-cookie-consent 22.0.0-alpha4 → 22.0.0-alpha8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,10 +1,29 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-cookie-consent",
3
- "version": "22.0.0-alpha4",
3
+ "version": "22.0.0-alpha8",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
4
7
  "description": "vaadin-cookie-consent",
8
+ "license": "https://raw.githubusercontent.com/vaadin/vaadin-cookie-consent/master/LICENSE",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/vaadin/web-components.git",
12
+ "directory": "packages/vaadin-cookie-consent"
13
+ },
14
+ "author": "Vaadin Ltd",
15
+ "homepage": "https://vaadin.com/components",
16
+ "bugs": {
17
+ "url": "https://github.com/vaadin/vaadin-cookie-consent/issues"
18
+ },
5
19
  "main": "vaadin-cookie-consent.js",
6
20
  "module": "vaadin-cookie-consent.js",
7
- "repository": "vaadin/vaadin-cookie-consent",
21
+ "files": [
22
+ "src",
23
+ "theme",
24
+ "vaadin-*.d.ts",
25
+ "vaadin-*.js"
26
+ ],
8
27
  "keywords": [
9
28
  "Vaadin",
10
29
  "vaadin-cookie-consent",
@@ -12,32 +31,8 @@
12
31
  "web-component",
13
32
  "polymer"
14
33
  ],
15
- "author": "Vaadin Ltd",
16
- "license": "https://raw.githubusercontent.com/vaadin/vaadin-cookie-consent/master/LICENSE",
17
- "bugs": {
18
- "url": "https://github.com/vaadin/vaadin-cookie-consent/issues"
19
- },
20
- "homepage": "https://vaadin.com/components",
21
- "files": [
22
- "vaadin-*.d.ts",
23
- "vaadin-*.js",
24
- "src",
25
- "theme"
26
- ],
27
34
  "dependencies": {
28
- "@polymer/polymer": "^3.0.0",
29
- "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
30
- "@vaadin/vaadin-license-checker": "^2.1.0",
31
- "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
32
- "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
33
- "cookieconsent": "^3.0.6"
34
- },
35
- "devDependencies": {
36
- "@esm-bundle/chai": "^4.3.4",
37
- "@vaadin/testing-helpers": "^0.2.1"
38
- },
39
- "publishConfig": {
40
- "access": "public"
35
+ "@vaadin/cookie-consent": "22.0.0-alpha8"
41
36
  },
42
- "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
37
+ "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
43
38
  }
@@ -1,81 +1,18 @@
1
- import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
2
-
3
1
  /**
4
- * `<vaadin-cookie-consent>` is used to show a cookie consent banner the first
5
- * time a user visits the application.
6
- *
7
- * By default, the banner is shown attached to the top of the screen and with a
8
- * predefined text, a link to https://cookiesandyou.com/ describing cookies and a consent button.
9
- *
10
- * The texts, link and position can be configured using attributes/properties, e.g.
11
- * ```
12
- * <vaadin-cookie-consent learn-more-link="https://mysite.com/cookies.html"></vaadin-cookie-consent>
13
- * ```
14
- *
15
- * ### Styling
16
- *
17
- * To change the look of the cookie consent banner, a `style` node should be attached
18
- * to the document's head with the following style names overridden:
19
- *
20
- * Style name | Description
21
- * ----------------|-------------------------------------------------------|
22
- * `cc-window` | Banner container
23
- * `cc-message` | Message container
24
- * `cc-compliance` | Dismiss cookie button container
25
- * `cc-dismiss` | Dismiss cookie button
26
- * `cc-btn` | Dismiss cookie button
27
- * `cc-link` | Learn more link element
2
+ * @license
3
+ * Copyright (c) 2018 - 2021 Vaadin Ltd
4
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
28
5
  */
29
- declare class CookieConsentElement extends ElementMixin(HTMLElement) {
30
- /**
31
- * The message to show in the popup.
32
- */
33
- message: string;
34
-
35
- /**
36
- * The text to show on the dismiss/consent button.
37
- */
38
- dismiss: string;
39
-
40
- /**
41
- * The text to show on the 'learn more' link.
42
- * @attr {string} learn-more
43
- */
44
- learnMore: string;
45
-
46
- /**
47
- * The URL the 'learn more' link should open.
48
- * @attr {string} learn-more-link
49
- */
50
- learnMoreLink: string;
51
-
52
- /**
53
- * Determines the position of the banner.
54
- *
55
- * Possible values are: `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`
56
- * For `top` and `bottom`, the banner is shown with full width. For the corner positions,
57
- * it is shown as a smaller popup.
58
- */
59
- position: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
6
+ import { CookieConsent } from '@vaadin/cookie-consent/src/vaadin-cookie-consent.js';
60
7
 
61
- /**
62
- * The name of the cookie to set to remember that the user has consented.
63
- *
64
- * This rarely needs to be changed.
65
- * @attr {string} cookie-name
66
- */
67
- cookieName: string;
68
-
69
- /**
70
- * Shows the popup even if the user has seen it before.
71
- */
72
- _show(): void;
73
- }
8
+ /**
9
+ * @deprecated Import `CookieConsent` from `@vaadin/cookie-consent` instead.
10
+ */
11
+ export type CookieConsentElement = CookieConsent;
74
12
 
75
- declare global {
76
- interface HTMLElementTagNameMap {
77
- 'vaadin-cookie-consent': CookieConsentElement;
78
- }
79
- }
13
+ /**
14
+ * @deprecated Import `CookieConsent` from `@vaadin/cookie-consent` instead.
15
+ */
16
+ export const CookieConsentElement: typeof CookieConsent;
80
17
 
81
- export { CookieConsentElement };
18
+ export * from '@vaadin/cookie-consent/src/vaadin-cookie-consent.js';
@@ -3,236 +3,11 @@
3
3
  * Copyright (c) 2018 - 2021 Vaadin Ltd
4
4
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
5
5
  */
6
- import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
7
- import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
8
- import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
9
- import 'cookieconsent/build/cookieconsent.min.js';
6
+ import { CookieConsent } from '@vaadin/cookie-consent/src/vaadin-cookie-consent.js';
10
7
 
11
8
  /**
12
- * `<vaadin-cookie-consent>` is used to show a cookie consent banner the first
13
- * time a user visits the application.
14
- *
15
- * By default, the banner is shown attached to the top of the screen and with a
16
- * predefined text, a link to https://cookiesandyou.com/ describing cookies and a consent button.
17
- *
18
- * The texts, link and position can be configured using attributes/properties, e.g.
19
- * ```
20
- * <vaadin-cookie-consent learn-more-link="https://mysite.com/cookies.html"></vaadin-cookie-consent>
21
- * ```
22
- *
23
- * ### Styling
24
- *
25
- * To change the look of the cookie consent banner, a `style` node should be attached
26
- * to the document's head with the following style names overridden:
27
- *
28
- * Style name | Description
29
- * ----------------|-------------------------------------------------------|
30
- * `cc-window` | Banner container
31
- * `cc-message` | Message container
32
- * `cc-compliance` | Dismiss cookie button container
33
- * `cc-dismiss` | Dismiss cookie button
34
- * `cc-btn` | Dismiss cookie button
35
- * `cc-link` | Learn more link element
36
- *
37
- * @extends HTMLElement
38
- * @mixes ElementMixin
9
+ * @deprecated Import `CookieConsent` from `@vaadin/cookie-consent` instead.
39
10
  */
40
- class CookieConsentElement extends ElementMixin(PolymerElement) {
41
- static get template() {
42
- return html`
43
- <style>
44
- :host {
45
- display: none;
46
- }
47
- </style>
48
- `;
49
- }
11
+ export const CookieConsentElement = CookieConsent;
50
12
 
51
- static get is() {
52
- return 'vaadin-cookie-consent';
53
- }
54
-
55
- static get properties() {
56
- return {
57
- /**
58
- * The message to show in the popup.
59
- * @type {string}
60
- */
61
- message: {
62
- type: String,
63
- value: 'This website uses cookies to ensure you get the best experience.'
64
- },
65
-
66
- /**
67
- * The text to show on the dismiss/consent button.
68
- * @type {string}
69
- */
70
- dismiss: {
71
- type: String,
72
- value: 'Got it!'
73
- },
74
-
75
- /**
76
- * The text to show on the 'learn more' link.
77
- * @attr {string} learn-more
78
- * @type {string}
79
- */
80
- learnMore: {
81
- type: String,
82
- value: 'Learn more'
83
- },
84
-
85
- /**
86
- * The URL the 'learn more' link should open.
87
- * @attr {string} learn-more-link
88
- * @type {string}
89
- */
90
- learnMoreLink: {
91
- type: String,
92
- value: 'https://cookiesandyou.com/'
93
- },
94
-
95
- /** @private */
96
- _showLearnMore: {
97
- type: Boolean,
98
- computed: '_showLink(learnMoreLink)'
99
- },
100
-
101
- /**
102
- * Determines the position of the banner.
103
- *
104
- * Possible values are: `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`
105
- * For `top` and `bottom`, the banner is shown with full width. For the corner positions,
106
- * it is shown as a smaller popup.
107
- * @type {string}
108
- */
109
- position: {
110
- type: String,
111
- value: 'top'
112
- },
113
-
114
- /**
115
- * The name of the cookie to set to remember that the user has consented.
116
- *
117
- * This rarely needs to be changed.
118
- * @attr {string} cookie-name
119
- * @type {string}
120
- */
121
- cookieName: {
122
- type: String,
123
- value: 'cookieconsent_status'
124
- },
125
-
126
- /** @private */
127
- _css: {
128
- type: Object
129
- }
130
- };
131
- }
132
-
133
- /** @protected */
134
- static _finalizeClass() {
135
- super._finalizeClass();
136
-
137
- const devModeCallback = window.Vaadin.developmentModeCallback;
138
- const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
139
- /* c8 ignore next 3 */
140
- if (typeof licenseChecker === 'function') {
141
- licenseChecker(CookieConsentElement);
142
- }
143
- }
144
-
145
- /** @private */
146
- _showLink(learnMoreLink) {
147
- return !!learnMoreLink;
148
- }
149
-
150
- /** @protected */
151
- connectedCallback() {
152
- super.connectedCallback();
153
-
154
- // CSS is global so it must be injected into head...
155
- this._css = document.createElement('style');
156
- // prettier-ignore
157
- this._css.innerText = '.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}'; // eslint-disable-line max-len
158
- document.head.appendChild(this._css);
159
-
160
- window.cookieconsent.initialise({
161
- palette: {
162
- popup: {
163
- background: '#000'
164
- },
165
- button: {
166
- // Cannot use a lumo color 'as is' due to
167
- // https://github.com/vaadin/vaadin-lumo-styles/issues/22
168
- // var(--lumo-primary-color) at 0.95 opacity
169
- background: 'rgba(22, 118, 243, 0.95)',
170
- hover: 'rgba(22, 118, 243, 1)'
171
- }
172
- },
173
- showLink: this._showLearnMore,
174
- content: {
175
- message: this.message,
176
- dismiss: this.dismiss,
177
- link: this.learnMore,
178
- href: this.learnMoreLink
179
- },
180
- cookie: {
181
- name: this.cookieName
182
- },
183
- position: this.position
184
- });
185
-
186
- const popup = this._getPopup();
187
- if (popup) {
188
- // NVDA announces a popup appearance only if the role is alert
189
- popup.setAttribute('role', 'alert');
190
- }
191
-
192
- // In order to make an `<a>` element act as a button, setting
193
- // `role="button"` is not enough: https://developer.mozilla.org/en-US
194
- // /docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
195
- const dismissButton = popup.querySelector('a.cc-btn');
196
- dismissButton.addEventListener('keydown', (event) => {
197
- const SPACE = 32;
198
- const ENTER = 13;
199
- const key = event.keyCode || event.which;
200
- if (key === SPACE || key === ENTER) {
201
- dismissButton.click();
202
- }
203
- });
204
- }
205
-
206
- /** @protected */
207
- disconnectedCallback() {
208
- super.disconnectedCallback();
209
- var popup = this._getPopup();
210
- if (popup) {
211
- popup.parentNode.removeChild(popup);
212
- }
213
- if (document.head.contains(this._css)) {
214
- document.head.removeChild(this._css);
215
- }
216
- }
217
-
218
- /** @private */
219
- _getPopup() {
220
- return document.querySelector('[aria-label="cookieconsent"]');
221
- }
222
-
223
- /**
224
- * Shows the popup even if the user has seen it before.
225
- * @protected
226
- */
227
- _show() {
228
- var popup = this._getPopup();
229
- if (popup) {
230
- popup.classList.remove('cc-invisible');
231
- popup.style.display = '';
232
- }
233
- }
234
- }
235
-
236
- customElements.define(CookieConsentElement.is, CookieConsentElement);
237
-
238
- export { CookieConsentElement };
13
+ export * from '@vaadin/cookie-consent/src/vaadin-cookie-consent.js';