@mgdis/mg-components 5.19.3 → 5.20.0

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -10,543 +10,548 @@ import { ClassList, allItemsAreString, isValidString } from "../../../../utils/c
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 export class MgInputToggle {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    // Classes
-    this.classReadonly = 'mg-c-input--toggle-readonly';
-    this.classDisabled = 'mg-c-input--toggle-disabled';
-    this.classIsActive = 'mg-c-input--toggle-is-active';
-    this.classOnOff = 'mg-c-input--toggle-on-off';
-    this.classIcon = 'mg-c-input--toggle-icon';
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        // Classes
+        this.classReadonly = 'mg-c-input--toggle-readonly';
+        this.classDisabled = 'mg-c-input--toggle-disabled';
+        this.classIsActive = 'mg-c-input--toggle-is-active';
+        this.classOnOff = 'mg-c-input--toggle-on-off';
+        this.classIcon = 'mg-c-input--toggle-icon';
+        /**
+         * Set input error message
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            // Does have a custom error message
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
+            }
+        };
+        /**
+         * Change checked value
+         */
+        this.toggleChecked = () => {
+            this.checked = !this.checked;
+        };
+        /**
+         * Slots validation
+         */
+        this.validateSlots = () => {
+            const slots = Array.from(this.element.children);
+            if (slots.length !== 2) {
+                throw new Error('<mg-input-toggle> 2 slots are required.');
+            }
+            else if (!this.isIcon) {
+                // Due to text-overflow set to ellipsis
+                // we need to ensure that slot element have title to display value on mouse over
+                slots.forEach(slot => slot.setAttribute('title', slot.textContent));
+            }
+        };
+        this.value = undefined;
+        this.items = undefined;
+        this.identifier = undefined;
+        this.name = this.identifier;
+        this.label = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.isOnOff = false;
+        this.isIcon = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+        this.classCollection = new ClassList(['mg-c-input--toggle']);
+        this.options = undefined;
+        this.errorMessage = undefined;
+        this.valid = undefined;
+        this.checked = false;
+    }
+    handleValue(newValue) {
+        // Swich to the right option
+        this.setChecked();
+        // Emit value-change event
+        this.valueChange.emit(newValue);
+    }
+    validateItems(newValue) {
+        if (typeof newValue === 'object' && this.items.length !== 2) {
+            throw new Error('<mg-input-toggle> prop "items" require 2 items.');
+        }
+        // String array
+        else if (allItemsAreString(newValue)) {
+            this.options = newValue.map(item => ({ title: item, value: item }));
+        }
+        // Object array
+        else if (newValue && newValue.every(item => isOption(item))) {
+            this.options = newValue;
+        }
+        else {
+            throw new Error('<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue.');
+        }
+    }
+    handleIsOnOff(newValue) {
+        if (newValue)
+            this.classCollection.add(this.classOnOff);
+        else
+            this.classCollection.delete(this.classOnOff);
+    }
+    handleIsIcon(newValue) {
+        if (newValue)
+            this.classCollection.add(this.classIcon);
+        else
+            this.classCollection.delete(this.classIcon);
+    }
+    handleReadonly(newValue) {
+        if (newValue)
+            this.classCollection.add(this.classReadonly);
+        else
+            this.classCollection.delete(this.classReadonly);
+    }
+    handleDisabled(newValue) {
+        if (newValue)
+            this.classCollection.add(this.classDisabled);
+        else
+            this.classCollection.delete(this.classDisabled);
+    }
+    handleChecked(newValue) {
+        // style
+        if (newValue)
+            this.classCollection.add(this.classIsActive);
+        else
+            this.classCollection.delete(this.classIsActive);
+        // update value
+        this.value = this.options[newValue ? 1 : 0].value;
+    }
     /**
-     * Set input error message
-     * @param errorMessage - errorMessage override
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
      */
-    this.setErrorMessage = (errorMessage) => {
-      // Set error message
-      this.errorMessage = undefined;
-      // Does have a custom error message
-      if (!this.valid && errorMessage !== undefined) {
-        this.errorMessage = errorMessage;
-      }
-    };
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
+        }
+        else {
+            this.valid = valid;
+            this.inputValid.emit(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+        }
+    }
     /**
-     * Change checked value
+     * set checked state
      */
