@everymatrix/general-input 1.39.1 → 1.39.2

package/dist/cjs/checkbox-group-input_10.cjs.entry.js

@@ -14467,6 +14467,9 @@ const CheckboxInput = class {
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
+    this.handleLabelClick = (event) => {
+      event.stopPropagation();
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14521,7 +14524,7 @@ const CheckboxInput = class {
     }
   }
   renderLabel() {
-    return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+    return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, onClick: this.handleLabelClick }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
   }
   renderTooltip() {
     if (this.showTooltip) {

package/dist/collection/components/checkbox-input/checkbox-input.js

@@ -19,6 +19,9 @@ export class CheckboxInput {
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
+    this.handleLabelClick = (event) => {
+      event.stopPropagation();
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -73,7 +76,7 @@ export class CheckboxInput {
     }
   }
   renderLabel() {
-    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` },
+    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, onClick: this.handleLabelClick },
       h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
   }
   renderTooltip() {

package/dist/components/checkbox-input2.js

@@ -26,6 +26,9 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
+    this.handleLabelClick = (event) => {
+      event.stopPropagation();
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -80,7 +83,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   renderLabel() {
-    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, onClick: this.handleLabelClick }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
   }
   renderTooltip() {
     if (this.showTooltip) {

package/dist/esm/checkbox-group-input_10.entry.js

@@ -14463,6 +14463,9 @@ const CheckboxInput = class {
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
+    this.handleLabelClick = (event) => {
+      event.stopPropagation();
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14517,7 +14520,7 @@ const CheckboxInput = class {
     }
   }
   renderLabel() {
-    return (h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h$2("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+    return (h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, onClick: this.handleLabelClick }, h$2("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
   }
   renderTooltip() {
     if (this.showTooltip) {

package/dist/general-input/general-input.esm.js

@@ -1 +1 @@
-import{p as l,b as e}from"./p-b408093e.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),l(i)})().then((l=>e([["p-9b6b0396",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["p-660bcdd1",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"],emitOnClick:[516,"emit-on-click"]}]]],["p-613c3e00",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]]]]]],l)));
+import{p as l,b as e}from"./p-b408093e.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),l(i)})().then((l=>e([["p-c2d51e17",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["p-660bcdd1",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"],emitOnClick:[516,"emit-on-click"]}]]],["p-613c3e00",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]]]]]],l)));

package/dist/general-input/{p-9b6b0396.entry.js → p-c2d51e17.entry.js}

@@ -1234,7 +1234,7 @@ class dr{constructor(t){this.host=t,this.__required=!1}setTarget(t){this.__targe
       </div>
 
       <slot name="tooltip"></slot>
-    `}static get properties(){return{value:{type:Array,value:()=>[],notify:!0,observer:"__valueChanged"}}}constructor(){super(),this.__registerCheckbox=this.__registerCheckbox.bind(this),this.__unregisterCheckbox=this.__unregisterCheckbox.bind(this),this.__onCheckboxCheckedChanged=this.__onCheckboxCheckedChanged.bind(this),this._tooltipController=new as(this),this._tooltipController.addEventListener("tooltip-changed",(t=>{const e=t.detail.node;if(e&&e.isConnected){const t=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(t)}else this._tooltipController.setAriaTarget([])}))}get __checkboxes(){return this.__filterCheckboxes([...this.children])}ready(){super.ready(),this.ariaTarget=this,this.setAttribute("role","group");const t=this.shadowRoot.querySelector("slot:not([name])");this._observer=new ss(t,(({addedNodes:t,removedNodes:e})=>{const i=this.__filterCheckboxes(t),s=this.__filterCheckboxes(e);i.forEach(this.__registerCheckbox),s.forEach(this.__unregisterCheckbox);const r=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(r),this.__warnOfCheckboxesWithoutValue(i)})),this.addController(this._tooltipController)}checkValidity(){return!this.required||this.value.length>0}__filterCheckboxes(t){return t.filter((t=>t instanceof rr))}__warnOfCheckboxesWithoutValue(t){t.some((t=>{const{value:e}=t;return!(t.hasAttribute("value")||e&&"on"!==e)}))&&console.warn("Please provide the value attribute to all the checkboxes inside the checkbox group.")}__registerCheckbox(t){t.addEventListener("checked-changed",this.__onCheckboxCheckedChanged),this.disabled&&(t.disabled=!0),t.checked?this.__addCheckboxToValue(t.value):this.value.includes(t.value)&&(t.checked=!0)}__unregisterCheckbox(t){t.removeEventListener("checked-changed",this.__onCheckboxCheckedChanged),t.checked&&this.__removeCheckboxFromValue(t.value)}_disabledChanged(t,e){super._disabledChanged(t,e),(t||void 0!==e)&&e!==t&&this.__checkboxes.forEach((e=>{e.disabled=t}))}__addCheckboxToValue(t){this.value.includes(t)||(this.value=[...this.value,t])}__removeCheckboxFromValue(t){this.value.includes(t)&&(this.value=this.value.filter((e=>e!==t)))}__onCheckboxCheckedChanged(t){const e=t.target;e.checked?this.__addCheckboxToValue(e.value):this.__removeCheckboxFromValue(e.value)}__valueChanged(t,e){0===t.length&&void 0===e||(this.toggleAttribute("has-value",t.length>0),this.__checkboxes.forEach((e=>{e.checked=t.includes(e.value)})),void 0!==e&&this.validate())}_shouldRemoveFocus(t){return!this.contains(t.relatedTarget)}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}}n(br);const gr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.selectedValues=[],this.value=null,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value,type:"checkboxgroup"})}setValue(){this.value=this.options.reduce(((t,e)=>(t[e.name]=this.selectedValues.includes(e.name),t)),{}),this.emitValueHandler(!0)}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value,type:"checkboxgroup"})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.isValid=this.setValidity(),this.defaultValue&&(this.selectedValues=this.options.map((t=>t.name)),this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderTooltip(){return this.showTooltip?i("div",{class:"checkboxgroup__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}handleParentCheckbox(t){this.selectedValues=t.target.checked?this.options.map((t=>t.name)):[]}renderLabel(){return i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`,slot:"label"},i("div",{class:"checkbox__label-text",innerHTML:`${this.displayName} ${this.validation.mandatory?"*":""}`}))}render(){return i("div",{class:`checkboxgroup__wrapper  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"checkboxgroup__wrapper--flex"},i("vaadin-checkbox",{class:"checkbox__input",checked:this.selectedValues.length===this.options.length||"true"===this.defaultValue,indeterminate:this.selectedValues.length>0&&this.selectedValues.length<this.options.length,onChange:t=>this.handleParentCheckbox(t)},this.renderLabel()),this.tooltip&&i("img",{class:"checkboxgroup__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()),i("small",{class:"checkboxgroup__error-message"},this.errorMessage),i("vaadin-checkbox-group",{theme:"vertical",value:this.selectedValues,"on-value-changed":t=>{this.selectedValues=t.detail.value}},this.options.map((t=>i("vaadin-checkbox",{class:"checkbox__input",name:t.name,value:t.name,label:t.displayName})))))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}}};gr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:"Roboto";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}';const yr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.value="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleClick(){this.value=this.inputReference.checked.toString(),this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderLabel(){return i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`},i("div",{class:"checkbox__label-text",innerHTML:`${this.displayName} ${this.validation.mandatory?"*":""}`}))}renderTooltip(){return this.showTooltip?i("div",{class:"checkbox__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){return i("div",{class:`checkbox__wrapper  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("input",{class:"checkbox__input",type:"checkbox",id:`${this.name}__input`,ref:t=>this.inputReference=t,name:this.name,checked:"true"===this.defaultValue,readOnly:this.autofilled,required:this.validation.mandatory,value:this.value,onClick:()=>this.handleClick()}),this.renderLabel(),i("small",{class:"checkbox__error-message"},this.errorMessage),i("div",{class:"checkbox__wrapper--relative"},this.tooltip&&i("img",{class:"checkbox__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};yr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:"Roboto";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.checkbox__label-text{font-size:16px}.checkbox__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}',mt("vaadin-input-container",p`
+    `}static get properties(){return{value:{type:Array,value:()=>[],notify:!0,observer:"__valueChanged"}}}constructor(){super(),this.__registerCheckbox=this.__registerCheckbox.bind(this),this.__unregisterCheckbox=this.__unregisterCheckbox.bind(this),this.__onCheckboxCheckedChanged=this.__onCheckboxCheckedChanged.bind(this),this._tooltipController=new as(this),this._tooltipController.addEventListener("tooltip-changed",(t=>{const e=t.detail.node;if(e&&e.isConnected){const t=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(t)}else this._tooltipController.setAriaTarget([])}))}get __checkboxes(){return this.__filterCheckboxes([...this.children])}ready(){super.ready(),this.ariaTarget=this,this.setAttribute("role","group");const t=this.shadowRoot.querySelector("slot:not([name])");this._observer=new ss(t,(({addedNodes:t,removedNodes:e})=>{const i=this.__filterCheckboxes(t),s=this.__filterCheckboxes(e);i.forEach(this.__registerCheckbox),s.forEach(this.__unregisterCheckbox);const r=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(r),this.__warnOfCheckboxesWithoutValue(i)})),this.addController(this._tooltipController)}checkValidity(){return!this.required||this.value.length>0}__filterCheckboxes(t){return t.filter((t=>t instanceof rr))}__warnOfCheckboxesWithoutValue(t){t.some((t=>{const{value:e}=t;return!(t.hasAttribute("value")||e&&"on"!==e)}))&&console.warn("Please provide the value attribute to all the checkboxes inside the checkbox group.")}__registerCheckbox(t){t.addEventListener("checked-changed",this.__onCheckboxCheckedChanged),this.disabled&&(t.disabled=!0),t.checked?this.__addCheckboxToValue(t.value):this.value.includes(t.value)&&(t.checked=!0)}__unregisterCheckbox(t){t.removeEventListener("checked-changed",this.__onCheckboxCheckedChanged),t.checked&&this.__removeCheckboxFromValue(t.value)}_disabledChanged(t,e){super._disabledChanged(t,e),(t||void 0!==e)&&e!==t&&this.__checkboxes.forEach((e=>{e.disabled=t}))}__addCheckboxToValue(t){this.value.includes(t)||(this.value=[...this.value,t])}__removeCheckboxFromValue(t){this.value.includes(t)&&(this.value=this.value.filter((e=>e!==t)))}__onCheckboxCheckedChanged(t){const e=t.target;e.checked?this.__addCheckboxToValue(e.value):this.__removeCheckboxFromValue(e.value)}__valueChanged(t,e){0===t.length&&void 0===e||(this.toggleAttribute("has-value",t.length>0),this.__checkboxes.forEach((e=>{e.checked=t.includes(e.value)})),void 0!==e&&this.validate())}_shouldRemoveFocus(t){return!this.contains(t.relatedTarget)}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}}n(br);const gr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.selectedValues=[],this.value=null,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value,type:"checkboxgroup"})}setValue(){this.value=this.options.reduce(((t,e)=>(t[e.name]=this.selectedValues.includes(e.name),t)),{}),this.emitValueHandler(!0)}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value,type:"checkboxgroup"})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.isValid=this.setValidity(),this.defaultValue&&(this.selectedValues=this.options.map((t=>t.name)),this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderTooltip(){return this.showTooltip?i("div",{class:"checkboxgroup__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}handleParentCheckbox(t){this.selectedValues=t.target.checked?this.options.map((t=>t.name)):[]}renderLabel(){return i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`,slot:"label"},i("div",{class:"checkbox__label-text",innerHTML:`${this.displayName} ${this.validation.mandatory?"*":""}`}))}render(){return i("div",{class:`checkboxgroup__wrapper  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"checkboxgroup__wrapper--flex"},i("vaadin-checkbox",{class:"checkbox__input",checked:this.selectedValues.length===this.options.length||"true"===this.defaultValue,indeterminate:this.selectedValues.length>0&&this.selectedValues.length<this.options.length,onChange:t=>this.handleParentCheckbox(t)},this.renderLabel()),this.tooltip&&i("img",{class:"checkboxgroup__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()),i("small",{class:"checkboxgroup__error-message"},this.errorMessage),i("vaadin-checkbox-group",{theme:"vertical",value:this.selectedValues,"on-value-changed":t=>{this.selectedValues=t.detail.value}},this.options.map((t=>i("vaadin-checkbox",{class:"checkbox__input",name:t.name,value:t.name,label:t.displayName})))))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}}};gr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:"Roboto";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}';const yr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.value="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.handleLabelClick=t=>{t.stopPropagation()}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleClick(){this.value=this.inputReference.checked.toString(),this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderLabel(){return i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`,onClick:this.handleLabelClick},i("div",{class:"checkbox__label-text",innerHTML:`${this.displayName} ${this.validation.mandatory?"*":""}`}))}renderTooltip(){return this.showTooltip?i("div",{class:"checkbox__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){return i("div",{class:`checkbox__wrapper  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("input",{class:"checkbox__input",type:"checkbox",id:`${this.name}__input`,ref:t=>this.inputReference=t,name:this.name,checked:"true"===this.defaultValue,readOnly:this.autofilled,required:this.validation.mandatory,value:this.value,onClick:()=>this.handleClick()}),this.renderLabel(),i("small",{class:"checkbox__error-message"},this.errorMessage),i("div",{class:"checkbox__wrapper--relative"},this.tooltip&&i("img",{class:"checkbox__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};yr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:"Roboto";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.checkbox__label-text{font-size:16px}.checkbox__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}',mt("vaadin-input-container",p`
     :host {
       background-color: var(--lumo-contrast-10pct);
       padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);

package/dist/types/components/checkbox-input/checkbox-input.d.ts

@@ -59,6 +59,7 @@ export declare class CheckboxInput {
   setValidity(): boolean;
   setErrorMessage(): string;
   setClientStyling: () => void;
+  handleLabelClick: (event: MouseEvent) => void;
   renderLabel(): any;
   renderTooltip(): any;
   render(): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-input",
-  "version": "1.39.1",
+  "version": "1.39.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",