@mgdis/mg-components 6.25.0 → 6.27.0

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

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,a as o}from"./p-D4bO_UCn.js";import{P as e,C as n,t as a,a as h,n as r,g as c,b as p,i as m,c as u,f as l,d as g}from"./p-91BOpzAB.js";import{c as d,a as b,w as v,n as f}from"./p-DOi9lJXy.js";import{i as w}from"./p-BfblyCaJ.js";import{K as _}from"./p-yMGqY8YG.js";const x=t=>t&&"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,y=class{constructor(s){t(this,s),this.valueChange=i(this,"value-change",7),this.filterChange=i(this,"filter-change",7),this.showMore=i(this,"load-more",7),this.inputValid=i(this,"input-valid",7),this.fetchError=i(this,"fetch-error",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.popoverPlacement="bottom-start",this.tooltipPosition="input",this.options=new e([]),this.filter="",this.classCollection=new n(["mg-c-input--combobox","mg-c-input--has-icon","mg-c-input--input-append"]),this.popoverDisplay=!1,this.handleOptionClick=t=>{this.setValue(this.options.items.find((i=>a(i.value)===t.target.dataset.value))),this.popoverDisplay=!1},this.handleResetButton=t=>{t.stopPropagation(),this.reset().then((()=>{this.input.focus()}))},this.handlePopoverDisplay=t=>{this.popoverDisplay=t.detail},this.handleFilterInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.popoverDisplay||(this.popoverDisplay=!0),this.debounce||(this.debounce=!0,setTimeout((()=>{this.filter=this.input.value,this.debounce=!1}),250))},this.handleFilterBlur=t=>{this.popoverDisplay?(t.stopImmediatePropagation(),this.input.focus()):(this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))},this.handleFilterFocus=()=>{this.isLoading||(this.option=null)},this.handleLoadMoreButton=()=>{this.loadingWrapper({name:"load-more",cursor:h.NEXT}).then((()=>{this.input.focus()}))},this.handleFilterKeydown=t=>{var i;if(this.disabled||t.ctrlKey||t.shiftKey)return;let s=!1;switch(t.key){case _.TAB:case _.ENTER:{s=t.key===_.ENTER;const o=null!==(i=this.option)&&void 0!==i?i:this.options.items.find(this.isCurrentOption);this.popoverDisplay&&this.setValue(o),this.popoverDisplay=!1;break}case _.DOWN:case _.ARROWDOWN:case _.UP:case _.ARROWUP:{if(s=!0,this.isLoading||0===this.page.total){this.popoverDisplay=!0;break}if(Boolean(t.altKey)&&[_.DOWN,_.ARROWDOWN].includes(t.key)){this.popoverDisplay=!0;break}let i;const o=this.popoverDisplay&&x(this.option);[_.DOWN,_.ARROWDOWN].includes(t.key)?i=o?h.NEXT:h.FIRST:[_.UP,_.ARROWUP].includes(t.key)&&(i=o?h.PREVIOUS:h.LAST),this.loadingWrapper({name:"scroll",cursor:i}),this.popoverDisplay=!0;break}case _.LEFT:case _.ARROWLEFT:case _.HOME:case _.RIGHT:case _.ARROWRIGHT:case _.END:{if(!x(this.option))break;let i;s=!0,this.option=null,_.HOME===t.key?i=0:_.END===t.key&&(i=this.filter.length),"number"==typeof i&&this.input.setSelectionRange(i,i);break}case _.ESC:case _.ESCAPE:s=!0,this.popoverDisplay?this.popoverDisplay=!1:(this.setValue(null),this.filter="",this.option=null);break;default:this.option=null}s&&(t.stopPropagation(),t.preventDefault())},this.scrollToIndex=t=>{requestAnimationFrame((()=>{var i;this.popoverDisplay&&(null===(i=this.element.shadowRoot.querySelector(`li:nth-of-type(${(t||0)+this.page.baseIndex})`))||void 0===i||i.scrollIntoView({block:"nearest"}))}))},this.isCurrentOption=t=>(x(this.value)?this.value.value:this.value)===t.value,this.getValueTitle=()=>this.value&&x(this.value)?this.value.title:"string"==typeof this.value?this.value:"",this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.matchFilter=t=>""===this.filter||t.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()),this.getFilteredOptions=()=>this.options.items.filter(this.matchFilter),this.getFirstPage=()=>{const t=this.options.getPage(0,this.matchFilter);return void 0===this.fetchurl&&(t.total=this.getFilteredOptions().length),t},this.loadingWrapper=t=>{var i;let s,o;if(null!==(i=this.loadingAction)&&void 0!==i||(this.loadingAction=t.name),Boolean(this.option)&&"load-more"!==this.loadingAction?o=this.page.items.findIndex((t=>a(t.value)===a(this.option.value))):"load-more"===this.loadingAction&&(o=this.page.items.length-this.page.baseIndex),"load-more"===t.name)this.isLoading=!0,s=this.goToNextPage;else{if(t.cursor===h.NEXT&&this.page.items.length<=this.page.total&&o+this.page.baseIndex===this.page.items.length&&o+this.page.baseIndex<this.page.total)return void this.loadMoreElement.click();s="scroll"===t.name?r:this.updatePage}return s().then((()=>{const i=this.getFilteredOptions();"load-data"!==t.name&&(o=this.page.getIndexFromCursor(t.cursor,"load-more"===this.loadingAction&&o>=0?i[o]:this.option)),this.option=i[o],this.scrollToIndex(o)})).finally((()=>{requestAnimationFrame((()=>{this.isLoading=!1,this.loadingAction=void 0}))}))},this.goToNextPage=()=>(this.showMore.emit(),void 0!==this.fetchurl?this.getOptions("string"==typeof this.page.next?this.page.next:void 0).then((t=>{if(void 0!==t){const i=[...this.page.items,...t.items];this.options=new e(i,{total:t.total,next:t.next,top:i.length})}})):r((()=>{if("function"==typeof this.page.next){const t=this.page.next();this.page=new g(Object.assign(Object.assign({},t),{items:[...this.page.items,...t.items],total:this.getFilteredOptions().length}))}}))),this.updatePage=async()=>{if(void 0!==this.fetchurl)return this.getOptions().then((t=>{void 0!==t&&(this.options=new e(t.items,{total:t.total,next:t.next,top:t.top}))}));this.page=this.getFirstPage()},this.getOptions=async(t=this.fetchurl)=>{const i="function"==typeof this.fetchmappings.request.filterTransform?this.fetchmappings.request.filterTransform(this.filter):this.filter,s=("string"==typeof t?t:t.toString()).replaceAll(this.fetchmappings.request.filter,encodeURIComponent(i));try{const t=await fetch(s,this.fetchoptions);if(!t.ok)return void this.fetchError.emit(new Error(`${t.status} - ${t.statusText}`));const i=await t.json(),o=c(i,this.fetchmappings.response.items).map((t=>{var i;return{title:c(t,this.fetchmappings.response.itemTitle),value:null!==(i=c(t,this.fetchmappings.response.itemValue))&&void 0!==i?i:t}})),e=Number(c(i,this.fetchmappings.response.total,0));let n=c(i,this.fetchmappings.response.next);if(Boolean(n)&&!URL.canParse(n)){const t=new URL(s,this.element.ownerDocument.baseURI);n=new URL(n,t).toString()}return{items:o,total:e,next:n,top:o.length}}catch(t){this.fetchError.emit(t)}}}watchValue(t){this.filter=this.getValueTitle(),this.valueChange.emit(t)}watchItems(t){if(void 0===this.fetchurl||void 0!==t){if(void 0!==this.fetchurl&&void 0!==t)throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${a(t)}.`);if(Array.isArray(t)&&0===t.length)this.options=new e([]);else if(p(t))this.options=new e(t.map((t=>({title:t,value:t}))),{total:t.length});else{if(i=t,!Array.isArray(i)||!i.every(x))throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${a(t)}.`);this.options=new e(t,{total:t.length})}var i}}watchIdentifier(t){m(t)&&(this.popoverId=`${t}-popover`,this.element.dataset.mgPopoverGuard=this.popoverId)}watchReadonly(t){t?this.classCollection.add(d):this.classCollection.delete(d)}watchValidityChange(t,i,s){void 0!==this.input&&(this.input[s]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(b):this.classCollection.delete(b)}watchMgWidth(t){v.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`),this.classCollection=new n(this.classCollection.classes)}watchFetchUrl(t){void 0!==t&&this.loadingWrapper({name:"load-data"})}watchFetchOptions(t){if(this.fetchurl&&t&&!u(t))throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${a(t)}.`)}watchFetchMappings(t){if(void 0!==this.fetchurl&&!u(t))throw new Error('<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.');if(void 0!==t&&!(t=>{const i=u(t)&&Object.hasOwn(t,"request")&&Object.hasOwn(t,"response");if(i){const{request:i,response:s}=t;return![i,s].some((t=>!u(t)))&&!("string"!=typeof i.filter||void 0!==i.filterTransform&&"function"!=typeof i.filterTransform||"object"!=typeof s||"string"!=typeof s.total||"string"!=typeof s.items||"string"!=typeof s.next||"string"!=typeof s.itemTitle||"string"!=typeof s.itemValue&&void 0!==s.itemValue)}return i})(t))throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${a(t)}.`)}watchOptions(){this.page=this.getFirstPage()}watchFilter(t){this.loadingWrapper({name:"load-data"}),this.filterChange.emit(t)}watchPopoverDisplay(t){t?this.input.focus():(this.option=null,this.filter=this.getValueTitle(),this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,s=!1){if("boolean"!=typeof t)throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!m(i))throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&s,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.setValue(null),this.option=null,this.filter="",new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValue(t){this.value=x(t)?p(this.items||this.options.items)?t.title:Object.assign({},t):""}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=w(this.element).messages,f(this),this.watchIdentifier(this.identifier),this.watchItems(this.items),void 0!==this.fetchurl&&(this.watchFetchOptions(this.fetchoptions),this.watchFetchMappings(this.fetchmappings),this.loadingWrapper({name:"load-data"})),this.watchValue(this.value),this.watchOptions(),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){var t,i,o,e,n,h;const r=`${this.identifier}-list`,c=this.getValueTitle(),p=this.value&&!this.disabled;let m,u;return(null===(t=this.page)||void 0===t?void 0:t.items.length)>0?m="list":0===(null===(i=this.page)||void 0===i?void 0:i.items.length)&&this.filter.length>0?m="notfound":0===(null===(o=this.page)||void 0===o?void 0:o.items.length)&&(m="notavailable"),u=void 0!==(null===(e=this.option)||void 0===e?void 0:e.value)?this.option.value:"string"==typeof this.value?this.value:null===(n=this.value)||void 0===n?void 0:n.value,s("mg-input",{key:"047c14310f70117e1aec89161d2261f175487be7",label:this.label,identifier:this.identifier,class:this.classCollection.classes.join(" "),ariaDescribedbyIDs:m&&"list"!==m?m:void 0,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?c&&s("b",{class:"mg-c-input__readonly-value"},c):s("mg-popover",{identifier:this.popoverId,placement:this.popoverPlacement,display:this.popoverDisplay,style:{"--mg-c-input-list-width":(null===(h=this.input)||void 0===h?void 0:h.offsetWidth)>0?`${this.input.offsetWidth}px`:void 0},"data-fallback-placement":"bottom-end","onDisplay-change":this.handlePopoverDisplay},s("div",{class:"mg-c-input__input-group-container"},s("mg-icon",{icon:"magnifying-glass"}),s("input",{type:"text",role:"combobox",class:"mg-c-input__box mg-c-input__box--width",value:this.filter,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:"off","aria-autocomplete":"list","aria-expanded":this.popoverDisplay.toString(),"aria-controls":r,"aria-invalid":(!0===this.invalid).toString(),"aria-activedescendant":l(u),onInput:this.handleFilterInput,onBlur:this.handleFilterBlur,onFocus:this.handleFilterFocus,onKeyDown:this.handleFilterKeydown,ref:t=>{null!==t&&(this.input=t)}}),p?s("mg-button",{class:"mg-c-input__box-append mg-c-input__reset",variant:"flat","is-icon":!0,label:this.messages.general.reset,"aria-controls":this.identifier,tabindex:"-1",onClick:this.handleResetButton},s("mg-icon",{icon:"cross"})):s("mg-button",{class:"mg-c-input__box-append",variant:"flat","is-icon":!0,label:this.itemsLabel,tabindex:"-1",disabled:this.disabled},s("mg-icon",{icon:"chevron-"+(this.popoverDisplay?"up":"down")}))),s("div",{slot:"content",class:"mg-c-input__popover-container"},"list"===m&&[s("ul",{key:"list",class:"mg-c-input__input-list",role:"listbox",id:r,"aria-label":this.itemsLabel,"aria-setsize":this.page.total},this.page.items.map((t=>{var i;return s("li",{role:"option",class:{"mg-c-input__input-list-item":!0,"mg-c-input__input-list-item--focus-visible":JSON.stringify(null===(i=this.option)||void 0===i?void 0:i.value)===JSON.stringify(t.value),"mg-c-input__input-list-item--selected":this.isCurrentOption(t)},key:t.title,id:l(t.value),"aria-selected":this.isCurrentOption(t).toString(),"data-value":a(t.value),onClick:this.handleOptionClick},t.title,this.isCurrentOption(t)&&s("mg-icon",{icon:"check"}))}))),this.isLoading&&s("mg-loader",{key:"loader",message:this.messages.input.combobox.search,class:{"mg-u-visually-hidden":Boolean(this.page.next)}}),this.page.next&&s("mg-button",{key:"load-more",variant:"flat",class:"mg-c-input__load-more",tabIndex:-1,disabled:this.isLoading,"full-width":!0,"disable-on-click":!0,onClick:this.handleLoadMoreButton,"aria-controls":r,ref:t=>{null!==t&&(this.loadMoreElement=t)}},s("mg-icon",{icon:"chevron-down"}),this.messages.input.showMore)],"notfound"===m&&s("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notFound),"notavailable"===m&&s("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notAvailable))))}get element(){return o(this)}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],identifier:[{watchIdentifier:0}],readonly:[{watchReadonly:0},{watchValidityChange:0}],required:[{watchValidityChange:0}],disabled:[{watchValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],fetchurl:[{watchFetchUrl:0}],fetchoptions:[{watchFetchOptions:0}],fetchmappings:[{watchFetchMappings:0}],options:[{watchOptions:0}],filter:[{watchFilter:0}],popoverDisplay:[{watchPopoverDisplay:0}]}}};y.style=".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:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.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-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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--label-on-top .mg-c-input__readonly-value{margin-top:0}.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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-popover-overflow:auto;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-min-width:var(--mg-c-input-list-width);--mg-c-popover-max-height:calc(50 * var(--mg-b-size-8) - var(--mg-b-size-32))}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";export{y as mg_input_combobox}

