@proximus/lavender-carousel 1.0.0-alpha.13 → 1.0.0-alpha.14
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.
- package/dist/index.es.js +15 -20
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WithExtraAttributes as $, AttributeBreakpointHandlerDelegate as q, gapValues as D, checkName as K, backgroundColorValues as Q, PxElement as Y, transferAccessibilityAttributes as Z, cssTokenBreakpoints as V } from "@proximus/lavender-common";
|
|
2
|
-
const tt = ":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}", et = "::slotted(*){border-radius:var(--px-radius-main)}: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}@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}}", it = ":host{display:block}.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 (
|
|
2
|
+
const tt = ":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}", et = "::slotted(*){border-radius:var(--px-radius-main)}: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}@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}}", it = ":host{display:block}.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)}}@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)}}@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))}}", H = new CSSStyleSheet();
|
|
3
3
|
H.replaceSync(it);
|
|
4
4
|
const rt = [
|
|
5
5
|
"",
|
|
@@ -131,10 +131,7 @@ class z extends $ {
|
|
|
131
131
|
}
|
|
132
132
|
updateOverflowX(t, e, i, s) {
|
|
133
133
|
if (!K(s, i)) {
|
|
134
|
-
console.error(
|
|
135
|
-
`${i} is not an allowed ${t} value for`,
|
|
136
|
-
this.$el
|
|
137
|
-
);
|
|
134
|
+
console.error(`${i} is not an allowed ${t} value`);
|
|
138
135
|
return;
|
|
139
136
|
}
|
|
140
137
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
@@ -144,7 +141,7 @@ class z extends $ {
|
|
|
144
141
|
);
|
|
145
142
|
}
|
|
146
143
|
updateFlexProperties(t, e, i, s) {
|
|
147
|
-
this.checkName(s, i) || console.error(
|
|
144
|
+
this.checkName(s, i) || console.error(`${i} is not a valid value for ${s}`);
|
|
148
145
|
const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t, a = [];
|
|
149
146
|
if (!l)
|
|
150
147
|
this.getAttribute(n + "--mobile") || a.push("mobile"), this.getAttribute(n + "--tablet") || a.push("tablet"), this.getAttribute(n + "--laptop") || a.push("laptop"), this.getAttribute(n + "--desktop") || a.push("desktop"), a.forEach((c) => {
|
|
@@ -642,10 +639,10 @@ const bt = ["", "default", "small"], gt = ["", "default", "secondary", "naked"],
|
|
|
642
639
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
643
640
|
}
|
|
644
641
|
updateSize(t, e, i) {
|
|
645
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(
|
|
642
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(`${e} is not a valid size value`);
|
|
646
643
|
}
|
|
647
644
|
updateVariant(t, e, i) {
|
|
648
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(
|
|
645
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`${e} is not a valid variant value`);
|
|
649
646
|
}
|
|
650
647
|
get inverted() {
|
|
651
648
|
return this.getAttribute("inverted");
|
|
@@ -735,9 +732,7 @@ class kt extends $ {
|
|
|
735
732
|
}
|
|
736
733
|
}
|
|
737
734
|
updateAttribute(t, e, i, s) {
|
|
738
|
-
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(
|
|
739
|
-
`${i} is not an allowed ${t} value for ${this.$el}`
|
|
740
|
-
);
|
|
735
|
+
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(`${i} is not an allowed ${t} value`);
|
|
741
736
|
}
|
|
742
737
|
checkName(t, e) {
|
|
743
738
|
return t.includes(e);
|
|
@@ -853,7 +848,7 @@ class wt extends HTMLElement {
|
|
|
853
848
|
}
|
|
854
849
|
}
|
|
855
850
|
customElements.get("px-icon-set") || customElements.define("px-icon-set", wt);
|
|
856
|
-
const At = ":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 screen and (max-width:
|
|
851
|
+
const At = ":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)}", N = new CSSStyleSheet();
|
|
857
852
|
N.replaceSync(At);
|
|
858
853
|
class $t extends HTMLElement {
|
|
859
854
|
constructor() {
|
|
@@ -940,7 +935,7 @@ var Nt = "[object Symbol]";
|
|
|
940
935
|
function Xt(r) {
|
|
941
936
|
return typeof r == "symbol" || Wt(r) && Ot(r) == Nt;
|
|
942
937
|
}
|
|
943
|
-
var R = NaN, Ft = /^[-+]0x[0-9a-f]+$/i,
|
|
938
|
+
var R = NaN, Ft = /^[-+]0x[0-9a-f]+$/i, _t = /^0b[01]+$/i, Bt = /^0o[0-7]+$/i, Gt = parseInt;
|
|
944
939
|
function M(r) {
|
|
945
940
|
if (typeof r == "number")
|
|
946
941
|
return r;
|
|
@@ -953,8 +948,8 @@ function M(r) {
|
|
|
953
948
|
if (typeof r != "string")
|
|
954
949
|
return r === 0 ? r : +r;
|
|
955
950
|
r = Tt(r);
|
|
956
|
-
var e =
|
|
957
|
-
return e ||
|
|
951
|
+
var e = _t.test(r);
|
|
952
|
+
return e || Bt.test(r) ? Gt(r.slice(2), e ? 2 : 8) : Ft.test(r) ? R : +r;
|
|
958
953
|
}
|
|
959
954
|
var Ut = "Expected a function", Jt = Math.max, Kt = Math.min;
|
|
960
955
|
function Qt(r, t, e) {
|
|
@@ -966,7 +961,7 @@ function Qt(r, t, e) {
|
|
|
966
961
|
var d = i, h = s;
|
|
967
962
|
return i = s = void 0, p = o, n = r.apply(h, d), n;
|
|
968
963
|
}
|
|
969
|
-
function
|
|
964
|
+
function B(o) {
|
|
970
965
|
return p = o, a = setTimeout(g, t), j ? m(o) : n;
|
|
971
966
|
}
|
|
972
967
|
function G(o) {
|
|
@@ -996,7 +991,7 @@ function Qt(r, t, e) {
|
|
|
996
991
|
var o = y(), d = L(o);
|
|
997
992
|
if (i = arguments, s = this, c = o, d) {
|
|
998
993
|
if (a === void 0)
|
|
999
|
-
return
|
|
994
|
+
return B(c);
|
|
1000
995
|
if (u)
|
|
1001
996
|
return clearTimeout(a), a = setTimeout(g, t), m(c);
|
|
1002
997
|
}
|
|
@@ -1128,14 +1123,14 @@ class ee extends HTMLElement {
|
|
|
1128
1123
|
}
|
|
1129
1124
|
}
|
|
1130
1125
|
customElements.get("px-carousel") || customElements.define("px-carousel", ee);
|
|
1131
|
-
const
|
|
1132
|
-
|
|
1126
|
+
const _ = new CSSStyleSheet();
|
|
1127
|
+
_.replaceSync(et);
|
|
1133
1128
|
class ie extends HTMLElement {
|
|
1134
1129
|
constructor() {
|
|
1135
1130
|
super(), this.template = `
|
|
1136
1131
|
<div class="carousel-item">
|
|
1137
1132
|
<slot></slot>
|
|
1138
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [S,
|
|
1133
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [S, _];
|
|
1139
1134
|
}
|
|
1140
1135
|
}
|
|
1141
1136
|
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", ie);
|