@proximus/lavender-image 1.4.1 → 1.4.2

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";
+import { cssTokenBreakpoints as f, PxElement as x, noBorderRadiusValues as v, borderRadiusValues as A } 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 {
+const w = ["", "xs", "s", "m", "l", "xl"], $ = ["", "xs", "s", "m", "l", "xl"], y = (m, t, r) => `:host([${m}${r ? `--${r}` : ""}='${t}']) img`, E = "px-image", S = f(
+  "height",
+  y,
+  $,
+  E,
+  "--img-height"
+), p = class p extends x {
   constructor() {
-    super(
-      g,
-      x(
-        "height",
-        E,
-        y,
-        S,
-        "--img-height"
-      )
-    ), this.heightAttributeDelegate = new A(
-      this,
-      "height",
-      (t) => t,
-      "--img-height"
-    );
+    super(g, S);
   }
   static get observedAttributes() {
     return [
@@ -44,7 +36,7 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
             t,
             r,
             e,
-            w
+            A
           );
           break;
         case "no-border-radius":
@@ -63,7 +55,7 @@ const $ = ["", "xs", "s", "m", "l", "xl"], y = ["", "xs", "s", "m", "l", "xl"],
         case "width--tablet":
         case "width--laptop":
         case "width--desktop":
-          this.updateWidth(t, r, e, $);
+          this.updateWidth(t, r, e, w);
           break;
         case "disabled":
           e !== null ? this.$el.setAttribute("aria-disabled", "true") : this.$el.removeAttribute("aria-disabled");
@@ -220,19 +212,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 +244,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() {
@@ -349,10 +341,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.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",