@brad-frost-web/eddie-web-components 0.9.0 → 0.10.0

package/components/black-friday-modal/black-friday-modal.d.ts

@@ -0,0 +1,133 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+interface BlackFridayPromo {
+    imgSrc: string;
+    imgAlt: string;
+    heading: string;
+    description: string;
+    href?: string;
+    buttonText?: string;
+}
+interface BlackFridayCourse {
+    imgSrc: string;
+    imgAlt: string;
+    href: string;
+    heading: string;
+}
+/**
+ * @slot - The modal content
+ * @slot header - The header content
+ * @slot footer - The footer ocntent
+ */
+export declare class EdBlackFridaymodal extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**top** - aligns the modal to the top of the viewport</li>
+     * <li>**right** - aligns the modal to the right of the viewport</li>
+     * <li>**bottom** - aligns the modal to the bottom of the viewport</li>
+     * <li>**left** - aligns the modal to the left of the viewport</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Close button text
+     */
+    closeButtonText?: string;
+    /**
+     * Fade/ghost back the page background content
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Active state on the modal
+     */
+    isActive?: boolean;
+    /**
+     * Hero image source
+     */
+    imgSrc?: string;
+    /**
+     * Hero image alt text
+     */
+    imgAlt?: string;
+    /**
+     * Hero heading text
+     */
+    heading?: string;
+    /**
+     * Hero description text (supports HTML)
+     */
+    description?: string;
+    /**
+     * Courses heading text
+     */
+    secondaryHeading?: string;
+    /**
+     * Array of promo items to display in the grid
+     */
+    promos: BlackFridayPromo[];
+    /**
+     * Array of course items to display in the grid
+     */
+    courses: BlackFridayCourse[];
+    /**
+     * Reference to the close button element
+     */
+    closeButton?: HTMLButtonElement;
+    /**
+     * Initialize functions
+     */
+    constructor();
+    /**
+     * Connected Callback lifecycle
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove window resize event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * Updated lifecycle method
+     * Focus the close button when the modal becomes active
+     */
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Handle click outside the component
+     * 1) Close the modal on click outside
+     * 2) If the nav is already closed then we don't care about outside clicks and we
+     * can bail early
+     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+     * undefined. To work around that we'll check that we have a shadowRoot (and a
+     * rendered .host) element here to appease the TypeScript compiler. This should never
+     * actually be shown or run for a human end user.
+     * 4) Check to see if we clicked inside the active navigation item
+     * 5) If the navigation is active and we've clicked outside of the nav then it should
+     * be closed.
+     */
+    handleOnClickOutside(event: MouseEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    /**
+     * Open modal function
+     * Opens the modal and dispatches an event
+     */
+    openModal(): void;
+    /**
+     * Close modal function
+     * 1) Closes the modal
+     * 2) Returns focus to the top of the page when closing
+     * 3) Dispatches close event
+     */
+    closeModal(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-black-friday-modal': EdBlackFridaymodal;
+    }
+}
+export {};
+//# sourceMappingURL=black-friday-modal.d.ts.map

package/components/black-friday-modal/black-friday-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"black-friday-modal.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/black-friday-modal/black-friday-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,wBAAwB,CAAC;AAKhC,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAW;IAEtD;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAA8B;IAEtD;;OAEG;IAEH,WAAW,CAAC,EAAE,OAAO,CAAS;IAE9B;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAoC;IAEnD;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAA8B;IAE7C;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAA8B;IAE9C;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAA2D;IAE/E;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAa;IAEtC;;OAEG;IAEH,MAAM,EAAE,gBAAgB,EAAE,CAkCxB;IAEF;;OAEG;IAEH,OAAO,EAAE,iBAAiB,EAAE,CAmB1B;IAEF;;OAEG;IAEH,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC;;OAEG;;IAMH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;OAGG;IACH,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAW3C;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,KAAK,EAAE,UAAU;IAoBtC,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B;;;OAGG;IACH,SAAS;IAYT;;;;;OAKG;IACH,UAAU;IAoBV,MAAM;CAqFP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}

package/components/black-friday-modal/black-friday-modal.js

