@proximus/lavender-selectablebox 1.3.0 → 1.4.1-alpha.10
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 +27 -21
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as
|
|
1
|
+
import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as x, gapValues as v, checkName as m, backgroundColorValues as k } from "@proximus/lavender-common";
|
|
2
2
|
const y = ':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))}}', h = new CSSStyleSheet();
|
|
3
3
|
h.replaceSync(y);
|
|
4
4
|
const A = [
|
|
@@ -16,7 +16,7 @@ const A = [
|
|
|
16
16
|
"flex-end",
|
|
17
17
|
"center",
|
|
18
18
|
"baseline"
|
|
19
|
-
],
|
|
19
|
+
], C = [
|
|
20
20
|
"",
|
|
21
21
|
"default",
|
|
22
22
|
"flex-start",
|
|
@@ -25,10 +25,10 @@ const A = [
|
|
|
25
25
|
"space-between",
|
|
26
26
|
"space-around",
|
|
27
27
|
"space-evenly"
|
|
28
|
-
],
|
|
28
|
+
], $ = ["", "default", "nowrap", "wrap", "wrap-reverse"], S = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
29
|
class c extends n {
|
|
30
30
|
constructor() {
|
|
31
|
-
super(h), this.overflowXAttributeDelegate = new
|
|
31
|
+
super(h), this.overflowXAttributeDelegate = new x(
|
|
32
32
|
this,
|
|
33
33
|
"overflow-x",
|
|
34
34
|
(t) => t,
|
|
@@ -93,7 +93,7 @@ class c extends n {
|
|
|
93
93
|
t,
|
|
94
94
|
e,
|
|
95
95
|
i,
|
|
96
|
-
|
|
96
|
+
C
|
|
97
97
|
);
|
|
98
98
|
break;
|
|
99
99
|
case "align-items":
|
|
@@ -108,7 +108,7 @@ class c extends n {
|
|
|
108
108
|
case "wrap--tablet":
|
|
109
109
|
case "wrap--laptop":
|
|
110
110
|
case "wrap--desktop":
|
|
111
|
-
this.updateFlexProperties(t, e, i,
|
|
111
|
+
this.updateFlexProperties(t, e, i, $);
|
|
112
112
|
break;
|
|
113
113
|
case "direction":
|
|
114
114
|
case "direction--mobile":
|
|
@@ -369,15 +369,15 @@ class z extends HTMLElement {
|
|
|
369
369
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
370
370
|
}
|
|
371
371
|
static get observedAttributes() {
|
|
372
|
-
return ["grow"];
|
|
372
|
+
return ["grow", "nogap"];
|
|
373
373
|
}
|
|
374
374
|
attributeChangedCallback(t, e, i) {
|
|
375
375
|
t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
376
376
|
}
|
|
377
377
|
connectedCallback() {
|
|
378
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
378
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
|
|
379
379
|
this.handleSizeChange();
|
|
380
|
-
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
380
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
381
381
|
}
|
|
382
382
|
disconnectedCallback() {
|
|
383
383
|
var t;
|
|
@@ -404,11 +404,17 @@ class z extends HTMLElement {
|
|
|
404
404
|
updateParticipation() {
|
|
405
405
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
406
406
|
}
|
|
407
|
+
get nogap() {
|
|
408
|
+
return this.hasAttribute("nogap");
|
|
409
|
+
}
|
|
410
|
+
set nogap(t) {
|
|
411
|
+
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
412
|
+
}
|
|
407
413
|
}
|
|
408
414
|
customElements.get("px-spacer") || customElements.define("px-spacer", z);
|
|
409
415
|
const L = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", b = new CSSStyleSheet();
|
|
410
416
|
b.replaceSync(L);
|
|
411
|
-
class
|
|
417
|
+
class D extends n {
|
|
412
418
|
constructor() {
|
|
413
419
|
super(b), this.template = (t) => `
|
|
414
420
|
<px-container border-radius="none" padding="none">
|
|
@@ -607,9 +613,9 @@ class j extends n {
|
|
|
607
613
|
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
608
614
|
}
|
|
609
615
|
}
|
|
610
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
611
|
-
const
|
|
612
|
-
p.replaceSync(
|
|
616
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", D);
|
|
617
|
+
const j = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-m-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile)}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media only screen and (min-width: 48em){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-m-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media only screen and (min-width: 64.0625em){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-m-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-m-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}', p = new CSSStyleSheet();
|
|
618
|
+
p.replaceSync(j);
|
|
613
619
|
class R extends n {
|
|
614
620
|
template() {
|
|
615
621
|
return `
|
|
@@ -691,7 +697,7 @@ class F extends n {
|
|
|
691
697
|
}
|
|
692
698
|
constructor() {
|
|
693
699
|
var t;
|
|
694
|
-
super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`)
|
|
700
|
+
super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
695
701
|
}
|
|
696
702
|
connectedCallback() {
|
|
697
703
|
this.tabIndex = 0, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
@@ -756,11 +762,11 @@ class F extends n {
|
|
|
756
762
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
757
763
|
}
|
|
758
764
|
handleDisabledAttributeChange(t) {
|
|
759
|
-
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$checkbox.removeAttribute("disabled"));
|
|
765
|
+
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$checkbox.removeAttribute("disabled"));
|
|
760
766
|
}
|
|
761
767
|
handleCheckedAttributeChange(t) {
|
|
762
768
|
var e;
|
|
763
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
|
|
769
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
|
|
764
770
|
new Event("change", {
|
|
765
771
|
bubbles: !0,
|
|
766
772
|
composed: !0
|
|
@@ -836,8 +842,8 @@ class F extends n {
|
|
|
836
842
|
}
|
|
837
843
|
}
|
|
838
844
|
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", F);
|
|
839
|
-
const
|
|
840
|
-
|
|
845
|
+
const f = new CSSStyleSheet();
|
|
846
|
+
f.replaceSync(u);
|
|
841
847
|
class H extends n {
|
|
842
848
|
template() {
|
|
843
849
|
return `
|
|
@@ -861,7 +867,7 @@ class H extends n {
|
|
|
861
867
|
}
|
|
862
868
|
constructor() {
|
|
863
869
|
var t;
|
|
864
|
-
super(
|
|
870
|
+
super(f), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
865
871
|
}
|
|
866
872
|
connectedCallback() {
|
|
867
873
|
var t;
|
|
@@ -927,11 +933,11 @@ class H extends n {
|
|
|
927
933
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
928
934
|
}
|
|
929
935
|
handleDisabledAttributeChange(t) {
|
|
930
|
-
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$radio.removeAttribute("disabled"));
|
|
936
|
+
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$radio.removeAttribute("disabled"));
|
|
931
937
|
}
|
|
932
938
|
handleCheckedAttributeChange(t) {
|
|
933
939
|
var e;
|
|
934
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
940
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
935
941
|
new Event("change", {
|
|
936
942
|
bubbles: !0,
|
|
937
943
|
composed: !0
|