@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/mg-components/p-c8c8cfc1.entry.js

@@ -0,0 +1 @@
+import{r,h as s,H as e}from"./p-DFwaH2hS.js";import{i as a,t as i,e as o}from"./p-C7xjtdiw.js";const t=["progressbar","meter"],c=class{constructor(s){r(this,s),this.ariaRole="progressbar",this.value=0,this.min=0,this.max=100}watchLabel(r){if(!a(r))throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${i(r)}.`)}watchAriaRole(r){if(r&&!t.includes(r))throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${t.join(", ")}. Passed value: ${i(r)}.`)}watchValue(r){if(!(void 0===r||o(r)&&r>=this.min&&r<=this.max))throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${i(r)}.`)}watchMin(r){if(0!==r&&void 0!==r&&(!o(r)||r>=this.max))throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${i(r)}.`)}watchMax(r){if(100!==r&&void 0!==r&&(!o(r)||r<=this.min))throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${i(r)}.`)}componentWillLoad(){this.watchLabel(this.label),this.watchAriaRole(this.ariaRole),this.watchMin(this.min),this.watchMax(this.max),this.watchValue(this.value)}render(){return s(e,{key:"02466f9df3e5204eef158b9f733ba0af811ad9ed",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},s("div",{key:"88c2eafe55d169502ef5afccfbde3371fee5165f",class:"mg-c-progress"},s("div",{key:"b46159dbed388c58b198bdc330096669c454bcd3",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},s("div",{key:"0faebcc86cc7a55ccab3d9fb8dce4403bff16ebf",class:"mg-c-progress__fill",style:{width:`${Math.round((this.value-this.min)/(this.max-this.min)*100)}%`}}))))}static get watchers(){return{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}}};c.style=".mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}";export{c as mg_progress}

package/dist/mg-components/p-cc793586.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as e,a as s}from"./p-DFwaH2hS.js";import{C as r,b as a,t as o,i as n,c as h}from"./p-C7xjtdiw.js";import{l,i as p}from"./p-DSEloqPn.js";import{a as c}from"./p-C9rmNQIL.js";const m=class{constructor(s){i(this,s),this.valueChange=t(this,"value-change",7),this.inputValid=t(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new r(["mg-c-input--file"]),this.files=[],this.setValidity=i=>{const t=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||i)||(this.valid=i),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==t)&&this.inputValid.emit(this.valid)},this.handleInputChange=i=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.files=Array.from(i.target.files),this.fileButtonElement.focus()},this.handleInputFocus=()=>{this.fileButtonElement.dataset.focusVisible=""},this.handleInputBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})),delete this.fileButtonElement.dataset.focusVisible},this.handleButtonBlur=()=>{this.inputElement.blur()},this.handleButtonClick=()=>{this.inputElement.click()},this.checkValidity=()=>{this.setValidity(this.disabled||!this.isMaxSizeExceeded()&&this.inputElement.checkValidity())},this.handleDeleteFileClick=()=>{this.files=[],this.fileButtonElement.focus()},this.setErrorMessage=(i=!1)=>{this.errorMessage=void 0,this.valid||(i||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.isMaxSizeExceeded()?this.errorMessage=this.messages.input.file.errors.maxSize.replace("{{maxSize}}",l(this.maxSize,this.locale)):this.inputElement.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.isMaxSizeExceeded=()=>this.maxSize>=0&&this.files.some((i=>i.size>this.maxSize)),this.renderFiles=()=>{const i=`${this.identifier}-file-list`,t=i=>e("span",{class:"mg-c-input__file-item-name"},i.name,i.size>0?e("span",{class:"mg-c-input__file-item-size"},` ${l(i.size,this.locale)}`):void 0),s=()=>e("mg-button",{variant:"flat",class:"mg-c-input__file-delete-button","is-icon":!0,label:this.messages.input.file.deleteButton,type:"button",disabled:this.disabled,"aria-controls":[this.identifier,i].join(" "),onClick:this.handleDeleteFileClick},e("mg-icon",{icon:"cross"}));return 0===this.files.length?null:1===this.files.length?e("div",{class:"mg-c-input__file-item"},t(this.files[0]),s()):e("div",{class:"mg-c-input__file-list-container"},e("ul",{role:"list",class:"mg-c-input__file-list",id:i},Array.from(this.files).map(((i,s)=>e("li",{class:"mg-c-input__file-item",key:`${i.name}-${s}`},t(i))))),s())}}watchValue(i){if(a(i))this.files=this.value.map((i=>new File([],i)));else if(t=i,Array.isArray(t)&&t.every((i=>h(i)&&"string"==typeof i.name&&"number"==typeof i.size)))this.files=this.value;else{if(void 0!==i)throw new Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${o(i)}.`);this.files=[]}var t;this.valueChange.emit(i)}watchMultiple(){if(!1===this.multiple&&this.files.length>1)throw new Error('<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.')}watchAccept(i){if(void 0!==i&&!n(i))throw new Error('<mg-input-file> prop "accept" must be a valid string.')}handleValidityChange(i,t,e){void 0!==this.inputElement&&(this.inputElement[e]=i,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(i){i?this.classCollection.add(c):this.classCollection.delete(c)}watchHelpText(){if(!n(this.helpText)){const i=[];void 0!==this.maxSize&&i.push(this.messages.input.file.helpText.maxSize.replace("{{maxSize}}",l(this.maxSize,this.locale))),void 0!==this.accept&&i.push(this.messages.input.file.helpText.accept.replace("{{accept}}",this.accept)),this.helpText=i.join(". ")}}watchFiles(i,t){o(i)!==o(t)&&(this.value=i.length>0?i:void 0)}async setFocus(){this.fileButtonElement.focus()}displayError(){return new Promise((i=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,i()}))}))}async setError(i,t,e=!1){if("boolean"!=typeof i)throw new Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');if(void 0!==t&&!n(t))throw new Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!i&&e,message:i?void 0:t},this.setValidity(i),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){return this.files=[],new Promise((i=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,i()}))}))}componentWillLoad(){const i=p(this.element);return this.locale=i.locale,this.messages=i.messages,this.watchValue(this.value),this.watchDisabled(this.disabled),this.watchHelpText(),this.watchAccept(this.accept),this.watchMultiple(),setTimeout((()=>{this.checkValidity()}),0)}render(){return e("mg-input",{key:"48337d8e0a059dbea60c4bfa152468429b37b897",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},e("div",{key:"b0a67412ce2a054ce84f001efe01156bfce001a1",class:"mg-c-input__file-container"},e("input",{key:"0585b37ac4da8e5b29b94c04a298cfd8451016c9",name:this.name,id:this.identifier,class:"mg-u-visually-hidden",type:"file",multiple:!0===this.multiple,capture:this.capture,accept:this.accept,disabled:this.disabled,required:0===this.files.length&&this.required,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-invalid":(!0===this.invalid).toString(),ref:i=>{this.inputElement=i}}),e("mg-button",{key:"0c71ea34375f60a357ad2aa38353c7acafc1091a",variant:"secondary",class:"mg-c-input__file-button",type:"button",disabled:this.disabled,onClick:this.handleButtonClick,onBlur:this.handleButtonBlur,tabindex:"-1",ref:i=>{this.fileButtonElement=i}},this.messages.input.file.browse),this.renderFiles()))}get element(){return s(this)}static get watchers(){return{value:[{watchValue:0},{watchMultiple:0}],multiple:[{watchMultiple:0}],accept:[{watchAccept:0},{watchHelpText:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],helpText:[{watchHelpText:0}],maxSize:[{watchHelpText:0}],files:[{watchFiles:0}]}}};m.style=".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);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.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__file-container{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input__file-item{display:inline-flex;min-height:var(--mg-b-size-min-height);align-items:center;padding-left:var(--mg-b-size-8);background-color:var(--mg-b-color-neutral-10);font-weight:600;gap:var(--mg-b-size-8)}.mg-c-input__file-item-name{word-break:break-all}.mg-c-input__file-item-size{color:var(--mg-b-color-neutral-90);font-weight:400;word-break:normal}.mg-c-input__file-delete-button{align-self:flex-start}.mg-c-input__file-list{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input__file-list .mg-c-input__file-item{min-height:unset;padding:var(--mg-b-size-8)}.mg-c-input__file-list-container{position:relative;padding:var(--mg-b-size-8) calc(var(--mg-b-size-8) + var(--mg-b-size-min-height)) var(--mg-b-size-8) var(--mg-b-size-8);border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-4)}.mg-c-input__file-list-container .mg-c-input__file-delete-button{position:absolute;top:0;right:0}";export{m as mg_input_file}

package/dist/mg-components/p-d5e69c95.entry.js

@@ -0,0 +1 @@
+import{r as e,h as r,a}from"./p-DFwaH2hS.js";import{i as t}from"./p-DSEloqPn.js";import{t as i,i as s}from"./p-C7xjtdiw.js";const c=class{constructor(r){e(this,r)}validateItems(e){if(void 0===e||(r=e,!(Array.isArray(r)&&r.length>0&&r.every(((e,a)=>"object"==typeof e&&null!==e&&s(e.label)&&(a===r.length-1||s(e.href)))))))throw new Error(`<mg-breadcrumb> prop "items" is required and all values must be the same type, BreadcrumbItemType. Passed value: ${i(e)}.`);var r}renderItem(e,a){return s(e.href)?r("a",{href:e.href,"aria-label":void 0!==e.icon?e.label:void 0,"aria-current":a?"page":void 0},void 0!==e.icon?r("mg-icon",{icon:e.icon}):e.label):r("span",null,e.label)}componentWillLoad(){this.validateItems(this.items),this.messages=t(this.element).messages.breadcrumb}render(){return r("nav",{key:"5181512072a7de6e161adcbb9988ae3407f61301","aria-label":this.messages.label,class:"mg-c-breadcrumb"},r("ol",{key:"2a4cec366a72027091ebcbccd78d552884005b93",class:"mg-c-breadcrumb__list"},this.items.map(((e,a)=>{var t;return r("li",{key:`${a}-${null!==(t=e.href)&&void 0!==t?t:e.label}`,class:"mg-c-breadcrumb__list-item"},this.renderItem(e,a===this.items.length-1))}))))}get element(){return a(this)}static get watchers(){return{items:[{validateItems:0}]}}};c.style='a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-breadcrumb{display:block}.mg-c-breadcrumb__list{padding:0;margin:0;list-style:none}.mg-c-breadcrumb__list-item{display:inline;color:var(--mg-b-color-dark);font-weight:700}.mg-c-breadcrumb__list-item:not(:last-child)::after{content:"/";font-weight:600;margin-inline:var(--mg-b-size-8)}.mg-c-breadcrumb__list-item:has(mg-icon) a{padding:var(--mg-b-size-4);margin:calc(var(--mg-b-size-4)*-1)}.mg-c-breadcrumb__list-item mg-icon{margin-block-start:.2rem;vertical-align:top}';export{c as mg_breadcrumb}

package/dist/types/assets/icons/index.d.ts

@@ -175,6 +175,8 @@ export declare const icons: {
     'paper-plane-slash': string;
     'paper-plane-slash-outline': string;
     paperclip: string;
+    pause: string;
+    'pause-outline': string;
     pen: string;
     'pen-circle': string;
     'pen-fancy': string;

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

@@ -27,7 +27,13 @@ interface InputBaseMethods {
 /**
  * Possible Input types
  */
-export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & InputBaseMethods);
+export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputRichTextEditorElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | HTMLMgInputFileElement | (HTMLMgInputToggleElement & InputBaseMethods);
+/**
+ * Is HTMLMgInputElement an HTMLMgInputFileElement
+ * @param input - input element
+ * @returns true if input is an mg-input-file element
+ */
+export declare const isMgInputFile: (input: HTMLMgInputsElement) => input is HTMLMgInputFileElement;
 /**
  * Available WindowEvent types
  */

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

@@ -0,0 +1,210 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
+export declare class MgInputFile {
+    /************
+     * Internal *
+     ************/
+    private inputElement;
+    private fileButtonElement;
+    private locale;
+    private messages;
+    private hasDisplayedError;
+    private customErrorMessage;
+    private handlerInProgress;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputFileElement;
+    /**
+     * Component value
+     */
+    value: any;
+    watchValue(newValue: MgInputFile['value']): void;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
+    /**
+     * Define multiple files
+     * When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple).
+     */
+    multiple: boolean;
+    watchMultiple(): void;
+    /**
+     * Define file accept format
+     * The accept property is an attribute of the file `<input>` type
+     * that defines the file types the file input should accept
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+     */
+    accept?: string;
+    watchAccept(newValue: MgInputFile['accept']): void;
+    /**
+     * Define max file size (in octets)
+     */
+    maxSize?: number;
+    /**
+     * Define input capture attribute
+     * The capture attribute is a Boolean attribute that specifies
+     * if the device's camera or microphone should be used to capture
+     * media directly, instead of choosing an existing file.
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture).
+     */
+    capture?: 'user' | 'environment' | '';
+    /**
+     * Define if input is required
+     */
+    required: boolean;
+    /**
+     * Define if input is disabled
+     */
+    disabled: boolean;
+    handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputFile['disabled']): void;
+    /**
+     * Add a tooltip message next to the input
+     */
+    tooltip?: string;
+    /**
+     * Define tooltip position
+     */
+    tooltipPosition: TooltipPosition;
+    /**
+     * Add a help text under the input, usually expected data format and example
+     */
+    helpText?: string;
+    watchHelpText(): void;
+    /**
+     * Define input valid state
+     */
+    valid: boolean;
+    /**
+     * Define input invalid state
+     */
+    invalid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Error message to display
+     */
+    errorMessage: string;
+    /**
+     * Files list
+     */
+    files: File[];
+    watchFiles(newValue: MgInputFile['files'], oldValue: MgInputFile['files']): void;
+    /**
+     * Emitted event when value change
+     */
+    valueChange: EventEmitter<HTMLMgInputFileElement['value']>;
+    /**
+     * Emitted event when checking validity
+     */
+    inputValid: EventEmitter<HTMLMgInputFileElement['valid']>;
+    /**
+     * Set focus on input add file button
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Display input error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
+     */
+    setError(valid: MgInputFile['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
+    /**
+     * Reset value, validity and error state
+     */
+    reset(): Promise<void>;
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    private setValidity;
+    /**
+     * Handle change event
+     */
+    private handleInputChange;
+    /**
+     * Handle input focus event
+     */
+    private handleInputFocus;
+    /**
+     * Handle input blur event
+     */
+    private handleInputBlur;
+    /**
+     * Handle button blur event
+     */
+    private handleButtonBlur;
+    /**
+     * Handle add file button click
+     */
+    private handleButtonClick;
+    /**
+     * Check if input is valid
+     */
+    private checkValidity;
+    /**
+     * Handle delete file button click
+     */
+    private handleDeleteFileClick;
+    /**
+     * Set input error message
+     * @param fromSetErrorContext - context come from `setError` method
+     */
+    private setErrorMessage;
+    /**
+     * Check if max size is exceeded
+     * @returns boolean - true if max size is exceeded
+     */
+    private isMaxSizeExceeded;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Render files
+     * @returns formated files.
+     */
+    private renderFiles;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

@@ -0,0 +1,17 @@
+import type { IJodit, ButtonsOption } from 'jodit/esm/types';
+/**
+ * Configuration options for defineEditor function
+ * Combines component-specific options with Jodit configuration
+ */
+export type DefineEditorConfig = {
+    value: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    modules: ButtonsOption;
+    rows?: number;
+    handleTextChange: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};
+export type { IJodit, ButtonsOption };

package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/index.d.ts

@@ -1,21 +1,29 @@
-import Quill, { type QuillOptions } from 'quill';
-export type EditorOptionsType = QuillOptions & {
-    value: string;
-    handleTextChange: () => void;
-    handleFocus: () => void;
-    handleBlur: () => void;
-};
-export type EditorType = Quill;
-interface IdefineEditor {
-    (wrapperElement: HTMLElement, config: EditorOptionsType): EditorType;
-}
+import 'jodit/esm/plugins/select/select.js';
+import 'jodit/esm/plugins/resizer/resizer.js';
+import 'jodit/esm/plugins/table/table.js';
+import 'jodit/esm/plugins/select-cells/select-cells.js';
+import 'jodit/esm/plugins/resize-cells/resize-cells.js';
+import 'jodit/esm/plugins/table-keyboard-navigation/table-keyboard-navigation.js';
+import 'jodit/esm/plugins/inline-popup/inline-popup.js';
+import 'jodit/esm/plugins/clean-html/clean-html.js';
+import 'jodit/esm/plugins/delete/delete.js';
+import 'jodit/esm/plugins/file/file.js';
+import 'jodit/esm/plugins/print/print.js';
+import 'jodit/esm/plugins/source/source.js';
+import type { DefineEditorConfig, IJodit } from './editor.conf';
 /**
- * Fixes for handling text selection in Quill when used within the Shadow DOM.
- * - Fixes focus detection
- * - Adapts native range handling to work with the Shadow DOM
- * - Correctly manages text selection across Shadow DOM boundaries
- * - Sets up selection change events
- * @returns Quill instance
+ * Converts rows count to Jodit editor min-height CSS value.
+ * Uses CSS variables --mg-b-font-size and --mg-b-line-height to compute height.
+ * @param rows - Number of rows
+ * @returns Height as CSS value in pixels (wysiwyg area + toolbar height of 40px + 2px borders)
+ * @throws If required CSS variables (--mg-b-font-size, --mg-b-line-height) are missing
  */
-export declare const defineEditor: IdefineEditor;
-export {};
+export declare const rowsToEditorHeight: (rows: number) => string;
+/**
+ * Configures Jodit editor
+ * @param element - Component element (HTMLMgInputRichTextEditorElement)
+ * @param editorElement - Textarea element for the editor
+ * @param config - Editor configuration options
+ * @returns Configured Jodit editor instance
+ */
+export declare const defineEditor: (element: HTMLMgInputRichTextEditorElement, editorElement: HTMLTextAreaElement, config: DefineEditorConfig) => IJodit;

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

@@ -0,0 +1,3 @@
+import type { ButtonsOption } from './editor/editor.conf';
+/** Default toolbar modules when the modules prop is not set. */
+export declare const DEFAULT_MODULES: ButtonsOption;

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

@@ -1,13 +1,16 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
 import { type TooltipPosition } from '../mg-input/mg-input.conf';
-import { type EditorOptionsType } from './editor';
+import { type SanitizerOptions } from '@mgdis/sanitize-html';
+import type { ButtonsOption } from './editor/editor.conf';
 export declare class MgInputRichTextEditor {
     /************
      * Internal *
      ************/
     private editor;
-    private wrapperElement;
+    private editorElement;
+    private currentTitleElement;
+    private sanitizer;
     private messages;
     private hasDisplayedError;
     private customErrorMessage;
@@ -27,6 +30,11 @@ export declare class MgInputRichTextEditor {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
     identifier: string;
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    name: string;
     /**
      * Input label
      */
@@ -45,7 +53,8 @@ export declare class MgInputRichTextEditor {
      */
     placeholder?: string;
     /**
-     * Define the number of visible text lines for the control
+     * Define the number of visible text lines for the editor.
+     * Impacts the editor height. Content can grow beyond this minimum.
      */
     rows: number;
     /**
@@ -86,9 +95,28 @@ export declare class MgInputRichTextEditor {
      */
     helpText?: string;
     /**
-     * Editor modules configuration
-     */
-    modules?: EditorOptionsType['modules'];
+     * Editor modules configuration.
+     * Must be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).
+     * Use `|` for a separator/divider in the toolbar.
+     * Available modules:
+     * - **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`
+     * - **Lists**: `ul` (unordered list), `ol` (ordered list)
+     * - **Text positioning**: `superscript`, `subscript`
+     * - **Colors**: `brush` (text color/background)
+     * - **Media**: `link`, `image`, `file`
+     * - **Tables**: `table`
+     * - **History**: `undo`, `redo`
+     * - **Other**: `print`, `source` (HTML source editor)
+     */
+    modules?: ButtonsOption;
+    watchModules(newValue: MgInputRichTextEditor['modules']): void;
+    /**
+     * Sanitizer configuration in native format.
+     * Use disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).
+     * Use "*" as tag key to disallow attributes on all tags.
+     */
+    sanitizerOptions?: SanitizerOptions;
+    watchSanitizerOptions(newValue: MgInputRichTextEditor['sanitizerOptions']): void;
     /**
      * Define input valid state
      */
@@ -119,14 +147,14 @@ export declare class MgInputRichTextEditor {
     setFocus(): Promise<void>;
     /**
      * Get editor content as HTML
-     * @returns HTML content of the editor
+     * @returns HTML content of the editor (sanitized)
      */
-    getHTML(): Promise<string>;
+    getEditorHTML(): Promise<string>;
     /**
-     * Get editor content as plain text
+     * Get editor content in plain text format
      * @returns Plain text content of the editor
      */
-    getText(): Promise<string>;
+    getEditorText(): Promise<string>;
     /**
      * Display input error if it exists.
      */
@@ -150,11 +178,6 @@ export declare class MgInputRichTextEditor {
      * @returns truthy is value is invalid
      */
     private isEmpty;
-    /**
-     * Extract the text without HTML tags from value
-     * @returns text content
-     */
-    private getTextContent;
     /**
      * Get pattern validity
      * @returns is pattern valid
@@ -187,6 +210,10 @@ export declare class MgInputRichTextEditor {
      * Handle `text-change` event
      */
     private handleTextChange;
+    /**
+     * Initialize sanitizer with current sanitizerOptions
+     */
+    private initializeSanitizer;
     /*************
      * Lifecycle *
      *************/
@@ -196,9 +223,16 @@ export declare class MgInputRichTextEditor {
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
     /**
-     * add listeners and render editor element
+     * Add listeners and render editor element
      */
     componentDidLoad(): void;
+    /**
+     * Re-apply accessibility attributes after re-renders.
+     * When state changes (disabled, readonly, etc.) trigger a re-render,
+     * mg-input's renderLabel() may destroy and recreate mg-input-title,
+     * which loses the id and click handler needed for aria-labelledby.
+     */
+    componentDidRender(): void;
     /**
      * Render
      * @returns HTML mg-input Element

package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts

@@ -1,4 +1,3 @@
-import type { MgMenu } from '../../menus/mg-menu/mg-menu';
 import type { MgIcon } from '../../../atoms/mg-icon/mg-icon';
 /**
  * SlotLabel prop type
@@ -11,7 +10,3 @@ export type SlotLabelType = {
  * icon prop type
  */
 export type IconType = Pick<MgIcon, 'icon'>;
-/**
- * size type
- */
-export type SizeType = MgMenu['size'];

package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.d.ts

@@ -1,4 +1,4 @@
-import type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';
+import type { IconType, SlotLabelType } from './mg-item-more.conf';
 /**
  * @internal
  */
@@ -27,11 +27,6 @@ export declare class MgItemMore {
      */
     slotlabel?: SlotLabelType;
     validateSlotLabel(newValue: MgItemMore['slotlabel']): void;
-    /**
-     * Define component child menu size.
-     */
-    size?: SizeType;
-    validateSize(newValue: MgItemMore['size']): void;
     /**
      * Define component parent menu.
      */

package/dist/types/components/molecules/menus/mg-menu/mg-menu.conf.d.ts

@@ -1,4 +1,4 @@
-import type { Size, Direction } from '../../../../types';
+import type { Direction } from '../../../../types';
 import type { MgItemMore } from '../../internals/mg-item-more/mg-item-more';
 /**
  * Menu direction values
@@ -7,12 +7,4 @@ export declare const directions: Record<string, Direction>;
 /**
  * ItemMore prop type
  */
-export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;
-/**
- * List of all possibles sizes
- */
-export declare const sizes: readonly ["medium", "large", "xlarge"];
-/**
- * item Size from sizes
- */
-export type MenuSizeType = Size & (typeof sizes)[number];
+export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel'>;

package/dist/types/components/molecules/menus/mg-menu/mg-menu.d.ts

@@ -1,4 +1,4 @@
-import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
+import type { ItemMoreType } from './mg-menu.conf';
 import { Direction } from '../../../../types';
 /**
  * @slot - Menu content
@@ -26,17 +26,17 @@ export declare class MgMenu {
      */
     direction: Direction;
     validateDirection(newValue: MgMenu['direction']): void;
+    /**
+     * Size of the menu items
+     * @deprecated this prop is deprecated and will be removed in future releases
+     */
+    size: never;
     /**
      * Customize "mg-item-more" element
-     * Used with direction: 'vertical' to manage overflow
+     * Used with direction: 'horizontal' to manage overflow
      */
     itemmore?: ItemMoreType;
     validateItemMore(newValue: MgMenu['itemmore']): void;
-    /**
-     * Define mg-menu size
-     */
-    size: MenuSizeType;
-    validateSize(newValue: MgMenu['size']): void;
     /**
      * Define mg-menu-item listener when they are loaded
      * @param event - mg-item-loaded "item-loaded" custom event

package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
-import { type MenuSizeType } from '../mg-menu/mg-menu.conf';
 import { type MgMenuStatusType, type TargetType } from './mg-menu-item.conf';
 import { Direction } from '../../../../types';
 /**
@@ -15,7 +14,7 @@ export declare class MgMenuItem {
      * Internal *
      ************/
     private readonly name;
-    private readonly navigationButton;
+    private readonly classNavigationButton;
     private messages;
     private popoverIdentifier;
     /**************
@@ -48,6 +47,11 @@ export declare class MgMenuItem {
      */
     status?: MgMenuStatusType;
     watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
+    /**
+     * Define menu-item isIcon style.
+     */
+    isIcon?: boolean;
+    watchIsIcon(newValue: MgMenuItem['isIcon']): void;
     /**
      * Define menu-item content expanded.
      */
@@ -67,15 +71,10 @@ export declare class MgMenuItem {
     /**********
      * States *
      *********/
-    /**
-     * Define menu-item size.
-     */
-    size: MenuSizeType;
-    watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
     /**
      * Component button classes
      */
-    navigationButtonClassList: ClassList;
+    classNavigationButtonClassList: ClassList;
     /**
      * Parent menu direction
      */
@@ -205,6 +204,11 @@ export declare class MgMenuItem {
      * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate(): Promise<void>;
+    /**
+     * Render information slot or notification badge
+     * @returns HTML Element
+     */
+    private renderInformationSlotOrNotification;
     /**
      * Render ineractive element
      * @returns HTML Element

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

@@ -0,0 +1,18 @@
+import type { IconType } from '../../atoms/mg-icon/mg-icon.conf';
+/**
+ * Breadcrumb item type
+ */
+export type BreadcrumbItemType = {
+    /** Displayed label (link text or current page text). Always required. */
+    label: string;
+    /**
+     * Link URL. If absent or empty, the item is rendered as current page (text only, no <a>).
+     * Last item typically has no href.
+     */
+    href?: string;
+    /**
+     * Icon name (mg-icon). If present, the link displays the icon instead of the text.
+     * The label is used as accessible text (aria-label or visually hidden content).
+     */
+    icon?: IconType;
+};