npm - @hotosm/ui - Versions diffs - 0.6.0 → 0.7.0 - Mend

@hotosm/ui 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md CHANGED Viewed

@@ -44,176 +44,268 @@
   🎯 <strong>Roadmap / Tasks</strong>:
   <a href="https://github.com/orgs/hotosm/projects/37/views/3" target="_blank">https://github.com/orgs/hotosm/projects/37/views/3</a>
 </p>
 <!-- markdownlint-enable -->
 ---
-## Shared UI Components with HOT Theming
+## Overview
-This repository contains advice on how to use the WebAwesome
-[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-library, references to the HOTOSM style guide, and a few 'wrapper'
-components to assist development:
+Shared [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+built with [Lit](https://lit.dev) and themed for HOTOSM tools using
+[WebAwesome](https://webawesome.com) primitives.
-1. Reduced code duplication across HOT tools (we repeat a lot!)
-2. Simplified developer experience to create a HOT app.
-3. Reasonably consistent theming and style across tools.
+**Goals:**
-The main goal of this project is not to re-invent the wheel, or add an extra burden
-of development and maintenance. It should include a minimal number of
-components, such as:
+- Reduce code duplication across HOT tools.
+- Provide a consistent HOT look-and-feel out of the box.
+- Keep the component set small and focused (header, sidebar, footer, etc.).
-- Header, including auth flows (OSM, Google) and login info.
-- Sidebar with links to extra resources.
-- Footer with links.
+**WebAwesome version:** `3.2.1`
-## Quick start
-Current HOTOSM UI version used: `0.3.1-b5`
-Current WebAwesome version used: `3.2.1`
+---
-### Install WebAwesome
+## Installation
 ```bash
-pnpm install "@awesome.me/webawesome@3.2.1"
+pnpm install @hotosm/ui @awesome.me/webawesome@3.2.1
 ```
 > [!NOTE]
-> It's important to pin the version of web awesome used to the version in this
-> library, to avoid any conflicts and incompatibilities between components.
+> `@awesome.me/webawesome` is a **peer dependency**. Always pin it to the
+> version shown above to avoid conflicts between HOT components and
+> WebAwesome internals.
-### Install HOT Components
+---
-```bash
-pnpm install "@hotosm/ui"
+## Loading Styles
+Two CSS files are published. Choose the one that fits your setup.
+### Option A — Bundled (recommended for simplicity)
+A single self-contained file with WebAwesome base styles + HOT theme
+already inlined. Nothing else to load.
+```html
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@hotosm/ui@0.6.1/dist/style.css">
+```
+Or from a bundler:
+```js
+import '@hotosm/ui/dist/style.css';
 ```
-### Configure The Styles
+### Option B — Split / CDN-optimised (recommended for multi-tool caching)
+If you run several HOT tools (FMTM, Tasking Manager, etc.) and want
+the browser to **cache WebAwesome CSS once** across all of them, load
+WebAwesome from CDN separately and use the slim HOT-only stylesheet:
-In your `index.html` or equivalent frontend root, add the following classes
-to your `<html>` block:
+```html
+<!-- WebAwesome CSS — shared across all HOT tools via browser cache -->
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/native.css">
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/utilities.css">
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/themes/default.css">
+<!-- HOT theme only (fonts + design tokens + WebAwesome overrides) -->
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@hotosm/ui@0.6.1/dist/style-core.css">
+```
-  ```html
-  <!DOCTYPE html>
-  <html class="wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray
-    wa-success-cyan wa-warning-yellow wa-danger-orange">
-    <head>
-      xxx
-    </head>
-    <body>
-      xxx
-    </body>
-  </html>
-  ```
+Or from a bundler:
+```js
+// WebAwesome (resolve from node_modules)
+import '@awesome.me/webawesome/dist/styles/native.css';
+import '@awesome.me/webawesome/dist/styles/utilities.css';
+import '@awesome.me/webawesome/dist/styles/themes/default.css';
+// HOT theme only
+import '@hotosm/ui/dist/style-core.css';
+```
+| File | Size | Contains |
+| --- | --- | --- |
+| `style.css` | ~105 KB | WebAwesome + fonts + HOT theme (everything) |
+| `style-core.css` | ~21 KB | Fonts + HOT theme only (no WebAwesome) |
+> [!TIP]
+> **Which should I pick?**
+>
+> - Building a single standalone app? Use **Option A** — zero config.
+> - Running multiple HOT tools on the same domain or expecting users to
+>   navigate between them? Use **Option B** — the ~84 KB of shared
+>   WebAwesome CSS is fetched once and cached by the browser.
+---
+## HTML Setup
+Add the required WebAwesome classes to your `<html>` element:
+```html
+<!DOCTYPE html>
+<html class="wa-theme-default wa-palette-hotosm">
+  <head>...</head>
+  <body>...</body>
+</html>
+```
 > [!IMPORTANT]
-> These classes determine the colour usage for different component variants,
-> and probably should not be changed!
+> These classes activate the HOT colour palette and light theme for every
+> WebAwesome component on the page. Do not remove them.
-And import the required styles in your `main.ts` or equivalent (we import from
-package rather than CDN, to allow the bundler to work its CSS tree-shaking
-magic).
+---
-  ```js
-  import '@hotosm/ui/dist/style.css';
-  ```
+## Using Components
-If you wish to use any of the variables in `hot.css` manually, you can reference
-them as variables like so:
+### Via Bundler (Vite, Webpack, etc.)
-  ```css
-  /* In your CSS file */
-  some-param: var(--hot-some-param);
-  /* See all variables in the `theme/hot.css` file */
-  ```
+Import individual components — your bundler will tree-shake the rest:
-### Use The Components
+```js
+import '@hotosm/ui/dist/components/header/header.js';
+```
-#### Via Bundler
+```html
+<hot-header title="My App"></hot-header>
+```
-Import each component individually into your code:
+### Via CDN / Plain HTML / HTMX
+The recommended approach for HTMX and plain-HTML apps loads WebAwesome
+styles and components from CDN so the browser can cache them once across
+all HOT tools (Option B from the styles section above):
+```html
+<!DOCTYPE html>
+<html class="wa-theme-default wa-palette-hotosm">
+<head>
+  <!-- WebAwesome CSS — cached once across all HOT tools at this WA version -->
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/native.css">
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/utilities.css">
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/themes/default.css">
+  <!-- HOT UI theme (fonts + HOT design tokens + WebAwesome overrides, ~21 KB) -->
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@hotosm/ui@0.6.1/dist/style-core.css">
+  <!-- Import map: resolves WebAwesome bare-module specifiers
+       inside hotosm-ui.js -->
+  <!-- WA components load lazily from CDN only when first used;
+       no separate loader needed -->
+  <script type="importmap">
+    {
+      "imports": {
+        "@awesome.me/webawesome/dist/components/":
+          "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist-cdn/components/"
+      }
+    }
+  </script>
+  <!-- HOT UI web components -->
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@hotosm/ui@0.6.1/dist/hotosm-ui.js">
+  </script>
+</head>
+<body>
+  <hot-header id="hdr" title="My App" size="small" show-login></hot-header>
-  ```html
   <script>
-    import '@hotosm/ui/dist/components/header/header.js';
+    // Boolean props default to false.
+    // Include the attribute to make it true.
+    const hdr = document.getElementById('hdr');
+    hdr.drawer = true;        // enable the hamburger drawer
+    hdr.borderBottom = true;  // enable bottom border
   </script>
+</body>
+</html>
+```
-  <hot-header
-    param1=""
-    param2=""
-  >
-  </hot-header>
-  ```
-#### Via CDN
-If you are working directly in HTML, or other ways without a configured
-bundler, you can import all the components as a bundle, as use them like so:
-  ```html
-  <!-- The importmap is required to resolve @awesome.me/webawesome
-    imports in hotosm/ui -->
-  <!-- It's also vital to import from dist-cdn to avoid
-     needing to import subdependencies for webawesome -->
-  <head>
-    <script type="importmap">
-      {
-        "imports": {
-          "@awesome.me/webawesome/dist/components/": "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.0.0/dist-cdn/components/"
-        }
-      }
-    </script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.0.0/dist-cdn/webawesome.loader.js"
-    ></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@hotosm/ui@0.4.0/dist/hotosm-ui.js"
-    ></script>
-  </head>
-  <body>
-    <hot-header title="Test App" size="small" show-login="false"></hot-header>
-  </body>
-  ```
-#### React
-Import in the same way as the bundler example above, except events
-are bound to slightly differently:
-  ```jsx
-  <hot-header
-    title="Test App"
-    size="small"
-    showLogin="false"
-    onLogin={() => {
-      console.log('handler');
-    }}
-  ></hot-header>
-  ```
-### Component Guides
-- Header: see [`/header.md`](/header.md) for detailed integration, styling, and
-  framework examples.
-### How to contribute
-- Clone the project `git clone git@github.com:hotosm/ui.git`
-- Install dependencies `pnpm install`
-- Run the storybook `pnpm run dev`
-- Write code!
-For **styling**, check `/theme`:
-- `hot.css` has a HOT theme, used across HOT components.
-- `hot-wa.css` has a WebAwesome theme, re-defining style variables.
-### License
-HOT UI is free and open source software! you may use any HOT UI project under the
-terms of the GNU Affero General Public License (AGPL) Version 3.
+> [!TIP]
+> If you need only a single self-contained stylesheet instead of the three
+> WA links above, you can use Option A (`style.css`) — but then the ~84 KB
+> of WebAwesome CSS is bundled into the HOT package and cannot be shared
+> across tools as a single cached resource.
+### React
+Web Components work in React with a small caveat — use `ref` callbacks
+for custom events if React's synthetic event system doesn't forward them:
+```jsx
+import '@hotosm/ui/dist/components/header/header.js';
+function App() {
+  return (
+    <hot-header
+      title="My App"
+      ref={(el) => {
+        if (el) el.addEventListener('login', () => console.log('logged in'));
+      }}
+    />
+  );
+}
+```
+---
+## Using HOT Design Tokens
+The HOT theme exposes CSS custom properties you can reference in your
+own stylesheets:
+```css
+.my-card {
+  background: var(--hot-color-primary-50);
+  color: var(--hot-color-neutral-900);
+  font-family: var(--hot-font-sans);
+  padding: var(--hot-spacing-medium);
+  border-radius: var(--hot-border-radius-large);
+}
+```
+See all available tokens in
+[`src/themes/hot.css`](src/themes/hot.css).
+---
+## Component Guides
+- **Header:** see [`header.md`](header.md) for detailed integration,
+  styling, and framework examples.
+---
+## Contributing
+```bash
+git clone git@github.com:hotosm/ui.git
+cd ui
+pnpm install
+pnpm run dev        # starts Storybook on localhost:3001
+```
+**Styling files** (under `src/themes/`):
+| File | Purpose |
+| --- | --- |
+| `hot.css` | HOT design tokens (colours, typography, spacing) |
+| `hot-wa.css` | WebAwesome variable overrides to apply the HOT palette |
+---
+## License
+HOT UI is free and open source software. You may use any HOT UI project
+under the terms of the
+[GNU Affero General Public License (AGPL) Version 3](LICENSE.md).

package/dist/chunks/{chunk.GEAU3JJH.js → chunk.252GL6HT.js} RENAMED Viewed

@@ -45,7 +45,7 @@ import{a as o}from"./chunk.QABMDRWR.js";var e=o`
   }
   .dropzone:focus {
-    outline: 2px solid var(--hot-color-red-600);
+    outline: 2px solid var(--wa-color-focus);
     outline-offset: 2px;
   }
@@ -54,13 +54,13 @@ import{a as o}from"./chunk.QABMDRWR.js";var e=o`
   }
   .dropzone:focus-visible {
-    outline: 2px solid var(--hot-color-red-600);
+    outline: 2px solid var(--wa-color-focus);
     outline-offset: 2px;
   }
   .dropzone--dragging {
-    border-color: var(--hot-color-red-500);
-    background-color: var(--hot-color-red-100);
+    border-color: var(--hot-color-primary-500);
+    background-color: var(--hot-color-primary-100);
     border-width: 3px;
   }
@@ -96,11 +96,11 @@ import{a as o}from"./chunk.QABMDRWR.js";var e=o`
   }
   .dropzone:hover:not(.dropzone--disabled) .dropzone-icon {
-    color: var(--hot-color-red-500);
+    color: var(--hot-color-primary-500);
   }
   .dropzone--dragging .dropzone-icon {
-    color: var(--hot-color-red-600);
+    color: var(--hot-color-primary-600);
   }
   .dropzone-cta {
@@ -110,7 +110,7 @@ import{a as o}from"./chunk.QABMDRWR.js";var e=o`
   .dropzone-text {
     font-size: var(--hot-font-size-small);
-    font-weight: 500;
+    font-weight: var(--hot-font-weight-semibold);
     color: var(--hot-color-neutral-700);
     text-align: center;
   }
@@ -152,15 +152,15 @@ import{a as o}from"./chunk.QABMDRWR.js";var e=o`
     gap: var(--hot-spacing-x-small);
     margin-top: var(--hot-spacing-small);
     padding: var(--hot-spacing-small);
-    background-color: var(--hot-color-red-50);
-    border: 1px solid var(--hot-color-red-200);
+    background-color: var(--hot-color-danger-50);
+    border: 1px solid var(--hot-color-danger-200);
     border-radius: var(--hot-border-radius-small);
-    color: var(--hot-color-red-700);
+    color: var(--hot-color-danger-700);
     font-size: var(--hot-font-size-small);
   }
   .error-message wa-icon {
-    color: var(--hot-color-red-600);
+    color: var(--hot-color-danger-600);
     font-size: var(--hot-font-size-medium);
   }

package/dist/chunks/{chunk.BORCUX2M.js → chunk.2Y7OBKRQ.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as e}from"./chunk.~~7PROWJNJ~~.js";var a=e;customElements.get("hot-header")\|\|customElements.define("hot-header",e);export{a};
1	+ import{b as e}from"./chunk.XU6UFL27.js";var a=e;customElements.get("hot-header")\|\|customElements.define("hot-header",e);export{a};

package/dist/chunks/{chunk.AL4CJN73.js → chunk.5QY2VLMG.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as o}from"./chunk.~~CQO3GWTI~~.js";var t=o;customElements.get("hotosm-tool-menu")\|\|customElements.define("hotosm-tool-menu",o);export{t as a};
1	+ import{b as o}from"./chunk.P6GWPFCT.js";var t=o;customElements.get("hotosm-tool-menu")\|\|customElements.define("hotosm-tool-menu",o);export{t as a};

package/dist/chunks/{chunk.ORZ5STBX.js → chunk.6BGQ256H.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{a as l}from"./chunk.KO4EOD3I.js";import{a as d}from"./chunk.MZOQNTPX.js";import{a as r}from"./chunk.ZETV7TDG.js";import{d as o,f as c}from"./chunk.QABMDRWR.js";import{d as s,e as n,f as a,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";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`
+import{a as d}from"./chunk.ZGC6XD6L.js";import{a as o}from"./chunk.ZETV7TDG.js";import{a as l}from"./chunk.KO4EOD3I.js";import{d as r,f as c}from"./chunk.QABMDRWR.js";import{d as s,e as a,f as n,g as i}from"./chunk.N2W26RCT.js";Promise.allSettled([import("@awesome.me/webawesome/dist/components/callout/callout.js"),import("@awesome.me/webawesome/dist/components/icon/icon.js"),import("@awesome.me/webawesome/dist/components/button/button.js")]);l();var u,g,p,b,m,h,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";n(this,u,"");n(this,g,!1);n(this,p,"About the information we collect");n(this,b,"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,h,"I Do Not Agree")}get consentId(){return a(this,u)}set consentId(t){i(this,u,t)}get isOpen(){return a(this,g)}set isOpen(t){i(this,g,t)}get title(){return a(this,p)}set title(t){i(this,p,t)}get message(){return a(this,b)}set message(t){i(this,b,t)}get agreeLabel(){return a(this,m)}set agreeLabel(t){i(this,m,t)}get notAgreeLabel(){return a(this,h)}set notAgreeLabel(t){i(this,h,t)}render(){return this.isOpen?r`
       <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{a as l}from"./chunk.KO4EOD3I.js";import{a as d}from"./chunk.MZOQNTPX.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,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};
+    `: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,m=new WeakMap,h=new WeakMap,e.styles=[d],s([o({type:String,attribute:"consent-id"})],e.prototype,"consentId",1),s([o({type:Boolean,attribute:"is-open"})],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 E=e;export{e as a,E as b};

package/dist/chunks/{chunk.SBUFNOMY.js → chunk.7JIKOYG6.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as e}from"./chunk.~~ORZ5STBX~~.js";var n=e;customElements.get("hot-consent")\|\|customElements.define("hot-consent",e);export{n as a};
1	+ import{b as e}from"./chunk.6BGQ256H.js";var n=e;customElements.get("hot-consent")\|\|customElements.define("hot-consent",e);export{n as a};

package/dist/chunks/{chunk.3LBUXCAP.js → chunk.APYFF2XE.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as o}from"./chunk.~~BD4Q32VT~~.js";var t=o;customElements.get("hot-logo")\|\|customElements.define("hot-logo",o);export{t as a};
1	+ import{b as o}from"./chunk.LVCDAVRU.js";var t=o;customElements.get("hot-logo")\|\|customElements.define("hot-logo",o);export{t as a};

package/dist/chunks/{chunk.XEZQ5ZRE.js → chunk.BVHLTKMC.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as e}from"./chunk.~~WTTPHBL3~~.js";var t=e;customElements.get("hot-file-input-dropzone")\|\|customElements.define("hot-file-input-dropzone",e);export{t as a};
1	+ import{b as e}from"./chunk.CNUZFRRF.js";var t=e;customElements.get("hot-file-input-dropzone")\|\|customElements.define("hot-file-input-dropzone",e);export{t as a};

package/dist/chunks/chunk.CNUZFRRF.js ADDED Viewed

@@ -0,0 +1,105 @@
+import{a as M}from"./chunk.252GL6HT.js";import{a as f,b as m,c as z}from"./chunk.ZETV7TDG.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}});Promise.allSettled([import("@awesome.me/webawesome/dist/components/icon/icon.js"),import("@awesome.me/webawesome/dist/components/divider/divider.js")]);var S,T,C,D,P,A,B,L,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,!1);d(this,P,!1);d(this,A,"");d(this,B,"traditional");d(this,L,!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,P)}set disabled(e){c(this,P,e)}get label(){return o(this,A)}set label(e){c(this,A,e)}get variant(){return o(this,B)}set variant(e){c(this,B,e)}get isDragging(){return o(this,L)}set isDragging(e){c(this,L,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,P=new WeakMap,A=new WeakMap,B=new WeakMap,L=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,attribute:"show-preview"})],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 Z=r;export{r as a,Z 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
+   *)
+*/