@webority/ui-elements 0.12.2 → 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 +201 -0
- package/dist/ui-elements.global.js +252 -74
- package/dist/ui-elements.js +498 -300
- package/package.json +3 -2
|
@@ -0,0 +1,201 @@
|
|
|
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
|
+
:host {
|
|
3
|
+
all: initial;
|
|
4
|
+
position: fixed;
|
|
5
|
+
bottom: 20px;
|
|
6
|
+
left: 20px;
|
|
7
|
+
right: auto;
|
|
8
|
+
z-index: ${t(`--wui-z-fixed`)};
|
|
9
|
+
display: block;
|
|
10
|
+
width: 420px;
|
|
11
|
+
max-width: calc(100vw - 40px);
|
|
12
|
+
font-family: inherit;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
color: ${t(`--color-text`)};
|
|
16
|
+
}
|
|
17
|
+
:host([position="bottom-right"]) {
|
|
18
|
+
right: 20px;
|
|
19
|
+
left: auto;
|
|
20
|
+
}
|
|
21
|
+
:host(:not([open])) {
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
*, *::before, *::after {
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
}
|
|
27
|
+
[hidden] {
|
|
28
|
+
display: none !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.wui-consent-banner-panel {
|
|
32
|
+
padding: 20px;
|
|
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
|
+
text-align: start;
|
|
38
|
+
pointer-events: auto;
|
|
39
|
+
}
|
|
40
|
+
.wui-consent-banner-heading {
|
|
41
|
+
margin: 0 0 8px;
|
|
42
|
+
font-size: 18px;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
line-height: 1.3;
|
|
45
|
+
color: ${t(`--color-text`)};
|
|
46
|
+
}
|
|
47
|
+
.wui-consent-banner-description {
|
|
48
|
+
margin: 0 0 16px;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
line-height: 1.5;
|
|
51
|
+
color: ${t(`--color-text-muted`)};
|
|
52
|
+
}
|
|
53
|
+
.wui-consent-banner-policy {
|
|
54
|
+
color: ${t(`--color-primary`)};
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.wui-consent-banner-settings {
|
|
59
|
+
display: grid;
|
|
60
|
+
gap: 12px;
|
|
61
|
+
max-height: 50vh;
|
|
62
|
+
margin: 0 0 16px;
|
|
63
|
+
padding: 12px 0;
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
border-top: 1px solid ${t(`--color-border`)};
|
|
66
|
+
border-bottom: 1px solid ${t(`--color-border`)};
|
|
67
|
+
}
|
|
68
|
+
.wui-consent-banner-category-description {
|
|
69
|
+
margin: 2px 0 0;
|
|
70
|
+
padding-inline-start: 2.5em;
|
|
71
|
+
font-size: 12px;
|
|
72
|
+
line-height: 1.4;
|
|
73
|
+
color: ${t(`--color-text-muted`)};
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.form-check {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: 0.5em;
|
|
80
|
+
margin: 0;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
}
|
|
83
|
+
.form-check-input {
|
|
84
|
+
appearance: none;
|
|
85
|
+
flex: none;
|
|
86
|
+
width: 2em;
|
|
87
|
+
height: 1em;
|
|
88
|
+
margin: 0;
|
|
89
|
+
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
90
|
+
border-radius: 2em;
|
|
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
|
+
cursor: pointer;
|
|
93
|
+
transition: background-position 0.15s ease-in-out;
|
|
94
|
+
}
|
|
95
|
+
.form-check-input:checked {
|
|
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
|
+
}
|
|
99
|
+
.form-check-input:disabled {
|
|
100
|
+
opacity: 0.5;
|
|
101
|
+
cursor: default;
|
|
102
|
+
}
|
|
103
|
+
.form-check-input:focus-visible {
|
|
104
|
+
outline: 2px solid ${t(`--color-primary`)};
|
|
105
|
+
outline-offset: 2px;
|
|
106
|
+
}
|
|
107
|
+
.form-check-label {
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.wui-consent-banner-actions {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-wrap: wrap;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: flex-end;
|
|
116
|
+
gap: 8px;
|
|
117
|
+
}
|
|
118
|
+
.btn {
|
|
119
|
+
display: inline-block;
|
|
120
|
+
padding: 0.25rem 0.5rem;
|
|
121
|
+
border: 1px solid transparent;
|
|
122
|
+
border-radius: 0.375rem;
|
|
123
|
+
background: transparent;
|
|
124
|
+
font: inherit;
|
|
125
|
+
font-size: 0.875rem;
|
|
126
|
+
font-weight: 500;
|
|
127
|
+
line-height: 1.5;
|
|
128
|
+
text-align: center;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
.btn:focus-visible {
|
|
133
|
+
outline: 2px solid ${t(`--color-primary`)};
|
|
134
|
+
outline-offset: 2px;
|
|
135
|
+
}
|
|
136
|
+
.btn-primary {
|
|
137
|
+
background: ${t(`--color-primary`)};
|
|
138
|
+
border-color: ${t(`--color-primary`)};
|
|
139
|
+
color: #fff;
|
|
140
|
+
}
|
|
141
|
+
.btn-primary:hover {
|
|
142
|
+
background: ${t(`--color-primary-hover`)};
|
|
143
|
+
border-color: ${t(`--color-primary-hover`)};
|
|
144
|
+
}
|
|
145
|
+
.btn-outline-secondary {
|
|
146
|
+
border-color: ${t(`--color-text-muted`)};
|
|
147
|
+
color: ${t(`--color-text-muted`)};
|
|
148
|
+
}
|
|
149
|
+
.btn-outline-secondary:hover {
|
|
150
|
+
background: ${t(`--color-text-muted`)};
|
|
151
|
+
color: #fff;
|
|
152
|
+
}
|
|
153
|
+
.btn-link {
|
|
154
|
+
font-weight: 400;
|
|
155
|
+
color: ${t(`--color-primary`)};
|
|
156
|
+
text-decoration: underline;
|
|
157
|
+
}
|
|
158
|
+
.btn-link:hover {
|
|
159
|
+
color: ${t(`--color-primary-hover`)};
|
|
160
|
+
}
|
|
161
|
+
.wui-consent-banner-settings-toggle {
|
|
162
|
+
margin-inline-end: auto;
|
|
163
|
+
padding-inline: 0;
|
|
164
|
+
}
|
|
165
|
+
.wui-consent-banner-save {
|
|
166
|
+
flex: 1 1 100%;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@media (max-width: 480px) {
|
|
170
|
+
:host,
|
|
171
|
+
:host([position="bottom-right"]) {
|
|
172
|
+
left: 12px;
|
|
173
|
+
right: 12px;
|
|
174
|
+
bottom: 12px;
|
|
175
|
+
width: auto;
|
|
176
|
+
max-width: none;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
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>`}
|
|
180
|
+
<div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden>
|
|
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>
|
|
183
|
+
<div class="wui-consent-banner-settings" hidden>
|
|
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)}
|
|
188
|
+
</div>
|
|
189
|
+
<div class="wui-consent-banner-actions">
|
|
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>
|
|
194
|
+
</div>
|
|
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">
|
|
196
|
+
<div class="form-check form-switch">
|
|
197
|
+
<input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i?` checked disabled`:``} />
|
|
198
|
+
<label class="form-check-label" for="${a}">${d(n)}</label>
|
|
199
|
+
</div>
|
|
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)})();
|