@hotosm/ui 0.3.3-b1 → 0.3.3-b3

package/README.md

@@ -157,8 +157,7 @@ bundler, you can import all the components as a bundle, as use them like so:
     import '@hotosm/ui/dist/hotosm-ui';
   </script>
 
-  <hot-logo><hot-logo>
-  <hot-button variant="primary">Click me!</hot-button>
+  <hot-header title="Test App" size="small" showLogin="false"></hot-header>
   ```
 
 #### React
@@ -167,31 +166,16 @@ Import in the same way as the bundler example above, except events
 are bound to slightly differently:
 
   ```jsx
-  <hot-button
-    size='small'
-    variant='text'
-    disabled={currentIndex <= 0}
-    onClick={() => {
-      console.log('do stuff');
+  <hot-header
+    title="Test App"
+    size="small"
+    showLogin="false"
+    onLogin={() => {
+      console.log('handler');
     }}
-  >
-  </hot-button>
+  ></hot-header>
   ```
 
-### Development
-
-HOT UI is developed in TypeScript, using Lit and @lit/react.
-
-Primarily we want to have:
-
-- Low level components exported from the Shoelace web component
-  library, simply re-exported with our default styling / CSS overrides.
-- A few composite components (header, sidebar, etc):
-  - Consistent styling across most of our tools where it counts.
-  - Reduction in duplicated logic, such as user management, OAuth login, etc.
-- Improved developer experience, reduced development time for new tools, while
-  maintaining consistency in look and feel of applications.
-
 ### How to contribute
 
 - Clone the project `git clone git@github.com:hotosm/ui.git`
@@ -201,8 +185,8 @@ Primarily we want to have:
 
 For **styling**, check `/theme`:
 
-- `hot.css` has a HOT theme, used across HOT components
-- `hot-sl.css` has a Shoelace theme, re-defining styles variables
+- `hot.css` has a HOT theme, used across HOT components.
+- `hot-wa-override.css` has a WebAwesome theme, re-defining style variables.
 
 ### License
 

package/dist/chunks/chunk.65UBVOFP.js

@@ -0,0 +1 @@
+import{f as e}from"./chunk.TPOAILO5.js";var r=e;customElements.define("hot-header",e);export{r as a};

package/dist/chunks/{chunk.SMJLJ4AN.js → chunk.EOKB5QI4.js}

@@ -1,4 +1,4 @@
-import{b as o}from"./chunk.6Y3X2E2V.js";import{a as l}from"./chunk.M3ZIZPKF.js";import{a as d}from"./chunk.GTNRNZDH.js";import{e as r,k as c}from"./chunk.TNLBUOUK.js";import{d as s,e as a,f as n,g as i}from"./chunk.NI7UJOOZ.js";l();var u,g,p,b,h,m,v,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";n(this,u,"");n(this,g,!1);n(this,p,!0);n(this,b,"About the information we collect");n(this,h,"We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity.");n(this,m,"I Agree");n(this,v,"I Do Not Agree")}get consentId(){return a(this,u)}set consentId(t){i(this,u,t)}get force(){return a(this,g)}set force(t){i(this,g,t)}get isOpen(){return a(this,p)}set isOpen(t){i(this,p,t)}get title(){return a(this,b)}set title(t){i(this,b,t)}get message(){return a(this,h)}set message(t){i(this,h,t)}get agreeLabel(){return a(this,m)}set agreeLabel(t){i(this,m,t)}get notAgreeLabel(){return a(this,v)}set notAgreeLabel(t){i(this,v,t)}render(){return this.isOpen?r`
+import{a as d}from"./chunk.GTNRNZDH.js";import{b as r}from"./chunk.6Y3X2E2V.js";import{a as l}from"./chunk.M3ZIZPKF.js";import{e as o,k as c}from"./chunk.TNLBUOUK.js";import{d as s,e as n,f as a,g as i}from"./chunk.NI7UJOOZ.js";l();var u,g,p,b,h,m,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";a(this,u,"");a(this,g,!0);a(this,p,"About the information we collect");a(this,b,"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,m,"I Do Not Agree")}get consentId(){return n(this,u)}set consentId(t){i(this,u,t)}get isOpen(){return n(this,g)}set isOpen(t){i(this,g,t)}get title(){return n(this,p)}set title(t){i(this,p,t)}get message(){return n(this,b)}set message(t){i(this,b,t)}get agreeLabel(){return n(this,h)}set agreeLabel(t){i(this,h,t)}get notAgreeLabel(){return n(this,m)}set notAgreeLabel(t){i(this,m,t)}render(){return this.isOpen?o`
       <div class="consent-overlay">
         <div class="consent-container">
           <wa-callout variant="brand" appearance="outlined filled" size="large" class="consent-callout">
@@ -33,4 +33,4 @@ import{b as o}from"./chunk.6Y3X2E2V.js";import{a as l}from"./chunk.M3ZIZPKF.js";
           </wa-callout>
         </div>
       </div>
-    `:null}_setAgree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0}))}_setDisagree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(`${this.consentId}-consent-agree`);if(t==="false"){this.isOpen=!1;return}t==="true"&&(this.isOpen=!1)}};u=new WeakMap,g=new WeakMap,p=new WeakMap,b=new WeakMap,h=new WeakMap,m=new WeakMap,v=new WeakMap,e.styles=[d],s([o({type:String,attribute:"consent-id"})],e.prototype,"consentId",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;export{e as a,O as b};
+    `:null}_setAgree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0}))}_setDisagree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(`${this.consentId}-consent-agree`);if(t==="false"){this.isOpen=!1;return}t==="true"&&(this.isOpen=!1)}};u=new WeakMap,g=new WeakMap,p=new WeakMap,b=new WeakMap,h=new WeakMap,m=new WeakMap,e.styles=[d],s([r({type:String,attribute:"consent-id"})],e.prototype,"consentId",1),s([r({type:Boolean})],e.prototype,"isOpen",1),s([r({type:String})],e.prototype,"title",1),s([r({type:String})],e.prototype,"message",1),s([r({type:String,attribute:"agree-label"})],e.prototype,"agreeLabel",1),s([r({type:String,attribute:"not-agree-label"})],e.prototype,"notAgreeLabel",1);var k=e;export{e as a,k as b};

package/dist/chunks/chunk.FICDKF3C.js

@@ -0,0 +1 @@
+import{b as e}from"./chunk.EOKB5QI4.js";var n=e;customElements.define("hot-consent",e);export{n as a};

package/dist/chunks/{chunk.34D2LPI2.js → chunk.ILRWC26B.js}

@@ -1,4 +1,4 @@
-import{c as o,d as t,g as l,h as i}from"./chunk.2FEIL35F.js";import{a as e,b as a}from"./chunk.6Y3X2E2V.js";import{e as n}from"./chunk.TNLBUOUK.js";var d=`:host {
+import{c as o,d as e,g as l,h as i}from"./chunk.2FEIL35F.js";import{a as t,b as a}from"./chunk.6Y3X2E2V.js";import{e as n}from"./chunk.TNLBUOUK.js";var p=`:host {
   display: flex;
   position: relative;
   align-items: stretch;
@@ -58,7 +58,7 @@ import{c as o,d as t,g as l,h as i}from"./chunk.2FEIL35F.js";import{a as e,b as
   display: block;
   overflow: hidden;
 }
-`,r=class extends t{constructor(){super(...arguments),this.variant="brand",this.appearance="outlined filled",this.size="medium"}render(){return n`
+`,r=class extends e{constructor(){super(...arguments),this.variant="brand",this.appearance="outlined filled",this.size="medium"}render(){return n`
       <div part="icon">
         <slot name="icon"></slot>
       </div>
@@ -66,4 +66,4 @@ import{c as o,d as t,g as l,h as i}from"./chunk.2FEIL35F.js";import{a as e,b as
       <div part="message">
         <slot></slot>
       </div>
-    `}};r.css=[d,i,l];o([a({reflect:!0})],r.prototype,"variant",2);o([a({reflect:!0})],r.prototype,"appearance",2);o([a({reflect:!0})],r.prototype,"size",2);r=o([e("wa-callout")],r);
+    `}};r.css=[p,i,l];o([a({reflect:!0})],r.prototype,"variant",2);o([a({reflect:!0})],r.prototype,"appearance",2);o([a({reflect:!0})],r.prototype,"size",2);r=o([t("wa-callout")],r);