-    this.toggleChecked = () => {
-      this.checked = !this.checked;
-    };
+    setChecked() {
+        const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
+        if ([0, 1].includes(optionTrueValueIndex)) {
+            // has "value" props type is not a boolean, it is bind/render as an attributes/props
+            // true props will be represent by "true" string so we convert it has boolean
+            // true attribute will be represent by "" string so we convert it has boolean
+            // https://stenciljs.com/docs/properties
+            if (['', 'true'].includes(this.value) && this.options.find(option => option.value) !== undefined) {
+                this.value = true;
+            }
+            // when options are boolean values and ordered as [true,false] instead [false,true]
+            // we need to reversed the checked value logic
+            const selectedValue = this.value === this.options[optionTrueValueIndex].value;
+            this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
+        }
+        else {
+            this.checked = this.value === this.options[1].value;
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Slots validation
+     * Check if component props are well configured on init
      */
-    this.validateSlots = () => {
-      const slots = Array.from(this.element.children);
-      if (slots.length !== 2) {
-        throw new Error('<mg-input-toggle> 2 slots are required.');
-      }
-      else if (!this.isIcon) {
-        // Due to text-overflow set to ellipsis
-        // we need to ensure that slot element have title to display value on mouse over
-        slots.forEach(slot => slot.setAttribute('title', slot.textContent));
-      }
-    };
-    this.value = undefined;
-    this.items = undefined;
-    this.identifier = undefined;
-    this.name = this.identifier;
-    this.label = undefined;
-    this.labelOnTop = undefined;
-    this.labelHide = false;
-    this.isOnOff = false;
-    this.isIcon = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.tooltip = undefined;
-    this.helpText = undefined;
-    this.classCollection = new ClassList(['mg-c-input--toggle']);
-    this.options = undefined;
-    this.errorMessage = undefined;
-    this.valid = undefined;
-    this.checked = false;
-  }
-  handleValue(newValue) {
-    // Swich to the right option
-    this.setChecked();
-    // Emit value-change event
-    this.valueChange.emit(newValue);
-  }
-  validateItems(newValue) {
-    if (typeof newValue === 'object' && this.items.length !== 2) {
-      throw new Error('<mg-input-toggle> prop "items" require 2 items.');
-    }
-    // String array
-    else if (allItemsAreString(newValue)) {
-      this.options = newValue.map(item => ({ title: item, value: item }));
-    }
-    // Object array
-    else if (newValue && newValue.every(item => isOption(item))) {
-      this.options = newValue;
+    componentWillLoad() {
+        // Check items format
+        this.validateItems(this.items);
+        // Check slots
+        this.validateSlots();
+        // init checked value
+        this.setChecked();
+        // apply handler
+        this.handleIsOnOff(this.isOnOff);
+        this.handleIsIcon(this.isIcon);
+        this.handleReadonly(this.readonly);
+        this.handleDisabled(this.disabled);
     }
-    else {
-      throw new Error('<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue.');
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
     }
-  }
-  handleIsOnOff(newValue) {
-    if (newValue)
-      this.classCollection.add(this.classOnOff);
-    else
-      this.classCollection.delete(this.classOnOff);
-  }
-  handleIsIcon(newValue) {
-    if (newValue)
-      this.classCollection.add(this.classIcon);
-    else
-      this.classCollection.delete(this.classIcon);
-  }
-  handleReadonly(newValue) {
-    if (newValue)
-      this.classCollection.add(this.classReadonly);
-    else
-      this.classCollection.delete(this.classReadonly);
-  }
-  handleDisabled(newValue) {
-    if (newValue)
-      this.classCollection.add(this.classDisabled);
-    else
-      this.classCollection.delete(this.classDisabled);
-  }
-  handleChecked(newValue) {
-    // style
-    if (newValue)
-      this.classCollection.add(this.classIsActive);
-    else
-      this.classCollection.delete(this.classIsActive);
-    // update value
-    this.value = this.options[newValue ? 1 : 0].value;
-  }
-  /**
-   * Set an error and display a custom error message.
-   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-   * It must be paired with an error message to display for the given context.
-   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-   * @param valid - value indicating the validity
-   * @param errorMessage - the error message to display
-   */
-  async setError(valid, errorMessage) {
-    if (typeof valid !== 'boolean') {
-      throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
+    static get is() { return "mg-input-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css"]
+        };
     }
-    else if (!isValidString(errorMessage)) {
-      throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css"]
+        };
     }
-    else {
-      this.valid = valid;
-      this.inputValid.emit(valid);
-      this.setErrorMessage(valid ? undefined : errorMessage);
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component value"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | ToggleValue[]",
+                    "resolved": "ToggleValue[] | string[]",
+                    "references": {
+                        "ToggleValue": {
+                            "location": "import",
+                            "path": "./mg-input-toggle.conf",
+                            "id": "src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.ts::ToggleValue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items are the possible options to select"
+                }
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.identifier"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "attribute": "label-on-top",
+                "reflect": false
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isOnOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if toggle have on/off style"
+                },
+                "attribute": "is-on-off",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if toggle display icon"
+                },
+                "attribute": "is-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is readonly"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "attribute": "help-text",
+                "reflect": false
+            }
+        };
     }
