@proximus/lavender-carousel 1.0.0-alpha.7 → 1.0.0-beta.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/AppleSeed.d.ts +10 -0
- package/dist/Carousel.d.ts +29 -0
- package/dist/index.d.ts +2 -0
- package/dist/{index.js → index.es.js} +362 -296
- package/package.json +11 -33
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare class AppleSeed extends HTMLElement {
|
|
2
|
+
template: (amount: number, activeIndex: number) => string;
|
|
3
|
+
constructor();
|
|
4
|
+
static get observedAttributes(): string[];
|
|
5
|
+
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
6
|
+
handleActive(oldValue: string, newValue: string): void;
|
|
7
|
+
get $active(): Element;
|
|
8
|
+
get amount(): number;
|
|
9
|
+
get active(): number;
|
|
10
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
|
|
2
|
+
import '@proximus/lavender-layout';
|
|
3
|
+
import '@proximus/lavender-button-icon';
|
|
4
|
+
import '@proximus/lavender-icon';
|
|
5
|
+
import './AppleSeed.ts';
|
|
6
|
+
import { type AppleSeed } from './AppleSeed.ts';
|
|
7
|
+
export declare class Carousel extends HTMLElement {
|
|
8
|
+
visibleItemsAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
|
+
template: string;
|
|
10
|
+
constructor();
|
|
11
|
+
static get observedAttributes(): string[];
|
|
12
|
+
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
13
|
+
connectedCallback(): void;
|
|
14
|
+
private onScroll;
|
|
15
|
+
private handleNextPrevious;
|
|
16
|
+
private handleAppleSeedDisplay;
|
|
17
|
+
isScrolling(): boolean;
|
|
18
|
+
get $appleseedContainer(): AppleSeed;
|
|
19
|
+
get $appleseed(): AppleSeed;
|
|
20
|
+
get $carousel(): HTMLDivElement;
|
|
21
|
+
get $previous(): HTMLButtonElement;
|
|
22
|
+
get $next(): HTMLButtonElement;
|
|
23
|
+
get $firstItem(): CarouselItem;
|
|
24
|
+
get itemNumbers(): number;
|
|
25
|
+
}
|
|
26
|
+
export declare class CarouselItem extends HTMLElement {
|
|
27
|
+
template: string;
|
|
28
|
+
constructor();
|
|
29
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var q = (r) => {
|
|
2
|
+
throw TypeError(r);
|
|
3
|
+
};
|
|
4
|
+
var W = (r, t, e) => t.has(r) || q("Cannot " + e);
|
|
5
|
+
var d = (r, t, e) => (W(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), C = (r, t, e, i) => (W(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
|
|
6
|
+
import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as _, checkName as rt, backgroundColorValues as ot, PxElement as st, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
|
|
7
|
+
const ct = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", dt = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", pt = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', B = new CSSStyleSheet();
|
|
8
|
+
B.replaceSync(pt);
|
|
9
|
+
const ut = [
|
|
5
10
|
"",
|
|
6
11
|
"default",
|
|
7
12
|
"row",
|
|
8
13
|
"row-reverse",
|
|
9
14
|
"column",
|
|
10
15
|
"column-reverse"
|
|
11
|
-
],
|
|
16
|
+
], ht = [
|
|
12
17
|
"",
|
|
13
18
|
"default",
|
|
14
19
|
"stretch",
|
|
@@ -16,7 +21,7 @@ const it = [
|
|
|
16
21
|
"flex-end",
|
|
17
22
|
"center",
|
|
18
23
|
"baseline"
|
|
19
|
-
],
|
|
24
|
+
], bt = [
|
|
20
25
|
"",
|
|
21
26
|
"default",
|
|
22
27
|
"flex-start",
|
|
@@ -25,15 +30,20 @@ const it = [
|
|
|
25
30
|
"space-between",
|
|
26
31
|
"space-around",
|
|
27
32
|
"space-evenly"
|
|
28
|
-
],
|
|
29
|
-
class
|
|
33
|
+
], gt = ["", "default", "nowrap", "wrap", "wrap-reverse"], vt = ["", "visible", "hidden", "scroll", "auto"];
|
|
34
|
+
class E extends T {
|
|
30
35
|
constructor() {
|
|
31
|
-
super(
|
|
36
|
+
super(B), this.overflowXAttributeDelegate = new F(
|
|
37
|
+
this,
|
|
38
|
+
"overflow-x",
|
|
39
|
+
(t) => t,
|
|
40
|
+
"--overflow-x"
|
|
41
|
+
), this.template = `<div class="flex-container">
|
|
32
42
|
<slot></slot>
|
|
33
43
|
</div>`, this.shadowRoot.innerHTML = this.template;
|
|
34
44
|
}
|
|
35
45
|
connectedCallback() {
|
|
36
|
-
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "
|
|
46
|
+
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
|
|
37
47
|
}
|
|
38
48
|
static get observedAttributes() {
|
|
39
49
|
return [
|
|
@@ -62,7 +72,12 @@ class $ extends w {
|
|
|
62
72
|
"wrap--mobile",
|
|
63
73
|
"wrap--tablet",
|
|
64
74
|
"wrap--laptop",
|
|
65
|
-
"wrap--desktop"
|
|
75
|
+
"wrap--desktop",
|
|
76
|
+
"overflow-x",
|
|
77
|
+
"overflow-x--mobile",
|
|
78
|
+
"overflow-x--tablet",
|
|
79
|
+
"overflow-x--laptop",
|
|
80
|
+
"overflow-x--desktop"
|
|
66
81
|
];
|
|
67
82
|
}
|
|
68
83
|
attributeChangedCallback(t, e, i) {
|
|
@@ -72,7 +87,7 @@ class $ extends w {
|
|
|
72
87
|
case "gap--tablet":
|
|
73
88
|
case "gap--laptop":
|
|
74
89
|
case "gap--desktop":
|
|
75
|
-
this.updateFlexProperties(t, e, i,
|
|
90
|
+
this.updateFlexProperties(t, e, i, _);
|
|
76
91
|
break;
|
|
77
92
|
case "justify-content":
|
|
78
93
|
case "justify-content--mobile":
|
|
@@ -83,7 +98,7 @@ class $ extends w {
|
|
|
83
98
|
t,
|
|
84
99
|
e,
|
|
85
100
|
i,
|
|
86
|
-
|
|
101
|
+
bt
|
|
87
102
|
);
|
|
88
103
|
break;
|
|
89
104
|
case "align-items":
|
|
@@ -91,41 +106,59 @@ class $ extends w {
|
|
|
91
106
|
case "align-items--tablet":
|
|
92
107
|
case "align-items--laptop":
|
|
93
108
|
case "align-items--desktop":
|
|
94
|
-
this.updateFlexProperties(t, e, i,
|
|
109
|
+
this.updateFlexProperties(t, e, i, ht);
|
|
95
110
|
break;
|
|
96
111
|
case "wrap":
|
|
97
112
|
case "wrap--mobile":
|
|
98
113
|
case "wrap--tablet":
|
|
99
114
|
case "wrap--laptop":
|
|
100
115
|
case "wrap--desktop":
|
|
101
|
-
this.updateFlexProperties(t, e, i,
|
|
116
|
+
this.updateFlexProperties(t, e, i, gt);
|
|
102
117
|
break;
|
|
103
118
|
case "direction":
|
|
104
119
|
case "direction--mobile":
|
|
105
120
|
case "direction--tablet":
|
|
106
121
|
case "direction--laptop":
|
|
107
122
|
case "direction--desktop":
|
|
108
|
-
this.updateFlexProperties(t, e, i,
|
|
123
|
+
this.updateFlexProperties(t, e, i, ut);
|
|
124
|
+
break;
|
|
125
|
+
case "overflow-x":
|
|
126
|
+
case "overflow-x--mobile":
|
|
127
|
+
case "overflow-x--tablet":
|
|
128
|
+
case "overflow-x--laptop":
|
|
129
|
+
case "overflow-x--desktop":
|
|
130
|
+
this.updateOverflowX(t, e, i, vt);
|
|
109
131
|
break;
|
|
110
132
|
default:
|
|
111
133
|
super.attributeChangedCallback(t, e, i);
|
|
112
134
|
break;
|
|
113
135
|
}
|
|
114
136
|
}
|
|
137
|
+
updateOverflowX(t, e, i, o) {
|
|
138
|
+
if (!rt(o, i)) {
|
|
139
|
+
console.error(`${i} is not an allowed ${t} value`);
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
143
|
+
t,
|
|
144
|
+
e,
|
|
145
|
+
i
|
|
146
|
+
);
|
|
147
|
+
}
|
|
115
148
|
updateFlexProperties(t, e, i, o) {
|
|
116
|
-
this.checkName(o, i) || console.error(
|
|
117
|
-
const
|
|
118
|
-
if (!
|
|
119
|
-
this.getAttribute(
|
|
120
|
-
this.updateStyle(
|
|
149
|
+
this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
|
|
150
|
+
const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
|
|
151
|
+
if (!n)
|
|
152
|
+
this.getAttribute(l + "--mobile") || a.push("mobile"), this.getAttribute(l + "--tablet") || a.push("tablet"), this.getAttribute(l + "--laptop") || a.push("laptop"), this.getAttribute(l + "--desktop") || a.push("desktop"), a.forEach((c) => {
|
|
153
|
+
this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
|
|
121
154
|
});
|
|
122
155
|
else {
|
|
123
|
-
const
|
|
124
|
-
this.updateStyle(
|
|
156
|
+
const c = t.split("--")[1];
|
|
157
|
+
this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
|
|
125
158
|
}
|
|
126
159
|
}
|
|
127
160
|
updateStyle(t, e, i, o) {
|
|
128
|
-
i
|
|
161
|
+
i && (t === "gap" && o && o.includes(i) ? this.$el.style.setProperty(
|
|
129
162
|
`--flex-${t}--${e}-value`,
|
|
130
163
|
`var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
|
|
131
164
|
) : this.$el.style.setProperty(
|
|
@@ -133,9 +166,6 @@ class $ extends w {
|
|
|
133
166
|
i
|
|
134
167
|
));
|
|
135
168
|
}
|
|
136
|
-
checkName(t, e) {
|
|
137
|
-
return t.includes(e);
|
|
138
|
-
}
|
|
139
169
|
get direction() {
|
|
140
170
|
return this.getAttribute("direction");
|
|
141
171
|
}
|
|
@@ -190,6 +220,12 @@ class $ extends w {
|
|
|
190
220
|
set gapLaptop(t) {
|
|
191
221
|
this.setAttribute("gap--laptop", t);
|
|
192
222
|
}
|
|
223
|
+
get gapDesktop() {
|
|
224
|
+
return this.getAttribute("gap--desktop");
|
|
225
|
+
}
|
|
226
|
+
set gapDesktop(t) {
|
|
227
|
+
this.setAttribute("gap--desktop", t);
|
|
228
|
+
}
|
|
193
229
|
get justifyContent() {
|
|
194
230
|
return this.getAttribute("justify-content");
|
|
195
231
|
}
|
|
@@ -280,12 +316,42 @@ class $ extends w {
|
|
|
280
316
|
set wrapDesktop(t) {
|
|
281
317
|
this.setAttribute("wrap--desktop", t);
|
|
282
318
|
}
|
|
319
|
+
get overflowX() {
|
|
320
|
+
return this.getAttribute("overflow-x");
|
|
321
|
+
}
|
|
322
|
+
set overflowX(t) {
|
|
323
|
+
this.setAttribute("overflow-x", t);
|
|
324
|
+
}
|
|
325
|
+
get overflowXMobile() {
|
|
326
|
+
return this.getAttribute("overflow-x--mobile");
|
|
327
|
+
}
|
|
328
|
+
set overflowXMobile(t) {
|
|
329
|
+
this.setAttribute("overflow-x--mobile", t);
|
|
330
|
+
}
|
|
331
|
+
get overflowXTablet() {
|
|
332
|
+
return this.getAttribute("overflow-x--tablet");
|
|
333
|
+
}
|
|
334
|
+
set overflowXTablet(t) {
|
|
335
|
+
this.setAttribute("overflow-x--tablet", t);
|
|
336
|
+
}
|
|
337
|
+
get overflowXLaptop() {
|
|
338
|
+
return this.getAttribute("overflow-x--laptop");
|
|
339
|
+
}
|
|
340
|
+
set overflowXLaptop(t) {
|
|
341
|
+
this.setAttribute("overflow-x--laptop", t);
|
|
342
|
+
}
|
|
343
|
+
get overflowXDesktop() {
|
|
344
|
+
return this.getAttribute("overflow-x--desktop");
|
|
345
|
+
}
|
|
346
|
+
set overflowXDesktop(t) {
|
|
347
|
+
this.setAttribute("overflow-x--desktop", t);
|
|
348
|
+
}
|
|
283
349
|
get $el() {
|
|
284
350
|
return this.shadowRoot.querySelector(".flex-container");
|
|
285
351
|
}
|
|
286
352
|
}
|
|
287
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
288
|
-
class
|
|
353
|
+
customElements.get("px-stack") || customElements.define("px-stack", E);
|
|
354
|
+
class ft extends E {
|
|
289
355
|
constructor() {
|
|
290
356
|
super();
|
|
291
357
|
}
|
|
@@ -293,8 +359,8 @@ class at extends $ {
|
|
|
293
359
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
294
360
|
}
|
|
295
361
|
}
|
|
296
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
297
|
-
class
|
|
362
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", ft);
|
|
363
|
+
class xt extends E {
|
|
298
364
|
constructor() {
|
|
299
365
|
super();
|
|
300
366
|
}
|
|
@@ -302,8 +368,8 @@ class nt extends $ {
|
|
|
302
368
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
303
369
|
}
|
|
304
370
|
}
|
|
305
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
306
|
-
class
|
|
371
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", xt);
|
|
372
|
+
class mt extends HTMLElement {
|
|
307
373
|
constructor() {
|
|
308
374
|
super();
|
|
309
375
|
}
|
|
@@ -323,12 +389,12 @@ class ct extends HTMLElement {
|
|
|
323
389
|
this.setAttribute("grow", t);
|
|
324
390
|
}
|
|
325
391
|
}
|
|
326
|
-
customElements.define("px-spacer",
|
|
327
|
-
const
|
|
328
|
-
|
|
329
|
-
class
|
|
392
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", mt);
|
|
393
|
+
const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", G = new CSSStyleSheet();
|
|
394
|
+
G.replaceSync(kt);
|
|
395
|
+
class yt extends T {
|
|
330
396
|
constructor() {
|
|
331
|
-
super(
|
|
397
|
+
super(G), this.template = (t) => `
|
|
332
398
|
<px-container border-radius="none" padding="none">
|
|
333
399
|
<px-vstack>
|
|
334
400
|
<px-container id="header-container" border-radius="none">
|
|
@@ -336,7 +402,7 @@ class dt extends w {
|
|
|
336
402
|
<px-spacer></px-spacer>
|
|
337
403
|
<px-vstack
|
|
338
404
|
id="header-vstack-container"
|
|
339
|
-
gap="
|
|
405
|
+
gap="s"
|
|
340
406
|
grow="${this.grow}"
|
|
341
407
|
basis="${this.basis}"
|
|
342
408
|
>
|
|
@@ -368,7 +434,7 @@ class dt extends w {
|
|
|
368
434
|
${t ? ` <px-hstack>
|
|
369
435
|
<px-spacer></px-spacer>
|
|
370
436
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
371
|
-
<px-vstack gap="
|
|
437
|
+
<px-vstack gap="s">
|
|
372
438
|
<slot name="image-sticky-container"></slot>
|
|
373
439
|
</px-vstack>
|
|
374
440
|
</px-container>
|
|
@@ -386,7 +452,7 @@ class dt extends w {
|
|
|
386
452
|
<px-spacer></px-spacer>
|
|
387
453
|
<px-vstack
|
|
388
454
|
id="body-vstack-container"
|
|
389
|
-
gap="
|
|
455
|
+
gap="l"
|
|
390
456
|
grow="${this.grow}"
|
|
391
457
|
basis="${this.basis}"
|
|
392
458
|
>
|
|
@@ -399,14 +465,14 @@ class dt extends w {
|
|
|
399
465
|
id="contact-container"
|
|
400
466
|
border-radius="none"
|
|
401
467
|
id="main"
|
|
402
|
-
background-color="
|
|
468
|
+
background-color="surface-default"
|
|
403
469
|
padding="none"
|
|
404
470
|
padding-top="xl"
|
|
405
471
|
padding-bottom="xl"
|
|
406
472
|
>
|
|
407
473
|
<px-hstack>
|
|
408
474
|
<px-spacer></px-spacer>
|
|
409
|
-
<px-vstack gap="
|
|
475
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
410
476
|
<slot name="contact-container"></slot>
|
|
411
477
|
</px-vstack>
|
|
412
478
|
<px-spacer></px-spacer>
|
|
@@ -422,7 +488,7 @@ class dt extends w {
|
|
|
422
488
|
>
|
|
423
489
|
<px-hstack>
|
|
424
490
|
<px-spacer></px-spacer>
|
|
425
|
-
<px-vstack gap="
|
|
491
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
426
492
|
<slot name="footer-container"></slot>
|
|
427
493
|
</px-vstack>
|
|
428
494
|
<px-spacer></px-spacer>
|
|
@@ -505,7 +571,7 @@ class dt extends w {
|
|
|
505
571
|
case "background-color":
|
|
506
572
|
this.$bodyContainer.setAttribute(
|
|
507
573
|
"background-color",
|
|
508
|
-
|
|
574
|
+
ot.indexOf(i) > 0 ? i : "none"
|
|
509
575
|
);
|
|
510
576
|
break;
|
|
511
577
|
case "padding-vertical":
|
|
@@ -525,12 +591,17 @@ class dt extends w {
|
|
|
525
591
|
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
526
592
|
}
|
|
527
593
|
}
|
|
528
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
529
|
-
const
|
|
530
|
-
|
|
531
|
-
const
|
|
594
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", yt);
|
|
595
|
+
const wt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", U = new CSSStyleSheet();
|
|
596
|
+
U.replaceSync(wt);
|
|
597
|
+
const At = ["", "default", "small"], $t = [
|
|
598
|
+
"",
|
|
599
|
+
"default",
|
|
600
|
+
"secondary",
|
|
601
|
+
"naked"
|
|
602
|
+
], R = class R extends st {
|
|
532
603
|
constructor() {
|
|
533
|
-
super(
|
|
604
|
+
super(U), this.template = () => "<slot></slot>";
|
|
534
605
|
const t = document.createElement(this.nativeName);
|
|
535
606
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
536
607
|
}
|
|
@@ -540,7 +611,8 @@ const ht = ["", "default", "small"], ut = ["", "default", "secondary", "naked"],
|
|
|
540
611
|
"inverted",
|
|
541
612
|
"loading",
|
|
542
613
|
"size",
|
|
543
|
-
"variant"
|
|
614
|
+
"variant",
|
|
615
|
+
"aria-expanded"
|
|
544
616
|
];
|
|
545
617
|
}
|
|
546
618
|
connectedCallback() {
|
|
@@ -550,9 +622,9 @@ const ht = ["", "default", "small"], ut = ["", "default", "secondary", "naked"],
|
|
|
550
622
|
const e = t.getAttribute("size"), i = t.getAttribute("color");
|
|
551
623
|
t.addEventListener("click", () => {
|
|
552
624
|
this.$el.focus();
|
|
553
|
-
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "
|
|
625
|
+
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
|
|
554
626
|
}
|
|
555
|
-
|
|
627
|
+
at(this, this.$el, !1);
|
|
556
628
|
}
|
|
557
629
|
attributeChangedCallback(t, e, i) {
|
|
558
630
|
if (e !== i)
|
|
@@ -561,30 +633,30 @@ const ht = ["", "default", "small"], ut = ["", "default", "secondary", "naked"],
|
|
|
561
633
|
this.updateLoading();
|
|
562
634
|
break;
|
|
563
635
|
case "size":
|
|
564
|
-
this.updateSize(e, i
|
|
636
|
+
this.updateSize(e, i);
|
|
565
637
|
break;
|
|
566
638
|
case "variant":
|
|
567
|
-
this.updateVariant(e, i
|
|
639
|
+
this.updateVariant(e, i);
|
|
640
|
+
break;
|
|
641
|
+
case "aria-expanded":
|
|
642
|
+
i && (this.$el.setAttribute("aria-expanded", i), this.removeAttribute("aria-expanded"));
|
|
568
643
|
break;
|
|
569
644
|
default:
|
|
570
645
|
super.attributeChangedCallback(t, e, i);
|
|
571
646
|
break;
|
|
572
647
|
}
|
|
573
648
|
}
|
|
574
|
-
checkName(t, e) {
|
|
575
|
-
return t.includes(e);
|
|
576
|
-
}
|
|
577
649
|
_toggleClass(t, e) {
|
|
578
650
|
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
|
|
579
651
|
}
|
|
580
652
|
updateLoading() {
|
|
581
653
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
582
654
|
}
|
|
583
|
-
updateSize(t, e
|
|
584
|
-
this.checkName(
|
|
655
|
+
updateSize(t, e) {
|
|
656
|
+
this.checkName(At, 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`);
|
|
585
657
|
}
|
|
586
|
-
updateVariant(t, e
|
|
587
|
-
this.checkName(
|
|
658
|
+
updateVariant(t, e) {
|
|
659
|
+
this.checkName($t, 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`);
|
|
588
660
|
}
|
|
589
661
|
get inverted() {
|
|
590
662
|
return this.getAttribute("inverted");
|
|
@@ -610,28 +682,67 @@ const ht = ["", "default", "small"], ut = ["", "default", "secondary", "naked"],
|
|
|
610
682
|
set variant(t) {
|
|
611
683
|
this.setAttribute("variant", t);
|
|
612
684
|
}
|
|
685
|
+
get ariaExpanded() {
|
|
686
|
+
return this.getAttribute("aria-expanded");
|
|
687
|
+
}
|
|
688
|
+
set ariaExpanded(t) {
|
|
689
|
+
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
690
|
+
}
|
|
613
691
|
};
|
|
614
|
-
|
|
615
|
-
let
|
|
616
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
692
|
+
R.nativeName = "button";
|
|
693
|
+
let L = R;
|
|
694
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", L);
|
|
695
|
+
class St extends HTMLElement {
|
|
696
|
+
constructor() {
|
|
697
|
+
super();
|
|
698
|
+
}
|
|
699
|
+
static get observedAttributes() {
|
|
700
|
+
return ["name", "src", "type", "format"];
|
|
701
|
+
}
|
|
702
|
+
connectedCallback() {
|
|
703
|
+
if (document.querySelectorAll(
|
|
704
|
+
`px-icon-set[name="${this.getAttribute("name")}"]`
|
|
705
|
+
).length > 1 && (console.warn(
|
|
706
|
+
"Only one <px-icon-set> component is allowed, self removing"
|
|
707
|
+
), this.remove()), this.getAttribute("type") === "font") {
|
|
708
|
+
const e = document.createElement("style");
|
|
709
|
+
e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
|
|
710
|
+
@font-face {
|
|
711
|
+
font-family: 'lavender';
|
|
712
|
+
src:
|
|
713
|
+
url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
|
|
714
|
+
font-weight: normal;
|
|
715
|
+
font-style: normal;
|
|
716
|
+
font-display: block;
|
|
717
|
+
}
|
|
718
|
+
`, document.head.appendChild(e);
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
disconnectedCallback() {
|
|
722
|
+
const t = document.querySelector(
|
|
723
|
+
`style[data-name="${this.getAttribute("name")}"]`
|
|
724
|
+
);
|
|
725
|
+
t && t.remove();
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", St);
|
|
729
|
+
const Ct = [
|
|
730
|
+
"Brand",
|
|
731
|
+
"Neutral",
|
|
732
|
+
"Dimmed",
|
|
733
|
+
"PurposeSuccess",
|
|
734
|
+
"PurposeWarning",
|
|
735
|
+
"PurposeError",
|
|
736
|
+
"PurposeUnlimited",
|
|
737
|
+
"PurposePromo",
|
|
738
|
+
"StateHover",
|
|
739
|
+
"StateActive",
|
|
740
|
+
"StateDisabled"
|
|
741
|
+
], zt = ["Inherit", ...Ct].map(
|
|
742
|
+
(r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
743
|
+
), jt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-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)}.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)}: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]) .dimmed{color:var(--px-color-icon-dimmed-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)}: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)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", K = new CSSStyleSheet();
|
|
744
|
+
K.replaceSync(jt);
|
|
745
|
+
const Lt = [
|
|
635
746
|
"name",
|
|
636
747
|
"size",
|
|
637
748
|
"color",
|
|
@@ -640,163 +751,118 @@ const bt = ":host{line-height:1;display:inline-flex;flex-direction:column;justif
|
|
|
640
751
|
"from",
|
|
641
752
|
"disabled"
|
|
642
753
|
];
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
754
|
+
var h, p, w;
|
|
755
|
+
class Tt extends T {
|
|
756
|
+
constructor(...e) {
|
|
757
|
+
var i;
|
|
758
|
+
super(...e, K);
|
|
759
|
+
m(this, h);
|
|
760
|
+
m(this, p);
|
|
761
|
+
m(this, w, () => `<svg aria-hidden="true">
|
|
762
|
+
<use xlink:href="#icon-${this.name}"></use>
|
|
763
|
+
</svg>`);
|
|
764
|
+
this.shadowRoot.innerHTML = d(this, w).call(this), C(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
646
765
|
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
super(...t), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
|
|
766
|
+
static get observedAttributes() {
|
|
767
|
+
return [...super.observedAttributes, ...Lt];
|
|
650
768
|
}
|
|
651
|
-
attributeChangedCallback(
|
|
652
|
-
if (
|
|
653
|
-
switch (
|
|
769
|
+
attributeChangedCallback(e, i, o) {
|
|
770
|
+
if (i !== o)
|
|
771
|
+
switch (e) {
|
|
654
772
|
case "name":
|
|
655
|
-
this.updateName(
|
|
773
|
+
this.updateName(i, o);
|
|
656
774
|
break;
|
|
657
775
|
case "size":
|
|
658
|
-
this.updateAttribute(
|
|
659
|
-
t,
|
|
660
|
-
e,
|
|
661
|
-
i,
|
|
662
|
-
gt
|
|
663
|
-
);
|
|
776
|
+
this.updateAttribute(e, i, o, nt);
|
|
664
777
|
break;
|
|
665
778
|
case "color":
|
|
666
|
-
this.updateAttribute(
|
|
779
|
+
this.updateAttribute(e, i, o, zt);
|
|
667
780
|
break;
|
|
668
781
|
case "disabled":
|
|
669
|
-
this.color = "
|
|
782
|
+
this.color = "state-disabled";
|
|
670
783
|
break;
|
|
671
784
|
case "aria-label":
|
|
672
|
-
if (!this
|
|
785
|
+
if (!d(this, p))
|
|
673
786
|
return;
|
|
674
|
-
|
|
787
|
+
o ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
|
|
675
788
|
break;
|
|
676
789
|
}
|
|
677
790
|
}
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
791
|
+
connectedCallback() {
|
|
792
|
+
const e = document.querySelectorAll("px-icon-set");
|
|
793
|
+
e || console.log("<px-icon-set> component not found");
|
|
794
|
+
for (const i of e) {
|
|
795
|
+
if (!i.getAttribute("name") || !i.getAttribute("src")) {
|
|
796
|
+
console.error("Icon name or src not found");
|
|
797
|
+
continue;
|
|
798
|
+
}
|
|
799
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (C(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
800
|
+
"xlink:href",
|
|
801
|
+
`${d(this, h)}#icon-${this.name}`
|
|
802
|
+
));
|
|
803
|
+
}
|
|
804
|
+
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true");
|
|
805
|
+
}
|
|
806
|
+
updateAttribute(e, i, o, n) {
|
|
807
|
+
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(n, o) || console.error(`${o} is not an allowed ${e} value`);
|
|
808
|
+
}
|
|
809
|
+
updateName(e, i) {
|
|
810
|
+
d(this, h) && this.$el.firstElementChild.setAttribute(
|
|
811
|
+
"xlink:href",
|
|
812
|
+
`${d(this, h)}#icon-${i}`
|
|
681
813
|
);
|
|
682
814
|
}
|
|
683
|
-
|
|
684
|
-
return
|
|
815
|
+
get $el() {
|
|
816
|
+
return this.shadowRoot.querySelector("svg");
|
|
685
817
|
}
|
|
686
818
|
get name() {
|
|
687
819
|
return this.getAttribute("name");
|
|
688
820
|
}
|
|
689
|
-
set name(
|
|
690
|
-
this.setAttribute("name",
|
|
821
|
+
set name(e) {
|
|
822
|
+
this.setAttribute("name", e);
|
|
691
823
|
}
|
|
692
824
|
get size() {
|
|
693
825
|
return this.getAttribute("size");
|
|
694
826
|
}
|
|
695
|
-
set size(
|
|
696
|
-
this.setAttribute("size",
|
|
827
|
+
set size(e) {
|
|
828
|
+
this.setAttribute("size", e);
|
|
697
829
|
}
|
|
698
830
|
get color() {
|
|
699
831
|
return this.getAttribute("color");
|
|
700
832
|
}
|
|
701
|
-
set color(
|
|
702
|
-
this.setAttribute("color",
|
|
833
|
+
set color(e) {
|
|
834
|
+
this.setAttribute("color", e);
|
|
703
835
|
}
|
|
704
836
|
get arialabel() {
|
|
705
837
|
return this.getAttribute("aria-label");
|
|
706
838
|
}
|
|
707
|
-
set arialabel(
|
|
708
|
-
this.setAttribute("aria-label",
|
|
839
|
+
set arialabel(e) {
|
|
840
|
+
this.setAttribute("aria-label", e);
|
|
709
841
|
}
|
|
710
842
|
get inverted() {
|
|
711
843
|
return this.getAttribute("inverted");
|
|
712
844
|
}
|
|
713
|
-
set inverted(
|
|
714
|
-
this.setAttribute("inverted",
|
|
845
|
+
set inverted(e) {
|
|
846
|
+
this.setAttribute("inverted", e);
|
|
715
847
|
}
|
|
716
848
|
get from() {
|
|
717
849
|
return this.getAttribute("from");
|
|
718
850
|
}
|
|
719
|
-
set from(
|
|
720
|
-
this.setAttribute("from",
|
|
851
|
+
set from(e) {
|
|
852
|
+
this.setAttribute("from", e);
|
|
721
853
|
}
|
|
722
854
|
get disabled() {
|
|
723
855
|
return this.getAttribute("disabled");
|
|
724
856
|
}
|
|
725
|
-
set disabled(
|
|
726
|
-
this.setAttribute("disabled",
|
|
727
|
-
}
|
|
728
|
-
}
|
|
729
|
-
const D = new CSSStyleSheet();
|
|
730
|
-
D.replaceSync(bt);
|
|
731
|
-
class mt extends ft {
|
|
732
|
-
constructor() {
|
|
733
|
-
super(D), this.template = () => `<svg>
|
|
734
|
-
<use xlink:href="#icon-${this.name}"></use>
|
|
735
|
-
</svg>`, this.shadowRoot.innerHTML = this.template();
|
|
736
|
-
}
|
|
737
|
-
connectedCallback() {
|
|
738
|
-
const t = document.querySelectorAll("px-icon-set");
|
|
739
|
-
t || console.log("<px-icon-set> component not found");
|
|
740
|
-
for (const e of t) {
|
|
741
|
-
if (!e.getAttribute("name") || !e.getAttribute("src")) {
|
|
742
|
-
console.error("Icon name or src not found");
|
|
743
|
-
continue;
|
|
744
|
-
}
|
|
745
|
-
e.getAttribute("name") === this.from && e.getAttribute("type") !== "font" && (this.src = e.getAttribute("src"), this.$el.firstElementChild.setAttribute(
|
|
746
|
-
"xlink:href",
|
|
747
|
-
`${this.src}#icon-${this.name}`
|
|
748
|
-
));
|
|
749
|
-
}
|
|
750
|
-
!this.ariaLabel && this.internals && (this.internals.ariaHidden = "true");
|
|
751
|
-
}
|
|
752
|
-
updateName(t, e) {
|
|
753
|
-
this.src && this.$el.firstElementChild.setAttribute(
|
|
754
|
-
"xlink:href",
|
|
755
|
-
`${this.src}#icon-${e}`
|
|
756
|
-
);
|
|
757
|
-
}
|
|
758
|
-
get $el() {
|
|
759
|
-
return this.shadowRoot.querySelector("svg");
|
|
760
|
-
}
|
|
761
|
-
}
|
|
762
|
-
customElements.get("px-icon") || customElements.define("px-icon", mt);
|
|
763
|
-
class kt extends HTMLElement {
|
|
764
|
-
constructor() {
|
|
765
|
-
super();
|
|
766
|
-
}
|
|
767
|
-
static get observedAttributes() {
|
|
768
|
-
return ["name", "src", "type", "format"];
|
|
769
|
-
}
|
|
770
|
-
connectedCallback() {
|
|
771
|
-
if (document.querySelectorAll(
|
|
772
|
-
`px-icon-set[name="${this.getAttribute("name")}"]`
|
|
773
|
-
).length > 1 && (console.warn(
|
|
774
|
-
"Only one <px-icon-set> component is allowed, self removing"
|
|
775
|
-
), this.remove()), this.getAttribute("type") === "font") {
|
|
776
|
-
const e = document.createElement("style");
|
|
777
|
-
e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
|
|
778
|
-
@font-face {
|
|
779
|
-
font-family: 'lavender';
|
|
780
|
-
src:
|
|
781
|
-
url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
|
|
782
|
-
font-weight: normal;
|
|
783
|
-
font-style: normal;
|
|
784
|
-
font-display: block;
|
|
785
|
-
}
|
|
786
|
-
`, document.head.appendChild(e);
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
disconnectedCallback() {
|
|
790
|
-
const t = document.querySelector(
|
|
791
|
-
`style[data-name="${this.getAttribute("name")}"]`
|
|
792
|
-
);
|
|
793
|
-
t && t.remove();
|
|
857
|
+
set disabled(e) {
|
|
858
|
+
this.setAttribute("disabled", e);
|
|
794
859
|
}
|
|
795
860
|
}
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
861
|
+
h = new WeakMap(), p = new WeakMap(), w = new WeakMap();
|
|
862
|
+
customElements.get("px-icon") || customElements.define("px-icon", Tt);
|
|
863
|
+
const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", Z = new CSSStyleSheet();
|
|
864
|
+
Z.replaceSync(Et);
|
|
865
|
+
class It extends HTMLElement {
|
|
800
866
|
constructor() {
|
|
801
867
|
super(), this.template = (t, e) => `<div class="container">
|
|
802
868
|
${Array.from(
|
|
@@ -805,7 +871,7 @@ class zt extends HTMLElement {
|
|
|
805
871
|
<div></div>
|
|
806
872
|
</div>`
|
|
807
873
|
).join("")}
|
|
808
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
874
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Z], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
809
875
|
}
|
|
810
876
|
static get observedAttributes() {
|
|
811
877
|
return ["amount", "active"];
|
|
@@ -838,135 +904,135 @@ class zt extends HTMLElement {
|
|
|
838
904
|
return parseInt(this.getAttribute("active")) || 0;
|
|
839
905
|
}
|
|
840
906
|
}
|
|
841
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
842
|
-
function
|
|
907
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", It);
|
|
908
|
+
function k(r) {
|
|
843
909
|
var t = typeof r;
|
|
844
910
|
return r != null && (t == "object" || t == "function");
|
|
845
911
|
}
|
|
846
|
-
var
|
|
847
|
-
return
|
|
848
|
-
},
|
|
849
|
-
function
|
|
850
|
-
for (var t = r.length; t-- &&
|
|
912
|
+
var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, J = Rt || Mt || Function("return this")(), z = function() {
|
|
913
|
+
return J.Date.now();
|
|
914
|
+
}, Pt = /\s/;
|
|
915
|
+
function Dt(r) {
|
|
916
|
+
for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
|
|
851
917
|
;
|
|
852
918
|
return t;
|
|
853
919
|
}
|
|
854
|
-
var
|
|
855
|
-
function
|
|
856
|
-
return r && r.slice(0,
|
|
920
|
+
var Ht = /^\s+/;
|
|
921
|
+
function qt(r) {
|
|
922
|
+
return r && r.slice(0, Dt(r) + 1).replace(Ht, "");
|
|
857
923
|
}
|
|
858
|
-
var
|
|
859
|
-
function
|
|
860
|
-
var t =
|
|
924
|
+
var y = J.Symbol, Q = Object.prototype, Wt = Q.hasOwnProperty, Ot = Q.toString, f = y ? y.toStringTag : void 0;
|
|
925
|
+
function Nt(r) {
|
|
926
|
+
var t = Wt.call(r, f), e = r[f];
|
|
861
927
|
try {
|
|
862
|
-
r[
|
|
928
|
+
r[f] = void 0;
|
|
863
929
|
var i = !0;
|
|
864
930
|
} catch {
|
|
865
931
|
}
|
|
866
|
-
var o =
|
|
867
|
-
return i && (t ? r[
|
|
932
|
+
var o = Ot.call(r);
|
|
933
|
+
return i && (t ? r[f] = e : delete r[f]), o;
|
|
868
934
|
}
|
|
869
|
-
var
|
|
870
|
-
function
|
|
871
|
-
return
|
|
935
|
+
var Xt = Object.prototype, Ft = Xt.toString;
|
|
936
|
+
function _t(r) {
|
|
937
|
+
return Ft.call(r);
|
|
872
938
|
}
|
|
873
|
-
var
|
|
874
|
-
function
|
|
875
|
-
return r == null ? r === void 0 ?
|
|
939
|
+
var Bt = "[object Null]", Gt = "[object Undefined]", O = y ? y.toStringTag : void 0;
|
|
940
|
+
function Ut(r) {
|
|
941
|
+
return r == null ? r === void 0 ? Gt : Bt : O && O in Object(r) ? Nt(r) : _t(r);
|
|
876
942
|
}
|
|
877
|
-
function
|
|
943
|
+
function Kt(r) {
|
|
878
944
|
return r != null && typeof r == "object";
|
|
879
945
|
}
|
|
880
|
-
var
|
|
881
|
-
function
|
|
882
|
-
return typeof r == "symbol" ||
|
|
946
|
+
var Zt = "[object Symbol]";
|
|
947
|
+
function Jt(r) {
|
|
948
|
+
return typeof r == "symbol" || Kt(r) && Ut(r) == Zt;
|
|
883
949
|
}
|
|
884
|
-
var
|
|
885
|
-
function
|
|
950
|
+
var N = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
|
|
951
|
+
function X(r) {
|
|
886
952
|
if (typeof r == "number")
|
|
887
953
|
return r;
|
|
888
|
-
if (
|
|
889
|
-
return
|
|
890
|
-
if (
|
|
954
|
+
if (Jt(r))
|
|
955
|
+
return N;
|
|
956
|
+
if (k(r)) {
|
|
891
957
|
var t = typeof r.valueOf == "function" ? r.valueOf() : r;
|
|
892
|
-
r =
|
|
958
|
+
r = k(t) ? t + "" : t;
|
|
893
959
|
}
|
|
894
960
|
if (typeof r != "string")
|
|
895
961
|
return r === 0 ? r : +r;
|
|
896
|
-
r =
|
|
897
|
-
var e =
|
|
898
|
-
return e ||
|
|
962
|
+
r = qt(r);
|
|
963
|
+
var e = Yt.test(r);
|
|
964
|
+
return e || Vt.test(r) ? te(r.slice(2), e ? 2 : 8) : Qt.test(r) ? N : +r;
|
|
899
965
|
}
|
|
900
|
-
var
|
|
901
|
-
function
|
|
902
|
-
var i, o,
|
|
966
|
+
var ee = "Expected a function", ie = Math.max, re = Math.min;
|
|
967
|
+
function oe(r, t, e) {
|
|
968
|
+
var i, o, n, l, a, c, b = 0, M = !1, g = !1, A = !0;
|
|
903
969
|
if (typeof r != "function")
|
|
904
|
-
throw new TypeError(
|
|
905
|
-
t =
|
|
906
|
-
function
|
|
907
|
-
var
|
|
908
|
-
return i = o = void 0,
|
|
970
|
+
throw new TypeError(ee);
|
|
971
|
+
t = X(t) || 0, k(e) && (M = !!e.leading, g = "maxWait" in e, n = g ? ie(X(e.maxWait) || 0, t) : n, A = "trailing" in e ? !!e.trailing : A);
|
|
972
|
+
function $(s) {
|
|
973
|
+
var u = i, v = o;
|
|
974
|
+
return i = o = void 0, b = s, l = r.apply(v, u), l;
|
|
909
975
|
}
|
|
910
|
-
function
|
|
911
|
-
return
|
|
976
|
+
function V(s) {
|
|
977
|
+
return b = s, a = setTimeout(x, t), M ? $(s) : l;
|
|
912
978
|
}
|
|
913
|
-
function
|
|
914
|
-
var
|
|
915
|
-
return
|
|
979
|
+
function tt(s) {
|
|
980
|
+
var u = s - c, v = s - b, H = t - u;
|
|
981
|
+
return g ? re(H, n - v) : H;
|
|
916
982
|
}
|
|
917
|
-
function
|
|
918
|
-
var
|
|
919
|
-
return
|
|
983
|
+
function P(s) {
|
|
984
|
+
var u = s - c, v = s - b;
|
|
985
|
+
return c === void 0 || u >= t || u < 0 || g && v >= n;
|
|
920
986
|
}
|
|
921
|
-
function
|
|
922
|
-
var s =
|
|
923
|
-
if (
|
|
924
|
-
return
|
|
925
|
-
a = setTimeout(
|
|
987
|
+
function x() {
|
|
988
|
+
var s = z();
|
|
989
|
+
if (P(s))
|
|
990
|
+
return D(s);
|
|
991
|
+
a = setTimeout(x, tt(s));
|
|
926
992
|
}
|
|
927
|
-
function
|
|
928
|
-
return a = void 0,
|
|
993
|
+
function D(s) {
|
|
994
|
+
return a = void 0, A && i ? $(s) : (i = o = void 0, l);
|
|
929
995
|
}
|
|
930
|
-
function
|
|
931
|
-
a !== void 0 && clearTimeout(a),
|
|
996
|
+
function et() {
|
|
997
|
+
a !== void 0 && clearTimeout(a), b = 0, i = c = o = a = void 0;
|
|
932
998
|
}
|
|
933
|
-
function
|
|
934
|
-
return a === void 0 ?
|
|
999
|
+
function it() {
|
|
1000
|
+
return a === void 0 ? l : D(z());
|
|
935
1001
|
}
|
|
936
|
-
function
|
|
937
|
-
var s =
|
|
938
|
-
if (i = arguments, o = this,
|
|
1002
|
+
function S() {
|
|
1003
|
+
var s = z(), u = P(s);
|
|
1004
|
+
if (i = arguments, o = this, c = s, u) {
|
|
939
1005
|
if (a === void 0)
|
|
940
|
-
return
|
|
941
|
-
if (
|
|
942
|
-
return clearTimeout(a), a = setTimeout(
|
|
1006
|
+
return V(c);
|
|
1007
|
+
if (g)
|
|
1008
|
+
return clearTimeout(a), a = setTimeout(x, t), $(c);
|
|
943
1009
|
}
|
|
944
|
-
return a === void 0 && (a = setTimeout(
|
|
1010
|
+
return a === void 0 && (a = setTimeout(x, t)), l;
|
|
945
1011
|
}
|
|
946
|
-
return
|
|
1012
|
+
return S.cancel = et, S.flush = it, S;
|
|
947
1013
|
}
|
|
948
|
-
var
|
|
949
|
-
function
|
|
1014
|
+
var se = "Expected a function";
|
|
1015
|
+
function ae(r, t, e) {
|
|
950
1016
|
var i = !0, o = !0;
|
|
951
1017
|
if (typeof r != "function")
|
|
952
|
-
throw new TypeError(
|
|
953
|
-
return
|
|
1018
|
+
throw new TypeError(se);
|
|
1019
|
+
return k(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), oe(r, t, {
|
|
954
1020
|
leading: i,
|
|
955
1021
|
maxWait: t,
|
|
956
1022
|
trailing: o
|
|
957
1023
|
});
|
|
958
1024
|
}
|
|
959
|
-
const
|
|
960
|
-
|
|
961
|
-
const
|
|
962
|
-
class
|
|
1025
|
+
const I = new CSSStyleSheet();
|
|
1026
|
+
I.replaceSync(ct);
|
|
1027
|
+
const ne = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, le = "px-spacing", j = (r) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
|
|
1028
|
+
class ce extends HTMLElement {
|
|
963
1029
|
constructor() {
|
|
964
|
-
super(), this.visibleItemsAttributeDelegate = new
|
|
1030
|
+
super(), this.visibleItemsAttributeDelegate = new F(
|
|
965
1031
|
this,
|
|
966
1032
|
"visible-items",
|
|
967
|
-
|
|
1033
|
+
j("s"),
|
|
968
1034
|
"--px-carousel-min-width"
|
|
969
|
-
), this.template = `<px-vstack gap="
|
|
1035
|
+
), this.template = `<px-vstack gap="default">
|
|
970
1036
|
<div class="carousel">
|
|
971
1037
|
<slot></slot>
|
|
972
1038
|
</div>
|
|
@@ -976,7 +1042,7 @@ class Vt extends HTMLElement {
|
|
|
976
1042
|
justify-content--mobile="center"
|
|
977
1043
|
>
|
|
978
1044
|
<px-appleseed active="0"></px-appleseed>
|
|
979
|
-
<px-hstack id="button-icons" gap="
|
|
1045
|
+
<px-hstack id="button-icons" gap="default">
|
|
980
1046
|
<px-button-icon disabled id="previous" aria-hidden="true">
|
|
981
1047
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
982
1048
|
</px-button-icon>
|
|
@@ -991,15 +1057,15 @@ class Vt extends HTMLElement {
|
|
|
991
1057
|
window.innerWidth < 768 ? o = Math.round(
|
|
992
1058
|
t / (e - i) * (this.itemNumbers - 1)
|
|
993
1059
|
) : Math.ceil(t + i) + 10 >= e ? o = this.itemNumbers - 1 : o = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
|
|
994
|
-
let
|
|
995
|
-
this.itemNumbers > 5 && (o > 2 && o < this.itemNumbers - 2 ?
|
|
1060
|
+
let n = o;
|
|
1061
|
+
this.itemNumbers > 5 && (o > 2 && o < this.itemNumbers - 2 ? n = 2 : o === this.itemNumbers - 2 ? n = 3 : o === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
|
|
996
1062
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
997
|
-
|
|
998
|
-
|
|
1063
|
+
I,
|
|
1064
|
+
lt(
|
|
999
1065
|
"gap",
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1066
|
+
ne,
|
|
1067
|
+
_,
|
|
1068
|
+
le
|
|
1003
1069
|
)
|
|
1004
1070
|
];
|
|
1005
1071
|
}
|
|
@@ -1013,7 +1079,7 @@ class Vt extends HTMLElement {
|
|
|
1013
1079
|
case "gap--mobile":
|
|
1014
1080
|
case "gap--tablet":
|
|
1015
1081
|
case "gap--desktop":
|
|
1016
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1082
|
+
this.visibleItemsAttributeDelegate.attributeValue = j(i);
|
|
1017
1083
|
break;
|
|
1018
1084
|
default:
|
|
1019
1085
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
@@ -1024,11 +1090,11 @@ class Vt extends HTMLElement {
|
|
|
1024
1090
|
}
|
|
1025
1091
|
}
|
|
1026
1092
|
connectedCallback() {
|
|
1027
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1028
|
-
this.getAttribute("gap") || "
|
|
1093
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = j(
|
|
1094
|
+
this.getAttribute("gap") || "s"
|
|
1029
1095
|
), requestAnimationFrame(() => {
|
|
1030
1096
|
this.handleAppleSeedDisplay();
|
|
1031
|
-
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll",
|
|
1097
|
+
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ae(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1032
1098
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1033
1099
|
}), this.$next.addEventListener("click", () => {
|
|
1034
1100
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1068,20 +1134,20 @@ class Vt extends HTMLElement {
|
|
|
1068
1134
|
return this.querySelectorAll("px-carousel-item").length;
|
|
1069
1135
|
}
|
|
1070
1136
|
}
|
|
1071
|
-
customElements.get("px-carousel") || customElements.define("px-carousel",
|
|
1072
|
-
const
|
|
1073
|
-
|
|
1074
|
-
class
|
|
1137
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", ce);
|
|
1138
|
+
const Y = new CSSStyleSheet();
|
|
1139
|
+
Y.replaceSync(dt);
|
|
1140
|
+
class de extends HTMLElement {
|
|
1075
1141
|
constructor() {
|
|
1076
1142
|
super(), this.template = `
|
|
1077
1143
|
<div class="carousel-item">
|
|
1078
1144
|
<slot></slot>
|
|
1079
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1145
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [I, Y];
|
|
1080
1146
|
}
|
|
1081
1147
|
}
|
|
1082
|
-
customElements.get("px-carousel-item") || customElements.define("px-carousel-item",
|
|
1148
|
+
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", de);
|
|
1083
1149
|
export {
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1150
|
+
It as AppleSeed,
|
|
1151
|
+
ce as Carousel,
|
|
1152
|
+
de as CarouselItem
|
|
1087
1153
|
};
|
package/package.json
CHANGED
|
@@ -1,46 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-carousel",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-beta.0",
|
|
4
4
|
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"
|
|
7
|
-
".": {
|
|
8
|
-
"types": "./src/index.ts",
|
|
9
|
-
"development": "./src/index.ts",
|
|
10
|
-
"default": "./dist/index.js"
|
|
11
|
-
},
|
|
12
|
-
"./src/*.css": {
|
|
13
|
-
"development": "src/*.css"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
5
|
+
"main": "dist/index.es.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
16
7
|
"files": [
|
|
17
8
|
"dist"
|
|
18
9
|
],
|
|
19
10
|
"type": "module",
|
|
20
11
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
12
|
+
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
13
|
+
"clean": "rm -rf dist",
|
|
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"
|
|
23
17
|
},
|
|
24
18
|
"publishConfig": {
|
|
25
19
|
"access": "public"
|
|
26
20
|
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
"publish": {
|
|
31
|
-
"assets": [
|
|
32
|
-
"CHANGELOG.md",
|
|
33
|
-
"package.json",
|
|
34
|
-
"dist/*.js",
|
|
35
|
-
"dist/*.cjs",
|
|
36
|
-
"dist/css/**/*.css",
|
|
37
|
-
"dist/js/**/*.js",
|
|
38
|
-
"dist/*.svg",
|
|
39
|
-
"dist/*.ttf",
|
|
40
|
-
"dist/glyphmap.json",
|
|
41
|
-
"dist/*.d.ts"
|
|
42
|
-
]
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
21
|
+
"customElements": "dist/custom-elements.json",
|
|
22
|
+
"web-types": "./dist/web-types.json",
|
|
23
|
+
"gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
|
|
46
24
|
}
|