@everymatrix/general-registration 1.10.23 → 1.10.24

package/dist/collection/components/general-registration/general-registration.js

@@ -1,4 +1,4 @@
-import { Component, h, Listen, Prop, State, Watch, Event } from '@stencil/core';
+import { Component, h, Listen, Prop, State, Watch, Event, Element } from '@stencil/core';
 import { getTranslations, translate, TRANSLATIONS } from '../../utils/locale.utils';
 import '@everymatrix/general-input';
 export class GeneralRegistration {
@@ -21,6 +21,7 @@ export class GeneralRegistration {
     this.translationUrl = '';
     this.isLoading = true;
     this.forms = [];
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfInputValidity = [];
     this.listOfActions = [];
@@ -33,7 +34,7 @@ export class GeneralRegistration {
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
+      this.host.shadowRoot.prepend(sheet);
     };
     this.setClientStylingURL = () => {
       let url = new URL(this.clientStylingUrl);
@@ -43,7 +44,7 @@ export class GeneralRegistration {
         .then((data) => {
         cssFile.innerHTML = data;
         this.clientStyling = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+        setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
       });
     };
   }
@@ -100,18 +101,17 @@ export class GeneralRegistration {
       }
     });
   }
-  componentDidRender() {
-    if (this.stylingContainer) {
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+    if (!this.limitStylingAppends && this.host) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
+      this.limitStylingAppends = true;
     }
   }
-  componentDidLoad() {
-    this.registrationWidgetLoaded.emit();
-    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
-  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -325,22 +325,51 @@ export class GeneralRegistration {
         return [inputElement];
       }
     });
-    // Set validity status of each input
-    this.listOfInputValidity = this.listOfInputs.map(field => {
-      return {
-        name: field.name,
-        isValid: this.setInitialValidStatus(field)
-      };
-    });
-    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
-    this.listOfInputValues = this.listOfInputs.map(field => {
-      var _a, _b;
-      return { name: field.name,
-        value: ((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
-        isDuplicate: field.isDuplicateInput || false,
-        type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
-      };
-    });
+    this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
+      var _a;
+      // If the field is a togglecheckbox, add its subfields
+      if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
+        field.data.subFields.forEach(subfield => {
+          acc.push({
+            name: subfield.name,
+            isValid: this.setInitialValidStatus(subfield)
+          });
+        });
+      }
+      else {
+        acc.push({
+          name: field.name,
+          isValid: this.setInitialValidStatus(field)
+        });
+      }
+      return acc;
+    }, []);
+    this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
+      var _a, _b, _c;
+      // If the field type is a 'togglecheckbox', add its subfields
+      if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
+        field.data.subFields.forEach(subfield => {
+          var _a, _b;
+          acc.push({
+            name: subfield.name,
+            value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
+            isDuplicate: subfield.isDuplicateInput || false,
+            type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'togglecheckbox'
+              ? 'togglecheckbox'
+              : null
+          });
+        });
+      }
+      else {
+        acc.push({
+          name: field.name,
+          value: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkbox' ? 'false' : null,
+          isDuplicate: field.isDuplicateInput || false,
+          type: ((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
+        });
+      }
+      return acc;
+    }, []);
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.registrationID = config.content.registrationID;
@@ -349,7 +378,6 @@ export class GeneralRegistration {
       this.lastStep = this.registrationStep;
     }
     ;
-    // this.forms.push({ [this.registrationStep] : this.listOfInputs});
     this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
@@ -389,7 +417,11 @@ export class GeneralRegistration {
   renderForm() {
     return this.forms.map((form, index) => {
       return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el },
-        form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })),
+        form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
+            ? (input.inputType.toLowerCase() == 'checkboxgroup' || input.inputType.toLowerCase() == 'togglecheckbox')
+              ? input.data.subFields
+              : input.data.values
+            : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })),
         this.buttonInsideForm && this.renderButtons());
     });
   }
@@ -403,7 +435,7 @@ export class GeneralRegistration {
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el },
+    return (h("div", { class: `registration  registration__${this.registrationStep}` },
       this.renderForm(),
       h("p", { class: 'registration__error-message' }, this.errorMessage),
       !this.buttonInsideForm && this.renderButtons()));
