@mgdis/mg-components 6.15.0 → 6.17.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/events.utils-D5SAtkpQ.js +25 -0
- package/dist/cjs/{index-BGxkpQwi.js → index-DCZEYvlH.js} +48 -29
- package/dist/cjs/{index-iUZvsp-F.js → index-TUElr4Wv.js} +18 -30
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_37.cjs.entry.js +100 -365
- package/dist/cjs/mg-alert.cjs.entry.js +2 -2
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-input-combobox.cjs.entry.js +78 -140
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +4 -4
- package/dist/cjs/{mg-input.conf-CwjEAih3.js → mg-input.conf-WTsvDfpC.js} +0 -7
- package/dist/cjs/mg-loader.cjs.entry.js +2 -2
- package/dist/cjs/mg-progress.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +5 -5
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +7 -7
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +6 -6
- package/dist/collection/components/atoms/mg-button/mg-button.js +13 -13
- package/dist/collection/components/atoms/mg-card/mg-card.js +2 -2
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +32 -26
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +3 -3
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +2 -2
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +6 -6
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +0 -6
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +37 -108
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +1 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +6 -8
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +42 -99
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +82 -167
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +27 -44
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +40 -55
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +26 -26
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +32 -86
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +26 -27
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +33 -82
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +33 -34
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +32 -32
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +27 -161
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +2 -4
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +4 -5
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +7 -7
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -4
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +4 -4
- package/dist/collection/components/molecules/mg-details/mg-details.js +6 -6
- package/dist/collection/components/molecules/mg-form/mg-form.js +13 -13
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +2 -2
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +3 -3
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +6 -6
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +7 -8
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +13 -13
- 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 +6 -6
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +6 -6
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +0 -1
- package/dist/collection/components/molecules/mg-table/mg-table.js +2 -3
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +6 -7
- package/dist/collection/locales/en/messages.json +8 -13
- package/dist/collection/locales/fr/messages.json +8 -13
- package/dist/components/index2.js +1 -1
- package/dist/components/index3.js +18 -30
- package/dist/components/mg-action-more.js +4 -2
- package/dist/components/mg-alert.js +4 -2
- package/dist/components/mg-badge2.js +4 -2
- package/dist/components/mg-button2.js +4 -2
- package/dist/components/mg-card2.js +4 -2
- package/dist/components/mg-character-left2.js +4 -2
- package/dist/components/mg-details.js +99 -1
- package/dist/components/mg-divider2.js +4 -2
- package/dist/components/mg-form.js +4 -2
- package/dist/components/mg-icon2.js +29 -21
- package/dist/components/mg-illustrated-message.js +4 -2
- package/dist/components/mg-input-checkbox-paginated2.js +6 -7
- package/dist/components/mg-input-checkbox.js +23 -65
- package/dist/components/mg-input-combobox.js +64 -132
- package/dist/components/mg-input-date.js +8 -29
- package/dist/components/mg-input-numeric.js +8 -27
- package/dist/components/mg-input-password.js +6 -10
- package/dist/components/mg-input-radio.js +16 -55
- package/dist/components/mg-input-rich-text-editor.js +6 -10
- package/dist/components/mg-input-select2.js +12 -46
- package/dist/components/mg-input-text2.js +6 -10
- package/dist/components/mg-input-textarea.js +6 -10
- package/dist/components/mg-input-title2.js +4 -2
- package/dist/components/mg-input-toggle.js +15 -98
- package/dist/components/mg-input2.js +26 -101
- package/dist/components/mg-item-more2.js +8 -4
- package/dist/components/mg-loader2.js +4 -2
- package/dist/components/mg-menu-item2.js +4 -2
- package/dist/components/mg-message2.js +4 -2
- package/dist/components/mg-modal.js +4 -2
- package/dist/components/mg-pagination.js +6 -10
- package/dist/components/mg-panel.js +11 -15
- package/dist/components/mg-popover-content2.js +4 -2
- package/dist/components/mg-popover2.js +4 -2
- package/dist/components/mg-progress.js +4 -2
- package/dist/components/mg-skip-links.js +4 -2
- package/dist/components/mg-table.js +4 -2
- package/dist/components/mg-tabs2.js +4 -2
- package/dist/components/mg-tag.js +4 -2
- package/dist/components/mg-tooltip-content2.js +4 -2
- package/dist/components/mg-tooltip2.js +4 -2
- package/dist/esm/events.utils-yMGqY8YG.js +23 -0
- package/dist/esm/{index-CKB-AnCZ.js → index-CNX6lq0x.js} +18 -30
- package/dist/esm/{index-DhAOnZJn.js → index-T6kOJXP1.js} +48 -29
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_37.entry.js +96 -361
- package/dist/esm/mg-alert.entry.js +2 -2
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-input-combobox.entry.js +59 -121
- package/dist/esm/mg-input-rich-text-editor.entry.js +4 -4
- package/dist/esm/{mg-input.conf-BAUTlb6r.js → mg-input.conf-CNgv8hc5.js} +1 -7
- 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 +8 -13
- package/dist/mg-components/locales/fr/messages.json +8 -13
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-47e19783.entry.js → p-0e6b40d6.entry.js} +1 -1
- package/dist/mg-components/{p-67af6274.entry.js → p-397bf67b.entry.js} +1 -1
- package/dist/mg-components/{p-a0fa44cf.entry.js → p-5dc3a1fb.entry.js} +1 -1
- package/dist/mg-components/p-8a69175b.entry.js +1 -0
- package/dist/mg-components/p-CNX6lq0x.js +1 -0
- package/dist/mg-components/p-CNgv8hc5.js +1 -0
- package/dist/mg-components/p-T6kOJXP1.js +2 -0
- package/dist/mg-components/{p-420daa1e.entry.js → p-c5da335e.entry.js} +1 -1
- package/dist/mg-components/p-d84d87ea.entry.js +1 -0
- package/dist/mg-components/p-yMGqY8YG.js +1 -0
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +0 -5
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +0 -13
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +4 -15
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +3 -21
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +2 -16
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +0 -18
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +0 -18
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +4 -40
- package/dist/types/components.d.ts +7 -63
- package/dist/types/stencil-public-runtime.d.ts +39 -2
- package/dist/types/types/index.d.ts +1 -1
- package/ide/intellij/web-types.json +23 -304
- package/ide/vscode/html-custom-data.json +18 -113
- package/package.json +22 -22
- package/dist/cjs/mg-input.utils-D-ASK4ua.js +0 -49
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.utils.js +0 -21
- package/dist/components/mg-details2.js +0 -99
- package/dist/components/mg-input.utils.js +0 -24
- package/dist/esm/mg-input.utils-BYI03zSi.js +0 -46
- package/dist/mg-components/p-31856cff.entry.js +0 -1
- package/dist/mg-components/p-698dfc6c.entry.js +0 -1
- package/dist/mg-components/p-BAUTlb6r.js +0 -1
- package/dist/mg-components/p-CKB-AnCZ.js +0 -1
- package/dist/mg-components/p-DhAOnZJn.js +0 -2
- package/dist/mg-components/p-PuX-pdL4.js +0 -1
- package/dist/types/components/molecules/inputs/mg-input/mg-input.utils.d.ts +0 -8
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,a as e}from"./p-DhAOnZJn.js";import{P as o,C as n,f as h,a,i as r,n as c,g as p,t as m,b as u,c as l,d as g}from"./p-WtiuOkLj.js";import{C as d,c as b,a as v,w as f}from"./p-BAUTlb6r.js";import{i as w}from"./p-CKB-AnCZ.js";import{K as _,d as x}from"./p-PuX-pdL4.js";const y=t=>t&&"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,z=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.classFocus="mg-u-is-focused",this.hasDisplayedError=!1,this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.options=new o([]),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=>h(i.value)===t.target.id))),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=()=>{this.popoverDisplay||(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:a.NEXT}).then((()=>{this.input.focus()}))},this.handleFilterKeydown=t=>{if(this.disabled||t.ctrlKey||t.shiftKey)return;let i=!1;switch(t.key){case _.TAB:case _.ENTER:i=t.key===_.ENTER;const s=this.option||this.options.items.find(this.isCurrentOption);this.popoverDisplay&&this.setValue(s),this.popoverDisplay=!1;break;case _.DOWN:case _.ARROWDOWN:case _.UP:case _.ARROWUP:if(i=!0,this.isLoading||!(this.page.total>0)){this.popoverDisplay=!0;break}if(Boolean(t.altKey)&&[_.DOWN,_.ARROWDOWN].includes(t.key)){this.popoverDisplay=!0;break}let e;const o=this.popoverDisplay&&y(this.option);[_.DOWN,_.ARROWDOWN].includes(t.key)?e=o?a.NEXT:a.FIRST:[_.UP,_.ARROWUP].includes(t.key)&&(e=o?a.PREVIOUS:a.LAST),this.loadingWrapper({name:"scroll",cursor:e}),this.popoverDisplay=!0;break;case _.LEFT:case _.ARROWLEFT:case _.HOME:case _.RIGHT:case _.ARROWRIGHT:case _.END:if(!y(this.option))break;let n;i=!0,this.option=null,_.HOME===t.key?n=0:_.END===t.key&&(n=this.filter.length),"number"==typeof n&&this.input.setSelectionRange(n,n);break;case _.ESC:case _.ESCAPE:i=!0,this.popoverDisplay?this.popoverDisplay=!1:(this.setValue(null),this.filter="",this.option=null);break;default:this.option=null}i&&(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=>(y(this.value)?this.value.value:this.value)===t.value,this.getValueTitle=()=>this.value&&y(this.value)?this.value.title:"string"==typeof this.value?this.value:"",this.hasNoValueError=()=>this.customError===d.NoValue,this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled)},this.setErrorMessage=()=>{this.errorMessage=void 0,this.valid||(void 0===this.customError||Object.values(d).includes(this.customError)?this.hasNoValueError()?this.errorMessage=this.messages.errors.noValue:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required):this.errorMessage=this.customError)},this.resetErrorMessage=()=>{this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1},this.optionsFilter=t=>""===this.filter||t.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()),this.loadingWrapper=t=>{let i,s;if(Boolean(this.loadingAction)||(this.loadingAction=t.name),Boolean(this.option)&&"load-more"!==this.loadingAction?s=this.page.items.findIndex((t=>t.value.toString()===this.option.value.toString())):"load-more"===this.loadingAction&&(s=this.page.items.length-this.page.baseIndex),"load-more"===t.name)this.isLoading=!0,i=this.goToNextPage;else{if(t.cursor===a.NEXT&&this.page.items.length<=this.page.total&&s+this.page.baseIndex===this.page.items.length&&s+this.page.baseIndex<this.page.total)return void this.loadMoreElement.click();i="scroll"===t.name?c:this.updatePage}return i().then((()=>{const i=this.options.items.filter(this.optionsFilter);"load-data"!==t.name&&(s=this.page.getIndexFromCursor(t.cursor,"load-more"===this.loadingAction&&s>=0?i[s]:this.option)),this.option=i[s],this.scrollToIndex(s)})).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(r(t)){const i=[...this.page.items,...t.items];this.options=new o(i,{total:t.total,next:t.next,top:i.length})}})):c((()=>{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]}))}}))),this.updatePage=async()=>{if(void 0!==this.fetchurl)return this.getOptions().then((t=>{r(t)&&(this.options=new o(t.items,{total:t.total,next:t.next,top:t.top}),0===this.filter.length&&0===t.total?this.displayError():this.invalid&&this.hasNoValueError()&&this.resetErrorMessage())}));this.page=this.options.getPage(0,this.optionsFilter)},this.getOptions=async(t=this.fetchurl)=>{const i=("string"==typeof t?t:t.toString()).replaceAll(this.fetchmappings.request.filter,encodeURIComponent(this.filter));try{const t=await fetch(i,this.fetchoptions);if(!t.ok)return this.fetchError.emit(new Error(`${t.status} - ${t.statusText}`)),void this.displayError();const s=await t.json(),e=[],o=p(s,this.fetchmappings.response.items,e).map((t=>({title:p(t,this.fetchmappings.response.itemTitle,"string"==typeof t?t:JSON.stringify(t)),value:p(t,this.fetchmappings.response.itemValue,t)}))),n=Number(p(s,this.fetchmappings.response.total,e.length));let h=p(s,this.fetchmappings.response.next);if(URL.canParse(i)&&Boolean(h)&&!URL.canParse(h)){const t=new URL(i);t.pathname.endsWith(h.split("?")[0])&&(h=new URL(h,t).toString())}return{items:o,total:n,next:h,top:o.length}}catch(t){this.fetchError.emit(t),this.displayError()}}}watchValue(t){this.filter=this.getValueTitle(),this.valueChange.emit(t)}watchItems(t){if([void 0,null].includes(this.fetchurl)||![void 0,null].includes(t)){if(![void 0,null].includes(this.fetchurl)&&Array.isArray(t))throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${m(t)}.`);if([void 0,null].includes(t)||Array.isArray(t)&&0===t.length)this.options=new o([]),this.displayError();else if(u(t))this.options=new o(t.map((t=>({title:t,value:t}))),{total:t.length}),this.invalid&&this.hasNoValueError()&&this.resetErrorMessage();else{if(i=t,!Array.isArray(i)||!i.every(y))throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${m(t)}.`);this.options=new o(t,{total:t.length}),this.invalid&&this.hasNoValueError()&&this.resetErrorMessage()}var i}}watchIdentifier(t){Boolean(t)&&(this.popoverId=`${t}-popover`,this.element.dataset.mgPopoverGuard=this.popoverId)}watchReadonly(t){t?this.classCollection.add(b):this.classCollection.delete(b)}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(v):this.classCollection.delete(v)}watchMgWidth(t){f.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){Boolean(t)&&this.loadingWrapper({name:"load-data"})}watchFetchOptions(t){if(this.fetchurl&&t&&!r(t))throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${m(t)}.`);new Request(this.fetchurl,t)}watchFetchMappings(t){if(Boolean(this.fetchurl)&&!Boolean(t))throw new Error('<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.');if(Boolean(t)&&!(t=>{const i=r(t)&&Object.hasOwn(t,"request")&&Object.hasOwn(t,"response");if(i){const{request:i,response:s}=t;return![i,s].some((t=>!r(t)))&&"string"==typeof i.filter&&"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: ${m(t)}.`)}watchOptions(t){this.page=t.getPage(0,this.filter.length>0?this.optionsFilter:void 0)}watchFilter(t){this.loadingWrapper({name:"load-data"}),this.filterChange.emit(t)}watchPopoverDisplay(t){t?(this.classCollection.add(this.classFocus),this.input.focus()):(this.option=null,this.filter=this.getValueTitle(),this.classCollection.delete(this.classFocus),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){if("boolean"!=typeof t)throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');if(!l(i))throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');this.setValidity(t,i),this.setErrorMessage(),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.setValue(null),this.option=null,this.filter="",new Promise((t=>{requestAnimationFrame((()=>{this.resetErrorMessage(),t()}))}))}setValue(t){this.value=y(t)?u(this.items||this.options.items)?t.title:Object.assign({},t):""}setValidity(t,i){var s;const e=this.valid;let o=t;o||void 0===this.input||(this.customError=void 0,l(i)?this.customError=i:0===(void 0===this.fetchurl?(null!==(s=this.items)&&void 0!==s?s:[]).length:this.page.total)&&(this.customError=d.NoValue),o=this.input.checkValidity()&&void 0===this.customError),this.valid=o,this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==e)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=w(this.element).messages,this.watchIdentifier(this.identifier),this.watchItems(this.items),Boolean(this.fetchurl)&&(this.watchFetchOptions(this.fetchoptions),this.watchFetchMappings(this.fetchmappings),this.loadingWrapper({name:"load-data"})),this.watchValue(this.value),this.watchOptions(this.options),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){var t,i,e,o,n,a;const r=`${this.identifier}-list`,c=this.getValueTitle(),p=this.value&&!this.disabled,m=this.disabled||this.hasNoValueError();let u,l;return(null===(t=this.page)||void 0===t?void 0:t.items.length)>0?u="list":0===(null===(i=this.page)||void 0===i?void 0:i.items.length)&&this.filter.length>0?u="notfound":0===(null===(e=this.page)||void 0===e?void 0:e.items.length)&&(u="notavailable"),l=[null,void 0].includes(null===(o=this.option)||void 0===o?void 0:o.value)?"string"==typeof this.value?this.value:null===(n=this.value)||void 0===n?void 0:n.value:this.option.value,s("mg-input",{key:"fa0977713a1150c39b4f989bbb139e0e345b4c5f",label:this.label,identifier:this.identifier,class:this.classCollection.classes.join(" "),ariaDescribedbyIDs:u&&"list"!==u?u: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:x(this.errorMessage,this.noValueErrorDetail)},this.readonly?c&&s("b",{class:"mg-c-input__readonly-value"},c):s("mg-popover",{identifier:this.popoverId,placement:"bottom-start",display:this.popoverDisplay,"arrow-hide":!0,style:{"--mg-c-input-list-width":Boolean(null===(a=this.input)||void 0===a?void 0:a.offsetWidth)?`${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:m,required:this.required,autocomplete:"off","aria-autocomplete":"list","aria-expanded":this.popoverDisplay.toString(),"aria-controls":r,"aria-invalid":(!0===this.invalid).toString(),"aria-activedescendant":h(l),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,disabled:m},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:m},s("mg-icon",{icon:"chevron-"+(this.popoverDisplay?"up":"down")}))),s("div",{slot:"content",class:"mg-c-input__popover-container"},"list"===u&&[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:h(t.value),"aria-selected":this.isCurrentOption(t).toString(),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"===u&&s("p",{id:u,class:"mg-c-input__popover-info"},this.messages.input.combobox.notFound),"notavailable"===u&&s("p",{id:u,class:"mg-c-input__popover-info"},this.messages.input.combobox.notAvailable))))}get element(){return e(this)}static get watchers(){return{value:["watchValue"],items:["watchItems"],identifier:["watchIdentifier"],readonly:["watchReadonly","watchValidityChange"],required:["watchValidityChange"],disabled:["watchValidityChange","watchDisabled"],mgWidth:["watchMgWidth"],fetchurl:["watchFetchUrl"],fetchoptions:["watchFetchOptions"],fetchmappings:["watchFetchMappings"],options:["watchOptions"],filter:["watchFilter"],popoverDisplay:["watchPopoverDisplay"]}}};z.style=".mg-c-input__error-details{margin:0}.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__with-character-left>mg-icon:first-of-type,.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__with-character-left .mg-c-input__box,.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-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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-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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-card-overflow:hidden;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0}.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:not(:disabled){cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;min-width:var(--mg-c-input-list-width);max-height:calc(50*var(--mg-b-size-8) - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-4);overflow-y:scroll}.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{z as mg_input_combobox}
|