@proximus/lavender-image 2.0.0-alpha.14 → 2.0.0-alpha.141
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/Image.d.ts +6 -0
- package/dist/index.es.js +20 -16
- package/package.json +2 -2
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/index.es.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { cssTokenBreakpoints as
|
|
2
|
-
const k = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.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(100%)}@media
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as v, PxElement as x, noBorderRadiusValues as A, borderRadiusValues as w, log as g } from "@proximus/lavender-common";
|
|
2
|
+
const k = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.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(100%)}@media screen and (max-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 (min-width: 48rem) and (max-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 (min-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 (min-width: 90.0625rem){img{width:var(--img-width--desktop, auto)}}", m = new CSSStyleSheet();
|
|
3
|
+
m.replaceSync(k);
|
|
4
|
+
const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"], E = (c, t, r) => `:host([${c}${r ? `--${r}` : ""}='${t}']) img`, S = "px-image", C = v(
|
|
5
5
|
"height",
|
|
6
|
-
y,
|
|
7
|
-
$,
|
|
8
6
|
E,
|
|
7
|
+
y,
|
|
8
|
+
S,
|
|
9
9
|
"--img-height"
|
|
10
10
|
), p = class p extends x {
|
|
11
11
|
constructor() {
|
|
12
|
-
super(
|
|
12
|
+
super(m, C);
|
|
13
13
|
}
|
|
14
14
|
static get observedAttributes() {
|
|
15
15
|
return [
|
|
@@ -36,7 +36,7 @@ const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"],
|
|
|
36
36
|
t,
|
|
37
37
|
r,
|
|
38
38
|
e,
|
|
39
|
-
|
|
39
|
+
w
|
|
40
40
|
);
|
|
41
41
|
break;
|
|
42
42
|
case "no-border-radius":
|
|
@@ -47,7 +47,7 @@ const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"],
|
|
|
47
47
|
t,
|
|
48
48
|
r,
|
|
49
49
|
e,
|
|
50
|
-
|
|
50
|
+
A
|
|
51
51
|
);
|
|
52
52
|
break;
|
|
53
53
|
case "width":
|
|
@@ -55,7 +55,7 @@ const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"],
|
|
|
55
55
|
case "width--tablet":
|
|
56
56
|
case "width--laptop":
|
|
57
57
|
case "width--desktop":
|
|
58
|
-
this.updateWidth(t, r, e,
|
|
58
|
+
this.updateWidth(t, r, e, $);
|
|
59
59
|
break;
|
|
60
60
|
case "disabled":
|
|
61
61
|
e !== null ? this.$el.setAttribute("aria-disabled", "true") : this.$el.removeAttribute("aria-disabled");
|
|
@@ -67,7 +67,9 @@ const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"],
|
|
|
67
67
|
}
|
|
68
68
|
updateWidth(t, r, e, i) {
|
|
69
69
|
if (!this.checkName(i, e)) {
|
|
70
|
-
|
|
70
|
+
g(
|
|
71
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
72
|
+
);
|
|
71
73
|
return;
|
|
72
74
|
}
|
|
73
75
|
const o = t.indexOf("--") > -1, s = o ? t.split("--")[0] : t, a = [];
|
|
@@ -88,7 +90,9 @@ const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"],
|
|
|
88
90
|
}
|
|
89
91
|
updateAttribute(t, r, e, i) {
|
|
90
92
|
if (!this.checkName(i, e))
|
|
91
|
-
|
|
93
|
+
g(
|
|
94
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
95
|
+
);
|
|
92
96
|
else {
|
|
93
97
|
const o = this.splitAttrNameFromBreakpoint(t), s = o.breakpoint;
|
|
94
98
|
r !== null && r !== "" && this.$el.classList.toggle(
|
|
@@ -223,7 +227,7 @@ const b = class b extends n {
|
|
|
223
227
|
};
|
|
224
228
|
b.nativeName = "img";
|
|
225
229
|
let u = b;
|
|
226
|
-
customElements.get("px-
|
|
230
|
+
customElements.get("px-img") || customElements.define("px-img", u);
|
|
227
231
|
const h = class h extends n {
|
|
228
232
|
constructor() {
|
|
229
233
|
super(), this.possibleImgExtension = [
|
|
@@ -330,9 +334,9 @@ const h = class h extends n {
|
|
|
330
334
|
return;
|
|
331
335
|
}
|
|
332
336
|
const d = await this.transformImgPath(o, i, "-m");
|
|
333
|
-
this.addSrcset(d, "
|
|
334
|
-
const
|
|
335
|
-
this.addSrcset(
|
|
337
|
+
this.addSrcset(d, "screen and (min-width: 40.0625rem)");
|
|
338
|
+
const f = await this.transformImgPath(o, i, "-l");
|
|
339
|
+
this.addSrcset(f, "screen and (min-width: 64.0625rem)"), this.addImg(s, r, e);
|
|
336
340
|
}
|
|
337
341
|
updateLoading(t) {
|
|
338
342
|
!this.$imgEl || !this.src || (t && (t === "lazy" || t === "eager") ? this.$imgEl.loading = t : this.$imgEl.removeAttribute("loading"));
|
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.141",
|
|
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"
|