@@ -546,7 +578,8 @@ export class GeneralRegistration {
     "isFormValid": {},
     "isLoading": {},
     "registrationStep": {},
-    "forms": {}
+    "forms": {},
+    "limitStylingAppends": {}
   }; }
   static get events() { return [{
       "method": "registrationWidgetLoaded",
@@ -579,6 +612,7 @@ export class GeneralRegistration {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "registrationStep",
       "methodName": "sendStep"

package/dist/components/checkbox-group-input2.js

@@ -1079,10 +1079,10 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       : [];
   }
   render() {
-    return h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
+    return h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { class: 'checkbox__input', label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
       h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
         this.selectedValues = event.detail.value;
-      } }, this.options.map((checkbox) => h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
+      } }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/checkbox-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const checkboxInputCss = "*,*::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--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
+const checkboxInputCss = "*,*::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--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
 
 const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -89,7 +89,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return null;
   }
   render() {
-    return h("div", { class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h("small", { class: 'checkbox__error-message' }, this.errorMessage), h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
+    return h("div", { class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h("small", { class: 'checkbox__error-message' }, this.errorMessage), h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
       h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
   }
   static get watchers() { return {

package/dist/components/date-input2.js

@@ -10099,7 +10099,7 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
-const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
+const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
 
 const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/email-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
+const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.email__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__input::placeholder{color:#979797}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
 
 const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/general-input2.js

@@ -1,14 +1,198 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './checkbox-group-input2.js';
-import { d as defineCustomElement$9 } from './checkbox-input2.js';
-import { d as defineCustomElement$8 } from './date-input2.js';
-import { d as defineCustomElement$7 } from './email-input2.js';
-import { d as defineCustomElement$6 } from './number-input2.js';
-import { d as defineCustomElement$5 } from './password-input2.js';
-import { d as defineCustomElement$4 } from './radio-input2.js';
-import { d as defineCustomElement$3 } from './select-input2.js';
-import { d as defineCustomElement$2 } from './tel-input2.js';
-import { d as defineCustomElement$1 } from './text-input2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$b } from './checkbox-group-input2.js';
+import { d as defineCustomElement$a } from './checkbox-input2.js';
+import { d as defineCustomElement$9 } from './date-input2.js';
+import { d as defineCustomElement$8 } from './email-input2.js';
+import { d as defineCustomElement$7 } from './number-input2.js';
+import { d as defineCustomElement$6 } from './password-input2.js';
+import { d as defineCustomElement$5 } from './radio-input2.js';
+import { d as defineCustomElement$4 } from './select-input2.js';
+import { d as defineCustomElement$3 } from './tel-input2.js';
+import { d as defineCustomElement$2 } from './text-input2.js';
+import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
+
+const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
+
+const ToggleCheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sendValidityState = createEvent(this, "sendValidityState", 7);
+    this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Default value for the input.
+     */
+    this.defaultValue = '';
+    /**
+     * Options of the input.
+     */
+    this.options = [];
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.showTooltip = false;
+    this.value = '';
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  validityChanged() {
+  }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
+  emitValueHandler(newValue) {
+  }
+  valueHandler(inputValueEvent) {
+    this.sendInputValue.emit(inputValueEvent);
+  }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
+  connectedCallback() {
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentDidLoad() {
+  }
+  handleClick() {
+    this.showFields = this.checkboxReference.checked;
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+  }
+  setValidity() {
+    return this.checkboxReference.validity.valid;
+  }
+  setErrorMessage() {
+    if (this.checkboxReference.validity.valueMissing) {
+      return translate('requiredError', this.language);
+    }
+  }
+  renderLabel() {
+    return (h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h("div", { class: `togglecheckbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
+  render() {
+    return h("div", { class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'togglecheckbox__wrapper--flex' }, h("input", { class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+      h("img", { class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+      return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: subfield.isDuplicateInput, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
+    })));
+  }
+  static get watchers() { return {
+    "isValid": ["validityChanged"],
+    "emitValue": ["emitValueHandler"]
+  }; }
+  static get style() { return toggleCheckboxInputCss; }
+}, [1, "toggle-checkbox-input", {
+    "name": [513],
+    "displayName": [513, "display-name"],
+    "defaultValue": [513, "default-value"],
+    "options": [520],
+    "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"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["toggle-checkbox-input", "checkbox-group-input", "checkbox-input", "date-input", "email-input", "general-input", "number-input", "password-input", "radio-input", "select-input", "tel-input", "text-input", "toggle-checkbox-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "toggle-checkbox-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToggleCheckboxInput);
+      }
+      break;
+    case "checkbox-group-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "checkbox-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "date-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "email-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "general-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement();
+      }
+      break;
+    case "number-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "password-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "radio-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tel-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "toggle-checkbox-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
 
 const generalInputCss = ":host{display:block}";
 
@@ -39,6 +223,8 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'checkboxgroup':
         return h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
+      case 'togglecheckbox':
+        return h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
       case 'datetime':
         return h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat });
       case 'password':
@@ -75,7 +261,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["general-input", "checkbox-group-input", "checkbox-input", "date-input", "email-input", "number-input", "password-input", "radio-input", "select-input", "tel-input", "text-input"];
+  const components = ["general-input", "checkbox-group-input", "checkbox-input", "date-input", "email-input", "general-input", "number-input", "password-input", "radio-input", "select-input", "tel-input", "text-input", "toggle-checkbox-input"];
   components.forEach(tagName => { switch (tagName) {
     case "general-input":
       if (!customElements.get(tagName)) {
@@ -84,50 +270,60 @@ function defineCustomElement() {
       break;
     case "checkbox-group-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "checkbox-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "date-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "email-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
+      }
+      break;
+    case "general-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement();
       }
       break;
     case "number-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "password-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "radio-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "tel-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "toggle-checkbox-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -135,4 +331,4 @@ function defineCustomElement() {
   } });
 }
 
-export { GeneralInput as G, defineCustomElement as d };
+export { GeneralInput as G, ToggleCheckboxInput as T, defineCustomElement$1 as a, defineCustomElement as d };