@mgdis/mg-components 5.26.0 → 5.27.0

package/dist/mg-components/{p-d80b844d.entry.js → p-fe347f48.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as i}from"./p-bc62d75e.js";import{B as a,i as r}from"./p-d41aa78b.js";const 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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}";const s=n;const o=class{constructor(t){e(this,t);this.message=undefined;this.messageHide=undefined}watchMessage(e){if(e&&!a(e))throw new Error('<mg-loader> prop "message" must be a valid string.')}componentWillLoad(){this.messages=r(this.element).messages;this.watchMessage(this.message)}render(){return t("div",{key:"f308fffd47bf8ef4ca08364bc55f2966ed626a9f",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"3d99e25ed45daed36673314dee7f9d2f1672ef99",icon:"loader",spin:true}),t("span",{key:"bcdbaa246385817265f386df86cb29b848c9797b",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgess))}get element(){return i(this)}static get watchers(){return{message:["watchMessage"]}}};o.style=s;export{o as mg_loader};
-//# sourceMappingURL=p-d80b844d.entry.js.map
+import{r as e,h as t,g as i}from"./p-9dfaa41f.js";import{B as r,i as a}from"./p-3ebe6845.js";const 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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}";const s=n;const o=class{constructor(t){e(this,t);this.message=undefined;this.messageHide=undefined}watchMessage(e){if(e&&!r(e))throw new Error('<mg-loader> prop "message" must be a valid string.')}componentWillLoad(){this.messages=a(this.element).messages;this.watchMessage(this.message)}render(){return t("div",{key:"7f1fed85371b79f77fbfc9cc26b80e1c96c5de0e",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"1756ee0034e15479e7d47e46b6d8e757d4d845f9",icon:"loader",spin:true}),t("span",{key:"341cc3c7531397e63ab6cf776b8932f3c9c7fd7a",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgess))}get element(){return i(this)}static get watchers(){return{message:["watchMessage"]}}};o.style=s;export{o as mg_loader};
+//# sourceMappingURL=p-fe347f48.entry.js.map

package/dist/mg-components/{p-d80b844d.entry.js.map → p-fe347f48.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mgLoaderCss","MgLoaderStyle0","MgLoader","watchMessage","newValue","isValidString","Error","componentWillLoad","this","messages","initLocales","element","message","render","h","key","class","icon","spin","messageHide","loader","inProgess"],"sources":["../styles/dist/components/mg-loader.css?tag=mg-loader&encapsulation=shadow","src/components/molecules/mg-loader/mg-loader.tsx"],"sourcesContent":[".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}/*# sourceMappingURL=mg-loader.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide: boolean;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n      </div>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,0jBACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,M,2EAsBnB,YAAAC,CAAaC,GACX,GAAIA,IAAaC,EAAcD,GAAW,MAAM,IAAIE,MAAM,qD,CAe5D,iBAAAC,GAEEC,KAAKC,SAAWC,EAAYF,KAAKG,SAASF,SAG1CD,KAAKL,aAAaK,KAAKI,Q,CAOzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAa,YAAW,UACjCF,EAAA,WAAAC,IAAA,2CAASE,KAAK,SAASC,KAAI,OAC3BJ,EAAA,QAAAC,IAAA,2CAAMC,MAAO,CAAE,uBAAwBR,KAAKW,cAAgBX,KAAKI,SAAWJ,KAAKC,SAASW,OAAOC,W"}
+{"version":3,"names":["mgLoaderCss","MgLoaderStyle0","MgLoader","watchMessage","newValue","isValidString","Error","componentWillLoad","this","messages","initLocales","element","message","render","h","key","class","icon","spin","messageHide","loader","inProgess"],"sources":["../styles/dist/components/mg-loader.css?tag=mg-loader&encapsulation=shadow","src/components/molecules/mg-loader/mg-loader.tsx"],"sourcesContent":[".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}/*# sourceMappingURL=mg-loader.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message?: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide?: boolean;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n      </div>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,0jBACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,M,2EAsBnB,YAAAC,CAAaC,GACX,GAAIA,IAAaC,EAAcD,GAAW,MAAM,IAAIE,MAAM,qD,CAe5D,iBAAAC,GAEEC,KAAKC,SAAWC,EAAYF,KAAKG,SAASF,SAG1CD,KAAKL,aAAaK,KAAKI,Q,CAOzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAa,YAAW,UACjCF,EAAA,WAAAC,IAAA,2CAASE,KAAK,SAASC,KAAI,OAC3BJ,EAAA,QAAAC,IAAA,2CAAMC,MAAO,CAAE,uBAAwBR,KAAKW,cAAgBX,KAAKI,SAAWJ,KAAKC,SAASW,OAAOC,W"}

package/dist/types/components/atoms/mg-badge/mg-badge.d.ts

@@ -27,7 +27,7 @@ export declare class MgBadge {
     /**
      * Define if button is using outline style
      */
