@wral/my-wral-settings 0.2.4

package/dist/index.mjs

@@ -0,0 +1,4 @@
+import { M as a } from "./my-wral-settings-CZEj0day.js";
+export {
+  a as MyWralSettings
+};

package/dist/my-wral-settings-CZEj0day.js

@@ -0,0 +1,468 @@
+import { LitElement as $, css as F, html as r } from "lit";
+const N = {
+  md: 1024
+}, c = {
+  preferredName: ["preferred_name"],
+  zipCode: ["zipcode", "zip_code"],
+  dateOfBirth: ["date_of_birth"]
+}, B = (n) => n?.facts || n?.data?.facts || {}, p = (n, e) => {
+  for (const s of e) {
+    const t = n?.[s];
+    if (t) {
+      if (t?.item?.value != null) return String(t.item.value);
+      if (Array.isArray(t?.items) && t.items[0]?.value != null)
+        return String(t.items[0].value);
+    }
+  }
+  return "";
+}, h = (n) => {
+  const e = String(n || "").trim();
+  return e ? /^\d{4}-\d{2}-\d{2}/.test(e) ? e.slice(0, 10) : e : "";
+};
+class C extends $ {
+  static properties = {
+    getUserFacts: { attribute: !1 },
+    updateUserFact: { attribute: !1 },
+    updateUserFacts: { attribute: !1 },
+    loading: { state: !0 },
+    saving: { state: !0 },
+    error: { state: !0 },
+    success: { state: !0 },
+    _values: { state: !0 },
+    _dirty: { state: !0 },
+    _fieldErrors: { state: !0 }
+  };
+  constructor() {
+    super(), this.getUserFacts = null, this.updateUserFact = null, this.updateUserFacts = null, this.loading = !1, this.saving = !1, this.error = "", this.success = "", this._values = {
+      preferredName: "",
+      zipCode: "",
+      dateOfBirth: ""
+    }, this._originalValues = { ...this._values }, this._dirty = {
+      preferredName: !1,
+      zipCode: !1,
+      dateOfBirth: !1
+    }, this._fieldErrors = {
+      preferredName: "",
+      zipCode: "",
+      dateOfBirth: ""
+    }, this._handlePreferredNameInput = (e) => {
+      this._handleInput("preferredName", e);
+    }, this._handleZipCodeInput = (e) => {
+      this._handleInput("zipCode", e);
+    }, this._handleDateOfBirthInput = (e) => {
+      this._handleInput("dateOfBirth", e);
+    };
+  }
+  static styles = F`
+		:host {
+			display: block;
+			color: var(--mw-settings-ink, #1b1a17);
+			font-family: var(--mw-settings-font-family, "Sora",
+				"Trebuchet MS", sans-serif);
+		}
+		.card {
+			position: relative;
+			overflow: hidden;
+			border-radius: 20px;
+			border: 1px solid var(--mw-settings-border, #e3dbd1);
+			background: var(--mw-settings-surface, #fbf7f2);
+			padding: 1.75rem;
+			box-shadow: 0 12px 24px rgba(34, 28, 20, 0.08);
+			animation: riseIn 0.4s ease-out;
+		}
+		.card::before {
+			content: '';
+			position: absolute;
+			inset: -60% -20% auto -20%;
+			height: 160px;
+			background:
+				radial-gradient(circle at 20% 20%, rgba(255, 194, 128, 0.55),
+					transparent 60%),
+				radial-gradient(circle at 85% 0%, rgba(129, 191, 255, 0.4),
+					transparent 55%);
+			pointer-events: none;
+		}
+		.header {
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+			gap: 1.5rem;
+			position: relative;
+			z-index: 1;
+		}
+		.eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 0.7rem;
+			color: var(--mw-settings-muted, #6b6259);
+			margin: 0 0 0.35rem;
+		}
+		h2 {
+			margin: 0 0 0.25rem;
+			font-size: 1.5rem;
+			line-height: 1.2;
+		}
+		.subtitle {
+			margin: 0;
+			color: var(--mw-settings-muted, #6b6259);
+			font-size: 0.95rem;
+		}
+		.status-row {
+			display: flex;
+			gap: 0.5rem;
+			flex-wrap: wrap;
+			justify-content: flex-end;
+		}
+		.pill {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.35rem;
+			padding: 0.35rem 0.75rem;
+			border-radius: 999px;
+			font-size: 0.8rem;
+			font-weight: 600;
+			background: #ffffff;
+			border: 1px solid var(--mw-settings-border, #e3dbd1);
+			color: var(--mw-settings-muted, #6b6259);
+		}
+		.status {
+			margin: 1rem 0 0;
+			font-size: 0.9rem;
+			color: var(--mw-settings-muted, #6b6259);
+		}
+		.status.error {
+			color: #9b2c2c;
+		}
+		.status.success {
+			color: #2f7c3d;
+		}
+		form {
+			margin-top: 1.5rem;
+			display: grid;
+			gap: 1.25rem;
+			position: relative;
+			z-index: 1;
+		}
+		.fields {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+			gap: 1rem;
+		}
+		.field {
+			background: var(--mw-settings-panel, #ffffff);
+			border: 1px solid var(--mw-settings-border, #e3dbd1);
+			border-radius: 14px;
+			padding: 0.85rem 0.9rem 0.95rem;
+			display: grid;
+			gap: 0.5rem;
+			animation: fieldIn 0.35s ease-out;
+		}
+		.field:nth-child(2) { animation-delay: 0.04s; }
+		.field:nth-child(3) { animation-delay: 0.08s; }
+		.label {
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+		.input {
+			border: 1px solid #d5cbc0;
+			border-radius: 10px;
+			padding: 0.55rem 0.7rem;
+			font-size: 0.95rem;
+			font-family: inherit;
+			color: inherit;
+			background: #fff;
+		}
+		.input:focus {
+			outline: 2px solid var(--mw-settings-focus, #2563eb);
+			outline-offset: 1px;
+			border-color: transparent;
+		}
+		.helper {
+			color: var(--mw-settings-muted, #6b6259);
+			font-size: 0.8rem;
+		}
+		.error-text {
+			color: #9b2c2c;
+			font-size: 0.8rem;
+		}
+		.action-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 0.75rem;
+			flex-wrap: wrap;
+		}
+		.buttons {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+			flex-wrap: wrap;
+		}
+		.button {
+			border-radius: 999px;
+			border: 1px solid transparent;
+			padding: 0.6rem 1.4rem;
+			font-size: 0.9rem;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+		}
+		.button.primary {
+			background: var(--mw-settings-accent, #b24b1c);
+			color: #fff;
+			box-shadow: 0 10px 18px rgba(178, 75, 28, 0.2);
+		}
+		.button.secondary {
+			background: #fff;
+			color: var(--mw-settings-ink, #1b1a17);
+			border-color: var(--mw-settings-border, #e3dbd1);
+		}
+		.button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+			transform: none;
+			box-shadow: none;
+		}
+		.meta-note {
+			font-size: 0.8rem;
+			color: var(--mw-settings-muted, #6b6259);
+		}
+		@keyframes riseIn {
+			from { opacity: 0; transform: translateY(12px); }
+			to { opacity: 1; transform: translateY(0); }
+		}
+		@keyframes fieldIn {
+			from { opacity: 0; transform: translateY(6px); }
+			to { opacity: 1; transform: translateY(0); }
+		}
+		@media (prefers-reduced-motion: reduce) {
+			.card, .field, .button { animation: none; transition: none; }
+		}
+		@media (max-width: ${N.md}px) {
+			.card { padding: 1.4rem; }
+			.header { flex-direction: column; align-items: flex-start; }
+			.status-row { justify-content: flex-start; }
+			.action-row { flex-direction: column; align-items: stretch; }
+			.buttons { width: 100%; }
+		}
+	`;
+  firstUpdated() {
+    typeof this.getUserFacts == "function" && this._loadFacts();
+  }
+  updated(e) {
+    e.has("getUserFacts") && typeof this.getUserFacts == "function" && this._loadFacts();
+  }
+  async _loadFacts() {
+    if (typeof this.getUserFacts != "function") {
+      this.error = "Missing getUserFacts callback.";
+      return;
+    }
+    this.loading = !0, this.error = "", this.success = "";
+    try {
+      const e = await this.getUserFacts(), s = B(e), t = {
+        preferredName: p(s, c.preferredName),
+        zipCode: p(s, c.zipCode),
+        dateOfBirth: h(
+          p(s, c.dateOfBirth)
+        )
+      };
+      this._values = { ...t }, this._originalValues = { ...t }, this._dirty = {
+        preferredName: !1,
+        zipCode: !1,
+        dateOfBirth: !1
+      }, this._fieldErrors = {
+        preferredName: "",
+        zipCode: "",
+        dateOfBirth: ""
+      };
+    } catch (e) {
+      console.error("[my-wral-settings]", e), this.error = "Unable to load user facts.";
+    } finally {
+      this.loading = !1;
+    }
+  }
+  _handleInput(e, s) {
+    const t = s.target.value;
+    this._values = { ...this._values, [e]: t }, this._dirty = {
+      ...this._dirty,
+      [e]: t !== this._originalValues[e]
+    }, this._fieldErrors = { ...this._fieldErrors, [e]: "" }, this.error = "", this.success = "";
+  }
+  _validate(e) {
+    const s = {
+      preferredName: "",
+      zipCode: "",
+      dateOfBirth: ""
+    };
+    return e.zipCode && !/^\d{5}$/.test(e.zipCode) && (s.zipCode = "Zip code must be 5 digits."), e.dateOfBirth && !/^\d{4}-\d{2}-\d{2}$/.test(e.dateOfBirth) && (s.dateOfBirth = "Use YYYY-MM-DD."), s;
+  }
+  async _handleSubmit(e) {
+    if (e.preventDefault(), this.saving) return;
+    const s = typeof this.updateUserFact == "function" ? this.updateUserFact : this.updateUserFacts;
+    if (typeof s != "function") {
+      this.error = "Missing updateUserFact callback.";
+      return;
+    }
+    const t = {
+      preferredName: (this._values.preferredName || "").trim(),
+      zipCode: (this._values.zipCode || "").trim(),
+      dateOfBirth: h(this._values.dateOfBirth)
+    }, o = this._validate(t);
+    if (Object.values(o).some(Boolean)) {
+      this._fieldErrors = o;
+      return;
+    }
+    const a = [];
+    if (this._dirty.preferredName && a.push({ factName: "preferred_name", value: t.preferredName }), this._dirty.zipCode && a.push({ factName: "zipcode", value: t.zipCode }), this._dirty.dateOfBirth && a.push({ factName: "date_of_birth", value: t.dateOfBirth }), !!a.length) {
+      this.saving = !0, this.error = "", this.success = "", this._values = { ...t };
+      try {
+        for (const i of a)
+          await s(i.factName, i.value);
+        this._originalValues = { ...t }, this._dirty = {
+          preferredName: !1,
+          zipCode: !1,
+          dateOfBirth: !1
+        }, this.success = "Saved changes.";
+      } catch (i) {
+        console.error("[my-wral-settings]", i), this.error = "Unable to save changes.";
+      } finally {
+        this.saving = !1;
+      }
+    }
+  }
+  _handleReset() {
+    this._values = { ...this._originalValues }, this._dirty = {
+      preferredName: !1,
+      zipCode: !1,
+      dateOfBirth: !1
+    }, this._fieldErrors = {
+      preferredName: "",
+      zipCode: "",
+      dateOfBirth: ""
+    }, this.error = "", this.success = "";
+  }
+  render() {
+    const { loading: e, saving: s, error: t, success: o, _values: d, _fieldErrors: a } = this, i = Object.values(this._dirty).some(Boolean), f = typeof this.getUserFacts == "function", u = typeof this.updateUserFact == "function" || typeof this.updateUserFacts == "function", l = /* @__PURE__ */ new Date(), m = `${l.getFullYear()}-${String(l.getMonth() + 1).padStart(2, "0")}-${String(l.getDate()).padStart(2, "0")}`, g = t ? r`<div class="status error" role="status">${t}</div>` : "", b = o ? r`<div class="status success" role="status">${o}</div>` : "", v = f ? "" : r`
+				<div class="status" role="status">
+					Provide a getUserFacts callback to load values.
+				</div>
+			`, y = f && !u ? r`
+				<div class="status" role="status">
+					Provide an updateUserFact callback to save changes.
+				</div>
+			` : "", _ = a.preferredName ? r`
+				<span class="error-text">
+					${a.preferredName}
+				</span>
+			` : "", x = a.zipCode ? r`
+				<span class="error-text">
+					${a.zipCode}
+				</span>
+			` : "", w = a.dateOfBirth ? r`
+				<span class="error-text">
+					${a.dateOfBirth}
+				</span>
+			` : "", z = i ? "You have unsaved changes." : "All changes are saved.";
+    return r`
+			<section class="card" aria-busy=${e ? "true" : "false"}>
+				<div class="header">
+					<div>
+						<p class="eyebrow">My WRAL</p>
+						<h2>Settings</h2>
+						<p class="subtitle">Update the basics tied to your account.</p>
+					</div>
+					<div class="status-row">
+						${e ? r`<span class="pill">Loading</span>` : ""}
+						${s ? r`<span class="pill">Saving</span>` : ""}
+					</div>
+				</div>
+
+			${g}
+			${b}
+			${v}
+			${y}
+
+				<form @submit=${this._handleSubmit} novalidate>
+					<div class="fields">
+						<label class="field">
+							<span class="label">Preferred name</span>
+							<input
+								class="input"
+								type="text"
+								name="preferred-name"
+								autocomplete="name"
+								placeholder="e.g. Dominick"
+								.value=${d.preferredName}
+								@input=${this._handlePreferredNameInput}
+								?disabled=${e || s}
+							/>
+							<span class="helper">What should we call you?</span>
+							${_}
+						</label>
+
+						<label class="field">
+							<span class="label">Zip code</span>
+							<input
+								class="input"
+								type="text"
+								name="zip-code"
+								inputmode="numeric"
+								autocomplete="postal-code"
+								placeholder="5 digit zip"
+								.value=${d.zipCode}
+								@input=${this._handleZipCodeInput}
+								?disabled=${e || s}
+								pattern="\\d{5}"
+							/>
+							<span class="helper">Used for local weather and alerts.</span>
+							${x}
+						</label>
+
+						<label class="field">
+							<span class="label">Date of birth</span>
+							<input
+								class="input"
+								type="date"
+								name="date-of-birth"
+								autocomplete="bday"
+								.value=${d.dateOfBirth}
+								@input=${this._handleDateOfBirthInput}
+								?disabled=${e || s}
+								max=${m}
+							/>
+							<span class="helper">Format: YYYY-MM-DD</span>
+							${w}
+						</label>
+					</div>
+
+					<div class="action-row">
+						<span class="meta-note">
+							${z}
+						</span>
+						<div class="buttons">
+							<button
+								class="button secondary"
+								type="button"
+								@click=${this._handleReset}
+								?disabled=${e || s || !i}
+							>
+								Reset
+							</button>
+							<button
+								class="button primary"
+								type="submit"
+								?disabled=${e || s || !i || !u}
+							>
+								Save changes
+							</button>
+						</div>
+					</div>
+				</form>
+			</section>
+		`;
+  }
+}
+globalThis?.customElements && !globalThis.customElements.get("my-wral-settings") && globalThis.customElements.define("my-wral-settings", C);
+export {
+  C as M
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@wral/my-wral-settings",
+  "version": "0.2.4",
+  "type": "module",
+  "description": "Lit web component for rendering My WRAL settings input fields.",
+  "author": "Dominick Jones <djones@wral.com>",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "build": "vite build && vite build --config vite.standalone.config.mjs"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./define": "./dist/define.mjs",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@wral/sdk-alerts": "^0.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^9.36.0",
+    "vite": "^7.1.7",
+    "lit": "^3.3.1"
+  }
+}