@@ -0,0 +1,538 @@
+import { E as K } from "../EdElement.js";
+import { unsafeCSS as Z, html as v } from "lit";
+import { property as p, query as J } from "lit/decorators.js";
+import "../button/button.js";
+import "../grid/grid.js";
+import "../grid-item/grid-item.js";
+import { ifDefined as Q } from "lit/directives/if-defined.js";
+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;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;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{min-height:10rem;max-height:20rem;overflow:hidden}.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%}@media all and (min-width:48rem){.ed-c-black-friday-modal__header-media-image{inset-block-end:10rem}}.ed-c-black-friday-modal__header-content{position:relative;width:100%}.ed-c-black-friday-modal__header-content-text{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:100%;text-align:center;z-index:3}.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:.5rem;inset-inline-end:.5rem;appearance:none;background:none;outline:none;border:none;padding:.5rem;z-index:2;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: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{display:block;margin-block-end:1rem;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}';
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const I = globalThis, H = I.trustedTypes, z = H ? H.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, W = "$lit$", b = `lit$${Math.random().toFixed(9).slice(2)}$`, F = "?" + b, Y = `<${F}>`, A = document, N = () => A.createComment(""), C = (o) => o === null || typeof o != "object" && typeof o != "function", O = Array.isArray, ee = (o) => O(o) || typeof o?.[Symbol.iterator] == "function", D = `[ 	
+\f\r]`, w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, L = /-->/g, U = />/g, y = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), j = /'/g, R = /"/g, V = /^(?:script|style|textarea|title)$/i, k = Symbol.for("lit-noChange"), l = Symbol.for("lit-nothing"), G = /* @__PURE__ */ new WeakMap(), $ = A.createTreeWalker(A, 129);
+function q(o, e) {
+  if (!O(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return z !== void 0 ? z.createHTML(e) : e;
+}
+const te = (o, e) => {
+  const t = o.length - 1, i = [];
+  let s, a = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", d = w;
+  for (let g = 0; g < t; g++) {
+    const r = o[g];
+    let c, h, n = -1, _ = 0;
+    for (; _ < r.length && (d.lastIndex = _, h = d.exec(r), h !== null); ) _ = d.lastIndex, d === w ? h[1] === "!--" ? d = L : h[1] !== void 0 ? d = U : h[2] !== void 0 ? (V.test(h[2]) && (s = RegExp("</" + h[2], "g")), d = y) : h[3] !== void 0 && (d = y) : d === y ? h[0] === ">" ? (d = s ?? 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] === '"' ? R : j) : d === R || d === j ? d = y : d === L || d === U ? d = w : (d = y, s = void 0);
+    const f = d === y && o[g + 1].startsWith("/>") ? " " : "";
+    a += d === w ? r + Y : n >= 0 ? (i.push(c), r.slice(0, n) + W + r.slice(n) + b + f) : r + b + (n === -2 ? g : f);
+  }
+  return [q(o, a + (o[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+};
+class T {
+  constructor({ strings: e, _$litType$: t }, i) {
+    let s;
+    this.parts = [];
+    let a = 0, d = 0;
+    const g = e.length - 1, r = this.parts, [c, h] = te(e, t);
+    if (this.el = T.createElement(c, i), $.currentNode = this.el.content, t === 2 || t === 3) {
+      const n = this.el.content.firstChild;
+      n.replaceWith(...n.childNodes);
+    }
+    for (; (s = $.nextNode()) !== null && r.length < g; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes()) for (const n of s.getAttributeNames()) if (n.endsWith(W)) {
+          const _ = h[d++], f = s.getAttribute(n).split(b), S = /([.?@])?(.*)/.exec(_);
+          r.push({ type: 1, index: a, name: S[2], strings: f, ctor: S[1] === "." ? se : S[1] === "?" ? ae : S[1] === "@" ? oe : M }), s.removeAttribute(n);
+        } else n.startsWith(b) && (r.push({ type: 6, index: a }), s.removeAttribute(n));
+        if (V.test(s.tagName)) {
+          const n = s.textContent.split(b), _ = n.length - 1;
+          if (_ > 0) {
+            s.textContent = H ? H.emptyScript : "";
+            for (let f = 0; f < _; f++) s.append(n[f], N()), $.nextNode(), r.push({ type: 2, index: ++a });
+            s.append(n[_], N());
+          }
+        }
+      } else if (s.nodeType === 8) if (s.data === F) r.push({ type: 2, index: a });
+      else {
+        let n = -1;
+        for (; (n = s.data.indexOf(b, n + 1)) !== -1; ) r.push({ type: 7, index: a }), n += b.length - 1;
+      }
+      a++;
+    }
+  }
+  static createElement(e, t) {
+    const i = A.createElement("template");
+    return i.innerHTML = e, i;
+  }
+}
+function x(o, e, t = o, i) {
+  if (e === k) return e;
+  let s = i !== void 0 ? t._$Co?.[i] : t._$Cl;
+  const a = C(e) ? void 0 : e._$litDirective$;
+  return s?.constructor !== a && (s?._$AO?.(!1), a === void 0 ? s = void 0 : (s = new a(o), s._$AT(o, t, i)), i !== void 0 ? (t._$Co ??= [])[i] = s : t._$Cl = s), s !== void 0 && (e = x(o, s._$AS(o, e.values), s, i)), e;
+}
+class ie {
+  constructor(e, t) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    const { el: { content: t }, parts: i } = this._$AD, s = (e?.creationScope ?? A).importNode(t, !0);
+    $.currentNode = s;
+    let a = $.nextNode(), d = 0, g = 0, r = i[0];
+    for (; r !== void 0; ) {
+      if (d === r.index) {
+        let c;
+        r.type === 2 ? c = new E(a, a.nextSibling, this, e) : r.type === 1 ? c = new r.ctor(a, r.name, r.strings, this, e) : r.type === 6 && (c = new de(a, this, e)), this._$AV.push(c), r = i[++g];
+      }
+      d !== r?.index && (a = $.nextNode(), d++);
+    }
+    return $.currentNode = A, s;
+  }
+  p(e) {
+    let t = 0;
+    for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, t), t += i.strings.length - 2) : i._$AI(e[t])), t++;
+  }
+}
+class E {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(e, t, i, s) {
+    this.type = 2, this._$AH = l, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cv = s?.isConnected ?? !0;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const t = this._$AM;
+    return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, t = this) {
+    e = x(this, e, t), C(e) ? e === l || e == null || e === "" ? (this._$AH !== l && this._$AR(), this._$AH = l) : e !== this._$AH && e !== k && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ee(e) ? this.k(e) : this._(e);
+  }
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+  }
+  _(e) {
+    this._$AH !== l && C(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
+  }
+  $(e) {
+    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = T.createElement(q(i.h, i.h[0]), this.options)), i);
+    if (this._$AH?._$AD === s) this._$AH.p(t);
+    else {
+      const a = new ie(s, this), d = a.u(this.options);
+      a.p(t), this.T(d), this._$AH = a;
+    }
+  }
+  _$AC(e) {
+    let t = G.get(e.strings);
+    return t === void 0 && G.set(e.strings, t = new T(e)), t;
+  }
+  k(e) {
+    O(this._$AH) || (this._$AH = [], this._$AR());
+    const t = this._$AH;
+    let i, s = 0;
+    for (const a of e) s === t.length ? t.push(i = new E(this.O(N()), this.O(N()), this, this.options)) : i = t[s], i._$AI(a), s++;
+    s < t.length && (this._$AR(i && i._$AB.nextSibling, s), t.length = s);
+  }
+  _$AR(e = this._$AA.nextSibling, t) {
+    for (this._$AP?.(!1, !0, t); e !== this._$AB; ) {
+      const i = e.nextSibling;
+      e.remove(), e = i;
+    }
+  }
+  setConnected(e) {
+    this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
+  }
+}
+class M {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(e, t, i, s, a) {
+    this.type = 1, this._$AH = l, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = a, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = l;
+  }
+  _$AI(e, t = this, i, s) {
+    const a = this.strings;
+    let d = !1;
+    if (a === void 0) e = x(this, e, t, 0), d = !C(e) || e !== this._$AH && e !== k, d && (this._$AH = e);
+    else {
+      const g = e;
+      let r, c;
+      for (e = a[0], r = 0; r < a.length - 1; r++) c = x(this, g[i + r], t, r), c === k && (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;
+    }
+    d && !s && this.j(e);
+  }
+  j(e) {
+    e === l ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class se extends M {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === l ? void 0 : e;
+  }
+}
+class ae extends M {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== l);
+  }
+}
+class oe extends M {
+  constructor(e, t, i, s, a) {
+    super(e, t, i, s, a), this.type = 5;
+  }
+  _$AI(e, t = this) {
+    if ((e = x(this, e, t, 0) ?? l) === k) return;
+    const i = this._$AH, s = e === l && i !== l || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, a = e !== l && (i === l || s);
+    s && this.element.removeEventListener(this.name, this, i), a && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class de {
+  constructor(e, t, i) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    x(this, e);
+  }
+}
+const re = I.litHtmlPolyfillSupport;
+re?.(T, E), (I.litHtmlVersions ??= []).push("3.3.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ne = { CHILD: 2 }, le = (o) => (...e) => ({ _$litDirective$: o, values: e });
+class ce {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, t, i) {
+    this._$Ct = e, this._$AM = t, this._$Ci = i;
+  }
+  _$AS(e, t) {
+    return this.update(e, t);
+  }
+  update(e, t) {
+    return this.render(...t);
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class B extends ce {
+  constructor(e) {
+    if (super(e), this.it = l, e.type !== ne.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(e) {
+    if (e === l || e == null) return this._t = void 0, this.it = e;
+    if (e === k) return e;
+    if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (e === this.it) return this._t;
+    this.it = e;
+    const t = [e];
+    return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
+  }
+}
+B.directiveName = "unsafeHTML", B.resultType = 1;
+const P = le(B);
+var he = Object.defineProperty, u = (o, e, t, i) => {
+  for (var s = void 0, a = o.length - 1, d; a >= 0; a--)
+    (d = o[a]) && (s = d(e, t, s) || s);
+  return s && he(e, t, s), s;
+};
+class m extends K {
+  /**
+   * Initialize functions
+   */
+  constructor() {
+    super(), this.align = "right", this.closeButtonText = "Close Black Friday Deals", this.hasBackdrop = !1, this.imgSrc = "/images/black-friday-crowd.gif", this.imgAlt = "Black Friday crowd swarm", this.heading = "Black Friday Deals!!!!!!", this.description = "<p>Save up to 45% off on our bundles and courses!</p>", this.secondaryHeading = "Courses", this.promos = [
+      {
+        imgSrc: "/images/mega-bundle.png",
+        imgAlt: "Mega bundle image with Subatomic, Atomic Design, and AI & Design Systems courses",
+        heading: "MEGA BUNDLE",
+        description: `
+        <p>
+          We admit it: we just like saying the words "MEGA BUNDLE". Get all of our courses (an $1875 value) for one heavily-discounted
+          price of $1000. The Mega Bundle includes all of our current and upcoming courses:
+        </p>
+        <div class="ed-c-black-friday-modal__card-list-container">
+          <ul class="ed-c-black-friday-modal__card-list">
+            <li>Subatomic: The Complete Guide To Design Tokens</li>
+            <li>Atomic Design Certification Course preorder</li>
+            <li>AI & Design Systems course preorder</li>
+          </ul>
+        </div>
+      `,
+        href: "https://courses.bradfrost.com/enroll/3584706?price_id=4519547",
+        buttonText: "buy now"
+      },
+      {
+        imgSrc: "/images/subatomic-atomic-bundle.png",
+        imgAlt: "Subatomic The Complete Guide to Design Tokens and Atomic Design Certification Course bundle",
+        heading: "SUBATOMIC + ATOMIC DESIGN",
+        description: `
+        <p>
+          Get our Subatomic and Atomic Design Certification Course bundle for just $500! Our Subatomic course will help you master
+          design tokens, and our Atomic Design course will help you apply design system best practices at your organization.
+        </p>
+      `,
+        href: "https://courses.bradfrost.com/enroll/3449097?price_id=4366498",
+        buttonText: "buy now"
+      }
+    ], this.courses = [
+      {
+        imgSrc: "/images/subatomic-social-card.png",
+        imgAlt: "Subatomic Course",
+        href: "https://designtokenscourse.com/",
+        heading: "Subatomic: The Complete Guide to Design Tokens"
+      },
+      {
+        imgSrc: "/images/atomic-design-social-card.png",
+        imgAlt: "Atomic Design Certification Course",
+        href: "https://atomicdesigncourse.com",
+        heading: "Atomic Design Certification Course"
+      },
+      {
+        imgSrc: "/images/ai-design-systems-social-card.png",
+        imgAlt: "AI & Design Systems Course",
+        href: "https://aianddesign.systems/",
+        heading: "AI & Design Systems"
+      }
+    ], this.handleOnClickOutside = this.handleOnClickOutside.bind(this);
+  }
+  static get styles() {
+    return Z(X);
+  }
+  /**
+   * Connected Callback lifecycle
+   */
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this.handleOnClickOutside, !1);
+  }
+  /**
+   * Disconnected callback lifecycle
+   * 1) Remove window resize event listener
+   */
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this.handleOnClickOutside, !1), super.disconnectedCallback();
+  }
+  /**
+   * Updated lifecycle method
+   * Focus the close button when the modal becomes active
+   */
+  updated(e) {
+    super.updated(e), e.has("isActive") && this.isActive && setTimeout(() => {
+      this.closeButton?.focus();
+    }, 0);
+  }
+  /**
+   * Handle click outside the component
+   * 1) Close the modal on click outside
+   * 2) If the nav is already closed then we don't care about outside clicks and we
+   * can bail early
+   * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+   * undefined. To work around that we'll check that we have a shadowRoot (and a
+   * rendered .host) element here to appease the TypeScript compiler. This should never
+   * actually be shown or run for a human end user.
+   * 4) Check to see if we clicked inside the active navigation item
+   * 5) If the navigation is active and we've clicked outside of the nav then it should
+   * be closed.
+   */
+  handleOnClickOutside(e) {
+    if (!this.isActive)
+      return;
+    if (!this.shadowRoot?.host)
+      throw Error("Could not determine navigation context during click handler");
+    const t = e.composedPath().includes(this.shadowRoot.host);
+    this.isActive && !t && this.closeModal();
+  }
+  handleKeyDown(e) {
+    e.code === "Escape" && this.closeModal();
+  }
+  /**
+   * Open modal function
+   * Opens the modal and dispatches an event
+   */
+  openModal() {
+    console.log("openModal"), this.isActive = !0;
+    const e = {
+      detail: { isActive: this.isActive },
+      bubbles: !0,
+      composed: !0
+    };
+    this.dispatchEvent(new CustomEvent("ed-black-friday-modal-open", e));
+  }
+  /**
+   * Close modal function
+   * 1) Closes the modal
+   * 2) Returns focus to the top of the page when closing
+   * 3) Dispatches close event
+   */
+  closeModal() {
+    console.log("closeModal"), this.isActive = !1, document.body.setAttribute("tabindex", "-1"), document.body.focus(), setTimeout(() => {
+      document.body.removeAttribute("tabindex");
+    }, 0);
+    const e = {
+      detail: { isActive: this.isActive },
+      bubbles: !0,
+      composed: !0
+    };
+    this.dispatchEvent(new CustomEvent("ed-black-friday-modal-close", e));
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-black-friday-modal", {
+      "ed-c-black-friday-modal--backdrop": this.hasBackdrop,
+      "ed-c-black-friday-modal--inactive": !this.isActive
+    });
+    return v`
+      <dialog
+        aria-labelledby="black-friday-modal-heading"
+        class="${e}"
+        open=${Q(this.isActive ? "true" : void 0)}
+        @keydown=${this.handleKeyDown}
+      >
+        <header class="ed-c-black-friday-modal__header">
+          <div class="ed-c-black-friday-modal__header-content">
+            <div class="ed-c-black-friday-modal__header-media">
+              <img class="ed-c-black-friday-modal__header-media-image" src="${this.imgSrc}" alt="${this.imgAlt}" />
+            </div>
+            <div class="ed-c-black-friday-modal__header-content-text">
+              <ed-layout-container>
+                <ed-heading id="black-friday-modal-heading" tagName="h2" variant="display-lg" class="ed-u-display-block ed-u-margin-bottom-sm"
+                  ><span class="ed-c-black-friday-modal__header-content-title">${this.heading}</span></ed-heading
+                >
+                <div class="ed-c-black-friday-modal__header-content-description">${P(this.description)}</div>
+              </ed-layout-container>
+            </div>
+          </div>
+          <button class="ed-c-black-friday-modal__close-button" @click=${this.closeModal}>
+            <ed-icon name="close" />
+            <span class="is-vishidden">${this.closeButtonText}</span>
+          </button>
+        </header>
+        <div class="ed-c-black-friday-modal__body">
+          <ed-layout-container>
+            <ed-grid gap="lg" class="ed-c-black-friday-modal__promos">
+              ${this.promos.map(
+      (t) => v`
+                  <ed-grid-item>
+                    <div class="ed-c-black-friday-modal__card">
+                      <div class="ed-c-black-friday-modal__card-body">
+                        ${t.href ? v`
+                              <a class="ed-c-black-friday-modal__card-media" href="${t.href}">
+                                <img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" />
+                              </a>
+                            ` : v` <img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" /> `}
+                        <ed-heading tagName="h4" variant="title-lg" class="ed-c-black-friday-modal__card-title">${t.heading}</ed-heading>
+
+                        <ed-text-passage class="ed-u-display-block ed-u-margin-bottom-md"> ${P(t.description)} </ed-text-passage>
+                      </div>
+                      ${t.href && t.buttonText ? v`
+                            <footer class="ed-c-black-friday-modal__card-footer">
+                              <ed-button href="${t.href}" size="lg">${t.buttonText}</ed-button>
+                            </footer>
+                          ` : ""}
+                    </div>
+                  </ed-grid-item>
+                `
+    )}
+            </ed-grid>
+            <ed-heading tagName="h3" variant="headline-default" class="ed-c-black-friday-modal__section-title">${this.secondaryHeading}</ed-heading>
+            <ed-grid variant="${this.courses.length >= 3 ? "1-3up" : this.courses.length > 2 ? "2up" : "side-by-side"}">
+              ${this.courses.map(
+      (t) => v`
+                  <ed-grid-item>
+                    <div class="ed-c-black-friday-modal__card">
+                      <div class="ed-c-black-friday-modal__card-body">
+                        <a class="ed-c-black-friday-modal__card-media" href="${t.href}">
+                          <img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" />
+                        </a>
+                        <ed-heading tagName="h4" variant="title-default" class="ed-c-black-friday-modal__card-title">${t.heading}</ed-heading>
+                      </div>
+                    </div>
+                  </ed-grid-item>
+                `
+    )}
+            </ed-grid>
+          </ed-layout-container>
+        </div>
+      </dialog>
+    `;
+  }
+}
+u([
+  p()
+], m.prototype, "align");
+u([
+  p()
+], m.prototype, "closeButtonText");
+u([
+  p()
+], m.prototype, "hasBackdrop");
+u([
+  p({ type: Boolean })
+], m.prototype, "isActive");
+u([
+  p()
+], m.prototype, "imgSrc");
+u([
+  p()
+], m.prototype, "imgAlt");
+u([
+  p()
+], m.prototype, "heading");
+u([
+  p()
+], m.prototype, "description");
+u([
+  p()
+], m.prototype, "secondaryHeading");
+u([
+  p({ type: Array })
+], m.prototype, "promos");
+u([
+  p({ type: Array })
+], m.prototype, "courses");
+u([
+  J(".ed-c-black-friday-modal__close-button")
+], m.prototype, "closeButton");
+customElements.get("ed-black-friday-modal") === void 0 && customElements.define("ed-black-friday-modal", m);
+export {
+  m as EdBlackFridaymodal
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brad-frost-web/eddie-web-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "start": "npm run build:custom-elements.json && npm run storybook",