-  }
-  /**
-   * set checked state
-   */
-  setChecked() {
-    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
-    if ([0, 1].includes(optionTrueValueIndex)) {
-      // has "value" props type is not a boolean, it is bind/render as an attributes/props
-      // true props will be represent by "true" string so we convert it has boolean
-      // true attribute will be represent by "" string so we convert it has boolean
-      // https://stenciljs.com/docs/properties
-      if (['', 'true'].includes(this.value) && this.options.find(option => option.value) !== undefined) {
-        this.value = true;
-      }
-      // when options are boolean values and ordered as [true,false] instead [false,true]
-      // we need to reversed the checked value logic
-      const selectedValue = this.value === this.options[optionTrueValueIndex].value;
-      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
+    static get states() {
+        return {
+            "classCollection": {},
+            "options": {},
+            "errorMessage": {},
+            "valid": {},
+            "checked": {}
+        };
     }
-    else {
-      this.checked = this.value === this.options[1].value;
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputToggleElement['value']",
+                    "resolved": "any",
+                    "references": {
+                        "HTMLMgInputToggleElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputToggleElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when checking validity"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Check items format
-    this.validateItems(this.items);
-    // Check slots
-    this.validateSlots();
-    // init checked value
-    this.setChecked();
-    // apply handler
-    this.handleIsOnOff(this.isOnOff);
-    this.handleIsIcon(this.isIcon);
-    this.handleReadonly(this.readonly);
-    this.handleDisabled(this.disabled);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
-  }
-  static get is() { return "mg-input-toggle"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component value"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "items": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | ToggleValue[]",
-          "resolved": "ToggleValue[] | string[]",
-          "references": {
-            "ToggleValue": {
-              "location": "import",
-              "path": "./mg-input-toggle.conf",
-              "id": "src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.ts::ToggleValue"
+    static get methods() {
+        return {
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: boolean, errorMessage: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "valid - value indicating the validity"
+                                }],
+                            "text": "- value indicating the validity"
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "errorMessage - the error message to display"
+                                }],
+                            "text": "- the error message to display"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }]
+                }
             }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Items are the possible options to select"
-        }
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input name\nIf not set the value equals the identifier"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.identifier"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input label"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelOnTop": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is displayed on top"
-        },
-        "attribute": "label-on-top",
-        "reflect": false
-      },
-      "labelHide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is visible"
-        },
-        "attribute": "label-hide",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isOnOff": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if toggle have on/off style"
-        },
-        "attribute": "is-on-off",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if toggle display icon"
-        },
-        "attribute": "is-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is readonly"
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a tooltip message next to the input"
-        },
-        "attribute": "tooltip",
-        "reflect": false
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a help text under the input, usually expected data format and example"
-        },
-        "attribute": "help-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {},
-      "options": {},
-      "errorMessage": {},
-      "valid": {},
-      "checked": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "value-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when value change"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "inputValid",
-        "name": "input-valid",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when checking validity"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setError": {
-        "complexType": {
-          "signature": "(valid: boolean, errorMessage: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "valid - value indicating the validity"
-                }],
-              "text": "- value indicating the validity"
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValue"
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "errorMessage - the error message to display"
-                }],
-              "text": "- the error message to display"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
-          "tags": [{
-              "name": "param",
-              "text": "valid - value indicating the validity"
+                "propName": "items",
+                "methodName": "validateItems"
             }, {
-              "name": "param",
-              "text": "errorMessage - the error message to display"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValue"
-      }, {
-        "propName": "items",
-        "methodName": "validateItems"
-      }, {
-        "propName": "isOnOff",
-        "methodName": "handleIsOnOff"
-      }, {
-        "propName": "isIcon",
-        "methodName": "handleIsIcon"
-      }, {
-        "propName": "readonly",
-        "methodName": "handleReadonly"
-      }, {
-        "propName": "disabled",
-        "methodName": "handleDisabled"
-      }, {
-        "propName": "checked",
-        "methodName": "handleChecked"
-      }];
-  }
+                "propName": "isOnOff",
+                "methodName": "handleIsOnOff"
+            }, {
+                "propName": "isIcon",
+                "methodName": "handleIsIcon"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleReadonly"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabled"
+            }, {
+                "propName": "checked",
+                "methodName": "handleChecked"
+            }];
+    }
 }
 //# sourceMappingURL=mg-input-toggle.js.map