@everymatrix/general-input 1.10.2 → 1.15.0

package/dist/components/checkbox-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as translate } from './locale.utils.js';
+import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";
+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() {
@@ -10,6 +10,22 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__attachShadow();
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Default value for the input.
+     */
+    this.defaultValue = '';
+    /**
+     * 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() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -28,13 +44,31 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
-  connectedCallback() {
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
   }
   handleClick() {
-    this.value = this.inputReference.checked;
+    this.value = this.inputReference.checked.toString();
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
   }
   setValidity() {
@@ -45,8 +79,18 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return translate('requiredError', this.language);
     }
   }
+  renderLabel() {
+    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
-    return h("div", { class: 'checkbox__wrapper' }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, required: this.validation.mandatory, value: 'jdjdj', onClick: () => this.handleClick() }), h("label", { htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    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 {
     "isValid": ["validityChanged"],
@@ -54,14 +98,20 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }; }
   static get style() { return checkboxInputCss; }
 }, [1, "checkbox-input", {
-    "name": [1],
-    "displayName": [1, "display-name"],
+    "name": [513],
+    "displayName": [513, "display-name"],
+    "defaultValue": [513, "default-value"],
+    "autofilled": [516],
+    "tooltip": [513],
     "validation": [16],
-    "language": [1],
-    "emitValue": [4, "emit-value"],
+    "language": [513],
+    "emitValue": [516, "emit-value"],
+    "clientStyling": [513, "client-styling"],
     "errorMessage": [32],
-    "isValid": [32]
-  }]);
+    "isValid": [32],
+    "limitStylingAppends": [32],
+    "showTooltip": [32]
+  }, [[4, "click", "handleClickOutside"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;