@hotosm/ui 0.6.0 → 0.7.0

package/dist/chunks/chunk.U4AAC5ID.js

@@ -1,239 +0,0 @@
-import{a as c,b as r}from"./chunk.ZETV7TDG.js";import{a as b,d as l,f as u}from"./chunk.QABMDRWR.js";import{d as a,e as n,f as s,g as i}from"./chunk.N2W26RCT.js";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 w,m,f,x,v,t=class extends u{constructor(){super(...arguments);this.name="hot-tracking";s(this,w,"");s(this,m,"");s(this,f,"https://matomo.hotosm.org");s(this,x,!0);s(this,v,"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 n(this,w)}set siteId(e){i(this,w,e)}get domain(){return n(this,m)}set domain(e){i(this,m,e)}get matomoURL(){return n(this,f)}set matomoURL(e){i(this,f,e)}get showConsent(){return n(this,x)}set showConsent(e){i(this,x,e)}get consentMessage(){return n(this,v)}set consentMessage(e){i(this,v,e)}agree(){this.consentGiven=!0,this.consentShown=!1;let e=window._paq=window._paq||[];e.length!==0&&(e.push(["rememberConsentGiven"]),e.push(["trackPageView"]),this.showSuccessCallout("Tracking consent granted. Thank you!"))}disagree(){this.consentGiven=!1,this.consentShown=!1;let e=window._paq=window._paq||[];e.length!==0&&(e.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`
-      ${this.showError?l`
-        <div class="error-banner">
-          <wa-callout style="padding: 1rem;" variant="danger" appearance="outlined filled" size="large">
-            <wa-icon slot="icon" family="classic" variant="solid" name="circle-exclamation"></wa-icon>
-            <div style="padding: 0 1rem;">
-              <strong>Tracking Configuration Error</strong><br />
-              ${this.errorMessage}
-            </div>
-          </wa-callout>
-        </div>
-      `:""}
-      
-      ${this.showSuccess?l`
-        <div class="toast-banner">
-          <wa-callout style="padding: 1rem;" variant="success" appearance="outlined accent" size="medium">
-            <wa-icon slot="icon" family="classic" variant="solid" name="circle-check"></wa-icon>
-            <div style="padding: 0 1rem;">
-              <strong>Success!</strong><br />
-              ${this.successMessage}
-            </div>
-          </wa-callout>
-        </div>
-      `:""}
-      
-      ${this.showInfo?l`
-        <div class="toast-banner">
-          <wa-callout style="padding: 1rem;" variant="brand" appearance="outlined filled" size="medium">
-            <wa-icon slot="icon" family="classic" variant="solid" name="circle-info"></wa-icon>
-            <div style="padding: 0 1rem;">
-              <strong>Information</strong><br />
-              ${this.infoMessage}
-            </div>
-          </wa-callout>
-        </div>
-      `:""}
-      
-      ${this.consentShown?l`
-        <div class="consent-banner">
-          <wa-callout  variant="brand" appearance="outlined filled" size="large">
-            <wa-icon slot="icon" family="classic" variant="solid" name="shield-check"></wa-icon>
-            <div style="padding: 1rem;">
-              <strong>Privacy & Tracking</strong><br />
-              ${this.consentMessage}
-              <div class="consent-actions">
-                <wa-button size="small" variant="neutral" @click=${e=>{e.preventDefault(),e.stopPropagation(),this.disagree()}}>
-                  Decline
-                </wa-button>
-                <wa-button size="small" variant="brand" @click=${e=>{e.preventDefault(),e.stopPropagation(),this.agree()}}>
-                  Accept
-                </wa-button>
-              </div>
-            </div>
-          </wa-callout>
-        </div>
-      `:""}
-    `}connectedCallback(){if(super.connectedCallback(),window.location.hostname!==this.domain){this.showErrorCallout(`Matomo tracking is not configured for this domain. Current domain: ${window.location.hostname}, Expected: ${this.domain}`);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||[];o.push(["requireConsent"]),o.push(["setDomains",[this.domain]]),o.push(["enableLinkTracking"]),o.push(["trackVisibleContentImpressions"]),(function(h){o.push(["setTrackerUrl",`${h}/matomo.php`]),o.push(["setSiteId",e]);let g=document,p=g.createElement("script"),d=g.getElementsByTagName("script")[0];(d==null?void 0:d.parentNode)!=null?(p.async=!0,p.src=`${h}/matomo.js`,d.parentNode.insertBefore(p,d)):console.warn("Script insertion failed. Parent node is null.")})(this.matomoURL),setTimeout(()=>{this.showConsentBanner()},1e3)}};w=new WeakMap,m=new WeakMap,f=new WeakMap,x=new WeakMap,v=new WeakMap,t.styles=b`
-    :host {
-      display: block;
-      font-family: var(--wa-font-sans);
-    }
-    
-    .consent-banner {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-      padding: 1rem;
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    
-    .error-banner {
-      position: fixed;
-      top: 1rem;
-      left: 1rem;
-      right: 1rem;
-      z-index: 1001;
-      max-width: 600px;
-      margin: 0 auto;
-    }
-    
-    .toast-banner {
-      position: fixed;
-      top: 1rem;
-      right: 1rem;
-      z-index: 1002;
-      max-width: 450px;
-      animation: slideIn 0.3s ease-out;
-    }
-    
-    @keyframes slideIn {
-      from {
-        transform: translateX(100%);
-        opacity: 0;
-      }
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-    
-    .consent-actions {
-      display: flex;
-      gap: 0.75rem;
-      margin-top: 1rem;
-      justify-content: flex-end;
-    }
-    
-    wa-callout {
-      --wa-callout-spacing: 1.5rem;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-      border-radius: 12px;
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      backdrop-filter: blur(8px);
-    }
-    
-    wa-button {
-      min-width: 80px;
-      font-weight: 500;
-      transition: all 0.2s ease;
-    }
-    
-    wa-button:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    
-    .error-banner wa-callout {
-      border-radius: 16px;
-      box-shadow: 0 16px 48px rgba(243, 77, 71, 0.2);
-      border: 1px solid rgba(243, 77, 71, 0.2);
-      background: linear-gradient(135deg, rgba(254, 236, 239, 0.95), rgba(253, 208, 214, 0.95));
-    }
-    
-    .error-banner wa-callout::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: linear-gradient(90deg, var(--hot-color-red-500), var(--hot-color-red-600), var(--hot-color-red-700));
-      border-radius: 16px 16px 0 0;
-    }
-    
-    .toast-banner wa-callout {
-      border-radius: 14px;
-      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-      border: 1px solid rgba(0, 0, 0, 0.06);
-      background: rgba(255, 255, 255, 0.98);
-      backdrop-filter: blur(12px);
-    }
-    
-    .toast-banner wa-callout[variant="success"] {
-      box-shadow: 0 12px 40px rgba(34, 197, 94, 0.15);
-      border: 1px solid rgba(34, 197, 94, 0.2);
-      background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.95));
-    }
-    
-    .toast-banner wa-callout[variant="success"]::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: linear-gradient(90deg, #22c55e, #16a34a);
-      border-radius: 14px 14px 0 0;
-    }
-    
-    .toast-banner wa-callout[variant="brand"] {
-      box-shadow: 0 12px 40px rgba(243, 77, 71, 0.15);
-      border: 1px solid rgba(243, 77, 71, 0.2);
-      background: linear-gradient(135deg, rgba(254, 236, 239, 0.95), rgba(253, 208, 214, 0.95));
-    }
-    
-    .toast-banner wa-callout[variant="brand"]::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: linear-gradient(90deg, var(--hot-color-red-500), var(--hot-color-red-600));
-      border-radius: 14px 14px 0 0;
-    }
-    
-    .consent-banner wa-callout {
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98));
-      backdrop-filter: blur(16px);
-    }
-    
-    .consent-banner wa-callout::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: linear-gradient(90deg, var(--hot-color-red-500), var(--hot-color-red-600), var(--hot-color-red-700));
-      border-radius: 16px 16px 0 0;
-    }
-    
-    wa-icon {
-      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-    }
-    
-    @media (max-width: 768px) {
-      .consent-banner {
-        padding: 0.75rem;
-      }
-      
-      .error-banner {
-        left: 0.5rem;
-        right: 0.5rem;
-        max-width: none;
-      }
-      
-      .toast-banner {
-        right: 0.5rem;
-        max-width: calc(100vw - 1rem);
-      }
-      
-      .consent-actions {
-        flex-direction: column;
-        gap: 0.5rem;
-      }
-      
-      wa-button {
-        width: 100%;
-      }
-    }
-  `,a([c({type:String,attribute:"site-id"})],t.prototype,"siteId",1),a([c({type:String})],t.prototype,"domain",1),a([c({type:String})],t.prototype,"matomoURL",1),a([c({type:Boolean,attribute:"show-consent"})],t.prototype,"showConsent",1),a([c({type:String,attribute:"consent-message"})],t.prototype,"consentMessage",1),a([r()],t.prototype,"consentGiven",2),a([r()],t.prototype,"consentShown",2),a([r()],t.prototype,"errorMessage",2),a([r()],t.prototype,"showError",2),a([r()],t.prototype,"successMessage",2),a([r()],t.prototype,"showSuccess",2),a([r()],t.prototype,"infoMessage",2),a([r()],t.prototype,"showInfo",2);var q=t;export{t as a,q as b};

package/dist/chunks/chunk.WTTPHBL3.js

@@ -1,105 +0,0 @@
-import{a as f,b as m,c as z}from"./chunk.ZETV7TDG.js";import{a as M}from"./chunk.GEAU3JJH.js";import{d as h,e as x,f as F}from"./chunk.QABMDRWR.js";import{d as n,e as o,f as d,g as c}from"./chunk.N2W26RCT.js";var E={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},y=l=>(...a)=>({_$litDirective$:l,values:a}),$=class{constructor(a){}get _$AU(){return this._$AM._$AU}_$AT(a,e,i){this._$Ct=a,this._$AM=e,this._$Ci=i}_$AS(a,e){return this.update(a,e)}update(a,e){return this.render(...e)}};var _=y(class extends ${constructor(l){var a;if(super(l),l.type!==E.ATTRIBUTE||l.name!=="class"||((a=l.strings)==null?void 0:a.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(l){return" "+Object.keys(l).filter(a=>l[a]).join(" ")+" "}update(l,[a]){var i,s;if(this.st===void 0){this.st=new Set,l.strings!==void 0&&(this.nt=new Set(l.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(let t in a)a[t]&&!((i=this.nt)!=null&&i.has(t))&&this.st.add(t);return this.render(a)}let e=l.element.classList;for(let t of this.st)t in a||(e.remove(t),this.st.delete(t));for(let t in a){let p=!!a[t];p===this.st.has(t)||(s=this.nt)!=null&&s.has(t)||(p?(e.add(t),this.st.add(t)):(e.remove(t),this.st.delete(t)))}return x}});import"@awesome.me/webawesome/dist/components/icon/icon.js";import"@awesome.me/webawesome/dist/components/divider/divider.js";var S,T,C,D,A,B,L,P,k,W,I,O,r=class extends F{constructor(){super(...arguments);this.name="hot-file-input-dropzone";d(this,S,!1);d(this,T,"");d(this,C,0);d(this,D,!0);d(this,A,!1);d(this,B,"");d(this,L,"traditional");d(this,P,!1);d(this,k,[]);d(this,W,"");d(this,I,"");d(this,O)}get multiple(){return o(this,S)}set multiple(e){c(this,S,e)}get accept(){return o(this,T)}set accept(e){c(this,T,e)}get maxSize(){return o(this,C)}set maxSize(e){c(this,C,e)}get showPreview(){return o(this,D)}set showPreview(e){c(this,D,e)}get disabled(){return o(this,A)}set disabled(e){c(this,A,e)}get label(){return o(this,B)}set label(e){c(this,B,e)}get variant(){return o(this,L)}set variant(e){c(this,L,e)}get isDragging(){return o(this,P)}set isDragging(e){c(this,P,e)}get selectedFiles(){return o(this,k)}set selectedFiles(e){c(this,k,e)}get errorMessage(){return o(this,W)}set errorMessage(e){c(this,W,e)}get statusMessage(){return o(this,I)}set statusMessage(e){c(this,I,e)}get fileInput(){return o(this,O)}set fileInput(e){c(this,O,e)}_generateId(){return`file-${Date.now()}-${Math.random().toString(36).substring(2,11)}`}_handleDragOver(e){e.preventDefault(),e.stopPropagation(),this.disabled||(this.isDragging=!0)}_handleDragLeave(e){e.preventDefault(),e.stopPropagation(),this.isDragging=!1}_handleDrop(e){var s;if(e.preventDefault(),e.stopPropagation(),this.isDragging=!1,this.disabled)return;let i=Array.from(((s=e.dataTransfer)==null?void 0:s.files)||[]);this._processFiles(i)}_handleClick(){this.disabled||this.fileInput.click()}_handleKeyDown(e){!this.disabled&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.fileInput.click())}_handleFileInputChange(e){let i=e.target,s=Array.from(i.files||[]);this._processFiles(s)}_processFiles(e){if(this.errorMessage="",!this.multiple&&e.length>1){this.errorMessage="Only one file can be selected";return}if(this.accept){let t=this.accept.split(",").map(u=>u.trim().toLowerCase()),p=e.filter(u=>{let b=u.name.toLowerCase(),g=u.type.toLowerCase();return!t.some(v=>{if(v.startsWith("."))return b.endsWith(v);if(v.endsWith("/*")){let w=v.split("/")[0];if(g)return g.startsWith(w+"/");let j=b.substring(b.lastIndexOf("."));return this._getFileIcon(j).includes(w)}return g?g===v:!1})});if(p.length>0){this.errorMessage=`Invalid file type(s): ${p.map(u=>u.name).join(", ")}`;return}}if(this.maxSize>0){let t=e.filter(p=>p.size>this.maxSize);if(t.length>0){this.errorMessage=`File(s) exceed maximum size of ${this._formatFileSize(this.maxSize)}: ${t.map(p=>p.name).join(", ")}`;return}}let i=e.map(t=>({file:t,id:this._generateId()}));this.multiple?this.selectedFiles=[...i,...this.selectedFiles]:this.selectedFiles=i,this.dispatchEvent(new CustomEvent("hot-file-change",{detail:{files:this.selectedFiles.map(t=>t.file)},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("hot-files-selected",{detail:{files:i.map(t=>t.file),allFiles:this.selectedFiles.map(t=>t.file)},bubbles:!0,composed:!0}));let s=i.length;this.statusMessage=`${s} ${s===1?"file":"files"} selected: ${i.map(t=>t.file.name).join(", ")}`}_removeFile(e){let i=this.selectedFiles.find(s=>s.id===e);this.selectedFiles=this.selectedFiles.filter(s=>s.id!==e),this.fileInput&&(this.fileInput.value=""),this.dispatchEvent(new CustomEvent("hot-file-change",{detail:{files:this.selectedFiles.map(s=>s.file)},bubbles:!0,composed:!0})),i&&(this.statusMessage=`File removed: ${i.file.name}. ${this.selectedFiles.length} ${this.selectedFiles.length===1?"file":"files"} remaining.`)}_formatFileSize(e){if(e===0)return"0 Bytes";let i=1e3,s=["Bytes","KB","MB","GB"],t=Math.floor(Math.log(e)/Math.log(i)),p=e/Math.pow(i,t);return`${Math.round(p*10)/10} ${s[t]}`}_getFileIcon(e){return e.startsWith("image/")?"file-image":e.startsWith("video/")?"file-video":e.startsWith("audio/")?"file-audio":e==="application/pdf"?"file-pdf":e.includes("word")?"file-word":e.includes("sheet")||e.includes("excel")?"file-excel":e.includes("zip")||e.includes("rar")||e.includes("7z")?"file-archive":e.includes("text")?"file-text":"file"}clearFiles(){this.selectedFiles=[],this.errorMessage="",this.fileInput&&(this.fileInput.value="")}getFiles(){return this.selectedFiles.map(e=>e.file)}render(){let e={dropzone:!0,"dropzone--dragging":this.isDragging,"dropzone--disabled":this.disabled,"dropzone--has-files":this.selectedFiles.length>0,"dropzone--compact":this.variant==="compact"},i=this.variant==="compact";return h`
-      <div class="file-input-dropzone">
-        ${this.label&&this.variant==="traditional"?h`<label class="label" id="dropzone-label">${this.label}</label>`:""}
-        ${this.variant==="traditional"?h`<wa-divider></wa-divider>`:""}
-
-        <div
-          class=${_(e)}
-          role="button"
-          tabindex=${this.disabled?"-1":"0"}
-          aria-disabled=${this.disabled}
-          aria-label=${this.label||"File upload"}
-          aria-describedby="dropzone-description${this.accept||this.maxSize?" dropzone-hints":""}"
-          @dragover=${this._handleDragOver}
-          @dragleave=${this._handleDragLeave}
-          @drop=${this._handleDrop}
-          @click=${this._handleClick}
-          @keydown=${this._handleKeyDown}
-        >
-          <input
-            type="file"
-            class="file-uploader"
-            ?multiple=${this.multiple}
-            accept=${this.accept}
-            ?disabled=${this.disabled}
-            @change=${this._handleFileInputChange}
-            aria-hidden="true"
-            tabindex="-1"
-          />
-
-          <div class="dropzone-content">
-            <wa-icon
-              name="${i?"arrow-up-from-bracket":"cloud-arrow-up"}"
-              class="dropzone-icon"
-              aria-hidden="true"
-            ></wa-icon>
-            <div class="dropzone-text">
-              ${i?h`<div class="compact-text" id="dropzone-description">
-                    ${this.label}
-                  </div>`:this.isDragging?h`<div id="dropzone-description">
-                    Drop ${this.multiple?"files":"file"} here
-                  </div>`:h`
-                    <div class="dropzone-cta" id="dropzone-description">
-                      <div>
-                        Drop ${this.multiple?"files":"file"} here or&nbsp;
-                      </div>
-                      <div class="browse">browse</div>
-                    </div>
-                    ${this.accept||this.maxSize?h`<div id="dropzone-hints">
-                          ${this.accept?h`<div class="dropzone-accept">
-                                ${this.accept.split(",").join(", ")} only
-                              </div>`:""}
-                          ${this.maxSize?h`<div class="dropzone-maxsize">
-                                Max size: ${this._formatFileSize(this.maxSize)}
-                              </div>`:""}
-                        </div>`:""}
-                  `}
-            </div>
-          </div>
-        </div>
-        ${this.errorMessage?h`
-              <div class="error-message" role="alert">
-                <wa-icon name="exclamation-circle"></wa-icon>
-                ${this.errorMessage}
-              </div>
-            `:""}
-        ${this.showPreview&&this.selectedFiles.length>0?h`
-              <div class="file-preview-list">
-                ${this.selectedFiles.map(({file:s,id:t})=>h`
-                    <hot-list-card
-                      title=${s.name}
-                      subtitle=${this._formatFileSize(s.size)}
-                      icon=${this._getFileIcon(s.type)}
-                      itemId=${t}
-                      @hot-remove=${()=>this._removeFile(t)}
-                    ></hot-list-card>
-                  `)}
-              </div>
-            `:""}
-
-        <div
-          class="sr-only"
-          role="status"
-          aria-live="polite"
-          aria-atomic="true"
-        >
-          ${this.statusMessage}
-        </div>
-      </div>
-    `}};S=new WeakMap,T=new WeakMap,C=new WeakMap,D=new WeakMap,A=new WeakMap,B=new WeakMap,L=new WeakMap,P=new WeakMap,k=new WeakMap,W=new WeakMap,I=new WeakMap,O=new WeakMap,r.styles=[M],n([f({type:Boolean})],r.prototype,"multiple",1),n([f({type:String})],r.prototype,"accept",1),n([f({type:Number})],r.prototype,"maxSize",1),n([f({type:Boolean})],r.prototype,"showPreview",1),n([f({type:Boolean})],r.prototype,"disabled",1),n([f({type:String})],r.prototype,"label",1),n([f({type:String})],r.prototype,"variant",1),n([m()],r.prototype,"isDragging",1),n([m()],r.prototype,"selectedFiles",1),n([m()],r.prototype,"errorMessage",1),n([m()],r.prototype,"statusMessage",1),n([z('input[type="file"]')],r.prototype,"fileInput",1);var te=r;export{r as a,te as b};
-/*! Bundled license information:
-
-lit-html/directive.js:
-  (**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-lit-html/directives/class-map.js:
-  (**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/