@proximus/lavender-selectablebox 1.4.15-alpha.2 → 1.4.15-alpha.21
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
|
@@ -410,7 +410,7 @@ var y = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min
|
|
|
410
410
|
b.replaceSync(y);
|
|
411
411
|
var x = class extends t {
|
|
412
412
|
constructor() {
|
|
413
|
-
super(b), this.template = (
|
|
413
|
+
super(b), this.template = () => `
|
|
414
414
|
<px-container border-radius="none" padding="none">
|
|
415
415
|
<px-vstack>
|
|
416
416
|
<px-container id="header-container" border-radius="none">
|
|
@@ -447,15 +447,6 @@ var x = class extends t {
|
|
|
447
447
|
<px-spacer></px-spacer>
|
|
448
448
|
</px-hstack>
|
|
449
449
|
</px-container>
|
|
450
|
-
${e ? ` <px-hstack>
|
|
451
|
-
<px-spacer></px-spacer>
|
|
452
|
-
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
453
|
-
<px-vstack gap="s">
|
|
454
|
-
<slot name="image-sticky-container"></slot>
|
|
455
|
-
</px-vstack>
|
|
456
|
-
</px-container>
|
|
457
|
-
<px-spacer></px-spacer>
|
|
458
|
-
</px-hstack>` : ""}
|
|
459
450
|
<px-container
|
|
460
451
|
id="body-container"
|
|
461
452
|
id="main"
|
|
@@ -512,7 +503,7 @@ var x = class extends t {
|
|
|
512
503
|
</px-container>
|
|
513
504
|
</px-vstack>
|
|
514
505
|
</px-container>
|
|
515
|
-
`, this.shadowRoot.innerHTML = this.template(
|
|
506
|
+
`, this.shadowRoot.innerHTML = this.template();
|
|
516
507
|
}
|
|
517
508
|
static get observedAttributes() {
|
|
518
509
|
return [
|
|
@@ -548,9 +539,6 @@ var x = class extends t {
|
|
|
548
539
|
get backgroundImage() {
|
|
549
540
|
return this.getAttribute("background-image");
|
|
550
541
|
}
|
|
551
|
-
get $imageStickySlot() {
|
|
552
|
-
return this.querySelector("*[slot=\"image-sticky-container\"]");
|
|
553
|
-
}
|
|
554
542
|
get $main() {
|
|
555
543
|
return this.shadowRoot.querySelector("#main");
|
|
556
544
|
}
|
|
@@ -605,9 +593,13 @@ var x = class extends t {
|
|
|
605
593
|
customElements.get("px-page") === void 0 && customElements.define("px-page", x);
|
|
606
594
|
//#endregion
|
|
607
595
|
//#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();
|
|
596
|
+
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
597
|
C.replaceSync(S);
|
|
610
|
-
var w =
|
|
598
|
+
var w = [
|
|
599
|
+
"",
|
|
600
|
+
"right",
|
|
601
|
+
"bottom"
|
|
602
|
+
], T = class extends t {
|
|
611
603
|
template() {
|
|
612
604
|
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
605
|
}
|
|
@@ -618,14 +610,27 @@ var w = class extends t {
|
|
|
618
610
|
return [
|
|
619
611
|
...super.observedAttributes,
|
|
620
612
|
"inverted",
|
|
621
|
-
"hide-footer"
|
|
613
|
+
"hide-footer",
|
|
614
|
+
"footer-position"
|
|
622
615
|
];
|
|
623
616
|
}
|
|
624
617
|
attributeChangedCallback(e, t, n) {
|
|
625
618
|
if (t !== n) switch (e) {
|
|
619
|
+
case "footer-position":
|
|
620
|
+
this.#e(n, w);
|
|
621
|
+
break;
|
|
626
622
|
default: super.attributeChangedCallback(e, t, n);
|
|
627
623
|
}
|
|
628
624
|
}
|
|
625
|
+
#e(e, t) {
|
|
626
|
+
if (!i(t, e)) {
|
|
627
|
+
o(`
|
|
628
|
+
"${e}" is not a valid footer-position value for ${this.tagName.toLowerCase()}.
|
|
629
|
+
Allowed values are: "${t.join("\", \"")}".
|
|
630
|
+
`);
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
}
|
|
629
634
|
get $el() {
|
|
630
635
|
return this.shadowRoot.querySelector(".selectable-box");
|
|
631
636
|
}
|
|
@@ -641,12 +646,18 @@ var w = class extends t {
|
|
|
641
646
|
set hideFooter(e) {
|
|
642
647
|
e ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
|
|
643
648
|
}
|
|
649
|
+
get footerPosition() {
|
|
650
|
+
return this.getAttribute("footer-position") ?? "";
|
|
651
|
+
}
|
|
652
|
+
set footerPosition(e) {
|
|
653
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
654
|
+
}
|
|
644
655
|
};
|
|
645
|
-
customElements.get("px-selectable-box") || customElements.define("px-selectable-box",
|
|
656
|
+
customElements.get("px-selectable-box") || customElements.define("px-selectable-box", T);
|
|
646
657
|
//#endregion
|
|
647
658
|
//#region src/clickEventGuards.ts
|
|
648
|
-
var
|
|
649
|
-
function
|
|
659
|
+
var E = ["px-a", "px-button"];
|
|
660
|
+
function D(e, t, n = E) {
|
|
650
661
|
let r = new Set(n), i = e.composedPath();
|
|
651
662
|
for (let e of i) {
|
|
652
663
|
if (e === t) break;
|
|
@@ -656,14 +667,14 @@ function E(e, t, n = T) {
|
|
|
656
667
|
}
|
|
657
668
|
//#endregion
|
|
658
669
|
//#region src/common.css?inline
|
|
659
|
-
var
|
|
660
|
-
|
|
661
|
-
var
|
|
670
|
+
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();
|
|
671
|
+
k.replaceSync(O);
|
|
672
|
+
var A = class extends t {
|
|
662
673
|
template() {
|
|
663
674
|
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
675
|
}
|
|
665
676
|
constructor() {
|
|
666
|
-
super(
|
|
677
|
+
super(k), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
|
|
667
678
|
}
|
|
668
679
|
connectedCallback() {
|
|
669
680
|
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 +686,8 @@ var k = class extends t {
|
|
|
675
686
|
"name",
|
|
676
687
|
"value",
|
|
677
688
|
"checked",
|
|
678
|
-
"disabled"
|
|
689
|
+
"disabled",
|
|
690
|
+
"footer-position"
|
|
679
691
|
];
|
|
680
692
|
}
|
|
681
693
|
attributeChangedCallback(e, t, n) {
|
|
@@ -693,6 +705,9 @@ var k = class extends t {
|
|
|
693
705
|
case "checked":
|
|
694
706
|
this.handleCheckedAttributeChange(n);
|
|
695
707
|
break;
|
|
708
|
+
case "footer-position":
|
|
709
|
+
this.$selectableBox && this.$selectableBox.setAttribute("footer-position", n);
|
|
710
|
+
break;
|
|
696
711
|
default: super.attributeChangedCallback(e, t, n);
|
|
697
712
|
}
|
|
698
713
|
}
|
|
@@ -709,7 +724,7 @@ var k = class extends t {
|
|
|
709
724
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
710
725
|
}
|
|
711
726
|
setClickEvent(e) {
|
|
712
|
-
|
|
727
|
+
D(e, this) || (this.checked = !this.checked, e.stopPropagation(), e.preventDefault());
|
|
713
728
|
}
|
|
714
729
|
toggleFooterVisibility() {
|
|
715
730
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -785,21 +800,27 @@ var k = class extends t {
|
|
|
785
800
|
set value(e) {
|
|
786
801
|
s(this, "value", e);
|
|
787
802
|
}
|
|
803
|
+
get footerPosition() {
|
|
804
|
+
return this.getAttribute("footer-position") ?? "";
|
|
805
|
+
}
|
|
806
|
+
set footerPosition(e) {
|
|
807
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
808
|
+
}
|
|
788
809
|
};
|
|
789
|
-
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox",
|
|
810
|
+
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", A);
|
|
790
811
|
//#endregion
|
|
791
812
|
//#region src/SelectableBoxRadio.ts
|
|
792
|
-
var
|
|
793
|
-
|
|
794
|
-
var
|
|
813
|
+
var j = new CSSStyleSheet();
|
|
814
|
+
j.replaceSync(O);
|
|
815
|
+
var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-disconnected", P = class extends t {
|
|
795
816
|
template() {
|
|
796
817
|
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
818
|
}
|
|
798
819
|
constructor() {
|
|
799
|
-
super(
|
|
820
|
+
super(j), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
|
|
800
821
|
}
|
|
801
822
|
connectedCallback() {
|
|
802
|
-
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(
|
|
823
|
+
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(M, {
|
|
803
824
|
bubbles: !0,
|
|
804
825
|
composed: !0
|
|
805
826
|
})), 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 +832,8 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
811
832
|
"name",
|
|
812
833
|
"value",
|
|
813
834
|
"checked",
|
|
814
|
-
"disabled"
|
|
835
|
+
"disabled",
|
|
836
|
+
"footer-position"
|
|
815
837
|
];
|
|
816
838
|
}
|
|
817
839
|
attributeChangedCallback(e, t, n) {
|
|
@@ -829,11 +851,14 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
829
851
|
case "checked":
|
|
830
852
|
this.handleCheckedAttributeChange(n);
|
|
831
853
|
break;
|
|
854
|
+
case "footer-position":
|
|
855
|
+
this.$selectableBox && this.$selectableBox.setAttribute("footer-position", n);
|
|
856
|
+
break;
|
|
832
857
|
default: super.attributeChangedCallback(e, t, n);
|
|
833
858
|
}
|
|
834
859
|
}
|
|
835
860
|
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(
|
|
861
|
+
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
862
|
bubbles: !0,
|
|
838
863
|
composed: !0
|
|
839
864
|
}));
|
|
@@ -848,7 +873,7 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
848
873
|
e.preventDefault(), e.code === "Space" && this.click();
|
|
849
874
|
}
|
|
850
875
|
setClickEvent(e) {
|
|
851
|
-
|
|
876
|
+
D(e, this) || (this.checked ||= !0, e.stopPropagation(), e.preventDefault());
|
|
852
877
|
}
|
|
853
878
|
toggleFooterVisibility() {
|
|
854
879
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -924,7 +949,13 @@ var j = "px-selectable-box-radio-connected", M = "px-selectable-box-radio-discon
|
|
|
924
949
|
set value(e) {
|
|
925
950
|
s(this, "value", e);
|
|
926
951
|
}
|
|
952
|
+
get footerPosition() {
|
|
953
|
+
return this.getAttribute("footer-position") ?? "";
|
|
954
|
+
}
|
|
955
|
+
set footerPosition(e) {
|
|
956
|
+
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
957
|
+
}
|
|
927
958
|
};
|
|
928
|
-
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio",
|
|
959
|
+
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", P);
|
|
929
960
|
//#endregion
|
|
930
|
-
export {
|
|
961
|
+
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 };
|