@webority/ui-elements 0.12.3 → 0.12.4
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/dist/ui-consent-banner.global.js +50 -45
- package/dist/ui-elements.global.js +103 -98
- package/dist/ui-elements.js +348 -160
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
(function(){var e=
|
|
1
|
+
(function(){var e={"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-surface":`#FFFFFF`,"--wui-radius-lg":`14px`,"--wui-shadow-overlay-lg":`0 24px 60px -16px rgba(7, 20, 55, 0.28)`,"--wui-z-fixed":`1030`},t=t=>`var(${t}, ${e[t]})`,n=`
|
|
2
2
|
:host {
|
|
3
3
|
all: initial;
|
|
4
4
|
position: fixed;
|
|
5
5
|
bottom: 20px;
|
|
6
6
|
left: 20px;
|
|
7
7
|
right: auto;
|
|
8
|
-
z-index:
|
|
8
|
+
z-index: ${t(`--wui-z-fixed`)};
|
|
9
9
|
display: block;
|
|
10
10
|
width: 420px;
|
|
11
11
|
max-width: calc(100vw - 40px);
|
|
12
12
|
font-family: inherit;
|
|
13
13
|
font-size: 16px;
|
|
14
14
|
line-height: 1.5;
|
|
15
|
-
color:
|
|
15
|
+
color: ${t(`--color-text`)};
|
|
16
16
|
}
|
|
17
17
|
:host([position="bottom-right"]) {
|
|
18
18
|
right: 20px;
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
|
|
31
31
|
.wui-consent-banner-panel {
|
|
32
32
|
padding: 20px;
|
|
33
|
-
background:
|
|
34
|
-
border: 1px solid
|
|
35
|
-
border-radius:
|
|
36
|
-
box-shadow:
|
|
33
|
+
background: ${t(`--color-surface`)};
|
|
34
|
+
border: 1px solid ${t(`--color-border`)};
|
|
35
|
+
border-radius: ${t(`--wui-radius-lg`)};
|
|
36
|
+
box-shadow: ${t(`--wui-shadow-overlay-lg`)};
|
|
37
37
|
text-align: start;
|
|
38
38
|
pointer-events: auto;
|
|
39
39
|
}
|
|
@@ -42,16 +42,16 @@
|
|
|
42
42
|
font-size: 18px;
|
|
43
43
|
font-weight: 600;
|
|
44
44
|
line-height: 1.3;
|
|
45
|
-
color:
|
|
45
|
+
color: ${t(`--color-text`)};
|
|
46
46
|
}
|
|
47
47
|
.wui-consent-banner-description {
|
|
48
48
|
margin: 0 0 16px;
|
|
49
49
|
font-size: 14px;
|
|
50
50
|
line-height: 1.5;
|
|
51
|
-
color:
|
|
51
|
+
color: ${t(`--color-text-muted`)};
|
|
52
52
|
}
|
|
53
53
|
.wui-consent-banner-policy {
|
|
54
|
-
color:
|
|
54
|
+
color: ${t(`--color-primary`)};
|
|
55
55
|
font-weight: 500;
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -62,15 +62,15 @@
|
|
|
62
62
|
margin: 0 0 16px;
|
|
63
63
|
padding: 12px 0;
|
|
64
64
|
overflow-y: auto;
|
|
65
|
-
border-top: 1px solid
|
|
66
|
-
border-bottom: 1px solid
|
|
65
|
+
border-top: 1px solid ${t(`--color-border`)};
|
|
66
|
+
border-bottom: 1px solid ${t(`--color-border`)};
|
|
67
67
|
}
|
|
68
68
|
.wui-consent-banner-category-description {
|
|
69
69
|
margin: 2px 0 0;
|
|
70
70
|
padding-inline-start: 2.5em;
|
|
71
71
|
font-size: 12px;
|
|
72
72
|
line-height: 1.4;
|
|
73
|
-
color:
|
|
73
|
+
color: ${t(`--color-text-muted`)};
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.form-check {
|
|
@@ -86,22 +86,22 @@
|
|
|
86
86
|
width: 2em;
|
|
87
87
|
height: 1em;
|
|
88
88
|
margin: 0;
|
|
89
|
-
border: 1px solid
|
|
89
|
+
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
90
90
|
border-radius: 2em;
|
|
91
|
-
background:
|
|
91
|
+
background: ${t(`--color-surface`)} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat;
|
|
92
92
|
cursor: pointer;
|
|
93
93
|
transition: background-position 0.15s ease-in-out;
|
|
94
94
|
}
|
|
95
95
|
.form-check-input:checked {
|
|
96
|
-
border-color:
|
|
97
|
-
background:
|
|
96
|
+
border-color: ${t(`--color-primary`)};
|
|
97
|
+
background: ${t(`--color-primary`)} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat;
|
|
98
98
|
}
|
|
99
99
|
.form-check-input:disabled {
|
|
100
100
|
opacity: 0.5;
|
|
101
101
|
cursor: default;
|
|
102
102
|
}
|
|
103
103
|
.form-check-input:focus-visible {
|
|
104
|
-
outline: 2px solid
|
|
104
|
+
outline: 2px solid ${t(`--color-primary`)};
|
|
105
105
|
outline-offset: 2px;
|
|
106
106
|
}
|
|
107
107
|
.form-check-label {
|
|
@@ -117,12 +117,12 @@
|
|
|
117
117
|
}
|
|
118
118
|
.btn {
|
|
119
119
|
display: inline-block;
|
|
120
|
-
padding:
|
|
120
|
+
padding: 0.25rem 0.5rem;
|
|
121
121
|
border: 1px solid transparent;
|
|
122
|
-
border-radius:
|
|
122
|
+
border-radius: 0.375rem;
|
|
123
123
|
background: transparent;
|
|
124
124
|
font: inherit;
|
|
125
|
-
font-size:
|
|
125
|
+
font-size: 0.875rem;
|
|
126
126
|
font-weight: 500;
|
|
127
127
|
line-height: 1.5;
|
|
128
128
|
text-align: center;
|
|
@@ -130,29 +130,34 @@
|
|
|
130
130
|
cursor: pointer;
|
|
131
131
|
}
|
|
132
132
|
.btn:focus-visible {
|
|
133
|
-
outline: 2px solid
|
|
133
|
+
outline: 2px solid ${t(`--color-primary`)};
|
|
134
134
|
outline-offset: 2px;
|
|
135
135
|
}
|
|
136
136
|
.btn-primary {
|
|
137
|
-
background:
|
|
138
|
-
border-color:
|
|
137
|
+
background: ${t(`--color-primary`)};
|
|
138
|
+
border-color: ${t(`--color-primary`)};
|
|
139
139
|
color: #fff;
|
|
140
140
|
}
|
|
141
141
|
.btn-primary:hover {
|
|
142
|
-
background:
|
|
143
|
-
border-color:
|
|
142
|
+
background: ${t(`--color-primary-hover`)};
|
|
143
|
+
border-color: ${t(`--color-primary-hover`)};
|
|
144
144
|
}
|
|
145
145
|
.btn-outline-secondary {
|
|
146
|
-
border-color:
|
|
147
|
-
color:
|
|
146
|
+
border-color: ${t(`--color-text-muted`)};
|
|
147
|
+
color: ${t(`--color-text-muted`)};
|
|
148
148
|
}
|
|
149
149
|
.btn-outline-secondary:hover {
|
|
150
|
-
background:
|
|
150
|
+
background: ${t(`--color-text-muted`)};
|
|
151
|
+
color: #fff;
|
|
151
152
|
}
|
|
152
153
|
.btn-link {
|
|
153
|
-
|
|
154
|
+
font-weight: 400;
|
|
155
|
+
color: ${t(`--color-primary`)};
|
|
154
156
|
text-decoration: underline;
|
|
155
157
|
}
|
|
158
|
+
.btn-link:hover {
|
|
159
|
+
color: ${t(`--color-primary-hover`)};
|
|
160
|
+
}
|
|
156
161
|
.wui-consent-banner-settings-toggle {
|
|
157
162
|
margin-inline-end: auto;
|
|
158
163
|
padding-inline: 0;
|
|
@@ -171,26 +176,26 @@
|
|
|
171
176
|
max-width: none;
|
|
172
177
|
}
|
|
173
178
|
}
|
|
174
|
-
</style>`}
|
|
179
|
+
`,r=typeof HTMLElement>`u`?class{}:HTMLElement,i=`wui-consent-save`,a=`[data-consent-settings]`,o={heading:`Cookies on this site`,description:`We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.`,policyLabel:`Cookie policy`,essentialLabel:`Essential cookies`,essentialDescription:`Required for the site to work and stay secure. Always on.`,analyticsLabel:`Analytics cookies`,analyticsDescription:`Help us understand how visitors use the site.`,functionalLabel:`Functional cookies`,functionalDescription:`Remember choices you make, such as your preferences.`,marketingLabel:`Marketing cookies`,marketingDescription:`Measure how well our campaigns work.`,settingsLabel:`Cookie settings`,rejectLabel:`Reject all`,acceptLabel:`Accept all`,saveLabel:`Save preferences`},s=[`analytics`,`functional`,`marketing`],c=0,l=class extends r{static get observedAttributes(){return[`heading`,`description`,`policy-href`,`policy-label`,`analytics-description`,`functional-description`,`marketing-description`]}constructor(){super(),c+=1,this._uid=`wui-consent-${c}`,this._preferences={analytics:!1,functional:!1,marketing:!1},this._settings=!1,this._onDocumentClick=e=>{e.target instanceof Element&&e.target.closest(a)&&(e.preventDefault(),this.open({settings:!0,focus:!0}))}}get position(){return this.getAttribute(`position`)===`bottom-right`?`bottom-right`:`bottom-left`}set position(e){this.setAttribute(`position`,String(e??`bottom-left`))}get standalone(){return this.hasAttribute(`standalone`)}set standalone(e){this.toggleAttribute(`standalone`,e===!0||e===``||e===`true`)}get heading(){return this.getAttribute(`heading`)||o.heading}set heading(e){this.setAttribute(`heading`,String(e??``))}get description(){return this.getAttribute(`description`)||o.description}set description(e){this.setAttribute(`description`,String(e??``))}get policyHref(){return this.getAttribute(`policy-href`)||``}set policyHref(e){this.setAttribute(`policy-href`,String(e??``))}get policyLabel(){return this.getAttribute(`policy-label`)||o.policyLabel}set policyLabel(e){this.setAttribute(`policy-label`,String(e??``))}get analyticsDescription(){return this.getAttribute(`analytics-description`)||o.analyticsDescription}set analyticsDescription(e){this.setAttribute(`analytics-description`,String(e??``))}get functionalDescription(){return this.getAttribute(`functional-description`)||o.functionalDescription}set functionalDescription(e){this.setAttribute(`functional-description`,String(e??``))}get marketingDescription(){return this.getAttribute(`marketing-description`)||o.marketingDescription}set marketingDescription(e){this.setAttribute(`marketing-description`,String(e??``))}get preferences(){return{...this._preferences}}set preferences(e){this._preferences={analytics:e?.analytics===!0,functional:e?.functional===!0,marketing:e?.marketing===!0},this._applyPreferences()}get isOpen(){return this.hasAttribute(`open`)}connectedCallback(){this._rendered||this.render(),document.addEventListener(`click`,this._onDocumentClick)}disconnectedCallback(){document.removeEventListener(`click`,this._onDocumentClick)}attributeChangedCallback(){this._rendered&&this.render()}render(){let e=this.isOpen,t=this._uid,r=this.policyHref?` <a class="wui-consent-banner-policy" href="${f(this.policyHref)}">${d(this.policyLabel)}</a>`:``,i=this._root();i.innerHTML=`${i===this?``:`<style>${n}</style>`}
|
|
175
180
|
<div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden>
|
|
176
|
-
<h2 class="wui-consent-banner-heading" id="${t}-heading">${
|
|
177
|
-
<p class="wui-consent-banner-description" id="${t}-description">${
|
|
181
|
+
<h2 class="wui-consent-banner-heading" id="${t}-heading">${d(this.heading)}</h2>
|
|
182
|
+
<p class="wui-consent-banner-description" id="${t}-description">${d(this.description)}${r}</p>
|
|
178
183
|
<div class="wui-consent-banner-settings" hidden>
|
|
179
|
-
${
|
|
180
|
-
${
|
|
181
|
-
${
|
|
182
|
-
${
|
|
184
|
+
${u(t,`essential`,o.essentialLabel,o.essentialDescription,!0)}
|
|
185
|
+
${u(t,`analytics`,o.analyticsLabel,this.analyticsDescription,!1)}
|
|
186
|
+
${u(t,`functional`,o.functionalLabel,this.functionalDescription,!1)}
|
|
187
|
+
${u(t,`marketing`,o.marketingLabel,this.marketingDescription,!1)}
|
|
183
188
|
</div>
|
|
184
189
|
<div class="wui-consent-banner-actions">
|
|
185
|
-
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${
|
|
186
|
-
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${
|
|
187
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${
|
|
188
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${
|
|
190
|
+
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${o.settingsLabel}</button>
|
|
191
|
+
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${o.rejectLabel}</button>
|
|
192
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${o.acceptLabel}</button>
|
|
193
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${o.saveLabel}</button>
|
|
189
194
|
</div>
|
|
190
|
-
</div>`,this._rendered=!0,this._wire(),this._applyPreferences(),this._showSettings(this._settings),e&&(this._panel().hidden=!1)}open({settings:e=!1,focus:t=!1}={}){this._rendered||this.render(),this._applyPreferences(),this._showSettings(e),this._panel().hidden=!1,this.setAttribute(`open`,``),t&&(e?this._root().querySelector(`.wui-consent-banner-category input:not([disabled])`):this._root().querySelector(`.wui-consent-banner-accept`))?.focus()}close(){let e=this._panel();e&&(e.hidden=!0),this.removeAttribute(`open`),this._showSettings(!1)}_root(){return this.shadowRoot?this.shadowRoot:this.standalone?this.attachShadow({mode:`open`}):this}_panel(){return this._root().querySelector(`.wui-consent-banner-panel`)}_wire(){let e=this._root();e.querySelector(`.wui-consent-banner-accept`)?.addEventListener(`click`,()=>this._save({analytics:!0,functional:!0,marketing:!0})),e.querySelector(`.wui-consent-banner-reject`)?.addEventListener(`click`,()=>this._save({analytics:!1,functional:!1,marketing:!1})),e.querySelector(`.wui-consent-banner-save`)?.addEventListener(`click`,()=>this._save(this._switchValues())),e.querySelector(`.wui-consent-banner-settings-toggle`)?.addEventListener(`click`,()=>this._showSettings(!this._settings))}_save(e){this._preferences={...e},this.dispatchEvent(new CustomEvent(
|
|
195
|
+
</div>`,this._rendered=!0,this._wire(),this._applyPreferences(),this._showSettings(this._settings),e&&(this._panel().hidden=!1)}open({settings:e=!1,focus:t=!1}={}){this._rendered||this.render(),this._applyPreferences(),this._showSettings(e),this._panel().hidden=!1,this.setAttribute(`open`,``),t&&(e?this._root().querySelector(`.wui-consent-banner-category input:not([disabled])`):this._root().querySelector(`.wui-consent-banner-accept`))?.focus()}close(){let e=this._panel();e&&(e.hidden=!0),this.removeAttribute(`open`),this._showSettings(!1)}_root(){return this.shadowRoot?this.shadowRoot:this.standalone?this.attachShadow({mode:`open`}):this}_panel(){return this._root().querySelector(`.wui-consent-banner-panel`)}_wire(){let e=this._root();e.querySelector(`.wui-consent-banner-accept`)?.addEventListener(`click`,()=>this._save({analytics:!0,functional:!0,marketing:!0})),e.querySelector(`.wui-consent-banner-reject`)?.addEventListener(`click`,()=>this._save({analytics:!1,functional:!1,marketing:!1})),e.querySelector(`.wui-consent-banner-save`)?.addEventListener(`click`,()=>this._save(this._switchValues())),e.querySelector(`.wui-consent-banner-settings-toggle`)?.addEventListener(`click`,()=>this._showSettings(!this._settings))}_save(e){this._preferences={...e},this.dispatchEvent(new CustomEvent(i,{bubbles:!0,composed:!0,detail:{...e}})),this.close()}_switchValues(){let e={};for(let t of s)e[t]=this._root().querySelector(`input[data-category="${t}"]`)?.checked===!0;return e}_applyPreferences(){for(let e of s){let t=this._root().querySelector(`input[data-category="${e}"]`);t&&(t.checked=this._preferences[e])}}_showSettings(e){this._settings=e;let t=this._root(),n=t.querySelector(`.wui-consent-banner-settings`);if(!n)return;n.hidden=!e,t.querySelector(`.wui-consent-banner-settings-toggle`)?.setAttribute(`aria-expanded`,e?`true`:`false`);let r=t.querySelector(`.wui-consent-banner-save`);r&&(r.hidden=!e);for(let n of[`.wui-consent-banner-reject`,`.wui-consent-banner-accept`]){let r=t.querySelector(n);r&&(r.hidden=e)}}};function u(e,t,n,r,i){let a=`${e}-${t}`;return`<div class="wui-consent-banner-category">
|
|
191
196
|
<div class="form-check form-switch">
|
|
192
197
|
<input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i?` checked disabled`:``} />
|
|
193
|
-
<label class="form-check-label" for="${a}">${
|
|
198
|
+
<label class="form-check-label" for="${a}">${d(n)}</label>
|
|
194
199
|
</div>
|
|
195
|
-
<p class="wui-consent-banner-category-description">${
|
|
196
|
-
</div>`}var
|
|
200
|
+
<p class="wui-consent-banner-category-description">${d(r)}</p>
|
|
201
|
+
</div>`}var d=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`),f=e=>String(e??``).replace(/&/g,`&`).replace(/"/g,`"`).replace(/</g,`<`);typeof customElements<`u`&&!customElements.get(`wui-consent-banner`)&&customElements.define(`wui-consent-banner`,l)})();
|