@proximus/lavender-selectablebox 2.0.0-alpha.176 → 2.0.0-alpha.177
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/SelectableBox.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
2
|
import '@proximus/lavender-layout';
|
|
3
|
+
export declare const selectableBoxFooterPosition: string[];
|
|
3
4
|
export declare class SelectableBox extends WithExtraAttributes {
|
|
5
|
+
#private;
|
|
4
6
|
protected template(): string;
|
|
5
7
|
constructor();
|
|
6
8
|
static get observedAttributes(): string[];
|
|
@@ -10,4 +12,6 @@ export declare class SelectableBox extends WithExtraAttributes {
|
|
|
10
12
|
set inverted(value: boolean);
|
|
11
13
|
get hideFooter(): boolean;
|
|
12
14
|
set hideFooter(value: boolean);
|
|
15
|
+
get footerPosition(): string;
|
|
16
|
+
set footerPosition(value: string);
|
|
13
17
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -605,9 +605,13 @@ var x = class extends t {
|
|
|
605
605
|
customElements.get("px-page") === void 0 && customElements.define("px-page", x);
|
|
606
606
|
//#endregion
|
|
607
607
|
//#region src/selectable-box.css?inline
|
|
608
|
-
var S = ":host{font-family:var(--px-font-family);font-size:var(--px-font-size-base);display:block}:host *{box-sizing:border-box}.selectable-box{flex-direction:column;height:100%;display:flex}::slotted([slot=media]){width:100%;height:auto}.info{flex-grow:1;display:flex}.info .info__body{gap:var(--px-spacing-default-mobile);padding:var(--px-padding-s-mobile);flex-direction:column;flex:7 1 0;display:flex}.info .info__body .header{align-items:center;gap:var(--px-spacing-s-mobile);display:flex}.info .info__body .header ::slotted([slot=action]),.info .info__body .header ::slotted([slot=icon]),.info .info__body .header ::slotted([slot=logo]){flex-shrink:0}.info .info__body .header .titles{gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}.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{padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center;flex:3 1 0;align-items:center;display:flex}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media screen and (width>=48rem){.info{flex-direction:column}.info .info__body{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-s-tablet);flex-basis:auto}.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]),.info .info__body .header .titles ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{padding:var(--px-padding-s-tablet);flex:none;justify-content:center}}@media screen and (width>=64.0625rem){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-s-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]),.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 screen and (width>=90.0625rem){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-s-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]),.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)}", C = new CSSStyleSheet();
|
|
608
|
+
var S = ":host{font-family:var(--px-font-family);font-size:var(--px-font-size-base);display:block}:host *{box-sizing:border-box}.selectable-box{flex-direction:column;height:100%;display:flex}::slotted([slot=media]){width:100%;height:auto}.info{flex-grow:1;display:flex}.info .info__body{gap:var(--px-spacing-default-mobile);padding:var(--px-padding-s-mobile);flex-direction:column;flex:7 1 0;display:flex}.info .info__body .header{align-items:center;gap:var(--px-spacing-s-mobile);display:flex}.info .info__body .header ::slotted([slot=action]),.info .info__body .header ::slotted([slot=icon]),.info .info__body .header ::slotted([slot=logo]){flex-shrink:0}.info .info__body .header .titles{gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}.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{padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center;flex:3 1 0;align-items:center;display:flex}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}:host([footer-position=bottom]) .info{flex-direction:column}:host([footer-position=bottom]) .info__body{flex-basis:auto}:host([footer-position=bottom]) .info__footer{flex:none;justify-content:center}:host([footer-position=right]) .info{flex-direction:row}:host([footer-position=right]) .info__body{flex:7 1 0}:host([footer-position=right]) .info__footer{flex:3 1 0;align-items:center;display:flex}@media screen and (width>=48rem){.info{flex-direction:column}.info .info__body{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-s-tablet);flex-basis:auto}.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]),.info .info__body .header .titles ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{padding:var(--px-padding-s-tablet);flex:none;justify-content:center}}@media screen and (width>=64.0625rem){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-s-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]),.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 screen and (width>=90.0625rem){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-s-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]),.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)}", C = new CSSStyleSheet();
|
|
609
609
|
C.replaceSync(S);
|
|
610
|
-
var w =
|
|
610
|
+
var w = [
|
|
611
|
+
"",
|
|
612
|
+
"right",
|
|
613
|
+
"bottom"
|
|
614
|
+
], T = class extends t {
|
|
611
615
|
template() {
|
|
612
616
|
return "\n <div class=\"selectable-box\">\n <slot name=\"media\"></slot>\n <div class=\"info\">\n <div class=\"info__body\">\n <div class=\"header\">\n <slot name=\"action\"></slot>\n <slot name=\"icon\"></slot>\n <slot name=\"logo\"></slot>\n <div class=\"titles\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n </div>\n <slot name=\"content\"></slot>\n </div>\n <div class=\"info__footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n ";
|
|
613
617
|
}
|
|
@@ -618,14 +622,27 @@ var w = class extends t {
|
|
|
618
622
|
return [
|
|
619
623
|
...super.observedAttributes,
|
|
620
624
|
"inverted",
|
|
621
|
-
"hide-footer"
|
|
625
|
+
"hide-footer",
|
|
626
|
+
"footer-position"
|
|
622
627
|
];
|
|
623
628
|
}
|
|
624
629
|
attributeChangedCallback(e, t, n) {
|
|
625
630
|
if (t !== n) switch (e) {
|
|
631
|
+
case "footer-position":
|
|
632
|
+
this.#e(n, w);
|
|
633
|
+
break;
|
|
626
634
|
default: super.attributeChangedCallback(e, t, n);
|
|
627
635
|
}
|
|
628
636
|
}
|
|
637
|
+
#e(e, t) {
|
|
638
|
+
if (!i(t, e)) {
|
|
639
|
+
o(`
|
|
640
|
+
"${e}" is not a valid footer-position value for ${this.tagName.toLowerCase()}.
|
|
641
|
+
Allowed values are: "${t.join("\", \"")}".
|
|
642
|
+
`);
|
|
643
|
+
return;
|
|
644
|
+
}
|
|
645
|
+
}
|
|
629
646
|
get $el() {
|
|
630
647
|
return this.shadowRoot.querySelector(".selectable-box");
|
|
631
648
|
}
|
|
@@ -641,12 +658,18 @@ var w = class extends t {
|
|
|
641
658
|
set hideFooter(e) {
|
|
642
659
|
e ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
|
|
643
660
|
}
|
|
661
|
+
get footerPosition() {
|
|
662
|
+
return this.getAttribute("footer-position") ?? "";
|
|
663
|
+
}
|
|
664
|
+
set footerPosition(e) {
|
|
665
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
666
|
+
}
|
|
644
667
|
};
|
|
645
|
-
customElements.get("px-selectable-box") || customElements.define("px-selectable-box",
|
|
668
|
+
customElements.get("px-selectable-box") || customElements.define("px-selectable-box", T);
|
|
646
669
|
//#endregion
|
|
647
670
|
//#region src/clickEventGuards.ts
|
|
648
|
-
var
|
|
649
|
-
function
|
|
671
|
+
var E = ["px-a", "px-button"];
|
|
672
|
+
function D(e, t, n = E) {
|
|
650
673
|
let r = new Set(n), i = e.composedPath();
|
|
651
674
|
for (let e of i) {
|
|
652
675
|
if (e === t) break;
|
|
@@ -656,14 +679,14 @@ function E(e, t, n = T) {
|
|
|
656
679
|
}
|
|
657
680
|
//#endregion
|
|
658
681
|
//#region src/common.css?inline
|
|
659
|
-
var
|
|
660
|
-
|
|
661
|
-
var
|
|
682
|
+
var O = ":host{outline:none;display:block}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;cursor:pointer;border-radius:var(--px-radius-main);--btn-transition:all .2s ease-in-out 0s;height:100%;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden}:is(.selectable-box-checkbox,.selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-container-light-default);height:100%}:host([parent-has-anchor-full]) :is(.selectable-box-checkbox,.selectable-box-radio){border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:is(:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-state-hover-bordered-default)}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:#0000}:is(:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot=title]),:host([disabled]) ::slotted([slot=description]),:host([disabled]) ::slotted([slot=content]){color:var(--px-color-text-state-disabled-default)}@media screen and (width>=48rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media screen and (width>=90.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:is(:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:is(:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:#0000}:is(:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot=title]),:host([inverted]):host([disabled]) ::slotted([slot=description]),:host([inverted]):host([disabled]) ::slotted([slot=content]){color:var(--px-color-text-state-disabled-inverted)}", k = new CSSStyleSheet();
|
|
683
|
+
k.replaceSync(O);
|
|
684
|
+
var A = class extends t {
|
|
662
685
|
template() {
|
|
663
686
|
return "\n <div class=\"selectable-box-checkbox\">\n <px-selectable-box>\n <slot name=\"media\" slot=\"media\"></slot>\n <px-checkbox \n slot=\"action\" inert \n ></px-checkbox>\n <slot name=\"icon\" slot=\"icon\"></slot>\n <slot name=\"logo\" slot=\"logo\"></slot>\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"content\" slot=\"content\"></slot>\n <slot name=\"footer\" slot=\"footer\"></slot>\n </px-selectable-box>\n </div>\n ";
|
|
664
687
|
}
|
|
665
688
|
constructor() {
|
|
666
|
-
super(
|
|
689
|
+
super(k), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
|
|
667
690
|
}
|
|
668
691
|
connectedCallback() {
|
|
669
692
|
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "checkbox", this.internals && (this.internals.role = "checkbox"), this.tabIndex = 0, this.ariaChecked = "false", this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", this.toggleFooterVisibility), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent);
|
|
@@ -675,7 +698,8 @@ var k = class extends t {
|
|
|
675
698
|
"name",
|
|
676
699
|
"value",
|
|
677
700
|
"checked",
|
|
678
|
-
"disabled"
|
|
701
|
+
"disabled",
|
|
702
|
+
"footer-position"
|
|
679
703
|
];
|
|
680
704
|
}
|
|
681
705
|
attributeChangedCallback(e, t, n) {
|
|
@@ -693,6 +717,9 @@ var k = class extends t {
|
|
|
693
717
|
case "checked":
|
|
694
718
|
this.handleCheckedAttributeChange(n);
|
|
695
719
|
break;
|
|
720
|
+
case "footer-position":
|
|
721
|
+
this.$selectableBox && this.$selectableBox.setAttribute("footer-position", n);
|
|
722
|
+
break;
|
|
696
723
|
default: super.attributeChangedCallback(e, t, n);
|
|
697
724
|
}
|
|
698
725
|
}
|
|
@@ -709,7 +736,7 @@ var k = class extends t {
|
|
|
709
736
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
710
737
|
}
|
|
711
738
|
setClickEvent(e) {
|
|
712
|
-
|
|
739
|
+
D(e, this) || (this.checked = !this.checked, e.stopPropagation(), e.preventDefault());
|
|
713
740
|
}
|
|
714
741
|
toggleFooterVisibility() {
|
|
715
742
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -785,21 +812,27 @@ var k = class extends t {
|
|
|
785
812
|
set value(e) {
|
|
786
813
|
s(this, "value", e);
|
|
787
814
|
}
|
|
815
|
+
get footerPosition() {
|
|
816
|
+
return this.getAttribute("footer-position") ?? "";
|
|
817
|
+
}
|
|
818
|
+
set footerPosition(e) {
|
|
819
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
820
|
+
}
|
|
788
821
|
};
|
|
789
|
-
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox",
|
|
822
|
+
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", A);
|
|
790
823
|
//#endregion
|
|
791
824
|
//#region src/SelectableBoxRadio.ts
|
|
792
|
-
var
|
|
793
|
-
|
|
794
|
-
var
|
|
825
|
+
var j = new CSSStyleSheet();
|
|
826
|
+
j.replaceSync(O);
|
|
827
|
+
var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-disconnected", P = class extends t {
|
|
795
828
|
template() {
|
|
796
829
|
return "\n <div class=\"selectable-box-radio\">\n <px-selectable-box>\n <slot name=\"media\" slot=\"media\"></slot>\n <px-radio \n slot=\"action\" inert \n ></px-radio>\n <slot name=\"icon\" slot=\"icon\"></slot>\n <slot name=\"logo\" slot=\"logo\"></slot>\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"content\" slot=\"content\"></slot>\n <slot name=\"footer\" slot=\"footer\"></slot>\n </px-selectable-box>\n </div>\n ";
|
|
797
830
|
}
|
|
798
831
|
constructor() {
|
|
799
|
-
super(
|
|
832
|
+
super(j), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
|
|
800
833
|
}
|
|
801
834
|
connectedCallback() {
|
|
802
|
-
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(
|
|
835
|
+
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(M, {
|
|
803
836
|
bubbles: !0,
|
|
804
837
|
composed: !0
|
|
805
838
|
})), this.ariaChecked = "false", this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", this.toggleFooterVisibility), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent);
|
|
@@ -811,7 +844,8 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
811
844
|
"name",
|
|
812
845
|
"value",
|
|
813
846
|
"checked",
|
|
814
|
-
"disabled"
|
|
847
|
+
"disabled",
|
|
848
|
+
"footer-position"
|
|
815
849
|
];
|
|
816
850
|
}
|
|
817
851
|
attributeChangedCallback(e, t, n) {
|
|
@@ -829,11 +863,14 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
829
863
|
case "checked":
|
|
830
864
|
this.handleCheckedAttributeChange(n);
|
|
831
865
|
break;
|
|
866
|
+
case "footer-position":
|
|
867
|
+
this.$selectableBox && this.$selectableBox.setAttribute("footer-position", n);
|
|
868
|
+
break;
|
|
832
869
|
default: super.attributeChangedCallback(e, t, n);
|
|
833
870
|
}
|
|
834
871
|
}
|
|
835
872
|
disconnectedCallback() {
|
|
836
|
-
this.$slotFooter.removeEventListener("slotchange", this.toggleFooterVisibility), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent), this.dispatchEvent(new CustomEvent(
|
|
873
|
+
this.$slotFooter.removeEventListener("slotchange", this.toggleFooterVisibility), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent), this.dispatchEvent(new CustomEvent(N, {
|
|
837
874
|
bubbles: !0,
|
|
838
875
|
composed: !0
|
|
839
876
|
}));
|
|
@@ -848,7 +885,7 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
848
885
|
e.preventDefault(), e.code === "Space" && this.click();
|
|
849
886
|
}
|
|
850
887
|
setClickEvent(e) {
|
|
851
|
-
|
|
888
|
+
D(e, this) || (this.checked ||= !0, e.stopPropagation(), e.preventDefault());
|
|
852
889
|
}
|
|
853
890
|
toggleFooterVisibility() {
|
|
854
891
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -924,7 +961,13 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
924
961
|
set value(e) {
|
|
925
962
|
s(this, "value", e);
|
|
926
963
|
}
|
|
964
|
+
get footerPosition() {
|
|
965
|
+
return this.getAttribute("footer-position") ?? "";
|
|
966
|
+
}
|
|
967
|
+
set footerPosition(e) {
|
|
968
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
969
|
+
}
|
|
927
970
|
};
|
|
928
|
-
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio",
|
|
971
|
+
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", P);
|
|
929
972
|
//#endregion
|
|
930
|
-
export {
|
|
973
|
+
export { M as SELECTABLE_BOX_RADIO_CONNECTED_EVENT, N as SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT, T as SelectableBox, A as SelectableBoxCheckbox, P as SelectableBoxRadio, w as selectableBoxFooterPosition };
|