@wral/active-alerts 0.1.4 → 0.2.0

package/dist/define.mjs

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

package/dist/define.standalone.js

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const H = globalThis, L = H.ShadowRoot && (H.ShadyCSS === void 0 || H.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, j = Symbol(), V = /* @__PURE__ */ new WeakMap();
+const H = globalThis, z = H.ShadowRoot && (H.ShadyCSS === void 0 || H.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, j = Symbol(), V = /* @__PURE__ */ new WeakMap();
 let tt = class {
   constructor(t, e, s) {
     if (this._$cssResult$ = !0, s !== j) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -12,7 +12,7 @@ let tt = class {
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (L && t === void 0) {
+    if (z && t === void 0) {
       const s = e !== void 0 && e.length === 1;
       s && (t = V.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && V.set(e, t));
     }
@@ -30,12 +30,12 @@ const at = (i) => new tt(typeof i == "string" ? i : i + "", void 0, j), lt = (i,
   })(r) + i[n + 1]), i[0]);
   return new tt(e, i, j);
 }, ht = (i, t) => {
-  if (L) i.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
+  if (z) i.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
   else for (const e of t) {
     const s = document.createElement("style"), r = H.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
   }
-}, q = L ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+}, q = z ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
   return at(e);
@@ -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, M = globalThis, F = M.trustedTypes, mt = F ? F.emptyScript : "", gt = M.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, L = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
       i = i ? mt : null;
@@ -73,7 +73,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 };
+} }, et = (i, t) => !ct(i, t), K = { attribute: !0, type: String, converter: L, reflect: !1, useDefault: !1, hasChanged: et };
 Symbol.metadata ??= Symbol("metadata"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let b = class extends HTMLElement {
   static addInitializer(t) {
@@ -172,14 +172,14 @@ let b = class extends HTMLElement {
   _$ET(t, e) {
     const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
     if (r !== void 0 && s.reflect === !0) {
-      const n = (s.converter?.toAttribute !== void 0 ? s.converter : z).toAttribute(e, s.type);
+      const n = (s.converter?.toAttribute !== void 0 ? s.converter : L).toAttribute(e, s.type);
       this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
     }
   }
   _$AK(t, e) {
     const s = this.constructor, r = s._$Eh.get(t);
     if (r !== void 0 && this._$Em !== r) {
-      const n = s.getPropertyOptions(r), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : z;
+      const n = s.getPropertyOptions(r), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : L;
       this._$Em = r;
       const c = o.fromAttribute(e, n.type);
       this[r] = c ?? this._$Ej?.get(r) ?? c, this._$Em = null;
@@ -581,21 +581,23 @@ async function v(i, t, e) {
   const d = await a.json();
   return d.caption && console.warn("Alert API provided a value with a caption field.  The caption field is deprecated and will be removed."), (d?.items || []).some((l) => l.caption) && console.warn("Alert API provided an item with a caption field.  The caption field is deprecated and will be removed."), d;
 }
-const Rt = "https://api.wral.com/alerts/v1/active/alerts", zt = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", Lt = (i) => String(i || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", jt = (i) => {
+const Rt = {
+  lg: 1366
+}, Lt = "https://api.wral.com/alerts/v1/active/alerts", zt = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", jt = (i) => String(i || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", Dt = (i) => {
   if (!i) return null;
   const t = i.url || i.href || "", e = i.title || i.headline || "";
   if (!t || !e) return null;
-  const s = i.topic || "", r = i.caption || s || "Alert", n = i.image || i.imageUrl || i.image_url || zt;
+  const s = String(i.topic || "").trim(), r = s.toLowerCase(), n = i.caption || s || "Alert", o = i.image || i.imageUrl || i.image_url || zt;
   return {
     url: t,
     title: e,
-    topic: s,
-    caption: r,
-    image: n,
+    topic: r || s,
+    caption: n,
+    image: o,
     body: i.body || i.summary || "",
     effectiveFrom: i.effectiveFrom || i.effective_from || ""
   };
-}, Dt = (i) => {
+}, Bt = (i) => {
   if (!i) return "";
   try {
     const t = new Date(i);
@@ -618,7 +620,7 @@ class ot extends C {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = Rt, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
+    super(), this.api = Lt, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
   }
   static styles = lt`
 		:host {
@@ -627,7 +629,7 @@ class ot extends C {
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: 1040px;
+			max-width: ${Rt.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -700,10 +702,10 @@ class ot extends C {
 			color: #fff;
 			font-size: .75rem;
 			font-weight: 700;
-			padding: 0.125rem 0.35rem;
-			border-radius: 6px;
+			padding: 0.125rem 0.1875rem 0.05rem;
+			border-radius: 4px;
 			text-transform: uppercase;
-			background-color: #c15800;
+			background-color: #daa520; /* default (gold) */
 			letter-spacing: .03em;
 		}
 		.label.recommended-story {
@@ -780,7 +782,7 @@ class ot extends C {
       this.loading = !0, this.error = "";
       try {
         const t = await this.fetchActiveAlerts();
-        this.items = (t?.items || []).map(jt).filter(Boolean);
+        this.items = (t?.items || []).map(Dt).filter(Boolean);
       } catch (t) {
         console.error("[wral-active-alerts]", t), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
@@ -798,7 +800,7 @@ class ot extends C {
   }
   render() {
     const { items: t, loading: e, error: s } = this, r = (n, o) => {
-      const c = Dt(n.effectiveFrom);
+      const c = Bt(n.effectiveFrom), a = String(n.topic || "").trim().toLowerCase();
       return $`
 				<li class="alert" data-index=${o} aria-label="Site Alert">
 					<div class="thumb">
@@ -810,8 +812,8 @@ class ot extends C {
 					</div>
 					<div class="alert-body">
 						<div class="alert-header">
-							<div class="label ${n.topic}">
-								${Lt(n.caption)}
+							<div class="label ${a}">
+								${jt(n.caption)}
 							</div>
 							${c ? $`
 								<span class="date">
@@ -847,11 +849,11 @@ class ot extends C {
   }
 }
 globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", ot);
-function Bt() {
+function Wt() {
   const i = globalThis?.customElements;
   i && (i.get("wral-active-alerts") || i.define("wral-active-alerts", ot));
 }
-typeof window < "u" && globalThis.customElements && Bt();
+typeof window < "u" && globalThis.customElements && Wt();
 export {
-  Bt as defineAll
+  Wt as defineAll
 };

package/dist/index.mjs

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

package/dist/{wral-active-alerts-CSZAUUIB.js → wral-active-alerts-LMZOZ_Es.js}

@@ -1,20 +1,22 @@
-import { LitElement as c, css as d, html as i } from "lit";
-import { createClient as m } from "@wral/sdk-alerts/v1";
-const f = "https://api.wral.com/alerts/v1/active/alerts", p = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", h = (t) => String(t || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", g = (t) => {
+import { LitElement as d, css as m, html as i } from "lit";
+import { createClient as f } from "@wral/sdk-alerts/v1";
+const p = {
+  lg: 1366
+}, h = "https://api.wral.com/alerts/v1/active/alerts", g = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", u = (t) => String(t || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", b = (t) => {
   if (!t) return null;
   const e = t.url || t.href || "", s = t.title || t.headline || "";
   if (!e || !s) return null;
-  const a = t.topic || "", l = t.caption || a || "Alert", r = t.image || t.imageUrl || t.image_url || p;
+  const a = String(t.topic || "").trim(), l = a.toLowerCase(), r = t.caption || a || "Alert", n = t.image || t.imageUrl || t.image_url || g;
   return {
     url: e,
     title: s,
-    topic: a,
-    caption: l,
-    image: r,
+    topic: l || a,
+    caption: r,
+    image: n,
     body: t.body || t.summary || "",
     effectiveFrom: t.effectiveFrom || t.effective_from || ""
   };
-}, u = (t) => {
+}, v = (t) => {
   if (!t) return "";
   try {
     const e = new Date(t);
@@ -28,7 +30,7 @@ const f = "https://api.wral.com/alerts/v1/active/alerts", p = "https://assets.wr
     return "";
   }
 };
-class b extends c {
+class y extends d {
   static properties = {
     api: { type: String },
     items: { state: !0 },
@@ -37,16 +39,16 @@ class b extends c {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = f, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
+    super(), this.api = h, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
   }
-  static styles = d`
+  static styles = m`
 		:host {
 			display: block;
 			background: #f7f5f4;
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: 1040px;
+			max-width: ${p.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -119,10 +121,10 @@ class b extends c {
 			color: #fff;
 			font-size: .75rem;
 			font-weight: 700;
-			padding: 0.125rem 0.35rem;
-			border-radius: 6px;
+			padding: 0.125rem 0.1875rem 0.05rem;
+			border-radius: 4px;
 			text-transform: uppercase;
-			background-color: #c15800;
+			background-color: #daa520; /* default (gold) */
 			letter-spacing: .03em;
 		}
 		.label.recommended-story {
@@ -190,7 +192,7 @@ class b extends c {
     e.has("api") && e.get("api") !== this.api && this.load(), e.has("refreshInterval") && this._setupInterval();
   }
   async fetchActiveAlerts() {
-    return m({
+    return f({
       baseUrl: this.api.replace(/v1\/.*$/, "")
     }).listActiveAlerts();
   }
@@ -199,7 +201,7 @@ class b extends c {
       this.loading = !0, this.error = "";
       try {
         const e = await this.fetchActiveAlerts();
-        this.items = (e?.items || []).map(g).filter(Boolean);
+        this.items = (e?.items || []).map(b).filter(Boolean);
       } catch (e) {
         console.error("[wral-active-alerts]", e), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
@@ -216,10 +218,10 @@ class b extends c {
     this._refreshId && (globalThis.clearInterval(this._refreshId), this._refreshId = null);
   }
   render() {
-    const { items: e, loading: s, error: a } = this, l = (r, o) => {
-      const n = u(r.effectiveFrom);
+    const { items: e, loading: s, error: a } = this, l = (r, n) => {
+      const o = v(r.effectiveFrom), c = String(r.topic || "").trim().toLowerCase();
       return i`
-				<li class="alert" data-index=${o} aria-label="Site Alert">
+				<li class="alert" data-index=${n} aria-label="Site Alert">
 					<div class="thumb">
 						<img
 							src=${r.image}
@@ -229,12 +231,12 @@ class b extends c {
 					</div>
 					<div class="alert-body">
 						<div class="alert-header">
-							<div class="label ${r.topic}">
-								${h(r.caption)}
+							<div class="label ${c}">
+								${u(r.caption)}
 							</div>
-							${n ? i`
+							${o ? i`
 								<span class="date">
-									${n}
+									${o}
 								</span>
 							` : ""}
 						</div>
@@ -265,9 +267,9 @@ class b extends c {
 		`;
   }
 }
-globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", b);
+globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", y);
 export {
-  b as W,
-  g as n,
-  h as s
+  y as W,
+  b as n,
+  u as s
 };

package/package.json

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