package/dist/mg-components/{p-96fc508e.entry.js → p-c2beff2c.entry.js}

@@ -1 +1 @@
-import{r,h as s,H as e}from"./p-D4bO_UCn.js";import{i as a,t as i,e as o}from"./p-91BOpzAB.js";const t=["progressbar","meter"],h=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:"3682d5f1980678e39594dab8223805deb4b425d4",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},s("div",{key:"001d511a866ec0526c4ffd01a8a90448b6f40819",class:"mg-c-progress"},s("div",{key:"504fa583f5b8186236871f3f2cd886acb40614ef",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},s("div",{key:"044c9297d5a12c9d8c6d3b76d17dd2ba6a1a9719",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}]}}};h.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{h as mg_progress}
+import{r,h as s,H as e}from"./p-D4bO_UCn.js";import{i as a,t as i,e as o}from"./p-91BOpzAB.js";const t=["progressbar","meter"],h=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:"c0df3a5d374a8e5761efcd1e340775e5a33b17b4",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},s("div",{key:"9481f0fdb3bb5b9c0a27cd47113207537dcf0eec",class:"mg-c-progress"},s("div",{key:"67bf52635d482d56a8b0a85f31da78c243054e22",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},s("div",{key:"9a55b0bf8132bcec41350941d2bbd470194d7981",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}]}}};h.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{h as mg_progress}

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

