@brad-frost-web/eddie-web-components 0.9.0 → 0.11.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.
- package/components/black-friday-banner/black-friday-banner.d.ts +14 -0
- package/components/black-friday-banner/black-friday-banner.d.ts.map +1 -0
- package/components/black-friday-banner/black-friday-banner.js +23 -0
- package/components/black-friday-modal/black-friday-modal.d.ts +133 -0
- package/components/black-friday-modal/black-friday-modal.d.ts.map +1 -0
- package/components/black-friday-modal/black-friday-modal.js +545 -0
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
|
|
2
|
+
/**
|
|
3
|
+
* @slot - The component content
|
|
4
|
+
*/
|
|
5
|
+
export declare class EdBlackFridayBanner extends EdElement {
|
|
6
|
+
static get styles(): import('lit').CSSResult;
|
|
7
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
8
|
+
}
|
|
9
|
+
declare global {
|
|
10
|
+
interface HTMLElementTagNameMap {
|
|
11
|
+
'ed-black-friday-banner': EdBlackFridayBanner;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=black-friday-banner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"black-friday-banner.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/black-friday-banner/black-friday-banner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF,OAAO,sCAAsC,CAAC;AAE9C;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { unsafeCSS as o, html as t } from "lit";
|
|
2
|
+
import { E as n } from "../EdElement.js";
|
|
3
|
+
import "../layout-container/layout-container.js";
|
|
4
|
+
const r = ":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-banner{width:100%;padding:1rem 0;background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout)}::slotted(a){color:var(--ed-theme-color-content-knockout)}::slotted(a):hover,::slotted(a):focus{text-decoration:none}";
|
|
5
|
+
class a extends n {
|
|
6
|
+
static get styles() {
|
|
7
|
+
return o(r.toString());
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
const e = this.componentClassNames("ed-c-black-friday-banner", {});
|
|
11
|
+
return t`
|
|
12
|
+
<div class="${e}" role="banner">
|
|
13
|
+
<ed-layout-container>
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</ed-layout-container>
|
|
16
|
+
</div>
|
|
17
|
+
`;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
customElements.get("ed-black-friday-banner") === void 0 && customElements.define("ed-black-friday-banner", a);
|
|
21
|
+
export {
|
|
22
|
+
a as EdBlackFridayBanner
|
|
23
|
+
};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
|
|
2
|
+
interface BlackFridayPromo {
|
|
3
|
+
imgSrc: string;
|
|
4
|
+
imgAlt: string;
|
|
5
|
+
heading: string;
|
|
6
|
+
description: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
buttonText?: string;
|
|
9
|
+
}
|
|
10
|
+
interface BlackFridayCourse {
|
|
11
|
+
imgSrc: string;
|
|
12
|
+
imgAlt: string;
|
|
13
|
+
href: string;
|
|
14
|
+
heading: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* @slot - The modal content
|
|
18
|
+
* @slot header - The header content
|
|
19
|
+
* @slot footer - The footer ocntent
|
|
20
|
+
*/
|
|
21
|
+
export declare class EdBlackFridaymodal extends EdElement {
|
|
22
|
+
static get styles(): import('lit').CSSResult;
|
|
23
|
+
/**
|
|
24
|
+
* Align variants
|
|
25
|
+
* <ed-text-passage size="sm">
|
|
26
|
+
* <ul>
|
|
27
|
+
* <li>**top** - aligns the modal to the top of the viewport</li>
|
|
28
|
+
* <li>**right** - aligns the modal to the right of the viewport</li>
|
|
29
|
+
* <li>**bottom** - aligns the modal to the bottom of the viewport</li>
|
|
30
|
+
* <li>**left** - aligns the modal to the left of the viewport</li>
|
|
31
|
+
* </ul>
|
|
32
|
+
* </ed-text-passage>
|
|
33
|
+
*/
|
|
34
|
+
align?: 'top' | 'right' | 'bottom' | 'left';
|
|
35
|
+
/**
|
|
36
|
+
* Close button text
|
|
37
|
+
*/
|
|
38
|
+
closeButtonText?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Fade/ghost back the page background content
|
|
41
|
+
*/
|
|
42
|
+
hasBackdrop?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Active state on the modal
|
|
45
|
+
*/
|
|
46
|
+
isActive?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Hero image source
|
|
49
|
+
*/
|
|
50
|
+
imgSrc?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Hero image alt text
|
|
53
|
+
*/
|
|
54
|
+
imgAlt?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Hero heading text
|
|
57
|
+
*/
|
|
58
|
+
heading?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Hero description text (supports HTML)
|
|
61
|
+
*/
|
|
62
|
+
description?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Courses heading text
|
|
65
|
+
*/
|
|
66
|
+
secondaryHeading?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Array of promo items to display in the grid
|
|
69
|
+
*/
|
|
70
|
+
promos: BlackFridayPromo[];
|
|
71
|
+
/**
|
|
72
|
+
* Array of course items to display in the grid
|
|
73
|
+
*/
|
|
74
|
+
courses: BlackFridayCourse[];
|
|
75
|
+
/**
|
|
76
|
+
* Reference to the close button element
|
|
77
|
+
*/
|
|
78
|
+
closeButton?: HTMLButtonElement;
|
|
79
|
+
/**
|
|
80
|
+
* Initialize functions
|
|
81
|
+
*/
|
|
82
|
+
constructor();
|
|
83
|
+
/**
|
|
84
|
+
* Connected Callback lifecycle
|
|
85
|
+
*/
|
|
86
|
+
connectedCallback(): void;
|
|
87
|
+
/**
|
|
88
|
+
* Disconnected callback lifecycle
|
|
89
|
+
* 1) Remove window resize event listener
|
|
90
|
+
*/
|
|
91
|
+
disconnectedCallback(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Updated lifecycle method
|
|
94
|
+
* Focus the close button when the modal becomes active
|
|
95
|
+
*/
|
|
96
|
+
updated(changedProperties: Map<string, any>): void;
|
|
97
|
+
/**
|
|
98
|
+
* Handle click outside the component
|
|
99
|
+
* 1) Close the modal on click outside
|
|
100
|
+
* 2) If the nav is already closed then we don't care about outside clicks and we
|
|
101
|
+
* can bail early
|
|
102
|
+
* 3) By the time a user clicks on the page the shadowRoot will almost certainly be
|
|
103
|
+
* defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
|
|
104
|
+
* undefined. To work around that we'll check that we have a shadowRoot (and a
|
|
105
|
+
* rendered .host) element here to appease the TypeScript compiler. This should never
|
|
106
|
+
* actually be shown or run for a human end user.
|
|
107
|
+
* 4) Check to see if we clicked inside the active navigation item
|
|
108
|
+
* 5) If the navigation is active and we've clicked outside of the nav then it should
|
|
109
|
+
* be closed.
|
|
110
|
+
*/
|
|
111
|
+
handleOnClickOutside(event: MouseEvent): void;
|
|
112
|
+
handleKeyDown(e: KeyboardEvent): void;
|
|
113
|
+
/**
|
|
114
|
+
* Open modal function
|
|
115
|
+
* Opens the modal and dispatches an event
|
|
116
|
+
*/
|
|
117
|
+
openModal(): void;
|
|
118
|
+
/**
|
|
119
|
+
* Close modal function
|
|
120
|
+
* 1) Closes the modal
|
|
121
|
+
* 2) Returns focus to the top of the page when closing
|
|
122
|
+
* 3) Dispatches close event
|
|
123
|
+
*/
|
|
124
|
+
closeModal(): void;
|
|
125
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
126
|
+
}
|
|
127
|
+
declare global {
|
|
128
|
+
interface HTMLElementTagNameMap {
|
|
129
|
+
'ed-black-friday-modal': EdBlackFridaymodal;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
export {};
|
|
133
|
+
//# sourceMappingURL=black-friday-modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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;AAChC,OAAO,cAAc,CAAC;AACtB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AAKtC,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;CAwFP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}
|
|
@@ -0,0 +1,545 @@
|
|
|
1
|
+
import { E as K } from "../EdElement.js";
|
|
2
|
+
import { unsafeCSS as Z, html as A } from "lit";
|
|
3
|
+
import { property as p, query as J } from "lit/decorators.js";
|
|
4
|
+
import "../button/button.js";
|
|
5
|
+
import "../grid/grid.js";
|
|
6
|
+
import "../grid-item/grid-item.js";
|
|
7
|
+
import "../icon/icon.js";
|
|
8
|
+
import "../layout-container/layout-container.js";
|
|
9
|
+
import "../heading/heading.js";
|
|
10
|
+
import "../text-passage/text-passage.js";
|
|
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;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__card-description p{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}.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{text-align:center}';
|
|
13
|
+
/**
|
|
14
|
+
* @license
|
|
15
|
+
* Copyright 2017 Google LLC
|
|
16
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
+
*/
|
|
18
|
+
const O = globalThis, H = O.trustedTypes, L = H ? H.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, W = "$lit$", y = `lit$${Math.random().toFixed(9).slice(2)}$`, F = "?" + y, Y = `<${F}>`, v = document, N = () => v.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, b = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^
|
|
20
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), R = /'/g, G = /"/g, V = /^(?:script|style|textarea|title)$/i, k = Symbol.for("lit-noChange"), l = Symbol.for("lit-nothing"), P = /* @__PURE__ */ new WeakMap(), $ = v.createTreeWalker(v, 129);
|
|
21
|
+
function q(s, e) {
|
|
22
|
+
if (!z(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
23
|
+
return L !== void 0 ? L.createHTML(e) : e;
|
|
24
|
+
}
|
|
25
|
+
const te = (s, e) => {
|
|
26
|
+
const t = s.length - 1, i = [];
|
|
27
|
+
let a, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", d = w;
|
|
28
|
+
for (let g = 0; g < t; g++) {
|
|
29
|
+
const r = s[g];
|
|
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]) && (a = RegExp("</" + h[2], "g")), d = b) : h[3] !== void 0 && (d = b) : d === b ? h[0] === ">" ? (d = a ?? w, n = -1) : h[1] === void 0 ? n = -2 : (n = d.lastIndex - h[2].length, c = h[1], d = h[3] === void 0 ? b : h[3] === '"' ? G : R) : d === G || d === R ? d = b : d === U || d === j ? d = w : (d = b, a = void 0);
|
|
32
|
+
const _ = d === b && s[g + 1].startsWith("/>") ? " " : "";
|
|
33
|
+
o += d === w ? r + Y : n >= 0 ? (i.push(c), r.slice(0, n) + W + r.slice(n) + y + _) : r + y + (n === -2 ? g : _);
|
|
34
|
+
}
|
|
35
|
+
return [q(s, o + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
|
|
36
|
+
};
|
|
37
|
+
class T {
|
|
38
|
+
constructor({ strings: e, _$litType$: t }, i) {
|
|
39
|
+
let a;
|
|
40
|
+
this.parts = [];
|
|
41
|
+
let o = 0, d = 0;
|
|
42
|
+
const g = e.length - 1, r = this.parts, [c, h] = te(e, t);
|
|
43
|
+
if (this.el = T.createElement(c, i), $.currentNode = this.el.content, t === 2 || t === 3) {
|
|
44
|
+
const n = this.el.content.firstChild;
|
|
45
|
+
n.replaceWith(...n.childNodes);
|
|
46
|
+
}
|
|
47
|
+
for (; (a = $.nextNode()) !== null && r.length < g; ) {
|
|
48
|
+
if (a.nodeType === 1) {
|
|
49
|
+
if (a.hasAttributes()) for (const n of a.getAttributeNames()) if (n.endsWith(W)) {
|
|
50
|
+
const f = h[d++], _ = a.getAttribute(n).split(y), S = /([.?@])?(.*)/.exec(f);
|
|
51
|
+
r.push({ type: 1, index: o, name: S[2], strings: _, ctor: S[1] === "." ? ae : S[1] === "?" ? oe : S[1] === "@" ? se : E }), a.removeAttribute(n);
|
|
52
|
+
} else n.startsWith(y) && (r.push({ type: 6, index: o }), a.removeAttribute(n));
|
|
53
|
+
if (V.test(a.tagName)) {
|
|
54
|
+
const n = a.textContent.split(y), f = n.length - 1;
|
|
55
|
+
if (f > 0) {
|
|
56
|
+
a.textContent = H ? H.emptyScript : "";
|
|
57
|
+
for (let _ = 0; _ < f; _++) a.append(n[_], N()), $.nextNode(), r.push({ type: 2, index: ++o });
|
|
58
|
+
a.append(n[f], N());
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
} else if (a.nodeType === 8) if (a.data === F) r.push({ type: 2, index: o });
|
|
62
|
+
else {
|
|
63
|
+
let n = -1;
|
|
64
|
+
for (; (n = a.data.indexOf(y, n + 1)) !== -1; ) r.push({ type: 7, index: o }), n += y.length - 1;
|
|
65
|
+
}
|
|
66
|
+
o++;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
static createElement(e, t) {
|
|
70
|
+
const i = v.createElement("template");
|
|
71
|
+
return i.innerHTML = e, i;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function x(s, e, t = s, i) {
|
|
75
|
+
if (e === k) return e;
|
|
76
|
+
let a = i !== void 0 ? t._$Co?.[i] : t._$Cl;
|
|
77
|
+
const o = C(e) ? void 0 : e._$litDirective$;
|
|
78
|
+
return a?.constructor !== o && (a?._$AO?.(!1), o === void 0 ? a = void 0 : (a = new o(s), a._$AT(s, t, i)), i !== void 0 ? (t._$Co ??= [])[i] = a : t._$Cl = a), a !== void 0 && (e = x(s, a._$AS(s, e.values), a, i)), e;
|
|
79
|
+
}
|
|
80
|
+
class ie {
|
|
81
|
+
constructor(e, t) {
|
|
82
|
+
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
|
|
83
|
+
}
|
|
84
|
+
get parentNode() {
|
|
85
|
+
return this._$AM.parentNode;
|
|
86
|
+
}
|
|
87
|
+
get _$AU() {
|
|
88
|
+
return this._$AM._$AU;
|
|
89
|
+
}
|
|
90
|
+
u(e) {
|
|
91
|
+
const { el: { content: t }, parts: i } = this._$AD, a = (e?.creationScope ?? v).importNode(t, !0);
|
|
92
|
+
$.currentNode = a;
|
|
93
|
+
let o = $.nextNode(), d = 0, g = 0, r = i[0];
|
|
94
|
+
for (; r !== void 0; ) {
|
|
95
|
+
if (d === r.index) {
|
|
96
|
+
let c;
|
|
97
|
+
r.type === 2 ? c = new M(o, o.nextSibling, this, e) : r.type === 1 ? c = new r.ctor(o, r.name, r.strings, this, e) : r.type === 6 && (c = new de(o, this, e)), this._$AV.push(c), r = i[++g];
|
|
98
|
+
}
|
|
99
|
+
d !== r?.index && (o = $.nextNode(), d++);
|
|
100
|
+
}
|
|
101
|
+
return $.currentNode = v, a;
|
|
102
|
+
}
|
|
103
|
+
p(e) {
|
|
104
|
+
let t = 0;
|
|
105
|
+
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++;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
class M {
|
|
109
|
+
get _$AU() {
|
|
110
|
+
return this._$AM?._$AU ?? this._$Cv;
|
|
111
|
+
}
|
|
112
|
+
constructor(e, t, i, a) {
|
|
113
|
+
this.type = 2, this._$AH = l, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = a, this._$Cv = a?.isConnected ?? !0;
|
|
114
|
+
}
|
|
115
|
+
get parentNode() {
|
|
116
|
+
let e = this._$AA.parentNode;
|
|
117
|
+
const t = this._$AM;
|
|
118
|
+
return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
|
|
119
|
+
}
|
|
120
|
+
get startNode() {
|
|
121
|
+
return this._$AA;
|
|
122
|
+
}
|
|
123
|
+
get endNode() {
|
|
124
|
+
return this._$AB;
|
|
125
|
+
}
|
|
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 !== k && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ee(e) ? this.k(e) : this._(e);
|
|
128
|
+
}
|
|
129
|
+
O(e) {
|
|
130
|
+
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
131
|
+
}
|
|
132
|
+
T(e) {
|
|
133
|
+
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
|
|
134
|
+
}
|
|
135
|
+
_(e) {
|
|
136
|
+
this._$AH !== l && C(this._$AH) ? this._$AA.nextSibling.data = e : this.T(v.createTextNode(e)), this._$AH = e;
|
|
137
|
+
}
|
|
138
|
+
$(e) {
|
|
139
|
+
const { values: t, _$litType$: i } = e, a = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = T.createElement(q(i.h, i.h[0]), this.options)), i);
|
|
140
|
+
if (this._$AH?._$AD === a) this._$AH.p(t);
|
|
141
|
+
else {
|
|
142
|
+
const o = new ie(a, this), d = o.u(this.options);
|
|
143
|
+
o.p(t), this.T(d), this._$AH = o;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
_$AC(e) {
|
|
147
|
+
let t = P.get(e.strings);
|
|
148
|
+
return t === void 0 && P.set(e.strings, t = new T(e)), t;
|
|
149
|
+
}
|
|
150
|
+
k(e) {
|
|
151
|
+
z(this._$AH) || (this._$AH = [], this._$AR());
|
|
152
|
+
const t = this._$AH;
|
|
153
|
+
let i, a = 0;
|
|
154
|
+
for (const o of e) a === t.length ? t.push(i = new M(this.O(N()), this.O(N()), this, this.options)) : i = t[a], i._$AI(o), a++;
|
|
155
|
+
a < t.length && (this._$AR(i && i._$AB.nextSibling, a), t.length = a);
|
|
156
|
+
}
|
|
157
|
+
_$AR(e = this._$AA.nextSibling, t) {
|
|
158
|
+
for (this._$AP?.(!1, !0, t); e !== this._$AB; ) {
|
|
159
|
+
const i = e.nextSibling;
|
|
160
|
+
e.remove(), e = i;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
setConnected(e) {
|
|
164
|
+
this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
class E {
|
|
168
|
+
get tagName() {
|
|
169
|
+
return this.element.tagName;
|
|
170
|
+
}
|
|
171
|
+
get _$AU() {
|
|
172
|
+
return this._$AM._$AU;
|
|
173
|
+
}
|
|
174
|
+
constructor(e, t, i, a, o) {
|
|
175
|
+
this.type = 1, this._$AH = l, this._$AN = void 0, this.element = e, this.name = t, this._$AM = a, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = l;
|
|
176
|
+
}
|
|
177
|
+
_$AI(e, t = this, i, a) {
|
|
178
|
+
const o = this.strings;
|
|
179
|
+
let d = !1;
|
|
180
|
+
if (o === void 0) e = x(this, e, t, 0), d = !C(e) || e !== this._$AH && e !== k, d && (this._$AH = e);
|
|
181
|
+
else {
|
|
182
|
+
const g = e;
|
|
183
|
+
let r, c;
|
|
184
|
+
for (e = o[0], r = 0; r < o.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 ?? "") + o[r + 1]), this._$AH[r] = c;
|
|
185
|
+
}
|
|
186
|
+
d && !a && this.j(e);
|
|
187
|
+
}
|
|
188
|
+
j(e) {
|
|
189
|
+
e === l ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
class ae extends E {
|
|
193
|
+
constructor() {
|
|
194
|
+
super(...arguments), this.type = 3;
|
|
195
|
+
}
|
|
196
|
+
j(e) {
|
|
197
|
+
this.element[this.name] = e === l ? void 0 : e;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
class oe extends E {
|
|
201
|
+
constructor() {
|
|
202
|
+
super(...arguments), this.type = 4;
|
|
203
|
+
}
|
|
204
|
+
j(e) {
|
|
205
|
+
this.element.toggleAttribute(this.name, !!e && e !== l);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
class se extends E {
|
|
209
|
+
constructor(e, t, i, a, o) {
|
|
210
|
+
super(e, t, i, a, o), this.type = 5;
|
|
211
|
+
}
|
|
212
|
+
_$AI(e, t = this) {
|
|
213
|
+
if ((e = x(this, e, t, 0) ?? l) === k) return;
|
|
214
|
+
const i = this._$AH, a = e === l && i !== l || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== l && (i === l || a);
|
|
215
|
+
a && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
216
|
+
}
|
|
217
|
+
handleEvent(e) {
|
|
218
|
+
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
class de {
|
|
222
|
+
constructor(e, t, i) {
|
|
223
|
+
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
|
|
224
|
+
}
|
|
225
|
+
get _$AU() {
|
|
226
|
+
return this._$AM._$AU;
|
|
227
|
+
}
|
|
228
|
+
_$AI(e) {
|
|
229
|
+
x(this, e);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
const re = O.litHtmlPolyfillSupport;
|
|
233
|
+
re?.(T, M), (O.litHtmlVersions ??= []).push("3.3.1");
|
|
234
|
+
/**
|
|
235
|
+
* @license
|
|
236
|
+
* Copyright 2017 Google LLC
|
|
237
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
238
|
+
*/
|
|
239
|
+
const ne = { CHILD: 2 }, le = (s) => (...e) => ({ _$litDirective$: s, values: e });
|
|
240
|
+
class ce {
|
|
241
|
+
constructor(e) {
|
|
242
|
+
}
|
|
243
|
+
get _$AU() {
|
|
244
|
+
return this._$AM._$AU;
|
|
245
|
+
}
|
|
246
|
+
_$AT(e, t, i) {
|
|
247
|
+
this._$Ct = e, this._$AM = t, this._$Ci = i;
|
|
248
|
+
}
|
|
249
|
+
_$AS(e, t) {
|
|
250
|
+
return this.update(e, t);
|
|
251
|
+
}
|
|
252
|
+
update(e, t) {
|
|
253
|
+
return this.render(...t);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
/**
|
|
257
|
+
* @license
|
|
258
|
+
* Copyright 2017 Google LLC
|
|
259
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
260
|
+
*/
|
|
261
|
+
class I extends ce {
|
|
262
|
+
constructor(e) {
|
|
263
|
+
if (super(e), this.it = l, e.type !== ne.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
|
|
264
|
+
}
|
|
265
|
+
render(e) {
|
|
266
|
+
if (e === l || e == null) return this._t = void 0, this.it = e;
|
|
267
|
+
if (e === k) return e;
|
|
268
|
+
if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
|
|
269
|
+
if (e === this.it) return this._t;
|
|
270
|
+
this.it = e;
|
|
271
|
+
const t = [e];
|
|
272
|
+
return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
I.directiveName = "unsafeHTML", I.resultType = 1;
|
|
276
|
+
const B = le(I);
|
|
277
|
+
var he = Object.defineProperty, u = (s, e, t, i) => {
|
|
278
|
+
for (var a = void 0, o = s.length - 1, d; o >= 0; o--)
|
|
279
|
+
(d = s[o]) && (a = d(e, t, a) || a);
|
|
280
|
+
return a && he(e, t, a), a;
|
|
281
|
+
};
|
|
282
|
+
class m extends K {
|
|
283
|
+
/**
|
|
284
|
+
* Initialize functions
|
|
285
|
+
*/
|
|
286
|
+
constructor() {
|
|
287
|
+
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 = [
|
|
288
|
+
{
|
|
289
|
+
imgSrc: "/images/mega-bundle.png",
|
|
290
|
+
imgAlt: "Mega bundle image with Subatomic, Atomic Design, and AI & Design Systems courses",
|
|
291
|
+
heading: "MEGA BUNDLE",
|
|
292
|
+
description: `
|
|
293
|
+
<p>
|
|
294
|
+
We admit it: we just like saying the words "MEGA BUNDLE". Get all of our courses (an $1875 value) for one heavily-discounted
|
|
295
|
+
price of $1000. The Mega Bundle includes all of our current and upcoming courses:
|
|
296
|
+
</p>
|
|
297
|
+
<div class="ed-c-black-friday-modal__card-list-container">
|
|
298
|
+
<ul class="ed-c-black-friday-modal__card-list">
|
|
299
|
+
<li>Subatomic: The Complete Guide To Design Tokens</li>
|
|
300
|
+
<li>Atomic Design Certification Course preorder</li>
|
|
301
|
+
<li>AI & Design Systems course preorder</li>
|
|
302
|
+
</ul>
|
|
303
|
+
</div>
|
|
304
|
+
`,
|
|
305
|
+
href: "https://courses.bradfrost.com/enroll/3584706?price_id=4519547",
|
|
306
|
+
buttonText: "buy for $1000"
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
imgSrc: "/images/subatomic-atomic-bundle.png",
|
|
310
|
+
imgAlt: "Subatomic The Complete Guide to Design Tokens and Atomic Design Certification Course bundle",
|
|
311
|
+
heading: "SUBATOMIC + ATOMIC DESIGN",
|
|
312
|
+
description: `
|
|
313
|
+
<p>
|
|
314
|
+
Get our Subatomic and Atomic Design Certification Course bundle for just $500! Our Subatomic course will help you master
|
|
315
|
+
design tokens, and our Atomic Design course will help you apply design system best practices at your organization.
|
|
316
|
+
</p>
|
|
317
|
+
`,
|
|
318
|
+
href: "https://courses.bradfrost.com/enroll/3449097?price_id=4366498",
|
|
319
|
+
buttonText: "buy for $500"
|
|
320
|
+
}
|
|
321
|
+
], this.courses = [
|
|
322
|
+
{
|
|
323
|
+
imgSrc: "/images/subatomic-social-card.png",
|
|
324
|
+
imgAlt: "Subatomic Course",
|
|
325
|
+
href: "https://designtokenscourse.com/",
|
|
326
|
+
heading: "Subatomic: The Complete Guide to Design Tokens"
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
imgSrc: "/images/atomic-design-social-card.png",
|
|
330
|
+
imgAlt: "Atomic Design Certification Course",
|
|
331
|
+
href: "https://atomicdesigncourse.com",
|
|
332
|
+
heading: "Atomic Design Certification Course"
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
imgSrc: "/images/ai-design-systems-social-card.png",
|
|
336
|
+
imgAlt: "AI & Design Systems Course",
|
|
337
|
+
href: "https://aianddesign.systems/",
|
|
338
|
+
heading: "AI & Design Systems"
|
|
339
|
+
}
|
|
340
|
+
], this.handleOnClickOutside = this.handleOnClickOutside.bind(this);
|
|
341
|
+
}
|
|
342
|
+
static get styles() {
|
|
343
|
+
return Z(X);
|
|
344
|
+
}
|
|
345
|
+
/**
|
|
346
|
+
* Connected Callback lifecycle
|
|
347
|
+
*/
|
|
348
|
+
connectedCallback() {
|
|
349
|
+
super.connectedCallback(), document.addEventListener("mousedown", this.handleOnClickOutside, !1);
|
|
350
|
+
}
|
|
351
|
+
/**
|
|
352
|
+
* Disconnected callback lifecycle
|
|
353
|
+
* 1) Remove window resize event listener
|
|
354
|
+
*/
|
|
355
|
+
disconnectedCallback() {
|
|
356
|
+
document.removeEventListener("mousedown", this.handleOnClickOutside, !1), super.disconnectedCallback();
|
|
357
|
+
}
|
|
358
|
+
/**
|
|
359
|
+
* Updated lifecycle method
|
|
360
|
+
* Focus the close button when the modal becomes active
|
|
361
|
+
*/
|
|
362
|
+
updated(e) {
|
|
363
|
+
super.updated(e), e.has("isActive") && this.isActive && setTimeout(() => {
|
|
364
|
+
this.closeButton?.focus();
|
|
365
|
+
}, 0);
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Handle click outside the component
|
|
369
|
+
* 1) Close the modal on click outside
|
|
370
|
+
* 2) If the nav is already closed then we don't care about outside clicks and we
|
|
371
|
+
* can bail early
|
|
372
|
+
* 3) By the time a user clicks on the page the shadowRoot will almost certainly be
|
|
373
|
+
* defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
|
|
374
|
+
* undefined. To work around that we'll check that we have a shadowRoot (and a
|
|
375
|
+
* rendered .host) element here to appease the TypeScript compiler. This should never
|
|
376
|
+
* actually be shown or run for a human end user.
|
|
377
|
+
* 4) Check to see if we clicked inside the active navigation item
|
|
378
|
+
* 5) If the navigation is active and we've clicked outside of the nav then it should
|
|
379
|
+
* be closed.
|
|
380
|
+
*/
|
|
381
|
+
handleOnClickOutside(e) {
|
|
382
|
+
if (!this.isActive)
|
|
383
|
+
return;
|
|
384
|
+
if (!this.shadowRoot?.host)
|
|
385
|
+
throw Error("Could not determine navigation context during click handler");
|
|
386
|
+
const t = e.composedPath().includes(this.shadowRoot.host);
|
|
387
|
+
this.isActive && !t && this.closeModal();
|
|
388
|
+
}
|
|
389
|
+
handleKeyDown(e) {
|
|
390
|
+
e.code === "Escape" && this.closeModal();
|
|
391
|
+
}
|
|
392
|
+
/**
|
|
393
|
+
* Open modal function
|
|
394
|
+
* Opens the modal and dispatches an event
|
|
395
|
+
*/
|
|
396
|
+
openModal() {
|
|
397
|
+
console.log("openModal"), this.isActive = !0;
|
|
398
|
+
const e = {
|
|
399
|
+
detail: { isActive: this.isActive },
|
|
400
|
+
bubbles: !0,
|
|
401
|
+
composed: !0
|
|
402
|
+
};
|
|
403
|
+
this.dispatchEvent(new CustomEvent("ed-black-friday-modal-open", e));
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* Close modal function
|
|
407
|
+
* 1) Closes the modal
|
|
408
|
+
* 2) Returns focus to the top of the page when closing
|
|
409
|
+
* 3) Dispatches close event
|
|
410
|
+
*/
|
|
411
|
+
closeModal() {
|
|
412
|
+
console.log("closeModal"), this.isActive = !1, document.body.setAttribute("tabindex", "-1"), document.body.focus(), setTimeout(() => {
|
|
413
|
+
document.body.removeAttribute("tabindex");
|
|
414
|
+
}, 0);
|
|
415
|
+
const e = {
|
|
416
|
+
detail: { isActive: this.isActive },
|
|
417
|
+
bubbles: !0,
|
|
418
|
+
composed: !0
|
|
419
|
+
};
|
|
420
|
+
this.dispatchEvent(new CustomEvent("ed-black-friday-modal-close", e));
|
|
421
|
+
}
|
|
422
|
+
render() {
|
|
423
|
+
const e = this.componentClassNames("ed-c-black-friday-modal", {
|
|
424
|
+
"ed-c-black-friday-modal--backdrop": this.hasBackdrop,
|
|
425
|
+
"ed-c-black-friday-modal--inactive": !this.isActive
|
|
426
|
+
});
|
|
427
|
+
return A`
|
|
428
|
+
<dialog
|
|
429
|
+
aria-labelledby="black-friday-modal-heading"
|
|
430
|
+
class="${e}"
|
|
431
|
+
open=${Q(this.isActive ? "true" : void 0)}
|
|
432
|
+
@keydown=${this.handleKeyDown}
|
|
433
|
+
>
|
|
434
|
+
<header class="ed-c-black-friday-modal__header">
|
|
435
|
+
<div class="ed-c-black-friday-modal__header-content">
|
|
436
|
+
<div class="ed-c-black-friday-modal__header-media">
|
|
437
|
+
<img class="ed-c-black-friday-modal__header-media-image" src="${this.imgSrc}" alt="${this.imgAlt}" />
|
|
438
|
+
</div>
|
|
439
|
+
<div class="ed-c-black-friday-modal__header-content-text">
|
|
440
|
+
<ed-layout-container>
|
|
441
|
+
<ed-heading id="black-friday-modal-heading" tagName="h2" variant="display-lg" class="ed-u-display-block ed-u-margin-bottom-sm"
|
|
442
|
+
><span class="ed-c-black-friday-modal__header-content-title">${this.heading}</span></ed-heading
|
|
443
|
+
>
|
|
444
|
+
<div class="ed-c-black-friday-modal__header-content-description">${B(this.description)}</div>
|
|
445
|
+
</ed-layout-container>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
<button class="ed-c-black-friday-modal__close-button" @click=${this.closeModal}>
|
|
449
|
+
<ed-icon name="close" />
|
|
450
|
+
<span class="is-vishidden">${this.closeButtonText}</span>
|
|
451
|
+
</button>
|
|
452
|
+
</header>
|
|
453
|
+
<div class="ed-c-black-friday-modal__body">
|
|
454
|
+
<ed-layout-container>
|
|
455
|
+
<ed-grid gap="lg" class="ed-c-black-friday-modal__promos">
|
|
456
|
+
${this.promos.map(
|
|
457
|
+
(t) => A`
|
|
458
|
+
<ed-grid-item>
|
|
459
|
+
<div class="ed-c-black-friday-modal__card">
|
|
460
|
+
<div class="ed-c-black-friday-modal__card-body">
|
|
461
|
+
${t.href ? A`
|
|
462
|
+
<a class="ed-c-black-friday-modal__card-media" href="${t.href}">
|
|
463
|
+
<img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" />
|
|
464
|
+
</a>
|
|
465
|
+
` : A` <img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" /> `}
|
|
466
|
+
<ed-heading tagName="h4" variant="title-lg" class="ed-c-black-friday-modal__card-title">${t.heading}</ed-heading>
|
|
467
|
+
|
|
468
|
+
<ed-text-passage class="ed-c-black-friday-modal__card-description"> ${B(t.description)} </ed-text-passage>
|
|
469
|
+
</div>
|
|
470
|
+
${t.href && t.buttonText ? A`
|
|
471
|
+
<footer class="ed-c-black-friday-modal__card-footer">
|
|
472
|
+
<ed-button href="${t.href}" size="lg">${B(t.buttonText)}</ed-button>
|
|
473
|
+
</footer>
|
|
474
|
+
` : ""}
|
|
475
|
+
</div>
|
|
476
|
+
</ed-grid-item>
|
|
477
|
+
`
|
|
478
|
+
)}
|
|
479
|
+
</ed-grid>
|
|
480
|
+
<ed-heading tagName="h3" variant="headline-default" class="ed-c-black-friday-modal__section-title">${this.secondaryHeading}</ed-heading>
|
|
481
|
+
<ed-grid variant="${this.courses.length >= 3 ? "1-3up" : this.courses.length > 2 ? "2up" : "side-by-side"}">
|
|
482
|
+
${this.courses.map(
|
|
483
|
+
(t) => A`
|
|
484
|
+
<ed-grid-item>
|
|
485
|
+
<div class="ed-c-black-friday-modal__card">
|
|
486
|
+
<div class="ed-c-black-friday-modal__card-body">
|
|
487
|
+
<a class="ed-c-black-friday-modal__card-media" href="${t.href}">
|
|
488
|
+
<img class="ed-c-black-friday-modal__card-image" src="${t.imgSrc}" alt="${t.imgAlt}" />
|
|
489
|
+
</a>
|
|
490
|
+
<ed-heading tagName="h4" variant="title-default" class="ed-c-black-friday-modal__card-title">${t.heading}</ed-heading>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
</ed-grid-item>
|
|
494
|
+
`
|
|
495
|
+
)}
|
|
496
|
+
</ed-grid>
|
|
497
|
+
<div class="ed-c-black-friday-modal__cta">
|
|
498
|
+
<ed-button @click=${this.closeModal} size="lg">close this window</ed-button>
|
|
499
|
+
</div>
|
|
500
|
+
</ed-layout-container>
|
|
501
|
+
</div>
|
|
502
|
+
</dialog>
|
|
503
|
+
`;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
u([
|
|
507
|
+
p()
|
|
508
|
+
], m.prototype, "align");
|
|
509
|
+
u([
|
|
510
|
+
p()
|
|
511
|
+
], m.prototype, "closeButtonText");
|
|
512
|
+
u([
|
|
513
|
+
p()
|
|
514
|
+
], m.prototype, "hasBackdrop");
|
|
515
|
+
u([
|
|
516
|
+
p({ type: Boolean })
|
|
517
|
+
], m.prototype, "isActive");
|
|
518
|
+
u([
|
|
519
|
+
p()
|
|
520
|
+
], m.prototype, "imgSrc");
|
|
521
|
+
u([
|
|
522
|
+
p()
|
|
523
|
+
], m.prototype, "imgAlt");
|
|
524
|
+
u([
|
|
525
|
+
p()
|
|
526
|
+
], m.prototype, "heading");
|
|
527
|
+
u([
|
|
528
|
+
p()
|
|
529
|
+
], m.prototype, "description");
|
|
530
|
+
u([
|
|
531
|
+
p()
|
|
532
|
+
], m.prototype, "secondaryHeading");
|
|
533
|
+
u([
|
|
534
|
+
p({ type: Array })
|
|
535
|
+
], m.prototype, "promos");
|
|
536
|
+
u([
|
|
537
|
+
p({ type: Array })
|
|
538
|
+
], m.prototype, "courses");
|
|
539
|
+
u([
|
|
540
|
+
J(".ed-c-black-friday-modal__close-button")
|
|
541
|
+
], m.prototype, "closeButton");
|
|
542
|
+
customElements.get("ed-black-friday-modal") === void 0 && customElements.define("ed-black-friday-modal", m);
|
|
543
|
+
export {
|
|
544
|
+
m as EdBlackFridaymodal
|
|
545
|
+
};
|