@jotyping/jap-ds 0.1.2-alpha → 0.1.4-alpha
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/dist/assets/example.png +0 -0
- package/dist/components/button/jap-button.js +21 -18
- package/dist/components/button/jap-button.js.map +1 -1
- package/dist/components/flash/jap-flash.js +8 -8
- package/dist/components/flash/jap-flash.js.map +1 -1
- package/dist/components/flash/jap-flash.scss.js +1 -1
- package/dist/components/footer/jap-footer.js +22 -29
- package/dist/components/footer/jap-footer.js.map +1 -1
- package/dist/components/footer/jap-footer.scss.js +1 -1
- package/dist/components/header/jap-header.js +6 -6
- package/dist/components/header/jap-header.js.map +1 -1
- package/dist/components/header/jap-header.scss.js +1 -1
- package/dist/components/heading/jap-heading.js +1 -1
- package/dist/components/heading/jap-heading.js.map +1 -1
- package/dist/components/icon/icon-data.js +2 -2
- package/dist/components/icon/icon-data.js.map +1 -1
- package/dist/components/icon/jap-icon.js +1 -1
- package/dist/components/icon/jap-icon.js.map +1 -1
- package/dist/components/icon-button/jap-icon-button.js +1 -1
- package/dist/components/icon-button/jap-icon-button.js.map +1 -1
- package/dist/components/image-button/jap-image-button.js +136 -0
- package/dist/components/image-button/jap-image-button.js.map +1 -0
- package/dist/components/image-button/jap-image-button.scss.js +5 -0
- package/dist/components/image-button/jap-image-button.scss.js.map +1 -0
- package/dist/components/modal/jap-modal.js +1 -1
- package/dist/components/modal/jap-modal.js.map +1 -1
- package/dist/components/navigation/jap-navigation.js +53 -21
- package/dist/components/navigation/jap-navigation.js.map +1 -1
- package/dist/components/tag/jap-tag.js +1 -1
- package/dist/components/tag/jap-tag.js.map +1 -1
- package/dist/index.js +14 -14
- package/package.json +6 -6
- package/dist/components/image-link/jap-image-link.js +0 -63
- package/dist/components/image-link/jap-image-link.js.map +0 -1
- package/dist/components/image-link/jap-image-link.scss.js +0 -5
- package/dist/components/image-link/jap-image-link.scss.js.map +0 -1
|
Binary file
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as u, LitElement as a, html as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
+
import { property as n, customElement as c } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
3
|
import "../flash/jap-flash.js";
|
|
4
4
|
import "../footer/jap-footer.js";
|
|
5
5
|
import "../header/jap-header.js";
|
|
6
6
|
import "../heading/jap-heading.js";
|
|
7
7
|
import "../icon/jap-icon.js";
|
|
8
8
|
import "../icon-button/jap-icon-button.js";
|
|
9
|
-
import "../image-
|
|
9
|
+
import "../image-button/jap-image-button.js";
|
|
10
10
|
import "../link/jap-link.js";
|
|
11
11
|
import "../modal/jap-modal.js";
|
|
12
12
|
import "../navigation/jap-navigation.js";
|
|
13
13
|
import "../tag/jap-tag.js";
|
|
14
|
-
import
|
|
15
|
-
var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor,
|
|
16
|
-
for (var t = o > 1 ? void 0 : o ? _(
|
|
17
|
-
(s =
|
|
18
|
-
return o && t && v(
|
|
14
|
+
import y from "./jap-button.scss.js";
|
|
15
|
+
var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (l, e, p, o) => {
|
|
16
|
+
for (var t = o > 1 ? void 0 : o ? _(e, p) : e, m = l.length - 1, s; m >= 0; m--)
|
|
17
|
+
(s = l[m]) && (t = (o ? s(e, p, t) : s(t)) || t);
|
|
18
|
+
return o && t && v(e, p, t), t;
|
|
19
19
|
};
|
|
20
|
-
let
|
|
20
|
+
let r = class extends a {
|
|
21
21
|
constructor() {
|
|
22
|
-
super(...arguments), this.type = "primary";
|
|
22
|
+
super(...arguments), this.type = "primary", this.active = !1;
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
return f`
|
|
@@ -29,14 +29,17 @@ let p = class extends u {
|
|
|
29
29
|
`;
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
],
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
],
|
|
32
|
+
r.styles = u(y);
|
|
33
|
+
i([
|
|
34
|
+
n({ type: String, reflect: !0 })
|
|
35
|
+
], r.prototype, "type", 2);
|
|
36
|
+
i([
|
|
37
|
+
n({ type: Boolean, reflect: !0 })
|
|
38
|
+
], r.prototype, "active", 2);
|
|
39
|
+
r = i([
|
|
40
|
+
c("jap-button")
|
|
41
|
+
], r);
|
|
39
42
|
export {
|
|
40
|
-
|
|
43
|
+
r as JapButton
|
|
41
44
|
};
|
|
42
45
|
//# sourceMappingURL=jap-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-button.js","sources":["../../../src/components/button/jap-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-button.js","sources":["../../../src/components/button/jap-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"@/components\";\nimport style from \"./jap-button.scss?inline\";\n\n@customElement(\"jap-button\")\nexport class JapButton extends LitElement {\n static styles = unsafeCSS(style);\n\n /**\n * Button type, can be \"primary\" or \"secondary\".\n */\n @property({ type: String, reflect: true })\n type: \"primary\" | \"secondary\" = \"primary\";\n\n /**\n * Active state\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n render() {\n return html`\n <button class=${this.type}>\n <slot></slot>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-button\": JapButton;\n }\n}\n"],"names":["JapButton","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOL,KAAA,OAAgC,WAMhC,KAAA,SAAS;AAAA,EAAA;AAAA,EAET,SAAS;AACP,WAAOC;AAAA,sBACW,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAI7B;AACF;AAtBaF,EACJ,SAASG,EAAUC,CAAK;AAM/BC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAOX,WAAA,QAAA,CAAA;AAMAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,UAAA,CAAA;AAbWA,IAANK,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdP,CAAA;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { LitElement as h, html as u, unsafeCSS as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
2
|
import { property as a, customElement as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
3
|
import y from "./jap-flash.scss.js";
|
|
4
|
-
import { classMap as
|
|
4
|
+
import { classMap as m } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
|
|
5
5
|
import "../button/jap-button.js";
|
|
6
6
|
import "../footer/jap-footer.js";
|
|
7
7
|
import "../header/jap-header.js";
|
|
8
8
|
import "../heading/jap-heading.js";
|
|
9
9
|
import "../icon/jap-icon.js";
|
|
10
10
|
import "../icon-button/jap-icon-button.js";
|
|
11
|
-
import "../image-
|
|
11
|
+
import "../image-button/jap-image-button.js";
|
|
12
12
|
import "../link/jap-link.js";
|
|
13
13
|
import "../modal/jap-modal.js";
|
|
14
14
|
import "../navigation/jap-navigation.js";
|
|
@@ -16,8 +16,8 @@ import "../tag/jap-tag.js";
|
|
|
16
16
|
import { SignalWatcher as d } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
17
17
|
import { breakpoint as c } from "../../stores/breakpoint-store.js";
|
|
18
18
|
var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (s, r, i, p) => {
|
|
19
|
-
for (var t = p > 1 ? void 0 : p ? z(r, i) : r, n = s.length - 1,
|
|
20
|
-
(
|
|
19
|
+
for (var t = p > 1 ? void 0 : p ? z(r, i) : r, n = s.length - 1, l; n >= 0; n--)
|
|
20
|
+
(l = s[n]) && (t = (p ? l(r, i, t) : l(t)) || t);
|
|
21
21
|
return p && t && g(r, i, t), t;
|
|
22
22
|
};
|
|
23
23
|
let o = class extends d(h) {
|
|
@@ -37,15 +37,15 @@ let o = class extends d(h) {
|
|
|
37
37
|
[this.size === "auto" ? c.get() : this.size]: !0
|
|
38
38
|
};
|
|
39
39
|
return u`
|
|
40
|
-
<div class=${
|
|
41
|
-
<div class=${
|
|
40
|
+
<div class=${m(s)}>
|
|
41
|
+
<div class=${m(r)}>
|
|
42
42
|
<slot name="title"></slot>
|
|
43
43
|
</div>
|
|
44
|
-
<div class=${
|
|
44
|
+
<div class=${m(i)}>
|
|
45
45
|
<jap-icon
|
|
46
46
|
iconName=${this.iconName}
|
|
47
47
|
color=${this.color}
|
|
48
|
-
size=${this.size === "
|
|
48
|
+
size=${this.size === "l" || c.get() === "l" ? "72px" : "48px"}
|
|
49
49
|
></jap-icon>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-flash.js","sources":["../../../src/components/flash/jap-flash.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-flash.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-flash.js","sources":["../../../src/components/flash/jap-flash.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-flash.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"@/components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\n\n@customElement(\"jap-flash\")\nexport class JapFlash extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n @property({ type: String }) size: \"s\" | \"m\" | \"l\" | \"auto\" = \"auto\";\n @property({ type: String }) color: \"red\" | \"purple\" | \"blue\" = \"red\";\n @property({ type: String }) iconPosition: \"top\" | \"bottom\" = \"bottom\";\n @property({ type: String }) iconName:\n | \"fire\"\n | \"puzzle\"\n | \"lightning\"\n | \"arrow-right\"\n | \"arrow-circle-left\"\n | \"burger-menu\"\n | \"chat\" = \"fire\";\n\n render() {\n const flashWrapperClasses = {\n \"flash-wrapper\": true,\n \"upside-down\": this.iconPosition === \"top\",\n };\n\n const titleWrapperClasses = {\n \"title-wrapper\": true,\n [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n [this.color]: true,\n };\n\n const iconWrapperClasses = {\n \"icon-wrapper\": true,\n [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n };\n\n return html`\n <div class=${classMap(flashWrapperClasses)}>\n <div class=${classMap(titleWrapperClasses)}>\n <slot name=\"title\"></slot>\n </div>\n <div class=${classMap(iconWrapperClasses)}>\n <jap-icon\n iconName=${this.iconName}\n color=${this.color}\n size=${this.size === \"l\" || breakpoint.get() === \"l\"\n ? \"72px\"\n : \"48px\"}\n ></jap-icon>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-flash\": JapFlash;\n }\n}\n"],"names":["JapFlash","SignalWatcher","LitElement","flashWrapperClasses","titleWrapperClasses","breakpoint","iconWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAuBC,EAAcC,CAAU,EAAE;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,OAAiC,QACjC,KAAA,QAAmC,OACnC,KAAA,eAAiC,UACjC,KAAA,WAOf;AAAA,EAAA;AAAA,EAEb,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,eAAe,KAAK,iBAAiB;AAAA,IAAA,GAGjCC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,QAAQ,KAAK,IAAI,GAAG;AAAA,MACvD,CAAC,KAAK,KAAK,GAAG;AAAA,IAAA,GAGVC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA;AAGzD,WAAOE;AAAA,mBACQC,EAASL,CAAmB,CAAC;AAAA,qBAC3BK,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA,qBAG7BI,EAASF,CAAkB,CAAC;AAAA;AAAA,uBAE1B,KAAK,QAAQ;AAAA,oBAChB,KAAK,KAAK;AAAA,mBACX,KAAK,SAAS,OAAOD,EAAW,UAAU,MAC7C,SACA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AACF;AAjDaL,EACJ,SAASS,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfZ,EAGiB,WAAA,QAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfZ,EAIiB,WAAA,SAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfZ,EAKiB,WAAA,gBAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfZ,EAMiB,WAAA,YAAA,CAAA;AANjBA,IAANW,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbb,CAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.flash-wrapper{display:flex;flex-direction:column;gap:15px}.flash-wrapper.upside-down{flex-direction:column-reverse}.title-wrapper.
|
|
1
|
+
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.flash-wrapper{display:flex;flex-direction:column;gap:15px}.flash-wrapper.upside-down{flex-direction:column-reverse}.title-wrapper.l{font-family:Satoshi-Italic,sans-serif;font-size:46px;line-height:50px}.title-wrapper.m,.title-wrapper.s{font-family:Satoshi-Italic,sans-serif;font-size:34px;line-height:36px}.title-wrapper.red{color:#ff4d2a}.title-wrapper.purple{color:#bf2aff}.title-wrapper.blue{color:#2a91ff}.icon-wrapper{color:#3a3a3a}.icon-wrapper.l{width:72px;height:72px}.icon-wrapper.m,.icon-wrapper.s{width:52px;height:52px}';
|
|
2
2
|
export {
|
|
3
3
|
t as default
|
|
4
4
|
};
|
|
@@ -1,50 +1,43 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { customElement as
|
|
3
|
-
import
|
|
1
|
+
import { LitElement as a, html as l, unsafeCSS as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
+
import { customElement as n } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
|
+
import c from "./jap-footer.scss.js";
|
|
4
|
+
import { SignalWatcher as u } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
5
|
+
import { breakpoint as v } from "../../stores/breakpoint-store.js";
|
|
6
|
+
import { classMap as g } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
|
|
4
7
|
import "../button/jap-button.js";
|
|
5
8
|
import "../flash/jap-flash.js";
|
|
6
9
|
import "../header/jap-header.js";
|
|
7
10
|
import "../heading/jap-heading.js";
|
|
8
11
|
import "../icon/jap-icon.js";
|
|
9
12
|
import "../icon-button/jap-icon-button.js";
|
|
10
|
-
import "../image-
|
|
13
|
+
import "../image-button/jap-image-button.js";
|
|
11
14
|
import "../link/jap-link.js";
|
|
12
15
|
import "../modal/jap-modal.js";
|
|
13
16
|
import "../navigation/jap-navigation.js";
|
|
14
17
|
import "../tag/jap-tag.js";
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
for (var r = m > 1 ? void 0 : m ? k(a, s) : a, o = t.length - 1, n; o >= 0; o--)
|
|
20
|
-
(n = t[o]) && (r = n(r) || r);
|
|
21
|
-
return r;
|
|
18
|
+
var _ = Object.getOwnPropertyDescriptor, d = (r, p, s, m) => {
|
|
19
|
+
for (var t = m > 1 ? void 0 : m ? _(p, s) : p, o = r.length - 1, i; o >= 0; o--)
|
|
20
|
+
(i = r[o]) && (t = i(t) || t);
|
|
21
|
+
return t;
|
|
22
22
|
};
|
|
23
|
-
let
|
|
23
|
+
let e = class extends u(a) {
|
|
24
24
|
render() {
|
|
25
|
-
const
|
|
25
|
+
const r = {
|
|
26
26
|
"footer-wrapper": !0,
|
|
27
|
-
[
|
|
27
|
+
[v.get()]: !0
|
|
28
28
|
};
|
|
29
|
-
return
|
|
30
|
-
<div class=${
|
|
31
|
-
<
|
|
32
|
-
<jap-link slot="button">Impressum</jap-link>
|
|
33
|
-
<div>Impressum content</div>
|
|
34
|
-
</jap-modal>
|
|
35
|
-
${p.get() !== "s" ? e`<jap-icon iconName="circle"></jap-icon>` : l}
|
|
36
|
-
<jap-link href="#" target="_blank">Github</jap-link>
|
|
37
|
-
${p.get() !== "s" ? e`<jap-icon iconName="circle"></jap-icon>` : l}
|
|
38
|
-
<jap-link href="#" target="_blank">Contact</jap-link>
|
|
29
|
+
return l`
|
|
30
|
+
<div class=${g(r)}>
|
|
31
|
+
<slot></slot>
|
|
39
32
|
</div>
|
|
40
33
|
`;
|
|
41
34
|
}
|
|
42
35
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
],
|
|
36
|
+
e.styles = f(c);
|
|
37
|
+
e = d([
|
|
38
|
+
n("jap-footer")
|
|
39
|
+
], e);
|
|
47
40
|
export {
|
|
48
|
-
|
|
41
|
+
e as JapFooter
|
|
49
42
|
};
|
|
50
43
|
//# sourceMappingURL=jap-footer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-footer.js","sources":["../../../src/components/footer/jap-footer.ts"],"sourcesContent":["import { LitElement, html,
|
|
1
|
+
{"version":3,"file":"jap-footer.js","sources":["../../../src/components/footer/jap-footer.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jap-footer.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"@/components\";\n\n@customElement(\"jap-footer\")\nexport class JapFooter extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n render() {\n const footerWrapperClass = {\n \"footer-wrapper\": true,\n [breakpoint.get()]: true,\n };\n\n return html`\n <div class=${classMap(footerWrapperClass)}>\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-footer\": JapFooter;\n }\n}\n"],"names":["JapFooter","SignalWatcher","LitElement","footerWrapperClass","breakpoint","html","classMap","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAwBC,EAAcC,CAAU,EAAE;AAAA,EAGvD,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA,EAI7C;AACF;AAfaH,EACJ,SAASO,EAAUC,CAAK;AADpBR,IAANS,EAAA;AAAA,EADNC,EAAc,YAAY;AAAA,GACdV,CAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.footer-wrapper{display:flex;justify-content:start;border-top:2px solid #3a3a3a;font-family:Satoshi-Regular,sans-serif;font-size:22px;line-height:32px}.footer-wrapper.s{flex-direction:column;justify-content:center;width:calc(100% - 64px);margin:
|
|
1
|
+
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.footer-wrapper{display:flex;justify-content:start;border-top:2px solid #3a3a3a;font-family:Satoshi-Regular,sans-serif;font-size:22px;line-height:32px}.footer-wrapper.s{flex-direction:column;justify-content:center;width:calc(100% - 64px);margin:22px 32px 28px;height:140px}.footer-wrapper.m{flex-direction:row;align-items:center;width:calc(100% - 80px);margin:22px 40px 28px;height:78px}.footer-wrapper.l{flex-direction:row;align-items:center;width:calc(100% - 192px);margin:22px 96px 28px;height:94px}.footer-wrapper.m ::slotted(*),.footer-wrapper.l ::slotted(*){display:inline-flex;align-items:center}.footer-wrapper.m ::slotted(*:not(:first-child)):before,.footer-wrapper.l ::slotted(*:not(:first-child)):before{content:"";width:7px;height:7px;background:#3a3a3a;border-radius:50%;margin:0 12px;flex-shrink:0}.dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#3a3a3a}';
|
|
2
2
|
export {
|
|
3
3
|
t as default
|
|
4
4
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { LitElement as n, nothing as c, html as s, unsafeCSS as
|
|
2
|
-
import { state as
|
|
1
|
+
import { LitElement as n, nothing as c, html as s, unsafeCSS as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
+
import { state as h, customElement as u } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
3
|
import f from "./jap-header.scss.js";
|
|
4
4
|
import "../button/jap-button.js";
|
|
5
5
|
import "../flash/jap-flash.js";
|
|
@@ -7,7 +7,7 @@ import "../footer/jap-footer.js";
|
|
|
7
7
|
import "../heading/jap-heading.js";
|
|
8
8
|
import "../icon/jap-icon.js";
|
|
9
9
|
import "../icon-button/jap-icon-button.js";
|
|
10
|
-
import "../image-
|
|
10
|
+
import "../image-button/jap-image-button.js";
|
|
11
11
|
import "../link/jap-link.js";
|
|
12
12
|
import "../modal/jap-modal.js";
|
|
13
13
|
import "../navigation/jap-navigation.js";
|
|
@@ -32,7 +32,7 @@ let p = class extends w(n) {
|
|
|
32
32
|
return s`
|
|
33
33
|
<div class=${g(t)}>
|
|
34
34
|
<div class="logo">jap</div>
|
|
35
|
-
${a.get() !== "s" ? s`<div>
|
|
35
|
+
${a.get() !== "s" ? s`<div class="navigation-slot-wrapper">
|
|
36
36
|
<slot></slot>
|
|
37
37
|
</div>` : s`<div class="burger-wrapper">
|
|
38
38
|
<jap-icon-button
|
|
@@ -56,9 +56,9 @@ let p = class extends w(n) {
|
|
|
56
56
|
`;
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
p.styles =
|
|
59
|
+
p.styles = v(f);
|
|
60
60
|
d([
|
|
61
|
-
|
|
61
|
+
h()
|
|
62
62
|
], p.prototype, "showModal", 2);
|
|
63
63
|
p = d([
|
|
64
64
|
u("jap-header")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-header.js","sources":["../../../src/components/header/jap-header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport style from \"./jap-header.scss?inline\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-header.js","sources":["../../../src/components/header/jap-header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport style from \"./jap-header.scss?inline\";\nimport \"@/components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n@customElement(\"jap-header\")\nexport class JapHeader extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n @state() private showModal = false;\n\n render() {\n const headerWrapperClass = {\n \"header-wrapper\": true,\n [breakpoint.get()]: true,\n };\n\n return html`\n <div class=${classMap(headerWrapperClass)}>\n <div class=\"logo\">jap</div>\n ${breakpoint.get() !== \"s\"\n ? html`<div class=\"navigation-slot-wrapper\">\n <slot></slot>\n </div>`\n : html`<div class=\"burger-wrapper\">\n <jap-icon-button\n iconName=\"burger-menu\"\n @click=${() => {\n this.showModal = !this.showModal;\n console.log(\"Modal state:\", this.showModal);\n }}\n ></jap-icon-button>\n </div>`}\n ${breakpoint.get() === \"l\"\n ? html`<div class=\"empty-div-desktop\"></div>`\n : nothing}\n </div>\n <jap-modal\n type=\"header\"\n .show=${this.showModal && breakpoint.get() === \"s\"}\n id=\"modal\"\n >\n <div class=\"nav-wrapper\">\n <slot></slot>\n </div>\n </jap-modal>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-header\": JapHeader;\n }\n}\n"],"names":["JapHeader","SignalWatcher","LitElement","headerWrapperClass","breakpoint","html","classMap","nothing","unsafeCSS","style","__decorateClass","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAwBC,EAAcC,CAAU,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGI,KAAQ,YAAY;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA,UAErCC,EAAW,UAAU,MACnBC;AAAA;AAAA,sBAGAA;AAAA;AAAA;AAAA,yBAGa,MAAM;AACb,WAAK,YAAY,CAAC,KAAK,WACvB,QAAQ,IAAI,gBAAgB,KAAK,SAAS;AAAA,IAC5C,CAAC;AAAA;AAAA,mBAEE;AAAA,UACTD,EAAW,IAAA,MAAU,MACnBC,2CACAE,CAAO;AAAA;AAAA;AAAA;AAAA,gBAIH,KAAK,aAAaH,EAAW,IAAA,MAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxD;AACF;AA1CaJ,EACJ,SAASQ,EAAUC,CAAK;AAEdC,EAAA;AAAA,EAAhBC,EAAA;AAAM,GAHIX,EAGM,WAAA,aAAA,CAAA;AAHNA,IAANU,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdZ,CAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between
|
|
1
|
+
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between}.header-wrapper.s{width:calc(100% - 64px);margin:0 32px;height:225px}.header-wrapper.m{width:calc(100% - 80px);margin:0 40px;height:225px}.header-wrapper.l{width:calc(100% - 192px);margin:0 96px;height:320px}.burger-wrapper{display:flex;align-items:center;justify-content:center;height:168px}.nav-wrapper{width:100%;display:flex;justify-content:center;padding-bottom:100px}.navigation-slot-wrapper{display:flex;align-items:center;height:168px}.empty-div-desktop{width:88px}.logo{font-family:Satoshi-Black,sans-serif;font-size:30px;line-height:168px;color:#3a3a3a;cursor:pointer}';
|
|
2
2
|
export {
|
|
3
3
|
t as default
|
|
4
4
|
};
|
|
@@ -10,7 +10,7 @@ import "../footer/jap-footer.js";
|
|
|
10
10
|
import "../header/jap-header.js";
|
|
11
11
|
import "../icon/jap-icon.js";
|
|
12
12
|
import "../icon-button/jap-icon-button.js";
|
|
13
|
-
import "../image-
|
|
13
|
+
import "../image-button/jap-image-button.js";
|
|
14
14
|
import "../link/jap-link.js";
|
|
15
15
|
import "../modal/jap-modal.js";
|
|
16
16
|
import "../navigation/jap-navigation.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-heading.js","sources":["../../../src/components/heading/jap-heading.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-heading.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"
|
|
1
|
+
{"version":3,"file":"jap-heading.js","sources":["../../../src/components/heading/jap-heading.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-heading.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\nimport \"@/components\";\n\n@customElement(\"jap-heading\")\nexport class JapHeading extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n @property({ type: String }) size: \"l\" | \"m\" | \"s\" | \"auto\" = \"auto\";\n\n render() {\n const titleWrapperClasses = {\n \"title-wrapper\": true,\n [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n };\n\n const subTitleWrapperClasses = {\n \"subtitle-wrapper\": true,\n [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n };\n\n return html`\n <div class=\"heading-wrapper\">\n <div class=${classMap(titleWrapperClasses)}>\n <slot name=\"title-line-one\"></slot>\n <div class=\"title-line-two-wrapper\">\n <slot name=\"title-line-two\"></slot>\n <div class=${classMap(subTitleWrapperClasses)}>\n <slot name=\"subtitle-right\"></slot>\n </div>\n </div>\n </div>\n <div class=${classMap(subTitleWrapperClasses)}>\n <slot name=\"subtitle-bottom\"></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-heading\": JapHeading;\n }\n}\n"],"names":["JapHeading","SignalWatcher","LitElement","titleWrapperClasses","breakpoint","subTitleWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAyBC,EAAcC,CAAU,EAAE;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,OAAiC;AAAA,EAAA;AAAA,EAE7D,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA,GAGnDC,IAAyB;AAAA,MAC7B,oBAAoB;AAAA,MACpB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA;AAGzD,WAAOE;AAAA;AAAA,qBAEUC,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIzBI,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKpCE,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnD;AACF;AAjCaL,EACJ,SAASQ,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfX,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANU,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfZ,CAAA;"}
|
|
@@ -19,8 +19,8 @@ const o = {
|
|
|
19
19
|
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
20
20
|
</svg>
|
|
21
21
|
`,
|
|
22
|
-
"arrow-right": `<svg xmlns="http://www.w3.org/2000/svg"
|
|
23
|
-
<path
|
|
22
|
+
"arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
|
23
|
+
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
|
|
24
24
|
</svg>
|
|
25
25
|
`,
|
|
26
26
|
"burger-menu": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="size-6">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-data.js","sources":["../../../src/components/icon/icon-data.ts"],"sourcesContent":["const icons = {\n fire: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\" />\n </svg>`,\n lightning: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\" />\n</svg>\n`,\n chat: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\" />\n</svg>\n`,\n puzzle: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z\" />\n</svg>\n`,\n \"arrow-circle-left\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n</svg>\n`,\n \"arrow-right\": `<svg xmlns=\"http://www.w3.org/2000/svg\"
|
|
1
|
+
{"version":3,"file":"icon-data.js","sources":["../../../src/components/icon/icon-data.ts"],"sourcesContent":["const icons = {\n fire: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\" />\n </svg>`,\n lightning: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\" />\n</svg>\n`,\n chat: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\" />\n</svg>\n`,\n puzzle: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z\" />\n</svg>\n`,\n \"arrow-circle-left\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n</svg>\n`,\n \"arrow-right\": `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-5\">\n <path fill-rule=\"evenodd\" d=\"M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z\" clip-rule=\"evenodd\" />\n</svg>\n`,\n \"burger-menu\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.6\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 8h12M6 16h12\" />\n</svg>\n`,\n x: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n</svg>\n`,\n circle: `<svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n </svg>\n`,\n};\n\nexport { icons };\n"],"names":["icons"],"mappings":"AAAA,MAAMA,IAAQ;AAAA,EACZ,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,WAAW;AAAA;AAAA;AAAA;AAAA,EAIX,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIR,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAIrB,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV;"}
|
|
@@ -10,7 +10,7 @@ import "../footer/jap-footer.js";
|
|
|
10
10
|
import "../header/jap-header.js";
|
|
11
11
|
import "../heading/jap-heading.js";
|
|
12
12
|
import "../icon-button/jap-icon-button.js";
|
|
13
|
-
import "../image-
|
|
13
|
+
import "../image-button/jap-image-button.js";
|
|
14
14
|
import "../link/jap-link.js";
|
|
15
15
|
import "../modal/jap-modal.js";
|
|
16
16
|
import "../navigation/jap-navigation.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-icon.js","sources":["../../../src/components/icon/jap-icon.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { icons } from \"./icon-data.ts\";\nimport style from \"./jap-icon.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-icon.js","sources":["../../../src/components/icon/jap-icon.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { icons } from \"./icon-data.ts\";\nimport style from \"./jap-icon.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport \"@/components\";\n\nexport type IconName =\n | \"circle\"\n | \"x\"\n | \"fire\"\n | \"puzzle\"\n | \"lightning\"\n | \"arrow-right\"\n | \"arrow-circle-left\"\n | \"burger-menu\"\n | \"chat\";\n\n@customElement(\"jap-icon\")\nexport class JapIcon extends LitElement {\n static styles = unsafeCSS(style);\n\n @property({ type: String }) iconName: IconName = \"fire\";\n\n @property({ type: String }) size:\n | \"72px\"\n | \"56px\"\n | \"48px\"\n | \"40px\"\n | \"32px\"\n | \"24px\"\n | \"16px\" = \"48px\";\n\n @property({ type: String }) color:\n | \"red\"\n | \"purple\"\n | \"blue\"\n | \"black\"\n | \"white\"\n | \"neutral-200\"\n | \"neutral-400\"\n | \"neutral-600\" = \"black\";\n\n render() {\n const iconWrapperClasses = {\n \"icon-wrapper\": true,\n [this.color]: true,\n };\n\n return html`\n <div\n class=${classMap(iconWrapperClasses)}\n style=\"height: ${this.size}; width: ${this.size};\"\n >\n ${unsafeHTML(icons[this.iconName])}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-icon\": JapIcon;\n }\n}\n"],"names":["JapIcon","LitElement","iconWrapperClasses","html","classMap","unsafeHTML","icons","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,WAAqB,QAErB,KAAA,OAOf,QAEe,KAAA,QAQR;AAAA,EAAA;AAAA,EAEpB,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,KAAK,GAAG;AAAA,IAAA;AAGhB,WAAOC;AAAA;AAAA,gBAEKC,EAASF,CAAkB,CAAC;AAAA,yBACnB,KAAK,IAAI,YAAY,KAAK,IAAI;AAAA;AAAA,UAE7CG,EAAWC,EAAM,KAAK,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,EAGxC;AACF;AAvCaN,EACJ,SAASO,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfV,EAGiB,WAAA,YAAA,CAAA;AAEAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfV,EAKiB,WAAA,QAAA,CAAA;AASAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfV,EAciB,WAAA,SAAA,CAAA;AAdjBA,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}
|
|
@@ -7,7 +7,7 @@ import "../footer/jap-footer.js";
|
|
|
7
7
|
import "../header/jap-header.js";
|
|
8
8
|
import "../heading/jap-heading.js";
|
|
9
9
|
import "../icon/jap-icon.js";
|
|
10
|
-
import "../image-
|
|
10
|
+
import "../image-button/jap-image-button.js";
|
|
11
11
|
import "../link/jap-link.js";
|
|
12
12
|
import "../modal/jap-modal.js";
|
|
13
13
|
import "../navigation/jap-navigation.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-icon-button.js","sources":["../../../src/components/icon-button/jap-icon-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-icon-button.scss?inline\";\nimport { IconName } from \"../icon/jap-icon.ts\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-icon-button.js","sources":["../../../src/components/icon-button/jap-icon-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-icon-button.scss?inline\";\nimport { IconName } from \"../icon/jap-icon.ts\";\nimport \"@/components\";\n\n@customElement(\"jap-icon-button\")\nexport class JapIconButton extends LitElement {\n static styles = unsafeCSS(style);\n\n /**\n * Button type, can be \"primary\" or \"secondary\".\n */\n @property({ type: String }) type: \"borderless\" | \"border\" = \"borderless\";\n\n /**\n * Icon name.\n */\n @property({ type: String }) iconName: IconName = \"puzzle\";\n\n /**\n * Icon color.\n */\n @property({ type: String }) color:\n | \"red\"\n | \"purple\"\n | \"blue\"\n | \"black\"\n | \"white\"\n | \"neutral-200\"\n | \"neutral-400\"\n | \"neutral-600\" = \"black\";\n\n render() {\n return html`\n <button class=${this.type}>\n <jap-icon\n iconName=${this.iconName}\n color=${this.color}\n size=${this.type === \"borderless\" ? \"48px\" : \"32px\"}\n ></jap-icon>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-icon-button\": JapIconButton;\n }\n}\n"],"names":["JapIconButton","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAOO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuB,KAAA,OAAgC,cAKhC,KAAA,WAAqB,UAKrB,KAAA,QAQR;AAAA,EAAA;AAAA,EAEpB,SAAS;AACP,WAAOC;AAAA,sBACW,KAAK,IAAI;AAAA;AAAA,qBAEV,KAAK,QAAQ;AAAA,kBAChB,KAAK,KAAK;AAAA,iBACX,KAAK,SAAS,eAAe,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA,EAI3D;AACF;AArCaF,EACJ,SAASG,EAAUC,CAAK;AAKHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfN,EAMiB,WAAA,QAAA,CAAA;AAKAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXfN,EAWiB,WAAA,YAAA,CAAA;AAKAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfN,EAgBiB,WAAA,SAAA,CAAA;AAhBjBA,IAANK,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBP,CAAA;"}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { LitElement as g, nothing as a, html as o, unsafeCSS as y } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
+
import { query as m, property as p, state as f, customElement as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
|
+
import u from "./jap-image-button.scss.js";
|
|
4
|
+
import { SignalWatcher as w } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
5
|
+
import { breakpoint as c } from "../../stores/breakpoint-store.js";
|
|
6
|
+
import { classMap as b } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
|
|
7
|
+
import "../button/jap-button.js";
|
|
8
|
+
import "../flash/jap-flash.js";
|
|
9
|
+
import "../footer/jap-footer.js";
|
|
10
|
+
import "../header/jap-header.js";
|
|
11
|
+
import "../heading/jap-heading.js";
|
|
12
|
+
import "../icon/jap-icon.js";
|
|
13
|
+
import "../icon-button/jap-icon-button.js";
|
|
14
|
+
import "../link/jap-link.js";
|
|
15
|
+
import "../modal/jap-modal.js";
|
|
16
|
+
import "../navigation/jap-navigation.js";
|
|
17
|
+
import "../tag/jap-tag.js";
|
|
18
|
+
var W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, i, l, h) => {
|
|
19
|
+
for (var s = h > 1 ? void 0 : h ? $(i, l) : i, n = e.length - 1, d; n >= 0; n--)
|
|
20
|
+
(d = e[n]) && (s = (h ? d(i, l, s) : d(s)) || s);
|
|
21
|
+
return h && s && W(i, l, s), s;
|
|
22
|
+
};
|
|
23
|
+
let t = class extends w(g) {
|
|
24
|
+
constructor() {
|
|
25
|
+
super(...arguments), this.label = "", this.description = "", this.type = "default", this.width = "100%", this.height = "auto", this.flashWidth = 0, this.flashHeight = 0;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* First updated
|
|
29
|
+
*/
|
|
30
|
+
firstUpdated() {
|
|
31
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
32
|
+
this.onFlashSlotChange(this.flashSlot);
|
|
33
|
+
}), this.imgWrapper && this.resizeObserver.observe(this.imgWrapper);
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Updated
|
|
37
|
+
*/
|
|
38
|
+
updated(e) {
|
|
39
|
+
e.has("width") && (this.width ? this.style.setProperty("--host-width", this.width) : this.style.removeProperty("--host-width")), e.has("height") && (this.height ? this.style.setProperty("--img-height", this.height) : this.style.removeProperty("--img-height"));
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Disconnected callback
|
|
43
|
+
*/
|
|
44
|
+
disconnectedCallback() {
|
|
45
|
+
super.disconnectedCallback(), this.resizeObserver && this.resizeObserver.disconnect();
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* On flash slot change
|
|
49
|
+
*/
|
|
50
|
+
onFlashSlotChange(e) {
|
|
51
|
+
var s;
|
|
52
|
+
const i = e instanceof Event ? e.target : e, h = ((s = (i == null ? void 0 : i.assignedElements({ flatten: !0 }))[0]) == null ? void 0 : s.getBoundingClientRect().width) ?? 0;
|
|
53
|
+
this.flashWidth = h, this.flashWidth && this.style.setProperty(
|
|
54
|
+
"--flash-pos-right",
|
|
55
|
+
"-" + this.flashWidth / 2 + "px"
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
const e = this.width.includes("%") ? "" : this.width, i = {
|
|
60
|
+
title: !0,
|
|
61
|
+
[c.get()]: !0
|
|
62
|
+
};
|
|
63
|
+
return o`
|
|
64
|
+
<div
|
|
65
|
+
class="image-button-wrapper"
|
|
66
|
+
tabindex=${this.type !== "image-only" ? "0" : "-1"}
|
|
67
|
+
style="${this.type !== "image-only" ? "cursor: pointer;" : ""}"
|
|
68
|
+
>
|
|
69
|
+
<div style="position: relative;">
|
|
70
|
+
${c.get() !== "s" ? o`<div
|
|
71
|
+
class="flash-slot-wrapper"
|
|
72
|
+
style="right: ${this.flashWidth ? this.flashWidth / 2 : 0}px;"
|
|
73
|
+
>
|
|
74
|
+
<slot name="flash" @slotchange=${this.onFlashSlotChange}></slot>
|
|
75
|
+
</div>` : a}
|
|
76
|
+
|
|
77
|
+
<div
|
|
78
|
+
class="image-slot-wrapper"
|
|
79
|
+
id="imgWrapper"
|
|
80
|
+
style="width: ${e}; height: ${this.height};"
|
|
81
|
+
>
|
|
82
|
+
<slot></slot>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
${this.type !== "image-only" ? o`<div class="text-wrapper">
|
|
86
|
+
<div class="label-wrapper">
|
|
87
|
+
${this.type === "detail" ? o`<jap-icon
|
|
88
|
+
iconName="arrow-right"
|
|
89
|
+
color="black"
|
|
90
|
+
size="24px"
|
|
91
|
+
></jap-icon>` : a}
|
|
92
|
+
<div class=${b(i)}>${this.label}</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
${this.type === "default" ? o`<div class="divider"></div>
|
|
96
|
+
<div class="description">${this.description}</div>` : a}
|
|
97
|
+
</div>` : a}
|
|
98
|
+
</div>
|
|
99
|
+
`;
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
t.styles = y(u);
|
|
103
|
+
r([
|
|
104
|
+
m("#imgWrapper")
|
|
105
|
+
], t.prototype, "imgWrapper", 2);
|
|
106
|
+
r([
|
|
107
|
+
m('slot[name="flash"]')
|
|
108
|
+
], t.prototype, "flashSlot", 2);
|
|
109
|
+
r([
|
|
110
|
+
p({ type: String, reflect: !0 })
|
|
111
|
+
], t.prototype, "label", 2);
|
|
112
|
+
r([
|
|
113
|
+
p({ type: String, reflect: !0 })
|
|
114
|
+
], t.prototype, "description", 2);
|
|
115
|
+
r([
|
|
116
|
+
p({ type: String, reflect: !0 })
|
|
117
|
+
], t.prototype, "type", 2);
|
|
118
|
+
r([
|
|
119
|
+
p({ type: String, reflect: !0 })
|
|
120
|
+
], t.prototype, "width", 2);
|
|
121
|
+
r([
|
|
122
|
+
p({ type: String, reflect: !0 })
|
|
123
|
+
], t.prototype, "height", 2);
|
|
124
|
+
r([
|
|
125
|
+
f()
|
|
126
|
+
], t.prototype, "flashWidth", 2);
|
|
127
|
+
r([
|
|
128
|
+
f()
|
|
129
|
+
], t.prototype, "flashHeight", 2);
|
|
130
|
+
t = r([
|
|
131
|
+
v("jap-image-button")
|
|
132
|
+
], t);
|
|
133
|
+
export {
|
|
134
|
+
t as JapImageButton
|
|
135
|
+
};
|
|
136
|
+
//# sourceMappingURL=jap-image-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jap-image-button.js","sources":["../../../src/components/image-button/jap-image-button.ts"],"sourcesContent":["import { LitElement, html, nothing, unsafeCSS } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport style from \"./jap-image-button.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"@/components\";\n\n@customElement(\"jap-image-button\")\nexport class JapImageButton extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n @query(\"#imgWrapper\")\n private imgWrapper!: HTMLDivElement;\n\n @query('slot[name=\"flash\"]')\n private flashSlot!: HTMLSlotElement;\n\n private resizeObserver!: ResizeObserver;\n\n /**\n * Image button label\n */\n @property({ type: String, reflect: true })\n label = \"\";\n\n /**\n * Description\n */\n @property({ type: String, reflect: true })\n description = \"\";\n\n /**\n * Type\n */\n @property({ type: String, reflect: true })\n type: \"default\" | \"detail\" | \"image-only\" = \"default\";\n\n /**\n * Width\n */\n @property({ type: String, reflect: true })\n width = \"100%\";\n\n /**\n * Height\n */\n @property({ type: String, reflect: true })\n height = \"auto\";\n\n /**\n * Height\n */\n @state() flashWidth = 0;\n\n /**\n * Height\n */\n @state() flashHeight = 0;\n\n /**\n * First updated\n */\n firstUpdated() {\n this.resizeObserver = new ResizeObserver(() => {\n this.onFlashSlotChange(this.flashSlot);\n });\n if (this.imgWrapper) {\n this.resizeObserver.observe(this.imgWrapper);\n }\n }\n\n /**\n * Updated\n */\n updated(changed: Map<string, unknown>) {\n if (changed.has(\"width\")) {\n if (this.width) {\n this.style.setProperty(\"--host-width\", this.width);\n } else {\n this.style.removeProperty(\"--host-width\");\n }\n }\n if (changed.has(\"height\")) {\n if (this.height) {\n this.style.setProperty(\"--img-height\", this.height);\n } else {\n this.style.removeProperty(\"--img-height\");\n }\n }\n }\n\n /**\n * Disconnected callback\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n /**\n * On flash slot change\n */\n onFlashSlotChange(e: Event | HTMLSlotElement) {\n const flashSlot = (e instanceof Event ? e.target : e) as HTMLSlotElement;\n\n // FLASH SLOT\n const flashEls = flashSlot?.assignedElements({ flatten: true });\n const flashWidth = flashEls[0]?.getBoundingClientRect().width ?? 0;\n this.flashWidth = flashWidth;\n\n // SET CSS VARIABLE\n if (this.flashWidth) {\n this.style.setProperty(\n \"--flash-pos-right\",\n \"-\" + this.flashWidth / 2 + \"px\",\n );\n }\n }\n\n render() {\n const processedWidth = this.width.includes(\"%\") ? \"\" : this.width;\n const titleClass = {\n title: true,\n [breakpoint.get()]: true,\n };\n\n return html`\n <div\n class=\"image-button-wrapper\"\n tabindex=${this.type !== \"image-only\" ? \"0\" : \"-1\"}\n style=\"${this.type !== \"image-only\" ? \"cursor: pointer;\" : \"\"}\"\n >\n <div style=\"position: relative;\">\n ${breakpoint.get() !== \"s\"\n ? html`<div\n class=\"flash-slot-wrapper\"\n style=\"right: ${this.flashWidth ? this.flashWidth / 2 : 0}px;\"\n >\n <slot name=\"flash\" @slotchange=${this.onFlashSlotChange}></slot>\n </div>`\n : nothing}\n\n <div\n class=\"image-slot-wrapper\"\n id=\"imgWrapper\"\n style=\"width: ${processedWidth}; height: ${this.height};\"\n >\n <slot></slot>\n </div>\n </div>\n ${this.type !== \"image-only\"\n ? html`<div class=\"text-wrapper\">\n <div class=\"label-wrapper\">\n ${this.type === \"detail\"\n ? html`<jap-icon\n iconName=\"arrow-right\"\n color=\"black\"\n size=\"24px\"\n ></jap-icon>`\n : nothing}\n <div class=${classMap(titleClass)}>${this.label}</div>\n </div>\n\n ${this.type === \"default\"\n ? html`<div class=\"divider\"></div>\n <div class=\"description\">${this.description}</div>`\n : nothing}\n </div>`\n : nothing}\n </div>\n `;\n }\n}\n"],"names":["JapImageButton","SignalWatcher","LitElement","changed","flashSlot","flashWidth","_a","processedWidth","titleClass","breakpoint","html","nothing","classMap","unsafeCSS","style","__decorateClass","query","property","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAA6BC,EAAcC,CAAU,EAAE;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA,GAeL,KAAA,QAAQ,IAMR,KAAA,cAAc,IAMd,KAAA,OAA4C,WAM5C,KAAA,QAAQ,QAMR,KAAA,SAAS,QAKA,KAAA,aAAa,GAKb,KAAA,cAAc;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKvB,eAAe;AACb,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC7C,WAAK,kBAAkB,KAAK,SAAS;AAAA,IACvC,CAAC,GACG,KAAK,cACP,KAAK,eAAe,QAAQ,KAAK,UAAU;AAAA,EAE/C;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQC,GAA+B;AACrC,IAAIA,EAAQ,IAAI,OAAO,MACjB,KAAK,QACP,KAAK,MAAM,YAAY,gBAAgB,KAAK,KAAK,IAEjD,KAAK,MAAM,eAAe,cAAc,IAGxCA,EAAQ,IAAI,QAAQ,MAClB,KAAK,SACP,KAAK,MAAM,YAAY,gBAAgB,KAAK,MAAM,IAElD,KAAK,MAAM,eAAe,cAAc;AAAA,EAG9C;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,UAAM,qBAAA,GACF,KAAK,kBACP,KAAK,eAAe,WAAA;AAAA,EAExB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB,GAA4B;;AAC5C,UAAMC,IAAa,aAAa,QAAQ,EAAE,SAAS,GAI7CC,MAAaC,KADFF,KAAA,gBAAAA,EAAW,iBAAiB,EAAE,SAAS,OAC5B,CAAC,MAAV,gBAAAE,EAAa,wBAAwB,UAAS;AACjE,SAAK,aAAaD,GAGd,KAAK,cACP,KAAK,MAAM;AAAA,MACT;AAAA,MACA,MAAM,KAAK,aAAa,IAAI;AAAA,IAAA;AAAA,EAGlC;AAAA,EAEA,SAAS;AACP,UAAME,IAAiB,KAAK,MAAM,SAAS,GAAG,IAAI,KAAK,KAAK,OACtDC,IAAa;AAAA,MACjB,OAAO;AAAA,MACP,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA;AAAA;AAAA,mBAGQ,KAAK,SAAS,eAAe,MAAM,IAAI;AAAA,iBACzC,KAAK,SAAS,eAAe,qBAAqB,EAAE;AAAA;AAAA;AAAA,YAGzDD,EAAW,UAAU,MACnBC;AAAA;AAAA,gCAEkB,KAAK,aAAa,KAAK,aAAa,IAAI,CAAC;AAAA;AAAA,iDAExB,KAAK,iBAAiB;AAAA,wBAEzDC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKOJ,CAAc,aAAa,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,UAKxD,KAAK,SAAS,eACZG;AAAA;AAAA,kBAEM,KAAK,SAAS,WACZA;AAAA;AAAA;AAAA;AAAA,oCAKAC,CAAO;AAAA,6BACEC,EAASJ,CAAU,CAAC,IAAI,KAAK,KAAK;AAAA;AAAA;AAAA,gBAG/C,KAAK,SAAS,YACZE;AAAA,+CAC6B,KAAK,WAAW,WAC7CC,CAAO;AAAA,sBAEbA,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAtKaX,EACJ,SAASa,EAAUC,CAAK;AAGvBC,EAAA;AAAA,EADPC,EAAM,aAAa;AAAA,GAHThB,EAIH,WAAA,cAAA,CAAA;AAGAe,EAAA;AAAA,EADPC,EAAM,oBAAoB;AAAA,GANhBhB,EAOH,WAAA,aAAA,CAAA;AAQRe,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BjB,EAeX,WAAA,SAAA,CAAA;AAMAe,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BjB,EAqBX,WAAA,eAAA,CAAA;AAMAe,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA1B9BjB,EA2BX,WAAA,QAAA,CAAA;AAMAe,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhC9BjB,EAiCX,WAAA,SAAA,CAAA;AAMAe,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtC9BjB,EAuCX,WAAA,UAAA,CAAA;AAKSe,EAAA;AAAA,EAARG,EAAA;AAAM,GA5CIlB,EA4CF,WAAA,cAAA,CAAA;AAKAe,EAAA;AAAA,EAARG,EAAA;AAAM,GAjDIlB,EAiDF,WAAA,eAAA,CAAA;AAjDEA,IAANe,EAAA;AAAA,EADNI,EAAc,kBAAkB;AAAA,GACpBnB,CAAA;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block;width:var(--host-width, auto)}.image-button-wrapper{display:flex;flex-direction:column;gap:16px;width:auto}a{color:#3a3a3a;text-decoration:none;background-color:transparent}a:hover{color:#3a3a3a}.text-wrapper{display:inline-flex;flex-direction:column;align-items:stretch;width:fit-content;-webkit-user-select:none;-ms-user-select:none;user-select:none}.label-wrapper{display:flex;flex-direction:row;gap:8px;align-items:center}.title.l{font-family:Satoshi-Italic,sans-serif;font-size:34px;line-height:52px}.title.m,.title.s{font-family:Satoshi-Italic,sans-serif;font-size:28px;line-height:42px}.divider{width:100%;border-bottom:solid 2px #3a3a3a;height:1px}.description{font-family:Satoshi-Regular,sans-serif;font-size:22px;line-height:32px}.image-slot-wrapper ::slotted(img){width:100%;height:var(--img-height, auto);max-width:100%;display:block;object-fit:cover}.flash-slot-wrapper ::slotted(jap-flash){position:absolute;right:var(--flash-pos-right);top:50%;transform:translateY(-50%)}';
|
|
2
|
+
export {
|
|
3
|
+
t as default
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=jap-image-button.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jap-image-button.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -10,7 +10,7 @@ import "../header/jap-header.js";
|
|
|
10
10
|
import "../heading/jap-heading.js";
|
|
11
11
|
import "../icon/jap-icon.js";
|
|
12
12
|
import "../icon-button/jap-icon-button.js";
|
|
13
|
-
import "../image-
|
|
13
|
+
import "../image-button/jap-image-button.js";
|
|
14
14
|
import "../link/jap-link.js";
|
|
15
15
|
import "../navigation/jap-navigation.js";
|
|
16
16
|
import "../tag/jap-tag.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-modal.js","sources":["../../../src/components/modal/jap-modal.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-modal.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-modal.js","sources":["../../../src/components/modal/jap-modal.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-modal.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"@/components\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\n\n@customElement(\"jap-modal\")\nexport class JapModal extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n @property({ type: Boolean }) show = false;\n @property({ type: String, reflect: true })\n type: \"default\" | \"header\" = \"default\";\n\n render() {\n const backdropClasses = {\n backdrop: true,\n hidden: !this.show || breakpoint.get() === \"s\",\n };\n\n const contentClasses = {\n content: true,\n [breakpoint.get()]: true,\n hidden: !this.show,\n };\n\n const btnCloseClasses = {\n \"btn-close-wrapper\": true,\n [this.type]: true,\n [breakpoint.get()]: true,\n };\n\n const contentBodyClasses = {\n \"content-body\": true,\n [breakpoint.get()]: true,\n };\n\n return html`<slot name=\"button\" @click=${() => (this.show = true)}></slot>\n <div\n class=${classMap(backdropClasses)}\n @click=${() => {\n this.show = false;\n }}\n ></div>\n <div class=${classMap(contentClasses)}>\n <div class=${classMap(btnCloseClasses)}>\n <jap-icon-button\n iconName=\"x\"\n color=\"black\"\n type=\"borderless\"\n @click=${() => {\n this.show = false;\n }}\n ></jap-icon-button>\n </div>\n <div class=\"content-wrapper\">\n <slot></slot>\n <div class=\"content-header\">\n <slot name=\"header\"></slot>\n </div>\n <div class=${classMap(contentBodyClasses)}>\n <slot name=\"content\"></slot>\n </div>\n </div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-modal\": JapModal;\n }\n}\n"],"names":["JapModal","SignalWatcher","LitElement","backdropClasses","breakpoint","contentClasses","btnCloseClasses","contentBodyClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAuBC,EAAcC,CAAU,EAAE;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGwB,KAAA,OAAO,IAEpC,KAAA,OAA6B;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,UAAMC,IAAkB;AAAA,MACtB,UAAU;AAAA,MACV,QAAQ,CAAC,KAAK,QAAQC,EAAW,UAAU;AAAA,IAAA,GAGvCC,IAAiB;AAAA,MACrB,SAAS;AAAA,MACT,CAACD,EAAW,IAAA,CAAK,GAAG;AAAA,MACpB,QAAQ,CAAC,KAAK;AAAA,IAAA,GAGVE,IAAkB;AAAA,MACtB,qBAAqB;AAAA,MACrB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,CAACF,EAAW,KAAK,GAAG;AAAA,IAAA,GAGhBG,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAACH,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOI,+BAAkC,MAAO,KAAK,OAAO,EAAK;AAAA;AAAA,gBAErDC,EAASN,CAAe,CAAC;AAAA,iBACxB,MAAM;AACb,WAAK,OAAO;AAAA,IACd,CAAC;AAAA;AAAA,mBAEUM,EAASJ,CAAc,CAAC;AAAA,qBACtBI,EAASH,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKzB,MAAM;AACb,WAAK,OAAO;AAAA,IACd,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQUG,EAASF,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjD;AACF;AA3DaP,EACJ,SAASU,EAAUC,CAAK;AAEFC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAHhBb,EAGkB,WAAA,QAAA,CAAA;AAE7BY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9Bb,EAKX,WAAA,QAAA,CAAA;AALWA,IAANY,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbd,CAAA;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { SignalWatcher as
|
|
5
|
-
import { breakpoint as
|
|
6
|
-
import { classMap as
|
|
1
|
+
import { LitElement as n, html as l, unsafeCSS as c } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
+
import { queryAssignedElements as v, customElement as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
|
+
import d from "./jap-navigation.scss.js";
|
|
4
|
+
import { SignalWatcher as u } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
5
|
+
import { breakpoint as h } from "../../stores/breakpoint-store.js";
|
|
6
|
+
import { classMap as g } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
|
|
7
7
|
import "../button/jap-button.js";
|
|
8
8
|
import "../flash/jap-flash.js";
|
|
9
9
|
import "../footer/jap-footer.js";
|
|
@@ -11,34 +11,66 @@ import "../header/jap-header.js";
|
|
|
11
11
|
import "../heading/jap-heading.js";
|
|
12
12
|
import "../icon/jap-icon.js";
|
|
13
13
|
import "../icon-button/jap-icon-button.js";
|
|
14
|
-
import "../image-
|
|
14
|
+
import "../image-button/jap-image-button.js";
|
|
15
15
|
import "../link/jap-link.js";
|
|
16
16
|
import "../modal/jap-modal.js";
|
|
17
17
|
import "../tag/jap-tag.js";
|
|
18
|
-
var
|
|
19
|
-
for (var
|
|
20
|
-
(
|
|
21
|
-
return
|
|
18
|
+
var b = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (t, e, o, r) => {
|
|
19
|
+
for (var i = r > 1 ? void 0 : r ? C(e, o) : e, m = t.length - 1, p; m >= 0; m--)
|
|
20
|
+
(p = t[m]) && (i = (r ? p(e, o, i) : p(i)) || i);
|
|
21
|
+
return r && i && b(e, o, i), i;
|
|
22
22
|
};
|
|
23
|
-
let
|
|
23
|
+
let s = class extends u(n) {
|
|
24
|
+
/**
|
|
25
|
+
* Get items
|
|
26
|
+
*/
|
|
27
|
+
getActiveItem() {
|
|
28
|
+
return this.items.find((t) => t.active) ?? null;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Set items
|
|
32
|
+
*/
|
|
33
|
+
setActiveItem(t) {
|
|
34
|
+
for (const e of this.items)
|
|
35
|
+
e.active = e === t;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Handle click
|
|
39
|
+
*/
|
|
40
|
+
async handleClick(t) {
|
|
41
|
+
const e = t.target;
|
|
42
|
+
t.defaultPrevented || e.active || (this.setActiveItem(e), this.dispatchEvent(
|
|
43
|
+
new CustomEvent("jap-navigation-click", {
|
|
44
|
+
detail: { index: this.items.indexOf(e) },
|
|
45
|
+
bubbles: !0,
|
|
46
|
+
composed: !0
|
|
47
|
+
})
|
|
48
|
+
));
|
|
49
|
+
}
|
|
50
|
+
firstUpdated() {
|
|
51
|
+
this.setActiveItem(this.items[0]);
|
|
52
|
+
}
|
|
24
53
|
render() {
|
|
25
|
-
const
|
|
54
|
+
const t = {
|
|
26
55
|
"navi-wrapper": !0,
|
|
27
|
-
[
|
|
56
|
+
[h.get()]: !0
|
|
28
57
|
};
|
|
29
58
|
return l`
|
|
30
|
-
<div class=${
|
|
31
|
-
<slot></slot>
|
|
59
|
+
<div class=${g(t)}>
|
|
60
|
+
<slot @click=${this.handleClick}></slot>
|
|
32
61
|
<div class="border-slider"></div>
|
|
33
62
|
</div>
|
|
34
63
|
`;
|
|
35
64
|
}
|
|
36
65
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
v(
|
|
40
|
-
],
|
|
66
|
+
s.styles = c(d);
|
|
67
|
+
a([
|
|
68
|
+
v({ flatten: !0 })
|
|
69
|
+
], s.prototype, "items", 2);
|
|
70
|
+
s = a([
|
|
71
|
+
f("jap-navigation")
|
|
72
|
+
], s);
|
|
41
73
|
export {
|
|
42
|
-
|
|
74
|
+
s as JapNavigation
|
|
43
75
|
};
|
|
44
76
|
//# sourceMappingURL=jap-navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-navigation.js","sources":["../../../src/components/navigation/jap-navigation.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jap-navigation.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"
|
|
1
|
+
{"version":3,"file":"jap-navigation.js","sources":["../../../src/components/navigation/jap-navigation.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, queryAssignedElements } from \"lit/decorators.js\";\nimport style from \"./jap-navigation.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"@/stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { JapButton } from \"@/components/button/jap-button\";\nimport \"@/components\";\n\n@customElement(\"jap-navigation\")\nexport class JapNavigation extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n\n /**\n * Nav items\n */\n @queryAssignedElements({ flatten: true })\n readonly items!: JapButton[];\n\n /**\n * Get items\n */\n getActiveItem() {\n return this.items.find((item) => item.active) ?? null;\n }\n\n /**\n * Set items\n */\n setActiveItem(activeItem: JapButton) {\n for (const item of this.items) {\n item.active = item === activeItem;\n }\n }\n\n /**\n * Handle click\n */\n private async handleClick(event: Event) {\n const item = event.target as JapButton;\n if (event.defaultPrevented || item.active) return;\n this.setActiveItem(item);\n this.dispatchEvent(\n new CustomEvent(\"jap-navigation-click\", {\n detail: { index: this.items.indexOf(item) },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n firstUpdated(): void {\n this.setActiveItem(this.items[0]);\n }\n\n render() {\n const naviWrapperClass = {\n \"navi-wrapper\": true,\n [breakpoint.get()]: true,\n };\n\n return html`\n <div class=${classMap(naviWrapperClass)}>\n <slot @click=${this.handleClick}></slot>\n <div class=\"border-slider\"></div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-navigation\": JapNavigation;\n }\n}\n"],"names":["JapNavigation","SignalWatcher","LitElement","item","activeItem","event","naviWrapperClass","breakpoint","html","classMap","unsafeCSS","style","__decorateClass","queryAssignedElements","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUO,IAAMA,IAAN,cAA4BC,EAAcC,CAAU,EAAE;AAAA;AAAA;AAAA;AAAA,EAY3D,gBAAgB;AACd,WAAO,KAAK,MAAM,KAAK,CAACC,MAASA,EAAK,MAAM,KAAK;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,cAAcC,GAAuB;AACnC,eAAWD,KAAQ,KAAK;AACtB,MAAAA,EAAK,SAASA,MAASC;AAAA,EAE3B;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,YAAYC,GAAc;AACtC,UAAMF,IAAOE,EAAM;AACnB,IAAIA,EAAM,oBAAoBF,EAAK,WACnC,KAAK,cAAcA,CAAI,GACvB,KAAK;AAAA,MACH,IAAI,YAAY,wBAAwB;AAAA,QACtC,QAAQ,EAAE,OAAO,KAAK,MAAM,QAAQA,CAAI,EAAA;AAAA,QACxC,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,eAAqB;AACnB,SAAK,cAAc,KAAK,MAAM,CAAC,CAAC;AAAA,EAClC;AAAA,EAEA,SAAS;AACP,UAAMG,IAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA,mBACQC,EAASH,CAAgB,CAAC;AAAA,uBACtB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAIrC;AACF;AA1DaN,EACJ,SAASU,EAAUC,CAAK;AAMtBC,EAAA;AAAA,EADRC,EAAsB,EAAE,SAAS,GAAA,CAAM;AAAA,GAN7Bb,EAOF,WAAA,SAAA,CAAA;AAPEA,IAANY,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBd,CAAA;"}
|
|
@@ -8,7 +8,7 @@ import "../header/jap-header.js";
|
|
|
8
8
|
import "../heading/jap-heading.js";
|
|
9
9
|
import "../icon/jap-icon.js";
|
|
10
10
|
import "../icon-button/jap-icon-button.js";
|
|
11
|
-
import "../image-
|
|
11
|
+
import "../image-button/jap-image-button.js";
|
|
12
12
|
import "../link/jap-link.js";
|
|
13
13
|
import "../modal/jap-modal.js";
|
|
14
14
|
import "../navigation/jap-navigation.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-tag.js","sources":["../../../src/components/tag/jap-tag.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jap-tag.scss?inline\";\nimport \"
|
|
1
|
+
{"version":3,"file":"jap-tag.js","sources":["../../../src/components/tag/jap-tag.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jap-tag.scss?inline\";\nimport \"@/components\";\n\n@customElement(\"jap-tag\")\nexport class JapTag extends LitElement {\n static styles = unsafeCSS(style);\n\n render() {\n return html`\n <div class=\"tag-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"jap-tag\": JapTag;\n }\n}\n"],"names":["JapTag","LitElement","html","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAGrC,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAVaF,EACJ,SAASG,EAAUC,CAAK;AADpBJ,IAANK,EAAA;AAAA,EADNC,EAAc,SAAS;AAAA,GACXN,CAAA;"}
|
package/dist/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
/* empty css */
|
|
3
|
-
import { JapButton as
|
|
3
|
+
import { JapButton as a } from "./components/button/jap-button.js";
|
|
4
4
|
import { JapFlash as m } from "./components/flash/jap-flash.js";
|
|
5
5
|
import { JapFooter as x } from "./components/footer/jap-footer.js";
|
|
6
6
|
import { JapHeader as n } from "./components/header/jap-header.js";
|
|
7
7
|
import { JapHeading as g } from "./components/heading/jap-heading.js";
|
|
8
|
-
import { JapIcon as
|
|
9
|
-
import { JapIconButton as
|
|
10
|
-
import {
|
|
11
|
-
import { JapLink as
|
|
12
|
-
import { JapModal as
|
|
13
|
-
import { JapNavigation as
|
|
8
|
+
import { JapIcon as u } from "./components/icon/jap-icon.js";
|
|
9
|
+
import { JapIconButton as I } from "./components/icon-button/jap-icon-button.js";
|
|
10
|
+
import { JapImageButton as l } from "./components/image-button/jap-image-button.js";
|
|
11
|
+
import { JapLink as H } from "./components/link/jap-link.js";
|
|
12
|
+
import { JapModal as k } from "./components/modal/jap-modal.js";
|
|
13
|
+
import { JapNavigation as v } from "./components/navigation/jap-navigation.js";
|
|
14
14
|
import { JapTag as M } from "./components/tag/jap-tag.js";
|
|
15
15
|
export {
|
|
16
|
-
|
|
16
|
+
a as JapButton,
|
|
17
17
|
m as JapFlash,
|
|
18
18
|
x as JapFooter,
|
|
19
19
|
n as JapHeader,
|
|
20
20
|
g as JapHeading,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
u as JapIcon,
|
|
22
|
+
I as JapIconButton,
|
|
23
|
+
l as JapImageButton,
|
|
24
|
+
H as JapLink,
|
|
25
|
+
k as JapModal,
|
|
26
|
+
v as JapNavigation,
|
|
27
27
|
M as JapTag
|
|
28
28
|
};
|
|
29
29
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jotyping/jap-ds",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4-alpha",
|
|
4
4
|
"description": "jap design system",
|
|
5
5
|
"author": "Johannes Pfleghar",
|
|
6
6
|
"homepage": "https://www.johannespfleghar.de",
|
|
@@ -23,17 +23,17 @@
|
|
|
23
23
|
"lit": "^3.2.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@chromatic-com/storybook": "^
|
|
26
|
+
"@chromatic-com/storybook": "^5.0.0",
|
|
27
27
|
"@eslint/js": "^9.20.0",
|
|
28
|
-
"@storybook/addon-docs": "^10.
|
|
29
|
-
"@storybook/web-components-vite": "^10.
|
|
28
|
+
"@storybook/addon-docs": "^10.2.0",
|
|
29
|
+
"@storybook/web-components-vite": "^10.2.0",
|
|
30
30
|
"@types/node": "^24.1.0",
|
|
31
31
|
"eslint": "^9.20.1",
|
|
32
|
-
"eslint-plugin-storybook": "^10.
|
|
32
|
+
"eslint-plugin-storybook": "^10.2.0",
|
|
33
33
|
"globals": "^15.15.0",
|
|
34
34
|
"prettier": "3.5.1",
|
|
35
35
|
"sass-embedded": "^1.85.0",
|
|
36
|
-
"storybook": "^10.
|
|
36
|
+
"storybook": "^10.2.0",
|
|
37
37
|
"typescript": "~5.7.2",
|
|
38
38
|
"typescript-eslint": "^8.24.0",
|
|
39
39
|
"vite": "^6.1.0"
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { LitElement as n, html as c, unsafeCSS as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
|
-
import { property as l, customElement as d } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
|
|
3
|
-
import f from "./jap-image-link.scss.js";
|
|
4
|
-
import { SignalWatcher as h } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
5
|
-
import { breakpoint as g } from "../../stores/breakpoint-store.js";
|
|
6
|
-
import { classMap as u } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
|
|
7
|
-
import "../button/jap-button.js";
|
|
8
|
-
import "../flash/jap-flash.js";
|
|
9
|
-
import "../footer/jap-footer.js";
|
|
10
|
-
import "../header/jap-header.js";
|
|
11
|
-
import "../heading/jap-heading.js";
|
|
12
|
-
import "../icon/jap-icon.js";
|
|
13
|
-
import "../icon-button/jap-icon-button.js";
|
|
14
|
-
import "../link/jap-link.js";
|
|
15
|
-
import "../modal/jap-modal.js";
|
|
16
|
-
import "../navigation/jap-navigation.js";
|
|
17
|
-
import "../tag/jap-tag.js";
|
|
18
|
-
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (i, e, s, p) => {
|
|
19
|
-
for (var t = p > 1 ? void 0 : p ? _(e, s) : e, m = i.length - 1, a; m >= 0; m--)
|
|
20
|
-
(a = i[m]) && (t = (p ? a(e, s, t) : a(t)) || t);
|
|
21
|
-
return p && t && y(e, s, t), t;
|
|
22
|
-
};
|
|
23
|
-
let r = class extends h(n) {
|
|
24
|
-
constructor() {
|
|
25
|
-
super(...arguments), this.href = "", this.target = "_blank", this.description = "";
|
|
26
|
-
}
|
|
27
|
-
render() {
|
|
28
|
-
const i = {
|
|
29
|
-
title: !0,
|
|
30
|
-
[g.get()]: !0
|
|
31
|
-
};
|
|
32
|
-
return c`
|
|
33
|
-
<div>
|
|
34
|
-
<a href="${this.href}" target="${this.target}">
|
|
35
|
-
<div class="link-wrapper">
|
|
36
|
-
<div class=${u(i)}>
|
|
37
|
-
<slot></slot>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="divider"></div>
|
|
40
|
-
<div class="description">${this.description}</div>
|
|
41
|
-
</div>
|
|
42
|
-
</a>
|
|
43
|
-
</div>
|
|
44
|
-
`;
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
r.styles = v(f);
|
|
48
|
-
o([
|
|
49
|
-
l({ type: String })
|
|
50
|
-
], r.prototype, "href", 2);
|
|
51
|
-
o([
|
|
52
|
-
l({ type: String })
|
|
53
|
-
], r.prototype, "target", 2);
|
|
54
|
-
o([
|
|
55
|
-
l({ type: String })
|
|
56
|
-
], r.prototype, "description", 2);
|
|
57
|
-
r = o([
|
|
58
|
-
d("jap-image-link")
|
|
59
|
-
], r);
|
|
60
|
-
export {
|
|
61
|
-
r as JapImageLink
|
|
62
|
-
};
|
|
63
|
-
//# sourceMappingURL=jap-image-link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"jap-image-link.js","sources":["../../../src/components/image-link/jap-image-link.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-image-link.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\n\n@customElement(\"jap-image-link\")\nexport class JapImageLink extends SignalWatcher(LitElement) {\n static styles = unsafeCSS(style);\n @property({ type: String }) href = \"\";\n @property({ type: String }) target: \"_blank\" | \"_bla\" = \"_blank\";\n @property({ type: String }) description = \"\";\n\n render() {\n const titleClass = {\n title: true,\n [breakpoint.get()]: true,\n };\n\n return html`\n <div>\n <a href=\"${this.href}\" target=\"${this.target}\">\n <div class=\"link-wrapper\">\n <div class=${classMap(titleClass)}>\n <slot></slot>\n </div>\n <div class=\"divider\"></div>\n <div class=\"description\">${this.description}</div>\n </div>\n </a>\n </div>\n `;\n }\n}\n"],"names":["JapImageLink","SignalWatcher","LitElement","titleClass","breakpoint","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAA2BC,EAAcC,CAAU,EAAE;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAEuB,KAAA,OAAO,IACP,KAAA,SAA4B,UAC5B,KAAA,cAAc;AAAA,EAAA;AAAA,EAE1C,SAAS;AACP,UAAMC,IAAa;AAAA,MACjB,OAAO;AAAA,MACP,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA;AAAA,mBAEQ,KAAK,IAAI,aAAa,KAAK,MAAM;AAAA;AAAA,yBAE3BC,EAASH,CAAU,CAAC;AAAA;AAAA;AAAA;AAAA,uCAIN,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrD;AACF;AA1BaH,EACJ,SAASO,EAAUC,CAAK;AACHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAFfV,EAEiB,WAAA,QAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfV,EAGiB,WAAA,UAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfV,EAIiB,WAAA,eAAA,CAAA;AAJjBA,IAANS,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBX,CAAA;"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.link-wrapper{display:flex;flex-direction:column;gap:4px;width:auto}a{color:#3a3a3a;text-decoration:none;background-color:transparent}a:hover{color:#3a3a3a}.title.l{font-family:Satoshi-Italic,sans-serif;font-size:34px;line-height:52px}.title.m,.title.s{font-family:Satoshi-Italic,sans-serif;font-size:28px;line-height:42px}.divider{border-bottom:solid 2px #3a3a3a;height:1px}.description{font-family:Satoshi-Regular,sans-serif;font-size:22px;line-height:32px}';
|
|
2
|
-
export {
|
|
3
|
-
t as default
|
|
4
|
-
};
|
|
5
|
-
//# sourceMappingURL=jap-image-link.scss.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"jap-image-link.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|