@proximus/lavender-carousel 1.4.1 → 1.4.2-beta.1

package/dist/index.es.js

@@ -2,8 +2,8 @@ var q = (r) => {
   throw TypeError(r);
 };
 var O = (r, t, e) => t.has(r) || q("Cannot " + e);
-var d = (r, t, e) => (O(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), C = (r, t, e, i) => (O(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
-import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as B, checkName as rt, backgroundColorValues as st, PxElement as ot, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
+var d = (r, t, e) => (O(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), z = (r, t, e, i) => (O(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
+import { WithExtraAttributes as E, AttributeBreakpointHandlerDelegate as F, gapValues as B, checkName as rt, backgroundColorValues as st, PxElement as ot, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
 const ct = ":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}", dt = "::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}}", pt = ':host{display:block}: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([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([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([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))}}', G = new CSSStyleSheet();
 G.replaceSync(pt);
 const ut = [
@@ -31,7 +31,7 @@ const ut = [
   "space-around",
   "space-evenly"
 ], gt = ["", "default", "nowrap", "wrap", "wrap-reverse"], vt = ["", "visible", "hidden", "scroll", "auto"];
-class E extends T {
+class I extends E {
   constructor() {
     super(G), this.overflowXAttributeDelegate = new F(
       this,
@@ -350,8 +350,8 @@ class E extends T {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
-customElements.get("px-stack") || customElements.define("px-stack", E);
-class ft extends E {
+customElements.get("px-stack") || customElements.define("px-stack", I);
+class ft extends I {
   constructor() {
     super();
   }
@@ -360,7 +360,7 @@ class ft extends E {
   }
 }
 customElements.get("px-vstack") || customElements.define("px-vstack", ft);
-class xt extends E {
+class xt extends I {
   constructor() {
     super();
   }
@@ -374,15 +374,15 @@ class mt extends HTMLElement {
     super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
   static get observedAttributes() {
-    return ["grow"];
+    return ["grow", "nogap"];
   }
   attributeChangedCallback(t, e, i) {
     t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
   }
   connectedCallback() {
-    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
+    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
       this.handleSizeChange();
-    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
+    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
   }
   disconnectedCallback() {
     var t;
@@ -409,11 +409,17 @@ class mt extends HTMLElement {
   updateParticipation() {
     this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
   }
+  get nogap() {
+    return this.hasAttribute("nogap");
+  }
+  set nogap(t) {
+    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+  }
 }
 customElements.get("px-spacer") || customElements.define("px-spacer", mt);
 const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", Z = new CSSStyleSheet();
 Z.replaceSync(kt);
-class yt extends T {
+class yt extends E {
   constructor() {
     super(Z), this.template = (t) => `
     <px-container border-radius="none" padding="none">
@@ -620,10 +626,10 @@ const At = ["", "default", "small"], $t = [
   "default",
   "secondary",
   "naked"
-], R = class R extends ot {
+], w = class w extends ot {
   constructor() {
     super(_), this.template = () => "<slot></slot>";
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(w.nativeName);
     t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
@@ -637,7 +643,6 @@ const At = ["", "default", "small"], $t = [
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     const t = this.querySelector("px-icon");
     if (t) {
       const e = t.getAttribute("size"), i = t.getAttribute("color");
@@ -710,9 +715,9 @@ const At = ["", "default", "small"], $t = [
     t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
   }
 };
-R.nativeName = "button";
-let L = R;
-customElements.get("px-button-icon") || customElements.define("px-button-icon", L);
+w.nativeName = "button";
+let T = w;
+customElements.get("px-button-icon") || customElements.define("px-button-icon", T);
 class St extends HTMLElement {
   constructor() {
     super();
@@ -773,17 +778,17 @@ const Lt = [
   "from",
   "disabled"
 ];
-var h, p, w;
-class Tt extends T {
+var h, p, A;
+class Tt extends E {
   constructor(...e) {
     var i;
     super(...e, U);
     m(this, h);
     m(this, p);
-    m(this, w, () => `<svg aria-hidden="true">
+    m(this, A, () => `<svg aria-hidden="true">
       <use xlink:href="#icon-${this.name}"></use>
     </svg>`);
-    this.shadowRoot.innerHTML = d(this, w).call(this), this.role = "img", C(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
+    this.shadowRoot.innerHTML = d(this, A).call(this), this.role = "img", z(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
   }
   static get observedAttributes() {
     return [...super.observedAttributes, ...Lt];
@@ -818,7 +823,7 @@ class Tt extends T {
         console.error("Icon name or src not found");
         continue;
       }
-      i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (C(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
+      i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (z(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
         "xlink:href",
         `${d(this, h)}#icon-${this.name}`
       ));
@@ -880,7 +885,7 @@ class Tt extends T {
     this.setAttribute("disabled", e);
   }
 }
-h = new WeakMap(), p = new WeakMap(), w = new WeakMap();
+h = new WeakMap(), p = new WeakMap(), A = new WeakMap();
 customElements.get("px-icon") || customElements.define("px-icon", Tt);
 const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", K = new CSSStyleSheet();
 K.replaceSync(Et);
@@ -931,7 +936,7 @@ function k(r) {
   var t = typeof r;
   return r != null && (t == "object" || t == "function");
 }
-var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, J = Rt || Mt || Function("return this")(), z = function() {
+var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, J = Rt || Mt || Function("return this")(), j = function() {
   return J.Date.now();
 }, Ht = /\s/;
 function Pt(r) {
@@ -987,16 +992,16 @@ function X(r) {
 }
 var ee = "Expected a function", ie = Math.max, re = Math.min;
 function se(r, t, e) {
-  var i, s, n, l, a, c, b = 0, M = !1, g = !1, A = !0;
+  var i, s, n, l, a, c, b = 0, M = !1, g = !1, $ = !0;
   if (typeof r != "function")
     throw new TypeError(ee);
-  t = X(t) || 0, k(e) && (M = !!e.leading, g = "maxWait" in e, n = g ? ie(X(e.maxWait) || 0, t) : n, A = "trailing" in e ? !!e.trailing : A);
-  function $(o) {
+  t = X(t) || 0, k(e) && (M = !!e.leading, g = "maxWait" in e, n = g ? ie(X(e.maxWait) || 0, t) : n, $ = "trailing" in e ? !!e.trailing : $);
+  function S(o) {
     var u = i, v = s;
     return i = s = void 0, b = o, l = r.apply(v, u), l;
   }
   function V(o) {
-    return b = o, a = setTimeout(x, t), M ? $(o) : l;
+    return b = o, a = setTimeout(x, t), M ? S(o) : l;
   }
   function tt(o) {
     var u = o - c, v = o - b, D = t - u;
@@ -1007,31 +1012,31 @@ function se(r, t, e) {
     return c === void 0 || u >= t || u < 0 || g && v >= n;
   }
   function x() {
-    var o = z();
+    var o = j();
     if (H(o))
       return P(o);
     a = setTimeout(x, tt(o));
   }
   function P(o) {
-    return a = void 0, A && i ? $(o) : (i = s = void 0, l);
+    return a = void 0, $ && i ? S(o) : (i = s = void 0, l);
   }
   function et() {
     a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
   }
   function it() {
-    return a === void 0 ? l : P(z());
+    return a === void 0 ? l : P(j());
   }
-  function S() {
-    var o = z(), u = H(o);
+  function C() {
+    var o = j(), u = H(o);
     if (i = arguments, s = this, c = o, u) {
       if (a === void 0)
         return V(c);
       if (g)
-        return clearTimeout(a), a = setTimeout(x, t), $(c);
+        return clearTimeout(a), a = setTimeout(x, t), S(c);
     }
     return a === void 0 && (a = setTimeout(x, t)), l;
   }
-  return S.cancel = et, S.flush = it, S;
+  return C.cancel = et, C.flush = it, C;
 }
 var oe = "Expected a function";
 function ae(r, t, e) {
@@ -1044,15 +1049,15 @@ function ae(r, t, e) {
     trailing: s
   });
 }
-const I = new CSSStyleSheet();
-I.replaceSync(ct);
-const ne = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, le = "px-spacing", j = (r) => (t, e) => `calc(((100%  - ${Math.max(parseInt(t), 2)}  * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
+const R = new CSSStyleSheet();
+R.replaceSync(ct);
+const ne = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, le = "px-spacing", L = (r) => (t, e) => `calc(((100%  - ${Math.max(parseInt(t), 2)}  * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
 class ce extends HTMLElement {
   constructor() {
     super(), this.visibleItemsAttributeDelegate = new F(
       this,
       "visible-items",
-      j("s"),
+      L("s"),
       "--px-carousel-min-width"
     ), this.template = `<px-vstack gap="default">
     <div class="carousel">
@@ -1082,7 +1087,7 @@ class ce extends HTMLElement {
       let n = s;
       this.itemNumbers > 5 && (s > 2 && s < this.itemNumbers - 2 ? n = 2 : s === this.itemNumbers - 2 ? n = 3 : s === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
     }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
-      I,
+      R,
       lt(
         "gap",
         ne,
@@ -1101,7 +1106,7 @@ class ce extends HTMLElement {
         case "gap--mobile":
         case "gap--tablet":
         case "gap--desktop":
-          this.visibleItemsAttributeDelegate.attributeValue = j(i);
+          this.visibleItemsAttributeDelegate.attributeValue = L(i);
           break;
         default:
           this.visibleItemsAttributeDelegate.attributeChangedCallback(
@@ -1112,7 +1117,7 @@ class ce extends HTMLElement {
       }
   }
   connectedCallback() {
-    this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = j(
+    this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = L(
       this.getAttribute("gap") || "s"
     ), requestAnimationFrame(() => {
       this.handleAppleSeedDisplay();
@@ -1164,7 +1169,7 @@ class de extends HTMLElement {
     super(), this.template = `
   <div class="carousel-item">
     <slot></slot>
-  </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [I, Y];
+  </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [R, Y];
   }
 }
 customElements.get("px-carousel-item") || customElements.define("px-carousel-item", de);

package/package.json

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