@proximus/lavender-carousel 2.0.0-alpha.26 → 2.0.0-alpha.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.es.js +111 -108
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,12 +1,12 @@
1
- var O = (r) => {
2
- throw TypeError(r);
1
+ var O = (s) => {
2
+ throw TypeError(s);
3
3
  };
4
- var N = (r, t, e) => t.has(r) || O("Cannot " + e);
5
- var d = (r, t, e) => (N(r, t, "read from private field"), e ? e.call(r) : t.get(r)), k = (r, t, e) => t.has(r) ? O("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), j = (r, t, e, i) => (N(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
6
- import { WithExtraAttributes as I, AttributeBreakpointHandlerDelegate as B, gapValues as G, checkName as st, log as x, backgroundColorValues as ot, PxElement as at, transferAccessibilityAttributes as nt, iconSizeValuesKC as lt, cssTokenBreakpoints as ct } from "@proximus/lavender-common";
7
- 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}}", ut = ':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))}}', Z = new CSSStyleSheet();
8
- Z.replaceSync(ut);
9
- const ht = [
4
+ var N = (s, t, e) => t.has(s) || O("Cannot " + e);
5
+ 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);
6
+ 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";
7
+ 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();
8
+ Z.replaceSync(ht);
9
+ const ut = [
10
10
  "",
11
11
  "default",
12
12
  "row",
@@ -120,7 +120,7 @@ class R extends I {
120
120
  case "direction--tablet":
121
121
  case "direction--laptop":
122
122
  case "direction--desktop":
123
- this.updateFlexProperties(t, e, i, ht);
123
+ this.updateFlexProperties(t, e, i, ut);
124
124
  break;
125
125
  case "overflow-x":
126
126
  case "overflow-x--mobile":
@@ -134,8 +134,8 @@ class R extends I {
134
134
  break;
135
135
  }
136
136
  }
137
- updateOverflowX(t, e, i, s) {
138
- if (!st(s, i)) {
137
+ updateOverflowX(t, e, i, o) {
138
+ if (!ot(o, i)) {
139
139
  x(
140
140
  `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
141
141
  );
@@ -147,25 +147,28 @@ class R extends I {
147
147
  i
148
148
  );
149
149
  }
150
- updateFlexProperties(t, e, i, s) {
151
- this.checkName(s, i) || x(
150
+ updateFlexProperties(t, e, i, o) {
151
+ this.checkName(o, i) || x(
152
152
  `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
153
153
  );
154
154
  const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
155
155
  if (!n)
156
156
  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) => {
157
- this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
157
+ this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
158
158
  });
159
159
  else {
160
160
  const c = t.split("--")[1];
161
- this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
161
+ this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
162
162
  }
163
163
  }
164
- updateStyle(t, e, i, s) {
165
- i && (t === "gap" && s && s.includes(i) ? this.$el.style.setProperty(
164
+ updateStyle(t, e, i, o) {
165
+ i && (t === "gap" && o && o.includes(i) ? (this.$el.style.setProperty(
166
166
  `--flex-${t}--${e}-value`,
167
167
  `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
168
- ) : this.$el.style.setProperty(
168
+ ), this.style.setProperty(
169
+ `--host-gap--${e}`,
170
+ `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
171
+ )) : this.$el.style.setProperty(
169
172
  `--flex-${t}--${e}-value`,
170
173
  i
171
174
  ));
@@ -602,7 +605,7 @@ class wt extends I {
602
605
  case "background-color":
603
606
  this.$bodyContainer.setAttribute(
604
607
  "background-color",
605
- ot.indexOf(i) > 0 ? i : "none"
608
+ rt.indexOf(i) > 0 ? i : "none"
606
609
  );
607
610
  break;
608
611
  case "padding-vertical":
@@ -774,7 +777,7 @@ const zt = [
774
777
  "StateActive",
775
778
  "StateDisabled"
776
779
  ], jt = ["Inherit", ...zt].map(
777
- (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
780
+ (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
778
781
  ), Lt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", K = new CSSStyleSheet();
779
782
  K.replaceSync(Lt);
780
783
  const Tt = [
@@ -786,12 +789,12 @@ const Tt = [
786
789
  "from",
787
790
  "disabled"
788
791
  ];
789
- var h, p, $;
792
+ var u, p, $;
790
793
  class Et extends I {
791
794
  constructor(...e) {
792
795
  var i;
793
796
  super(...e, K);
794
- k(this, h);
797
+ k(this, u);
795
798
  k(this, p);
796
799
  k(this, $, () => `<svg aria-hidden="true">
797
800
  <use xlink:href=""></use>
@@ -801,17 +804,17 @@ class Et extends I {
801
804
  static get observedAttributes() {
802
805
  return [...super.observedAttributes, ...Tt];
803
806
  }
804
- attributeChangedCallback(e, i, s) {
805
- if (i !== s)
807
+ attributeChangedCallback(e, i, o) {
808
+ if (i !== o)
806
809
  switch (e) {
807
810
  case "name":
808
- this.updateName(i, s);
811
+ this.updateName(i, o);
809
812
  break;
810
813
  case "size":
811
- this.updateAttribute(e, i, s, lt);
814
+ this.updateAttribute(e, i, o, lt);
812
815
  break;
813
816
  case "color":
814
- this.updateAttribute(e, i, s, jt);
817
+ this.updateAttribute(e, i, o, jt);
815
818
  break;
816
819
  case "disabled":
817
820
  this.color = "state-disabled";
@@ -819,7 +822,7 @@ class Et extends I {
819
822
  case "aria-label":
820
823
  if (!d(this, p))
821
824
  return;
822
- s ? (d(this, p).ariaHidden = "false", this.ariaHidden = "false") : (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
825
+ o ? (d(this, p).ariaHidden = "false", this.ariaHidden = "false") : (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
823
826
  break;
824
827
  }
825
828
  }
@@ -835,22 +838,22 @@ class Et extends I {
835
838
  console.error("Icon name or src not found");
836
839
  continue;
837
840
  }
838
- i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
841
+ i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, u, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
839
842
  "xlink:href",
840
- `${d(this, h)}#icon-${this.name}`
843
+ `${d(this, u)}#icon-${this.name}`
841
844
  ));
842
845
  }
843
846
  !this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
844
847
  }
845
- updateAttribute(e, i, s, n) {
846
- i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), s !== null && s !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${s}`) : this.$el.classList.toggle(s)), this.checkName(n, s) || x(
847
- `${s} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
848
+ updateAttribute(e, i, o, n) {
849
+ i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(n, o) || x(
850
+ `${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
848
851
  );
849
852
  }
850
853
  updateName(e, i) {
851
- d(this, h) && this.$el.firstElementChild.setAttribute(
854
+ d(this, u) && this.$el.firstElementChild.setAttribute(
852
855
  "xlink:href",
853
- `${d(this, h)}#icon-${i}`
856
+ `${d(this, u)}#icon-${i}`
854
857
  );
855
858
  }
856
859
  get $el() {
@@ -899,7 +902,7 @@ class Et extends I {
899
902
  this.setAttribute("disabled", e);
900
903
  }
901
904
  }
902
- h = new WeakMap(), p = new WeakMap(), $ = new WeakMap();
905
+ u = new WeakMap(), p = new WeakMap(), $ = new WeakMap();
903
906
  customElements.get("px-icon") || customElements.define("px-icon", Et);
904
907
  const It = ":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)}", J = new CSSStyleSheet();
905
908
  J.replaceSync(It);
@@ -908,7 +911,7 @@ class Rt extends HTMLElement {
908
911
  super(), this.template = (t, e) => `<div class="container">
909
912
  ${Array.from(
910
913
  { length: Math.min(t, 5) },
911
- (i, s) => `<div id="seed-${s}" ${e === s ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
914
+ (i, o) => `<div id="seed-${o}" ${e === o ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
912
915
  <div></div>
913
916
  </div>`
914
917
  ).join("")}
@@ -946,103 +949,103 @@ class Rt extends HTMLElement {
946
949
  }
947
950
  }
948
951
  customElements.get("px-appleseed") || customElements.define("px-appleseed", Rt);
949
- function y(r) {
950
- var t = typeof r;
951
- return r != null && (t == "object" || t == "function");
952
+ function y(s) {
953
+ var t = typeof s;
954
+ return s != null && (t == "object" || t == "function");
952
955
  }
953
956
  var Mt = typeof global == "object" && global && global.Object === Object && global, Ht = typeof self == "object" && self && self.Object === Object && self, Q = Mt || Ht || Function("return this")(), L = function() {
954
957
  return Q.Date.now();
955
958
  }, Pt = /\s/;
956
- function Dt(r) {
957
- for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
959
+ function Dt(s) {
960
+ for (var t = s.length; t-- && Pt.test(s.charAt(t)); )
958
961
  ;
959
962
  return t;
960
963
  }
961
964
  var qt = /^\s+/;
962
- function Ot(r) {
963
- return r && r.slice(0, Dt(r) + 1).replace(qt, "");
965
+ function Ot(s) {
966
+ return s && s.slice(0, Dt(s) + 1).replace(qt, "");
964
967
  }
965
968
  var w = Q.Symbol, Y = Object.prototype, Nt = Y.hasOwnProperty, Wt = Y.toString, f = w ? w.toStringTag : void 0;
966
- function Xt(r) {
967
- var t = Nt.call(r, f), e = r[f];
969
+ function Xt(s) {
970
+ var t = Nt.call(s, f), e = s[f];
968
971
  try {
969
- r[f] = void 0;
972
+ s[f] = void 0;
970
973
  var i = !0;
971
974
  } catch {
972
975
  }
973
- var s = Wt.call(r);
974
- return i && (t ? r[f] = e : delete r[f]), s;
976
+ var o = Wt.call(s);
977
+ return i && (t ? s[f] = e : delete s[f]), o;
975
978
  }
976
979
  var Ft = Object.prototype, Bt = Ft.toString;
977
- function Gt(r) {
978
- return Bt.call(r);
980
+ function Gt(s) {
981
+ return Bt.call(s);
979
982
  }
980
983
  var Zt = "[object Null]", _t = "[object Undefined]", W = w ? w.toStringTag : void 0;
981
- function Ut(r) {
982
- return r == null ? r === void 0 ? _t : Zt : W && W in Object(r) ? Xt(r) : Gt(r);
984
+ function Ut(s) {
985
+ return s == null ? s === void 0 ? _t : Zt : W && W in Object(s) ? Xt(s) : Gt(s);
983
986
  }
984
- function Kt(r) {
985
- return r != null && typeof r == "object";
987
+ function Kt(s) {
988
+ return s != null && typeof s == "object";
986
989
  }
987
990
  var Jt = "[object Symbol]";
988
- function Qt(r) {
989
- return typeof r == "symbol" || Kt(r) && Ut(r) == Jt;
991
+ function Qt(s) {
992
+ return typeof s == "symbol" || Kt(s) && Ut(s) == Jt;
990
993
  }
991
994
  var X = NaN, Yt = /^[-+]0x[0-9a-f]+$/i, Vt = /^0b[01]+$/i, te = /^0o[0-7]+$/i, ee = parseInt;
992
- function F(r) {
993
- if (typeof r == "number")
994
- return r;
995
- if (Qt(r))
995
+ function F(s) {
996
+ if (typeof s == "number")
997
+ return s;
998
+ if (Qt(s))
996
999
  return X;
997
- if (y(r)) {
998
- var t = typeof r.valueOf == "function" ? r.valueOf() : r;
999
- r = y(t) ? t + "" : t;
1000
- }
1001
- if (typeof r != "string")
1002
- return r === 0 ? r : +r;
1003
- r = Ot(r);
1004
- var e = Vt.test(r);
1005
- return e || te.test(r) ? ee(r.slice(2), e ? 2 : 8) : Yt.test(r) ? X : +r;
1000
+ if (y(s)) {
1001
+ var t = typeof s.valueOf == "function" ? s.valueOf() : s;
1002
+ s = y(t) ? t + "" : t;
1003
+ }
1004
+ if (typeof s != "string")
1005
+ return s === 0 ? s : +s;
1006
+ s = Ot(s);
1007
+ var e = Vt.test(s);
1008
+ return e || te.test(s) ? ee(s.slice(2), e ? 2 : 8) : Yt.test(s) ? X : +s;
1006
1009
  }
1007
- var ie = "Expected a function", re = Math.max, se = Math.min;
1008
- function oe(r, t, e) {
1009
- var i, s, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
1010
- if (typeof r != "function")
1010
+ var ie = "Expected a function", se = Math.max, oe = Math.min;
1011
+ function re(s, t, e) {
1012
+ var i, o, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
1013
+ if (typeof s != "function")
1011
1014
  throw new TypeError(ie);
1012
- t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? re(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
1013
- function C(o) {
1014
- var u = i, v = s;
1015
- return i = s = void 0, b = o, l = r.apply(v, u), l;
1015
+ t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? se(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
1016
+ function C(r) {
1017
+ var h = i, v = o;
1018
+ return i = o = void 0, b = r, l = s.apply(v, h), l;
1016
1019
  }
1017
- function tt(o) {
1018
- return b = o, a = setTimeout(m, t), H ? C(o) : l;
1020
+ function tt(r) {
1021
+ return b = r, a = setTimeout(m, t), H ? C(r) : l;
1019
1022
  }
1020
- function et(o) {
1021
- var u = o - c, v = o - b, q = t - u;
1022
- return g ? se(q, n - v) : q;
1023
+ function et(r) {
1024
+ var h = r - c, v = r - b, q = t - h;
1025
+ return g ? oe(q, n - v) : q;
1023
1026
  }
1024
- function P(o) {
1025
- var u = o - c, v = o - b;
1026
- return c === void 0 || u >= t || u < 0 || g && v >= n;
1027
+ function P(r) {
1028
+ var h = r - c, v = r - b;
1029
+ return c === void 0 || h >= t || h < 0 || g && v >= n;
1027
1030
  }
1028
1031
  function m() {
1029
- var o = L();
1030
- if (P(o))
1031
- return D(o);
1032
- a = setTimeout(m, et(o));
1032
+ var r = L();
1033
+ if (P(r))
1034
+ return D(r);
1035
+ a = setTimeout(m, et(r));
1033
1036
  }
1034
- function D(o) {
1035
- return a = void 0, S && i ? C(o) : (i = s = void 0, l);
1037
+ function D(r) {
1038
+ return a = void 0, S && i ? C(r) : (i = o = void 0, l);
1036
1039
  }
1037
1040
  function it() {
1038
- a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
1041
+ a !== void 0 && clearTimeout(a), b = 0, i = c = o = a = void 0;
1039
1042
  }
1040
- function rt() {
1043
+ function st() {
1041
1044
  return a === void 0 ? l : D(L());
1042
1045
  }
1043
1046
  function z() {
1044
- var o = L(), u = P(o);
1045
- if (i = arguments, s = this, c = o, u) {
1047
+ var r = L(), h = P(r);
1048
+ if (i = arguments, o = this, c = r, h) {
1046
1049
  if (a === void 0)
1047
1050
  return tt(c);
1048
1051
  if (g)
@@ -1050,22 +1053,22 @@ function oe(r, t, e) {
1050
1053
  }
1051
1054
  return a === void 0 && (a = setTimeout(m, t)), l;
1052
1055
  }
1053
- return z.cancel = it, z.flush = rt, z;
1056
+ return z.cancel = it, z.flush = st, z;
1054
1057
  }
1055
1058
  var ae = "Expected a function";
1056
- function ne(r, t, e) {
1057
- var i = !0, s = !0;
1058
- if (typeof r != "function")
1059
+ function ne(s, t, e) {
1060
+ var i = !0, o = !0;
1061
+ if (typeof s != "function")
1059
1062
  throw new TypeError(ae);
1060
- return y(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), oe(r, t, {
1063
+ return y(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), re(s, t, {
1061
1064
  leading: i,
1062
1065
  maxWait: t,
1063
- trailing: s
1066
+ trailing: o
1064
1067
  });
1065
1068
  }
1066
1069
  const M = new CSSStyleSheet();
1067
1070
  M.replaceSync(dt);
1068
- const le = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, ce = "px-spacing", T = (r) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
1071
+ const le = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .carousel`, ce = "px-spacing", T = (s) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${s}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
1069
1072
  class de extends HTMLElement {
1070
1073
  constructor() {
1071
1074
  super(), this.visibleItemsAttributeDelegate = new B(
@@ -1094,12 +1097,12 @@ class de extends HTMLElement {
1094
1097
  </px-hstack>
1095
1098
  </px-vstack>`, this.onScroll = () => {
1096
1099
  const t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
1097
- let s = 0;
1098
- window.innerWidth < 768 ? s = Math.round(
1100
+ let o = 0;
1101
+ window.innerWidth < 768 ? o = Math.round(
1099
1102
  t / (e - i) * (this.itemNumbers - 1)
1100
- ) : Math.ceil(t + i) + 10 >= e ? s = this.itemNumbers - 1 : s = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
1101
- let n = s;
1102
- 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();
1103
+ ) : Math.ceil(t + i) + 10 >= e ? o = this.itemNumbers - 1 : o = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
1104
+ let n = o;
1105
+ this.itemNumbers > 5 && (o > 2 && o < this.itemNumbers - 2 ? n = 2 : o === this.itemNumbers - 2 ? n = 3 : o === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
1103
1106
  }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
1104
1107
  M,
1105
1108
  ct(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-carousel",
3
- "version": "2.0.0-alpha.26",
3
+ "version": "2.0.0-alpha.28",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",