@jotyping/jap-ds 0.1.8-alpha → 0.1.10-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/components/button/jap-button.js +9 -5
- package/dist/components/button/jap-button.js.map +1 -1
- package/dist/components/flash/jap-flash.js.map +1 -1
- package/dist/components/header/jap-header.scss.js +1 -1
- package/dist/components/image-button/jap-image-button.js +48 -50
- package/dist/components/image-button/jap-image-button.js.map +1 -1
- package/dist/components/navigation/jap-navigation.js +0 -3
- package/dist/components/navigation/jap-navigation.js.map +1 -1
- package/package.json +6 -6
|
@@ -23,11 +23,15 @@ let t = class extends y {
|
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
return n`
|
|
26
|
-
${this.isLink ? n
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
${this.isLink ? n`
|
|
27
|
+
<a class=${this.type} href=${this.href} target=${this.target}>
|
|
28
|
+
<slot></slot>
|
|
29
|
+
</a>
|
|
30
|
+
` : n`
|
|
31
|
+
<button class=${this.type}>
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</button>
|
|
34
|
+
`}
|
|
31
35
|
`;
|
|
32
36
|
}
|
|
33
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-button.js","sources":["../../../src/components/button/jap-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from
|
|
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 /**\n * Active state\n */\n @property({ type: Boolean, reflect: true })\n isLink = false\n\n /**\n * Href in isLink case\n */\n @property({ type: String, reflect: true })\n href = ''\n\n /**\n * Href in isLink case\n */\n @property({ type: String, reflect: true })\n target: '_self' | '_blank' = '_blank'\n\n render() {\n return html`\n ${this.isLink\n ? html`\n <a class=${this.type} href=${this.href} target=${this.target}>\n <slot></slot>\n </a>\n `\n : html`\n <button class=${this.type}>\n <slot></slot>\n </button>\n `}\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,IAMT,KAAA,SAAS,IAMT,KAAA,OAAO,IAMP,KAAA,SAA6B;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,WAAOC;AAAA,QACH,KAAK,SACHA;AAAA,uBACa,KAAK,IAAI,SAAS,KAAK,IAAI,WAAW,KAAK,MAAM;AAAA;AAAA;AAAA,cAI9DA;AAAA,4BACkB,KAAK,IAAI;AAAA;AAAA;AAAA,WAG1B;AAAA;AAAA,EAET;AACF;AAhDaF,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;AAMAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BN,EAmBX,WAAA,UAAA,CAAA;AAMAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxB9BN,EAyBX,WAAA,QAAA,CAAA;AAMAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9BN,EA+BX,WAAA,UAAA,CAAA;AA/BWA,IAANK,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdP,CAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jap-flash.js","sources":["../../../src/components/flash/jap-flash.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from
|
|
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' ? '72px' : '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,MAAM,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhF;AACF;AA/CaL,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:block}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between}.header-wrapper.s{width:calc(100% - 64px);margin:0 32px;height:
|
|
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:144px}.header-wrapper.m{width:calc(100% - 80px);margin:0 40px;height:144px}.header-wrapper.l{width:calc(100% - 192px);margin:0 96px;height:224px}.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
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as g, nothing as a, html as
|
|
1
|
+
import { LitElement as g, nothing as a, html as l, unsafeCSS as y } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
|
|
2
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
3
|
import u from "./jap-image-button.scss.js";
|
|
4
|
-
import { SignalWatcher as
|
|
4
|
+
import { SignalWatcher as b } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
|
|
5
5
|
import { breakpoint as c } from "../../stores/breakpoint-store.js";
|
|
6
|
-
import { classMap as
|
|
6
|
+
import { classMap as w } 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";
|
|
@@ -15,12 +15,12 @@ import "../link/jap-link.js";
|
|
|
15
15
|
import "../modal/jap-modal.js";
|
|
16
16
|
import "../navigation/jap-navigation.js";
|
|
17
17
|
import "../tag/jap-tag.js";
|
|
18
|
-
var W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (
|
|
19
|
-
for (var s =
|
|
20
|
-
(d =
|
|
21
|
-
return
|
|
18
|
+
var W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (t, i, h, o) => {
|
|
19
|
+
for (var s = o > 1 ? void 0 : o ? $(i, h) : i, n = t.length - 1, d; n >= 0; n--)
|
|
20
|
+
(d = t[n]) && (s = (o ? d(i, h, s) : d(s)) || s);
|
|
21
|
+
return o && s && W(i, h, s), s;
|
|
22
22
|
};
|
|
23
|
-
let
|
|
23
|
+
let e = class extends b(g) {
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments), this.label = "", this.description = "", this.type = "default", this.width = "100%", this.height = "auto", this.flashWidth = 0, this.flashHeight = 0;
|
|
26
26
|
}
|
|
@@ -35,8 +35,8 @@ let t = class extends w(g) {
|
|
|
35
35
|
/**
|
|
36
36
|
* Updated
|
|
37
37
|
*/
|
|
38
|
-
updated(
|
|
39
|
-
|
|
38
|
+
updated(t) {
|
|
39
|
+
t.has("width") && (this.width ? this.style.setProperty("--host-width", this.width) : this.style.removeProperty("--host-width")), t.has("height") && (this.height ? this.style.setProperty("--img-height", this.height) : this.style.removeProperty("--img-height"));
|
|
40
40
|
}
|
|
41
41
|
/**
|
|
42
42
|
* Disconnected callback
|
|
@@ -47,90 +47,88 @@ let t = class extends w(g) {
|
|
|
47
47
|
/**
|
|
48
48
|
* On flash slot change
|
|
49
49
|
*/
|
|
50
|
-
onFlashSlotChange(
|
|
50
|
+
onFlashSlotChange(t) {
|
|
51
51
|
var s;
|
|
52
|
-
const i =
|
|
53
|
-
this.flashWidth =
|
|
54
|
-
"--flash-pos-right",
|
|
55
|
-
"-" + this.flashWidth / 2 + "px"
|
|
56
|
-
);
|
|
52
|
+
const i = t instanceof Event ? t.target : t, o = ((s = (i == null ? void 0 : i.assignedElements({ flatten: !0 }))[0]) == null ? void 0 : s.getBoundingClientRect().width) ?? 0;
|
|
53
|
+
this.flashWidth = o, this.flashWidth && this.style.setProperty("--flash-pos-right", "-" + this.flashWidth / 2 + "px");
|
|
57
54
|
}
|
|
58
55
|
render() {
|
|
59
|
-
const
|
|
56
|
+
const t = this.flashWidth ? this.flashWidth / 2 + 16 : 0, i = this.width.includes("%") ? `calc(100% - ${t})` : Number(this.width) - t + "", h = {
|
|
60
57
|
title: !0,
|
|
61
58
|
[c.get()]: !0
|
|
62
59
|
};
|
|
63
|
-
return
|
|
60
|
+
return console.log(i), l`
|
|
64
61
|
<div
|
|
65
62
|
class="image-button-wrapper"
|
|
66
63
|
tabindex=${this.type !== "image-only" ? "0" : "-1"}
|
|
67
64
|
style="${this.type !== "image-only" ? "cursor: pointer;" : ""}"
|
|
68
65
|
>
|
|
69
66
|
<div style="position: relative;">
|
|
70
|
-
${c.get() !== "s" ?
|
|
71
|
-
class="flash-slot-wrapper"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</div>` : a}
|
|
67
|
+
${c.get() !== "s" ? l`
|
|
68
|
+
<div class="flash-slot-wrapper" style="right: 0px;">
|
|
69
|
+
<slot name="flash" @slotchange=${this.onFlashSlotChange}></slot>
|
|
70
|
+
</div>
|
|
71
|
+
` : a}
|
|
76
72
|
|
|
77
73
|
<div
|
|
78
74
|
class="image-slot-wrapper"
|
|
79
75
|
id="imgWrapper"
|
|
80
|
-
style="width: ${
|
|
76
|
+
style="width: ${i}; height: ${this.height};"
|
|
81
77
|
>
|
|
82
78
|
<slot></slot>
|
|
83
79
|
</div>
|
|
84
80
|
</div>
|
|
85
|
-
${this.type !== "image-only" ?
|
|
86
|
-
<div class="
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</div>
|
|
81
|
+
${this.type !== "image-only" ? l`
|
|
82
|
+
<div class="text-wrapper">
|
|
83
|
+
<div class="label-wrapper">
|
|
84
|
+
${this.type === "detail" ? l`
|
|
85
|
+
<jap-icon iconName="arrow-right" color="black" size="24px"></jap-icon>
|
|
86
|
+
` : a}
|
|
87
|
+
<div class=${w(h)}>${this.label}</div>
|
|
88
|
+
</div>
|
|
94
89
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
90
|
+
${this.type === "default" ? l`
|
|
91
|
+
<div class="divider"></div>
|
|
92
|
+
<div class="description">${this.description}</div>
|
|
93
|
+
` : a}
|
|
94
|
+
</div>
|
|
95
|
+
` : a}
|
|
98
96
|
</div>
|
|
99
97
|
`;
|
|
100
98
|
}
|
|
101
99
|
};
|
|
102
|
-
|
|
100
|
+
e.styles = y(u);
|
|
103
101
|
r([
|
|
104
102
|
m("#imgWrapper")
|
|
105
|
-
],
|
|
103
|
+
], e.prototype, "imgWrapper", 2);
|
|
106
104
|
r([
|
|
107
105
|
m('slot[name="flash"]')
|
|
108
|
-
],
|
|
106
|
+
], e.prototype, "flashSlot", 2);
|
|
109
107
|
r([
|
|
110
108
|
p({ type: String, reflect: !0 })
|
|
111
|
-
],
|
|
109
|
+
], e.prototype, "label", 2);
|
|
112
110
|
r([
|
|
113
111
|
p({ type: String, reflect: !0 })
|
|
114
|
-
],
|
|
112
|
+
], e.prototype, "description", 2);
|
|
115
113
|
r([
|
|
116
114
|
p({ type: String, reflect: !0 })
|
|
117
|
-
],
|
|
115
|
+
], e.prototype, "type", 2);
|
|
118
116
|
r([
|
|
119
117
|
p({ type: String, reflect: !0 })
|
|
120
|
-
],
|
|
118
|
+
], e.prototype, "width", 2);
|
|
121
119
|
r([
|
|
122
120
|
p({ type: String, reflect: !0 })
|
|
123
|
-
],
|
|
121
|
+
], e.prototype, "height", 2);
|
|
124
122
|
r([
|
|
125
123
|
f()
|
|
126
|
-
],
|
|
124
|
+
], e.prototype, "flashWidth", 2);
|
|
127
125
|
r([
|
|
128
126
|
f()
|
|
129
|
-
],
|
|
130
|
-
|
|
127
|
+
], e.prototype, "flashHeight", 2);
|
|
128
|
+
e = r([
|
|
131
129
|
v("jap-image-button")
|
|
132
|
-
],
|
|
130
|
+
], e);
|
|
133
131
|
export {
|
|
134
|
-
|
|
132
|
+
e as JapImageButton
|
|
135
133
|
};
|
|
136
134
|
//# sourceMappingURL=jap-image-button.js.map
|
|
@@ -1 +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
|
|
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('--flash-pos-right', '-' + this.flashWidth / 2 + 'px')\n }\n }\n\n render() {\n const flashGap = this.flashWidth ? this.flashWidth / 2 + 16 : 0\n const processedWidth = this.width.includes('%')\n ? `calc(100% - ${flashGap})`\n : Number(this.width) - flashGap + ''\n const titleClass = {\n title: true,\n [breakpoint.get()]: true,\n }\n\n console.log(processedWidth)\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`\n <div class=\"flash-slot-wrapper\" style=\"right: 0px;\">\n <slot name=\"flash\" @slotchange=${this.onFlashSlotChange}></slot>\n </div>\n `\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`\n <div class=\"text-wrapper\">\n <div class=\"label-wrapper\">\n ${this.type === 'detail'\n ? html`\n <jap-icon iconName=\"arrow-right\" color=\"black\" size=\"24px\"></jap-icon>\n `\n : nothing}\n <div class=${classMap(titleClass)}>${this.label}</div>\n </div>\n\n ${this.type === 'default'\n ? html`\n <div class=\"divider\"></div>\n <div class=\"description\">${this.description}</div>\n `\n : nothing}\n </div>\n `\n : nothing}\n </div>\n `\n }\n}\n"],"names":["JapImageButton","SignalWatcher","LitElement","changed","e","flashSlot","flashWidth","_a","flashGap","processedWidth","titleClass","breakpoint","html","nothing","classMap","unsafeCSS","style","__decorateClass","query","property","state","customElement"],"mappings":"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"}
|
|
@@ -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, 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
|
|
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 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,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;AAtDaN,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;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jotyping/jap-ds",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10-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": "^5.0.
|
|
26
|
+
"@chromatic-com/storybook": "^5.0.2",
|
|
27
27
|
"@eslint/js": "^9.20.0",
|
|
28
|
-
"@storybook/addon-docs": "^10.
|
|
29
|
-
"@storybook/web-components-vite": "^10.
|
|
28
|
+
"@storybook/addon-docs": "^10.3.1",
|
|
29
|
+
"@storybook/web-components-vite": "^10.3.1",
|
|
30
30
|
"@types/node": "^24.1.0",
|
|
31
31
|
"eslint": "^9.20.1",
|
|
32
|
-
"eslint-plugin-storybook": "^10.
|
|
32
|
+
"eslint-plugin-storybook": "^10.3.1",
|
|
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.3.1",
|
|
37
37
|
"typescript": "~5.7.2",
|
|
38
38
|
"typescript-eslint": "^8.24.0",
|
|
39
39
|
"vite": "^6.1.0"
|