@proximus/lavender-carousel 2.0.0-alpha.55 → 2.0.0-alpha.57

package/dist/index.es.js

@@ -3,7 +3,7 @@ var O = (s) => {
 };
 var N = (s, t, e) => t.has(s) || O("Cannot " + e);
 var d = (s, t, e) => (N(s, t, "read from private field"), e ? e.call(s) : t.get(s)), k = (s, t, e) => t.has(s) ? O("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), j = (s, t, e, i) => (N(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e);
-import { WithExtraAttributes as I, AttributeBreakpointHandlerDelegate as B, gapValues as G, checkName as ot, log as x, backgroundColorValues as rt, PxElement as at, transferAccessibilityAttributes as nt, iconSizeValuesKC as lt, cssTokenBreakpoints as ct } from "@proximus/lavender-common";
+import { WithExtraAttributes as I, AttributeBreakpointHandlerDelegate as B, gapValues as G, checkName as ot, log as x, backgroundColorValues as at, PxElement as rt, transferAccessibilityAttributes as nt, iconSizeValuesKC as lt, cssTokenBreakpoints as ct } from "@proximus/lavender-common";
 const dt = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", pt = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", ht = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', Z = new CSSStyleSheet();
 Z.replaceSync(ht);
 const ut = [
@@ -151,9 +151,9 @@ class R extends I {
     this.checkName(o, i) || x(
       `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
     );
-    const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
+    const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, r = [];
     if (!n)
-      this.getAttribute(l + "--mobile") || a.push("mobile"), this.getAttribute(l + "--tablet") || a.push("tablet"), this.getAttribute(l + "--laptop") || a.push("laptop"), this.getAttribute(l + "--desktop") || a.push("desktop"), a.forEach((c) => {
+      this.getAttribute(l + "--mobile") || r.push("mobile"), this.getAttribute(l + "--tablet") || r.push("tablet"), this.getAttribute(l + "--laptop") || r.push("laptop"), this.getAttribute(l + "--desktop") || r.push("desktop"), r.forEach((c) => {
         this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
       });
     else {
@@ -605,7 +605,7 @@ class wt extends I {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            rt.indexOf(i) > 0 ? i : "none"
+            at.indexOf(i) > 0 ? i : "none"
           );
           break;
         case "padding-vertical":
@@ -633,7 +633,7 @@ const $t = ["", "default", "small"], St = [
   "default",
   "secondary",
   "naked"
-], A = class A extends at {
+], A = class A extends rt {
   constructor() {
     super(U), this.template = () => "<slot></slot>";
     const t = document.createElement(A.nativeName);
@@ -788,7 +788,7 @@ class Tt extends I {
     k(this, u);
     k(this, p);
     k(this, $, () => `<svg aria-hidden="true">
-      <use xlink:href=""></use>
+      <use></use>
     </svg>`);
     this.shadowRoot.innerHTML = d(this, $).call(this), j(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
   }
@@ -827,10 +827,7 @@ class Tt extends I {
       }
   }
   connectedCallback() {
-    this.role = "img", this.name && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `#icon-${this.name}`
-    );
+    this.role = "img";
     const e = document.querySelectorAll("px-icon-set");
     e || console.log("<px-icon-set> component not found");
     for (const i of e) {
@@ -839,7 +836,7 @@ class Tt extends I {
         continue;
       }
       i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, u, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
-        "xlink:href",
+        "href",
         `${d(this, u)}#icon-${this.name}`
       ));
     }
@@ -852,7 +849,7 @@ class Tt extends I {
   }
   updateName(e, i) {
     d(this, u) && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
+      "href",
       `${d(this, u)}#icon-${i}`
     );
   }
@@ -1009,57 +1006,57 @@ function F(s) {
 }
 var ee = "Expected a function", ie = Math.max, se = Math.min;
 function oe(s, t, e) {
-  var i, o, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
+  var i, o, n, l, r, c, b = 0, H = !1, g = !1, S = !0;
   if (typeof s != "function")
     throw new TypeError(ee);
   t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? ie(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
-  function C(r) {
+  function C(a) {
     var h = i, v = o;
-    return i = o = void 0, b = r, l = s.apply(v, h), l;
+    return i = o = void 0, b = a, l = s.apply(v, h), l;
   }
-  function tt(r) {
-    return b = r, a = setTimeout(m, t), H ? C(r) : l;
+  function tt(a) {
+    return b = a, r = setTimeout(m, t), H ? C(a) : l;
   }
-  function et(r) {
-    var h = r - c, v = r - b, q = t - h;
+  function et(a) {
+    var h = a - c, v = a - b, q = t - h;
     return g ? se(q, n - v) : q;
   }
-  function P(r) {
-    var h = r - c, v = r - b;
+  function P(a) {
+    var h = a - c, v = a - b;
     return c === void 0 || h >= t || h < 0 || g && v >= n;
   }
   function m() {
-    var r = L();
-    if (P(r))
-      return D(r);
-    a = setTimeout(m, et(r));
+    var a = L();
+    if (P(a))
+      return D(a);
+    r = setTimeout(m, et(a));
   }
-  function D(r) {
-    return a = void 0, S && i ? C(r) : (i = o = void 0, l);
+  function D(a) {
+    return r = void 0, S && i ? C(a) : (i = o = void 0, l);
   }
   function it() {
-    a !== void 0 && clearTimeout(a), b = 0, i = c = o = a = void 0;
+    r !== void 0 && clearTimeout(r), b = 0, i = c = o = r = void 0;
   }
   function st() {
-    return a === void 0 ? l : D(L());
+    return r === void 0 ? l : D(L());
   }
   function z() {
-    var r = L(), h = P(r);
-    if (i = arguments, o = this, c = r, h) {
-      if (a === void 0)
+    var a = L(), h = P(a);
+    if (i = arguments, o = this, c = a, h) {
+      if (r === void 0)
         return tt(c);
       if (g)
-        return clearTimeout(a), a = setTimeout(m, t), C(c);
+        return clearTimeout(r), r = setTimeout(m, t), C(c);
     }
-    return a === void 0 && (a = setTimeout(m, t)), l;
+    return r === void 0 && (r = setTimeout(m, t)), l;
   }
   return z.cancel = it, z.flush = st, z;
 }
-var re = "Expected a function";
-function ae(s, t, e) {
+var ae = "Expected a function";
+function re(s, t, e) {
   var i = !0, o = !0;
   if (typeof s != "function")
-    throw new TypeError(re);
+    throw new TypeError(ae);
   return y(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), oe(s, t, {
     leading: i,
     maxWait: t,
@@ -1138,7 +1135,7 @@ class ce extends HTMLElement {
       this.getAttribute("gap") || "s"
     ), requestAnimationFrame(() => {
       this.handleAppleSeedDisplay();
-    }), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ae(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
+    }), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", re(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
       this.$carousel.scrollLeft -= this.$carousel.clientWidth;
     }), this.$next.addEventListener("click", () => {
       this.$carousel.scrollLeft += this.$carousel.clientWidth;

package/package.json

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