@wral/active-alerts 0.2.4 → 0.2.6

package/dist/define.mjs

@@ -1,4 +1,4 @@
-import { W as t } from "./wral-active-alerts-CrVfjdZW.js";
+import { W as t } from "./wral-active-alerts-BrdwAfki.js";
 function i() {
   const e = globalThis?.customElements;
   e && (e.get("wral-active-alerts") || e.define("wral-active-alerts", t));

package/dist/define.standalone.js

@@ -759,6 +759,7 @@ class ot extends C {
 		}
 		@media (max-width: 720px) {
 			.wrapper { padding: .75rem .75rem 1.25rem; }
+			.alert-card { grid-template-columns: 1fr; }
 		}
 	`;
   async firstUpdated() {
@@ -841,7 +842,6 @@ class ot extends C {
     return $`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
-					<span>Active Alerts</span>
 					${e ? $`<span class="pill">Loading…</span>` : ""}
 				</div>
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { W as r, n as s, s as l } from "./wral-active-alerts-CrVfjdZW.js";
+import { W as r, n as s, s as l } from "./wral-active-alerts-BrdwAfki.js";
 export {
   r as WralActiveAlerts,
   s as normalizeAlert,

package/dist/{wral-active-alerts-CrVfjdZW.js → wral-active-alerts-BrdwAfki.js}

@@ -2,21 +2,21 @@ import { LitElement as g, css as u, html as i } from "lit";
 import { createClient as b } from "@wral/sdk-alerts/v1";
 const v = {
   lg: 1366
-}, y = "https://api.wral.com/alerts/v1/active/alerts", x = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", $ = (e) => String(e || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", A = (e) => {
+}, y = "https://api.wral.com/alerts/v1/active/alerts", x = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", $ = (e) => String(e || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", I = (e) => {
   if (!e) return null;
-  const t = e.link || e.url || e.href || "", s = e.title || e.headline || "";
-  if (!s) return null;
-  const a = String(e.topic || "").trim(), l = a.toLowerCase(), r = e.caption || a || "Alert", n = e.image || e.imageUrl || e.image_url || x;
+  const t = e.link || e.url || e.href || "", l = e.title || e.headline || "";
+  if (!l) return null;
+  const a = String(e.topic || "").trim(), s = a.toLowerCase(), r = e.caption || a || "Alert", n = e.image || e.imageUrl || e.image_url || x;
   return {
     url: t,
-    title: s,
-    topic: l || a,
+    title: l,
+    topic: s || a,
     caption: r,
     image: n,
     body: e.body || e.summary || "",
     effectiveFrom: e.effectiveFrom || e.effective_from || ""
   };
-}, I = (e) => {
+}, A = (e) => {
   if (!e) return "";
   try {
     const t = new Date(e);
@@ -178,6 +178,7 @@ class _ extends g {
 		}
 		@media (max-width: 720px) {
 			.wrapper { padding: .75rem .75rem 1.25rem; }
+			.alert-card { grid-template-columns: 1fr; }
 		}
 	`;
   async firstUpdated() {
@@ -202,7 +203,7 @@ class _ extends g {
       this.loading = !0, this.error = "";
       try {
         const t = await this.fetchActiveAlerts();
-        this.items = (t?.items || []).map(A).filter(Boolean);
+        this.items = (t?.items || []).map(I).filter(Boolean);
       } catch (t) {
         console.error("[wral-active-alerts]", t), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
@@ -219,8 +220,8 @@ class _ extends g {
     this._refreshId && (globalThis.clearInterval(this._refreshId), this._refreshId = null);
   }
   render() {
-    const { items: t, loading: s, error: a } = this, l = (r, n) => {
-      const o = I(r.effectiveFrom), h = String(r.topic || "").trim().toLowerCase(), c = r.title || r.body, d = String(r.title || "").trim(), m = String(r.body || "").trim(), f = d && m && d !== m ? r.body : "", p = i`
+    const { items: t, loading: l, error: a } = this, s = (r, n) => {
+      const o = A(r.effectiveFrom), h = String(r.topic || "").trim().toLowerCase(), c = r.title || r.body, d = String(r.title || "").trim(), m = String(r.body || "").trim(), f = d && m && d !== m ? r.body : "", p = i`
 				<div class="thumb">
 					<img
 						src=${r.image}
@@ -260,18 +261,17 @@ class _ extends g {
     return i`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
-					<span>Active Alerts</span>
-					${s ? i`<span class="pill">Loading…</span>` : ""}
+					${l ? i`<span class="pill">Loading…</span>` : ""}
 				</div>
 
 				${a ? i`<div class="status error">${a}</div>` : ""}
-				${!a && !s && !t.length ? i`
+				${!a && !l && !t.length ? i`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
 				${t.length ? i`
 					<ul class="list">
-						${t.map(l)}
+						${t.map(s)}
 					</ul>
 				` : ""}
 			</div>
@@ -281,6 +281,6 @@ class _ extends g {
 globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", _);
 export {
   _ as W,
-  A as n,
+  I as n,
   $ as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wral/active-alerts",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "Lit web component for rendering the current set of active WRAL alerts.",
   "author": "Dominick Jones <djones@wral.com>",