@mgdis/mg-components 6.21.0 → 6.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-CCsGMNyq.js → index-BxB20_Vw.js} +8 -0
- package/dist/cjs/index-C2viYwrR.js +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_37.cjs.entry.js +116 -137
- package/dist/cjs/mg-alert.cjs.entry.js +1 -1
- package/dist/cjs/mg-breadcrumb.cjs.entry.js +63 -0
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-fieldset.cjs.entry.js +1 -1
- package/dist/cjs/mg-input-combobox.cjs.entry.js +3 -3
- package/dist/cjs/mg-input-file.cjs.entry.js +3 -3
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +40071 -15808
- package/dist/cjs/mg-loader.cjs.entry.js +2 -2
- package/dist/cjs/mg-progress.cjs.entry.js +1 -1
- package/dist/collection/assets/icons/index.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +1 -1
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +2 -2
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +212 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.js +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +300 -94
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.js +29 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +160 -50
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +3 -36
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.conf.js +0 -4
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +21 -43
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +65 -38
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -1
- package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.js +1 -0
- package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js +92 -0
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-table/mg-table.js +37 -0
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js +0 -4
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +13 -33
- package/dist/collection/locales/en/messages.json +3 -0
- package/dist/collection/locales/fr/messages.json +3 -0
- package/dist/components/index3.js +1 -1
- package/dist/components/mg-action-more.js +1 -1
- package/dist/components/mg-breadcrumb.d.ts +11 -0
- package/dist/components/mg-breadcrumb.js +1 -0
- package/dist/components/mg-card2.js +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-divider2.js +1 -1
- package/dist/components/mg-fieldset.js +1 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-icon2.js +1 -1
- package/dist/components/mg-illustrated-message.js +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +1 -1
- package/dist/components/mg-input-checkbox.js +1 -1
- package/dist/components/mg-input-combobox.js +1 -1
- package/dist/components/mg-input-date.js +1 -1
- package/dist/components/mg-input-file.js +1 -1
- package/dist/components/mg-input-numeric.js +1 -1
- package/dist/components/mg-input-password.js +1 -1
- package/dist/components/mg-input-radio.js +1 -1
- package/dist/components/mg-input-rich-text-editor.js +1663 -1
- package/dist/components/mg-input-select2.js +1 -1
- package/dist/components/mg-input-text2.js +1 -1
- package/dist/components/mg-input-textarea.js +1 -1
- package/dist/components/mg-input-title2.js +1 -1
- package/dist/components/mg-input-toggle.js +1 -1
- package/dist/components/mg-input2.js +1 -1
- package/dist/components/mg-item-more2.js +1 -1
- package/dist/components/mg-loader2.js +1 -1
- package/dist/components/mg-menu-item2.js +1 -1
- package/dist/components/mg-message2.js +1 -1
- package/dist/components/mg-modal.js +1 -1
- package/dist/components/mg-panel.js +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover2.js +1 -1
- package/dist/components/mg-progress.js +1 -1
- package/dist/components/mg-skip-links.js +1 -1
- package/dist/components/mg-table.js +1 -1
- package/dist/components/mg-tabs2.js +1 -1
- package/dist/components/mg-tag.js +1 -1
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/esm/index-DFwaH2hS.js +4 -0
- package/dist/esm/{index-D-uaxCxH.js → index-DSEloqPn.js} +8 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_37.entry.js +116 -137
- package/dist/esm/mg-alert.entry.js +1 -1
- package/dist/esm/mg-breadcrumb.entry.js +61 -0
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-fieldset.entry.js +1 -1
- package/dist/esm/mg-input-combobox.entry.js +3 -3
- package/dist/esm/mg-input-file.entry.js +3 -3
- package/dist/esm/mg-input-rich-text-editor.entry.js +40057 -15794
- package/dist/esm/mg-loader.entry.js +2 -2
- package/dist/esm/mg-progress.entry.js +1 -1
- package/dist/mg-components/locales/en/messages.json +3 -0
- package/dist/mg-components/locales/fr/messages.json +3 -0
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-0482eb9f.entry.js +1 -0
- package/dist/mg-components/{p-6b57f249.entry.js → p-2ee92f38.entry.js} +1 -1
- package/dist/mg-components/{p-c3d116b9.entry.js → p-3b653226.entry.js} +1 -1
- package/dist/mg-components/{p-dd1934f4.entry.js → p-5745fbea.entry.js} +1 -1
- package/dist/mg-components/p-DSEloqPn.js +1 -0
- package/dist/mg-components/{p-988c282e.entry.js → p-adec7fcc.entry.js} +1 -1
- package/dist/mg-components/p-c63f97f0.entry.js +1658 -0
- package/dist/mg-components/{p-4175dcbe.entry.js → p-c8c8cfc1.entry.js} +1 -1
- package/dist/mg-components/{p-6b655830.entry.js → p-cc793586.entry.js} +1 -1
- package/dist/mg-components/p-d5e69c95.entry.js +1 -0
- package/dist/types/assets/icons/index.d.ts +2 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts +17 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/index.d.ts +27 -19
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.d.ts +3 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +48 -14
- package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts +0 -5
- package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.d.ts +1 -6
- package/dist/types/components/molecules/menus/mg-menu/mg-menu.conf.d.ts +2 -10
- package/dist/types/components/molecules/menus/mg-menu/mg-menu.d.ts +7 -7
- package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts +12 -8
- package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.d.ts +18 -0
- package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.d.ts +34 -0
- package/dist/types/components/molecules/mg-table/mg-table.d.ts +6 -0
- package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +1 -9
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +4 -4
- package/dist/types/components.d.ts +93 -38
- package/ide/intellij/web-types.json +139 -51
- package/ide/vscode/css-custom-data.json +10 -2
- package/ide/vscode/html-custom-data.json +111 -32
- package/package.json +20 -19
- package/dist/mg-components/p-08fa327b.entry.js +0 -1
- package/dist/mg-components/p-D-uaxCxH.js +0 -1
- package/dist/mg-components/p-a79b1f19.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r,h as s,H as
|
|
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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,a as s}from"./p-DFwaH2hS.js";import{C as r,b as o,t as a,i as n,c as h}from"./p-C7xjtdiw.js";import{l,i as p}from"./p-D-uaxCxH.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(o(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: ${a(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){a(i)!==a(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:"3bcbf416c083d857aac2ad556bb2a218fe9ef82f",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:"88fafc6fd4a84c05a545c0083193e2ee0db54bfb",class:"mg-c-input__file-container"},e("input",{key:"ad1d14bc95390d5db56191ebff0d092ed5478183",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:"ace59bb90e27f924ce85e96abd277e752c75b6b8",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}
|
|
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}
|
|
@@ -0,0 +1 @@
|
|
|
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}
|
|
@@ -27,7 +27,7 @@ interface InputBaseMethods {
|
|
|
27
27
|
/**
|
|
28
28
|
* Possible Input types
|
|
29
29
|
*/
|
|
30
|
-
export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | HTMLMgInputFileElement | (HTMLMgInputToggleElement & InputBaseMethods);
|
|
30
|
+
export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputRichTextEditorElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | HTMLMgInputFileElement | (HTMLMgInputToggleElement & InputBaseMethods);
|
|
31
31
|
/**
|
|
32
32
|
* Is HTMLMgInputElement an HTMLMgInputFileElement
|
|
33
33
|
* @param input - input element
|
package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { IJodit, ButtonsOption } from 'jodit/esm/types';
|
|
2
|
+
/**
|
|
3
|
+
* Configuration options for defineEditor function
|
|
4
|
+
* Combines component-specific options with Jodit configuration
|
|
5
|
+
*/
|
|
6
|
+
export type DefineEditorConfig = {
|
|
7
|
+
value: string;
|
|
8
|
+
readOnly?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
modules: ButtonsOption;
|
|
12
|
+
rows?: number;
|
|
13
|
+
handleTextChange: () => void;
|
|
14
|
+
handleFocus: () => void;
|
|
15
|
+
handleBlur: () => void;
|
|
16
|
+
};
|
|
17
|
+
export type { IJodit, ButtonsOption };
|
|
@@ -1,21 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import 'jodit/esm/plugins/select/select.js';
|
|
2
|
+
import 'jodit/esm/plugins/resizer/resizer.js';
|
|
3
|
+
import 'jodit/esm/plugins/table/table.js';
|
|
4
|
+
import 'jodit/esm/plugins/select-cells/select-cells.js';
|
|
5
|
+
import 'jodit/esm/plugins/resize-cells/resize-cells.js';
|
|
6
|
+
import 'jodit/esm/plugins/table-keyboard-navigation/table-keyboard-navigation.js';
|
|
7
|
+
import 'jodit/esm/plugins/inline-popup/inline-popup.js';
|
|
8
|
+
import 'jodit/esm/plugins/clean-html/clean-html.js';
|
|
9
|
+
import 'jodit/esm/plugins/delete/delete.js';
|
|
10
|
+
import 'jodit/esm/plugins/file/file.js';
|
|
11
|
+
import 'jodit/esm/plugins/print/print.js';
|
|
12
|
+
import 'jodit/esm/plugins/source/source.js';
|
|
13
|
+
import type { DefineEditorConfig, IJodit } from './editor.conf';
|
|
12
14
|
/**
|
|
13
|
-
*
|
|
14
|
-
* -
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* @returns Quill instance
|
|
15
|
+
* Converts rows count to Jodit editor min-height CSS value.
|
|
16
|
+
* Uses CSS variables --mg-b-font-size and --mg-b-line-height to compute height.
|
|
17
|
+
* @param rows - Number of rows
|
|
18
|
+
* @returns Height as CSS value in pixels (wysiwyg area + toolbar height of 40px + 2px borders)
|
|
19
|
+
* @throws If required CSS variables (--mg-b-font-size, --mg-b-line-height) are missing
|
|
19
20
|
*/
|
|
20
|
-
export declare const
|
|
21
|
-
|
|
21
|
+
export declare const rowsToEditorHeight: (rows: number) => string;
|
|
22
|
+
/**
|
|
23
|
+
* Configures Jodit editor
|
|
24
|
+
* @param element - Component element (HTMLMgInputRichTextEditorElement)
|
|
25
|
+
* @param editorElement - Textarea element for the editor
|
|
26
|
+
* @param config - Editor configuration options
|
|
27
|
+
* @returns Configured Jodit editor instance
|
|
28
|
+
*/
|
|
29
|
+
export declare const defineEditor: (element: HTMLMgInputRichTextEditorElement, editorElement: HTMLTextAreaElement, config: DefineEditorConfig) => IJodit;
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../../stencil-public-runtime';
|
|
2
2
|
import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
|
|
3
3
|
import { type TooltipPosition } from '../mg-input/mg-input.conf';
|
|
4
|
-
import { type
|
|
4
|
+
import { type SanitizerOptions } from '@mgdis/sanitize-html';
|
|
5
|
+
import type { ButtonsOption } from './editor/editor.conf';
|
|
5
6
|
export declare class MgInputRichTextEditor {
|
|
6
7
|
/************
|
|
7
8
|
* Internal *
|
|
8
9
|
************/
|
|
9
10
|
private editor;
|
|
10
|
-
private
|
|
11
|
+
private editorElement;
|
|
12
|
+
private currentTitleElement;
|
|
13
|
+
private sanitizer;
|
|
11
14
|
private messages;
|
|
12
15
|
private hasDisplayedError;
|
|
13
16
|
private customErrorMessage;
|
|
@@ -27,6 +30,11 @@ export declare class MgInputRichTextEditor {
|
|
|
27
30
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
28
31
|
*/
|
|
29
32
|
identifier: string;
|
|
33
|
+
/**
|
|
34
|
+
* Input name
|
|
35
|
+
* If not set the value equals the identifier
|
|
36
|
+
*/
|
|
37
|
+
name: string;
|
|
30
38
|
/**
|
|
31
39
|
* Input label
|
|
32
40
|
*/
|
|
@@ -45,7 +53,8 @@ export declare class MgInputRichTextEditor {
|
|
|
45
53
|
*/
|
|
46
54
|
placeholder?: string;
|
|
47
55
|
/**
|
|
48
|
-
* Define the number of visible text lines for the
|
|
56
|
+
* Define the number of visible text lines for the editor.
|
|
57
|
+
* Impacts the editor height. Content can grow beyond this minimum.
|
|
49
58
|
*/
|
|
50
59
|
rows: number;
|
|
51
60
|
/**
|
|
@@ -86,9 +95,28 @@ export declare class MgInputRichTextEditor {
|
|
|
86
95
|
*/
|
|
87
96
|
helpText?: string;
|
|
88
97
|
/**
|
|
89
|
-
* Editor modules configuration
|
|
90
|
-
|
|
91
|
-
|
|
98
|
+
* Editor modules configuration.
|
|
99
|
+
* Must be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).
|
|
100
|
+
* Use `|` for a separator/divider in the toolbar.
|
|
101
|
+
* Available modules:
|
|
102
|
+
* - **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`
|
|
103
|
+
* - **Lists**: `ul` (unordered list), `ol` (ordered list)
|
|
104
|
+
* - **Text positioning**: `superscript`, `subscript`
|
|
105
|
+
* - **Colors**: `brush` (text color/background)
|
|
106
|
+
* - **Media**: `link`, `image`, `file`
|
|
107
|
+
* - **Tables**: `table`
|
|
108
|
+
* - **History**: `undo`, `redo`
|
|
109
|
+
* - **Other**: `print`, `source` (HTML source editor)
|
|
110
|
+
*/
|
|
111
|
+
modules?: ButtonsOption;
|
|
112
|
+
watchModules(newValue: MgInputRichTextEditor['modules']): void;
|
|
113
|
+
/**
|
|
114
|
+
* Sanitizer configuration in native format.
|
|
115
|
+
* Use disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).
|
|
116
|
+
* Use "*" as tag key to disallow attributes on all tags.
|
|
117
|
+
*/
|
|
118
|
+
sanitizerOptions?: SanitizerOptions;
|
|
119
|
+
watchSanitizerOptions(newValue: MgInputRichTextEditor['sanitizerOptions']): void;
|
|
92
120
|
/**
|
|
93
121
|
* Define input valid state
|
|
94
122
|
*/
|
|
@@ -118,8 +146,8 @@ export declare class MgInputRichTextEditor {
|
|
|
118
146
|
*/
|
|
119
147
|
setFocus(): Promise<void>;
|
|
120
148
|
/**
|
|
121
|
-
* Get editor content
|
|
122
|
-
* @returns HTML content of the editor
|
|
149
|
+
* Get editor content as HTML
|
|
150
|
+
* @returns HTML content of the editor (sanitized)
|
|
123
151
|
*/
|
|
124
152
|
getEditorHTML(): Promise<string>;
|
|
125
153
|
/**
|
|
@@ -150,11 +178,6 @@ export declare class MgInputRichTextEditor {
|
|
|
150
178
|
* @returns truthy is value is invalid
|
|
151
179
|
*/
|
|
152
180
|
private isEmpty;
|
|
153
|
-
/**
|
|
154
|
-
* Extract the text without HTML tags from value
|
|
155
|
-
* @returns text content
|
|
156
|
-
*/
|
|
157
|
-
private getTextContent;
|
|
158
181
|
/**
|
|
159
182
|
* Get pattern validity
|
|
160
183
|
* @returns is pattern valid
|
|
@@ -187,6 +210,10 @@ export declare class MgInputRichTextEditor {
|
|
|
187
210
|
* Handle `text-change` event
|
|
188
211
|
*/
|
|
189
212
|
private handleTextChange;
|
|
213
|
+
/**
|
|
214
|
+
* Initialize sanitizer with current sanitizerOptions
|
|
215
|
+
*/
|
|
216
|
+
private initializeSanitizer;
|
|
190
217
|
/*************
|
|
191
218
|
* Lifecycle *
|
|
192
219
|
*************/
|
|
@@ -196,9 +223,16 @@ export declare class MgInputRichTextEditor {
|
|
|
196
223
|
*/
|
|
197
224
|
componentWillLoad(): ReturnType<typeof setTimeout>;
|
|
198
225
|
/**
|
|
199
|
-
*
|
|
226
|
+
* Add listeners and render editor element
|
|
200
227
|
*/
|
|
201
228
|
componentDidLoad(): void;
|
|
229
|
+
/**
|
|
230
|
+
* Re-apply accessibility attributes after re-renders.
|
|
231
|
+
* When state changes (disabled, readonly, etc.) trigger a re-render,
|
|
232
|
+
* mg-input's renderLabel() may destroy and recreate mg-input-title,
|
|
233
|
+
* which loses the id and click handler needed for aria-labelledby.
|
|
234
|
+
*/
|
|
235
|
+
componentDidRender(): void;
|
|
202
236
|
/**
|
|
203
237
|
* Render
|
|
204
238
|
* @returns HTML mg-input Element
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { MgMenu } from '../../menus/mg-menu/mg-menu';
|
|
2
1
|
import type { MgIcon } from '../../../atoms/mg-icon/mg-icon';
|
|
3
2
|
/**
|
|
4
3
|
* SlotLabel prop type
|
|
@@ -11,7 +10,3 @@ export type SlotLabelType = {
|
|
|
11
10
|
* icon prop type
|
|
12
11
|
*/
|
|
13
12
|
export type IconType = Pick<MgIcon, 'icon'>;
|
|
14
|
-
/**
|
|
15
|
-
* size type
|
|
16
|
-
*/
|
|
17
|
-
export type SizeType = MgMenu['size'];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { IconType,
|
|
1
|
+
import type { IconType, SlotLabelType } from './mg-item-more.conf';
|
|
2
2
|
/**
|
|
3
3
|
* @internal
|
|
4
4
|
*/
|
|
@@ -27,11 +27,6 @@ export declare class MgItemMore {
|
|
|
27
27
|
*/
|
|
28
28
|
slotlabel?: SlotLabelType;
|
|
29
29
|
validateSlotLabel(newValue: MgItemMore['slotlabel']): void;
|
|
30
|
-
/**
|
|
31
|
-
* Define component child menu size.
|
|
32
|
-
*/
|
|
33
|
-
size?: SizeType;
|
|
34
|
-
validateSize(newValue: MgItemMore['size']): void;
|
|
35
30
|
/**
|
|
36
31
|
* Define component parent menu.
|
|
37
32
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Direction } from '../../../../types';
|
|
2
2
|
import type { MgItemMore } from '../../internals/mg-item-more/mg-item-more';
|
|
3
3
|
/**
|
|
4
4
|
* Menu direction values
|
|
@@ -7,12 +7,4 @@ export declare const directions: Record<string, Direction>;
|
|
|
7
7
|
/**
|
|
8
8
|
* ItemMore prop type
|
|
9
9
|
*/
|
|
10
|
-
export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel'
|
|
11
|
-
/**
|
|
12
|
-
* List of all possibles sizes
|
|
13
|
-
*/
|
|
14
|
-
export declare const sizes: readonly ["medium", "large", "xlarge"];
|
|
15
|
-
/**
|
|
16
|
-
* item Size from sizes
|
|
17
|
-
*/
|
|
18
|
-
export type MenuSizeType = Size & (typeof sizes)[number];
|
|
10
|
+
export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel'>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ItemMoreType } from './mg-menu.conf';
|
|
2
2
|
import { Direction } from '../../../../types';
|
|
3
3
|
/**
|
|
4
4
|
* @slot - Menu content
|
|
@@ -26,17 +26,17 @@ export declare class MgMenu {
|
|
|
26
26
|
*/
|
|
27
27
|
direction: Direction;
|
|
28
28
|
validateDirection(newValue: MgMenu['direction']): void;
|
|
29
|
+
/**
|
|
30
|
+
* Size of the menu items
|
|
31
|
+
* @deprecated this prop is deprecated and will be removed in future releases
|
|
32
|
+
*/
|
|
33
|
+
size: never;
|
|
29
34
|
/**
|
|
30
35
|
* Customize "mg-item-more" element
|
|
31
|
-
* Used with direction: '
|
|
36
|
+
* Used with direction: 'horizontal' to manage overflow
|
|
32
37
|
*/
|
|
33
38
|
itemmore?: ItemMoreType;
|
|
34
39
|
validateItemMore(newValue: MgMenu['itemmore']): void;
|
|
35
|
-
/**
|
|
36
|
-
* Define mg-menu size
|
|
37
|
-
*/
|
|
38
|
-
size: MenuSizeType;
|
|
39
|
-
validateSize(newValue: MgMenu['size']): void;
|
|
40
40
|
/**
|
|
41
41
|
* Define mg-menu-item listener when they are loaded
|
|
42
42
|
* @param event - mg-item-loaded "item-loaded" custom event
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../../stencil-public-runtime';
|
|
2
2
|
import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
|
|
3
|
-
import { type MenuSizeType } from '../mg-menu/mg-menu.conf';
|
|
4
3
|
import { type MgMenuStatusType, type TargetType } from './mg-menu-item.conf';
|
|
5
4
|
import { Direction } from '../../../../types';
|
|
6
5
|
/**
|
|
@@ -15,7 +14,7 @@ export declare class MgMenuItem {
|
|
|
15
14
|
* Internal *
|
|
16
15
|
************/
|
|
17
16
|
private readonly name;
|
|
18
|
-
private readonly
|
|
17
|
+
private readonly classNavigationButton;
|
|
19
18
|
private messages;
|
|
20
19
|
private popoverIdentifier;
|
|
21
20
|
/**************
|
|
@@ -48,6 +47,11 @@ export declare class MgMenuItem {
|
|
|
48
47
|
*/
|
|
49
48
|
status?: MgMenuStatusType;
|
|
50
49
|
watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
|
|
50
|
+
/**
|
|
51
|
+
* Define menu-item isIcon style.
|
|
52
|
+
*/
|
|
53
|
+
isIcon?: boolean;
|
|
54
|
+
watchIsIcon(newValue: MgMenuItem['isIcon']): void;
|
|
51
55
|
/**
|
|
52
56
|
* Define menu-item content expanded.
|
|
53
57
|
*/
|
|
@@ -67,15 +71,10 @@ export declare class MgMenuItem {
|
|
|
67
71
|
/**********
|
|
68
72
|
* States *
|
|
69
73
|
*********/
|
|
70
|
-
/**
|
|
71
|
-
* Define menu-item size.
|
|
72
|
-
*/
|
|
73
|
-
size: MenuSizeType;
|
|
74
|
-
watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
|
|
75
74
|
/**
|
|
76
75
|
* Component button classes
|
|
77
76
|
*/
|
|
78
|
-
|
|
77
|
+
classNavigationButtonClassList: ClassList;
|
|
79
78
|
/**
|
|
80
79
|
* Parent menu direction
|
|
81
80
|
*/
|
|
@@ -205,6 +204,11 @@ export declare class MgMenuItem {
|
|
|
205
204
|
* @returns promise process wich emit the 'item-updated' event
|
|
206
205
|
*/
|
|
207
206
|
componentShouldUpdate(): Promise<void>;
|
|
207
|
+
/**
|
|
208
|
+
* Render information slot or notification badge
|
|
209
|
+
* @returns HTML Element
|
|
210
|
+
*/
|
|
211
|
+
private renderInformationSlotOrNotification;
|
|
208
212
|
/**
|
|
209
213
|
* Render ineractive element
|
|
210
214
|
* @returns HTML Element
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { IconType } from '../../atoms/mg-icon/mg-icon.conf';
|
|
2
|
+
/**
|
|
3
|
+
* Breadcrumb item type
|
|
4
|
+
*/
|
|
5
|
+
export type BreadcrumbItemType = {
|
|
6
|
+
/** Displayed label (link text or current page text). Always required. */
|
|
7
|
+
label: string;
|
|
8
|
+
/**
|
|
9
|
+
* Link URL. If absent or empty, the item is rendered as current page (text only, no <a>).
|
|
10
|
+
* Last item typically has no href.
|
|
11
|
+
*/
|
|
12
|
+
href?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Icon name (mg-icon). If present, the link displays the icon instead of the text.
|
|
15
|
+
* The label is used as accessible text (aria-label or visually hidden content).
|
|
16
|
+
*/
|
|
17
|
+
icon?: IconType;
|
|
18
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { BreadcrumbItemType } from './mg-breadcrumb.conf';
|
|
2
|
+
export declare class MgBreadcrumb {
|
|
3
|
+
/************
|
|
4
|
+
* Internal *
|
|
5
|
+
************/
|
|
6
|
+
private messages;
|
|
7
|
+
/**************
|
|
8
|
+
* Decorators *
|
|
9
|
+
**************/
|
|
10
|
+
/**
|
|
11
|
+
* Get component DOM element
|
|
12
|
+
*/
|
|
13
|
+
element: HTMLMgBreadcrumbElement;
|
|
14
|
+
/**
|
|
15
|
+
* Breadcrumb items (hierarchical order: root → current page).
|
|
16
|
+
*/
|
|
17
|
+
items: BreadcrumbItemType[];
|
|
18
|
+
validateItems(newValue: MgBreadcrumb['items']): void;
|
|
19
|
+
/***********
|
|
20
|
+
* Methods *
|
|
21
|
+
**********/
|
|
22
|
+
/**
|
|
23
|
+
* Render a single breadcrumb item (link or current page)
|
|
24
|
+
* @param item - The breadcrumb item
|
|
25
|
+
* @param isLast - Whether this item is the last in the list
|
|
26
|
+
* @returns The rendered link or span element
|
|
27
|
+
*/
|
|
28
|
+
private renderItem;
|
|
29
|
+
/*************
|
|
30
|
+
* Lifecycle *
|
|
31
|
+
*************/
|
|
32
|
+
componentWillLoad(): void;
|
|
33
|
+
render(): HTMLElement;
|
|
34
|
+
}
|
|
@@ -11,6 +11,7 @@ export declare class MgTable {
|
|
|
11
11
|
private readonly componentClass;
|
|
12
12
|
private readonly componentWrapperClass;
|
|
13
13
|
private readonly classFullWidth;
|
|
14
|
+
private readonly classBorderHide;
|
|
14
15
|
private alignmentStylesheet;
|
|
15
16
|
/**************
|
|
16
17
|
* Decorators *
|
|
@@ -29,6 +30,11 @@ export declare class MgTable {
|
|
|
29
30
|
*/
|
|
30
31
|
fullWidth: boolean;
|
|
31
32
|
watchFullWidth(newValue: MgTable['fullWidth']): void;
|
|
33
|
+
/**
|
|
34
|
+
* Define if table has no outer border
|
|
35
|
+
*/
|
|
36
|
+
borderHide: boolean;
|
|
37
|
+
watchBorderHide(newValue: MgTable['borderHide']): void;
|
|
32
38
|
/**
|
|
33
39
|
* Define column properties
|
|
34
40
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Status as StatusType } from '../../../types';
|
|
2
2
|
import type { MgBadge } from '../../atoms/mg-badge/mg-badge';
|
|
3
3
|
import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
|
|
4
4
|
/**
|
|
@@ -17,11 +17,3 @@ export type TabItem = {
|
|
|
17
17
|
};
|
|
18
18
|
status: StatusType;
|
|
19
19
|
};
|
|
20
|
-
/**
|
|
21
|
-
* List of all possibles sizes
|
|
22
|
-
*/
|
|
23
|
-
export declare const sizes: readonly ["medium", "large"];
|
|
24
|
-
/**
|
|
25
|
-
* Variant type from variants
|
|
26
|
-
*/
|
|
27
|
-
export type SizeType = Size & (typeof sizes)[number];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
2
|
import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
|
|
3
|
-
import { TabItem
|
|
3
|
+
import { TabItem } from './mg-tabs.conf';
|
|
4
4
|
/**
|
|
5
5
|
* @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.
|
|
6
6
|
*/
|
|
@@ -32,10 +32,10 @@ export declare class MgTabs {
|
|
|
32
32
|
label: string;
|
|
33
33
|
validateLabel(newValue: MgTabs['label']): void;
|
|
34
34
|
/**
|
|
35
|
-
*
|
|
35
|
+
* Size of the tabs items.
|
|
36
|
+
* @deprecated this prop is deprecated and will be removed in future releases. Please use CSS custom properties to set the size of tabs items.
|
|
36
37
|
*/
|
|
37
|
-
size:
|
|
38
|
-
validateSize(newValue: MgTabs['size']): void;
|
|
38
|
+
size: never;
|
|
39
39
|
/**
|
|
40
40
|
* Tabs items
|
|
41
41
|
*/
|