@hotosm/ui 0.9.1 → 0.9.2

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.
@@ -1,5 +1,5 @@
1
- import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"./chunk.QABMDRWR.js";import{d as a,e as s,f as n,g as i}from"./chunk.N2W26RCT.js";Promise.allSettled([import("@awesome.me/webawesome/dist/components/callout/callout.js"),import("@awesome.me/webawesome/dist/components/icon/icon.js"),import("@awesome.me/webawesome/dist/components/button/button.js")]);var m,v,w,f,x,r=class extends b{constructor(){super(...arguments);this.name="hot-tracking";n(this,m,"");n(this,v,"");n(this,w,"https://matomo.hotosm.org");n(this,f,!1);n(this,x,"We use cookies and similar technologies to help personalize content, tailor and measure ads, and provide a better experience. By clicking 'Accept', you consent to our use of cookies and tracking technologies.");this.consentGiven=!1;this.consentShown=!1;this.errorMessage="";this.showError=!1;this.successMessage="";this.showSuccess=!1;this.infoMessage="";this.showInfo=!1}get siteId(){return s(this,m)}set siteId(e){i(this,m,e)}get domain(){return s(this,v)}set domain(e){i(this,v,e)}get matomoURL(){return s(this,w)}set matomoURL(e){i(this,w,e)}get showConsent(){return s(this,f)}set showConsent(e){i(this,f,e)}get consentMessage(){return s(this,x)}set consentMessage(e){i(this,x,e)}get consentKey(){return`hot-matomo-consent-${this.siteId}`}getStoredConsent(){let e=localStorage.getItem(this.consentKey);return e===null?null:e==="true"}setStoredConsent(e){localStorage.setItem(this.consentKey,String(e))}agree(){this.consentGiven=!0,this.consentShown=!1,this.setStoredConsent(!0);let e=window._paq=window._paq||[];e.push(["rememberConsentGiven"]),e.push(["trackPageView"]),this.showSuccessCallout("Tracking consent granted. Thank you!")}disagree(){this.consentGiven=!1,this.consentShown=!1,this.setStoredConsent(!1),(window._paq=window._paq||[]).push(["forgetConsentGiven"]),this.showInfoCallout("Tracking disabled. You can change this preference later.")}showConsentBanner(){this.showConsent&&!this.consentGiven&&!this.consentShown&&(this.consentShown=!0)}showErrorCallout(e){this.errorMessage=e,this.showError=!0,setTimeout(()=>{this.showError=!1},1e4)}showSuccessCallout(e){this.successMessage=e,this.showSuccess=!0,setTimeout(()=>{this.showSuccess=!1},5e3)}showInfoCallout(e){this.infoMessage=e,this.showInfo=!0,setTimeout(()=>{this.showInfo=!1},5e3)}render(){return l`
2
- ${this.showError?l`
1
+ import{a as l,b as r}from"./chunk.ZETV7TDG.js";import{a as g,d as h,f as b}from"./chunk.QABMDRWR.js";import{d as t,e as s,f as n,g as i}from"./chunk.N2W26RCT.js";Promise.allSettled([import("@awesome.me/webawesome/dist/components/callout/callout.js"),import("@awesome.me/webawesome/dist/components/icon/icon.js"),import("@awesome.me/webawesome/dist/components/button/button.js"),import("@awesome.me/webawesome/dist/components/dialog/dialog.js")]);var m,w,v,f,x,a=class extends b{constructor(){super(...arguments);this.name="hot-tracking";n(this,m,"");n(this,w,"");n(this,v,"https://matomo.hotosm.org");n(this,f,!0);n(this,x,"We use cookies and similar technologies to help personalize content, tailor and measure ads, and provide a better experience. By clicking 'Accept', you consent to our use of cookies and tracking technologies.");this.consentGiven=!1;this.consentShown=!1;this.errorMessage="";this.showError=!1;this.successMessage="";this.showSuccess=!1;this.infoMessage="";this.showInfo=!1}get siteId(){return s(this,m)}set siteId(e){i(this,m,e)}get domain(){return s(this,w)}set domain(e){i(this,w,e)}get matomoURL(){return s(this,v)}set matomoURL(e){i(this,v,e)}get showConsent(){return s(this,f)}set showConsent(e){i(this,f,e)}get consentMessage(){return s(this,x)}set consentMessage(e){i(this,x,e)}get consentKey(){return`hot-matomo-consent-${this.siteId}`}getStoredConsent(){let e=localStorage.getItem(this.consentKey);return e===null?null:e==="true"}setStoredConsent(e){localStorage.setItem(this.consentKey,String(e))}agree(){this.consentGiven=!0,this.consentShown=!1,this.setStoredConsent(!0);let e=window._paq=window._paq||[];e.push(["rememberConsentGiven"]),e.push(["trackPageView"]),this.showSuccessCallout("Tracking consent granted. Thank you!")}disagree(){this.consentGiven=!1,this.consentShown=!1,this.setStoredConsent(!1),(window._paq=window._paq||[]).push(["forgetConsentGiven"]),this.showInfoCallout("Tracking disabled. You can change this preference later.")}showConsentBanner(){this.showConsent&&!this.consentGiven&&!this.consentShown&&(this.consentShown=!0)}showErrorCallout(e){this.errorMessage=e,this.showError=!0,setTimeout(()=>{this.showError=!1},1e4)}showSuccessCallout(e){this.successMessage=e,this.showSuccess=!0,setTimeout(()=>{this.showSuccess=!1},5e3)}showInfoCallout(e){this.infoMessage=e,this.showInfo=!0,setTimeout(()=>{this.showInfo=!1},5e3)}render(){return h`
2
+ ${this.showError?h`
3
3
  <div class="error-banner">
4
4
  <wa-callout style="padding: 1rem;" variant="danger" appearance="outlined filled" size="large">
5
5
  <wa-icon slot="icon" family="classic" variant="solid" name="circle-exclamation"></wa-icon>
@@ -11,7 +11,7 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
11
11
  </div>
12
12
  `:""}
13
13
 
14
- ${this.showSuccess?l`
14
+ ${this.showSuccess?h`
15
15
  <div class="toast-banner">
16
16
  <wa-callout style="padding: 1rem;" variant="success" appearance="outlined accent" size="medium">
17
17
  <wa-icon slot="icon" family="classic" variant="solid" name="circle-check"></wa-icon>
@@ -23,7 +23,7 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
23
23
  </div>
24
24
  `:""}
25
25
 
26
- ${this.showInfo?l`
26
+ ${this.showInfo?h`
27
27
  <div class="toast-banner">
28
28
  <wa-callout style="padding: 1rem;" variant="brand" appearance="outlined filled" size="medium">
29
29
  <wa-icon slot="icon" family="classic" variant="solid" name="circle-info"></wa-icon>
@@ -35,41 +35,50 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
35
35
  </div>
36
36
  `:""}
37
37
 
38
- ${this.consentShown?l`
39
- <div class="consent-banner">
40
- <wa-callout variant="brand" appearance="outlined filled" size="large">
41
- <wa-icon slot="icon" family="classic" variant="solid" name="shield-check"></wa-icon>
42
- <div style="padding: 1rem;">
43
- <strong>Privacy & Tracking</strong><br />
44
- ${this.consentMessage}
45
- <div class="consent-actions">
46
- <wa-button size="small" variant="neutral" @click=${e=>{e.preventDefault(),e.stopPropagation(),this.disagree()}}>
47
- Decline
48
- </wa-button>
49
- <wa-button size="small" variant="brand" @click=${e=>{e.preventDefault(),e.stopPropagation(),this.agree()}}>
50
- Accept
51
- </wa-button>
52
- </div>
53
- </div>
54
- </wa-callout>
38
+ <wa-dialog
39
+ label="Privacy & Tracking"
40
+ ?open=${this.consentShown}
41
+ @wa-hide=${e=>{this.consentShown&&e.preventDefault()}}
42
+ >
43
+ ${this.consentMessage}
44
+ <div slot="footer" class="consent-actions">
45
+ <wa-button size="small" variant="neutral" @click=${()=>this.disagree()}>
46
+ Decline
47
+ </wa-button>
48
+ <wa-button size="small" variant="brand" @click=${()=>this.agree()}>
49
+ Accept
50
+ </wa-button>
55
51
  </div>
56
- `:""}
57
- `}connectedCallback(){if(super.connectedCallback(),window.location.hostname!==this.domain){console.warn(`[hot-tracking] Domain mismatch: expected "${this.domain}", got "${window.location.hostname}". Tracking disabled.`);return}let e=this.siteId;if(e.length===0||this.domain.length===0){this.showErrorCallout("Matomo tracking is not properly configured. Please provide both site-id and domain attributes.");return}let o=window._paq=window._paq||[];if(o.push(["setDomains",[this.domain]]),o.push(["enableLinkTracking"]),o.push(["trackVisibleContentImpressions"]),(function(d){o.push(["setTrackerUrl",`${d}/matomo.php`]),o.push(["setSiteId",e]);let u=document,h=u.createElement("script"),p=u.getElementsByTagName("script")[0];(p==null?void 0:p.parentNode)!=null?(h.async=!0,h.src=`${d}/matomo.js`,p.parentNode.insertBefore(h,p)):console.warn("Script insertion failed. Parent node is null.")})(this.matomoURL),this.showConsent){o.push(["requireConsent"]);let d=this.getStoredConsent();d===!0?(this.consentGiven=!0,o.push(["rememberConsentGiven"]),o.push(["trackPageView"])):d===!1?this.consentGiven=!1:setTimeout(()=>{this.showConsentBanner()},1e3)}else o.push(["trackPageView"])}};m=new WeakMap,v=new WeakMap,w=new WeakMap,f=new WeakMap,x=new WeakMap,r.styles=g`
52
+ </wa-dialog>
53
+ `}connectedCallback(){if(super.connectedCallback(),window.location.hostname!==this.domain){console.warn(`[hot-tracking] Domain mismatch: expected "${this.domain}", got "${window.location.hostname}". Tracking disabled.`);return}let e=this.siteId;if(e.length===0||this.domain.length===0){this.showErrorCallout("Matomo tracking is not properly configured. Please provide both site-id and domain attributes.");return}let o=window._paq=window._paq||[];if(o.push(["setDomains",[this.domain]]),o.push(["enableLinkTracking"]),o.push(["trackVisibleContentImpressions"]),(function(c){o.push(["setTrackerUrl",`${c}/matomo.php`]),o.push(["setSiteId",e]);let u=document,p=u.createElement("script"),d=u.getElementsByTagName("script")[0];(d==null?void 0:d.parentNode)!=null?(p.async=!0,p.src=`${c}/matomo.js`,d.parentNode.insertBefore(p,d)):console.warn("Script insertion failed. Parent node is null.")})(this.matomoURL),this.showConsent){o.push(["requireConsent"]);let c=this.getStoredConsent();c===!0?(this.consentGiven=!0,o.push(["rememberConsentGiven"]),o.push(["trackPageView"])):c===!1?this.consentGiven=!1:this.showConsentBanner()}else o.push(["trackPageView"])}};m=new WeakMap,w=new WeakMap,v=new WeakMap,f=new WeakMap,x=new WeakMap,a.styles=g`
58
54
  :host {
59
55
  display: block;
60
56
  font-family: var(--hot-font-sans);
61
57
  }
62
58
 
63
- .consent-banner {
59
+ wa-dialog {
60
+ --width: 100vw;
61
+ }
62
+
63
+ wa-dialog::part(dialog) {
64
64
  position: fixed;
65
- bottom: 0;
66
- left: 0;
67
- right: 0;
68
- z-index: 1000;
69
- padding: var(--hot-spacing-medium);
70
- background: rgba(255, 255, 255, 0.95);
71
- backdrop-filter: blur(10px);
72
- border-top: 1px solid var(--wa-color-surface-border);
65
+ inset: auto 0 0 0;
66
+ margin: 0;
67
+ max-width: 100vw;
68
+ max-height: none;
69
+ border-radius: var(--hot-border-radius-large) var(--hot-border-radius-large) 0 0;
70
+ }
71
+
72
+ wa-dialog::part(title) {
73
+ font-weight: var(--hot-font-weight-semibold);
74
+ }
75
+
76
+ wa-dialog::part(body) {
77
+ padding: var(--hot-spacing-medium) var(--hot-spacing-large);
78
+ }
79
+
80
+ wa-dialog::part(footer) {
81
+ padding: var(--hot-spacing-medium) var(--hot-spacing-large);
73
82
  }
74
83
 
75
84
  .error-banner {
@@ -105,7 +114,6 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
105
114
  .consent-actions {
106
115
  display: flex;
107
116
  gap: var(--hot-spacing-small);
108
- margin-top: var(--hot-spacing-medium);
109
117
  justify-content: flex-end;
110
118
  }
111
119
 
@@ -205,39 +213,11 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
205
213
  border-radius: var(--hot-border-radius-x-large) var(--hot-border-radius-x-large) 0 0;
206
214
  }
207
215
 
208
- .consent-banner wa-callout {
209
- border-radius: var(--hot-border-radius-x-large);
210
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
211
- border: 1px solid var(--wa-color-surface-border);
212
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98));
213
- backdrop-filter: blur(16px);
214
- }
215
-
216
- .consent-banner wa-callout::before {
217
- content: "";
218
- position: absolute;
219
- top: 0;
220
- left: 0;
221
- right: 0;
222
- height: 4px;
223
- background: linear-gradient(
224
- 90deg,
225
- var(--hot-color-primary-500),
226
- var(--hot-color-primary-600),
227
- var(--hot-color-primary-700)
228
- );
229
- border-radius: var(--hot-border-radius-x-large) var(--hot-border-radius-x-large) 0 0;
230
- }
231
-
232
216
  wa-icon {
233
217
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
234
218
  }
235
219
 
236
220
  @media (max-width: 768px) {
237
- .consent-banner {
238
- padding: var(--hot-spacing-small);
239
- }
240
-
241
221
  .error-banner {
242
222
  left: var(--hot-spacing-x-small);
243
223
  right: var(--hot-spacing-x-small);
@@ -248,14 +228,5 @@ import{a as c,b as t}from"./chunk.ZETV7TDG.js";import{a as g,d as l,f as b}from"
248
228
  right: var(--hot-spacing-x-small);
249
229
  max-width: calc(100vw - var(--hot-spacing-medium));
250
230
  }
251
-
252
- .consent-actions {
253
- flex-direction: column;
254
- gap: var(--hot-spacing-x-small);
255
- }
256
-
257
- wa-button {
258
- width: 100%;
259
- }
260
231
  }
261
- `,a([c({type:String,attribute:"site-id"})],r.prototype,"siteId",1),a([c({type:String})],r.prototype,"domain",1),a([c({type:String})],r.prototype,"matomoURL",1),a([c({type:Boolean,attribute:"show-consent"})],r.prototype,"showConsent",1),a([c({type:String,attribute:"consent-message"})],r.prototype,"consentMessage",1),a([t()],r.prototype,"consentGiven",2),a([t()],r.prototype,"consentShown",2),a([t()],r.prototype,"errorMessage",2),a([t()],r.prototype,"showError",2),a([t()],r.prototype,"successMessage",2),a([t()],r.prototype,"showSuccess",2),a([t()],r.prototype,"infoMessage",2),a([t()],r.prototype,"showInfo",2);var I=r;export{r as a,I as b};
232
+ `,t([l({type:String,attribute:"site-id"})],a.prototype,"siteId",1),t([l({type:String})],a.prototype,"domain",1),t([l({type:String})],a.prototype,"matomoURL",1),t([l({type:Boolean,attribute:"show-consent"})],a.prototype,"showConsent",1),t([l({type:String,attribute:"consent-message"})],a.prototype,"consentMessage",1),t([r()],a.prototype,"consentGiven",2),t([r()],a.prototype,"consentShown",2),t([r()],a.prototype,"errorMessage",2),t([r()],a.prototype,"showError",2),t([r()],a.prototype,"successMessage",2),t([r()],a.prototype,"showSuccess",2),t([r()],a.prototype,"infoMessage",2),t([r()],a.prototype,"showInfo",2);var I=a;export{a,I as b};
@@ -1 +1 @@
1
- import{b as t}from"./chunk.AA57UJ2D.js";var a=t;customElements.get("hot-tracking")||customElements.define("hot-tracking",t);export{a};
1
+ import{b as t}from"./chunk.DNXHV7I7.js";var a=t;customElements.get("hot-tracking")||customElements.define("hot-tracking",t);export{a};
@@ -1 +1 @@
1
- import{a,b}from"../../chunks/chunk.AA57UJ2D.js";import"../../chunks/chunk.ZETV7TDG.js";import"../../chunks/chunk.QABMDRWR.js";import"../../chunks/chunk.N2W26RCT.js";export{a as MatomoTracking,b as default};
1
+ import{a,b}from"../../chunks/chunk.DNXHV7I7.js";import"../../chunks/chunk.ZETV7TDG.js";import"../../chunks/chunk.QABMDRWR.js";import"../../chunks/chunk.N2W26RCT.js";export{a as MatomoTracking,b as default};
@@ -1 +1 @@
1
- import{a}from"../../chunks/chunk.CCOEI6XU.js";import"../../chunks/chunk.AA57UJ2D.js";import"../../chunks/chunk.ZETV7TDG.js";import"../../chunks/chunk.QABMDRWR.js";import"../../chunks/chunk.N2W26RCT.js";export{a as default};
1
+ import{a}from"../../chunks/chunk.V5BQICX2.js";import"../../chunks/chunk.DNXHV7I7.js";import"../../chunks/chunk.ZETV7TDG.js";import"../../chunks/chunk.QABMDRWR.js";import"../../chunks/chunk.N2W26RCT.js";export{a as default};
package/dist/hotosm-ui.js CHANGED
@@ -1 +1 @@
1
- import{a as d}from"./chunks/chunk.ZG2J5SU5.js";import{a as S}from"./chunks/chunk.V7C4W6GD.js";import"./chunks/chunk.24HG5LKA.js";import"./chunks/chunk.DCR6GEE6.js";import{a as p}from"./chunks/chunk.CCOEI6XU.js";import"./chunks/chunk.AA57UJ2D.js";import{a as m}from"./chunks/chunk.FZ7HQZU4.js";import"./chunks/chunk.XFKYNNG3.js";import"./chunks/chunk.6WYUOJRX.js";import"./chunks/chunk.34AG3B2Y.js";import"./chunks/chunk.ZKUACKKG.js";import{a as u}from"./chunks/chunk.N7SRHM5F.js";import"./chunks/chunk.ZZ7X3H3S.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.TUEFHEUN.js";import{a as h}from"./chunks/chunk.3AWIVJTF.js";import"./chunks/chunk.PESN3BZK.js";import{a as f}from"./chunks/chunk.MKQTK2RW.js";import"./chunks/chunk.NCBKWO6J.js";import"./chunks/chunk.UVBWHOA2.js";import"./chunks/chunk.ZETV7TDG.js";import"./chunks/chunk.L7KUSNV7.js";import"./chunks/chunk.QABMDRWR.js";import"./chunks/chunk.N2W26RCT.js";function a(o,e=document){let t=[],r=e.querySelectorAll(o);return t.push(...Array.from(r)),e.querySelectorAll("*").forEach(i=>{i.shadowRoot&&t.push(...a(o,i.shadowRoot))}),t}function y(o){let{css:e,selector:t="wa-button",all:r=!0,styleId:s="hot-theme-injection"}=o;(r?a(t):[a(t)[0]].filter(Boolean)).forEach(n=>{if(!n)return;let c=()=>{if(!n.shadowRoot){setTimeout(c,10);return}if(n.shadowRoot.getElementById(s))return;let l=document.createElement("style");l.id=s,l.textContent=e,n.shadowRoot.appendChild(l)};c()})}export{u as Consent,h as FileInputDropzone,m as Header,f as ListCard,d as Logo,S as ToolMenu,p as Tracking,y as injectCSSIntoShadowDOM};
1
+ import{a as d}from"./chunks/chunk.ZG2J5SU5.js";import{a as S}from"./chunks/chunk.V7C4W6GD.js";import"./chunks/chunk.24HG5LKA.js";import"./chunks/chunk.DCR6GEE6.js";import{a as p}from"./chunks/chunk.V5BQICX2.js";import"./chunks/chunk.DNXHV7I7.js";import{a as m}from"./chunks/chunk.FZ7HQZU4.js";import"./chunks/chunk.XFKYNNG3.js";import"./chunks/chunk.6WYUOJRX.js";import"./chunks/chunk.34AG3B2Y.js";import"./chunks/chunk.ZKUACKKG.js";import{a as u}from"./chunks/chunk.N7SRHM5F.js";import"./chunks/chunk.ZZ7X3H3S.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.TUEFHEUN.js";import{a as h}from"./chunks/chunk.3AWIVJTF.js";import"./chunks/chunk.PESN3BZK.js";import{a as f}from"./chunks/chunk.MKQTK2RW.js";import"./chunks/chunk.NCBKWO6J.js";import"./chunks/chunk.UVBWHOA2.js";import"./chunks/chunk.ZETV7TDG.js";import"./chunks/chunk.L7KUSNV7.js";import"./chunks/chunk.QABMDRWR.js";import"./chunks/chunk.N2W26RCT.js";function a(o,e=document){let t=[],r=e.querySelectorAll(o);return t.push(...Array.from(r)),e.querySelectorAll("*").forEach(i=>{i.shadowRoot&&t.push(...a(o,i.shadowRoot))}),t}function y(o){let{css:e,selector:t="wa-button",all:r=!0,styleId:s="hot-theme-injection"}=o;(r?a(t):[a(t)[0]].filter(Boolean)).forEach(n=>{if(!n)return;let c=()=>{if(!n.shadowRoot){setTimeout(c,10);return}if(n.shadowRoot.getElementById(s))return;let l=document.createElement("style");l.id=s,l.textContent=e,n.shadowRoot.appendChild(l)};c()})}export{u as Consent,h as FileInputDropzone,m as Header,f as ListCard,d as Logo,S as ToolMenu,p as Tracking,y as injectCSSIntoShadowDOM};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hotosm/ui",
3
- "version": "0.9.1",
3
+ "version": "0.9.2",
4
4
  "description": "Shared UI components with HOT theming.",
5
5
  "homepage": "https://github.com/hotosm/ui#readme",
6
6
  "license": "AGPL-3.0-only",