@proximus/lavender-image 1.4.1 → 1.4.3-alpha.1

package/dist/AbstractImage.d.ts

@@ -1,12 +1,10 @@
-import { PxElement, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
+import { PxElement } from '@proximus/lavender-common';
 export declare const styleSheet: CSSStyleSheet;
-export declare const breakpointsValues: string[];
 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();
+    protected constructor();
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     updateWidth(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;

package/dist/index.es.js

@@ -1,23 +1,15 @@
-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 {
+import { cssTokenBreakpoints as x, PxElement as v, noBorderRadiusValues as A, borderRadiusValues as w, log as g } 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)}}", m = new CSSStyleSheet();
+m.replaceSync(k);
+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 = x(
+  "height",
+  E,
+  y,
+  S,
+  "--img-height"
+), p = class p extends v {
   constructor() {
-    super(
-      g,
-      x(
-        "height",
-        E,
-        y,
-        S,
-        "--img-height"
-      )
-    ), this.heightAttributeDelegate = new A(
-      this,
-      "height",
-      (t) => t,
-      "--img-height"
-    );
+    super(m, C);
   }
   static get observedAttributes() {
     return [
@@ -55,7 +47,7 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
             t,
             r,
             e,
-            v
+            A
           );
           break;
         case "width":
@@ -75,7 +67,9 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
   }
   updateWidth(t, r, e, i) {
     if (!this.checkName(i, e)) {
-      console.error(`${e} is not an allowed ${t} value`);
+      g(
+        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const o = t.indexOf("--") > -1, s = o ? t.split("--")[0] : t, a = [];
@@ -96,7 +90,9 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
   }
   updateAttribute(t, r, e, i) {
     if (!this.checkName(i, e))
-      console.error(`${e} is not an allowed ${t} value`);
+      g(
+        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
     else {
       const o = this.splitAttrNameFromBreakpoint(t), s = o.breakpoint;
       r !== null && r !== "" && this.$el.classList.toggle(
@@ -220,19 +216,19 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
     t ? this.setAttribute("cover", "") : this.removeAttribute("cover");
   }
 };
-u.accessorExclusions = ["height", "width"];
-let n = u;
-const l = class l extends n {
+p.accessorExclusions = ["height", "width"];
+let n = p;
+const b = class b extends n {
   constructor() {
     super();
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(b.nativeName);
     this.shadowRoot.appendChild(t);
   }
 };
-l.nativeName = "img";
-let h = l;
-customElements.get("px-image") || customElements.define("px-img", h);
-const p = class p extends n {
+b.nativeName = "img";
+let u = b;
+customElements.get("px-image") || customElements.define("px-img", u);
+const h = class h extends n {
   constructor() {
     super(), this.possibleImgExtension = [
       "webp",
@@ -252,7 +248,7 @@ const p = class p extends n {
       "tif",
       "tiff"
     ];
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(h.nativeName);
     this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
@@ -339,8 +335,8 @@ const p = class p extends n {
     }
     const d = await this.transformImgPath(o, i, "-m");
     this.addSrcset(d, "only screen and (min-width: 40.0625em)");
-    const c = await this.transformImgPath(o, i, "-l");
-    this.addSrcset(c, "only screen and (min-width: 64.0625em)"), this.addImg(s, r, e);
+    const f = await this.transformImgPath(o, i, "-l");
+    this.addSrcset(f, "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"));
@@ -349,10 +345,10 @@ const p = class p extends n {
     !this.$imgEl || !this.src || (this.$imgEl.alt = t || "");
   }
 };
-p.nativeName = "picture";
-let b = p;
-customElements.get("px-picture") || customElements.define("px-picture", b);
+h.nativeName = "picture";
+let l = h;
+customElements.get("px-picture") || customElements.define("px-picture", l);
 export {
-  h as Image,
-  b as Picture
+  u as Image,
+  l as Picture
 };

package/package.json

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