@brad-frost-web/eddie-web-components 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { E as K } from "../EdElement.js";
|
|
2
|
-
import { unsafeCSS as Z, html as
|
|
2
|
+
import { unsafeCSS as Z, html as k } from "lit";
|
|
3
3
|
import { property as p, query as J } from "lit/decorators.js";
|
|
4
4
|
import "../button/button.js";
|
|
5
5
|
import "../grid/grid.js";
|
|
@@ -9,15 +9,15 @@ import "../layout-container/layout-container.js";
|
|
|
9
9
|
import "../heading/heading.js";
|
|
10
10
|
import "../text-passage/text-passage.js";
|
|
11
11
|
import { ifDefined as Q } from "lit/directives/if-defined.js";
|
|
12
|
-
const X = ':root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-black-friday-modal{display:block;height:0;width:0;padding:0 0 4rem;overflow:hidden;position:fixed;max-width:none;max-height:none;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout);border:none;z-index:1000;transition:height var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-black-friday-modal[open]{visibility:visible;width:100%;height:100vh;box-shadow:0 -5px 10px #0006;overflow:auto}.ed-c-black-friday-modal__header{display:flex;justify-content:space-between;position:relative;align-items:baseline;gap:1rem;margin-block-end:4rem;box-shadow:0 10px 0 -5px var(--ed-theme-color-background-accent-1),0 20px 0 -10px var(--ed-theme-color-background-accent-2),0 30px 0 -16px var(--ed-theme-color-background-accent-4)}.ed-c-black-friday-modal__header-media{position:absolute;overflow:hidden;height:100%;width:100%}.ed-c-black-friday-modal__header-media:after{content:"";position:absolute;inset:0;background:#0009;z-index:1}.ed-c-black-friday-modal__header-media-image{position:relative;display:block;width:100%;height:100%;object-fit:cover}.ed-c-black-friday-modal__header-content{position:relative;width:100%}.ed-c-black-friday-modal__header-content-text{position:relative;width:100%;text-align:center;padding:
|
|
12
|
+
const X = ':root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-black-friday-modal{display:block;height:0;width:0;padding:0 0 4rem;overflow:hidden;position:fixed;max-width:none;max-height:none;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout);border:none;z-index:1000;transition:height var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-black-friday-modal[open]{visibility:visible;width:100%;height:100vh;box-shadow:0 -5px 10px #0006;overflow:auto}.ed-c-black-friday-modal__header{display:flex;justify-content:space-between;position:relative;align-items:baseline;gap:1rem;margin-block-end:4rem;box-shadow:0 10px 0 -5px var(--ed-theme-color-background-accent-1),0 20px 0 -10px var(--ed-theme-color-background-accent-2),0 30px 0 -16px var(--ed-theme-color-background-accent-4)}.ed-c-black-friday-modal__header-media{position:absolute;overflow:hidden;height:100%;width:100%}.ed-c-black-friday-modal__header-media:after{content:"";position:absolute;inset:0;background:#0009;z-index:1}.ed-c-black-friday-modal__header-media-image{position:relative;display:block;width:100%;height:100%;object-fit:cover}.ed-c-black-friday-modal__header-content{position:relative;width:100%}.ed-c-black-friday-modal__header-content-text{position:relative;width:100%;text-align:center;padding:7rem 0 2rem;z-index:3}@media all and (min-width:48rem){.ed-c-black-friday-modal__header-content-text{padding:2rem 0}}.ed-c-black-friday-modal__header-content-description{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-black-friday-modal__title{margin-block-end:1rem}.ed-c-black-friday-modal__description{max-width:35rem}.ed-c-black-friday-modal__close-button{position:absolute;inset-block-start:5.5rem;inset-inline-end:.5rem;appearance:none;background:none;outline:none;border:none;padding:.5rem;z-index:4;cursor:pointer;color:var(--ed-theme-color-content-knockout)}.ed-c-black-friday-modal__close-button:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}@media all and (min-width:48rem){.ed-c-black-friday-modal__close-button{inset-block-start:.5rem;inset-inline-end:.5rem}}@media all and (min-width:60rem){.ed-c-black-friday-modal__close-button{padding:1rem}}.ed-c-black-friday-modal__close-icon{fill:currentColor;height:2rem;width:2rem}.ed-c-black-friday-modal__promos{display:block;margin-block-end:4rem}.ed-c-black-friday-modal__image{display:block;width:100%}.ed-c-black-friday-modal__section-title{display:block;margin-block-end:1rem;text-align:center}.ed-c-black-friday-modal__card{display:flex;flex-direction:column;height:100%}.ed-c-black-friday-modal__card-body{flex:1}.ed-c-black-friday-modal__card-footer{padding:.5rem 1rem 1rem;text-align:center}.ed-c-black-friday-modal__card-media{display:block;overflow:hidden;margin-block-end:1rem;border:1px solid var(--ed-theme-color-border-knockout);border-radius:.5rem}.ed-c-black-friday-modal__card-media:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-black-friday-modal__card-image{display:block;width:100%}.ed-c-black-friday-modal__card-title-anchor{display:block;text-decoration:none;color:var(--ed-theme-color-content-knockout)}.ed-c-black-friday-modal__card-title-anchor:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-black-friday-modal__card-title{display:block;margin-block-end:1rem;text-align:center}.ed-c-black-friday-modal__card-description{display:block;margin-block-end:1rem}.ed-c-black-friday-modal__card-description p{text-align:center}.ed-c-black-friday-modal__header-content-title{text-shadow:2px 0 0 var(--ed-theme-color-background-accent-2),4px 0 0 var(--ed-theme-color-background-accent-1);letter-spacing:1.5px}.ed-c-black-friday-modal__card-paragraph{text-align:center}.ed-c-black-friday-modal__card-list-container{display:flex;flex-direction:column;align-items:center}.ed-c-black-friday-modal__card-list{padding:0;margin:0}.strikethrough{font-family:var(--ed-theme-typography-button-default-font-family);font-weight:var(--ed-theme-typography-button-default-font-weight);font-size:var(--ed-theme-typography-button-default-font-size);line-height:var(--ed-theme-typography-button-default-line-height);letter-spacing:var(--ed-theme-typography-button-default-letter-spacing);text-transform:var(--ed-theme-typography-button-default-text-transform);text-decoration:line-through;color:var(--ed-theme-color-content-subtle)}.ed-c-black-friday-modal__cta{margin-block-start:2rem;text-align:center}';
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2017 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
17
|
*/
|
|
18
|
-
const O = globalThis, H = O.trustedTypes, L = H ? H.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, W = "$lit$",
|
|
19
|
-
\f\r]`, w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, U = /-->/g, j = />/g,
|
|
20
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"), R = /'/g, G = /"/g, V = /^(?:script|style|textarea|title)$/i,
|
|
18
|
+
const O = globalThis, H = O.trustedTypes, L = H ? H.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, W = "$lit$", b = `lit$${Math.random().toFixed(9).slice(2)}$`, F = "?" + b, Y = `<${F}>`, $ = document, N = () => $.createComment(""), C = (s) => s === null || typeof s != "object" && typeof s != "function", z = Array.isArray, ee = (s) => z(s) || typeof s?.[Symbol.iterator] == "function", D = `[
|
|
19
|
+
\f\r]`, w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, U = /-->/g, j = />/g, y = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^
|
|
20
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), R = /'/g, G = /"/g, V = /^(?:script|style|textarea|title)$/i, A = Symbol.for("lit-noChange"), l = Symbol.for("lit-nothing"), P = /* @__PURE__ */ new WeakMap(), v = $.createTreeWalker($, 129);
|
|
21
21
|
function q(s, e) {
|
|
22
22
|
if (!z(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
23
23
|
return L !== void 0 ? L.createHTML(e) : e;
|
|
@@ -28,9 +28,9 @@ const te = (s, e) => {
|
|
|
28
28
|
for (let g = 0; g < t; g++) {
|
|
29
29
|
const r = s[g];
|
|
30
30
|
let c, h, n = -1, f = 0;
|
|
31
|
-
for (; f < r.length && (d.lastIndex = f, h = d.exec(r), h !== null); ) f = d.lastIndex, d === w ? h[1] === "!--" ? d = U : h[1] !== void 0 ? d = j : h[2] !== void 0 ? (V.test(h[2]) && (o = RegExp("</" + h[2], "g")), d =
|
|
32
|
-
const _ = d ===
|
|
33
|
-
a += d === w ? r + Y : n >= 0 ? (i.push(c), r.slice(0, n) + W + r.slice(n) +
|
|
31
|
+
for (; f < r.length && (d.lastIndex = f, h = d.exec(r), h !== null); ) f = d.lastIndex, d === w ? h[1] === "!--" ? d = U : h[1] !== void 0 ? d = j : h[2] !== void 0 ? (V.test(h[2]) && (o = RegExp("</" + h[2], "g")), d = y) : h[3] !== void 0 && (d = y) : d === y ? h[0] === ">" ? (d = o ?? w, n = -1) : h[1] === void 0 ? n = -2 : (n = d.lastIndex - h[2].length, c = h[1], d = h[3] === void 0 ? y : h[3] === '"' ? G : R) : d === G || d === R ? d = y : d === U || d === j ? d = w : (d = y, o = void 0);
|
|
32
|
+
const _ = d === y && s[g + 1].startsWith("/>") ? " " : "";
|
|
33
|
+
a += d === w ? r + Y : n >= 0 ? (i.push(c), r.slice(0, n) + W + r.slice(n) + b + _) : r + b + (n === -2 ? g : _);
|
|
34
34
|
}
|
|
35
35
|
return [q(s, a + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
|
|
36
36
|
};
|
|
@@ -47,11 +47,11 @@ class T {
|
|
|
47
47
|
for (; (o = v.nextNode()) !== null && r.length < g; ) {
|
|
48
48
|
if (o.nodeType === 1) {
|
|
49
49
|
if (o.hasAttributes()) for (const n of o.getAttributeNames()) if (n.endsWith(W)) {
|
|
50
|
-
const f = h[d++], _ = o.getAttribute(n).split(
|
|
50
|
+
const f = h[d++], _ = o.getAttribute(n).split(b), S = /([.?@])?(.*)/.exec(f);
|
|
51
51
|
r.push({ type: 1, index: a, name: S[2], strings: _, ctor: S[1] === "." ? oe : S[1] === "?" ? ae : S[1] === "@" ? se : E }), o.removeAttribute(n);
|
|
52
|
-
} else n.startsWith(
|
|
52
|
+
} else n.startsWith(b) && (r.push({ type: 6, index: a }), o.removeAttribute(n));
|
|
53
53
|
if (V.test(o.tagName)) {
|
|
54
|
-
const n = o.textContent.split(
|
|
54
|
+
const n = o.textContent.split(b), f = n.length - 1;
|
|
55
55
|
if (f > 0) {
|
|
56
56
|
o.textContent = H ? H.emptyScript : "";
|
|
57
57
|
for (let _ = 0; _ < f; _++) o.append(n[_], N()), v.nextNode(), r.push({ type: 2, index: ++a });
|
|
@@ -61,7 +61,7 @@ class T {
|
|
|
61
61
|
} else if (o.nodeType === 8) if (o.data === F) r.push({ type: 2, index: a });
|
|
62
62
|
else {
|
|
63
63
|
let n = -1;
|
|
64
|
-
for (; (n = o.data.indexOf(
|
|
64
|
+
for (; (n = o.data.indexOf(b, n + 1)) !== -1; ) r.push({ type: 7, index: a }), n += b.length - 1;
|
|
65
65
|
}
|
|
66
66
|
a++;
|
|
67
67
|
}
|
|
@@ -72,7 +72,7 @@ class T {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
function x(s, e, t = s, i) {
|
|
75
|
-
if (e ===
|
|
75
|
+
if (e === A) return e;
|
|
76
76
|
let o = i !== void 0 ? t._$Co?.[i] : t._$Cl;
|
|
77
77
|
const a = C(e) ? void 0 : e._$litDirective$;
|
|
78
78
|
return o?.constructor !== a && (o?._$AO?.(!1), a === void 0 ? o = void 0 : (o = new a(s), o._$AT(s, t, i)), i !== void 0 ? (t._$Co ??= [])[i] = o : t._$Cl = o), o !== void 0 && (e = x(s, o._$AS(s, e.values), o, i)), e;
|
|
@@ -124,7 +124,7 @@ class M {
|
|
|
124
124
|
return this._$AB;
|
|
125
125
|
}
|
|
126
126
|
_$AI(e, t = this) {
|
|
127
|
-
e = x(this, e, t), C(e) ? e === l || e == null || e === "" ? (this._$AH !== l && this._$AR(), this._$AH = l) : e !== this._$AH && e !==
|
|
127
|
+
e = x(this, e, t), C(e) ? e === l || e == null || e === "" ? (this._$AH !== l && this._$AR(), this._$AH = l) : e !== this._$AH && e !== A && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ee(e) ? this.k(e) : this._(e);
|
|
128
128
|
}
|
|
129
129
|
O(e) {
|
|
130
130
|
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
@@ -177,11 +177,11 @@ class E {
|
|
|
177
177
|
_$AI(e, t = this, i, o) {
|
|
178
178
|
const a = this.strings;
|
|
179
179
|
let d = !1;
|
|
180
|
-
if (a === void 0) e = x(this, e, t, 0), d = !C(e) || e !== this._$AH && e !==
|
|
180
|
+
if (a === void 0) e = x(this, e, t, 0), d = !C(e) || e !== this._$AH && e !== A, d && (this._$AH = e);
|
|
181
181
|
else {
|
|
182
182
|
const g = e;
|
|
183
183
|
let r, c;
|
|
184
|
-
for (e = a[0], r = 0; r < a.length - 1; r++) c = x(this, g[i + r], t, r), c ===
|
|
184
|
+
for (e = a[0], r = 0; r < a.length - 1; r++) c = x(this, g[i + r], t, r), c === A && (c = this._$AH[r]), d ||= !C(c) || c !== this._$AH[r], c === l ? e = l : e !== l && (e += (c ?? "") + a[r + 1]), this._$AH[r] = c;
|
|
185
185
|
}
|
|
186
186
|
d && !o && this.j(e);
|
|
187
187
|
}
|
|
@@ -210,7 +210,7 @@ class se extends E {
|
|
|
210
210
|
super(e, t, i, o, a), this.type = 5;
|
|
211
211
|
}
|
|
212
212
|
_$AI(e, t = this) {
|
|
213
|
-
if ((e = x(this, e, t, 0) ?? l) ===
|
|
213
|
+
if ((e = x(this, e, t, 0) ?? l) === A) return;
|
|
214
214
|
const i = this._$AH, o = e === l && i !== l || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, a = e !== l && (i === l || o);
|
|
215
215
|
o && this.element.removeEventListener(this.name, this, i), a && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
216
216
|
}
|
|
@@ -264,7 +264,7 @@ class I extends ce {
|
|
|
264
264
|
}
|
|
265
265
|
render(e) {
|
|
266
266
|
if (e === l || e == null) return this._t = void 0, this.it = e;
|
|
267
|
-
if (e ===
|
|
267
|
+
if (e === A) return e;
|
|
268
268
|
if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
|
|
269
269
|
if (e === this.it) return this._t;
|
|
270
270
|
this.it = e;
|
|
@@ -426,7 +426,7 @@ class m extends K {
|
|
|
426
426
|
"ed-c-black-friday-modal--backdrop": this.hasBackdrop,
|
|
427
427
|
"ed-c-black-friday-modal--inactive": !this.isActive
|
|
428
428
|
});
|
|
429
|
-
return
|
|
429
|
+
return k`
|
|
430
430
|
<dialog
|
|
431
431
|
aria-labelledby="black-friday-modal-heading"
|
|
432
432
|
class="${e}"
|
|
@@ -456,20 +456,20 @@ class m extends K {
|
|
|
456
456
|
<ed-layout-container>
|
|
457
457
|
<ed-grid gap="lg" class="ed-c-black-friday-modal__promos">
|
|
458
458
|
${this.promos.map(
|
|
459
|
-
(t) =>
|
|
459
|
+
(t) => k`
|
|
460
460
|
<ed-grid-item>
|
|
461
461
|
<div class="ed-c-black-friday-modal__card">
|
|
462
462
|
<div class="ed-c-black-friday-modal__card-body">
|
|
463
|
-
${t.href ?
|
|
463
|
+
${t.href ? k`
|
|
464
464
|
<a class="ed-c-black-friday-modal__card-media" href="${t.href}">
|
|
465
465
|
<img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" />
|
|
466
466
|
</a>
|
|
467
|
-
` :
|
|
467
|
+
` : k` <img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" /> `}
|
|
468
468
|
<ed-heading tagName="h4" variant="title-lg" class="ed-c-black-friday-modal__card-title">${t.heading}</ed-heading>
|
|
469
469
|
|
|
470
470
|
<ed-text-passage class="ed-c-black-friday-modal__card-description"> ${B(t.description)} </ed-text-passage>
|
|
471
471
|
</div>
|
|
472
|
-
${t.href && t.buttonText ?
|
|
472
|
+
${t.href && t.buttonText ? k`
|
|
473
473
|
<footer class="ed-c-black-friday-modal__card-footer">
|
|
474
474
|
<ed-button href="${t.href}" size="lg">${B(t.buttonText)}</ed-button>
|
|
475
475
|
</footer>
|
|
@@ -482,7 +482,7 @@ class m extends K {
|
|
|
482
482
|
<ed-heading tagName="h3" variant="headline-default" class="ed-c-black-friday-modal__section-title">${this.secondaryHeading}</ed-heading>
|
|
483
483
|
<ed-grid variant="${this.courses.length >= 3 ? "1-3up" : this.courses.length === 2 ? "2up" : ""}">
|
|
484
484
|
${this.courses.map(
|
|
485
|
-
(t) =>
|
|
485
|
+
(t) => k`
|
|
486
486
|
<ed-grid-item>
|
|
487
487
|
<div class="ed-c-black-friday-modal__card">
|
|
488
488
|
<div class="ed-c-black-friday-modal__card-body">
|