@proximus/lavender-image 2.0.0-alpha.18 → 2.0.0-alpha.180
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/AbstractImage.d.ts +32 -32
- package/dist/Image.d.ts +6 -0
- package/dist/Picture.d.ts +7 -7
- package/dist/index.es.js +341 -352
- package/package.json +2 -2
package/dist/AbstractImage.d.ts
CHANGED
|
@@ -14,38 +14,38 @@ export declare abstract class AbstractImage<IMAGE_ELEMENT extends HTMLImageEleme
|
|
|
14
14
|
attrName: string;
|
|
15
15
|
breakpoint: string;
|
|
16
16
|
};
|
|
17
|
-
get borderRadius(): string;
|
|
18
|
-
set borderRadius(value: string);
|
|
19
|
-
get noBorderRadius(): string;
|
|
20
|
-
set noBorderRadius(value: string);
|
|
21
|
-
get noBorderRadiusMobile(): string;
|
|
22
|
-
set noBorderRadiusMobile(value: string);
|
|
23
|
-
get noBorderRadiusTablet(): string;
|
|
24
|
-
set noBorderRadiusTablet(value: string);
|
|
25
|
-
get noBorderRadiusLaptop(): string;
|
|
26
|
-
set noBorderRadiusLaptop(value: string);
|
|
27
|
-
get width(): string;
|
|
28
|
-
set width(value: string);
|
|
29
|
-
get widthMobile(): string;
|
|
30
|
-
set widthMobile(value: string);
|
|
31
|
-
get widthTablet(): string;
|
|
32
|
-
set widthTablet(value: string);
|
|
33
|
-
get widthLaptop(): string;
|
|
34
|
-
set widthLaptop(value: string);
|
|
35
|
-
get widthDesktop(): string;
|
|
36
|
-
set widthDesktop(value: string);
|
|
37
|
-
get disabled():
|
|
38
|
-
set disabled(value:
|
|
39
|
-
get height(): string;
|
|
40
|
-
set height(value: string);
|
|
41
|
-
get heightMobile(): string;
|
|
42
|
-
set heightMobile(value: string);
|
|
43
|
-
get heightTablet(): string;
|
|
44
|
-
set heightTablet(value: string);
|
|
45
|
-
get heightLaptop(): string;
|
|
46
|
-
set heightLaptop(value: string);
|
|
47
|
-
get heightDesktop(): string;
|
|
48
|
-
set heightDesktop(value: string);
|
|
17
|
+
get borderRadius(): string | null;
|
|
18
|
+
set borderRadius(value: string | null);
|
|
19
|
+
get noBorderRadius(): string | null;
|
|
20
|
+
set noBorderRadius(value: string | null);
|
|
21
|
+
get noBorderRadiusMobile(): string | null;
|
|
22
|
+
set noBorderRadiusMobile(value: string | null);
|
|
23
|
+
get noBorderRadiusTablet(): string | null;
|
|
24
|
+
set noBorderRadiusTablet(value: string | null);
|
|
25
|
+
get noBorderRadiusLaptop(): string | null;
|
|
26
|
+
set noBorderRadiusLaptop(value: string | null);
|
|
27
|
+
get width(): string | null;
|
|
28
|
+
set width(value: string | null);
|
|
29
|
+
get widthMobile(): string | null;
|
|
30
|
+
set widthMobile(value: string | null);
|
|
31
|
+
get widthTablet(): string | null;
|
|
32
|
+
set widthTablet(value: string | null);
|
|
33
|
+
get widthLaptop(): string | null;
|
|
34
|
+
set widthLaptop(value: string | null);
|
|
35
|
+
get widthDesktop(): string | null;
|
|
36
|
+
set widthDesktop(value: string | null);
|
|
37
|
+
get disabled(): boolean;
|
|
38
|
+
set disabled(value: boolean);
|
|
39
|
+
get height(): string | null;
|
|
40
|
+
set height(value: string | null);
|
|
41
|
+
get heightMobile(): string | null;
|
|
42
|
+
set heightMobile(value: string | null);
|
|
43
|
+
get heightTablet(): string | null;
|
|
44
|
+
set heightTablet(value: string | null);
|
|
45
|
+
get heightLaptop(): string | null;
|
|
46
|
+
set heightLaptop(value: string | null);
|
|
47
|
+
get heightDesktop(): string | null;
|
|
48
|
+
set heightDesktop(value: string | null);
|
|
49
49
|
get cover(): boolean;
|
|
50
50
|
set cover(value: boolean);
|
|
51
51
|
}
|
package/dist/Image.d.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { AbstractImage } from './AbstractImage.ts';
|
|
2
|
+
/**
|
|
3
|
+
* @summary An image component.
|
|
4
|
+
* @attr {string} src - The URL of the image.
|
|
5
|
+
* @attr {string} alt - The alternative text for the image.
|
|
6
|
+
* @attr {string} loading - The loading strategy for the image ('lazy' or 'eager').
|
|
7
|
+
*/
|
|
2
8
|
export declare class Image extends AbstractImage<HTMLImageElement> {
|
|
3
9
|
static nativeName: string;
|
|
4
10
|
constructor();
|
package/dist/Picture.d.ts
CHANGED
|
@@ -4,13 +4,13 @@ export declare class Picture extends AbstractImage<HTMLPictureElement> {
|
|
|
4
4
|
constructor();
|
|
5
5
|
private possibleImgExtension;
|
|
6
6
|
static get observedAttributes(): string[];
|
|
7
|
-
get loading(): string;
|
|
8
|
-
set loading(value: string);
|
|
9
|
-
get alt(): string;
|
|
10
|
-
set alt(value: string);
|
|
11
|
-
get src(): string;
|
|
12
|
-
set src(value: string);
|
|
13
|
-
get $imgEl(): HTMLImageElement;
|
|
7
|
+
get loading(): string | null;
|
|
8
|
+
set loading(value: string | null);
|
|
9
|
+
get alt(): string | null;
|
|
10
|
+
set alt(value: string | null);
|
|
11
|
+
get src(): string | null;
|
|
12
|
+
set src(value: string | null);
|
|
13
|
+
get $imgEl(): HTMLImageElement | null;
|
|
14
14
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
15
15
|
removeSrc(): void;
|
|
16
16
|
imgExists(imgUrl: string): Promise<boolean>;
|
package/dist/index.es.js
CHANGED
|
@@ -1,354 +1,343 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
1
|
+
import { PxElement as e, borderRadiusValues as t, cssTokenBreakpoints as n, log as r, noBorderRadiusValues as i } from "@proximus/lavender-common";
|
|
2
|
+
//#region src/image.css?inline
|
|
3
|
+
var a = ":host{line-height:0;display:inline-block}:host([cover]) img{object-fit:cover;width:100%;height:100%}picture{display:inline-block}img{width:var(--img-width--mobile,auto);border-style:none;max-width:100%;display:inline-block}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2)grayscale()}@media screen and (width<=47.938rem){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media screen and (width>=48rem) and (width<=64rem){img{width:var(--img-width--tablet,auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media screen and (width>=64.0625rem){img{width:var(--img-width--laptop,auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media screen and (width>=90.0625rem){img{width:var(--img-width--desktop,auto)}}", o = new CSSStyleSheet();
|
|
4
|
+
o.replaceSync(a);
|
|
5
|
+
var s = [
|
|
6
|
+
"",
|
|
7
|
+
"xs",
|
|
8
|
+
"s",
|
|
9
|
+
"m",
|
|
10
|
+
"l",
|
|
11
|
+
"xl"
|
|
12
|
+
], c = n("height", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) img`, [
|
|
13
|
+
"",
|
|
14
|
+
"xs",
|
|
15
|
+
"s",
|
|
16
|
+
"m",
|
|
17
|
+
"l",
|
|
18
|
+
"xl"
|
|
19
|
+
], "px-image", "--img-height"), l = class extends e {
|
|
20
|
+
static {
|
|
21
|
+
this.accessorExclusions = ["height", "width"];
|
|
22
|
+
}
|
|
23
|
+
constructor() {
|
|
24
|
+
super(o, c);
|
|
25
|
+
}
|
|
26
|
+
static get observedAttributes() {
|
|
27
|
+
return [
|
|
28
|
+
...super.observedAttributes,
|
|
29
|
+
"border-radius",
|
|
30
|
+
"no-border-radius",
|
|
31
|
+
"no-border-radius--mobile",
|
|
32
|
+
"no-border-radius--tablet",
|
|
33
|
+
"no-border-radius--laptop",
|
|
34
|
+
"width",
|
|
35
|
+
"width--mobile",
|
|
36
|
+
"width--tablet",
|
|
37
|
+
"width--laptop",
|
|
38
|
+
"width--desktop",
|
|
39
|
+
"cover",
|
|
40
|
+
"disabled"
|
|
41
|
+
];
|
|
42
|
+
}
|
|
43
|
+
attributeChangedCallback(e, n, r) {
|
|
44
|
+
if (n !== r) switch (e) {
|
|
45
|
+
case "border-radius":
|
|
46
|
+
this.updateAttribute(e, n, r, t);
|
|
47
|
+
break;
|
|
48
|
+
case "no-border-radius":
|
|
49
|
+
case "no-border-radius--mobile":
|
|
50
|
+
case "no-border-radius--tablet":
|
|
51
|
+
case "no-border-radius--laptop":
|
|
52
|
+
this.updateAttribute(e, n, r, i);
|
|
53
|
+
break;
|
|
54
|
+
case "width":
|
|
55
|
+
case "width--mobile":
|
|
56
|
+
case "width--tablet":
|
|
57
|
+
case "width--laptop":
|
|
58
|
+
case "width--desktop":
|
|
59
|
+
this.updateWidth(e, n, r, s);
|
|
60
|
+
break;
|
|
61
|
+
case "disabled":
|
|
62
|
+
r === null ? this.$el.removeAttribute("aria-disabled") : this.$el.setAttribute("aria-disabled", "true");
|
|
63
|
+
break;
|
|
64
|
+
default: super.attributeChangedCallback(e, n, r);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
updateWidth(e, t, n, i) {
|
|
68
|
+
if (!this.checkName(i, n)) {
|
|
69
|
+
r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
let a = e.indexOf("--") > -1, o = a ? e.split("--")[0] : e, s = [];
|
|
73
|
+
if (!a) this.getAttribute(o + "--mobile") || s.push("mobile"), this.getAttribute(o + "--tablet") || s.push("tablet"), this.getAttribute(o + "--laptop") || s.push("laptop"), this.getAttribute(o + "--desktop") || s.push("desktop"), s.forEach((e) => {
|
|
74
|
+
this.updateStyle(o, e, t), this.updateStyle(o, e, n);
|
|
75
|
+
});
|
|
76
|
+
else {
|
|
77
|
+
let r = e.split("--")[1];
|
|
78
|
+
this.updateStyle(o, r, t), this.updateStyle(o, r, n);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
updateStyle(e, t, n) {
|
|
82
|
+
n !== null && n !== "" && n !== "default" && this.$el.style.setProperty(`--img-${e}--${t}`, `var(--px-image-${n}-${t === "laptop" ? "desktop" : t})`);
|
|
83
|
+
}
|
|
84
|
+
updateAttribute(e, t, n, i) {
|
|
85
|
+
if (!this.checkName(i, n)) r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
86
|
+
else {
|
|
87
|
+
let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
|
|
88
|
+
t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
splitAttrNameFromBreakpoint(e) {
|
|
92
|
+
let t = "";
|
|
93
|
+
if ([
|
|
94
|
+
"--mobile",
|
|
95
|
+
"--tablet",
|
|
96
|
+
"--laptop"
|
|
97
|
+
].some((t) => e.includes(t))) {
|
|
98
|
+
let n = e.split("--");
|
|
99
|
+
e = n[0], t = `--${n[1]}`;
|
|
100
|
+
}
|
|
101
|
+
return {
|
|
102
|
+
attrName: e,
|
|
103
|
+
breakpoint: t
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
get borderRadius() {
|
|
107
|
+
return this.getAttribute("border-radius");
|
|
108
|
+
}
|
|
109
|
+
set borderRadius(e) {
|
|
110
|
+
this._updateAttribute("border-radius", e);
|
|
111
|
+
}
|
|
112
|
+
get noBorderRadius() {
|
|
113
|
+
return this.getAttribute("no-border-radius");
|
|
114
|
+
}
|
|
115
|
+
set noBorderRadius(e) {
|
|
116
|
+
this._updateAttribute("no-border-radius", e);
|
|
117
|
+
}
|
|
118
|
+
get noBorderRadiusMobile() {
|
|
119
|
+
return this.getAttribute("no-border-radius--mobile");
|
|
120
|
+
}
|
|
121
|
+
set noBorderRadiusMobile(e) {
|
|
122
|
+
this._updateAttribute("no-border-radius--mobile", e);
|
|
123
|
+
}
|
|
124
|
+
get noBorderRadiusTablet() {
|
|
125
|
+
return this.getAttribute("no-border-radius--tablet");
|
|
126
|
+
}
|
|
127
|
+
set noBorderRadiusTablet(e) {
|
|
128
|
+
this._updateAttribute("no-border-radius--tablet", e);
|
|
129
|
+
}
|
|
130
|
+
get noBorderRadiusLaptop() {
|
|
131
|
+
return this.getAttribute("no-border-radius--laptop");
|
|
132
|
+
}
|
|
133
|
+
set noBorderRadiusLaptop(e) {
|
|
134
|
+
this._updateAttribute("no-border-radius--laptop", e);
|
|
135
|
+
}
|
|
136
|
+
get width() {
|
|
137
|
+
return this.getAttribute("width");
|
|
138
|
+
}
|
|
139
|
+
set width(e) {
|
|
140
|
+
this._updateAttribute("width", e);
|
|
141
|
+
}
|
|
142
|
+
get widthMobile() {
|
|
143
|
+
return this.getAttribute("width--mobile");
|
|
144
|
+
}
|
|
145
|
+
set widthMobile(e) {
|
|
146
|
+
this._updateAttribute("width--mobile", e);
|
|
147
|
+
}
|
|
148
|
+
get widthTablet() {
|
|
149
|
+
return this.getAttribute("width--tablet");
|
|
150
|
+
}
|
|
151
|
+
set widthTablet(e) {
|
|
152
|
+
this._updateAttribute("width--tablet", e);
|
|
153
|
+
}
|
|
154
|
+
get widthLaptop() {
|
|
155
|
+
return this.getAttribute("width--laptop");
|
|
156
|
+
}
|
|
157
|
+
set widthLaptop(e) {
|
|
158
|
+
this._updateAttribute("width--laptop", e);
|
|
159
|
+
}
|
|
160
|
+
get widthDesktop() {
|
|
161
|
+
return this.getAttribute("width--desktop");
|
|
162
|
+
}
|
|
163
|
+
set widthDesktop(e) {
|
|
164
|
+
this._updateAttribute("width--desktop", e);
|
|
165
|
+
}
|
|
166
|
+
get disabled() {
|
|
167
|
+
return this.hasAttribute("disabled");
|
|
168
|
+
}
|
|
169
|
+
set disabled(e) {
|
|
170
|
+
this._updateBooleanAttribute("disabled", e);
|
|
171
|
+
}
|
|
172
|
+
get height() {
|
|
173
|
+
return this.getAttribute("height");
|
|
174
|
+
}
|
|
175
|
+
set height(e) {
|
|
176
|
+
this._updateAttribute("height", e);
|
|
177
|
+
}
|
|
178
|
+
get heightMobile() {
|
|
179
|
+
return this.getAttribute("height--mobile");
|
|
180
|
+
}
|
|
181
|
+
set heightMobile(e) {
|
|
182
|
+
this._updateAttribute("height--mobile", e);
|
|
183
|
+
}
|
|
184
|
+
get heightTablet() {
|
|
185
|
+
return this.getAttribute("height--tablet");
|
|
186
|
+
}
|
|
187
|
+
set heightTablet(e) {
|
|
188
|
+
this._updateAttribute("height--tablet", e);
|
|
189
|
+
}
|
|
190
|
+
get heightLaptop() {
|
|
191
|
+
return this.getAttribute("height--laptop");
|
|
192
|
+
}
|
|
193
|
+
set heightLaptop(e) {
|
|
194
|
+
this._updateAttribute("height--laptop", e);
|
|
195
|
+
}
|
|
196
|
+
get heightDesktop() {
|
|
197
|
+
return this.getAttribute("height--desktop");
|
|
198
|
+
}
|
|
199
|
+
set heightDesktop(e) {
|
|
200
|
+
this._updateAttribute("height--desktop", e);
|
|
201
|
+
}
|
|
202
|
+
get cover() {
|
|
203
|
+
return this.hasAttribute("cover");
|
|
204
|
+
}
|
|
205
|
+
set cover(e) {
|
|
206
|
+
this._updateBooleanAttribute("cover", e);
|
|
207
|
+
}
|
|
208
|
+
}, u = class e extends l {
|
|
209
|
+
static {
|
|
210
|
+
this.nativeName = "img";
|
|
211
|
+
}
|
|
212
|
+
constructor() {
|
|
213
|
+
super();
|
|
214
|
+
let t = document.createElement(e.nativeName);
|
|
215
|
+
this.shadowRoot.appendChild(t);
|
|
216
|
+
}
|
|
218
217
|
};
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
updateLoading(t) {
|
|
342
|
-
!this.$imgEl || !this.src || (t && (t === "lazy" || t === "eager") ? this.$imgEl.loading = t : this.$imgEl.removeAttribute("loading"));
|
|
343
|
-
}
|
|
344
|
-
updateAlt(t) {
|
|
345
|
-
!this.$imgEl || !this.src || (this.$imgEl.alt = t || "");
|
|
346
|
-
}
|
|
347
|
-
};
|
|
348
|
-
h.nativeName = "picture";
|
|
349
|
-
let l = h;
|
|
350
|
-
customElements.get("px-picture") || customElements.define("px-picture", l);
|
|
351
|
-
export {
|
|
352
|
-
u as Image,
|
|
353
|
-
l as Picture
|
|
218
|
+
customElements.get("px-img") || customElements.define("px-img", u);
|
|
219
|
+
//#endregion
|
|
220
|
+
//#region src/Picture.ts
|
|
221
|
+
var d = class e extends l {
|
|
222
|
+
static {
|
|
223
|
+
this.nativeName = "picture";
|
|
224
|
+
}
|
|
225
|
+
constructor() {
|
|
226
|
+
super(), this.possibleImgExtension = [
|
|
227
|
+
"webp",
|
|
228
|
+
"svg",
|
|
229
|
+
"apng",
|
|
230
|
+
"png",
|
|
231
|
+
"jpg",
|
|
232
|
+
"jpeg",
|
|
233
|
+
"jfif",
|
|
234
|
+
"pjpeg",
|
|
235
|
+
"pjp",
|
|
236
|
+
"avif",
|
|
237
|
+
"gif",
|
|
238
|
+
"bmp",
|
|
239
|
+
"ico",
|
|
240
|
+
"cur",
|
|
241
|
+
"tif",
|
|
242
|
+
"tiff"
|
|
243
|
+
];
|
|
244
|
+
let t = document.createElement(e.nativeName);
|
|
245
|
+
this.shadowRoot.appendChild(t);
|
|
246
|
+
}
|
|
247
|
+
static get observedAttributes() {
|
|
248
|
+
return [
|
|
249
|
+
...super.observedAttributes,
|
|
250
|
+
"loading",
|
|
251
|
+
"alt",
|
|
252
|
+
"src"
|
|
253
|
+
];
|
|
254
|
+
}
|
|
255
|
+
get loading() {
|
|
256
|
+
return this.getAttribute("loading");
|
|
257
|
+
}
|
|
258
|
+
set loading(e) {
|
|
259
|
+
this._updateAttribute("loading", e);
|
|
260
|
+
}
|
|
261
|
+
get alt() {
|
|
262
|
+
return this.getAttribute("alt");
|
|
263
|
+
}
|
|
264
|
+
set alt(e) {
|
|
265
|
+
this._updateAttribute("alt", e);
|
|
266
|
+
}
|
|
267
|
+
get src() {
|
|
268
|
+
return this.getAttribute("src");
|
|
269
|
+
}
|
|
270
|
+
set src(e) {
|
|
271
|
+
this._updateAttribute("src", e);
|
|
272
|
+
}
|
|
273
|
+
get $imgEl() {
|
|
274
|
+
return this.shadowRoot.querySelector("img");
|
|
275
|
+
}
|
|
276
|
+
attributeChangedCallback(e, t, n) {
|
|
277
|
+
if (t !== n) switch (e) {
|
|
278
|
+
case "src":
|
|
279
|
+
this.addSrc(n, this.alt ?? "", this.loading ?? "");
|
|
280
|
+
break;
|
|
281
|
+
case "loading":
|
|
282
|
+
this.updateLoading(n);
|
|
283
|
+
break;
|
|
284
|
+
case "alt":
|
|
285
|
+
this.updateAlt(n);
|
|
286
|
+
break;
|
|
287
|
+
default: super.attributeChangedCallback(e, t, n);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
removeSrc() {
|
|
291
|
+
this.$el.innerHTML = "";
|
|
292
|
+
}
|
|
293
|
+
async imgExists(e) {
|
|
294
|
+
let t = await fetch(e, { method: "HEAD" }).catch((e) => console.log("Error:", e));
|
|
295
|
+
return typeof t == "object" && t.ok && t.status != 404 && t.status != 403 && t.headers.get("Content-Type") != "text/html";
|
|
296
|
+
}
|
|
297
|
+
async transformImgPath(e, t, n) {
|
|
298
|
+
let r = "";
|
|
299
|
+
(e.endsWith("-en") || e.endsWith("-fr") || e.endsWith("-nl") || e.endsWith("-de")) && (r = e.slice(-3), e = e.slice(0, -3)), (e.endsWith("-s") || e.endsWith("-m") || e.endsWith("-l")) && (e = e.slice(0, -2));
|
|
300
|
+
let i = `${e}${n}${r}.${t}`;
|
|
301
|
+
return await this.imgExists(i) || (i = ""), i;
|
|
302
|
+
}
|
|
303
|
+
addImg(e, t, n) {
|
|
304
|
+
let r = document.createElement("img");
|
|
305
|
+
r.src = e, r.alt = t || "", n && (n === "lazy" || n === "eager") && (r.loading = n), this.$el.appendChild(r);
|
|
306
|
+
}
|
|
307
|
+
addSrcset(e, t) {
|
|
308
|
+
if (e !== "") {
|
|
309
|
+
let n = document.createElement("source");
|
|
310
|
+
n.media = t, n.srcset = e, this.$el.insertBefore(n, this.$el.firstChild);
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
async addSrc(e, t, n) {
|
|
314
|
+
if (this.removeSrc(), !e) {
|
|
315
|
+
console.error("No \"src\" value defined");
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
let r = e.split(".").pop();
|
|
319
|
+
if (!r) return;
|
|
320
|
+
if (!this.possibleImgExtension.includes(r)) {
|
|
321
|
+
console.error("No extensions image to \"src\" value defined");
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
let i = e.slice(0, (r.length + 1) * -1), a = e;
|
|
325
|
+
if (await this.imgExists(a) || (a = await this.transformImgPath(i, r, "-s")), a === "") {
|
|
326
|
+
console.error("Invalid \"src\" value");
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
let o = await this.transformImgPath(i, r, "-m");
|
|
330
|
+
this.addSrcset(o, "screen and (min-width: 40.0625rem)");
|
|
331
|
+
let s = await this.transformImgPath(i, r, "-l");
|
|
332
|
+
this.addSrcset(s, "screen and (min-width: 64.0625rem)"), this.addImg(a, t, n);
|
|
333
|
+
}
|
|
334
|
+
updateLoading(e) {
|
|
335
|
+
!this.$imgEl || !this.src || (e && (e === "lazy" || e === "eager") ? this.$imgEl.loading = e : this.$imgEl.removeAttribute("loading"));
|
|
336
|
+
}
|
|
337
|
+
updateAlt(e) {
|
|
338
|
+
!this.$imgEl || !this.src || (this.$imgEl.alt = e || "");
|
|
339
|
+
}
|
|
354
340
|
};
|
|
341
|
+
customElements.get("px-picture") || customElements.define("px-picture", d);
|
|
342
|
+
//#endregion
|
|
343
|
+
export { u as Image, d as Picture };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-image",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.180",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|