@everymatrix/general-input 1.54.4 → 1.54.6
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/cjs/checkbox-group-input_10.cjs.entry.js +1 -1
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.css +3 -0
- package/dist/esm/checkbox-group-input_10.entry.js +1 -1
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-5b3e1098.entry.js → p-4d0b9924.entry.js} +1 -1
- package/package.json +1 -1
|
@@ -14333,7 +14333,7 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
14333
14333
|
|
|
14334
14334
|
defineCustomElement(CheckboxGroup);
|
|
14335
14335
|
|
|
14336
|
-
const checkboxGroupInputCss = "*,*::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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}";
|
|
14336
|
+
const checkboxGroupInputCss = "*,*::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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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::part(checkbox){background-color:var(--emw--color-white, #FFFFFF)}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}";
|
|
14337
14337
|
const CheckboxGroupInputStyle0 = checkboxGroupInputCss;
|
|
14338
14338
|
|
|
14339
14339
|
const CheckboxGroupInput = class {
|
|
@@ -77,6 +77,9 @@ vaadin-checkbox-group {
|
|
|
77
77
|
opacity: 1;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
.checkbox__input::part(checkbox) {
|
|
81
|
+
background-color: var(--emw--color-white, #FFFFFF);
|
|
82
|
+
}
|
|
80
83
|
.checkbox__input[indeterminate]::part(checkbox), .checkbox__input[checked]::part(checkbox) {
|
|
81
84
|
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
|
|
82
85
|
}
|
|
@@ -14329,7 +14329,7 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
14329
14329
|
|
|
14330
14330
|
defineCustomElement(CheckboxGroup);
|
|
14331
14331
|
|
|
14332
|
-
const checkboxGroupInputCss = "*,*::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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}";
|
|
14332
|
+
const checkboxGroupInputCss = "*,*::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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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::part(checkbox){background-color:var(--emw--color-white, #FFFFFF)}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}";
|
|
14333
14333
|
const CheckboxGroupInputStyle0 = checkboxGroupInputCss;
|
|
14334
14334
|
|
|
14335
14335
|
const CheckboxGroupInput = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-09c73744.js";export{s as setNonce}from"./p-09c73744.js";import{g as i}from"./p-e1255160.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((async e=>(await i(),l([["p-
|
|
1
|
+
import{p as e,b as l}from"./p-09c73744.js";export{s as setNonce}from"./p-09c73744.js";import{g as i}from"./p-e1255160.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((async e=>(await i(),l([["p-4d0b9924",[[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"]],{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"],emitOnClick:[516,"emit-on-click"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],value:["valueChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[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"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}]]],["p-ab0375f4",[[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-1922ef4e",[[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"]]]]]],e))));
|
|
@@ -1723,7 +1723,7 @@ class As{constructor(t){this.host=t,this.__required=!1}setTarget(t){this.__targe
|
|
|
1723
1723
|
</div>
|
|
1724
1724
|
|
|
1725
1725
|
<slot name="tooltip"></slot>
|
|
1726
|
-
`}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 fo(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 co(t,(({addedNodes:t,removedNodes:e})=>{const i=this.__filterCheckboxes(t),o=this.__filterCheckboxes(e);i.forEach(this.__registerCheckbox),o.forEach(this.__unregisterCheckbox);const s=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(s),this.__warnOfCheckboxesWithoutValue(i)})),this.addController(this._tooltipController)}checkValidity(){return!this.required||this.value.length>0}__filterCheckboxes(t){return t.filter((t=>t instanceof vs))}__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(Es);const Ms=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 s("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",{key:"fa45026502fd8d46aa537aee03210ad68d30e577",class:`checkboxgroup__wrapper ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{key:"15ded4fd896920c6244806e49f300c124c27186d",class:"checkboxgroup__wrapper--flex"},i("vaadin-checkbox",{key:"d7eaa205877f8f12c9ef7d4f77018665806f5c7c",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",{key:"aca39ed398415a6e2cef861be40dad33e0398759",class:"checkboxgroup__tooltip-icon",src:r,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()),i("small",{key:"a1a6e1c3c02edcca572b8826ffba06835ca451c3",class:"checkboxgroup__error-message"},this.errorMessage),i("vaadin-checkbox-group",{key:"9f5f8a945e4ba13d7d0da6d362c15d00a7796b71",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 o(this)}static get watchers(){return{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}}};Ms.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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}';const Ds=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 s("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",{key:"0aae00d291d1da02adae1bc91e79ccd579aa5c7f",class:`checkbox__wrapper ${this.name}__input`,ref:t=>this.stylingContainer=t},i("input",{key:"4b8c61d322b5065d8abe4e2687e270511fadc97f",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",{key:"934263cb58a0d379e8b7dc1f5004ad7e61c63ce0",class:"checkbox__error-message"},this.errorMessage),i("div",{key:"88cc71329d88b6325d792226e64ff7f93e940178",class:"checkbox__wrapper--relative"},this.tooltip&&i("img",{key:"3708dc613dc920bac6557f2a8020bbafd97d9127",class:"checkbox__tooltip-icon",src:r,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Ds.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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.checkbox__label-text{font-size:16px}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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}';
|
|
1726
|
+
`}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 fo(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 co(t,(({addedNodes:t,removedNodes:e})=>{const i=this.__filterCheckboxes(t),o=this.__filterCheckboxes(e);i.forEach(this.__registerCheckbox),o.forEach(this.__unregisterCheckbox);const s=this.__checkboxes.map((t=>t.inputElement));this._tooltipController.setAriaTarget(s),this.__warnOfCheckboxesWithoutValue(i)})),this.addController(this._tooltipController)}checkValidity(){return!this.required||this.value.length>0}__filterCheckboxes(t){return t.filter((t=>t instanceof vs))}__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(Es);const Ms=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 s("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",{key:"fa45026502fd8d46aa537aee03210ad68d30e577",class:`checkboxgroup__wrapper ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{key:"15ded4fd896920c6244806e49f300c124c27186d",class:"checkboxgroup__wrapper--flex"},i("vaadin-checkbox",{key:"d7eaa205877f8f12c9ef7d4f77018665806f5c7c",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",{key:"aca39ed398415a6e2cef861be40dad33e0398759",class:"checkboxgroup__tooltip-icon",src:r,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()),i("small",{key:"a1a6e1c3c02edcca572b8826ffba06835ca451c3",class:"checkboxgroup__error-message"},this.errorMessage),i("vaadin-checkbox-group",{key:"9f5f8a945e4ba13d7d0da6d362c15d00a7796b71",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 o(this)}static get watchers(){return{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}}};Ms.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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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::part(checkbox){background-color:var(--emw--color-white, #FFFFFF)}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}';const Ds=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 s("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",{key:"0aae00d291d1da02adae1bc91e79ccd579aa5c7f",class:`checkbox__wrapper ${this.name}__input`,ref:t=>this.stylingContainer=t},i("input",{key:"4b8c61d322b5065d8abe4e2687e270511fadc97f",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",{key:"934263cb58a0d379e8b7dc1f5004ad7e61c63ce0",class:"checkbox__error-message"},this.errorMessage),i("div",{key:"88cc71329d88b6325d792226e64ff7f93e940178",class:"checkbox__wrapper--relative"},this.tooltip&&i("img",{key:"3708dc613dc920bac6557f2a8020bbafd97d9127",class:"checkbox__tooltip-icon",src:r,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip()))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Ds.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(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.checkbox__label-text{font-size:16px}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #D0046C))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--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}';
|
|
1727
1727
|
/**
|
|
1728
1728
|
* @license
|
|
1729
1729
|
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|