@wral/active-alerts 0.2.6 → 0.2.8

package/dist/define.mjs

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

package/dist/define.standalone.js

@@ -45,7 +45,7 @@ const at = (i) => new tt(typeof i == "string" ? i : i + "", void 0, j), lt = (i,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: $t } = Object, k = globalThis, F = k.trustedTypes, mt = F ? F.emptyScript : "", gt = k.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
+const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: $t } = Object, M = globalThis, F = M.trustedTypes, mt = F ? F.emptyScript : "", gt = M.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
       i = i ? mt : null;
@@ -74,7 +74,7 @@ const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnProperty
   }
   return e;
 } }, et = (i, t) => !ct(i, t), K = { attribute: !0, type: String, converter: z, reflect: !1, useDefault: !1, hasChanged: et };
-Symbol.metadata ??= Symbol("metadata"), k.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+Symbol.metadata ??= Symbol("metadata"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let b = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
@@ -256,20 +256,20 @@ let b = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[x("elementProperties")] = /* @__PURE__ */ new Map(), b[x("finalized")] = /* @__PURE__ */ new Map(), gt?.({ ReactiveElement: b }), (k.reactiveElementVersions ??= []).push("2.1.1");
+b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[x("elementProperties")] = /* @__PURE__ */ new Map(), b[x("finalized")] = /* @__PURE__ */ new Map(), gt?.({ ReactiveElement: b }), (M.reactiveElementVersions ??= []).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const D = globalThis, I = D.trustedTypes, J = I ? I.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, st = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, it = "?" + m, _t = `<${it}>`, A = document, P = () => A.createComment(""), U = (i) => i === null || typeof i != "object" && typeof i != "function", B = Array.isArray, yt = (i) => B(i) || typeof i?.[Symbol.iterator] == "function", R = `[ 	
+const D = globalThis, I = D.trustedTypes, J = I ? I.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, st = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, it = "?" + m, _t = `<${it}>`, v = document, P = () => v.createComment(""), U = (i) => i === null || typeof i != "object" && typeof i != "function", B = Array.isArray, yt = (i) => B(i) || typeof i?.[Symbol.iterator] == "function", R = `[ 	
 \f\r]`, w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Z = /-->/g, G = />/g, g = RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, rt = /^(?:script|style|textarea|title)$/i, At = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), $ = At(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), Y = /* @__PURE__ */ new WeakMap(), y = A.createTreeWalker(A, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, rt = /^(?:script|style|textarea|title)$/i, vt = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), $ = vt(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), Y = /* @__PURE__ */ new WeakMap(), y = v.createTreeWalker(v, 129);
 function nt(i, t) {
   if (!B(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return J !== void 0 ? J.createHTML(t) : t;
 }
-const vt = (i, t) => {
+const At = (i, t) => {
   const e = i.length - 1, s = [];
   let r, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = w;
   for (let d = 0; d < e; d++) {
@@ -286,7 +286,7 @@ class T {
     let r;
     this.parts = [];
     let n = 0, o = 0;
-    const d = t.length - 1, a = this.parts, [c, l] = vt(t, e);
+    const d = t.length - 1, a = this.parts, [c, l] = At(t, e);
     if (this.el = T.createElement(c, s), y.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
@@ -295,7 +295,7 @@ class T {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(st)) {
           const u = l[o++], f = r.getAttribute(h).split(m), N = /([.?@])?(.*)/.exec(u);
-          a.push({ type: 1, index: n, name: N[2], strings: f, ctor: N[1] === "." ? Et : N[1] === "?" ? St : N[1] === "@" ? wt : M }), r.removeAttribute(h);
+          a.push({ type: 1, index: n, name: N[2], strings: f, ctor: N[1] === "." ? Et : N[1] === "?" ? St : N[1] === "@" ? wt : k }), r.removeAttribute(h);
         } else h.startsWith(m) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
         if (rt.test(r.tagName)) {
           const h = r.textContent.split(m), u = h.length - 1;
@@ -314,7 +314,7 @@ class T {
     }
   }
   static createElement(t, e) {
-    const s = A.createElement("template");
+    const s = v.createElement("template");
     return s.innerHTML = t, s;
   }
 }
@@ -335,7 +335,7 @@ class bt {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, r = (t?.creationScope ?? A).importNode(e, !0);
+    const { el: { content: e }, parts: s } = this._$AD, r = (t?.creationScope ?? v).importNode(e, !0);
     y.currentNode = r;
     let n = y.nextNode(), o = 0, d = 0, a = s[0];
     for (; a !== void 0; ) {
@@ -345,7 +345,7 @@ class bt {
       }
       o !== a?.index && (n = y.nextNode(), o++);
     }
-    return y.currentNode = A, r;
+    return y.currentNode = v, r;
   }
   p(t) {
     let e = 0;
@@ -380,7 +380,7 @@ class O {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== p && U(this._$AH) ? this._$AA.nextSibling.data = t : this.T(A.createTextNode(t)), this._$AH = t;
+    this._$AH !== p && U(this._$AH) ? this._$AA.nextSibling.data = t : this.T(v.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = T.createElement(nt(s.h, s.h[0]), this.options)), s);
@@ -411,7 +411,7 @@ class O {
     this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
   }
 }
-class M {
+class k {
   get tagName() {
     return this.element.tagName;
   }
@@ -436,7 +436,7 @@ class M {
     t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Et extends M {
+class Et extends k {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -444,7 +444,7 @@ class Et extends M {
     this.element[this.name] = t === p ? void 0 : t;
   }
 }
-class St extends M {
+class St extends k {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -452,7 +452,7 @@ class St extends M {
     this.element.toggleAttribute(this.name, !!t && t !== p);
   }
 }
-class wt extends M {
+class wt extends k {
   constructor(t, e, s, r, n) {
     super(t, e, s, r, n), this.type = 5;
   }
@@ -523,41 +523,41 @@ const _ = (i, ...t) => (...e) => i(...t, ...e);
 function Tt(i) {
   return {
     // Underlying mechanism to use the REST URLs directly.
-    api: _(v, i),
+    api: _(A, i),
     listActiveAlerts: _(Ot, i),
     getActiveAlert: _(Nt, i),
     listAlerts: _(Ht, i),
     getAlert: _(It, i),
-    sendAlert: _(kt, i),
-    cancelAlert: _(Mt, i)
+    sendAlert: _(Mt, i),
+    cancelAlert: _(kt, i)
   };
 }
 function Ot(i) {
   const t = Object.assign({}, i, { apiKey: void 0 });
-  return v(t, "/v1/active/alerts");
+  return A(t, "/v1/active/alerts");
 }
 function Nt(i, t) {
   const e = Object.assign({}, i, { apiKey: void 0 });
-  return v(e, `/v1/active/alerts/${t}`);
+  return A(e, `/v1/active/alerts/${t}`);
 }
 function Ht(i) {
-  return v(i, "/v1/alerts");
+  return A(i, "/v1/alerts");
 }
 function It(i, t) {
-  return v(i, `/v1/alerts/${t}`);
+  return A(i, `/v1/alerts/${t}`);
 }
-function kt(i, t) {
-  return v(i, "/v1/alerts", {
+function Mt(i, t) {
+  return A(i, "/v1/alerts", {
     method: "POST",
     body: t
   });
 }
-function Mt(i, t) {
-  return v(i, `/v1/alerts/${t}`, {
+function kt(i, t) {
+  return A(i, `/v1/alerts/${t}`, {
     method: "DELETE"
   });
 }
-async function v(i, t, e) {
+async function A(i, t, e) {
   const s = i.baseUrl.endsWith("/") ? i.baseUrl : `${i.baseUrl}/`, r = t.startsWith("/") ? t.substring(1) : t, n = new URL(r, s), o = {
     "Content-Type": "application/json"
   };
@@ -682,25 +682,24 @@ class ot extends C {
 			text-decoration: underline;
 		}
 		.alert-card:focus-visible {
-			outline: 2px solid #000b27;
+			outline: 1px solid var(--color-secondary);
 			outline-offset: 2px;
 		}
 		.thumb {
 			overflow: hidden;
-			background: #f3f3f3;
-			border: 1px solid #ececec;
-			aspect-ratio: 4 / 3;
+			aspect-ratio: 16 / 9;
 		}
 		.thumb img {
 			display: block;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
+			border-radius: var(--radius-sm, 0.3125rem);
 		}
 		.alert-body {
 			display: flex;
 			flex-direction: column;
-			gap: .35rem;
+			gap: 1rem;
 		}
 		.alert-header {
 			display: flex;

package/dist/index.mjs

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

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

@@ -1,18 +1,18 @@
 import { LitElement as g, css as u, html as i } from "lit";
-import { createClient as b } from "@wral/sdk-alerts/v1";
-const v = {
+import { createClient as v } from "@wral/sdk-alerts/v1";
+const b = {
   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", I = (e) => {
   if (!e) return null;
-  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;
+  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", o = e.image || e.imageUrl || e.image_url || x;
   return {
     url: t,
-    title: l,
-    topic: s || a,
+    title: s,
+    topic: l || a,
     caption: r,
-    image: n,
+    image: o,
     body: e.body || e.summary || "",
     effectiveFrom: e.effectiveFrom || e.effective_from || ""
   };
@@ -48,7 +48,7 @@ class _ extends g {
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: ${v.lg}px;
+			max-width: ${b.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -101,25 +101,24 @@ class _ extends g {
 			text-decoration: underline;
 		}
 		.alert-card:focus-visible {
-			outline: 2px solid #000b27;
+			outline: 1px solid var(--color-secondary);
 			outline-offset: 2px;
 		}
 		.thumb {
 			overflow: hidden;
-			background: #f3f3f3;
-			border: 1px solid #ececec;
-			aspect-ratio: 4 / 3;
+			aspect-ratio: 16 / 9;
 		}
 		.thumb img {
 			display: block;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
+			border-radius: var(--radius-sm, 0.3125rem);
 		}
 		.alert-body {
 			display: flex;
 			flex-direction: column;
-			gap: .35rem;
+			gap: 1rem;
 		}
 		.alert-header {
 			display: flex;
@@ -194,7 +193,7 @@ class _ extends g {
     t.has("api") && t.get("api") !== this.api && this.load(), t.has("refreshInterval") && this._setupInterval();
   }
   async fetchActiveAlerts() {
-    return b({
+    return v({
       baseUrl: this.api.replace(/v1\/.*$/, "")
     }).listActiveAlerts();
   }
@@ -220,8 +219,8 @@ class _ extends g {
     this._refreshId && (globalThis.clearInterval(this._refreshId), this._refreshId = null);
   }
   render() {
-    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`
+    const { items: t, loading: s, error: a } = this, l = (r, o) => {
+      const n = 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}
@@ -234,9 +233,9 @@ class _ extends g {
 						<div class="label ${h}">
 							${$(r.caption)}
 						</div>
-						${o ? i`
+						${n ? i`
 							<span class="date">
-								${o}
+								${n}
 							</span>
 						` : ""}
 					</div>
@@ -245,7 +244,7 @@ class _ extends g {
 				</div>
 			`;
       return i`
-				<li class="alert" data-index=${n} aria-label="Site Alert">
+				<li class="alert" data-index=${o} aria-label="Site Alert">
 					${r.url ? i`
 						<a class="alert-card" href=${r.url} aria-label=${c}>
 							${p}
@@ -261,17 +260,17 @@ class _ extends g {
     return i`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
-					${l ? i`<span class="pill">Loading…</span>` : ""}
+					${s ? i`<span class="pill">Loading…</span>` : ""}
 				</div>
 
 				${a ? i`<div class="status error">${a}</div>` : ""}
-				${!a && !l && !t.length ? i`
+				${!a && !s && !t.length ? i`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
 				${t.length ? i`
 					<ul class="list">
-						${t.map(s)}
+						${t.map(l)}
 					</ul>
 				` : ""}
 			</div>

package/package.json

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