@proximus/lavender-image 2.0.0-alpha.16 → 2.0.0-alpha.161
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 +9 -9
- 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,13 +1,13 @@
|
|
|
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
|
|
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
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 =
|
|
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
6
|
E,
|
|
7
7
|
y,
|
|
8
8
|
S,
|
|
9
9
|
"--img-height"
|
|
10
|
-
), p = class p extends
|
|
10
|
+
), p = class p extends x {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(m, C);
|
|
13
13
|
}
|
|
@@ -68,7 +68,7 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
|
|
|
68
68
|
updateWidth(t, r, e, i) {
|
|
69
69
|
if (!this.checkName(i, e)) {
|
|
70
70
|
g(
|
|
71
|
-
|
|
71
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
72
72
|
);
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
@@ -91,7 +91,7 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
|
|
|
91
91
|
updateAttribute(t, r, e, i) {
|
|
92
92
|
if (!this.checkName(i, e))
|
|
93
93
|
g(
|
|
94
|
-
|
|
94
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
95
95
|
);
|
|
96
96
|
else {
|
|
97
97
|
const o = this.splitAttrNameFromBreakpoint(t), s = o.breakpoint;
|
|
@@ -227,7 +227,7 @@ const b = class b extends n {
|
|
|
227
227
|
};
|
|
228
228
|
b.nativeName = "img";
|
|
229
229
|
let u = b;
|
|
230
|
-
customElements.get("px-
|
|
230
|
+
customElements.get("px-img") || customElements.define("px-img", u);
|
|
231
231
|
const h = class h extends n {
|
|
232
232
|
constructor() {
|
|
233
233
|
super(), this.possibleImgExtension = [
|
|
@@ -334,9 +334,9 @@ const h = class h extends n {
|
|
|
334
334
|
return;
|
|
335
335
|
}
|
|
336
336
|
const d = await this.transformImgPath(o, i, "-m");
|
|
337
|
-
this.addSrcset(d, "
|
|
337
|
+
this.addSrcset(d, "screen and (min-width: 40.0625rem)");
|
|
338
338
|
const f = await this.transformImgPath(o, i, "-l");
|
|
339
|
-
this.addSrcset(f, "
|
|
339
|
+
this.addSrcset(f, "screen and (min-width: 64.0625rem)"), this.addImg(s, r, e);
|
|
340
340
|
}
|
|
341
341
|
updateLoading(t) {
|
|
342
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.161",
|
|
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"
|