@proximus/lavender-carousel 2.0.0-alpha.2 → 2.0.0-alpha.3
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 +22 -29
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -371,7 +371,7 @@ class xt extends E {
|
|
|
371
371
|
customElements.get("px-hstack") || customElements.define("px-hstack", xt);
|
|
372
372
|
class mt extends HTMLElement {
|
|
373
373
|
constructor() {
|
|
374
|
-
super(), this.isZeroSized = !1, this.growValue = "1";
|
|
374
|
+
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
375
375
|
}
|
|
376
376
|
static get observedAttributes() {
|
|
377
377
|
return ["grow"];
|
|
@@ -380,13 +380,9 @@ class mt extends HTMLElement {
|
|
|
380
380
|
t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
381
381
|
}
|
|
382
382
|
connectedCallback() {
|
|
383
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver((
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
e.contentRect.width === 0 || e.contentRect.height === 0
|
|
387
|
-
);
|
|
388
|
-
});
|
|
389
|
-
}), this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
383
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
384
|
+
this.handleSizeChange();
|
|
385
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
390
386
|
}
|
|
391
387
|
disconnectedCallback() {
|
|
392
388
|
var t;
|
|
@@ -404,25 +400,22 @@ class mt extends HTMLElement {
|
|
|
404
400
|
});
|
|
405
401
|
}
|
|
406
402
|
recalculateVisibility() {
|
|
407
|
-
|
|
408
|
-
return;
|
|
409
|
-
this.style.display = "", this.style.flexGrow = this.growValue;
|
|
410
|
-
const t = this.getBoundingClientRect(), e = t.width === 0 || t.height === 0;
|
|
411
|
-
this.handleSizeChange(e);
|
|
403
|
+
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
412
404
|
}
|
|
413
|
-
handleSizeChange(
|
|
414
|
-
this.
|
|
405
|
+
handleSizeChange() {
|
|
406
|
+
const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
|
|
407
|
+
this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
|
|
415
408
|
}
|
|
416
409
|
updateParticipation() {
|
|
417
410
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
418
411
|
}
|
|
419
412
|
}
|
|
420
413
|
customElements.get("px-spacer") || customElements.define("px-spacer", mt);
|
|
421
|
-
const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}",
|
|
422
|
-
|
|
414
|
+
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();
|
|
415
|
+
Z.replaceSync(kt);
|
|
423
416
|
class yt extends T {
|
|
424
417
|
constructor() {
|
|
425
|
-
super(
|
|
418
|
+
super(Z), this.template = (t) => `
|
|
426
419
|
<px-container border-radius="none" padding="none">
|
|
427
420
|
<px-vstack>
|
|
428
421
|
<px-container id="header-container" border-radius="none">
|
|
@@ -620,8 +613,8 @@ class yt extends T {
|
|
|
620
613
|
}
|
|
621
614
|
}
|
|
622
615
|
customElements.get("px-page") === void 0 && customElements.define("px-page", yt);
|
|
623
|
-
const wt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}",
|
|
624
|
-
|
|
616
|
+
const wt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", _ = new CSSStyleSheet();
|
|
617
|
+
_.replaceSync(wt);
|
|
625
618
|
const At = ["", "default", "small"], $t = [
|
|
626
619
|
"",
|
|
627
620
|
"default",
|
|
@@ -629,7 +622,7 @@ const At = ["", "default", "small"], $t = [
|
|
|
629
622
|
"naked"
|
|
630
623
|
], R = class R extends ot {
|
|
631
624
|
constructor() {
|
|
632
|
-
super(
|
|
625
|
+
super(_), this.template = () => "<slot></slot>";
|
|
633
626
|
const t = document.createElement(this.nativeName);
|
|
634
627
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
635
628
|
}
|
|
@@ -769,7 +762,7 @@ const Ct = [
|
|
|
769
762
|
"StateDisabled"
|
|
770
763
|
], zt = ["Inherit", ...Ct].map(
|
|
771
764
|
(r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
772
|
-
), jt = ":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-
|
|
765
|
+
), jt = ":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)}", U = new CSSStyleSheet();
|
|
773
766
|
U.replaceSync(jt);
|
|
774
767
|
const Lt = [
|
|
775
768
|
"name",
|
|
@@ -790,7 +783,7 @@ class Tt extends T {
|
|
|
790
783
|
m(this, w, () => `<svg aria-hidden="true">
|
|
791
784
|
<use xlink:href="#icon-${this.name}"></use>
|
|
792
785
|
</svg>`);
|
|
793
|
-
this.shadowRoot.innerHTML = d(this, w).call(this), C(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
786
|
+
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");
|
|
794
787
|
}
|
|
795
788
|
static get observedAttributes() {
|
|
796
789
|
return [...super.observedAttributes, ...Lt];
|
|
@@ -813,7 +806,7 @@ class Tt extends T {
|
|
|
813
806
|
case "aria-label":
|
|
814
807
|
if (!d(this, p))
|
|
815
808
|
return;
|
|
816
|
-
s ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
|
|
809
|
+
s ? (d(this, p).ariaHidden = "false", this.ariaHidden = "false") : (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
817
810
|
break;
|
|
818
811
|
}
|
|
819
812
|
}
|
|
@@ -830,7 +823,7 @@ class Tt extends T {
|
|
|
830
823
|
`${d(this, h)}#icon-${this.name}`
|
|
831
824
|
));
|
|
832
825
|
}
|
|
833
|
-
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true");
|
|
826
|
+
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
834
827
|
}
|
|
835
828
|
updateAttribute(e, i, s, n) {
|
|
836
829
|
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) || console.error(`${s} is not an allowed ${e} value`);
|
|
@@ -965,16 +958,16 @@ var Xt = Object.prototype, Ft = Xt.toString;
|
|
|
965
958
|
function Bt(r) {
|
|
966
959
|
return Ft.call(r);
|
|
967
960
|
}
|
|
968
|
-
var Gt = "[object Null]",
|
|
969
|
-
function
|
|
970
|
-
return r == null ? r === void 0 ?
|
|
961
|
+
var Gt = "[object Null]", Zt = "[object Undefined]", W = y ? y.toStringTag : void 0;
|
|
962
|
+
function _t(r) {
|
|
963
|
+
return r == null ? r === void 0 ? Zt : Gt : W && W in Object(r) ? Nt(r) : Bt(r);
|
|
971
964
|
}
|
|
972
965
|
function Ut(r) {
|
|
973
966
|
return r != null && typeof r == "object";
|
|
974
967
|
}
|
|
975
968
|
var Kt = "[object Symbol]";
|
|
976
969
|
function Jt(r) {
|
|
977
|
-
return typeof r == "symbol" || Ut(r) &&
|
|
970
|
+
return typeof r == "symbol" || Ut(r) && _t(r) == Kt;
|
|
978
971
|
}
|
|
979
972
|
var N = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
|
|
980
973
|
function X(r) {
|