-    outline: boolean;
+    outline?: boolean;
     validateOutline(newValue: MgBadge['outline']): void;
     /**
      * Component classes

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -24,16 +24,16 @@ export declare class MgButton {
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
-    identifier: string;
+    identifier?: string;
     /**
      * aria-label
      * In case button text is not explicit enough
      */
-    label: string;
+    label?: string;
     /**
      * Define button type
      */
-    type: ButtonType;
+    type?: ButtonType;
     /**
      * Set button to full-width
      */
@@ -43,11 +43,11 @@ export declare class MgButton {
      * Define form id to attach button with.
      * If this attribute is not set, the <button> is associated with its ancestor <form> element.
      */
-    form: string;
+    form?: string;
     /**
      * Disable button
      */
-    disabled: boolean;
+    disabled?: boolean;
     disabledHandler(isDisabled: MgButton['disabled']): void;
     /**
      * Define if button is round.

package/dist/types/components/atoms/mg-card/mg-card.d.ts

@@ -24,7 +24,7 @@ export declare class MgCard {
      */
     classCollection: ClassList;
     /**
-     * Methode to set default varianStyle props
+     * Method to set default varianStyle props
      * needeed has stencil doesn't know that props is mutated when updated in prop watcher
      */
     private setDefaultVariantStyle;

package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts

@@ -14,7 +14,7 @@ export declare class MgCharacterLeft {
      * Sets an `id` attribute.
      * Needed by the input for accessibility `aria-decribedby`.
      */
-    identifier: string;
+    identifier?: string;
     /**
      * Sets the characters to count
      */

package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts

@@ -1,3 +1,8 @@
+import { icons } from '../../../assets/icons';
+/**
+ * List of all possibles icons
+ */
+export type IconType = keyof typeof icons;
 /**
  * List of all possibles sizes
  */

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -1,4 +1,4 @@
-import { IconVariantType, IconSizeType, IconVariantStyleType } from './mg-icon.conf';
+import { type IconType, type IconSizeType, type IconVariantType, type IconVariantStyleType } from './mg-icon.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgIcon {
     private svg;
@@ -9,7 +9,7 @@ export declare class MgIcon {
     /**
      * Icon to display.
      */
-    icon: string;
+    icon: IconType;
     validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void;
     /**
      * Define icon size
@@ -19,7 +19,7 @@ export declare class MgIcon {
     /**
      * Define icon variant color
      */
-    variant: IconVariantType;
+    variant?: IconVariantType;
     validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void;
     /**
      * Define icon color variant style

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -7,11 +7,11 @@ export declare class MgInputTitle {
     /**
      * If input is required an asterisk is added at the end of the label
      */
-    required: boolean;
+    required?: boolean;
     /**
      * If input is required an asterisk is added at the end of the label
      */
-    readonly: boolean;
+    readonly?: boolean;
     /**
      * Switch from label to fieldset sementic
      */

package/dist/types/components/atoms/mg-tag/mg-tag.d.ts

@@ -21,12 +21,12 @@ export declare class MgTag {
     /**
      * Define if tag is using outline style
      */
-    outline: boolean;
+    outline?: boolean;
     validateOutline(newValue: MgTag['outline']): void;
     /**
      * Define if tag is using soft style
      */
-    soft: boolean;
+    soft?: boolean;
     validateSoft(newValue: MgTag['soft']): void;
     /**
      * Component classes

package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Possible input width
+ */
+export declare const widths: readonly [2, 4, 16, "full"];
+export type Width = (typeof widths)[number];
+/**
+ * Possible tootltip postions
+ */
+export declare const tooltipPositions: readonly ["input", "label"];
+export type TooltipPosition = (typeof tooltipPositions)[number];
+/**
+ * Possible Input types
+ */
+export type HTMLMgInputsElement = (HTMLMgInputElement & {
+    required: true;
+    invalid: false;
+    displayError: () => void;
+    labelOnTop: boolean;
+    readonly: boolean;
+}) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & {
+    required: true;
+    invalid: false;
+    displayError: () => void;
+});
+/**
+ * Available handlers
+ */
+export declare enum Handler {
+    BLUR = "blur",
+    FOCUS = "focus"
+}
+export declare const classFieldset = "mg-c-input--fieldset";
+export declare const classDisabled = "mg-c-input--disabled";
+export declare const classReadonly = "mg-c-input--readonly";
+export declare const classVerticalList = "mg-c-input--vertical-list";

package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts

@@ -0,0 +1,139 @@
+import { type TooltipPosition } from './mg-input.conf';
+export declare class MgInput {
+    /************
+     * Internal *
+     ************/
+    private helpTextId;
+    private helpTextErrorId;
+    private readonly slotLabel;
+    private readonly slotError;
+    private readonly slotHelpText;
+    private errorMessageSlotElement;
+    private helptextMessageSlotElement;
+    private readonly classInput;
+    private readonly classHasError;
+    private readonly classLabelOnTop;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    watchIdentifier(newValue: MgInput['identifier']): void;
+    /**
+     * Define input label
+     */
+    label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop?: boolean;
+    watchLabelOnTop(newValue: MgInput['labelOnTop']): void;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
+    watchLabelConfig(): void;
+    /**
+     * Add a tooltip message next to the input
+     */
+    tooltip?: string;
+    /**
+     * Define tooltip position
+     */
+    tooltipPosition: TooltipPosition;
+    watchTooltipPosition(newValue: MgInput['tooltipPosition']): void;
+    /**
+     * Define if input is required
+     */
+    required: boolean;
+    /**
+     * Defines value to display in readonly mode
+     */
+    readonlyValue: string | string[];
+    /**
+     * Define error message to display
+     */
+    errorMessage?: string;
+    watchErrorMessage(newValue: MgInput['errorMessage']): void;
+    /**
+     * Define help text to display
+     */
+    helpText?: string;
+    watchHelpText(newValue: MgInput['helpText']): void;
+    /**
+     * Define aria-describedby ids to link with
+     */
+    ariaDescribedbyIDs: string[];
+    watchAriaDescribedbyIDs(): void;
+    /**
+     * Component classes
+     */
+    watchClass(): void;
+    /**
+     * Trigger label update
+     */
+    watchLabel(): void;
+    /**
+     * Element is fieldset
+     */
+    isFieldset: boolean;
+    /**
+     * Element is readonly
+     */
+    isReadonly: boolean;
+    /**
+     * Element is disabled
+     */
+    isDisabled: boolean;
+    /**
+     * Element is disabled
+     */
+    isVerticalList: boolean;
+    /************
+     * Methods *
+     ************/
+    /**
+     * Render input label
+     */
+    private renderLabel;
+    /**
+     * Render error message
+     */
+    private renderErrorMessage;
+    /**
+     * Render help text message
+     */
+    private renderHelpText;
+    /**
+     * Get readonly values
+     * @returns formated readonly value
+     */
+    private getReadonlyValues;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Validate slots
+     */
+    componentDidLoad(): void;
+    /**
+     * Get tooltip node
+     * @returns mg-tooltip
+     */
+    private renderTooltip;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts

@@ -14,19 +14,19 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
     /**
      * Define if mg-input-checkbox-list is readonly
      */
-    readonly: boolean;
+    readonly?: boolean;
     /**
      * Define if mg-input-checkbox-list is disabled
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * Define mg-input-checkbox input name
      */
-    name: string;
+    name?: string;
     /**
      * Define mg-input-checkbox input invalid
      */
-    invalid: boolean;
+    invalid?: boolean;
     /**
      * Current page
      */
@@ -39,7 +39,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
     /**
      * Define section kind
      */
-    sectionKind: SectionKind;
+    sectionKind?: SectionKind;
     validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void;
     /**
      * Define component message

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -48,16 +48,14 @@ export declare enum SectionTitleKind {
  * Base mg-input-checkbox interface
  */
 export interface IMgInputCheckboxBase {
-    disabled: boolean;
-    name: string;
-    invalid: boolean;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
 }
 /**
  * mg-input-checkbox-list interface
  */
 export interface MgInputCheckboxListProps extends IMgInputCheckboxBase {
-    inputVerticalList: boolean;
-    type: CheckboxType;
     displaySearchInput: boolean;
     messages: Record<string, unknown>;
     checkboxes: CheckboxItem[];

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';
-import { type TooltipPosition } from '../MgInput.conf';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
     /************
      * Internal *
@@ -12,8 +12,10 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private hasDisplayedError;
     private handlerInProgress;
     private mode;
-    private legendId;
     private readonly baseClassName;
+    private readonly classTypeMulti;
+    private readonly classWithValues;
+    private readonly classSearchMode;
     private readonly multiStart;
     private readonly searchStart;
     private hasOpenedPopover;
@@ -56,7 +58,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -65,6 +67,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Define if inputs are display verticaly
      */
     inputVerticalList: boolean;
+    watchInputVerticalList(newValue: MgInputCheckbox['inputVerticalList']): void;
     /**
      * Define if mg-input-checkbox is required
      */
@@ -73,11 +76,13 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Define if mg-input-checkbox is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputCheckbox['readonly']): void;
     /**
      * Display selected values list in "multi" type
      * This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
      */
-    displaySelectedValues: boolean;
+    displaySelectedValues?: boolean;
+    watchDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void;
     /**
      * Define if input is disabled
      */
@@ -87,7 +92,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -95,7 +100,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */
@@ -121,6 +126,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Display search input
      */
     displaySearchInput: boolean;
+    watchDisplaySearchInput(newValue: MgInputCheckbox['displaySearchInput']): void;
     /**
      * Search value query
      */
@@ -200,11 +206,6 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @param condition - condtion to applu change on item
      */
     private updateCheckboxItems;
-    /**
-     * Get readonly values
-     * @returns formated readonly value
-     */
-    private getReadonlyValues;
     /**
      * has invalid input
      * @returns true if at least one input is invalid
@@ -215,7 +216,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      */
     private updateSearchResults;
     /**
-     * Methode to validate if one of inputs value is checked id required
+     * Method to validate if one of inputs value is checked id required
      * @returns truthy if condition is valid
      */
     private validateRequired;

package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { type TooltipPosition } from '../MgInput.conf';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
 export declare class MgInputDate {
     /************
      * Internal *
@@ -39,7 +39,7 @@ export declare class MgInputDate {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -52,26 +52,28 @@ export declare class MgInputDate {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputDate['readonly']): void;
     /**
      * Define input minimum date
      * format: yyyy-mm-dd
      */
-    min: string;
+    min?: string;
     /**
      * Define input maximum date
      * format: yyyy-mm-dd
      */
-    max: string;
+    max?: string;
     validateMinMax(newValue: string): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputDate['disabled']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -84,7 +86,7 @@ export declare class MgInputDate {
      *  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.
      * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
-import { type NumericType, type Format } from './mg-input-numeric.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
+import { type NumericType, type Format } from './mg-input-numeric.conf';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 export declare class MgInputNumeric {
     /************
      * Internal *
@@ -42,7 +42,7 @@ export declare class MgInputNumeric {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -51,7 +51,7 @@ export declare class MgInputNumeric {
      * Input placeholder.
      * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Define if input is required
      */
@@ -60,27 +60,30 @@ export declare class MgInputNumeric {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputNumeric['readonly']): void;
     /**
      * Maximum value
      */
-    max: number;
+    max?: number;
     /**
      * Minimum value
      */
-    min: number;
+    min?: number;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputNumeric['disabled']): void;
     /**
      * Define input width
      */
-    mgWidth: Width;
+    mgWidth?: Width;
+    watchMgWidth(newValue: MgInputNumeric['mgWidth']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -88,7 +91,7 @@ export declare class MgInputNumeric {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define numeric type
      */