@mgdis/mg-components 6.8.0 → 6.10.0

package/dist/components/mg-input-toggle.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Ze, V as Ve, J as Je, m as me } from './index.es.js';
-import { d as defineCustomElement$5, b as classReadonly, e as classDisabled } from './mg-input2.js';
+import { Z as Zt, G as Gt, a as Dt, D as De } from './index.es.js';
+import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
 const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
-const MgInputToggleStyle0 = mgInputToggleCss;
 
 /**
  * type Option validation function
@@ -34,6 +33,10 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          * If not set the value equals the identifier
          */
         this.name = this.identifier;
+        /**
+         * Define if label is displayed on top
+         */
+        this.labelOnTop = false;
         /**
          * Define if label is visible
          */
@@ -61,7 +64,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-input--toggle']);
+        this.classCollection = new Zt(['mg-c-input--toggle']);
         /**
          * Checked internal value
          */
@@ -122,10 +125,10 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     }
     validateItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Gt(newValue)}.`);
         }
         // String array
-        else if (Je(newValue)) {
+        else if (Dt(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -133,7 +136,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Gt(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -181,7 +184,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!De(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -248,7 +251,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'cb5b7d47c6c0550d4c413894fda26e3e1dfd360a', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (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" }))))));
+        return (h("mg-input", { key: '3886ea7cfdb32db9bbc2b7d38760c91aac30c004', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (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" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -260,7 +263,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "disabled": ["watchDisabled"],
         "checked": ["handleChecked"]
     }; }
-    static get style() { return MgInputToggleStyle0; }
+    static get style() { return mgInputToggleCss; }
 }, [1, "mg-input-toggle", {
         "value": [1032],
         "items": [16],
@@ -336,5 +339,6 @@ const MgInputToggle = MgInputToggle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputToggle, defineCustomElement };
+//# sourceMappingURL=mg-input-toggle.js.map
 
 //# sourceMappingURL=mg-input-toggle.js.map

package/dist/components/mg-input-toggle.js.map

@@ -1 +1 @@
-{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","ClassList","toString","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/**\n * @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n */\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classIsActive = 'mg-c-input--toggle-is-active';\n  private readonly classOnOff = 'mg-c-input--toggle-on-off';\n  private readonly classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputToggle['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.errorMessage = undefined;\n      this.valid = undefined;\n      this.setChecked();\n    }\n  }\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked - checked item\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.watchIsIcon(this.isIcon);\n    this.watchIsOnOff(this.isOnOff);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const checkedItem = this.getCheckedItem(this.checked);\n    return (\n      <mg-input\n        label={this.label}\n        helpText={this.helpText}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n        ) : (\n          <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={this.checked.toString()}\n            aria-readonly={this.disabled || this.readonly}\n            id={this.identifier}\n            class=\"mg-c-input__button-toggle\"\n            disabled={this.disabled || this.readonly}\n            onClick={this.toggleChecked}\n          >\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-1\"></slot>\n            </span>\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-2\"></slot>\n            </span>\n          </button>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","__stencil_proxyCustomElement","ClassList","toString","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/**\n * @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n */\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classIsActive = 'mg-c-input--toggle-is-active';\n  private readonly classOnOff = 'mg-c-input--toggle-on-off';\n  private readonly classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputToggle['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.errorMessage = undefined;\n      this.valid = undefined;\n      this.setChecked();\n    }\n  }\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked - checked item\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.watchIsIcon(this.isIcon);\n    this.watchIsOnOff(this.isOnOff);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const checkedItem = this.getCheckedItem(this.checked);\n    return (\n      <mg-input\n        label={this.label}\n        helpText={this.helpText}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n        ) : (\n          <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={this.checked.toString()}\n            aria-readonly={this.disabled || this.readonly}\n            id={this.identifier}\n            class=\"mg-c-input__button-toggle\"\n            disabled={this.disabled || this.readonly}\n            onClick={this.toggleChecked}\n          >\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-1\"></slot>\n            </span>\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-2\"></slot>\n            </span>\n          </button>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-input.js

@@ -4,5 +4,6 @@ const MgInput = MgInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInput, defineCustomElement };
+//# sourceMappingURL=mg-input.js.map
 
 //# sourceMappingURL=mg-input.js.map

package/dist/components/mg-input2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as me, V as Ve, X as Xe } from './index.es.js';
+import { D as De, G as Gt, U as Ut } from './index.es.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
@@ -19,7 +19,6 @@ const classReadonly = 'mg-c-input--readonly';
 const classVerticalList = 'mg-c-input--vertical-list';
 
 const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
-const MgInputStyle0 = mgInputCss;
 
 const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
     constructor() {
@@ -33,6 +32,10 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
+        /**
+         * Define if label is displayed on top
+         */
+        this.labelOnTop = false;
         /**
          * Define if label is visible
          */
@@ -68,11 +71,11 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
     }
     watchIdentifier(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Ve(newValue)}.`);
