@proximus/lavender-image 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/AbstractImage.d.ts

@@ -1,11 +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;
-    constructor();
+    static accessorExclusions: string[];
+    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,24 +1,15 @@
-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 { 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(
-      p,
-      f(
-        "height",
-        y,
-        $,
-        E,
-        "--img-height"
-      )
-    ), this.heightAttributeDelegate = new x(
-      this,
-      "height",
-      (t) => t,
-      "--img-height"
-    );
+    super(m, C);
   }
   static get observedAttributes() {
     return [
@@ -45,7 +36,7 @@ class g extends c {
             t,
             r,
             e,
-            v
+            w
           );
           break;
         case "no-border-radius":
@@ -64,7 +55,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");
@@ -76,7 +67,9 @@ class g extends c {
   }
   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 = [];
@@ -97,7 +90,9 @@ class g extends c {
   }
   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,18 +215,20 @@ class g extends c {
   set cover(t) {
     t ? this.setAttribute("cover", "") : this.removeAttribute("cover");
   }
-}
-const h = class h extends g {
+};
+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);
   }
 };
-h.nativeName = "img";
-let n = h;
-customElements.get("px-image") || customElements.define("px-img", n);
-const u = class u extends g {
+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",
@@ -251,7 +248,7 @@ const u = class u extends g {
       "tif",
       "tiff"
     ];
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(h.nativeName);
     this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
@@ -338,8 +335,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 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"));
@@ -348,10 +345,10 @@ const u = class u extends g {
     !this.$imgEl || !this.src || (this.$imgEl.alt = t || "");
   }
 };
-u.nativeName = "picture";
-let b = u;
-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 {
-  n as Image,
-  b as Picture
+  u as Image,
+  l as Picture
 };

package/package.json

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