From 44b9d4e7dd2e13e24cbfb22550a46cca033126aa Mon Sep 17 00:00:00 2001 From: Emilio Mariscal Date: Fri, 11 Oct 2024 13:31:30 -0300 Subject: [PATCH] + Consent/Tracking --- ...ngMatomo.stories.ts => consent.stories.ts} | 43 +++-- .storybook/stories/tracking.stories.ts | 68 ++++--- dist/chunks/chunk.2TNX6QZD.js | 1 - dist/chunks/chunk.4DV2WAS7.js | 18 -- dist/chunks/chunk.BZRLYTOZ.js | 26 --- dist/chunks/chunk.TKDHYEFH.js | 19 -- dist/chunks/chunk.X6LBY34G.js | 32 ---- .../matomoTracking.component.d.ts | 24 --- .../matomoTracking.component.js | 1 - .../matomoTracking/matomoTracking.d.ts | 8 - .../matomoTracking/matomoTracking.js | 1 - .../matomoTracking/matomoTracking.styles.d.ts | 2 - .../matomoTracking/matomoTracking.styles.js | 1 - .../tracking/tracking.component.d.ts | 30 ++- .../components/tracking/tracking.component.js | 2 +- dist/components/tracking/tracking.d.ts | 6 +- dist/components/tracking/tracking.js | 2 +- dist/components/tracking/tracking.styles.d.ts | 2 - dist/components/tracking/tracking.styles.js | 1 - dist/hotosm-ui.d.ts | 4 +- dist/hotosm-ui.js | 2 +- dist/react/index.js | 2 +- dist/react/matomoTracking/index.d.ts | 2 +- dist/react/matomoTracking/index.js | 2 +- dist/react/tracking/index.d.ts | 2 +- dist/react/tracking/index.js | 2 +- src/components/consent/consent.component.ts | 108 +++++++++++ .../consent.styles.ts} | 8 +- src/components/consent/consent.ts | 11 ++ .../matomoTracking.component.ts | 175 ------------------ .../matomoTracking/matomoTracking.styles.ts | 21 --- .../matomoTracking/matomoTracking.ts | 11 -- src/components/tracking/tracking.component.ts | 147 +++++++-------- src/components/tracking/tracking.ts | 6 +- src/hotosm-ui.ts | 4 +- src/react/matomoTracking/index.ts | 2 +- src/react/tracking/index.ts | 2 +- 37 files changed, 289 insertions(+), 509 deletions(-) rename .storybook/stories/{trackingMatomo.stories.ts => consent.stories.ts} (64%) delete mode 100644 dist/chunks/chunk.2TNX6QZD.js delete mode 100644 dist/chunks/chunk.4DV2WAS7.js delete mode 100644 dist/chunks/chunk.BZRLYTOZ.js delete mode 100644 dist/chunks/chunk.TKDHYEFH.js delete mode 100644 dist/chunks/chunk.X6LBY34G.js delete mode 100644 dist/components/matomoTracking/matomoTracking.component.d.ts delete mode 100644 dist/components/matomoTracking/matomoTracking.component.js delete mode 100644 dist/components/matomoTracking/matomoTracking.d.ts delete mode 100644 dist/components/matomoTracking/matomoTracking.js delete mode 100644 dist/components/matomoTracking/matomoTracking.styles.d.ts delete mode 100644 dist/components/matomoTracking/matomoTracking.styles.js delete mode 100644 dist/components/tracking/tracking.styles.d.ts delete mode 100644 dist/components/tracking/tracking.styles.js create mode 100644 src/components/consent/consent.component.ts rename src/components/{tracking/tracking.styles.ts => consent/consent.styles.ts} (77%) create mode 100644 src/components/consent/consent.ts delete mode 100644 src/components/matomoTracking/matomoTracking.component.ts delete mode 100644 src/components/matomoTracking/matomoTracking.styles.ts delete mode 100644 src/components/matomoTracking/matomoTracking.ts diff --git a/.storybook/stories/trackingMatomo.stories.ts b/.storybook/stories/consent.stories.ts similarity index 64% rename from .storybook/stories/trackingMatomo.stories.ts rename to .storybook/stories/consent.stories.ts index 2c2aefa..e79c8c0 100644 --- a/.storybook/stories/trackingMatomo.stories.ts +++ b/.storybook/stories/consent.stories.ts @@ -5,12 +5,12 @@ import { html } from "lit"; import "../../src/hotosm-ui"; const meta: Meta = { - title: "Tracking", - component: "hot-tracking", + title: "Consent", + component: "hot-consent", }; export default meta; -export const TrackingMatomo: StoryObj = { +export const Consent: StoryObj = { args: { siteId: "1", domain: "localhost", @@ -22,31 +22,25 @@ export const TrackingMatomo: StoryObj = { type: "select", }, }, - domain: { - options: ["localhost", "anotherdomain"], - control: { - type: "select", - }, - }, }, parameters: { showAgreeToast: () => { const agree = document.getElementById("agree-toast"); if (agree) { - agree.toast(); + // agree.toast(); } }, showDisagreeToast: () => { const disagree = document.getElementById("disagree-toast"); if (disagree) { - disagree.toast(); + // disagree.toast(); } }, addKeyLocalStorage: (siteId: number) => { - localStorage.setItem(`${siteId}-matomo-agree`, 'true'); + localStorage.setItem(`${siteId}-consent-agree`, 'true'); }, removeKeyLocalStorage: (siteId: number) => { - localStorage.removeItem(`${siteId}-matomo-agree`); + localStorage.removeItem(`${siteId}-consent-agree`); }, }, render: (args, { parameters }) => { @@ -58,17 +52,30 @@ export const TrackingMatomo: StoryObj = { parameters.addKeyLocalStorage(args.siteId) }}>Disable Banner

- { parameters.showAgreeToast() }} @disagree=${() => { parameters.showDisagreeToast() }} - > + > + We use cookies and similar technologies to recognize and analyze your + visits, and measure traffic usage and activity. You can learn about how + we use the data about your visit or information you provide reading our + privacy policy. By clicking "I Agree", you consent to the use of cookies. + diff --git a/.storybook/stories/tracking.stories.ts b/.storybook/stories/tracking.stories.ts index a7d373a..4f5b2d9 100644 --- a/.storybook/stories/tracking.stories.ts +++ b/.storybook/stories/tracking.stories.ts @@ -22,25 +22,39 @@ export const Tracking: StoryObj = { type: "select", }, }, + domain: { + options: ["localhost", "anotherdomain"], + control: { + type: "select", + }, + }, }, parameters: { - showAgreeToast: () => { - const agree = document.getElementById("agree-toast"); - if (agree) { - agree.toast(); + agree: (siteId, domain) => { + const tracking = document.getElementById("hot-tracking"); + console.log(tracking) + if (tracking) { + tracking.agree( + siteId, + domain + ); + } + const agreeAlert = document.getElementById("agree-alert"); + if (agreeAlert) { + agreeAlert.toast(); } }, - showDisagreeToast: () => { - const disagree = document.getElementById("disagree-toast"); - if (disagree) { - disagree.toast(); + disagree: () => { + const disagreeAlert = document.getElementById("disagree-alert"); + if (disagreeAlert) { + disagreeAlert.toast(); } }, addKeyLocalStorage: (siteId: number) => { - localStorage.setItem(`${siteId}-tracking-agree`, 'true'); + localStorage.setItem(`${siteId}-consent-agree`, 'true'); }, removeKeyLocalStorage: (siteId: number) => { - localStorage.removeItem(`${siteId}-tracking-agree`); + localStorage.removeItem(`${siteId}-consent-agree`); }, }, render: (args, { parameters }) => { @@ -51,38 +65,34 @@ export const Tracking: StoryObj = { { parameters.addKeyLocalStorage(args.siteId) }}>Disable Banner +

- { - parameters.showAgreeToast() + parameters.agree(args.siteId, args.domain) }} @disagree=${() => { - parameters.showDisagreeToast() + parameters.disagree() }} + > + + - We use cookies and similar technologies to recognize and analyze your - visits, and measure traffic usage and activity. You can learn about how - we use the data about your visit or information you provide reading our - privacy policy. By clicking "I Agree", you consent to the use of cookies. - + You clicked agree. - + You clicked disagree. diff --git a/dist/chunks/chunk.2TNX6QZD.js b/dist/chunks/chunk.2TNX6QZD.js deleted file mode 100644 index d09737e..0000000 --- a/dist/chunks/chunk.2TNX6QZD.js +++ /dev/null @@ -1 +0,0 @@ -import{b as t}from"./chunk.BZRLYTOZ.js";import*as e from"react";import{createComponent as a}from"@lit/react";var o="hot-tracking",r=a({tagName:o,elementClass:t,react:e,events:{},displayName:"Tracking"}),p=r;export{p as a}; diff --git a/dist/chunks/chunk.4DV2WAS7.js b/dist/chunks/chunk.4DV2WAS7.js deleted file mode 100644 index ca984ea..0000000 --- a/dist/chunks/chunk.4DV2WAS7.js +++ /dev/null @@ -1,18 +0,0 @@ -import{css as t}from"lit";var o=t` - .tracking { - text-align: center; - } - - .tracking--header { - font-weight: var(--hot-font-weight-semibold); - font-size: var(--hot-font-size-large); - } - - .tracking--link { - color: var(--hot-color-primary-700); - } - - .tracking--message { - margin-bottom: var(--hot-spacing-large); - } -`;export{o as a}; diff --git a/dist/chunks/chunk.BZRLYTOZ.js b/dist/chunks/chunk.BZRLYTOZ.js deleted file mode 100644 index 37e015c..0000000 --- a/dist/chunks/chunk.BZRLYTOZ.js +++ /dev/null @@ -1,26 +0,0 @@ -import{a as l}from"./chunk.4DV2WAS7.js";import{a as n}from"./chunk.WPXUR5EI.js";import{a as s,b as r,c as a,d as i}from"./chunk.FWYUHKRF.js";import"@shoelace-style/shoelace/dist/components/alert/alert.js";import{LitElement as m,html as c}from"lit";import{property as o}from"lit/decorators.js";n();var g,u,p,d,b,h,f,e=class extends m{constructor(){super(...arguments);this.name="hot-tracking";a(this,g,"");a(this,u,!1);a(this,p,!0);a(this,d,"About the information we collect");a(this,b,c`

We use cookies and similar technologies to \ - recognize and analyze your visits, and measure traffic usage and activity.

`);a(this,h,"I Agree");a(this,f,"I Do Dot Agree")}get siteId(){return r(this,g)}set siteId(t){i(this,g,t)}get force(){return r(this,u)}set force(t){i(this,u,t)}get isOpen(){return r(this,p)}set isOpen(t){i(this,p,t)}get title(){return r(this,d)}set title(t){i(this,d,t)}get message(){return r(this,b)}set message(t){i(this,b,t)}get agreeLabel(){return r(this,h)}set agreeLabel(t){i(this,h,t)}get notAgreeLabel(){return r(this,f)}set notAgreeLabel(t){i(this,f,t)}render(){return c` - - -

- ${this.title} -

- -

- -

- - {this._setAgree(t)}} - >${this.agreeLabel} - {this._setDisagree(t)}} - >${this.notAgreeLabel} - `}_setAgree(t){this.isOpen=!1,localStorage.setItem(`${this.siteId}-tracking-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0}))}_setDisagree(t){this.isOpen=!1,localStorage.setItem(`${this.siteId}-tracking-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(`${this.siteId}-tracking-agree`);if(t==="false"){this.isOpen=!1;return}t==="true"&&(this.isOpen=!1)}};g=new WeakMap,u=new WeakMap,p=new WeakMap,d=new WeakMap,b=new WeakMap,h=new WeakMap,f=new WeakMap,e.styles=[l],s([o({type:String,attribute:"site-id"})],e.prototype,"siteId",1),s([o({type:Boolean})],e.prototype,"force",1),s([o({type:Boolean})],e.prototype,"isOpen",1),s([o({type:String})],e.prototype,"title",1),s([o({type:String})],e.prototype,"message",1),s([o({type:String,attribute:"agree-label"})],e.prototype,"agreeLabel",1),s([o({type:String,attribute:"not-agree-label"})],e.prototype,"notAgreeLabel",1);var O=e;customElements.define("hot-tracking",e);export{e as a,O as b}; diff --git a/dist/chunks/chunk.TKDHYEFH.js b/dist/chunks/chunk.TKDHYEFH.js deleted file mode 100644 index 222395c..0000000 --- a/dist/chunks/chunk.TKDHYEFH.js +++ /dev/null @@ -1,19 +0,0 @@ -import{css as o}from"lit";var a=o` - .matomoTracking { - text-align: center; - } - - .matomoTracking--header { - font-weight: var(--hot-font-weight-semibold); - font-size: var(--hot-font-size-large); - text-align: center; - } - - .matomoTracking--link { - color: var(--hot-color-primary-700); - } - - .matomoTracking--message { - margin-bottom: var(--hot-spacing-large); - } -`;export{a}; diff --git a/dist/chunks/chunk.X6LBY34G.js b/dist/chunks/chunk.X6LBY34G.js deleted file mode 100644 index 8787777..0000000 --- a/dist/chunks/chunk.X6LBY34G.js +++ /dev/null @@ -1,32 +0,0 @@ -import{a as h}from"./chunk.TKDHYEFH.js";import{a as u}from"./chunk.WPXUR5EI.js";import{a as i,b as a,c as r,d as c}from"./chunk.FWYUHKRF.js";import"@shoelace-style/shoelace/dist/components/alert/alert.js";import{LitElement as y,html as v}from"lit";import{property as l}from"lit/decorators.js";u();var g,f,w,b,t=class extends y{constructor(){super(...arguments);this.name="hot-matomo-tracking";r(this,g,"");r(this,f,"");r(this,w,!1);r(this,b,!0)}get siteId(){return a(this,g)}set siteId(e){c(this,g,e)}get domain(){return a(this,f)}set domain(e){c(this,f,e)}get force(){return a(this,w)}set force(e){c(this,w,e)}get isOpen(){return a(this,b)}set isOpen(e){c(this,b,e)}render(){return v` - - -

About the information we collect

- -

- We use cookies and similar technologies to recognize and analyze your - visits, and measure traffic usage and activity. You can learn about how - we use the data about your visit or information you provide reading our - privacy policy. By clicking "I Agree", you consent to the use of cookies. -

- - {this._setAgree(e)}} - >I Agree - {this._setDisagree(e)}} - >I Do Not Agree - `}_setAgree(e){let o=window._paq=window._paq||[];o.length!==0&&(o.push(["rememberConsentGiven"]),this.isOpen=!1,localStorage.setItem(`${this.siteId}-matomo-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0})))}_setDisagree(e){let o=window._paq=window._paq||[];o.length!==0&&(o.push(["forgetConsentGiven"]),this.isOpen=!1,localStorage.setItem(`${this.siteId}-matomo-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0})))}connectedCallback(){if(super.connectedCallback(),!this.force&&window.location.hostname!==this.domain){console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`),this.isOpen=!1;return}let e=this.siteId;if(!this.force&&(e.length===0||this.domain.length===0)){console.warn("Matomo init failed. No site id or domains provided."),this.isOpen=!1;return}let o=localStorage.getItem(`${this.siteId}-matomo-agree`);if(o==="false"){this.isOpen=!1;return}o==="true"&&(this.isOpen=!1),console.log(`Setting Matomo tracking for site=${e} domain=${this.domain}`);let s=window._paq=window._paq||[];s.push(["requireConsent"]),s.push(["setDomains",[this.domain]]),s.push(["trackPageView"]),s.push(["enableLinkTracking"]),s.push(["trackVisibleContentImpressions"]),function(){let p="//matomo.hotosm.org/";s.push(["setTrackerUrl",p+"matomo.php"]),s.push(["setSiteId",e]);let d=document,m=d.createElement("script"),n=d.getElementsByTagName("script")[0];(n==null?void 0:n.parentNode)!=null?(m.async=!0,m.src=p+"matomo.js",n.parentNode.insertBefore(m,n)):console.warn("Script insertion failed. Parent node is null.")}()}};g=new WeakMap,f=new WeakMap,w=new WeakMap,b=new WeakMap,t.styles=[h],i([l({type:String,attribute:"site-id"})],t.prototype,"siteId",1),i([l({type:String})],t.prototype,"domain",1),i([l({type:Boolean})],t.prototype,"force",1),i([l({type:Boolean})],t.prototype,"isOpen",1);var C=t;customElements.define("hot-matomo-tracking",t);export{t as a,C as b}; diff --git a/dist/components/matomoTracking/matomoTracking.component.d.ts b/dist/components/matomoTracking/matomoTracking.component.d.ts deleted file mode 100644 index c8f5c6f..0000000 --- a/dist/components/matomoTracking/matomoTracking.component.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -import "@shoelace-style/shoelace/dist/components/alert/alert.js"; -import { LitElement } from "lit"; -import type { CSSResultGroup } from 'lit'; -declare global { - interface Window { - _paq: any[]; - } -} -export declare class MatomoTracking extends LitElement { - static styles: CSSResultGroup; - name: string; - /** The Matomo site id for tracking. */ - accessor siteId: string; - /** The domains to apply tracking. */ - accessor domain: string; - /** Force display the banner. */ - accessor force: boolean; - accessor isOpen: boolean; - protected render(): import("lit").TemplateResult<1>; - private _setAgree; - private _setDisagree; - connectedCallback(): void; -} -export default MatomoTracking; diff --git a/dist/components/matomoTracking/matomoTracking.component.js b/dist/components/matomoTracking/matomoTracking.component.js deleted file mode 100644 index 31d8b3b..0000000 --- a/dist/components/matomoTracking/matomoTracking.component.js +++ /dev/null @@ -1 +0,0 @@ -import{a,b}from"../../chunks/chunk.X6LBY34G.js";import"../../chunks/chunk.TKDHYEFH.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as MatomoTracking,b as default}; diff --git a/dist/components/matomoTracking/matomoTracking.d.ts b/dist/components/matomoTracking/matomoTracking.d.ts deleted file mode 100644 index 1c589f2..0000000 --- a/dist/components/matomoTracking/matomoTracking.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import MatomoTracking from './matomoTracking.component.js'; -export * from './matomoTracking.component.js'; -export default MatomoTracking; -declare global { - interface HTMLElementTagNameMap { - 'hot-matomo-tracking': MatomoTracking; - } -} diff --git a/dist/components/matomoTracking/matomoTracking.js b/dist/components/matomoTracking/matomoTracking.js deleted file mode 100644 index ec50be2..0000000 --- a/dist/components/matomoTracking/matomoTracking.js +++ /dev/null @@ -1 +0,0 @@ -import{a as o,b as a}from"../../chunks/chunk.X6LBY34G.js";import"../../chunks/chunk.TKDHYEFH.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";var e=a;export{o as MatomoTracking,e as default}; diff --git a/dist/components/matomoTracking/matomoTracking.styles.d.ts b/dist/components/matomoTracking/matomoTracking.styles.d.ts deleted file mode 100644 index b290bc1..0000000 --- a/dist/components/matomoTracking/matomoTracking.styles.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const _default: import("lit").CSSResult; -export default _default; diff --git a/dist/components/matomoTracking/matomoTracking.styles.js b/dist/components/matomoTracking/matomoTracking.styles.js deleted file mode 100644 index a056acc..0000000 --- a/dist/components/matomoTracking/matomoTracking.styles.js +++ /dev/null @@ -1 +0,0 @@ -import{a}from"../../chunks/chunk.TKDHYEFH.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as default}; diff --git a/dist/components/tracking/tracking.component.d.ts b/dist/components/tracking/tracking.component.d.ts index d01a32d..a330b7c 100644 --- a/dist/components/tracking/tracking.component.d.ts +++ b/dist/components/tracking/tracking.component.d.ts @@ -1,21 +1,19 @@ -import "@shoelace-style/shoelace/dist/components/alert/alert.js"; import { LitElement } from "lit"; -import type { CSSResultGroup } from 'lit'; -export declare class Tracking extends LitElement { - static styles: CSSResultGroup; +declare global { + interface Window { + _paq: any[]; + } +} +export declare class MatomoTracking extends LitElement { name: string; - /** The site id for tracking. */ + /** The Matomo site id for tracking. */ accessor siteId: string; - /** Force display the banner. */ - accessor force: boolean; - accessor isOpen: boolean; - accessor title: string; - accessor message: import("lit").TemplateResult<1>; - accessor agreeLabel: string; - accessor notAgreeLabel: string; - protected render(): import("lit").TemplateResult<1>; - private _setAgree; - private _setDisagree; + /** The domains to apply tracking. */ + accessor domain: string; + /** The Matomo URL */ + accessor matomoURL: string; + agree(): void; + disagree(): void; connectedCallback(): void; } -export default Tracking; +export default MatomoTracking; diff --git a/dist/components/tracking/tracking.component.js b/dist/components/tracking/tracking.component.js index 7016c73..851c9b1 100644 --- a/dist/components/tracking/tracking.component.js +++ b/dist/components/tracking/tracking.component.js @@ -1 +1 @@ -import{a,b}from"../../chunks/chunk.BZRLYTOZ.js";import"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Tracking,b as default}; +import{a,b}from"../../chunks/chunk.NZIJQUIE.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as MatomoTracking,b as default}; diff --git a/dist/components/tracking/tracking.d.ts b/dist/components/tracking/tracking.d.ts index 338b5ef..76f96c5 100644 --- a/dist/components/tracking/tracking.d.ts +++ b/dist/components/tracking/tracking.d.ts @@ -1,8 +1,8 @@ -import Tracking from './tracking.component.js'; +import MatomoTracking from './tracking.component.js'; export * from './tracking.component.js'; -export default Tracking; +export default MatomoTracking; declare global { interface HTMLElementTagNameMap { - 'hot-tracking': Tracking; + 'hot-tracking': MatomoTracking; } } diff --git a/dist/components/tracking/tracking.js b/dist/components/tracking/tracking.js index e918e77..4f2fcd1 100644 --- a/dist/components/tracking/tracking.js +++ b/dist/components/tracking/tracking.js @@ -1 +1 @@ -import{a as e,b as a}from"../../chunks/chunk.BZRLYTOZ.js";import"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";var t=a;export{e as Tracking,t as default}; +import{a as o,b as a}from"../../chunks/chunk.NZIJQUIE.js";import"../../chunks/chunk.FWYUHKRF.js";var r=a;export{o as MatomoTracking,r as default}; diff --git a/dist/components/tracking/tracking.styles.d.ts b/dist/components/tracking/tracking.styles.d.ts deleted file mode 100644 index b290bc1..0000000 --- a/dist/components/tracking/tracking.styles.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const _default: import("lit").CSSResult; -export default _default; diff --git a/dist/components/tracking/tracking.styles.js b/dist/components/tracking/tracking.styles.js deleted file mode 100644 index 252ce80..0000000 --- a/dist/components/tracking/tracking.styles.js +++ /dev/null @@ -1 +0,0 @@ -import{a}from"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as default}; diff --git a/dist/hotosm-ui.d.ts b/dist/hotosm-ui.d.ts index 9e26891..3678a22 100644 --- a/dist/hotosm-ui.d.ts +++ b/dist/hotosm-ui.d.ts @@ -1,8 +1,8 @@ import HotHeader from './components/header/header.component.js'; import HotLogo from './components/logo/logo.component.js'; import HotToolbar from './components/toolbar/toolbar.component.js'; -import HotMatomoTracking from './components/matomoTracking/matomoTracking.component.js'; import HotTracking from './components/tracking/tracking.component.js'; +import HotConsent from './components/consent/consent.component.js'; import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'; import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js'; import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js'; @@ -122,4 +122,4 @@ declare global { 'hot-visually-hidden': SlVisuallyHidden; } } -export { HotHeader as Header, HotLogo as Logo, HotToolbar as Toolbar, HotTracking as Tracking, HotMatomoTracking as MatomoTracking, setBasePath, SlAlert as Alert, SlAnimatedImage as AnimatedImage, SlAnimation as Animation, SlAvatar as Avatar, SlBadge as Badge, SlBreadcrumb as Breadcrumb, SlBreadcrumbItem as BreadcrumbItem, SlButton as Button, SlButtonGroup as ButtonGroup, SlCard as Card, SlCarousel as Carousel, SlCarouselItem as CarouselItem, SlCheckbox as Checkbox, SlColorPicker as ColorPicker, SlCopyButton as CopyButton, SlDetails as Details, SlDialog as Dialog, SlDivider as Divider, SlDrawer as Drawer, SlDropdown as Dropdown, SlFormatBytes as FormatBytes, SlFormatDate as FormatDate, SlFormatNumber as FormatNumber, SlIcon as Icon, SlIconButton as IconButton, SlImageComparer as ImageComparer, SlInclude as Include, SlInput as Input, SlMenu as Menu, SlMenuItem as MenuItem, SlMenuLabel as MenuLabel, SlMutationObserver as MutationObserver, SlOption as Option, SlPopup as Popup, SlProgressBar as ProgressBar, SlProgressRing as ProgressRing, SlRadio as Radio, SlRadioButton as RadioButton, SlRadioGroup as RadioGroup, SlRange as Range, SlRating as Rating, SlRelativeTime as RelativeTime, SlResizeObserver as ResizeObserver, SlSelect as Select, SlSkeleton as Skeleton, SlSpinner as Spinner, SlSplitPanel as SplitPanel, SlSwitch as Switch, SlTab as Tab, SlTabGroup as TabGroup, SlTabPanel as TabPanel, SlTag as Tag, SlTextarea as Textarea, SlTooltip as Tooltip, SlTree as Tree, SlTreeItem as TreeItem, SlVisuallyHidden as VisuallyHidden, }; +export { HotHeader as Header, HotLogo as Logo, HotToolbar as Toolbar, HotConsent as Consent, HotTracking as Tracking, setBasePath, SlAlert as Alert, SlAnimatedImage as AnimatedImage, SlAnimation as Animation, SlAvatar as Avatar, SlBadge as Badge, SlBreadcrumb as Breadcrumb, SlBreadcrumbItem as BreadcrumbItem, SlButton as Button, SlButtonGroup as ButtonGroup, SlCard as Card, SlCarousel as Carousel, SlCarouselItem as CarouselItem, SlCheckbox as Checkbox, SlColorPicker as ColorPicker, SlCopyButton as CopyButton, SlDetails as Details, SlDialog as Dialog, SlDivider as Divider, SlDrawer as Drawer, SlDropdown as Dropdown, SlFormatBytes as FormatBytes, SlFormatDate as FormatDate, SlFormatNumber as FormatNumber, SlIcon as Icon, SlIconButton as IconButton, SlImageComparer as ImageComparer, SlInclude as Include, SlInput as Input, SlMenu as Menu, SlMenuItem as MenuItem, SlMenuLabel as MenuLabel, SlMutationObserver as MutationObserver, SlOption as Option, SlPopup as Popup, SlProgressBar as ProgressBar, SlProgressRing as ProgressRing, SlRadio as Radio, SlRadioButton as RadioButton, SlRadioGroup as RadioGroup, SlRange as Range, SlRating as Rating, SlRelativeTime as RelativeTime, SlResizeObserver as ResizeObserver, SlSelect as Select, SlSkeleton as Skeleton, SlSpinner as Spinner, SlSplitPanel as SplitPanel, SlSwitch as Switch, SlTab as Tab, SlTabGroup as TabGroup, SlTabPanel as TabPanel, SlTag as Tag, SlTextarea as Textarea, SlTooltip as Tooltip, SlTree as Tree, SlTreeItem as TreeItem, SlVisuallyHidden as VisuallyHidden, }; diff --git a/dist/hotosm-ui.js b/dist/hotosm-ui.js index 420d594..5efb741 100644 --- a/dist/hotosm-ui.js +++ b/dist/hotosm-ui.js @@ -1 +1 @@ -import{b as r}from"./chunks/chunk.X6LBY34G.js";import"./chunks/chunk.TKDHYEFH.js";import{b as a}from"./chunks/chunk.BZRLYTOZ.js";import"./chunks/chunk.4DV2WAS7.js";import{b as t}from"./chunks/chunk.GVYEHPTU.js";import"./chunks/chunk.PUMXQ24J.js";import{b as o}from"./chunks/chunk.27YEAEMT.js";import"./chunks/chunk.WPXUR5EI.js";import"./chunks/chunk.4QDUS5ZV.js";import{b as e}from"./chunks/chunk.R73PKLI4.js";import"./chunks/chunk.KTVXG6ZT.js";import"./chunks/chunk.FWYUHKRF.js";import{setBasePath as uo}from"@shoelace-style/shoelace/dist/utilities/base-path.js";import i from"@shoelace-style/shoelace/dist/components/alert/alert.component.js";import m from"@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js";import l from"@shoelace-style/shoelace/dist/components/animation/animation.component.js";import n from"@shoelace-style/shoelace/dist/components/avatar/avatar.component.js";import p from"@shoelace-style/shoelace/dist/components/badge/badge.component.js";import d from"@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js";import s from"@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js";import S from"@shoelace-style/shoelace/dist/components/button/button.component.js";import f from"@shoelace-style/shoelace/dist/components/button-group/button-group.component.js";import h from"@shoelace-style/shoelace/dist/components/card/card.component.js";import u from"@shoelace-style/shoelace/dist/components/carousel/carousel.component.js";import b from"@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js";import c from"@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js";import g from"@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js";import T from"@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js";import B from"@shoelace-style/shoelace/dist/components/details/details.component.js";import I from"@shoelace-style/shoelace/dist/components/dialog/dialog.component.js";import v from"@shoelace-style/shoelace/dist/components/divider/divider.component.js";import R from"@shoelace-style/shoelace/dist/components/drawer/drawer.component.js";import C from"@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js";import k from"@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js";import P from"@shoelace-style/shoelace/dist/components/format-date/format-date.component.js";import D from"@shoelace-style/shoelace/dist/components/format-number/format-number.component.js";import M from"@shoelace-style/shoelace/dist/components/icon/icon.component.js";import w from"@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";import y from"@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js";import A from"@shoelace-style/shoelace/dist/components/include/include.component.js";import x from"@shoelace-style/shoelace/dist/components/input/input.component.js";import H from"@shoelace-style/shoelace/dist/components/menu/menu.component.js";import F from"@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js";import G from"@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js";import O from"@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js";import L from"@shoelace-style/shoelace/dist/components/option/option.component.js";import z from"@shoelace-style/shoelace/dist/components/popup/popup.component.js";import N from"@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js";import V from"@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js";import E from"@shoelace-style/shoelace/dist/components/radio/radio.component.js";import j from"@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js";import q from"@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js";import J from"@shoelace-style/shoelace/dist/components/range/range.component.js";import K from"@shoelace-style/shoelace/dist/components/rating/rating.component.js";import Q from"@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js";import U from"@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js";import W from"@shoelace-style/shoelace/dist/components/select/select.component.js";import X from"@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js";import Y from"@shoelace-style/shoelace/dist/components/spinner/spinner.component.js";import Z from"@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js";import _ from"@shoelace-style/shoelace/dist/components/switch/switch.component.js";import $ from"@shoelace-style/shoelace/dist/components/tab/tab.component.js";import oo from"@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js";import eo from"@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js";import to from"@shoelace-style/shoelace/dist/components/tag/tag.component.js";import ro from"@shoelace-style/shoelace/dist/components/textarea/textarea.component.js";import ao from"@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js";import io from"@shoelace-style/shoelace/dist/components/tree/tree.component.js";import mo from"@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js";import lo from"@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js";i.define("hot-alert");m.define("hot-animated-image");l.define("hot-animation");n.define("hot-avatar");p.define("hot-badge");d.define("hot-breadcrumb");s.define("hot-breadcrumb-item");S.define("hot-button");f.define("hot-button-group");h.define("hot-card");u.define("hot-carousel");b.define("hot-carousel-item");c.define("hot-checkbox");g.define("hot-color-picker");T.define("hot-copy-button");B.define("hot-details");I.define("hot-dialog");v.define("hot-divider");R.define("hot-drawer");C.define("hot-dropdown");k.define("hot-format-bytes");P.define("hot-format-date");D.define("hot-format-number");M.define("hot-icon");w.define("hot-icon-button");y.define("hot-image-comparer");A.define("hot-include");x.define("hot-input");H.define("hot-menu");F.define("hot-menu-item");G.define("hot-menu-label");O.define("hot-mutation-observer");L.define("hot-option");z.define("hot-popup");N.define("hot-progress-bar");V.define("hot-progress-ring");E.define("hot-radio");j.define("hot-radio-button");q.define("hot-radio-group");J.define("hot-range");K.define("hot-rating");Q.define("hot-relative-time");U.define("hot-resize-observer");W.define("hot-select");X.define("hot-skeleton");Y.define("hot-spinner");Z.define("hot-split-panel");_.define("hot-switch");$.define("hot-tab");oo.define("hot-tab-group");eo.define("hot-tab-panel");to.define("hot-tag");ro.define("hot-textarea");ao.define("hot-tooltip");io.define("hot-tree");mo.define("hot-tree-item");lo.define("hot-visually-hidden");export{i as Alert,m as AnimatedImage,l as Animation,n as Avatar,p as Badge,d as Breadcrumb,s as BreadcrumbItem,S as Button,f as ButtonGroup,h as Card,u as Carousel,b as CarouselItem,c as Checkbox,g as ColorPicker,T as CopyButton,B as Details,I as Dialog,v as Divider,R as Drawer,C as Dropdown,k as FormatBytes,P as FormatDate,D as FormatNumber,o as Header,M as Icon,w as IconButton,y as ImageComparer,A as Include,x as Input,e as Logo,r as MatomoTracking,H as Menu,F as MenuItem,G as MenuLabel,O as MutationObserver,L as Option,z as Popup,N as ProgressBar,V as ProgressRing,E as Radio,j as RadioButton,q as RadioGroup,J as Range,K as Rating,Q as RelativeTime,U as ResizeObserver,W as Select,X as Skeleton,Y as Spinner,Z as SplitPanel,_ as Switch,$ as Tab,oo as TabGroup,eo as TabPanel,to as Tag,ro as Textarea,t as Toolbar,ao as Tooltip,a as Tracking,io as Tree,mo as TreeItem,lo as VisuallyHidden,uo as setBasePath}; +import{b as e}from"./chunks/chunk.R73PKLI4.js";import"./chunks/chunk.KTVXG6ZT.js";import{b as t}from"./chunks/chunk.GVYEHPTU.js";import"./chunks/chunk.PUMXQ24J.js";import{b as r}from"./chunks/chunk.NZIJQUIE.js";import{b as a}from"./chunks/chunk.2YPBGQD6.js";import"./chunks/chunk.Q5SXKMUN.js";import{b as o}from"./chunks/chunk.27YEAEMT.js";import"./chunks/chunk.WPXUR5EI.js";import"./chunks/chunk.4QDUS5ZV.js";import"./chunks/chunk.FWYUHKRF.js";import{setBasePath as uo}from"@shoelace-style/shoelace/dist/utilities/base-path.js";import i from"@shoelace-style/shoelace/dist/components/alert/alert.component.js";import m from"@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js";import l from"@shoelace-style/shoelace/dist/components/animation/animation.component.js";import n from"@shoelace-style/shoelace/dist/components/avatar/avatar.component.js";import p from"@shoelace-style/shoelace/dist/components/badge/badge.component.js";import d from"@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js";import s from"@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js";import S from"@shoelace-style/shoelace/dist/components/button/button.component.js";import f from"@shoelace-style/shoelace/dist/components/button-group/button-group.component.js";import h from"@shoelace-style/shoelace/dist/components/card/card.component.js";import u from"@shoelace-style/shoelace/dist/components/carousel/carousel.component.js";import b from"@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js";import c from"@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js";import g from"@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js";import T from"@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js";import B from"@shoelace-style/shoelace/dist/components/details/details.component.js";import I from"@shoelace-style/shoelace/dist/components/dialog/dialog.component.js";import v from"@shoelace-style/shoelace/dist/components/divider/divider.component.js";import R from"@shoelace-style/shoelace/dist/components/drawer/drawer.component.js";import C from"@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js";import P from"@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js";import D from"@shoelace-style/shoelace/dist/components/format-date/format-date.component.js";import k from"@shoelace-style/shoelace/dist/components/format-number/format-number.component.js";import w from"@shoelace-style/shoelace/dist/components/icon/icon.component.js";import y from"@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";import M from"@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js";import A from"@shoelace-style/shoelace/dist/components/include/include.component.js";import x from"@shoelace-style/shoelace/dist/components/input/input.component.js";import H from"@shoelace-style/shoelace/dist/components/menu/menu.component.js";import F from"@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js";import G from"@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js";import O from"@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js";import L from"@shoelace-style/shoelace/dist/components/option/option.component.js";import z from"@shoelace-style/shoelace/dist/components/popup/popup.component.js";import N from"@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js";import V from"@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js";import E from"@shoelace-style/shoelace/dist/components/radio/radio.component.js";import j from"@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js";import q from"@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js";import J from"@shoelace-style/shoelace/dist/components/range/range.component.js";import K from"@shoelace-style/shoelace/dist/components/rating/rating.component.js";import Q from"@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js";import U from"@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js";import W from"@shoelace-style/shoelace/dist/components/select/select.component.js";import X from"@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js";import Y from"@shoelace-style/shoelace/dist/components/spinner/spinner.component.js";import Z from"@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js";import _ from"@shoelace-style/shoelace/dist/components/switch/switch.component.js";import $ from"@shoelace-style/shoelace/dist/components/tab/tab.component.js";import oo from"@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js";import eo from"@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js";import to from"@shoelace-style/shoelace/dist/components/tag/tag.component.js";import ro from"@shoelace-style/shoelace/dist/components/textarea/textarea.component.js";import ao from"@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js";import io from"@shoelace-style/shoelace/dist/components/tree/tree.component.js";import mo from"@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js";import lo from"@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js";i.define("hot-alert");m.define("hot-animated-image");l.define("hot-animation");n.define("hot-avatar");p.define("hot-badge");d.define("hot-breadcrumb");s.define("hot-breadcrumb-item");S.define("hot-button");f.define("hot-button-group");h.define("hot-card");u.define("hot-carousel");b.define("hot-carousel-item");c.define("hot-checkbox");g.define("hot-color-picker");T.define("hot-copy-button");B.define("hot-details");I.define("hot-dialog");v.define("hot-divider");R.define("hot-drawer");C.define("hot-dropdown");P.define("hot-format-bytes");D.define("hot-format-date");k.define("hot-format-number");w.define("hot-icon");y.define("hot-icon-button");M.define("hot-image-comparer");A.define("hot-include");x.define("hot-input");H.define("hot-menu");F.define("hot-menu-item");G.define("hot-menu-label");O.define("hot-mutation-observer");L.define("hot-option");z.define("hot-popup");N.define("hot-progress-bar");V.define("hot-progress-ring");E.define("hot-radio");j.define("hot-radio-button");q.define("hot-radio-group");J.define("hot-range");K.define("hot-rating");Q.define("hot-relative-time");U.define("hot-resize-observer");W.define("hot-select");X.define("hot-skeleton");Y.define("hot-spinner");Z.define("hot-split-panel");_.define("hot-switch");$.define("hot-tab");oo.define("hot-tab-group");eo.define("hot-tab-panel");to.define("hot-tag");ro.define("hot-textarea");ao.define("hot-tooltip");io.define("hot-tree");mo.define("hot-tree-item");lo.define("hot-visually-hidden");export{i as Alert,m as AnimatedImage,l as Animation,n as Avatar,p as Badge,d as Breadcrumb,s as BreadcrumbItem,S as Button,f as ButtonGroup,h as Card,u as Carousel,b as CarouselItem,c as Checkbox,g as ColorPicker,a as Consent,T as CopyButton,B as Details,I as Dialog,v as Divider,R as Drawer,C as Dropdown,P as FormatBytes,D as FormatDate,k as FormatNumber,o as Header,w as Icon,y as IconButton,M as ImageComparer,A as Include,x as Input,e as Logo,H as Menu,F as MenuItem,G as MenuLabel,O as MutationObserver,L as Option,z as Popup,N as ProgressBar,V as ProgressRing,E as Radio,j as RadioButton,q as RadioGroup,J as Range,K as Rating,Q as RelativeTime,U as ResizeObserver,W as Select,X as Skeleton,Y as Spinner,Z as SplitPanel,_ as Switch,$ as Tab,oo as TabGroup,eo as TabPanel,to as Tag,ro as Textarea,t as Toolbar,ao as Tooltip,r as Tracking,io as Tree,mo as TreeItem,lo as VisuallyHidden,uo as setBasePath}; diff --git a/dist/react/index.js b/dist/react/index.js index 2fca1bf..47bf371 100644 --- a/dist/react/index.js +++ b/dist/react/index.js @@ -1 +1 @@ -import{a as e}from"../chunks/chunk.VU3FM2CF.js";import{a}from"../chunks/chunk.N5M5RY5M.js";import{a as r}from"../chunks/chunk.AFGPUO4H.js";import{a as o}from"../chunks/chunk.2TNX6QZD.js";import"../chunks/chunk.BZRLYTOZ.js";import"../chunks/chunk.4DV2WAS7.js";import"../chunks/chunk.GVYEHPTU.js";import"../chunks/chunk.PUMXQ24J.js";import"../chunks/chunk.27YEAEMT.js";import"../chunks/chunk.WPXUR5EI.js";import"../chunks/chunk.4QDUS5ZV.js";import"../chunks/chunk.R73PKLI4.js";import"../chunks/chunk.KTVXG6ZT.js";import"../chunks/chunk.FWYUHKRF.js";import{default as p}from"@shoelace-style/shoelace/dist/react/alert/index.js";import{default as x}from"@shoelace-style/shoelace/dist/react/animated-image/index.js";import{default as i}from"@shoelace-style/shoelace/dist/react/animation/index.js";import{default as b}from"@shoelace-style/shoelace/dist/react/avatar/index.js";import{default as c}from"@shoelace-style/shoelace/dist/react/badge/index.js";import{default as I}from"@shoelace-style/shoelace/dist/react/breadcrumb/index.js";import{default as C}from"@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js";import{default as P}from"@shoelace-style/shoelace/dist/react/button/index.js";import{default as S}from"@shoelace-style/shoelace/dist/react/button-group/index.js";import{default as A}from"@shoelace-style/shoelace/dist/react/card/index.js";import{default as w}from"@shoelace-style/shoelace/dist/react/carousel/index.js";import{default as F}from"@shoelace-style/shoelace/dist/react/carousel-item/index.js";import{default as O}from"@shoelace-style/shoelace/dist/react/checkbox/index.js";import{default as H}from"@shoelace-style/shoelace/dist/react/color-picker/index.js";import{default as z}from"@shoelace-style/shoelace/dist/react/copy-button/index.js";import{default as V}from"@shoelace-style/shoelace/dist/react/details/index.js";import{default as q}from"@shoelace-style/shoelace/dist/react/dialog/index.js";import{default as J}from"@shoelace-style/shoelace/dist/react/divider/index.js";import{default as Q}from"@shoelace-style/shoelace/dist/react/drawer/index.js";import{default as W}from"@shoelace-style/shoelace/dist/react/dropdown/index.js";import{default as Y}from"@shoelace-style/shoelace/dist/react/format-bytes/index.js";import{default as _}from"@shoelace-style/shoelace/dist/react/format-date/index.js";import{default as ee}from"@shoelace-style/shoelace/dist/react/format-number/index.js";import{default as re}from"@shoelace-style/shoelace/dist/react/icon/index.js";import{default as te}from"@shoelace-style/shoelace/dist/react/icon-button/index.js";import{default as ue}from"@shoelace-style/shoelace/dist/react/image-comparer/index.js";import{default as me}from"@shoelace-style/shoelace/dist/react/include/index.js";import{default as pe}from"@shoelace-style/shoelace/dist/react/input/index.js";import{default as xe}from"@shoelace-style/shoelace/dist/react/menu/index.js";import{default as ie}from"@shoelace-style/shoelace/dist/react/menu-item/index.js";import{default as be}from"@shoelace-style/shoelace/dist/react/menu-label/index.js";import{default as ce}from"@shoelace-style/shoelace/dist/react/mutation-observer/index.js";import{default as Ie}from"@shoelace-style/shoelace/dist/react/option/index.js";import{default as Ce}from"@shoelace-style/shoelace/dist/react/popup/index.js";import{default as Pe}from"@shoelace-style/shoelace/dist/react/progress-bar/index.js";import{default as Se}from"@shoelace-style/shoelace/dist/react/progress-ring/index.js";import{default as Ae}from"@shoelace-style/shoelace/dist/react/radio/index.js";import{default as we}from"@shoelace-style/shoelace/dist/react/radio-button/index.js";import{default as Fe}from"@shoelace-style/shoelace/dist/react/radio-group/index.js";import{default as Oe}from"@shoelace-style/shoelace/dist/react/range/index.js";import{default as He}from"@shoelace-style/shoelace/dist/react/rating/index.js";import{default as ze}from"@shoelace-style/shoelace/dist/react/relative-time/index.js";import{default as Ve}from"@shoelace-style/shoelace/dist/react/resize-observer/index.js";import{default as qe}from"@shoelace-style/shoelace/dist/react/select/index.js";import{default as Je}from"@shoelace-style/shoelace/dist/react/skeleton/index.js";import{default as Qe}from"@shoelace-style/shoelace/dist/react/spinner/index.js";import{default as We}from"@shoelace-style/shoelace/dist/react/split-panel/index.js";import{default as Ye}from"@shoelace-style/shoelace/dist/react/switch/index.js";import{default as _e}from"@shoelace-style/shoelace/dist/react/tab/index.js";import{default as ea}from"@shoelace-style/shoelace/dist/react/tab-group/index.js";import{default as ra}from"@shoelace-style/shoelace/dist/react/tab-panel/index.js";import{default as ta}from"@shoelace-style/shoelace/dist/react/tag/index.js";import{default as ua}from"@shoelace-style/shoelace/dist/react/textarea/index.js";import{default as ma}from"@shoelace-style/shoelace/dist/react/tooltip/index.js";import{default as pa}from"@shoelace-style/shoelace/dist/react/tree/index.js";import{default as xa}from"@shoelace-style/shoelace/dist/react/tree-item/index.js";import{default as ia}from"@shoelace-style/shoelace/dist/react/visually-hidden/index.js";export{p as Alert,x as AnimatedImage,i as Animation,b as Avatar,c as Badge,I as Breadcrumb,C as BreadcrumbItem,P as Button,S as ButtonGroup,A as Card,w as Carousel,F as CarouselItem,O as Checkbox,H as ColorPicker,z as CopyButton,V as Details,q as Dialog,J as Divider,Q as Drawer,W as Dropdown,Y as FormatBytes,_ as FormatDate,ee as FormatNumber,e as Header,re as Icon,te as IconButton,ue as ImageComparer,me as Include,pe as Input,a as Logo,xe as Menu,ie as MenuItem,be as MenuLabel,ce as MutationObserver,Ie as Option,Ce as Popup,Pe as ProgressBar,Se as ProgressRing,Ae as Radio,we as RadioButton,Fe as RadioGroup,Oe as Range,He as Rating,ze as RelativeTime,Ve as ResizeObserver,qe as Select,Je as Skeleton,Qe as Spinner,We as SplitPanel,Ye as Switch,_e as Tab,ea as TabGroup,ra as TabPanel,ta as Tag,ua as Textarea,r as Toolbar,ma as Tooltip,o as Tracking,pa as Tree,xa as TreeItem,ia as VisuallyHidden}; +import{a as e}from"../chunks/chunk.VU3FM2CF.js";import{a}from"../chunks/chunk.N5M5RY5M.js";import{a as r}from"../chunks/chunk.AFGPUO4H.js";import{a as o}from"../chunks/chunk.NZPJYRO7.js";import"../chunks/chunk.R73PKLI4.js";import"../chunks/chunk.KTVXG6ZT.js";import"../chunks/chunk.GVYEHPTU.js";import"../chunks/chunk.PUMXQ24J.js";import"../chunks/chunk.2YPBGQD6.js";import"../chunks/chunk.Q5SXKMUN.js";import"../chunks/chunk.27YEAEMT.js";import"../chunks/chunk.WPXUR5EI.js";import"../chunks/chunk.4QDUS5ZV.js";import"../chunks/chunk.FWYUHKRF.js";import{default as p}from"@shoelace-style/shoelace/dist/react/alert/index.js";import{default as x}from"@shoelace-style/shoelace/dist/react/animated-image/index.js";import{default as i}from"@shoelace-style/shoelace/dist/react/animation/index.js";import{default as b}from"@shoelace-style/shoelace/dist/react/avatar/index.js";import{default as c}from"@shoelace-style/shoelace/dist/react/badge/index.js";import{default as I}from"@shoelace-style/shoelace/dist/react/breadcrumb/index.js";import{default as C}from"@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js";import{default as P}from"@shoelace-style/shoelace/dist/react/button/index.js";import{default as S}from"@shoelace-style/shoelace/dist/react/button-group/index.js";import{default as A}from"@shoelace-style/shoelace/dist/react/card/index.js";import{default as w}from"@shoelace-style/shoelace/dist/react/carousel/index.js";import{default as F}from"@shoelace-style/shoelace/dist/react/carousel-item/index.js";import{default as O}from"@shoelace-style/shoelace/dist/react/checkbox/index.js";import{default as H}from"@shoelace-style/shoelace/dist/react/color-picker/index.js";import{default as z}from"@shoelace-style/shoelace/dist/react/copy-button/index.js";import{default as V}from"@shoelace-style/shoelace/dist/react/details/index.js";import{default as q}from"@shoelace-style/shoelace/dist/react/dialog/index.js";import{default as J}from"@shoelace-style/shoelace/dist/react/divider/index.js";import{default as Q}from"@shoelace-style/shoelace/dist/react/drawer/index.js";import{default as W}from"@shoelace-style/shoelace/dist/react/dropdown/index.js";import{default as Y}from"@shoelace-style/shoelace/dist/react/format-bytes/index.js";import{default as _}from"@shoelace-style/shoelace/dist/react/format-date/index.js";import{default as ee}from"@shoelace-style/shoelace/dist/react/format-number/index.js";import{default as re}from"@shoelace-style/shoelace/dist/react/icon/index.js";import{default as te}from"@shoelace-style/shoelace/dist/react/icon-button/index.js";import{default as ue}from"@shoelace-style/shoelace/dist/react/image-comparer/index.js";import{default as me}from"@shoelace-style/shoelace/dist/react/include/index.js";import{default as pe}from"@shoelace-style/shoelace/dist/react/input/index.js";import{default as xe}from"@shoelace-style/shoelace/dist/react/menu/index.js";import{default as ie}from"@shoelace-style/shoelace/dist/react/menu-item/index.js";import{default as be}from"@shoelace-style/shoelace/dist/react/menu-label/index.js";import{default as ce}from"@shoelace-style/shoelace/dist/react/mutation-observer/index.js";import{default as Ie}from"@shoelace-style/shoelace/dist/react/option/index.js";import{default as Ce}from"@shoelace-style/shoelace/dist/react/popup/index.js";import{default as Pe}from"@shoelace-style/shoelace/dist/react/progress-bar/index.js";import{default as Se}from"@shoelace-style/shoelace/dist/react/progress-ring/index.js";import{default as Ae}from"@shoelace-style/shoelace/dist/react/radio/index.js";import{default as we}from"@shoelace-style/shoelace/dist/react/radio-button/index.js";import{default as Fe}from"@shoelace-style/shoelace/dist/react/radio-group/index.js";import{default as Oe}from"@shoelace-style/shoelace/dist/react/range/index.js";import{default as He}from"@shoelace-style/shoelace/dist/react/rating/index.js";import{default as ze}from"@shoelace-style/shoelace/dist/react/relative-time/index.js";import{default as Ve}from"@shoelace-style/shoelace/dist/react/resize-observer/index.js";import{default as qe}from"@shoelace-style/shoelace/dist/react/select/index.js";import{default as Je}from"@shoelace-style/shoelace/dist/react/skeleton/index.js";import{default as Qe}from"@shoelace-style/shoelace/dist/react/spinner/index.js";import{default as We}from"@shoelace-style/shoelace/dist/react/split-panel/index.js";import{default as Ye}from"@shoelace-style/shoelace/dist/react/switch/index.js";import{default as _e}from"@shoelace-style/shoelace/dist/react/tab/index.js";import{default as ea}from"@shoelace-style/shoelace/dist/react/tab-group/index.js";import{default as ra}from"@shoelace-style/shoelace/dist/react/tab-panel/index.js";import{default as ta}from"@shoelace-style/shoelace/dist/react/tag/index.js";import{default as ua}from"@shoelace-style/shoelace/dist/react/textarea/index.js";import{default as ma}from"@shoelace-style/shoelace/dist/react/tooltip/index.js";import{default as pa}from"@shoelace-style/shoelace/dist/react/tree/index.js";import{default as xa}from"@shoelace-style/shoelace/dist/react/tree-item/index.js";import{default as ia}from"@shoelace-style/shoelace/dist/react/visually-hidden/index.js";export{p as Alert,x as AnimatedImage,i as Animation,b as Avatar,c as Badge,I as Breadcrumb,C as BreadcrumbItem,P as Button,S as ButtonGroup,A as Card,w as Carousel,F as CarouselItem,O as Checkbox,H as ColorPicker,z as CopyButton,V as Details,q as Dialog,J as Divider,Q as Drawer,W as Dropdown,Y as FormatBytes,_ as FormatDate,ee as FormatNumber,e as Header,re as Icon,te as IconButton,ue as ImageComparer,me as Include,pe as Input,a as Logo,xe as Menu,ie as MenuItem,be as MenuLabel,ce as MutationObserver,Ie as Option,Ce as Popup,Pe as ProgressBar,Se as ProgressRing,Ae as Radio,we as RadioButton,Fe as RadioGroup,Oe as Range,He as Rating,ze as RelativeTime,Ve as ResizeObserver,qe as Select,Je as Skeleton,Qe as Spinner,We as SplitPanel,Ye as Switch,_e as Tab,ea as TabGroup,ra as TabPanel,ta as Tag,ua as Textarea,r as Toolbar,ma as Tooltip,o as Tracking,pa as Tree,xa as TreeItem,ia as VisuallyHidden}; diff --git a/dist/react/matomoTracking/index.d.ts b/dist/react/matomoTracking/index.d.ts index 72430df..51135a4 100644 --- a/dist/react/matomoTracking/index.d.ts +++ b/dist/react/matomoTracking/index.d.ts @@ -1,3 +1,3 @@ -import Component from '../../components/matomoTracking/matomoTracking.component.js'; +import Component from '../../components/tracking/tracking.component.js'; declare const reactWrapper: import("@lit/react").ReactWebComponent; export default reactWrapper; diff --git a/dist/react/matomoTracking/index.js b/dist/react/matomoTracking/index.js index 81b6007..842ec5d 100644 --- a/dist/react/matomoTracking/index.js +++ b/dist/react/matomoTracking/index.js @@ -1 +1 @@ -import{b as t}from"../../chunks/chunk.X6LBY34G.js";import"../../chunks/chunk.TKDHYEFH.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";import*as o from"react";import{createComponent as e}from"@lit/react";var a="hot-matomo-tracking",m=e({tagName:a,elementClass:t,react:o,events:{},displayName:"MatomoTracking"}),p=m;export{p as default}; +import{b as t}from"../../chunks/chunk.NZIJQUIE.js";import"../../chunks/chunk.FWYUHKRF.js";import*as o from"react";import{createComponent as e}from"@lit/react";var a="hot-matomo-tracking",m=e({tagName:a,elementClass:t,react:o,events:{},displayName:"MatomoTracking"}),p=m;export{p as default}; diff --git a/dist/react/tracking/index.d.ts b/dist/react/tracking/index.d.ts index 51135a4..539ba94 100644 --- a/dist/react/tracking/index.d.ts +++ b/dist/react/tracking/index.d.ts @@ -1,3 +1,3 @@ -import Component from '../../components/tracking/tracking.component.js'; +import Component from '../../components/consent/consent.component.js'; declare const reactWrapper: import("@lit/react").ReactWebComponent; export default reactWrapper; diff --git a/dist/react/tracking/index.js b/dist/react/tracking/index.js index ec5308b..6f50d94 100644 --- a/dist/react/tracking/index.js +++ b/dist/react/tracking/index.js @@ -1 +1 @@ -import{a}from"../../chunks/chunk.2TNX6QZD.js";import"../../chunks/chunk.BZRLYTOZ.js";import"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as default}; +import{a}from"../../chunks/chunk.NZPJYRO7.js";import"../../chunks/chunk.2YPBGQD6.js";import"../../chunks/chunk.Q5SXKMUN.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as default}; diff --git a/src/components/consent/consent.component.ts b/src/components/consent/consent.component.ts new file mode 100644 index 0000000..8cdf4d9 --- /dev/null +++ b/src/components/consent/consent.component.ts @@ -0,0 +1,108 @@ +import "@shoelace-style/shoelace/dist/components/alert/alert.js"; + +import { LitElement, html } from "lit"; +import { property } from "lit/decorators.js"; +import styles from './consent.styles.js'; +import type { CSSResultGroup } from 'lit'; + +import registerBundledIcons from "../icons.js"; + +registerBundledIcons(); + +export class Consent extends LitElement { + + static styles: CSSResultGroup = [styles]; + + name = "hot-consent"; + + /** The site id for consent. */ + @property({ type: String, attribute: "site-id" }) + accessor siteId: string = ""; + + /** Force display the banner. */ + @property({ type: Boolean }) + accessor force: boolean = false; + + @property({ type: Boolean }) + accessor isOpen: boolean = true; + + @property({ type: String }) + accessor title: string = "About the information we collect"; + + @property({ type: String }) + accessor message = html`

We use cookies and similar technologies to \ + recognize and analyze your visits, and measure traffic usage and activity.

` + + @property({ type: String, attribute: "agree-label" }) + accessor agreeLabel: string = "I Agree"; + + @property({ type: String, attribute: "not-agree-label" }) + accessor notAgreeLabel: string = "I Do Dot Agree"; + + protected render() { + return html` + + +

+ ${this.title} +

+ +

+ +

+ + { + this._setAgree(e); + }} + >${this.agreeLabel} + { + this._setDisagree(e); + }} + >${this.notAgreeLabel} + `; + } + + private _setAgree(_e: MouseEvent) { + this.isOpen = false; + localStorage.setItem(`${this.siteId}-consent-agree`, "true"); + this.dispatchEvent(new Event("agree", { bubbles: true, composed: true })); + } + + private _setDisagree(_e: MouseEvent) { + this.isOpen = false; + localStorage.setItem(`${this.siteId}-consent-agree`, "false"); + this.dispatchEvent( + new Event("disagree", { bubbles: true, composed: true }) + ); + } + + connectedCallback() { + super.connectedCallback(); + + // Close and halt execution if already disagreed + const consent = localStorage.getItem(`${this.siteId}-consent-agree`); + if (consent === "false") { + this.isOpen = false; + return; + } + + // Close prompt only if already agreed, continue + if (consent === "true") { + this.isOpen = false; + } + } +} + +export default Consent; + +// Define web component +customElements.define("hot-consent", Consent); diff --git a/src/components/tracking/tracking.styles.ts b/src/components/consent/consent.styles.ts similarity index 77% rename from src/components/tracking/tracking.styles.ts rename to src/components/consent/consent.styles.ts index c4030b8..4317e51 100644 --- a/src/components/tracking/tracking.styles.ts +++ b/src/components/consent/consent.styles.ts @@ -1,20 +1,20 @@ import { css } from 'lit'; export default css` - .tracking { + .consent { text-align: center; } - .tracking--header { + .consent--header { font-weight: var(--hot-font-weight-semibold); font-size: var(--hot-font-size-large); } - .tracking--link { + .consent--link { color: var(--hot-color-primary-700); } - .tracking--message { + .consent--message { margin-bottom: var(--hot-spacing-large); } ` \ No newline at end of file diff --git a/src/components/consent/consent.ts b/src/components/consent/consent.ts new file mode 100644 index 0000000..a8076e7 --- /dev/null +++ b/src/components/consent/consent.ts @@ -0,0 +1,11 @@ +import Consent from './consent.component.js'; + +export * from './consent.component.js'; +export default Consent; + +declare global { + interface HTMLElementTagNameMap { + 'hot-consent': Consent; + } +} + diff --git a/src/components/matomoTracking/matomoTracking.component.ts b/src/components/matomoTracking/matomoTracking.component.ts deleted file mode 100644 index d6cab6b..0000000 --- a/src/components/matomoTracking/matomoTracking.component.ts +++ /dev/null @@ -1,175 +0,0 @@ -import "@shoelace-style/shoelace/dist/components/alert/alert.js"; - -import { LitElement, html } from "lit"; -import { property } from "lit/decorators.js"; -import styles from './matomoTracking.styles.js'; -import type { CSSResultGroup } from 'lit'; - -import registerBundledIcons from "../icons.js"; - -registerBundledIcons(); - -declare global { - interface Window { - _paq: any[]; - } -} - -export class MatomoTracking extends LitElement { - - static styles: CSSResultGroup = [styles]; - - name = "hot-matomo-tracking"; - - /** The Matomo site id for tracking. */ - @property({ type: String, attribute: "site-id" }) - accessor siteId: string = ""; - - /** The domains to apply tracking. */ - @property({ type: String }) - accessor domain: string = ""; - - /** Force display the banner. */ - @property({ type: Boolean }) - accessor force: boolean = false; - - @property({ type: Boolean }) - accessor isOpen: boolean = true; - - protected render() { - return html` - - -

About the information we collect

- -

- We use cookies and similar technologies to recognize and analyze your - visits, and measure traffic usage and activity. You can learn about how - we use the data about your visit or information you provide reading our - privacy policy. By clicking "I Agree", you consent to the use of cookies. -

- - { - this._setAgree(e); - }} - >I Agree - { - this._setDisagree(e); - }} - >I Do Not Agree - `; - } - - private _setAgree(_e: MouseEvent) { - // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions - const _paq = (window._paq = window._paq || []); - if (_paq.length === 0) return; - - _paq.push(["rememberConsentGiven"]); - this.isOpen = false; - localStorage.setItem(`${this.siteId}-matomo-agree`, "true"); - this.dispatchEvent(new Event("agree", { bubbles: true, composed: true })); - } - - private _setDisagree(_e: MouseEvent) { - // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions - const _paq = (window._paq = window._paq || []); - if (_paq.length === 0) return; - - _paq.push(["forgetConsentGiven"]); - this.isOpen = false; - localStorage.setItem(`${this.siteId}-matomo-agree`, "false"); - this.dispatchEvent( - new Event("disagree", { bubbles: true, composed: true }) - ); - } - - connectedCallback() { - super.connectedCallback(); - - // Close and halt execution if wrong domain - if (!this.force && window.location.hostname !== this.domain) { - console.warn( - `Matomo init failed. ${window.location.hostname} does not match ${this.domain}.` - ); - this.isOpen = false; - return; - } - - const matomoTrackingId = this.siteId; - - // Close and halt execution if siteId or domain not set - if ( - !this.force && - (matomoTrackingId.length === 0 || this.domain.length === 0) - ) { - console.warn("Matomo init failed. No site id or domains provided."); - this.isOpen = false; - return; - } - - // Close and halt execution if already disagreed - const consent = localStorage.getItem(`${this.siteId}-matomo-agree`); - if (consent === "false") { - this.isOpen = false; - return; - } - - // Close prompt only if already agreed, continue - if (consent === "true") { - this.isOpen = false; - } - - console.log( - `Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}` - ); - - // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions - const _paq = (window._paq = window._paq || []); - - // tracker methods like "setCustomDimension" should be called before "trackPageView" - _paq.push(["requireConsent"]); - _paq.push(["setDomains", [this.domain]]); - _paq.push(["trackPageView"]); - _paq.push(["enableLinkTracking"]); // Tracks downloads - _paq.push(["trackVisibleContentImpressions"]); // Tracks content - - (function () { - const u = "//matomo.hotosm.org/"; - _paq.push(["setTrackerUrl", u + "matomo.php"]); - _paq.push(["setSiteId", matomoTrackingId]); - - const d = document; - const g = d.createElement("script"); - const s = d.getElementsByTagName("script")[0]; - - if (s?.parentNode != null) { - g.async = true; - g.src = u + "matomo.js"; - s.parentNode.insertBefore(g, s); - } else { - console.warn("Script insertion failed. Parent node is null."); - } - })(); - } -} - -export default MatomoTracking; - -// Define web component -customElements.define("hot-matomo-tracking", MatomoTracking); diff --git a/src/components/matomoTracking/matomoTracking.styles.ts b/src/components/matomoTracking/matomoTracking.styles.ts deleted file mode 100644 index c69eb8f..0000000 --- a/src/components/matomoTracking/matomoTracking.styles.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { css } from 'lit'; - -export default css` - .matomoTracking { - text-align: center; - } - - .matomoTracking--header { - font-weight: var(--hot-font-weight-semibold); - font-size: var(--hot-font-size-large); - text-align: center; - } - - .matomoTracking--link { - color: var(--hot-color-primary-700); - } - - .matomoTracking--message { - margin-bottom: var(--hot-spacing-large); - } -` \ No newline at end of file diff --git a/src/components/matomoTracking/matomoTracking.ts b/src/components/matomoTracking/matomoTracking.ts deleted file mode 100644 index 2a7644e..0000000 --- a/src/components/matomoTracking/matomoTracking.ts +++ /dev/null @@ -1,11 +0,0 @@ -import MatomoTracking from './matomoTracking.component.js'; - -export * from './matomoTracking.component.js'; -export default MatomoTracking; - -declare global { - interface HTMLElementTagNameMap { - 'hot-matomo-tracking': MatomoTracking; - } -} - diff --git a/src/components/tracking/tracking.component.ts b/src/components/tracking/tracking.component.ts index aefcce2..4bac298 100644 --- a/src/components/tracking/tracking.component.ts +++ b/src/components/tracking/tracking.component.ts @@ -1,108 +1,97 @@ -import "@shoelace-style/shoelace/dist/components/alert/alert.js"; - -import { LitElement, html } from "lit"; +import { LitElement } from "lit"; import { property } from "lit/decorators.js"; -import styles from './tracking.styles.js'; -import type { CSSResultGroup } from 'lit'; - -import registerBundledIcons from "../icons.js"; -registerBundledIcons(); - -export class Tracking extends LitElement { +declare global { + interface Window { + _paq: any[]; + } +} - static styles: CSSResultGroup = [styles]; +export class MatomoTracking extends LitElement { name = "hot-tracking"; - /** The site id for tracking. */ + /** The Matomo site id for tracking. */ @property({ type: String, attribute: "site-id" }) accessor siteId: string = ""; - /** Force display the banner. */ - @property({ type: Boolean }) - accessor force: boolean = false; - - @property({ type: Boolean }) - accessor isOpen: boolean = true; - + /** The domains to apply tracking. */ @property({ type: String }) - accessor title: string = "About the information we collect"; + accessor domain: string = ""; + /** The Matomo URL */ @property({ type: String }) - accessor message = html`

We use cookies and similar technologies to \ - recognize and analyze your visits, and measure traffic usage and activity.

` - - @property({ type: String, attribute: "agree-label" }) - accessor agreeLabel: string = "I Agree"; - - @property({ type: String, attribute: "not-agree-label" }) - accessor notAgreeLabel: string = "I Do Dot Agree"; - - protected render() { - return html` - - -

- ${this.title} -

- -

- -

- - { - this._setAgree(e); - }} - >${this.agreeLabel} - { - this._setDisagree(e); - }} - >${this.notAgreeLabel} - `; - } + accessor matomoURL: string = "https://matomo.hotosm.org"; - private _setAgree(_e: MouseEvent) { - this.isOpen = false; - localStorage.setItem(`${this.siteId}-tracking-agree`, "true"); - this.dispatchEvent(new Event("agree", { bubbles: true, composed: true })); + agree() { + // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions + const _paq = (window._paq = window._paq || []); + if (_paq.length === 0) return; } - private _setDisagree(_e: MouseEvent) { - this.isOpen = false; - localStorage.setItem(`${this.siteId}-tracking-agree`, "false"); - this.dispatchEvent( - new Event("disagree", { bubbles: true, composed: true }) - ); + disagree() { + // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions + const _paq = (window._paq = window._paq || []); + if (_paq.length === 0) return; + _paq.push(["forgetConsentGiven"]); } connectedCallback() { super.connectedCallback(); - // Close and halt execution if already disagreed - const consent = localStorage.getItem(`${this.siteId}-tracking-agree`); - if (consent === "false") { - this.isOpen = false; + // Close and halt execution if wrong domain + if (window.location.hostname !== this.domain) { + console.warn( + `Matomo init failed. ${window.location.hostname} does not match ${this.domain}.` + ); return; } - // Close prompt only if already agreed, continue - if (consent === "true") { - this.isOpen = false; + const matomoTrackingId = this.siteId; + + // Close and halt execution if siteId or domain not set + if ( + (matomoTrackingId.length === 0 || this.domain.length === 0) + ) { + console.warn("Matomo init failed. No site id or domains provided."); + return; } + + // Close and halt execution if already disagreed + console.log( + `Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}` + ); + + // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions + const _paq = (window._paq = window._paq || []); + + // tracker methods like "setCustomDimension" should be called before "trackPageView" + _paq.push(["requireConsent"]); + _paq.push(["setDomains", [this.domain]]); + _paq.push(["trackPageView"]); + _paq.push(["enableLinkTracking"]); // Tracks downloads + _paq.push(["trackVisibleContentImpressions"]); // Tracks content + + (function (matomoURL) { + _paq.push(["setTrackerUrl", `${matomoURL}/matomo.php`]); + _paq.push(["setSiteId", matomoTrackingId]); + + const d = document; + const g = d.createElement("script"); + const s = d.getElementsByTagName("script")[0]; + + if (s?.parentNode != null) { + g.async = true; + g.src = `${matomoURL}/matomo.js`; + s.parentNode.insertBefore(g, s); + } else { + console.warn("Script insertion failed. Parent node is null."); + } + })(this.matomoURL); } } -export default Tracking; +export default MatomoTracking; // Define web component -customElements.define("hot-tracking", Tracking); +customElements.define("hot-tracking", MatomoTracking); diff --git a/src/components/tracking/tracking.ts b/src/components/tracking/tracking.ts index 1896d61..ac5b930 100644 --- a/src/components/tracking/tracking.ts +++ b/src/components/tracking/tracking.ts @@ -1,11 +1,11 @@ -import Tracking from './tracking.component.js'; +import MatomoTracking from './tracking.component.js'; export * from './tracking.component.js'; -export default Tracking; +export default MatomoTracking; declare global { interface HTMLElementTagNameMap { - 'hot-tracking': Tracking; + 'hot-tracking': MatomoTracking; } } diff --git a/src/hotosm-ui.ts b/src/hotosm-ui.ts index 6ba46ed..b125095 100644 --- a/src/hotosm-ui.ts +++ b/src/hotosm-ui.ts @@ -3,8 +3,8 @@ import HotHeader from './components/header/header.component.js'; import HotLogo from './components/logo/logo.component.js'; import HotToolbar from './components/toolbar/toolbar.component.js'; -import HotMatomoTracking from './components/matomoTracking/matomoTracking.component.js'; import HotTracking from './components/tracking/tracking.component.js'; +import HotConsent from './components/consent/consent.component.js'; // Shoelace components @@ -194,8 +194,8 @@ export { HotHeader as Header, HotLogo as Logo, HotToolbar as Toolbar, + HotConsent as Consent, HotTracking as Tracking, - HotMatomoTracking as MatomoTracking, // Shoelace setBasePath, SlAlert as Alert, diff --git a/src/react/matomoTracking/index.ts b/src/react/matomoTracking/index.ts index 1986390..2fc3864 100644 --- a/src/react/matomoTracking/index.ts +++ b/src/react/matomoTracking/index.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { createComponent } from '@lit/react'; -import Component from '../../components/matomoTracking/matomoTracking.component.js'; +import Component from '../../components/tracking/tracking.component.js'; const tagName = 'hot-matomo-tracking'; diff --git a/src/react/tracking/index.ts b/src/react/tracking/index.ts index fc57bc6..5737254 100644 --- a/src/react/tracking/index.ts +++ b/src/react/tracking/index.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { createComponent } from '@lit/react'; -import Component from '../../components/tracking/tracking.component.js'; +import Component from '../../components/consent/consent.component.js'; const tagName = 'hot-tracking';