@proximus/lavender-drawer 1.0.0-alpha.9 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Drawer.d.ts +22 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +28 -478
- package/package.json +7 -3
package/dist/Drawer.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import '@proximus/lavender-separator';
|
|
2
|
+
import '@proximus/lavender-layout';
|
|
3
|
+
import '@proximus/lavender-button-icon';
|
|
4
|
+
import '@proximus/lavender-icon';
|
|
5
|
+
import '@proximus/lavender-heading';
|
|
6
|
+
import { type Icon } from '@proximus/lavender-icon';
|
|
7
|
+
export declare const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
8
|
+
export declare class Drawer extends HTMLElement {
|
|
9
|
+
template: string;
|
|
10
|
+
constructor();
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
static get observedAttributes(): string[];
|
|
13
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
14
|
+
show(): void;
|
|
15
|
+
hide(): void;
|
|
16
|
+
get $closeButton(): Icon;
|
|
17
|
+
get $dialog(): HTMLDialogElement;
|
|
18
|
+
get open(): boolean;
|
|
19
|
+
set open(value: boolean);
|
|
20
|
+
get ariaLabelCloseButton(): string;
|
|
21
|
+
set ariaLabelCloseButton(value: string);
|
|
22
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Drawer.ts';
|
package/dist/index.es.js
CHANGED
|
@@ -1,469 +1,18 @@
|
|
|
1
1
|
import "@proximus/lavender-separator";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
11
|
-
}
|
|
12
|
-
static get observedAttributes() {
|
|
13
|
-
return [
|
|
14
|
-
...super.observedAttributes,
|
|
15
|
-
"inverted",
|
|
16
|
-
"loading",
|
|
17
|
-
"size",
|
|
18
|
-
"variant"
|
|
19
|
-
];
|
|
20
|
-
}
|
|
21
|
-
connectedCallback() {
|
|
22
|
-
super.connectedCallback();
|
|
23
|
-
const t = this.querySelector("px-icon");
|
|
24
|
-
if (t) {
|
|
25
|
-
const e = t.getAttribute("size"), i = t.getAttribute("color");
|
|
26
|
-
t.addEventListener("click", () => {
|
|
27
|
-
this.$el.focus();
|
|
28
|
-
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
|
|
29
|
-
}
|
|
30
|
-
L(this, this.$el);
|
|
31
|
-
}
|
|
32
|
-
attributeChangedCallback(t, e, i) {
|
|
33
|
-
if (e !== i)
|
|
34
|
-
switch (t) {
|
|
35
|
-
case "loading":
|
|
36
|
-
this.updateLoading();
|
|
37
|
-
break;
|
|
38
|
-
case "size":
|
|
39
|
-
this.updateSize(e, i, R);
|
|
40
|
-
break;
|
|
41
|
-
case "variant":
|
|
42
|
-
this.updateVariant(e, i, P);
|
|
43
|
-
break;
|
|
44
|
-
default:
|
|
45
|
-
super.attributeChangedCallback(t, e, i);
|
|
46
|
-
break;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
checkName(t, e) {
|
|
50
|
-
return t.includes(e);
|
|
51
|
-
}
|
|
52
|
-
_toggleClass(t, e) {
|
|
53
|
-
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
|
|
54
|
-
}
|
|
55
|
-
updateLoading() {
|
|
56
|
-
this.$el.classList.toggle("btn-icon--state-loading");
|
|
57
|
-
}
|
|
58
|
-
updateSize(t, e, i) {
|
|
59
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(`${e} is not a valid size value`);
|
|
60
|
-
}
|
|
61
|
-
updateVariant(t, e, i) {
|
|
62
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`${e} is not a valid variant value`);
|
|
63
|
-
}
|
|
64
|
-
get inverted() {
|
|
65
|
-
return this.getAttribute("inverted");
|
|
66
|
-
}
|
|
67
|
-
set inverted(t) {
|
|
68
|
-
this.setAttribute("inverted", t);
|
|
69
|
-
}
|
|
70
|
-
get loading() {
|
|
71
|
-
return this.getAttribute("loading");
|
|
72
|
-
}
|
|
73
|
-
set loading(t) {
|
|
74
|
-
this.setAttribute("loading", t);
|
|
75
|
-
}
|
|
76
|
-
get size() {
|
|
77
|
-
return this.getAttribute("size");
|
|
78
|
-
}
|
|
79
|
-
set size(t) {
|
|
80
|
-
this.setAttribute("size", t);
|
|
81
|
-
}
|
|
82
|
-
get variant() {
|
|
83
|
-
return this.getAttribute("variant");
|
|
84
|
-
}
|
|
85
|
-
set variant(t) {
|
|
86
|
-
this.setAttribute("variant", t);
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
b.nativeName = "button";
|
|
90
|
-
let d = b;
|
|
91
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon", d);
|
|
92
|
-
const B = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-brand-default);font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);font-style:unset;font-weight:var(--px-font-weight-body);-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-size-icon-s);height:var(--px-size-icon-s);color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.content-neutral-strong{color:var(--px-color-icon-neutral-default)}.content-neutral-weak{color:var(--px-color-icon-dimmed-default)}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}:host([inverted]) i{color:var(--px-color-icon-brand-inverted)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}", D = ["xs", "s", "m", "l", "xl"], j = [
|
|
93
|
-
"",
|
|
94
|
-
"default",
|
|
95
|
-
"inherit",
|
|
96
|
-
"neutral",
|
|
97
|
-
"brand",
|
|
98
|
-
"dimmed",
|
|
99
|
-
"state-hover",
|
|
100
|
-
"state-active",
|
|
101
|
-
"state-disabled",
|
|
102
|
-
"purpose-success",
|
|
103
|
-
"purpose-warning",
|
|
104
|
-
"purpose-error",
|
|
105
|
-
"purpose-unlimited",
|
|
106
|
-
"purpose-promo"
|
|
107
|
-
], G = [
|
|
108
|
-
"name",
|
|
109
|
-
"size",
|
|
110
|
-
"color",
|
|
111
|
-
"aria-label",
|
|
112
|
-
"inverted",
|
|
113
|
-
"from",
|
|
114
|
-
"disabled"
|
|
115
|
-
];
|
|
116
|
-
class O extends T {
|
|
117
|
-
static get observedAttributes() {
|
|
118
|
-
return [...super.observedAttributes, ...G];
|
|
119
|
-
}
|
|
120
|
-
constructor(...t) {
|
|
121
|
-
var e;
|
|
122
|
-
super(...t), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
|
|
123
|
-
}
|
|
124
|
-
attributeChangedCallback(t, e, i) {
|
|
125
|
-
if (e !== i)
|
|
126
|
-
switch (t) {
|
|
127
|
-
case "name":
|
|
128
|
-
this.updateName(e, i);
|
|
129
|
-
break;
|
|
130
|
-
case "size":
|
|
131
|
-
this.updateAttribute(
|
|
132
|
-
t,
|
|
133
|
-
e,
|
|
134
|
-
i,
|
|
135
|
-
D
|
|
136
|
-
);
|
|
137
|
-
break;
|
|
138
|
-
case "color":
|
|
139
|
-
this.updateAttribute(t, e, i, j);
|
|
140
|
-
break;
|
|
141
|
-
case "disabled":
|
|
142
|
-
this.color = "state-disabled";
|
|
143
|
-
break;
|
|
144
|
-
case "aria-label":
|
|
145
|
-
if (!this.internals)
|
|
146
|
-
return;
|
|
147
|
-
i ? this.internals.ariaHidden = "false" : this.internals.ariaHidden = "true";
|
|
148
|
-
break;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
updateAttribute(t, e, i, s) {
|
|
152
|
-
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(`${i} is not an allowed ${t} value`);
|
|
153
|
-
}
|
|
154
|
-
checkName(t, e) {
|
|
155
|
-
return t.includes(e);
|
|
156
|
-
}
|
|
157
|
-
get name() {
|
|
158
|
-
return this.getAttribute("name");
|
|
159
|
-
}
|
|
160
|
-
set name(t) {
|
|
161
|
-
this.setAttribute("name", t);
|
|
162
|
-
}
|
|
163
|
-
get size() {
|
|
164
|
-
return this.getAttribute("size");
|
|
165
|
-
}
|
|
166
|
-
set size(t) {
|
|
167
|
-
this.setAttribute("size", t);
|
|
168
|
-
}
|
|
169
|
-
get color() {
|
|
170
|
-
return this.getAttribute("color");
|
|
171
|
-
}
|
|
172
|
-
set color(t) {
|
|
173
|
-
this.setAttribute("color", t);
|
|
174
|
-
}
|
|
175
|
-
get arialabel() {
|
|
176
|
-
return this.getAttribute("aria-label");
|
|
177
|
-
}
|
|
178
|
-
set arialabel(t) {
|
|
179
|
-
this.setAttribute("aria-label", t);
|
|
180
|
-
}
|
|
181
|
-
get inverted() {
|
|
182
|
-
return this.getAttribute("inverted");
|
|
183
|
-
}
|
|
184
|
-
set inverted(t) {
|
|
185
|
-
this.setAttribute("inverted", t);
|
|
186
|
-
}
|
|
187
|
-
get from() {
|
|
188
|
-
return this.getAttribute("from");
|
|
189
|
-
}
|
|
190
|
-
set from(t) {
|
|
191
|
-
this.setAttribute("from", t);
|
|
192
|
-
}
|
|
193
|
-
get disabled() {
|
|
194
|
-
return this.getAttribute("disabled");
|
|
195
|
-
}
|
|
196
|
-
set disabled(t) {
|
|
197
|
-
this.setAttribute("disabled", t);
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
const $ = new CSSStyleSheet();
|
|
201
|
-
$.replaceSync(B);
|
|
202
|
-
class W extends O {
|
|
203
|
-
constructor() {
|
|
204
|
-
super($), this.template = () => `<svg>
|
|
205
|
-
<use xlink:href="#icon-${this.name}"></use>
|
|
206
|
-
</svg>`, this.shadowRoot.innerHTML = this.template();
|
|
207
|
-
}
|
|
208
|
-
connectedCallback() {
|
|
209
|
-
const t = document.querySelectorAll("px-icon-set");
|
|
210
|
-
t || console.log("<px-icon-set> component not found");
|
|
211
|
-
for (const e of t) {
|
|
212
|
-
if (!e.getAttribute("name") || !e.getAttribute("src")) {
|
|
213
|
-
console.error("Icon name or src not found");
|
|
214
|
-
continue;
|
|
215
|
-
}
|
|
216
|
-
e.getAttribute("name") === this.from && e.getAttribute("type") !== "font" && (this.src = e.getAttribute("src"), this.$el.firstElementChild.setAttribute(
|
|
217
|
-
"xlink:href",
|
|
218
|
-
`${this.src}#icon-${this.name}`
|
|
219
|
-
));
|
|
220
|
-
}
|
|
221
|
-
!this.ariaLabel && this.internals && (this.internals.ariaHidden = "true");
|
|
222
|
-
}
|
|
223
|
-
updateName(t, e) {
|
|
224
|
-
this.src && this.$el.firstElementChild.setAttribute(
|
|
225
|
-
"xlink:href",
|
|
226
|
-
`${this.src}#icon-${e}`
|
|
227
|
-
);
|
|
228
|
-
}
|
|
229
|
-
get $el() {
|
|
230
|
-
return this.shadowRoot.querySelector("svg");
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
customElements.get("px-icon") || customElements.define("px-icon", W);
|
|
234
|
-
class F extends HTMLElement {
|
|
235
|
-
constructor() {
|
|
236
|
-
super();
|
|
237
|
-
}
|
|
238
|
-
static get observedAttributes() {
|
|
239
|
-
return ["name", "src", "type", "format"];
|
|
240
|
-
}
|
|
241
|
-
connectedCallback() {
|
|
242
|
-
if (document.querySelectorAll(
|
|
243
|
-
`px-icon-set[name="${this.getAttribute("name")}"]`
|
|
244
|
-
).length > 1 && (console.warn(
|
|
245
|
-
"Only one <px-icon-set> component is allowed, self removing"
|
|
246
|
-
), this.remove()), this.getAttribute("type") === "font") {
|
|
247
|
-
const e = document.createElement("style");
|
|
248
|
-
e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
|
|
249
|
-
@font-face {
|
|
250
|
-
font-family: 'lavender';
|
|
251
|
-
src:
|
|
252
|
-
url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
|
|
253
|
-
font-weight: normal;
|
|
254
|
-
font-style: normal;
|
|
255
|
-
font-display: block;
|
|
256
|
-
}
|
|
257
|
-
`, document.head.appendChild(e);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
disconnectedCallback() {
|
|
261
|
-
const t = document.querySelector(
|
|
262
|
-
`style[data-name="${this.getAttribute("name")}"]`
|
|
263
|
-
);
|
|
264
|
-
t && t.remove();
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set", F);
|
|
268
|
-
const J = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}", K = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-neutral{color:var(--px-color-text-neutral-default)}.color-dimmed{color:var(--px-color-text-dimmed-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}.color-state-hover{color:var(--px-color-text-state-hover-default)}.color-state-active{color:var(--px-color-text-state-active-default)}.color-state-disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", S = new CSSStyleSheet();
|
|
269
|
-
S.replaceSync(J);
|
|
270
|
-
const C = new CSSStyleSheet();
|
|
271
|
-
C.replaceSync(K);
|
|
272
|
-
class n extends A {
|
|
273
|
-
template() {
|
|
274
|
-
return "<slot></slot>";
|
|
275
|
-
}
|
|
276
|
-
constructor(t) {
|
|
277
|
-
super(S, C);
|
|
278
|
-
const e = document.createElement(t);
|
|
279
|
-
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
280
|
-
}
|
|
281
|
-
static get observedAttributes() {
|
|
282
|
-
return [
|
|
283
|
-
...super.observedAttributes,
|
|
284
|
-
"variant",
|
|
285
|
-
"color",
|
|
286
|
-
"text-align",
|
|
287
|
-
"text-align--mobile",
|
|
288
|
-
"text-align--tablet",
|
|
289
|
-
"text-align--laptop",
|
|
290
|
-
"text-align--desktop",
|
|
291
|
-
"inverted"
|
|
292
|
-
];
|
|
293
|
-
}
|
|
294
|
-
attributeChangedCallback(t, e, i) {
|
|
295
|
-
if (e !== i)
|
|
296
|
-
switch (t) {
|
|
297
|
-
case "variant":
|
|
298
|
-
this.updateAttribute(t, e, i, M);
|
|
299
|
-
break;
|
|
300
|
-
case "color":
|
|
301
|
-
this.updateColor(e, i, I);
|
|
302
|
-
break;
|
|
303
|
-
case "text-align":
|
|
304
|
-
case "text-align--mobile":
|
|
305
|
-
case "text-align--tablet":
|
|
306
|
-
case "text-align--laptop":
|
|
307
|
-
case "text-align--desktop":
|
|
308
|
-
this.updateTextAlign(t, e, i, q);
|
|
309
|
-
break;
|
|
310
|
-
default:
|
|
311
|
-
super.attributeChangedCallback(t, e, i);
|
|
312
|
-
break;
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
toggleClass(t, e) {
|
|
316
|
-
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
317
|
-
}
|
|
318
|
-
checkName(t, e) {
|
|
319
|
-
return t.includes(e);
|
|
320
|
-
}
|
|
321
|
-
updateAttribute(t, e, i, s) {
|
|
322
|
-
this.checkName(s, i) ? this.toggleClass(e, i) : console.error(`${i} is not an allowed "${t}" value`);
|
|
323
|
-
}
|
|
324
|
-
updateColor(t, e, i) {
|
|
325
|
-
if (!this.checkName(i, e)) {
|
|
326
|
-
console.error(`${e} is not a valid color value`);
|
|
327
|
-
return;
|
|
328
|
-
}
|
|
329
|
-
const s = (o) => {
|
|
330
|
-
o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
|
|
331
|
-
"--heading-color-default",
|
|
332
|
-
`var(--px-color-text-${o}-default)`
|
|
333
|
-
), this.$el.style.setProperty(
|
|
334
|
-
"--heading-color-inverted",
|
|
335
|
-
`var(--px-color-text-${o}-inverted)`
|
|
336
|
-
));
|
|
337
|
-
};
|
|
338
|
-
s(t), s(e);
|
|
339
|
-
}
|
|
340
|
-
updateTextAlign(t, e, i, s) {
|
|
341
|
-
if (!this.checkName(s, i)) {
|
|
342
|
-
console.error(`${i} is not a valid value for ${t}`);
|
|
343
|
-
return;
|
|
344
|
-
}
|
|
345
|
-
const o = (r, l) => {
|
|
346
|
-
l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
|
|
347
|
-
`--heading-text-align--${r}`,
|
|
348
|
-
l
|
|
349
|
-
);
|
|
350
|
-
};
|
|
351
|
-
if (t === "text-align")
|
|
352
|
-
["mobile", "tablet", "laptop", "desktop"].forEach((r) => {
|
|
353
|
-
o(r, e), o(r, i);
|
|
354
|
-
});
|
|
355
|
-
else {
|
|
356
|
-
const r = t.split("--")[1];
|
|
357
|
-
o(r, e), o(r, i);
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
get variant() {
|
|
361
|
-
return this.getAttribute("variant");
|
|
362
|
-
}
|
|
363
|
-
set variant(t) {
|
|
364
|
-
this.setAttribute("variant", t);
|
|
365
|
-
}
|
|
366
|
-
get color() {
|
|
367
|
-
return this.getAttribute("color");
|
|
368
|
-
}
|
|
369
|
-
set color(t) {
|
|
370
|
-
this.setAttribute("color", t);
|
|
371
|
-
}
|
|
372
|
-
get textAlign() {
|
|
373
|
-
return this.getAttribute("text-align");
|
|
374
|
-
}
|
|
375
|
-
set textAlign(t) {
|
|
376
|
-
this.setAttribute("text-align", t);
|
|
377
|
-
}
|
|
378
|
-
get textAlignMobile() {
|
|
379
|
-
return this.getAttribute("text-align--mobile");
|
|
380
|
-
}
|
|
381
|
-
set textAlignMobile(t) {
|
|
382
|
-
this.setAttribute("text-align--mobile", t);
|
|
383
|
-
}
|
|
384
|
-
get textAlignTablet() {
|
|
385
|
-
return this.getAttribute("text-align--tablet");
|
|
386
|
-
}
|
|
387
|
-
set textAlignTablet(t) {
|
|
388
|
-
this.setAttribute("text-align--tablet", t);
|
|
389
|
-
}
|
|
390
|
-
get textAlignLaptop() {
|
|
391
|
-
return this.getAttribute("text-align--laptop");
|
|
392
|
-
}
|
|
393
|
-
set textAlignLaptop(t) {
|
|
394
|
-
this.setAttribute("text-align--laptop", t);
|
|
395
|
-
}
|
|
396
|
-
get textAlignDesktop() {
|
|
397
|
-
return this.getAttribute("text-align--desktop");
|
|
398
|
-
}
|
|
399
|
-
set textAlignDesktop(t) {
|
|
400
|
-
this.setAttribute("text-align--desktop", t);
|
|
401
|
-
}
|
|
402
|
-
get inverted() {
|
|
403
|
-
return this.getAttribute("inverted");
|
|
404
|
-
}
|
|
405
|
-
set inverted(t) {
|
|
406
|
-
this.setAttribute("inverted", t);
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
const u = class u extends n {
|
|
410
|
-
constructor() {
|
|
411
|
-
super("h1");
|
|
412
|
-
}
|
|
413
|
-
};
|
|
414
|
-
u.nativeName = "h1";
|
|
415
|
-
let c = u;
|
|
416
|
-
customElements.define("px-h1", c);
|
|
417
|
-
const f = class f extends n {
|
|
418
|
-
constructor() {
|
|
419
|
-
super("h2");
|
|
420
|
-
}
|
|
421
|
-
};
|
|
422
|
-
f.nativeName = "h2";
|
|
423
|
-
let h = f;
|
|
424
|
-
customElements.define("px-h2", h);
|
|
425
|
-
const m = class m extends n {
|
|
426
|
-
constructor() {
|
|
427
|
-
super("h3");
|
|
428
|
-
}
|
|
429
|
-
};
|
|
430
|
-
m.nativeName = "h3";
|
|
431
|
-
let p = m;
|
|
432
|
-
customElements.define("px-h3", p);
|
|
433
|
-
const z = class z extends n {
|
|
434
|
-
constructor() {
|
|
435
|
-
super("h4");
|
|
436
|
-
}
|
|
437
|
-
};
|
|
438
|
-
z.nativeName = "h4";
|
|
439
|
-
let x = z;
|
|
440
|
-
customElements.define("px-h4", x);
|
|
441
|
-
const y = class y extends n {
|
|
442
|
-
constructor() {
|
|
443
|
-
super("h5");
|
|
444
|
-
}
|
|
445
|
-
};
|
|
446
|
-
y.nativeName = "h5";
|
|
447
|
-
let v = y;
|
|
448
|
-
customElements.define("px-h5", v);
|
|
449
|
-
const k = class k extends n {
|
|
450
|
-
constructor() {
|
|
451
|
-
super("h6");
|
|
452
|
-
}
|
|
453
|
-
};
|
|
454
|
-
k.nativeName = "h6";
|
|
455
|
-
let g = k;
|
|
456
|
-
customElements.define("px-h6", g);
|
|
457
|
-
const Q = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default)}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:80vh;overflow:auto;padding:var(--px-padding-m-desktop)}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media screen and (max-width: 1081px){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;border-radius:var(--px-radius-main);animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile)}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:45px;padding:var(--px-padding-m-mobile)}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}', E = new CSSStyleSheet();
|
|
458
|
-
E.replaceSync(Q);
|
|
459
|
-
const U = "px.lavender.drawer.hide";
|
|
460
|
-
class X extends HTMLElement {
|
|
3
|
+
import "@proximus/lavender-button-icon";
|
|
4
|
+
import "@proximus/lavender-icon";
|
|
5
|
+
import "@proximus/lavender-heading";
|
|
6
|
+
const n = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:80vh;overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:2.813em}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}', s = new CSSStyleSheet();
|
|
7
|
+
s.replaceSync(n);
|
|
8
|
+
const d = "px.lavender.drawer.hide";
|
|
9
|
+
class l extends HTMLElement {
|
|
461
10
|
constructor() {
|
|
462
11
|
super(), this.template = `<dialog popover role="dialog" aria-modal="true" >
|
|
463
12
|
<div id="container">
|
|
464
|
-
<px-vstack gap="
|
|
465
|
-
<px-vstack gap="
|
|
466
|
-
<px-h1 variant="title-
|
|
13
|
+
<px-vstack gap="l" >
|
|
14
|
+
<px-vstack gap="heading-to-subtitle">
|
|
15
|
+
<px-h1 variant="title-2xl">
|
|
467
16
|
<slot name="title"></slot>
|
|
468
17
|
</px-h1>
|
|
469
18
|
<px-h2 variant="subtitle" color="neutral">
|
|
@@ -475,11 +24,12 @@ class X extends HTMLElement {
|
|
|
475
24
|
</div>
|
|
476
25
|
<px-separator size="m"></px-separator>
|
|
477
26
|
<px-stack
|
|
478
|
-
gap
|
|
479
|
-
gap="default"
|
|
27
|
+
gap="s"
|
|
480
28
|
justify-content="flex-end"
|
|
29
|
+
align-items="center"
|
|
30
|
+
align-items--mobile="stretch"
|
|
481
31
|
direction="row"
|
|
482
|
-
direction--mobile="column"
|
|
32
|
+
direction--mobile="column-reverse"
|
|
483
33
|
>
|
|
484
34
|
<slot name="footer"></slot>
|
|
485
35
|
</px-stack>
|
|
@@ -488,7 +38,7 @@ class X extends HTMLElement {
|
|
|
488
38
|
<px-icon name="cross" from="lavender"></px-icon>
|
|
489
39
|
</px-button-icon>
|
|
490
40
|
</div>
|
|
491
|
-
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
41
|
+
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [s], this.hasAttribute("showfrom") || this.setAttribute("showfrom", "bottom");
|
|
492
42
|
}
|
|
493
43
|
connectedCallback() {
|
|
494
44
|
if (this.hasAttribute("closedby")) {
|
|
@@ -514,22 +64,22 @@ class X extends HTMLElement {
|
|
|
514
64
|
static get observedAttributes() {
|
|
515
65
|
return ["open", "aria-label-close-button"];
|
|
516
66
|
}
|
|
517
|
-
attributeChangedCallback(t,
|
|
518
|
-
var
|
|
519
|
-
t === "open" ? i !== null ? this.show() : this.hide() : t === "aria-label-close-button" && (i ? (r = (
|
|
520
|
-
|
|
67
|
+
attributeChangedCallback(t, o, i) {
|
|
68
|
+
var a, e, r;
|
|
69
|
+
t === "open" ? i !== null ? this.show() : this.hide() : t === "aria-label-close-button" && (i ? (r = (e = this.$closeButton) == null ? void 0 : e.setAttribute) == null || r.call(
|
|
70
|
+
e,
|
|
521
71
|
"aria-label",
|
|
522
72
|
i || "Close drawer"
|
|
523
|
-
) : (
|
|
73
|
+
) : (a = this.$closeButton) == null || a.removeAttribute("aria-label"));
|
|
524
74
|
}
|
|
525
75
|
show() {
|
|
526
|
-
var t,
|
|
527
|
-
(
|
|
76
|
+
var t, o;
|
|
77
|
+
(o = (t = this.$dialog).showPopover) == null || o.call(t);
|
|
528
78
|
}
|
|
529
79
|
hide() {
|
|
530
|
-
var t,
|
|
531
|
-
(
|
|
532
|
-
new Event(
|
|
80
|
+
var t, o;
|
|
81
|
+
(o = (t = this.$dialog).hidePopover) == null || o.call(t), this.dispatchEvent(
|
|
82
|
+
new Event(d, {
|
|
533
83
|
bubbles: !0,
|
|
534
84
|
composed: !0
|
|
535
85
|
})
|
|
@@ -554,8 +104,8 @@ class X extends HTMLElement {
|
|
|
554
104
|
this.setAttribute("aria-label-close-button", t);
|
|
555
105
|
}
|
|
556
106
|
}
|
|
557
|
-
customElements.get("px-drawer") || customElements.define("px-drawer",
|
|
107
|
+
customElements.get("px-drawer") || customElements.define("px-drawer", l);
|
|
558
108
|
export {
|
|
559
|
-
|
|
560
|
-
|
|
109
|
+
l as Drawer,
|
|
110
|
+
d as HIDE_EVENT
|
|
561
111
|
};
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-drawer",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
6
7
|
"files": [
|
|
7
8
|
"dist"
|
|
8
9
|
],
|
|
@@ -10,11 +11,14 @@
|
|
|
10
11
|
"scripts": {
|
|
11
12
|
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
12
13
|
"clean": "rm -rf dist",
|
|
13
|
-
"build": "npm run clean &&
|
|
14
|
-
"test": "vitest run --coverage"
|
|
14
|
+
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
|
+
"test": "vitest run --coverage",
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
|
|
15
17
|
},
|
|
16
18
|
"publishConfig": {
|
|
17
19
|
"access": "public"
|
|
18
20
|
},
|
|
21
|
+
"customElements": "dist/custom-elements.json",
|
|
22
|
+
"web-types": "./dist/web-types.json",
|
|
19
23
|
"gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
|
|
20
24
|
}
|