@@ -0,0 +1 @@
+import{r as e,h as t,a as i}from"./p-D4bO_UCn.js";import{i as a}from"./p-BfblyCaJ.js";import{i as r,t as s}from"./p-91BOpzAB.js";const o=class{constructor(t){e(this,t),this.messageHide=!1}watchMessage(e){if(e&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${s(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return t("div",{key:"55e8bc6908f1cd83f9ffc0e30dd28ede501e30d8",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"4306e748a509ac3c546d565bf2bed74529ce3c24",icon:"loader",spin:!0}),t("span",{key:"6636df5f58654f6de7f0b79e8e4dd32e4fe2bfc7",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return i(this)}static get watchers(){return{message:[{watchMessage:0}]}}};o.style=".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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !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:var(--mg-b-size-4);text-align:center}";export{o as mg_loader}

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

@@ -43,7 +43,12 @@ export declare class MgTooltip {
      * Disable tooltip
      */
     disabled: boolean;
-    watchDisabled(newValue: MgTooltip['disabled']): void;
+    watchDisabled(): void;
+    /**
+     * Toggle the popper scroll and resize listeners, only needed while the tooltip is visible
+     * @param enabled - listeners state to apply
+     */
+    private setPopperEventListeners;
     /**
      * Show tooltip
      */
@@ -79,14 +84,35 @@ export declare class MgTooltip {
      * Method to reset guard value
      */
     private resetGuard;
+    /**
+     * Display tooltip when the tooltiped element takes focus
+     */
+    private handleTooltipedElementFocus;
+    /**
+     * Hide tooltip when the tooltiped element loses focus
+     */
+    private handleTooltipedElementBlur;
+    /**
+     * Display tooltip when the tooltiped element is hovered
+     */
+    private handleTooltipedElementMouseenter;
+    /**
+     * Hide tooltip when the tooltiped element is not hovered anymore
+     */
+    private handleTooltipedElementMouseleave;
+    /**
+     * Manage all tooltiped element listeners
+     * @param element - element to bind or unbind
+     * @param action - process to apply on element listeners
+     */
+    private manageTooltipedElementListeners;
     /**
      * Update slot content when it is a mg-button
      * @param mgButton - slotted mg-button
      */
     private setMgButtonWrapper;
     /**
-     * Set popper instance
-     * @param strategy - popper strategy to apply on instance
+     * Set popper instance on the current tooltiped element
      */
     private setPopper;
     /**
@@ -100,10 +126,11 @@ export declare class MgTooltip {
      */
     private setMgButtonMutationObserver;
     /**
-     * Set tooltiped element aria-describedby
-     * @param element - element to update
+     * Reconcile the tooltiped element a11y: the tooltip is restituted — `aria-describedby` exposed, and a
+     * non-interactive element made focusable (`tabindex` + `role`) — unless it is disabled and not displayed.
+     * Pre-existing `aria-describedby` ids are preserved.
      */
-    private setAriaDescribedby;
+    private updateTooltipedElementA11y;
     /**
      * Render tooltip content element and init listeners
      */

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

@@ -11,7 +11,8 @@ export declare class MgInput {
     private readonly slotLabel;
     private readonly slotError;
     private readonly slotHelpText;
-    private readonly blockLevelContentRegExp;
+    private readonly blockLevelTags;
+    private readonly openingTagRegExp;
     private errorMessageSlotElement;
     private helptextMessageSlotElement;
     private readonly classInput;

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

@@ -308,6 +308,17 @@ export declare class MgInputCombobox {
      * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
+    /**
+     * Check if an option matches the current filter
+     * @param option - option to match
+     * @returns true if the option matches the filter
+     */
+    private matchFilter;
+    /**
+     * Get all the options matching the current filter
+     * @returns filtered options
+     */
+    private getFilteredOptions;
     /**
      * Get first page with filter applied
      * @returns first page with filter applied

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -78,6 +78,10 @@ export declare class MgForm {
      * Required message
      */
     requiredMessageText: string;
+    /**
+     * Whether the form has slotted actions
+     */
+    hasActions: boolean;
     /**
      * Emitted event on form validity check
      * Tells if form is valid or not

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

@@ -15,3 +15,11 @@ export declare const directions: readonly ["vertical", "horizontal"];
  * IllustratedMessage direction type
  */
 export type IllustratedMessageDirectionType = Direction & (typeof directions)[number];
+/**
+ * List of all possibles horizontal alignments
+ */
+export declare const aligns: readonly ["left", "center", "right"];
+/**
+ * IllustratedMessage align type
+ */
+export type IllustratedMessageAlignType = (typeof aligns)[number];

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts

@@ -1,5 +1,5 @@
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
-import { type IllustratedMessageDirectionType, type IllustratedMessageSizeType } from './mg-illustrated-message.conf';
+import { type IllustratedMessageAlignType, type IllustratedMessageDirectionType, type IllustratedMessageSizeType } from './mg-illustrated-message.conf';
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -23,6 +23,14 @@ export declare class MgIllustratedMessage {
      */
     direction: IllustratedMessageDirectionType;
     watchDirection(newValue: IllustratedMessageDirectionType, oldValue?: IllustratedMessageDirectionType): void;
+    /**
+     * Define the horizontal alignment of the message inside its container.
+     * The message is sized to its content, so `align` positions it in both the vertical and
+     * horizontal directions. When the content is wide enough to fill the container there is
+     * no room left, so `align` has no visible effect.
+     */
+    align: IllustratedMessageAlignType;
+    watchAlign(newValue: IllustratedMessageAlignType, oldValue?: IllustratedMessageAlignType): void;
     /**
      * Component classes
      */

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.c
 import { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+import { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 import { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 import { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Direction, Option, Option as ToggleOption } from "./types";
@@ -51,7 +51,7 @@ export { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.c
 export { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+export { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 export { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 export { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Direction, Option, Option as ToggleOption } from "./types";
@@ -379,6 +379,11 @@ export namespace Components {
         "variantStyle": IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align": IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -3202,6 +3207,11 @@ declare namespace LocalJSX {
         "variantStyle"?: IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align"?: IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -4980,6 +4990,7 @@ declare namespace LocalJSX {
     interface MgIllustratedMessageAttributes {
         "size": IllustratedMessageSizeType;
         "direction": IllustratedMessageDirectionType;
+        "align": IllustratedMessageAlignType;
     }
     interface MgIllustrationAttributes {
         "illustration": IllustrationType;

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.25.0",
+  "version": "6.27.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -979,9 +979,19 @@
         },
         {
           "name": "mg-illustrated-message",
-          "description": "Attributes:\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
+          "description": "Attributes:\n- `align`: Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
           "attributes": [
+            {
+              "name": "align",
+              "description": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n\nType: `\"center\" | \"left\" | \"right\"`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
+              "value": {
+                "type": "\"center\" | \"left\" | \"right\"",
+                "default": "'center'",
+                "required": false
+              }
+            },
             {
               "name": "direction",
               "description": "Define component orientation\n\nType: `\"horizontal\" | \"vertical\"`",

package/ide/vscode/html-custom-data.json

@@ -1796,8 +1796,33 @@
     },
     {
       "name": "mg-illustrated-message",
-      "description": "Attributes:\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
+      "description": "Attributes:\n- `align`: Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
       "attributes": [
+        {
+          "name": "align",
+          "description": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n\nType: `\"center\" | \"left\" | \"right\"`",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ],
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"
+            }
+          ]
+        },
         {
           "name": "direction",
           "description": "Define component orientation\n\nType: `\"horizontal\" | \"vertical\"`",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.25.0",
+  "version": "6.27.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,41 +40,41 @@
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "@stencil/core": "4.43.5",
-    "jodit": "4.13.8",
-    "@mgdis/sanitize-html": "1.1.3",
-    "@mgdis/styles": "2.20.0",
-    "@mgdis/core-ui-helpers": "1.2.2",
-    "@mgdis/img": "2.7.2"
+    "jodit": "4.13.22",
+    "@mgdis/core-ui-helpers": "1.3.0",
+    "@mgdis/img": "3.0.0",
+    "@mgdis/sanitize-html": "1.1.4",
+    "@mgdis/styles": "2.22.0"
   },
   "devDependencies": {
     "@playwright/test": "1.61.1",
-    "@storybook/addon-a11y": "10.5.2",
-    "@storybook/addon-docs": "10.5.2",
-    "@storybook/addon-links": "10.5.2",
-    "@storybook/html": "10.5.2",
-    "@storybook/html-vite": "10.5.2",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/addon-docs": "10.5.8",
+    "@storybook/addon-links": "10.5.8",
+    "@storybook/html": "10.5.8",
+    "@storybook/html-vite": "10.5.8",
     "@types/jest": "29.5.14",
     "@types/node": "24.13.3",
-    "chromatic": "18.1.0",
-    "eslint": "9.39.5",
-    "eslint-plugin-storybook": "10.5.2",
+    "chromatic": "18.2.0",
+    "eslint": "10.8.1",
+    "eslint-plugin-storybook": "10.5.8",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "17.0.0",
     "jest-transform-stub": "2.0.0",
     "react": "19.2.8",
-    "react-dom": "19.2.7",
-    "sass": "1.101.0",
-    "storybook": "10.5.2",
+    "react-dom": "19.2.8",
+    "sass": "1.102.0",
+    "storybook": "10.5.8",
     "storybook-addon-tag-badges": "3.1.0",
     "typescript": "5.9.3",
-    "vite": "8.1.5",
+    "vite": "8.2.1",
     "@core-ui/jest-config": "1.0.9",
-    "@mgdis/linting-stencil": "2.0.0"
+    "@mgdis/linting-stencil": "2.1.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
-    "prebuild": "node ./bin/build-svg-assets",
+    "prebuild": "node ./bin/build-svg-assets && node ./bin/build-jodit-styles",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
     "test": "TZ=UTC stencil test --spec --e2e",

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss

@@ -1,212 +0,0 @@
-:host {
-  /**
-   * Colors - Base
-   */
-  --jd-color-white: rgb(255 255 255);
-  --jd-color-dark: rgb(76 76 76);
-  --jd-color-default: var(--jd-color-dark);
-  --jd-color-gray: rgb(218 218 218);
-  --jd-color-gray-dark: rgb(165 165 165);
-  --jd-color-red: rgb(255 59 59);
-  --jd-color-blue: rgb(181 214 253);
-  --jd-color-light-blue: rgb(181 214 253 / 50%);
-  --jd-color-light-red: rgb(255 59 59 / 40%);
-  --jd-color-error: var(--jd-color-red);
-
-  /**
-   * Colors - Background
-   */
-  --jd-color-background-default: var(--jd-color-white);
-  --jd-color-background-light-gray: rgb(245 245 246);
-  --jd-color-background-gray: var(--jd-color-gray);
-  --jd-color-background-gray-hover: rgb(248 248 248);
-  --jd-color-background-active: rgb(33 150 243);
-  --jd-color-background-button-hover: rgb(236 235 233);
-  --jd-color-background-button-hover-opacity30: rgb(234 234 234 / 30%);
-  --jd-color-background-button-hover-opacity40: rgb(219 219 219 / 40%);
-  --jd-color-background-button-hover-opacity60: rgb(219 219 219 / 60%);
-  --jd-color-background-filebrowser-folders: rgb(248 249 250);
-  --jd-color-background-progress: rgb(185 31 31);
-  --jd-color-background-selection: rgb(181 214 253);
-  --jd-color-background-selection-opacity50: rgb(181 214 253 / 99.5%);
-  --jd-color-panel: rgb(249 249 249);
-  --jd-color-source-area: rgb(50 50 50);
-  --jd-info-background: rgb(233 233 233);
-
-  /**
-   * Colors - Border
-   */
-  --jd-color-border: var(--jd-color-gray);
-  --jd-color-border-dark: var(--jd-color-dark);
-  --jd-color-border-active: rgb(181 181 181);
-  --jd-color-border-selected: rgb(30 136 229);
-  --jd-color-separator: var(--jd-color-border);
-  --jd-color-resizer: rgb(200 200 200);
-
-  /**
-   * Colors - Text
-   */
-  --jd-color-text: rgb(34 34 34);
-  --jd-color-text-icons: rgb(0 0 0 / 75%);
-  --jd-color-text-selection: var(--jd-color-white);
-  --jd-color-icon: var(--jd-color-dark);
-  --jd-color-label: var(--jd-color-gray-dark);
-  --jd-color-placeholder: var(--jd-color-gray-dark);
-  --jd-color-folder-title: rgb(177 177 177);
-  --jd-color-selection: var(--jd-color-dark);
-
-  /**
-   * Colors - Button
-   */
-  --jd-color-button-background-hover: rgb(220 220 220);
-  --jd-color-button-background-hover-opacity40: rgb(219 219 219 / 40%);
-  --jd-color-button-background-hover-opacity60: rgb(219 219 219 / 60%);
-
-  /**
-   * Colors - Selection
-   */
-  --jd-color-selection-area: rgb(189 189 189);
-  --jd-color-table-cell-background-hover: rgb(0 0 0 / 5%);
-
-  /**
-   * Colors - Dark mode
-   */
-  --jd-dark-background-color: rgb(87 87 87);
-  --jd-dark-background-darknes: rgb(53 53 53);
-  --jd-dark-background-ligher: rgb(192 192 192);
-  --jd-dark-border-color: rgb(68 68 68);
-  --jd-dark-color-border-selected: rgb(21 47 95);
-  --jd-dark-icon-color: rgb(192 192 192);
-  --jd-dark-text-color: rgb(209 204 204);
-  --jd-dark-text-color-opacity50: rgb(206 206 206 / 50%);
-  --jd-dark-text-color-opacity80: rgb(206 206 206 / 80%);
-  --jd-dark-toolbar-color: rgb(95 92 92);
-  --jd-dark-toolbar-seperator-color1: rgb(81 81 81 / 41%);
-  --jd-dark-toolbar-seperator-color2: rgb(104 103 103);
-  --jd-dark-toolbar-seperator-color3: rgb(105 105 105 / 75%);
-  --jd-dark-toolbar-seperator-color-opacity80: rgb(105 105 105 / 80%);
-
-  /**
-   * Colors - Special
-   */
-  --jd-color-picker-cell-size: 2.4rem;
-  --jd-image-editor-resizer-border-color: rgb(5 255 0);
-  --jd-image-editor-resizer-target-bg-color: rgb(140 120 120);
-  --jd-image-editor-resizer-target-border-color: rgb(56 56 56);
-  --jd-resizer-border-color: rgb(152 193 241);
-  --jd-resizer-handle-color: rgb(91 164 243);
-  --jd-resizer-handle-hover-color: rgb(83 126 187);
-
-  /**
-   * Colors - Em (Alert/Message)
-   */
-  --jd-em-color-bg: rgb(207 226 255);
-  --jd-em-color-border: rgb(182 212 254);
-  --jd-em-color-color: rgb(8 66 152);
-
-  /**
-   * Sizes - Buttons
-   */
-  --jd-button-icon-size: 1.4rem;
-  --jd-button-trigger-size: 1.4rem;
-  --jd-button-df-size: calc((var(--jd-button-icon-size) - 0.4rem) * 2);
-  --jd-button-size: calc(var(--jd-button-icon-size) + var(--jd-button-df-size) + var(--jd-margin-v) * 2);
-
-  /**
-   * Sizes - Icons
-   */
-  --jd-icon-size: 1.2rem;
-  --jd-icon-loader-size: 4.8rem;
-
-  /**
-   * Sizes - Height
-   */
-  --jd-height: 1.8rem;
-  --jd-height-element-default: 1.8rem;
-  --jd-height-search: 3rem;
-  --jd-input-height: 3.2rem;
-  --jd-switche-height: 3.2rem;
-  --jd-viewer-height: 2.4rem;
-
-  /**
-   * Sizes - Width
-   */
-  --jd-width-default: 18rem;
-  --jd-width-element-default: 1.8rem;
-  --jd-width-input-min: var(--jd-width-default);
-  --jd-width-search: 32rem;
-  --jd-width-search-count-box: 15%;
-  --jd-width-search-input-box: 60%;
-  --jd-viewer-width: 7rem;
-  --jd-switche-width: 6rem;
-  --jd-col-size: 15rem;
-  --jd-first-column: 31%;
-  --jd-image-editor-resizer-target-size: padding-default;
-
-  /**
-   * Sizes - Spacing
-   */
-  --jd-padding-default: 0.8rem;
-  --jd-margin-v: 0.2rem;
-  --jd-switche-slider-margin: 0.4rem;
-  --jd-em-padding: calc(1rem / 2) 1rem;
-
-  /**
-   * Sizes - Other
-   */
-  --jd-resizer-handle-size: 1rem;
-  --jd-switche-slider-size: calc(var(--jd-switche-height) - var(--jd-switche-slider-margin) * 2);
-  --jd-cols: 4;
-
-  /**
-   * Border and radius
-   */
-  --jd-border-radius-default: 0.3rem;
-  --jd-em-border-radius: 0.375rem;
-
-  /**
-   * Font
-   */
-  --jd-font-default: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
-  --jd-font-size-default: 1.4rem;
-  --jd-font-size-small: 1.1rem;
-  --jd-em-font-size: 1rem;
-
-  /**
-   * Shadow
-   */
-  --jd-box-shadow-1: 0 0.8rem 1.6rem rgb(0 0 0 / 19%);
-  --jd-box-shadow-blur: 1.6rem;
-  --jd-box-shadow-tabs: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
-  --jd-popup-box-shadow: 0 0.4rem 0.1rem -0.2rem rgb(76 76 76 / 20%), 0 0.3rem 0.3rem 0 rgb(76 76 76 / 15%), 0 0.1rem 0.4rem 0 rgb(76 76 76 / 13%);
-  --jd-popup-max-height: max(50vh, 35rem);
-  --jd-focus-input-box-shadow: 0 0 0 0.05rem rgb(0 123 255 / 25%);
-
-  /**
-   * Z-index
-   */
-  --jd-z-index-dialog: 20000004;
-  --jd-z-index-dialog-overlay: 20000003;
-  --jd-z-index-popup: 10000001;
-  --jd-z-index-full-size: 100000;
-  --jd-z-index-context-menu: 30000005;
-  --jd-z-index-tooltip: 30000006;
-
-  /**
-   * Animation and transition
-   */
-  --jd-anl-color-new-line: var(--jd-color-border);
-  --jd-anl-handle-offset: calc(100% - var(--jd-anl-handle-size));
-  --jd-anl-handle-size: 2rem;
-  --jd-timeout-button-active: 0.1s;
-  --jd-transform-button-active: 0.95;
-
-  /**
-   * Tooltip
-   */
-  --jd-tooltip-color: rgb(255 255 255);
-  --jd-tooltip-background-color: rgb(0 0 0 / 70%);
-  --jd-tooltip-sfx-shadow: rgb(0 0 0 / 15%);
-  --jd-tooltip-border-width: 0;
-  --jd-tooltip-border-color: rgb(229 229 229);
-}