@proximus/lavender-selectablebox 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/SelectableBox.d.ts

@@ -3,7 +3,6 @@ import '@proximus/lavender-layout';
 export declare class SelectableBox extends WithExtraAttributes {
     protected template(): string;
     constructor();
-    connectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     get $el(): HTMLElement;

package/dist/index.es.js

@@ -617,8 +617,6 @@ class R extends n {
   constructor() {
     super(p), this.shadowRoot.innerHTML = this.template();
   }
-  connectedCallback() {
-  }
   static get observedAttributes() {
     return [...super.observedAttributes, "inverted", "hide-footer"];
   }
@@ -647,7 +645,7 @@ class R extends n {
   }
 }
 customElements.get("px-selectable-box") || customElements.define("px-selectable-box", R);
-const u = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:default;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}: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)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,: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}:host([disabled]) .selectable-box-checkbox px-selectable-box,: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 only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,: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)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,: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 px-selectable-box,: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)}', g = new CSSStyleSheet();
+const u = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;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)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}: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)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,: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}:host([disabled]) .selectable-box-checkbox px-selectable-box,: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 only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.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)}:host([inverted]) .selectable-box-checkbox px-selectable-box,: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)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,: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 px-selectable-box,: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)}', g = new CSSStyleSheet();
 g.replaceSync(u);
 class F extends n {
   template() {
@@ -675,17 +673,10 @@ class F extends n {
     super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
   }
   connectedCallback() {
-    this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", () => {
-      this.toggleFooterVisibility();
-    }), this.addEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.addEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.addEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.addEventListener("click", (t) => {
-      this.setClickEvent(t);
-    }), this.hasAttribute("checked") && (this.checked = !0);
+    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), this.hasAttribute("checked") && (this.checked = !0);
   }
   static get observedAttributes() {
     return [
@@ -722,15 +713,7 @@ class F extends n {
     this.$slotFooter.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
-    ), this.removeEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.removeEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.removeEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.removeEventListener("click", (t) => {
-      this.setClickEvent(t);
-    });
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
   }
   removeHoverAttribute() {
     this.$checkbox.removeAttribute("hover");
@@ -860,17 +843,10 @@ class H extends n {
     super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
   }
   connectedCallback() {
-    this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", () => {
-      this.toggleFooterVisibility();
-    }), this.addEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.addEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.addEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.addEventListener("click", (t) => {
-      this.setClickEvent(t);
-    }), this.hasAttribute("checked") && (this.checked = !0);
+    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), this.hasAttribute("checked") && (this.checked = !0);
   }
   static get observedAttributes() {
     return [
@@ -907,15 +883,7 @@ class H extends n {
     this.$slotFooter.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
-    ), this.removeEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.removeEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.removeEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.removeEventListener("click", (t) => {
-      this.setClickEvent(t);
-    });
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
   }
   removeHoverAttribute() {
     this.$radio.removeAttribute("hover");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-selectablebox",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",