@brad-frost-web/eddie-web-components 0.4.0 → 0.5.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/button/button.js +1 -1
- package/components/footer/footer.d.ts.map +1 -1
- package/components/footer/footer.js +8 -14
- package/components/header/header.d.ts.map +1 -1
- package/components/header/header.js +21 -27
- package/components/layout-container/layout-container.js +6 -6
- package/components/logo/logo.js +15 -15
- package/components/nav-container/nav-container.js +5 -5
- package/components/primary-nav/primary-nav.js +9 -9
- package/components/primary-nav-item/primary-nav-item.d.ts +4 -0
- package/components/primary-nav-item/primary-nav-item.d.ts.map +1 -1
- package/components/primary-nav-item/primary-nav-item.js +17 -13
- package/components/section/section.d.ts.map +1 -1
- package/components/section/section.js +6 -8
- package/components/utility-nav-item/utility-nav-item.js +22 -22
- package/package.json +1 -1
|
@@ -51,7 +51,7 @@ const c = class c extends b {
|
|
|
51
51
|
return l`
|
|
52
52
|
<a href="${p(this.href)}" class="${e}" target=${this.target}>
|
|
53
53
|
${this.iconPosition === "before" || this.iconPosition === "top" ? n : a}
|
|
54
|
-
<span class="${this.hideText ? "ed-u-is-vishidden ed-c-button__text" : "ed-c-button__text"}">${this.text}</span>
|
|
54
|
+
<span class="${this.hideText ? "ed-u-is-vishidden ed-c-button__text" : "ed-c-button__text"}"><slot>${this.text}</slot></span>
|
|
55
55
|
${this.iconPosition === "after" ? n : a}
|
|
56
56
|
</a>
|
|
57
57
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/footer/footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/footer/footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -1,35 +1,29 @@
|
|
|
1
1
|
import { unsafeCSS as o, html as t } from "lit";
|
|
2
2
|
import { E as r } from "../EdElement.js";
|
|
3
3
|
import "../layout-container/layout-container.js";
|
|
4
|
-
const
|
|
5
|
-
class
|
|
4
|
+
const s = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-footer{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout)}";
|
|
5
|
+
class a extends r {
|
|
6
6
|
static get styles() {
|
|
7
|
-
return o(
|
|
7
|
+
return o(s);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
10
|
const e = this.componentClassNames("ed-c-footer", {});
|
|
11
11
|
return t`
|
|
12
12
|
<footer class="${e}" role="contentinfo">
|
|
13
13
|
${this.slotNotEmpty("top") && t`<div class="ed-c-footer__top">
|
|
14
|
-
<
|
|
15
|
-
<slot name="top"></slot>
|
|
16
|
-
</ed-layout-container>
|
|
14
|
+
<slot name="top"></slot>
|
|
17
15
|
</div>`}
|
|
18
16
|
<div class="ed-c-footer__middle">
|
|
19
|
-
<
|
|
20
|
-
<slot></slot>
|
|
21
|
-
</ed-layout-container>
|
|
17
|
+
<slot></slot>
|
|
22
18
|
</div>
|
|
23
19
|
${this.slotNotEmpty("bottom") && t`<div class="ed-c-footer__bottom">
|
|
24
|
-
<
|
|
25
|
-
<slot name="bottom"></slot>
|
|
26
|
-
</ed-layout-container>
|
|
20
|
+
<slot name="bottom"></slot>
|
|
27
21
|
</div>`}
|
|
28
22
|
</footer>
|
|
29
23
|
`;
|
|
30
24
|
}
|
|
31
25
|
}
|
|
32
|
-
customElements.get("ed-footer") === void 0 && customElements.define("ed-footer",
|
|
26
|
+
customElements.get("ed-footer") === void 0 && customElements.define("ed-footer", a);
|
|
33
27
|
export {
|
|
34
|
-
|
|
28
|
+
a as EdFooter
|
|
35
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { unsafeCSS as n, html as
|
|
1
|
+
import { unsafeCSS as n, html as s } from "lit";
|
|
2
2
|
import { state as l } from "lit/decorators.js";
|
|
3
3
|
import { E as c } from "../EdElement.js";
|
|
4
|
-
const h = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-header{background:var(--ed-theme-color-background-
|
|
5
|
-
var m = Object.defineProperty,
|
|
6
|
-
for (var e = void 0, o = d.length - 1,
|
|
7
|
-
(
|
|
8
|
-
return e && m(t,
|
|
4
|
+
const h = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-header{background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout);position:relative;z-index:3}.ed-c-header__top{position:relative;top:0;width:100%;z-index:3}.ed-c-header__top-inner{width:100%}.ed-c-header__middle{position:relative;width:100%;box-shadow:var(--ed-theme-box-shadow-md)}.ed-c-header__middle-inner{display:flex;align-items:center;width:100%}";
|
|
5
|
+
var m = Object.defineProperty, v = (d, t, i, p) => {
|
|
6
|
+
for (var e = void 0, o = d.length - 1, r; o >= 0; o--)
|
|
7
|
+
(r = d[o]) && (e = r(t, i, e) || e);
|
|
8
|
+
return e && m(t, i, e), e;
|
|
9
9
|
};
|
|
10
|
-
class
|
|
10
|
+
class a extends c {
|
|
11
11
|
static get styles() {
|
|
12
12
|
return n(h);
|
|
13
13
|
}
|
|
@@ -15,35 +15,29 @@ class s extends c {
|
|
|
15
15
|
const t = this.componentClassNames("ed-c-header", {
|
|
16
16
|
"ed-is-active": this.isActive === !0
|
|
17
17
|
});
|
|
18
|
-
return
|
|
18
|
+
return s`
|
|
19
19
|
<header class="${t}">
|
|
20
|
-
${this.slotNotEmpty("top") &&
|
|
21
|
-
<ed-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
</div>
|
|
25
|
-
</ed-layout-container>
|
|
20
|
+
${this.slotNotEmpty("top") && s`<div class="ed-c-header__top">
|
|
21
|
+
<div class="ed-c-header__top-inner">
|
|
22
|
+
<slot name="top"></slot>
|
|
23
|
+
</div>
|
|
26
24
|
</div>`}
|
|
27
25
|
<div class="ed-c-header__middle">
|
|
28
|
-
<ed-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
</div>
|
|
32
|
-
</ed-layout-container>
|
|
26
|
+
<div class="ed-c-header__middle-inner">
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</div>
|
|
33
29
|
</div>
|
|
34
|
-
${this.slotNotEmpty("bottom") &&
|
|
35
|
-
<
|
|
36
|
-
<slot name="bottom"></slot>
|
|
37
|
-
</ed-layout-container>
|
|
30
|
+
${this.slotNotEmpty("bottom") && s`<div class="ed-c-header__bottom">
|
|
31
|
+
<slot name="bottom"></slot>
|
|
38
32
|
</div>`}
|
|
39
33
|
</header>
|
|
40
34
|
`;
|
|
41
35
|
}
|
|
42
36
|
}
|
|
43
|
-
|
|
37
|
+
v([
|
|
44
38
|
l()
|
|
45
|
-
],
|
|
46
|
-
customElements.get("ed-header") === void 0 && customElements.define("ed-header",
|
|
39
|
+
], a.prototype, "isActive");
|
|
40
|
+
customElements.get("ed-header") === void 0 && customElements.define("ed-header", a);
|
|
47
41
|
export {
|
|
48
|
-
|
|
42
|
+
a as EdHeader
|
|
49
43
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { unsafeCSS as e, html as o } from "lit";
|
|
2
|
-
import { E as
|
|
3
|
-
const
|
|
4
|
-
class
|
|
2
|
+
import { E as n } from "../EdElement.js";
|
|
3
|
+
const a = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-right:1rem;padding-left:1rem;margin:0 auto}';
|
|
4
|
+
class s extends n {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return e(
|
|
6
|
+
return e(a);
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
const t = this.componentClassNames("ed-l-layout-container", {});
|
|
@@ -14,7 +14,7 @@ class r extends s {
|
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
customElements.get("ed-layout-container") === void 0 && customElements.define("ed-layout-container",
|
|
17
|
+
customElements.get("ed-layout-container") === void 0 && customElements.define("ed-layout-container", s);
|
|
18
18
|
export {
|
|
19
|
-
|
|
19
|
+
s as EdLayoutContainer
|
|
20
20
|
};
|
package/components/logo/logo.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { E as
|
|
2
|
-
import { unsafeCSS as
|
|
1
|
+
import { E as i } from "../EdElement.js";
|
|
2
|
+
import { unsafeCSS as m, html as n } from "lit";
|
|
3
3
|
import { property as d } from "lit/decorators.js";
|
|
4
|
-
const
|
|
5
|
-
var
|
|
6
|
-
for (var e = void 0,
|
|
7
|
-
(l = t
|
|
8
|
-
return e &&
|
|
4
|
+
const c = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-logo{display:block;max-width:20rem}.ed-c-logo__image{display:block}";
|
|
5
|
+
var f = Object.defineProperty, g = (s, o, r, h) => {
|
|
6
|
+
for (var e = void 0, t = s.length - 1, l; t >= 0; t--)
|
|
7
|
+
(l = s[t]) && (e = l(o, r, e) || e);
|
|
8
|
+
return e && f(o, r, e), e;
|
|
9
9
|
};
|
|
10
|
-
class
|
|
10
|
+
class a extends i {
|
|
11
11
|
static get styles() {
|
|
12
|
-
return
|
|
12
|
+
return m(c);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
15
|
const o = this.componentClassNames("ed-c-logo", {});
|
|
16
|
-
return
|
|
16
|
+
return n`
|
|
17
17
|
<a href="${this.href}" class="${o}">
|
|
18
|
-
<img src="/images/120x40.svg" alt="Alt" />
|
|
18
|
+
<img class="ed-c-logo__image" src="/images/120x40.svg" alt="Alt" />
|
|
19
19
|
</a>
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
g([
|
|
24
24
|
d()
|
|
25
|
-
],
|
|
26
|
-
customElements.get("ed-logo") === void 0 && customElements.define("ed-logo",
|
|
25
|
+
], a.prototype, "href");
|
|
26
|
+
customElements.get("ed-logo") === void 0 && customElements.define("ed-logo", a);
|
|
27
27
|
export {
|
|
28
|
-
|
|
28
|
+
a as EdLogo
|
|
29
29
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { unsafeCSS as t, html as o } from "lit";
|
|
2
2
|
import { E as n } from "../EdElement.js";
|
|
3
|
-
const
|
|
4
|
-
class
|
|
3
|
+
const i = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{position:absolute;left:0;top:100%;width:100%;height:100vh;background:var(--ed-theme-color-background-knockout);overflow:auto}@media all and (min-width:48rem){:host{position:static;width:auto;height:auto;background:none;overflow:visible}}.ed-c-nav-container{display:flex;flex-direction:column;justify-content:space-between}@media all and (min-width:48rem){.ed-c-nav-container{flex-direction:row}}";
|
|
4
|
+
class a extends n {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return t(
|
|
6
|
+
return t(i);
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
const e = this.componentClassNames("ed-c-nav-container", {});
|
|
@@ -14,7 +14,7 @@ class i extends n {
|
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
customElements.get("ed-nav-container") === void 0 && customElements.define("ed-nav-container",
|
|
17
|
+
customElements.get("ed-nav-container") === void 0 && customElements.define("ed-nav-container", a);
|
|
18
18
|
export {
|
|
19
|
-
|
|
19
|
+
a as EdNavContainer
|
|
20
20
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { unsafeCSS as o, html as d } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import { E as
|
|
4
|
-
const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-primary-nav__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.ed-c-primary-nav--side-by-side .ed-c-primary-nav__list{flex-direction:row}@media all and (min-width:48rem){.ed-c-primary-nav__list{flex-direction:row}}";
|
|
5
|
-
var c = Object.defineProperty, v = (i, r,
|
|
6
|
-
for (var e = void 0,
|
|
7
|
-
(
|
|
8
|
-
return e && c(r,
|
|
2
|
+
import { property as m } from "lit/decorators.js";
|
|
3
|
+
import { E as l } from "../EdElement.js";
|
|
4
|
+
const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-primary-nav--side-by-side{--ed-primary-nav-item-border-bottom: none}.ed-c-primary-nav__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.ed-c-primary-nav--side-by-side .ed-c-primary-nav__list{flex-direction:row;gap:2rem}@media all and (min-width:48rem){.ed-c-primary-nav__list{flex-direction:row;gap:2rem}}";
|
|
5
|
+
var c = Object.defineProperty, v = (i, r, s, y) => {
|
|
6
|
+
for (var e = void 0, a = i.length - 1, t; a >= 0; a--)
|
|
7
|
+
(t = i[a]) && (e = t(r, s, e) || e);
|
|
8
|
+
return e && c(r, s, e), e;
|
|
9
9
|
};
|
|
10
|
-
class n extends
|
|
10
|
+
class n extends l {
|
|
11
11
|
static get styles() {
|
|
12
12
|
return o(p);
|
|
13
13
|
}
|
|
@@ -25,7 +25,7 @@ class n extends m {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
v([
|
|
28
|
-
|
|
28
|
+
m()
|
|
29
29
|
], n.prototype, "behavior");
|
|
30
30
|
customElements.get("ed-primary-nav") === void 0 && customElements.define("ed-primary-nav", n);
|
|
31
31
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primary-nav-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAItF,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C;;OAEG;IAEH,IAAI,SAAc;IAElB;;OAEG;IAEH,IAAI,SAAO;IAEX;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAyB;IAE1C;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,KAAK,EAAE,UAAU;IAoBtC;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAa1B,UAAU;IAIV,eAAe,CAAC,CAAC,EAAE,aAAa;IAWhC,MAAM;
|
|
1
|
+
{"version":3,"file":"primary-nav-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAItF,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C;;OAEG;IAEH,IAAI,SAAc;IAElB;;OAEG;IAEH,IAAI,SAAO;IAEX;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAyB;IAE1C;;OAEG;IAEH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,KAAK,EAAE,UAAU;IAoBtC;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAa1B,UAAU;IAIV,eAAe,CAAC,CAAC,EAAE,aAAa;IAWhC,MAAM;CA6BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}
|
|
@@ -3,13 +3,13 @@ import { unsafeCSS as h, html as l } from "lit";
|
|
|
3
3
|
import { property as n, state as p } from "lit/decorators.js";
|
|
4
4
|
import { ifDefined as v } from "lit-html/directives/if-defined.js";
|
|
5
5
|
import "../icon/icon.js";
|
|
6
|
-
const
|
|
6
|
+
const y = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-primary-nav__item{border-bottom:var(--ed-primary-nav-item-border-bottom, var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle))}@media all and (min-width:48rem){.ed-c-primary-nav__item{border-bottom:none}}.ed-c-primary-nav__link{font-family:var(--ed-theme-typography-primary-nav-default-mobile-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-mobile-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-mobile-font-size);line-height:var(--ed-theme-typography-primary-nav-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-primary-nav__link{font-family:var(--ed-theme-typography-primary-nav-default-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-font-size);line-height:var(--ed-theme-typography-primary-nav-default-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-text-transform)}}.ed-c-primary-nav__link{display:flex;align-items:center;appearance:none;background:none;border:none;border-radius:var(--ed-theme-border-radius-md);white-space:nowrap;width:100%;margin:0;padding:1rem 2rem;color:var(--ed-theme-color-content-knockout);text-decoration:none;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);cursor:pointer}.ed-c-primary-nav__link:hover,.ed-c-primary-nav__link:focus{transform:scale(1.05)}.ed-c-primary-nav__link: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-primary-nav__item--highlight .ed-c-primary-nav__link{padding:1rem 2rem;background:var(--ed-theme-color-background-brand-knockout)}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__link{background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout)}@media all and (min-width:48rem){.ed-c-primary-nav__link{padding:1rem 0}}@media all and (min-width:60rem){.ed-c-primary-nav__link{padding:1rem 0;border-bottom:none}}ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem ;margin-left:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item.ed-is-active ed-icon{transform:rotate(-180deg)}@media all and (min-width:48rem){ed-icon{margin-left:1rem}}.ed-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:transparent;opacity:0;transition:all 0s var(--ed-theme-animation-ease);z-index:-1}@media all and (min-width:48rem){.ed-c-primary-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--ed-theme-box-shadow-md)}}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--ed-theme-color-background-knockout);opacity:1;z-index:1;transition:opacity var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item--megamenu .ed-c-primary-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}";
|
|
7
7
|
var f = Object.defineProperty, r = (o, e, t, d) => {
|
|
8
|
-
for (var
|
|
9
|
-
(
|
|
10
|
-
return
|
|
8
|
+
for (var a = void 0, m = o.length - 1, s; m >= 0; m--)
|
|
9
|
+
(s = o[m]) && (a = s(e, t, a) || a);
|
|
10
|
+
return a && f(e, t, a), a;
|
|
11
11
|
};
|
|
12
|
-
class
|
|
12
|
+
class i extends c {
|
|
13
13
|
/**
|
|
14
14
|
* Initialize functions
|
|
15
15
|
*/
|
|
@@ -17,7 +17,7 @@ class a extends c {
|
|
|
17
17
|
super(), this.text = "Nav item", this.href = "#", this.iconName = "keyboard-arrow-down", this.handleOnClickOutside = this.handleOnClickOutside.bind(this), this.clickHandler = this.clickHandler.bind(this);
|
|
18
18
|
}
|
|
19
19
|
static get styles() {
|
|
20
|
-
return h(
|
|
20
|
+
return h(y);
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* Connected Callback lifecycle
|
|
@@ -78,6 +78,7 @@ class a extends c {
|
|
|
78
78
|
}
|
|
79
79
|
render() {
|
|
80
80
|
const e = this.componentClassNames("ed-c-primary-nav__item", {
|
|
81
|
+
"ed-c-primary-nav__item--highlight": this.isHighlighted === !0,
|
|
81
82
|
"ed-is-active": this.isActive === !0,
|
|
82
83
|
"ed-c-primary-nav__item--megamenu": this.megaMenu === !0
|
|
83
84
|
});
|
|
@@ -102,20 +103,23 @@ class a extends c {
|
|
|
102
103
|
}
|
|
103
104
|
r([
|
|
104
105
|
n()
|
|
105
|
-
],
|
|
106
|
+
], i.prototype, "text");
|
|
106
107
|
r([
|
|
107
108
|
n()
|
|
108
|
-
],
|
|
109
|
+
], i.prototype, "href");
|
|
109
110
|
r([
|
|
110
111
|
n()
|
|
111
|
-
],
|
|
112
|
+
], i.prototype, "iconName");
|
|
112
113
|
r([
|
|
113
114
|
n({ type: Boolean })
|
|
114
|
-
],
|
|
115
|
+
], i.prototype, "isHighlighted");
|
|
116
|
+
r([
|
|
117
|
+
n({ type: Boolean })
|
|
118
|
+
], i.prototype, "megaMenu");
|
|
115
119
|
r([
|
|
116
120
|
p()
|
|
117
|
-
],
|
|
118
|
-
customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item",
|
|
121
|
+
], i.prototype, "isActive");
|
|
122
|
+
customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item", i);
|
|
119
123
|
export {
|
|
120
|
-
|
|
124
|
+
i as EdPrimaryNavItem
|
|
121
125
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/section/section.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;
|
|
1
|
+
{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/section/section.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAcP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import { unsafeCSS as t, html as s } from "lit";
|
|
2
2
|
import { E as o } from "../EdElement.js";
|
|
3
|
-
const
|
|
4
|
-
class
|
|
3
|
+
const n = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-section{margin-bottom:2rem}.ed-c-section__body{padding-top:1rem}@media all and (min-width:60rem){.ed-c-section__body{padding-top:2rem}}";
|
|
4
|
+
class d extends o {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return t(
|
|
6
|
+
return t(n);
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
const e = this.componentClassNames("ed-c-section", {});
|
|
10
10
|
return s`
|
|
11
11
|
<section class="${e}">
|
|
12
12
|
<header class="ed-c-section-header">
|
|
13
|
-
<
|
|
14
|
-
<slot name="header"></slot>
|
|
15
|
-
</div>
|
|
13
|
+
<slot name="header"></slot>
|
|
16
14
|
</header>
|
|
17
15
|
<div class="ed-c-section__body">
|
|
18
16
|
<slot></slot>
|
|
@@ -21,7 +19,7 @@ class n extends o {
|
|
|
21
19
|
`;
|
|
22
20
|
}
|
|
23
21
|
}
|
|
24
|
-
customElements.get("ed-section") === void 0 && customElements.define("ed-section",
|
|
22
|
+
customElements.get("ed-section") === void 0 && customElements.define("ed-section", d);
|
|
25
23
|
export {
|
|
26
|
-
|
|
24
|
+
d as EdSection
|
|
27
25
|
};
|
|
@@ -1,55 +1,55 @@
|
|
|
1
1
|
import { unsafeCSS as h, html as e } from "lit";
|
|
2
|
-
import { ifDefined as
|
|
3
|
-
import { property as
|
|
4
|
-
import { E as
|
|
5
|
-
const
|
|
6
|
-
var
|
|
7
|
-
for (var t = void 0,
|
|
8
|
-
(
|
|
9
|
-
return t &&
|
|
2
|
+
import { ifDefined as r } from "lit-html/directives/if-defined.js";
|
|
3
|
+
import { property as n } from "lit/decorators.js";
|
|
4
|
+
import { E as p } from "../EdElement.js";
|
|
5
|
+
const y = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-u-is-hidden{display:none!important;visibility:hidden!important}.ed-u-is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@media all and (min-width:23.4375rem){.ed-u-hide-sm{display:none!important}}@media all and (min-width:48rem){.ed-u-hide-md{display:none!important}}@media all and (min-width:60rem){.ed-u-hide-lg{display:none!important}}@media all and (min-width:75rem){.ed-u-hide-xl{display:none!important}}@media all and (max-width:23.4375rem){.ed-u-show-sm{display:none!important}}@media all and (max-width:48rem){.ed-u-show-md{display:none!important}}@media all and (max-width:60rem){.ed-u-show-lg{display:none!important}}@media all and (max-width:75rem){.ed-u-show-xl{display:none!important}}.ed-c-utility-nav__item{margin:0;padding:0}.ed-c-utility-nav__link{display:flex;font-family:var(--ed-theme-typography-primary-nav-default-mobile-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-mobile-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-mobile-font-size);line-height:var(--ed-theme-typography-primary-nav-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-utility-nav__link{font-family:var(--ed-theme-typography-primary-nav-default-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-font-size);line-height:var(--ed-theme-typography-primary-nav-default-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-text-transform)}}.ed-c-utility-nav__link{border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--ed-theme-color-content-knockout);cursor:pointer;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-utility-nav__link:hover,.ed-c-utility-nav__link:focus{transform:scale(1.05)}.ed-c-utility-nav__link: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-icon{--ed-icon-height: 1.5rem ;--ed-icon-width: 1.5rem }.ed-c-utility-nav__text+ed-icon{margin-left:.5rem}ed-icon+.ed-c-utility-nav__text{margin-left:.5rem}';
|
|
6
|
+
var c = Object.defineProperty, o = (d, a, m, f) => {
|
|
7
|
+
for (var t = void 0, l = d.length - 1, s; l >= 0; l--)
|
|
8
|
+
(s = d[l]) && (t = s(a, m, t) || t);
|
|
9
|
+
return t && c(a, m, t), t;
|
|
10
10
|
};
|
|
11
|
-
class i extends
|
|
11
|
+
class i extends p {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.iconPosition = void 0;
|
|
14
14
|
}
|
|
15
15
|
static get styles() {
|
|
16
|
-
return h(
|
|
16
|
+
return h(y);
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
const
|
|
19
|
+
const a = this.componentClassNames("ed-c-utility-nav__item", {});
|
|
20
20
|
return this.href ? e`
|
|
21
|
-
<li class="${
|
|
21
|
+
<li class="${a}">
|
|
22
22
|
<a href="${this.href}" class="ed-c-utility-nav__link">
|
|
23
|
-
${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${
|
|
23
|
+
${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${r(this.iconName)}"></ed-icon>` : e``}
|
|
24
24
|
<span class="${this.hideText ? "ed-u-is-vishidden ed-c-utility-nav__text" : "ed-c-utility-nav__text"}">${this.text}</span>
|
|
25
|
-
${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${
|
|
25
|
+
${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${r(this.iconName)}"></ed-icon>` : e``}
|
|
26
26
|
</a>
|
|
27
27
|
</li>
|
|
28
28
|
` : e`
|
|
29
|
-
<li class="${
|
|
29
|
+
<li class="${a}">
|
|
30
30
|
<button class="ed-c-utility-nav__link">
|
|
31
|
-
${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${
|
|
31
|
+
${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${r(this.iconName)}"></ed-icon>` : e``}
|
|
32
32
|
<span class="${this.hideText ? "ed-u-is-vishidden ed-c-utility-nav__text" : "ed-c-utility-nav__text"}">${this.text}</span>
|
|
33
|
-
${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${
|
|
33
|
+
${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${r(this.iconName)}"></ed-icon>` : e``}
|
|
34
34
|
</button>
|
|
35
35
|
</li>
|
|
36
36
|
`;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
o([
|
|
40
|
-
|
|
40
|
+
n({ type: Boolean })
|
|
41
41
|
], i.prototype, "hideText");
|
|
42
42
|
o([
|
|
43
|
-
|
|
43
|
+
n()
|
|
44
44
|
], i.prototype, "href");
|
|
45
45
|
o([
|
|
46
|
-
|
|
46
|
+
n()
|
|
47
47
|
], i.prototype, "iconName");
|
|
48
48
|
o([
|
|
49
|
-
|
|
49
|
+
n()
|
|
50
50
|
], i.prototype, "iconPosition");
|
|
51
51
|
o([
|
|
52
|
-
|
|
52
|
+
n()
|
|
53
53
|
], i.prototype, "text");
|
|
54
54
|
customElements.get("ed-utility-nav-item") === void 0 && customElements.define("ed-utility-nav-item", i);
|
|
55
55
|
export {
|