+        if (!De(newValue)) {
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Gt(newValue)}.`);
         }
-        else if (!Xe(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        else if (!Ut(newValue)) {
+            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -94,7 +97,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
     }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Gt(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
@@ -137,10 +140,12 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
                 ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
-            if (ariaDescribedbyIDs.size)
+            if (ariaDescribedbyIDs.size > 0) {
                 element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
-            else
+            }
+            else {
                 element.removeAttribute('aria-describedby');
+            }
         });
     }
     /**
@@ -161,8 +166,8 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!me(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Ve(this.label)}.`);
+        if (!De(this.label)) {
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Gt(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -254,7 +259,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '77264d2ab6e11c17aa41084e1a92a1f73ca0dfdb', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '4ad77f1659c1b89fd162a9a5c12cdedaaa6be803', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'b542d2b90f48a2cc40cde20f1ee17e69770f13c6', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'ef262dc7bfef3b06bc261b2755c317e5c8d8c710', class: "mg-c-input__input-container" }, h("div", { key: '4ec59056ceebad738164f242dd272a5bdb89aaa0', class: "mg-c-input__input" }, h("slot", { key: '1cefe1817b4c33cac440fe6cde1cb780bde52c05' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '568732b397b397195f123376ef1a958a8043dc28', class: "mg-c-input__help-text" }, h("slot", { key: '98092704188057b00b24815ab03d874b96d46b4c', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'd72f798a577b626b8b7d0de4094b68c4fd105535', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: 'd258365216d2a3f1810776b06f603aa392e12808', name: this.slotError }))))));
+        return (h(Host, { key: '052fc371413e939c23d1881633ed8d9f2e70ad90', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'f12463ab540800f45a8d52beb2ac57a3733d3958', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'bb4d18b8faf540c26451aabcc35c8f8bc05e75b4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'e46cd50480c677ff9bde03e78335ad838775577c', class: "mg-c-input__input-container" }, h("div", { key: '8a9106982a4b53669b62897aacc5fae13c482e50', class: "mg-c-input__input" }, h("slot", { key: 'd2df2fcae71b45b96d8cdb86f5e7fec2487641c6' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'd85f5b8c268f842e99137d10b5b852b49ac7d395', class: "mg-c-input__help-text" }, h("slot", { key: '7f50c07fd312859efd88dc5a1b9d61552547f7d0', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '9f2c02102f3464fe38acc70dab745901320c1eb3', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '2861117e844fa887ff8231a6e0903e36b5d3d005', name: this.slotError }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -271,7 +276,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         "isReadonly": ["watchLabel"],
         "isFieldset": ["watchLabel"]
     }; }
-    static get style() { return MgInputStyle0; }
+    static get style() { return mgInputCss; }
 }, [1, "mg-input", {
         "identifier": [1],
         "label": [1],
@@ -336,6 +341,7 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MgInput as M, classVerticalList as a, classReadonly as b, classFieldset as c, defineCustomElement as d, classDisabled as e, widths as w };
+export { MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classVerticalList as e, widths as w };
+//# sourceMappingURL=mg-input2.js.map
 
 //# sourceMappingURL=mg-input2.js.map

package/dist/components/mg-input2.js.map

@@ -1 +1 @@
-{"file":"mg-input2.js","mappings":"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","names":["isValidString","toString","isValideID"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.tsx"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible tootltip postions\n */\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/**\n * Base interface for common methods\n */\ninterface InputBaseMethods {\n  required: boolean;\n  invalid: boolean;\n  labelOnTop: boolean;\n  readonly: boolean;\n  displayError: () => Promise<void>;\n  reset: () => Promise<void>;\n}\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | (HTMLMgInputElement & InputBaseMethods)\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & InputBaseMethods);\n\n/**\n * Available WindowEvent types\n */\nexport type EventType = keyof WindowEventMap & 'blur';\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/*# sourceMappingURL=mg-input.css.map */\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/**\n * @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n */\n@Component({\n  tag: 'mg-input',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n  shadow: true,\n})\nexport class MgInput {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selectors\n  private helpTextId: string;\n  private helpTextErrorId: string;\n  private readonly slotLabel = 'label';\n  private readonly slotError = 'error';\n  private readonly slotHelpText = 'help-text';\n\n  // slots elements\n  private errorMessageSlotElement: HTMLElement;\n  private helptextMessageSlotElement: HTMLElement;\n\n  // style\n  private readonly classInput = 'mg-c-input';\n  private readonly classHasError = 'mg-c-input--has-error';\n  private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgInput['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    } else if (!isValideID(newValue)) {\n      console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    } else {\n      this.helpTextId = `${this.identifier}-help-text`;\n      this.helpTextErrorId = `${this.identifier}-error`;\n    }\n  }\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n  @Watch('labelOnTop')\n  watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n    if (newValue) {\n      this.element.classList.add(this.classLabelOnTop);\n    } else {\n      this.element.classList.remove(this.classLabelOnTop);\n    }\n  }\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide: boolean = false;\n  @Watch('labelHide')\n  @Watch('labelOnTop')\n  watchLabelConfig(): void {\n    if (this.labelHide && this.labelOnTop) {\n      throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n  @Watch('tooltipPosition')\n  watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n    if (!tooltipPositions.includes(newValue)) {\n      throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Define error message to display\n   */\n  @Prop() errorMessage?: string;\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: MgInput['errorMessage']): void {\n    if (newValue !== undefined) {\n      this.element.classList.add(this.classHasError);\n      this.renderErrorMessage();\n    } else {\n      this.element.classList.remove(this.classHasError);\n      this.errorMessageSlotElement?.remove();\n      this.errorMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define help text to display\n   */\n  @Prop() helpText?: string;\n  @Watch('helpText')\n  watchHelpText(newValue: MgInput['helpText']): void {\n    if (newValue && !this.isReadonly) {\n      this.renderHelpText();\n    } else {\n      this.helptextMessageSlotElement?.remove();\n      this.helptextMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define aria-describedby ids to link with\n   */\n  @Prop() ariaDescribedbyIDs: string[];\n  @Watch('identifier')\n  @Watch('errorMessage')\n  @Watch('helpText')\n  @Watch('ariaDescribedbyIDs')\n  watchAriaDescribedbyIDs(): void {\n    if (this.isReadonly) return;\n    // a11y IDs\n    const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n    // Help text\n    if (this.helpText !== undefined) {\n      this.renderHelpText();\n      if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n    }\n\n    // Error Message\n    if (this.errorMessage !== undefined) {\n      this.renderErrorMessage();\n      if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n    }\n\n    this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n      if (ariaDescribedbyIDs.size) element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n      else element.removeAttribute('aria-describedby');\n    });\n  }\n\n  /**\n   * Component classes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  watchClass(): void {\n    if (!this.element.classList.contains(this.classInput)) {\n      this.element.classList.add(this.classInput);\n    }\n    this.isFieldset = this.element.classList.contains(classFieldset);\n    this.isReadonly = this.element.classList.contains(classReadonly);\n    this.isDisabled = this.element.classList.contains(classDisabled);\n    this.isVerticalList = this.element.classList.contains(classVerticalList);\n  }\n\n  /**\n   * Element is fieldset\n   */\n  @State() isFieldset: boolean = false;\n\n  /**\n   * Element is readonly\n   */\n  @State() isReadonly: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isDisabled: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isVerticalList: boolean = false;\n\n  /**\n   * Trigger label update\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  @Watch('label')\n  @Watch('required')\n  @Watch('isReadonly')\n  @Watch('isFieldset')\n  watchLabel(): void {\n    if (!isValidString(this.label)) {\n      throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n    } else {\n      this.watchAriaDescribedbyIDs();\n      this.renderLabel();\n    }\n  }\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Render input label\n   */\n  private renderLabel(): void {\n    let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n    // first remove previous labelslot if exist\n    labelSlotElement?.remove();\n\n    // create title element\n    labelSlotElement = document.createElement('mg-input-title');\n    [\n      ['slot', this.slotLabel],\n      ['identifier', this.identifier],\n      ['readonly', this.isReadonly.toString()],\n      ['required', ((this.required && !this.isDisabled) || false).toString()],\n      ['is-legend', this.isFieldset.toString()],\n    ].forEach(([attr, val]) => {\n      labelSlotElement.setAttribute(attr, val);\n    });\n\n    // create label element\n    const label = document.createElement('span');\n    label.classList.add('mg-c-input-title__text');\n    label.textContent = this.label;\n\n    labelSlotElement.appendChild(label);\n    this.element.appendChild(labelSlotElement);\n  }\n\n  /**\n   * Render error message\n   */\n  private renderErrorMessage(): void {\n    this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n    if (this.errorMessageSlotElement === null) {\n      this.errorMessageSlotElement = document.createElement('div');\n      this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n      this.element.appendChild(this.errorMessageSlotElement);\n    }\n    this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n    this.errorMessageSlotElement.innerHTML = this.errorMessage;\n  }\n\n  /**\n   * Render help text message\n   */\n  private renderHelpText(): void {\n    this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n    if (this.helptextMessageSlotElement === null) {\n      this.helptextMessageSlotElement = document.createElement('div');\n      this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n      this.element.appendChild(this.helptextMessageSlotElement);\n    }\n    this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n    this.helptextMessageSlotElement.innerHTML = this.helpText;\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.watchIdentifier(this.identifier);\n    this.watchLabel();\n    this.watchClass();\n    this.watchLabelOnTop(this.labelOnTop);\n    this.watchLabelConfig();\n    this.watchTooltipPosition(this.tooltipPosition);\n    this.watchHelpText(this.helpText);\n    this.watchErrorMessage(this.errorMessage);\n  }\n\n  /**\n   * Validate slots\n   */\n  componentDidLoad(): void {\n    this.watchAriaDescribedbyIDs();\n    if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n      throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n    }\n  }\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  private renderTooltip = (): HTMLMgTooltipElement => (\n    <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const isGroup = this.isFieldset && !this.isReadonly;\n    return (\n      <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n        <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n          <slot name={this.slotLabel}></slot>\n          {this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n        </div>\n        <div class=\"mg-c-input__input-container\">\n          <div class=\"mg-c-input__input\">\n            <slot></slot>\n            {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()}\n          </div>\n          {this.helptextMessageSlotElement && (\n            <div class=\"mg-c-input__help-text\">\n              <slot name={this.slotHelpText}></slot>\n            </div>\n          )}\n          {!this.isDisabled && this.errorMessage && (\n            <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n              <slot name={this.slotError}></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input2.js","mappings":"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","names":["__stencil_proxyCustomElement","isValidString","toString","isValideID"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.tsx"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible tootltip postions\n */\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/**\n * Base interface for common methods\n */\ninterface InputBaseMethods {\n  required: boolean;\n  invalid: boolean;\n  labelOnTop: boolean;\n  readonly: boolean;\n  displayError: () => Promise<void>;\n  reset: () => Promise<void>;\n}\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | (HTMLMgInputElement & InputBaseMethods)\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & InputBaseMethods);\n\n/**\n * Available WindowEvent types\n */\nexport type EventType = keyof WindowEventMap & 'blur';\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/*# sourceMappingURL=mg-input.css.map */\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/**\n * @slot - Input content\n */\n@Component({\n  tag: 'mg-input',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n  shadow: true,\n})\nexport class MgInput {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selectors\n  private helpTextId: string;\n  private helpTextErrorId: string;\n  private readonly slotLabel = 'label';\n  private readonly slotError = 'error';\n  private readonly slotHelpText = 'help-text';\n\n  // slots elements\n  private errorMessageSlotElement: HTMLElement;\n  private helptextMessageSlotElement: HTMLElement;\n\n  // style\n  private readonly classInput = 'mg-c-input';\n  private readonly classHasError = 'mg-c-input--has-error';\n  private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgInput['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    } else if (!isValideID(newValue)) {\n      console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    } else {\n      this.helpTextId = `${this.identifier}-help-text`;\n      this.helpTextErrorId = `${this.identifier}-error`;\n    }\n  }\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n  @Watch('labelOnTop')\n  watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n    if (newValue) {\n      this.element.classList.add(this.classLabelOnTop);\n    } else {\n      this.element.classList.remove(this.classLabelOnTop);\n    }\n  }\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide: boolean = false;\n  @Watch('labelHide')\n  @Watch('labelOnTop')\n  watchLabelConfig(): void {\n    if (this.labelHide && this.labelOnTop) {\n      throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n  @Watch('tooltipPosition')\n  watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n    if (!tooltipPositions.includes(newValue)) {\n      throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Define error message to display\n   */\n  @Prop() errorMessage?: string;\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: MgInput['errorMessage']): void {\n    if (newValue !== undefined) {\n      this.element.classList.add(this.classHasError);\n      this.renderErrorMessage();\n    } else {\n      this.element.classList.remove(this.classHasError);\n      this.errorMessageSlotElement?.remove();\n      this.errorMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define help text to display\n   */\n  @Prop() helpText?: string;\n  @Watch('helpText')\n  watchHelpText(newValue: MgInput['helpText']): void {\n    if (newValue && !this.isReadonly) {\n      this.renderHelpText();\n    } else {\n      this.helptextMessageSlotElement?.remove();\n      this.helptextMessageSlotElement = undefined;\n    }\n  }\n\n  /**\n   * Define aria-describedby ids to link with\n   */\n  @Prop() ariaDescribedbyIDs: string[];\n  @Watch('identifier')\n  @Watch('errorMessage')\n  @Watch('helpText')\n  @Watch('ariaDescribedbyIDs')\n  watchAriaDescribedbyIDs(): void {\n    if (this.isReadonly) return;\n    // a11y IDs\n    const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n    // Help text\n    if (this.helpText !== undefined) {\n      this.renderHelpText();\n      if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n    }\n\n    // Error Message\n    if (this.errorMessage !== undefined) {\n      this.renderErrorMessage();\n      if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n    }\n\n    this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n      if (ariaDescribedbyIDs.size > 0) {\n        element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n      } else {\n        element.removeAttribute('aria-describedby');\n      }\n    });\n  }\n\n  /**\n   * Component classes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  watchClass(): void {\n    if (!this.element.classList.contains(this.classInput)) {\n      this.element.classList.add(this.classInput);\n    }\n    this.isFieldset = this.element.classList.contains(classFieldset);\n    this.isReadonly = this.element.classList.contains(classReadonly);\n    this.isDisabled = this.element.classList.contains(classDisabled);\n    this.isVerticalList = this.element.classList.contains(classVerticalList);\n  }\n\n  /**\n   * Element is fieldset\n   */\n  @State() isFieldset: boolean = false;\n\n  /**\n   * Element is readonly\n   */\n  @State() isReadonly: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isDisabled: boolean = false;\n\n  /**\n   * Element is disabled\n   */\n  @State() isVerticalList: boolean = false;\n\n  /**\n   * Trigger label update\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('class')\n  @Watch('label')\n  @Watch('required')\n  @Watch('isReadonly')\n  @Watch('isFieldset')\n  watchLabel(): void {\n    if (!isValidString(this.label)) {\n      throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n    } else {\n      this.watchAriaDescribedbyIDs();\n      this.renderLabel();\n    }\n  }\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Render input label\n   */\n  private renderLabel(): void {\n    let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n    // first remove previous labelslot if exist\n    labelSlotElement?.remove();\n\n    // create title element\n    labelSlotElement = document.createElement('mg-input-title');\n    [\n      ['slot', this.slotLabel],\n      ['identifier', this.identifier],\n      ['readonly', this.isReadonly.toString()],\n      ['required', ((this.required && !this.isDisabled) || false).toString()],\n      ['is-legend', this.isFieldset.toString()],\n    ].forEach(([attr, val]) => {\n      labelSlotElement.setAttribute(attr, val);\n    });\n\n    // create label element\n    const label = document.createElement('span');\n    label.classList.add('mg-c-input-title__text');\n    label.textContent = this.label;\n\n    labelSlotElement.appendChild(label);\n    this.element.appendChild(labelSlotElement);\n  }\n\n  /**\n   * Render error message\n   */\n  private renderErrorMessage(): void {\n    this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n    if (this.errorMessageSlotElement === null) {\n      this.errorMessageSlotElement = document.createElement('div');\n      this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n      this.element.appendChild(this.errorMessageSlotElement);\n    }\n    this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n    this.errorMessageSlotElement.innerHTML = this.errorMessage;\n  }\n\n  /**\n   * Render help text message\n   */\n  private renderHelpText(): void {\n    this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n    if (this.helptextMessageSlotElement === null) {\n      this.helptextMessageSlotElement = document.createElement('div');\n      this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n      this.element.appendChild(this.helptextMessageSlotElement);\n    }\n    this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n    this.helptextMessageSlotElement.innerHTML = this.helpText;\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.watchIdentifier(this.identifier);\n    this.watchLabel();\n    this.watchClass();\n    this.watchLabelOnTop(this.labelOnTop);\n    this.watchLabelConfig();\n    this.watchTooltipPosition(this.tooltipPosition);\n    this.watchHelpText(this.helpText);\n    this.watchErrorMessage(this.errorMessage);\n  }\n\n  /**\n   * Validate slots\n   */\n  componentDidLoad(): void {\n    this.watchAriaDescribedbyIDs();\n    if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n      throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n    }\n  }\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  private renderTooltip = (): HTMLMgTooltipElement => (\n    <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const isGroup = this.isFieldset && !this.isReadonly;\n    return (\n      <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n        <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n          <slot name={this.slotLabel}></slot>\n          {this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n        </div>\n        <div class=\"mg-c-input__input-container\">\n          <div class=\"mg-c-input__input\">\n            <slot></slot>\n            {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()}\n          </div>\n          {this.helptextMessageSlotElement && (\n            <div class=\"mg-c-input__help-text\">\n              <slot name={this.slotHelpText}></slot>\n            </div>\n          )}\n          {!this.isDisabled && this.errorMessage && (\n            <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n              <slot name={this.slotError}></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-item-more.js

@@ -1,8 +1,9 @@
-import { M as MgItemMore$1, a as defineCustomElement$1 } from './mg-item-more2.js';
+import { M as MgItemMore$1, d as defineCustomElement$1 } from './mg-item-more2.js';
 
 const MgItemMore = MgItemMore$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgItemMore, defineCustomElement };
+//# sourceMappingURL=mg-item-more.js.map
 
 //# sourceMappingURL=mg-item-more.js.map