@proximus/lavender-image 1.0.0 → 1.0.2

package/dist/AbstractImage.d.ts

@@ -5,6 +5,7 @@ export declare const imageWidthValues: string[];
 export declare const imageHeightValues: string[];
 export declare abstract class AbstractImage<IMAGE_ELEMENT extends HTMLImageElement | HTMLPictureElement> extends PxElement<IMAGE_ELEMENT> {
     heightAttributeDelegate: AttributeBreakpointHandlerDelegate;
+    static accessorExclusions: string[];
     constructor();
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;

package/dist/index.es.js

@@ -1,19 +1,18 @@
-import { PxElement as c, cssTokenBreakpoints as f, AttributeBreakpointHandlerDelegate as x, noBorderRadiusValues as A, borderRadiusValues as v } from "@proximus/lavender-common";
-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 only screen and (max-width: 767px){.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 only screen and (min-width: 768px) and (max-width: 1024px){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 only screen and (min-width: 1025px){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 only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}", p = new CSSStyleSheet();
-p.replaceSync(k);
-const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"], y = (l, t, r) => `:host([${l}${r ? `--${r}` : ""}='${t}']) img`, E = "px-image";
-class g extends c {
+import { PxElement as f, cssTokenBreakpoints as x, AttributeBreakpointHandlerDelegate as A, noBorderRadiusValues as v, borderRadiusValues as w } from "@proximus/lavender-common";
+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 only screen and (max-width: 767px){.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 only screen and (min-width: 768px) and (max-width: 1024px){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 only screen and (min-width: 1025px){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 only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}", g = new CSSStyleSheet();
+g.replaceSync(k);
+const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"], E = (m, t, r) => `:host([${m}${r ? `--${r}` : ""}='${t}']) img`, S = "px-image", u = class u extends f {
   constructor() {
     super(
-      p,
-      f(
+      g,
+      x(
         "height",
-        y,
-        $,
         E,
+        y,
+        S,
         "--img-height"
       )
-    ), this.heightAttributeDelegate = new x(
+    ), this.heightAttributeDelegate = new A(
       this,
       "height",
       (t) => t,
@@ -45,7 +44,7 @@ class g extends c {
             t,
             r,
             e,
-            v
+            w
           );
           break;
         case "no-border-radius":
@@ -56,7 +55,7 @@ class g extends c {
             t,
             r,
             e,
-            A
+            v
           );
           break;
         case "width":
@@ -64,7 +63,7 @@ class g extends c {
         case "width--tablet":
         case "width--laptop":
         case "width--desktop":
-          this.updateWidth(t, r, e, w);
+          this.updateWidth(t, r, e, $);
           break;
         case "disabled":
           e !== null ? this.$el.setAttribute("aria-disabled", "true") : this.$el.removeAttribute("aria-disabled");
@@ -220,18 +219,20 @@ class g extends c {
   set cover(t) {
     t ? this.setAttribute("cover", "") : this.removeAttribute("cover");
   }
-}
-const h = class h extends g {
+};
+u.accessorExclusions = ["height", "width"];
+let n = u;
+const l = class l extends n {
   constructor() {
     super();
     const t = document.createElement(this.nativeName);
     this.shadowRoot.appendChild(t);
   }
 };
-h.nativeName = "img";
-let n = h;
-customElements.get("px-image") || customElements.define("px-img", n);
-const u = class u extends g {
+l.nativeName = "img";
+let h = l;
+customElements.get("px-image") || customElements.define("px-img", h);
+const p = class p extends n {
   constructor() {
     super(), this.possibleImgExtension = [
       "webp",
@@ -338,8 +339,8 @@ const u = class u extends g {
     }
     const d = await this.transformImgPath(o, i, "-m");
     this.addSrcset(d, "only screen and (min-width: 40.0625em)");
-    const m = await this.transformImgPath(o, i, "-l");
-    this.addSrcset(m, "only screen and (min-width: 64.0625em)"), this.addImg(s, r, e);
+    const c = await this.transformImgPath(o, i, "-l");
+    this.addSrcset(c, "only screen and (min-width: 64.0625em)"), this.addImg(s, r, e);
   }
   updateLoading(t) {
     !this.$imgEl || !this.src || (t && (t === "lazy" || t === "eager") ? this.$imgEl.loading = t : this.$imgEl.removeAttribute("loading"));
@@ -348,10 +349,10 @@ const u = class u extends g {
     !this.$imgEl || !this.src || (this.$imgEl.alt = t || "");
   }
 };
-u.nativeName = "picture";
-let b = u;
+p.nativeName = "picture";
+let b = p;
 customElements.get("px-picture") || customElements.define("px-picture", b);
 export {
-  n as Image,
+  h as Image,
   b as Picture
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-image",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",