@cal.macconnachie/web-components 2.5.2 → 2.5.4

package/dist/index.d.ts

@@ -319,6 +319,7 @@ export declare class BaseListItem extends BaseElement {
     private handleTouchStart;
     private handleTouchMove;
     private handleTouchEnd;
+    private renderActionIcon;
     private triggerSwipeAction;
     private handleDesktopActionToggle;
     private handleDocumentClick;
@@ -625,6 +626,7 @@ export declare interface SwipeAction {
     icon: string;
     callback: () => void;
     color?: string;
+    iconColor?: string;
     label?: string;
 }
 

package/dist/index.js

@@ -35,7 +35,7 @@ const ls = (r) => new Dr(typeof r == "string" ? r : r + "", void 0, Mt), B = (r,
   for (const i of e.cssRules) t += i.cssText;
   return ls(t);
 })(r) : r;
-const { is: ds, defineProperty: hs, getOwnPropertyDescriptor: ps, getOwnPropertyNames: us, getOwnPropertySymbols: gs, getPrototypeOf: fs } = Object, ut = globalThis, rr = ut.trustedTypes, ms = rr ? rr.emptyScript : "", bs = ut.reactiveElementPolyfillSupport, Ue = (r, e) => r, dt = { toAttribute(r, e) {
+const { is: ds, defineProperty: hs, getOwnPropertyDescriptor: ps, getOwnPropertyNames: us, getOwnPropertySymbols: fs, getPrototypeOf: gs } = Object, ut = globalThis, rr = ut.trustedTypes, ms = rr ? rr.emptyScript : "", bs = ut.reactiveElementPolyfillSupport, Ue = (r, e) => r, dt = { toAttribute(r, e) {
   switch (e) {
     case Boolean:
       r = r ? ms : null;
@@ -94,13 +94,13 @@ let Se = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(Ue("elementProperties"))) return;
-    const e = fs(this);
+    const e = gs(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(Ue("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(Ue("properties"))) {
-      const t = this.properties, i = [...us(t), ...gs(t)];
+      const t = this.properties, i = [...us(t), ...fs(t)];
       for (const s of i) this.createProperty(s, t[s]);
     }
     const e = this[Symbol.metadata];
@@ -248,7 +248,7 @@ let Se = class extends HTMLElement {
 };
 Se.elementStyles = [], Se.shadowRootOptions = { mode: "open" }, Se[Ue("elementProperties")] = /* @__PURE__ */ new Map(), Se[Ue("finalized")] = /* @__PURE__ */ new Map(), bs?.({ ReactiveElement: Se }), (ut.reactiveElementVersions ??= []).push("2.1.1");
 const Lt = globalThis, ht = Lt.trustedTypes, ir = ht ? ht.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, Or = "$lit$", he = `lit$${Math.random().toFixed(9).slice(2)}$`, Pr = "?" + he, vs = `<${Pr}>`, we = document, Fe = () => we.createComment(""), He = (r) => r === null || typeof r != "object" && typeof r != "function", Bt = Array.isArray, ys = (r) => Bt(r) || typeof r?.[Symbol.iterator] == "function", St = `[ 	
-\f\r]`, Le = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, or = /-->/g, ar = />/g, fe = RegExp(`>|${St}(?:([^\\s"'>=/]+)(${St}*=${St}*(?:[^ 	
+\f\r]`, Le = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, or = /-->/g, ar = />/g, ge = RegExp(`>|${St}(?:([^\\s"'>=/]+)(${St}*=${St}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), nr = /'/g, lr = /"/g, Rr = /^(?:script|style|textarea|title)$/i, ws = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), f = ws(1), ne = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), cr = /* @__PURE__ */ new WeakMap(), be = we.createTreeWalker(we, 129);
 function zr(r, e) {
   if (!Bt(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -260,8 +260,8 @@ const xs = (r, e) => {
   for (let n = 0; n < t; n++) {
     const l = r[n];
     let h, c, p = -1, b = 0;
-    for (; b < l.length && (a.lastIndex = b, c = a.exec(l), c !== null); ) b = a.lastIndex, a === Le ? c[1] === "!--" ? a = or : c[1] !== void 0 ? a = ar : c[2] !== void 0 ? (Rr.test(c[2]) && (s = RegExp("</" + c[2], "g")), a = fe) : c[3] !== void 0 && (a = fe) : a === fe ? c[0] === ">" ? (a = s ?? Le, p = -1) : c[1] === void 0 ? p = -2 : (p = a.lastIndex - c[2].length, h = c[1], a = c[3] === void 0 ? fe : c[3] === '"' ? lr : nr) : a === lr || a === nr ? a = fe : a === or || a === ar ? a = Le : (a = fe, s = void 0);
-    const y = a === fe && r[n + 1].startsWith("/>") ? " " : "";
+    for (; b < l.length && (a.lastIndex = b, c = a.exec(l), c !== null); ) b = a.lastIndex, a === Le ? c[1] === "!--" ? a = or : c[1] !== void 0 ? a = ar : c[2] !== void 0 ? (Rr.test(c[2]) && (s = RegExp("</" + c[2], "g")), a = ge) : c[3] !== void 0 && (a = ge) : a === ge ? c[0] === ">" ? (a = s ?? Le, p = -1) : c[1] === void 0 ? p = -2 : (p = a.lastIndex - c[2].length, h = c[1], a = c[3] === void 0 ? ge : c[3] === '"' ? lr : nr) : a === lr || a === nr ? a = ge : a === or || a === ar ? a = Le : (a = ge, s = void 0);
+    const y = a === ge && r[n + 1].startsWith("/>") ? " " : "";
     o += a === Le ? l + vs : p >= 0 ? (i.push(h), l.slice(0, p) + Or + l.slice(p) + he + y) : l + he + (p === -2 ? n : y);
   }
   return [zr(r, o + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
@@ -280,7 +280,7 @@ class je {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const p of s.getAttributeNames()) if (p.endsWith(Or)) {
           const b = c[a++], y = s.getAttribute(p).split(he), g = /([.?@])?(.*)/.exec(b);
-          l.push({ type: 1, index: o, name: g[2], strings: y, ctor: g[1] === "." ? ks : g[1] === "?" ? Ss : g[1] === "@" ? _s : gt }), s.removeAttribute(p);
+          l.push({ type: 1, index: o, name: g[2], strings: y, ctor: g[1] === "." ? ks : g[1] === "?" ? Ss : g[1] === "@" ? _s : ft }), s.removeAttribute(p);
         } else p.startsWith(he) && (l.push({ type: 6, index: o }), s.removeAttribute(p));
         if (Rr.test(s.tagName)) {
           const p = s.textContent.split(he), b = p.length - 1;
@@ -396,7 +396,7 @@ class Ce {
     this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
   }
 }
-class gt {
+class ft {
   get tagName() {
     return this.element.tagName;
   }
@@ -421,7 +421,7 @@ class gt {
     e === k ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class ks extends gt {
+class ks extends ft {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -429,7 +429,7 @@ class ks extends gt {
     this.element[this.name] = e === k ? void 0 : e;
   }
 }
-class Ss extends gt {
+class Ss extends ft {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -437,7 +437,7 @@ class Ss extends gt {
     this.element.toggleAttribute(this.name, !!e && e !== k);
   }
 }
-class _s extends gt {
+class _s extends ft {
   constructor(e, t, i, s, o) {
     super(e, t, i, s, o), this.type = 5;
   }
@@ -5211,7 +5211,7 @@ const ii = `<?xml version="1.0" encoding="UTF-8"?>
   <path class="cls-1" d="M28.72,29.53l-.06-10.01c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-2,.91-1.99,2.01l.06,9.81c-4.04.77-7.11,4.33-7.11,8.59s3.12,7.88,7.21,8.61l.15,23.93c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.15-24.12c3.64-1.07,6.28-4.44,6.28-8.39s-2.68-7.38-6.38-8.41ZM26.68,42.68c-.11,0-.22.02-.33.02-2.61,0-4.74-2.13-4.74-4.75s2.13-4.75,4.74-4.75h.04c.08,0,.15.01.23.02,2.51.13,4.48,2.21,4.48,4.73s-1.94,4.57-4.42,4.73Z"/>
   <path class="cls-1" d="M47.24,49.24l-.18-29.72c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-2,.91-1.99,2.01l.18,29.84c-3.74,1.01-6.45,4.4-6.45,8.44s2.76,7.5,6.55,8.46l.03,4.19c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.03-4.07c3.96-.83,6.95-4.35,6.95-8.56s-3.04-7.79-7.05-8.58ZM45.53,62.57s-.09,0-.13,0c-2.58-.08-4.6-2.16-4.6-4.74s2-4.63,4.54-4.74c.04,0,.16,0,.21,0,2.62,0,4.75,2.13,4.75,4.75s-2.12,4.74-4.76,4.75Z"/>
   <path class="cls-1" d="M72.4,35.93c0-4.18-2.95-7.68-6.87-8.54l-.05-7.87c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-1.99.91-1.99,2.01l.05,7.91c-3.8.95-6.63,4.41-6.63,8.48s2.87,7.57,6.73,8.5l.15,26.04c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.15-26c3.87-.9,6.77-4.37,6.77-8.52ZM63.63,40.68c-2.61-.01-4.73-2.14-4.73-4.75s2.09-4.71,4.67-4.74c.05,0,.11,0,.16,0,2.58.04,4.67,2.16,4.67,4.75s-2.13,4.75-4.77,4.75Z"/>
-</svg>`, gi = `<?xml version="1.0" encoding="UTF-8"?>
+</svg>`, fi = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
   <defs>
     <style>
@@ -5221,7 +5221,7 @@ const ii = `<?xml version="1.0" encoding="UTF-8"?>
     </style>
   </defs>
   <path class="cls-1" d="M66.9,75.38h-10.67c-2.06,0-3.74-1.68-3.74-3.74v-13.62c0-1.6-1.3-2.91-2.91-2.91h-8.19c-1.6,0-2.91,1.31-2.91,2.91v13.62c0,2.06-1.68,3.74-3.74,3.74h-10.67c-1.92,0-3.48-1.56-3.48-3.48v-28.1h-5.25c-1.01,0-1.92-.6-2.3-1.54s-.17-2,.54-2.72l29.45-29.45c.66-.66,1.53-1.02,2.46-1.02h.02c.93,0,1.8.37,2.45,1.03l29.43,29.43c.72.72.93,1.78.54,2.72s-1.29,1.54-2.3,1.54h-5.25v28.1c0,1.92-1.56,3.48-3.48,3.48ZM56.49,71.38h9.89v-29.58c0-1.1.9-2,2-2h3.61l-26.51-26.51-26.51,26.51h3.61c1.1,0,2,.9,2,2v29.58h9.89v-13.36c0-3.81,3.1-6.91,6.91-6.91h8.19c3.81,0,6.91,3.1,6.91,6.91v13.36ZM74.57,42.37h0,0ZM45.12,12.93h0s0,0,0,0Z"/>
-</svg>`, fi = `<?xml version="1.0" encoding="UTF-8"?>
+</svg>`, gi = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
   <defs>
     <style>
@@ -5355,7 +5355,7 @@ class Tt extends Ft {
 }
 Tt.directiveName = "unsafeHTML", Tt.resultType = 1;
 const Ir = qt(Tt);
-var Ai = Object.defineProperty, ft = (r, e, t, i) => {
+var Ai = Object.defineProperty, gt = (r, e, t, i) => {
   for (var s = void 0, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (s = a(e, t, s) || s);
   return s && Ai(e, t, s), s;
@@ -5371,8 +5371,8 @@ const Ci = /* @__PURE__ */ Object.assign({
   "../../public/icons/external-link.svg": hi,
   "../../public/icons/file-cabinet.svg": pi,
   "../../public/icons/filters.svg": ui,
-  "../../public/icons/house.svg": gi,
-  "../../public/icons/moon.svg": fi,
+  "../../public/icons/house.svg": fi,
+  "../../public/icons/moon.svg": gi,
   "../../public/icons/open-email.svg": mi,
   "../../public/icons/paperclip.svg": bi,
   "../../public/icons/reply.svg": vi,
@@ -5447,16 +5447,16 @@ class Te extends M {
     `;
   }
 }
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "name");
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "size");
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "color");
-ft([
+gt([
   w()
 ], Te.prototype, "svgContent");
 var Ti = Object.defineProperty, te = (r, e, t, i) => {
@@ -5869,6 +5869,7 @@ class G extends M {
       display: flex;
       align-items: stretch;
       z-index: 0;
+      width: 100px;
     }
 
     .swipe-actions--left {
@@ -5889,13 +5890,12 @@ class G extends M {
       gap: var(--space-1);
       padding: 0 var(--space-6);
       border: none;
-      color: white;
       cursor: pointer;
       transition: all var(--transition-fast);
       font-family: var(--font-family-sans);
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-medium);
-      min-width: 80px;
+      width: 100%;
     }
 
     .swipe-action-button:active {
@@ -5907,13 +5907,11 @@ class G extends M {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      color: var(--color-text-muted);
       width: 18px;
       height: 18px;
       border: none;
       border-radius: 50%;
       background: none;
-      background-color: none;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -5925,6 +5923,7 @@ class G extends M {
       font-size: 18px;
       line-height: 1;
       padding: 0;
+      color: var(--color-text-muted);
     }
 
     .desktop-plus-icon--left {
@@ -6096,6 +6095,16 @@ class G extends M {
       this.swipeOffset = 0;
     });
   }
+  renderActionIcon(e, t = "24px") {
+    return e.icon.includes("<") ? f`<span
+        style="display: inline-flex; width: ${t}; height: ${t}; color: inherit;"
+        .innerHTML=${e.icon}
+      ></span>` : f`<base-icon
+      name=${e.icon}
+      size=${t}
+      color="currentColor"
+    ></base-icon>`;
+  }
   triggerSwipeAction(e) {
     e.callback(), this.dispatchEvent(
       new CustomEvent("swipe-action", {
@@ -6133,14 +6142,10 @@ class G extends M {
               <div class="swipe-actions swipe-actions--left">
                 <button
                   class="swipe-action-button"
-                  style="background-color: ${this.leftSwipeAction.color || "var(--color-success)"}"
+                  style="background-color: ${this.leftSwipeAction.color || "var(--color-success)"}; color: ${this.leftSwipeAction.iconColor || "white"}"
                   @click=${() => this.triggerSwipeAction(this.leftSwipeAction)}
                 >
-                  <base-icon
-                    name=${this.leftSwipeAction.icon}
-                    size="24px"
-                    color="white"
-                  ></base-icon>
+                  ${this.renderActionIcon(this.leftSwipeAction, "24px")}
                   ${this.leftSwipeAction.label ? f`<span>${this.leftSwipeAction.label}</span>` : ""}
                 </button>
               </div>
@@ -6150,14 +6155,10 @@ class G extends M {
               <div class="swipe-actions swipe-actions--right">
                 <button
                   class="swipe-action-button"
-                  style="background-color: ${this.rightSwipeAction.color || "var(--color-error)"}"
+                  style="background-color: ${this.rightSwipeAction.color || "var(--color-error)"}; color: ${this.rightSwipeAction.iconColor || "white"}"
                   @click=${() => this.triggerSwipeAction(this.rightSwipeAction)}
                 >
-                  <base-icon
-                    name=${this.rightSwipeAction.icon}
-                    size="24px"
-                    color="white"
-                  ></base-icon>
+                  ${this.renderActionIcon(this.rightSwipeAction, "24px")}
                   ${this.rightSwipeAction.label ? f`<span>${this.rightSwipeAction.label}</span>` : ""}
                 </button>
               </div>
@@ -9283,11 +9284,11 @@ function Dt() {
 }
 const po = (r, e, t, { allOwnKeys: i } = {}) => (Ge(e, (s, o) => {
   t && W(s) ? r[o] = Br(s, t) : r[o] = s;
-}, { allOwnKeys: i }), r), uo = (r) => (r.charCodeAt(0) === 65279 && (r = r.slice(1)), r), go = (r, e, t, i) => {
+}, { allOwnKeys: i }), r), uo = (r) => (r.charCodeAt(0) === 65279 && (r = r.slice(1)), r), fo = (r, e, t, i) => {
   r.prototype = Object.create(e.prototype, i), r.prototype.constructor = r, Object.defineProperty(r, "super", {
     value: e.prototype
   }), t && Object.assign(r.prototype, t);
-}, fo = (r, e, t, i) => {
+}, go = (r, e, t, i) => {
   let s, o, a;
   const n = {};
   if (e = e || {}, r == null) return e;
@@ -9418,8 +9419,8 @@ const To = (r) => {
   extend: po,
   trim: ho,
   stripBOM: uo,
-  inherits: go,
-  toFlatObject: fo,
+  inherits: fo,
+  toFlatObject: go,
   kindOf: vt,
   kindOfTest: se,
   endsWith: mo,
@@ -9506,7 +9507,7 @@ function Ot(r) {
 function Wr(r) {
   return d.endsWith(r, "[]") ? r.slice(0, -2) : r;
 }
-function gr(r, e, t) {
+function fr(r, e, t) {
   return r ? r.concat(e).map(function(s, o) {
     return s = Wr(s), !t && o ? "[" + s + "]" : s;
   }).join(t ? "." : "") : e;
@@ -9549,12 +9550,12 @@ function wt(r, e, t) {
         return v = Wr(v), x.forEach(function(A, T) {
           !(d.isUndefined(A) || A === null) && e.append(
             // eslint-disable-next-line no-nested-ternary
-            a === !0 ? gr([v], T, o) : a === null ? v : v + "[]",
+            a === !0 ? fr([v], T, o) : a === null ? v : v + "[]",
             h(A)
           );
         }), !1;
     }
-    return Ot(g) ? !0 : (e.append(gr(m, v, o), h(g)), !1);
+    return Ot(g) ? !0 : (e.append(fr(m, v, o), h(g)), !1);
   }
   const p = [], b = Object.assign(Io, {
     defaultVisitor: c,
@@ -9580,7 +9581,7 @@ function wt(r, e, t) {
     throw new TypeError("data must be an object");
   return y(r), e;
 }
-function fr(r) {
+function gr(r) {
   const e = {
     "!": "%21",
     "'": "%27",
@@ -9603,8 +9604,8 @@ Kr.append = function(e, t) {
 };
 Kr.toString = function(e) {
   const t = e ? function(i) {
-    return e.call(this, i, fr);
-  } : fr;
+    return e.call(this, i, gr);
+  } : gr;
   return this._pairs.map(function(s) {
     return t(s[0]) + "=" + t(s[1]);
   }, "").join("&");
@@ -10323,9 +10324,9 @@ const rs = (r) => {
   for (; i < t; )
     s = i + e, yield r.slice(i, s), i = s;
 }, ua = async function* (r, e) {
-  for await (const t of ga(r))
+  for await (const t of fa(r))
     yield* pa(t, e);
-}, ga = async function* (r) {
+}, fa = async function* (r) {
   if (r[Symbol.asyncIterator]) {
     yield* r;
     return;
@@ -10370,7 +10371,7 @@ const rs = (r) => {
   }, {
     highWaterMark: 2
   });
-}, $r = 64 * 1024, { isFunction: ot } = d, fa = (({ Request: r, Response: e }) => ({
+}, $r = 64 * 1024, { isFunction: ot } = d, ga = (({ Request: r, Response: e }) => ({
   Request: r,
   Response: e
 }))(d.global), {
@@ -10385,7 +10386,7 @@ const rs = (r) => {
 }, ma = (r) => {
   r = d.merge.call({
     skipUndefined: !0
-  }, fa, r);
+  }, ga, r);
   const { fetch: e, Request: t, Response: i } = r, s = e ? ot(e) : typeof fetch == "function", o = ot(t), a = ot(i);
   if (!s)
     return !1;
@@ -10445,7 +10446,7 @@ const rs = (r) => {
     } = rs(g), Kt = e || fetch;
     X = X ? (X + "").toLowerCase() : "text";
     let rt = ha([_, A && A.toAbortSignal()], T), Ie = null;
-    const ge = rt && rt.unsubscribe && (() => {
+    const fe = rt && rt.unsubscribe && (() => {
       rt.unsubscribe();
     });
     let Jt;
@@ -10477,7 +10478,7 @@ const rs = (r) => {
       Ie = o && new t(v, Xt);
       let ce = await (o ? Kt(Ie, Wt) : Kt(v, Xt));
       const Qt = c && (X === "stream" || X === "response");
-      if (c && (N || Qt && ge)) {
+      if (c && (N || Qt && fe)) {
         const de = {};
         ["status", "statusText", "headers"].forEach((Gt) => {
           de[Gt] = ce[Gt];
@@ -10488,14 +10489,14 @@ const rs = (r) => {
         ) || [];
         ce = new i(
           xr(ce.body, $r, kt, () => {
-            st && st(), ge && ge();
+            st && st(), fe && fe();
           }),
           de
         );
       }
       X = X || "text";
       let ns = await p[d.findKey(p, X) || "text"](ce, g);
-      return !Qt && ge && ge(), await new Promise((de, ke) => {
+      return !Qt && fe && fe(), await new Promise((de, ke) => {
         es(de, ke, {
           data: ns,
           headers: K.from(ce.headers),
@@ -10506,7 +10507,7 @@ const rs = (r) => {
         });
       });
     } catch (ie) {
-      throw ge && ge(), ie && ie.name === "TypeError" && /Load failed|fetch/i.test(ie.message) ? Object.assign(
+      throw fe && fe(), ie && ie.name === "TypeError" && /Load failed|fetch/i.test(ie.message) ? Object.assign(
         new $("Network Error", $.ERR_NETWORK, g, Ie),
         {
           cause: ie.cause || ie

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "web-components",