@mgdis/mg-components 6.13.1 → 6.14.0

package/dist/mg-components/p-269e2a80.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as s}from"./p-CAuxALt5.js";import{P as n,C as o,f as a,a as r,n as h,g as c,t as p,b as u,i as l,c as m,d as g}from"./p-Dr7GYvIz.js";import{c as d,a as b,w as f}from"./p-CNgv8hc5.js";import{i as v}from"./p-Bv7NHR-W.js";import{K as w}from"./p-yMGqY8YG.js";const _=".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__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{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__popover-info{padding:var(--mg-b-size-8);margin:0;text-align:center}.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}";const x=t=>t&&typeof t==="object"&&typeof t.title==="string"&&t.value!==undefined;const y=t=>Array.isArray(t)&&t.every(x);const z=t=>{const i=l(t)&&Object.hasOwn(t,"request")&&Object.hasOwn(t,"response");if(i){const{request:i,response:e}=t;if([i,e].some((t=>!l(t))))return false;const s=typeof i.filter==="string";const n=typeof e==="object"&&typeof e.total==="string"&&typeof e.items==="string"&&typeof e.next==="string"&&typeof e.itemTitle==="string"&&(typeof e.itemValue==="string"||e.itemValue===undefined);return s&&n}else{return i}};const B=class{constructor(e){t(this,e);this.valueChange=i(this,"value-change");this.filterChange=i(this,"filter-change");this.loadMore=i(this,"load-more");this.inputValid=i(this,"input-valid");this.fetchError=i(this,"fetch-error");this.classFocus="mg-u-is-focused";this.hasDisplayedError=false;this.name=this.identifier;this.labelOnTop=false;this.labelHide=false;this.required=false;this.readonly=false;this.disabled=false;this.mgWidth="full";this.tooltipPosition="input";this.options=new n([]);this.filter="";this.classCollection=new o(["mg-c-input--combobox","mg-c-input--has-icon","mg-c-input--input-append"]);this.popoverDisplay=false;this.handleOptionClick=t=>{this.setValue(this.options.items.find((i=>a(i.value)===t.target.id)));this.popoverDisplay=false};this.handleResetButton=t=>{t.stopPropagation();this.reset().then((()=>{this.input.focus()}))};this.handlePopoverDisplay=t=>{this.popoverDisplay=t.detail};this.handleFilterInput=()=>{this.checkValidity();if(this.hasDisplayedError)this.setErrorMessage();if(!this.popoverDisplay)this.popoverDisplay=true;if(!this.debounce){this.debounce=true;setTimeout((()=>{this.filter=this.input.value;this.debounce=false}),250)}};this.handleFilterBlur=()=>{if(this.popoverDisplay)return;this.handlerInProgress="blur";this.displayError().finally((()=>{this.handlerInProgress=undefined}))};this.handleFilterFocus=()=>{if(!this.isLoading){this.option=null}};this.handleLoadMoreButton=()=>{this.loadingWrapper({name:"load-more",cursor:r.NEXT}).then((()=>{this.input.focus()}))};this.handleFilterKeydown=t=>{if(this.disabled||t.ctrlKey||t.shiftKey)return;let i=false;switch(t.key){case w.TAB:case w.ENTER:i=t.key===w.ENTER;const e=this.option||this.options.items.find(this.isCurrentOption);if(this.popoverDisplay)this.setValue(this.page.total>0?e:null);this.popoverDisplay=false;break;case w.DOWN:case w.ARROWDOWN:case w.UP:case w.ARROWUP:i=true;if(this.isLoading||!(this.page.total>0)){this.popoverDisplay=true;break}if(Boolean(t.altKey)&&[w.DOWN,w.ARROWDOWN].includes(t.key)){this.popoverDisplay=true;break}let s;const n=this.popoverDisplay&&x(this.option);if([w.DOWN,w.ARROWDOWN].includes(t.key)){s=n?r.NEXT:r.FIRST}else if([w.UP,w.ARROWUP].includes(t.key)){s=n?r.PREVIOUS:r.LAST}this.loadingWrapper({name:"scroll",cursor:s});this.popoverDisplay=true;break;case w.LEFT:case w.ARROWLEFT:case w.HOME:case w.RIGHT:case w.ARROWRIGHT:case w.END:if(!x(this.option))break;i=true;this.option=null;let o;if(w.HOME===t.key){o=0}else if(w.END===t.key){o=this.filter.length}if(typeof o==="number"){this.input.setSelectionRange(o,o)}break;case w.ESC:case w.ESCAPE:i=true;if(this.popoverDisplay){this.popoverDisplay=false}else{this.setValue(null);this.filter="";this.option=null}break;default:this.option=null;break}if(i){t.stopPropagation();t.preventDefault()}};this.scrollToIndex=t=>{requestAnimationFrame((()=>{var i;if(!this.popoverDisplay)return;(i=this.element.shadowRoot.querySelector(`li:nth-of-type(${(t||0)+this.page.baseIndex})`))===null||i===void 0?void 0:i.scrollIntoView({block:"nearest"})}))};this.isCurrentOption=t=>(x(this.value)?this.value.value:this.value)===t.value;this.getValueTitle=()=>{if(this.value&&x(this.value))return this.value.title;else if(typeof this.value==="string")return this.value;else return""};this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())};this.setErrorMessage=t=>{this.errorMessage=undefined;if(!this.valid&&t!==undefined){this.errorMessage=t}else if(!this.valid&&this.input.validity.valueMissing){this.errorMessage=this.messages.errors.required}};this.optionsFilter=t=>this.filter===""?true:t.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase());this.loadingWrapper=t=>{let i;let e;if(!Boolean(this.loadingAction)){this.loadingAction=t.name}if(Boolean(this.option)&&this.loadingAction!=="load-more"){e=this.page.items.findIndex((t=>t.value.toString()===this.option.value.toString()))}else if(this.loadingAction==="load-more"){e=this.page.items.length-this.page.baseIndex}if(t.name==="load-more"){this.isLoading=true;i=this.goToNextPage}else if(t.cursor===r.NEXT&&this.page.items.length<=this.page.total&&e+this.page.baseIndex===this.page.items.length&&e+this.page.baseIndex<this.page.total){this.loadMoreElement.click();return}else if(t.name==="scroll"){i=h}else{i=this.updatePage}return i().then((()=>{const i=this.options.items.filter(this.optionsFilter);if(t.name!=="load-data"){e=this.page.getIndexFromCursor(t.cursor,this.loadingAction==="load-more"&&e>=0?i[e]:this.option)}this.option=i[e];this.scrollToIndex(e)})).finally((()=>{requestAnimationFrame((()=>{this.isLoading=false;this.loadingAction=undefined}))}))};this.goToNextPage=()=>{this.loadMore.emit();if(Boolean(this.fetchurl)){return this.getOptions(typeof this.page.next==="string"?this.page.next:undefined).then((t=>{if(!Boolean(t))return;const i=[...this.page.items,...t.items];this.options=new n(i,{total:t.total,next:t.next,top:i.length})}))}else{return h((()=>{if(typeof this.page.next==="function"){const t=this.page.next();this.page=new g(Object.assign(Object.assign({},t),{items:[...this.page.items,...t.items]}))}}))}};this.updatePage=async()=>{if(Boolean(this.fetchurl)){return this.getOptions().then((t=>{if(!Boolean(t))return;this.options=new n(t.items,{total:t.total,next:t.next,top:t.top})}))}else{this.page=this.options.getPage(0,this.optionsFilter)}};this.getOptions=async(t=this.fetchurl)=>{const i=(typeof t==="string"?t:t.toString()).replaceAll(this.fetchmappings.request.filter,encodeURIComponent(this.filter));try{const t=await fetch(i,this.fetchoptions);if(!t.ok){this.fetchError.emit(new Error(`${t.status} - ${t.statusText}`));return}const e=await t.json();const s=c(e,this.fetchmappings.response.items).map((t=>({title:c(t,this.fetchmappings.response.itemTitle),value:this.fetchmappings.response.itemValue!==undefined?c(t,this.fetchmappings.response.itemValue):t})));const n=Number(c(e,this.fetchmappings.response.total,0));let o=c(e,this.fetchmappings.response.next);if(URL.canParse(i)&&Boolean(o)&&!URL.canParse(o)){const t=new URL(i);if(t.pathname.endsWith(o.split("?")[0])){o=new URL(o,t).toString()}}return{items:s,total:n,next:o,top:s.length}}catch(t){this.fetchError.emit(t)}}}watchValue(t){this.filter=this.getValueTitle();this.valueChange.emit(t)}watchItems(t){if(Boolean(this.fetchurl)&&!Boolean(t)){return}else if(Boolean(this.fetchurl)&&Boolean(t)){throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${p(t)}.`)}else if(Array.isArray(t)&&t.length===0){this.options=new n([])}else if(u(t)){this.options=new n(t.map((t=>({title:t,value:t}))),{total:t.length})}else if(y(t)){this.options=new n(t,{total:t.length})}else{throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${p(t)}.`)}}watchIdentifier(t){if(Boolean(t)){this.popoverId=`${t}-popover`;this.element.dataset.mgPopoverGuard=this.popoverId}}watchReadonly(t){if(t)this.classCollection.add(d);else this.classCollection.delete(d)}watchValidityChange(t,i,e){if(this.input===undefined)return;this.input[e]=t;this.checkValidity();if(this.hasDisplayedError){this.setErrorMessage();this.hasDisplayedError=false}}watchDisabled(t){if(t){this.classCollection.add(b)}else{this.classCollection.delete(b)}}watchMgWidth(t){f.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)}));if(t!==undefined)this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);this.classCollection=new o(this.classCollection.classes)}watchFetchUrl(t){if(Boolean(t)){this.loadingWrapper({name:"load-data"})}}watchFetchOptions(t){if(this.fetchurl&&t&&!l(t)){throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${p(t)}.`)}else{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.`)}else if(Boolean(t)&&!z(t)){throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${p(t)}.`)}}watchOptions(t){this.page=t.getPage(0,Boolean(this.filter)?this.optionsFilter:undefined)}watchFilter(t){this.loadingWrapper({name:"load-data"});this.filterChange.emit(t)}watchPopoverDisplay(t){if(t){this.classCollection.add(this.classFocus);this.input.focus()}else{this.option=null;this.filter=this.getValueTitle();this.classCollection.delete(this.classFocus);this.handlerInProgress="blur";this.displayError().finally((()=>{this.handlerInProgress=undefined}))}}async setFocus(){var t;(t=this.input)===null||t===void 0?void 0:t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity();this.setErrorMessage();this.hasDisplayedError=this.invalid;t()}))}))}async setError(t,i){if(typeof t!=="boolean"){throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.')}else if(!m(i)){throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.')}else{this.setValidity(t);this.setErrorMessage(t?undefined:i);this.hasDisplayedError=this.invalid}}async reset(){if(!this.readonly){this.setValue(null);this.option=null;this.filter="";return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity();this.errorMessage=undefined;this.hasDisplayedError=false;t()}))}))}}setValue(t){if(!x(t)){this.value=""}else if(u(this.items||this.options.items)){this.value=t.title}else{this.value=Object.assign({},t)}}setValidity(t){const i=this.valid;this.valid=t;this.invalid=!this.valid;if(this.handlerInProgress===undefined||this.handlerInProgress==="blur"&&this.valid!==i)this.inputValid.emit(this.valid)}componentWillLoad(){this.messages=v(this.element).messages;this.watchIdentifier(this.identifier);this.watchItems(this.items);if(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);return setTimeout((()=>{this.checkValidity()}),0)}render(){var t,i,s,n,o,r;const h=`${this.identifier}-list`;const c=this.getValueTitle();const p=this.value&&!this.disabled;let u;if(((t=this.page)===null||t===void 0?void 0:t.items.length)>0)u="list";else if(((i=this.page)===null||i===void 0?void 0:i.items.length)===0&&Boolean(this.filter))u="notfound";else if(((s=this.page)===null||s===void 0?void 0:s.items.length)===0)u="notavailable";let l;if(Boolean((n=this.option)===null||n===void 0?void 0:n.value)){l=this.option.value}else if(typeof this.value==="string"){l=this.value}else{l=(o=this.value)===null||o===void 0?void 0:o.value}return e("mg-input",{key:"d11ca521c7f2400edd4fa006a929cf6b2d19ef80",label:this.label,identifier:this.identifier,class:this.classCollection.classes.join(" "),ariaDescribedbyIDs:u&&u!=="list"?[u]:[],labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&this.value===undefined?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?c&&e("b",{class:"mg-c-input__readonly-value"},c):e("mg-popover",{identifier:this.popoverId,placement:"bottom-start",display:this.popoverDisplay,"arrow-hide":true,style:{"--mg-c-input-list-width":Boolean((r=this.input)===null||r===void 0?void 0:r.offsetWidth)?`${this.input.offsetWidth}px`:undefined},"data-fallback-placement":"bottom-end","onDisplay-change":this.handlePopoverDisplay},e("div",{class:"mg-c-input__input-group-container"},e("mg-icon",{icon:"magnifying-glass"}),e("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":h,"aria-invalid":(this.invalid===true).toString(),"aria-activedescendant":a(l),onInput:this.handleFilterInput,onBlur:this.handleFilterBlur,onFocus:this.handleFilterFocus,onKeyDown:this.handleFilterKeydown,ref:t=>{if(t!==null)this.input=t}}),p?e("mg-button",{class:"mg-c-input__box-append mg-c-input__reset",variant:"flat","is-icon":true,label:this.messages.general.reset,"aria-controls":this.identifier,tabindex:"-1",onClick:this.handleResetButton},e("mg-icon",{icon:"cross"})):e("mg-button",{class:"mg-c-input__box-append",variant:"flat","is-icon":true,label:this.itemsLabel,tabindex:"-1",disabled:this.disabled},e("mg-icon",{icon:`chevron-${this.popoverDisplay?"up":"down"}`}))),e("div",{slot:"content",class:"mg-c-input__popover-container"},u==="list"&&[e("ul",{key:"list",class:"mg-c-input__input-list",role:"listbox",id:h,"aria-label":this.itemsLabel,"aria-setsize":this.page.total},this.page.items.map((t=>{var i;return e("li",{role:"option",class:{"mg-c-input__input-list-item":true,"mg-c-input__input-list-item--focus-visible":JSON.stringify((i=this.option)===null||i===void 0?void 0:i.value)===JSON.stringify(t.value),"mg-c-input__input-list-item--selected":this.isCurrentOption(t)},key:t.title,id:a(t.value),"aria-selected":this.isCurrentOption(t).toString(),onClick:this.handleOptionClick},t.title,this.isCurrentOption(t)&&e("mg-icon",{icon:"check"}))}))),this.isLoading&&e("mg-loader",{key:"loader",message:this.messages.input.combobox.search,class:{"mg-u-visually-hidden":Boolean(this.page.next)}}),this.page.next&&e("mg-button",{key:"load-more",variant:"flat",class:"mg-c-input__load-more",tabIndex:-1,disabled:this.isLoading,"full-width":true,"disable-on-click":true,onClick:this.handleLoadMoreButton,"aria-controls":h,ref:t=>{if(t!==null)this.loadMoreElement=t}},e("mg-icon",{icon:"chevron-down"}),this.messages.input.combobox.loadMore)],u==="notfound"&&e("p",{id:u,class:"mg-c-input__popover-info"},this.messages.input.combobox.notFound),u==="notavailable"&&e("p",{id:u,class:"mg-c-input__popover-info"},this.messages.input.combobox.notAvailable))))}get element(){return s(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"]}}};B.style=_;export{B as mg_input_combobox};
-//# sourceMappingURL=p-269e2a80.entry.js.map

package/dist/mg-components/p-269e2a80.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["mgInputComboboxCss","isItem","item","title","value","undefined","isItems","items","Array","isArray","every","isFetchmappings","isValidRoot","isObject","Object","hasOwn","request","response","some","property","isValidRequest","filter","isValidResponse","total","next","itemTitle","itemValue","MgInputCombobox","constructor","hostRef","this","classFocus","hasDisplayedError","name","identifier","labelOnTop","labelHide","required","readonly","disabled","mgWidth","tooltipPosition","options","Paginate","classCollection","ClassList","popoverDisplay","handleOptionClick","event","setValue","find","option","formatID","target","id","handleResetButton","stopPropagation","reset","then","input","focus","handlePopoverDisplay","detail","handleFilterInput","checkValidity","setErrorMessage","debounce","setTimeout","handleFilterBlur","handlerInProgress","displayError","finally","handleFilterFocus","isLoading","handleLoadMoreButton","loadingWrapper","cursor","Cursor","NEXT","handleFilterKeydown","ctrlKey","shiftKey","guard","key","Keys","TAB","ENTER","isCurrentOption","page","DOWN","ARROWDOWN","UP","ARROWUP","Boolean","altKey","includes","isNavigationStart","FIRST","PREVIOUS","LAST","LEFT","ARROWLEFT","HOME","RIGHT","ARROWRIGHT","END","index","length","setSelectionRange","ESC","ESCAPE","preventDefault","scrollToIndex","requestAnimationFrame","_a","element","shadowRoot","querySelector","baseIndex","scrollIntoView","block","getValueTitle","setValidity","errorMessage","valid","validity","valueMissing","messages","errors","optionsFilter","toLocaleLowerCase","action","promise","loadingAction","findIndex","toString","goToNextPage","loadMoreElement","click","nextTick","updatePage","getIndexFromCursor","loadMore","emit","fetchurl","getOptions","nextPage","top","Page","assign","async","getPage","url","updateUrl","replaceAll","fetchmappings","encodeURIComponent","fetch","fetchoptions","ok","fetchError","Error","status","statusText","json","getObjectValueFromKey","map","Number","URL","canParse","previousUrl","pathname","endsWith","split","error","watchValue","newValue","valueChange","watchItems","allItemsAreString","watchIdentifier","popoverId","dataset","mgPopoverGuard","watchReadonly","add","classReadonly","delete","watchValidityChange","_oldValue","prop","watchDisabled","classDisabled","watchMgWidth","widths","forEach","width","classes","watchFetchUrl","watchFetchOptions","Request","watchFetchMappings","watchOptions","watchFilter","filterChange","watchPopoverDisplay","setFocus","Promise","resolve","invalid","setError","isValidString","oldValidValue","inputValid","componentWillLoad","initLocales","render","listId","readonlyValue","withResetButton","popoverContent","_b","_c","activeDescendant","_d","_e","h","label","class","join","ariaDescribedbyIDs","tooltip","helpText","placement","display","style","_f","offsetWidth","icon","type","role","placeholder","autocomplete","onInput","onBlur","onFocus","onKeyDown","ref","el","variant","general","tabindex","onClick","itemsLabel","slot","JSON","stringify","message","combobox","search","tabIndex","notFound","notAvailable"],"sources":["../styles/dist/components/mg-input-combobox.css?tag=mg-input-combobox&encapsulation=shadow","src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.tsx"],"sourcesContent":[".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__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{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__popover-info{padding:var(--mg-b-size-8);margin:0;text-align:center}.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}/*# sourceMappingURL=mg-input-combobox.css.map */\n","import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport {\n  allItemsAreString,\n  ClassList,\n  getObjectValueFromKey,\n  isValidString,\n  nextTick,\n  Page,\n  Paginate,\n  Cursor,\n  type CursorType,\n  toString,\n  isObject,\n  formatID,\n} from '@mgdis/core-ui-helpers/dist/utils';\nimport { type ActionType, type RequestMappingType, type ResponseMappingType } from './mg-input-combobox.conf';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport type { Option } from '../../../../types';\nimport { initLocales } from '../../../../locales';\nimport { Keys } from '../../../../utils/events.utils';\n\n/**\n * Check if object is an item\n * @param item - object to check\n * @returns True if object is an item\n */\nconst isItem = (item: unknown): item is Option => item && typeof item === 'object' && typeof (item as Option).title === 'string' && (item as Option).value !== undefined;\n\n/**\n * Check if objects are items\n * @param items - items to check\n * @returns True if objects are items\n */\nconst isItems = (items: unknown[]): items is Option[] => Array.isArray(items) && items.every(isItem);\n\n/**\n * Check if object is valid combobox fetchmappings\n * @param value - to validate\n * @returns truthy if mapping is valid\n */\nconst isFetchmappings = (value: unknown): value is MgInputCombobox['fetchmappings'] => {\n  const isValidRoot = isObject<Record<string, unknown>>(value) && Object.hasOwn(value, 'request') && Object.hasOwn(value, 'response');\n  if (isValidRoot) {\n    const { request, response } = value as MgInputCombobox['fetchmappings'];\n    if ([request, response].some(property => !isObject(property))) return false;\n    const isValidRequest = typeof request.filter === 'string';\n    const isValidResponse =\n      typeof response === 'object' &&\n      typeof response.total === 'string' &&\n      typeof response.items === 'string' &&\n      typeof response.next === 'string' &&\n      typeof response.itemTitle === 'string' &&\n      (typeof response.itemValue === 'string' || response.itemValue === undefined);\n    return isValidRequest && isValidResponse;\n  } else {\n    return isValidRoot;\n  }\n};\n\n@Component({\n  tag: 'mg-input-combobox',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-combobox.css',\n  shadow: true,\n})\nexport class MgInputCombobox {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classFocus = 'mg-u-is-focused';\n\n  // HTML selector\n  private input: HTMLInputElement;\n  private loadMoreElement: HTMLMgButtonElement;\n  private popoverId: string;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private handlerInProgress: EventType;\n  private loadingAction: ActionType['name'];\n  private debounce: boolean;\n\n  private page: Page<Option>;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputComboboxElement;\n\n  /**\n   * Define component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string | Option;\n  @Watch('value')\n  watchValue(newValue: MgInputCombobox['value']): void {\n    this.filter = this.getValueTitle();\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Define components items\n   */\n  @Prop() items: (string | Option)[];\n  @Watch('items')\n  watchItems(newValue: MgInputCombobox['items']) {\n    if (Boolean(this.fetchurl) && !Boolean(newValue)) {\n      // skip newValue check\n      return;\n    } else if (Boolean(this.fetchurl) && Boolean(newValue)) {\n      throw new Error(`<mg-input-combobox> prop \"items\" values cannot be use with \"fetchurl\" prop defined. Passed value: ${toString(newValue)}.`);\n    }\n    // Empty options\n    else if (Array.isArray(newValue) && newValue.length === 0) {\n      this.options = new Paginate([]);\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = new Paginate(\n        newValue.map(item => ({ title: item, value: item })),\n        { total: newValue.length },\n      );\n    }\n    // Object array\n    else if (isItems(newValue)) {\n      this.options = new Paginate(newValue, { total: newValue.length });\n    } else {\n      throw new Error(`<mg-input-combobox> prop \"items\" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define items label\n   * Include short description. Required for accessibility.\n   * @example\n   * ```\n   * Countries\n   * ```\n   */\n  @Prop() itemsLabel!: string;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgInputCombobox['identifier']): void {\n    if (Boolean(newValue)) {\n      this.popoverId = `${newValue}-popover`;\n      this.element.dataset.mgPopoverGuard = this.popoverId;\n    }\n  }\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputCombobox['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  watchValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input === undefined) return;\n    this.input[prop] = newValue;\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n      this.hasDisplayedError = false;\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputCombobox['disabled']): void {\n    if (newValue) {\n      this.classCollection.add(classDisabled);\n    } else {\n      this.classCollection.delete(classDisabled);\n    }\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputCombobox['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n\n    // apply new width\n    if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define API url to fetch\n   * @example\n   * ```\n   * {\n   *   url: \"http://myapi.com?$select='href,name'&my-custom-param='my-custom-value'\", // url to fetch\n   * }\n   * ```\n   */\n  @Prop() fetchurl?: string | URL;\n  @Watch('fetchurl')\n  watchFetchUrl(newValue: MgInputCombobox['fetchurl']): void {\n    if (Boolean(newValue)) {\n      this.loadingWrapper({ name: 'load-data' });\n    }\n  }\n\n  /**\n   * Define fetch options object\n   * Require `fetchurl` prop to be defined otherwith it will be ignored if defined\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/RequestInit}\n   * @example JSON headers:\n   * ```json\n   * {\n   *   \"headers\": {\n   *      \"authorization\": \"my-token\"\n   *   }\n   * }\n   * ```\n   */\n  @Prop() fetchoptions?: RequestInit;\n  @Watch('fetchoptions')\n  watchFetchOptions(newValue: MgInputCombobox['fetchoptions']): void {\n    if (this.fetchurl && newValue && !isObject(newValue)) {\n      throw new Error(`<mg-input-combobox> prop \"fetchoptions\" value must be a valid RequestInit. Passed value: ${toString(newValue)}.`);\n    } else {\n      new Request(this.fetchurl, newValue);\n    }\n  }\n\n  /**\n   * Define fetch request mappings.\n   * Required with `fetchurl`\n   * @example\n   * ```\n   * {\n   *  request: {\n   *     filter: 'name', // `filter` key\n   *   },\n   *   response: {\n   *     total: 'body.data.total', // response object mapping to get `total` value\n   *     items: 'body.data.results' // response object mapping to get `items` value\n   *     next: 'body.next' // response object mapping to get `next` items\n   *     itemTitle: 'name', // item property to map on item['title']\n   *     itemValue: 'href', // item property to map on item['value']\n   *   }\n   * }\n   * ```\n   */\n  @Prop() fetchmappings?: { request: RequestMappingType; response: ResponseMappingType };\n  @Watch('fetchmappings')\n  watchFetchMappings(newValue: MgInputCombobox['fetchmappings']): void {\n    if (Boolean(this.fetchurl) && !Boolean(newValue)) {\n      throw new Error(`<mg-input-combobox> prop \"fetchmappings\" is required with \"fetchurl\" prop.`);\n    } else if (Boolean(newValue) && !isFetchmappings(newValue)) {\n      throw new Error(\n        `<mg-input-combobox> prop \"fetchmappings\" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${toString(newValue)}.`,\n      );\n    }\n  }\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Define if items are loading\n   */\n  @State() isLoading: boolean;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: Paginate<Option> = new Paginate([]);\n  @Watch('options')\n  watchOptions(newValue: Paginate<Option>): void {\n    this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);\n  }\n\n  /**\n   * Active option\n   */\n  @State() option: Option;\n\n  /**\n   * Option filter\n   */\n  @State() filter: string = '';\n  @Watch('filter')\n  watchFilter(newValue: MgInputCombobox['filter']): void {\n    this.loadingWrapper({ name: 'load-data' });\n    this.filterChange.emit(newValue);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--combobox', 'mg-c-input--has-icon', 'mg-c-input--input-append']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Popover display state\n   */\n  @State() popoverDisplay = false;\n  @Watch('popoverDisplay')\n  watchPopoverDisplay(newValue: MgInputCombobox['popoverDisplay']): void {\n    if (newValue) {\n      this.classCollection.add(this.classFocus);\n      this.input.focus();\n    } else {\n      // remove visual focus\n      this.option = null;\n      // reset filter with value\n      this.filter = this.getValueTitle();\n      this.classCollection.delete(this.classFocus);\n      this.handlerInProgress = 'blur';\n      this.displayError().finally(() => {\n        // reset guard\n        this.handlerInProgress = undefined;\n      });\n    }\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputComboboxElement['value']>;\n\n  /**\n   * Emited event when filter change\n   */\n  @Event({ eventName: 'filter-change' }) filterChange: EventEmitter<string>;\n\n  /**\n   * Emited event when `load-more` is called\n   */\n  @Event({ eventName: 'load-more' }) loadMore: EventEmitter<void>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputComboboxElement['valid']>;\n\n  /**\n   * Emited event when fetch API throw an error\n   */\n  @Event({ eventName: 'fetch-error' }) fetchError: EventEmitter<Error>;\n\n  /**\n   * Set focus on input.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.input?.focus();\n  }\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given concombobox.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputCombobox['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-combobox> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-combobox> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.setValue(null);\n      this.option = null;\n      this.filter = '';\n      // Use `Promise` as requested for stencil method\n      // Use `requestAnimationFrame` to ensure:\n      // - DOM is fully updated before validation\n      // - Async operations are completed\n      // - No timing issues with Stencil's render cycle\n      // - Keep everything in sync both inside and outside the component\n      return new Promise(resolve => {\n        requestAnimationFrame(() => {\n          this.checkValidity();\n          this.errorMessage = undefined;\n          this.hasDisplayedError = false;\n          resolve();\n        });\n      });\n    }\n  }\n\n  /**\n   * Handle `click` event on option\n   * @param event - option element click event\n   */\n  private handleOptionClick = (event: MouseEvent & { target: HTMLLIElement }) => {\n    this.setValue(this.options.items.find(option => formatID(option.value) === event.target.id));\n    this.popoverDisplay = false;\n  };\n\n  /**\n   * Handle `click` event on reset button\n   * @param event - click event\n   */\n  private handleResetButton = (event: MouseEvent): void => {\n    event.stopPropagation();\n    this.reset().then(() => {\n      this.input.focus();\n    });\n  };\n\n  /**\n   * Handle `display-change` event on mg-popover\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.popoverDisplay = event.detail;\n  };\n\n  /**\n   * Handle input event\n   */\n  private handleFilterInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) this.setErrorMessage();\n    if (!this.popoverDisplay) this.popoverDisplay = true;\n\n    // update filter with debounce to prevent filter update overload\n    if (!this.debounce) {\n      this.debounce = true;\n      setTimeout(() => {\n        this.filter = this.input.value;\n        this.debounce = false;\n      }, 250);\n    }\n  };\n\n  /**\n   * Handle `blur` event\n   */\n  private handleFilterBlur = (): void => {\n    // skip process if popover is displayed\n    if (this.popoverDisplay) return;\n\n    // Display Error\n    this.handlerInProgress = 'blur';\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Handle `focus` event\n   */\n  private handleFilterFocus = (): void => {\n    // ensure visual focus is always clear on focus when component isn't in loading state\n    if (!this.isLoading) {\n      this.option = null;\n    }\n  };\n\n  /**\n   * Handle load-more <mg-button> `click`\n   */\n  private handleLoadMoreButton = (): void => {\n    this.loadingWrapper({ name: 'load-more', cursor: Cursor.NEXT }).then(() => {\n      this.input.focus();\n    });\n  };\n\n  /**\n   * Handle `keypress` event\n   * @param event - keyboard event\n   */\n  private handleFilterKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled || event.ctrlKey || event.shiftKey) return;\n\n    let guard = false;\n\n    // override keys actions\n    switch (event.key) {\n      case Keys.TAB:\n      case Keys.ENTER:\n        guard = event.key === Keys.ENTER;\n        const option = this.option || this.options.items.find(this.isCurrentOption);\n        // Sets the value to the content of the focused option in the listbox.\n        if (this.popoverDisplay) this.setValue(this.page.total > 0 ? option : null);\n        // Closes the popover.\n        this.popoverDisplay = false;\n        break;\n\n      case Keys.DOWN:\n      case Keys.ARROWDOWN:\n      case Keys.UP:\n      case Keys.ARROWUP:\n        guard = true;\n        if (this.isLoading || !(this.page.total > 0)) {\n          this.popoverDisplay = true;\n          break;\n        }\n\n        if (Boolean(event.altKey) && [Keys.DOWN, Keys.ARROWDOWN].includes(event.key)) {\n          // Opens the popover without moving focus or changing selection.\n          this.popoverDisplay = true;\n          break;\n        }\n\n        // define cursor\n        let cursor: CursorType;\n        const isNavigationStart = this.popoverDisplay && isItem(this.option);\n        if ([Keys.DOWN, Keys.ARROWDOWN].includes(event.key)) {\n          // If the filter is not empty and the popover is displayed, moves visual focus to the first suggested value.\n          // If the filter is empty and the popover is not displayed, opens the popover and moves visual focus to the first option.\n          // Moves visual focus to the next option.\n          // If visual focus is on the last option, moves visual focus to the first option.\n          cursor = isNavigationStart ? Cursor.NEXT : Cursor.FIRST;\n        } else if ([Keys.UP, Keys.ARROWUP].includes(event.key)) {\n          // If the filter is not empty and the popover is displayed, moves visual focus to the last suggested value.\n          // If the filter is empty, first opens the popover if it is not already displayed and then moves visual focus to the last option.\n          // Moves visual focus to the previous option.\n          // If visual focus is on the first option, moves visual focus to the last option.\n          cursor = isNavigationStart ? Cursor.PREVIOUS : Cursor.LAST;\n        }\n\n        // update scroll and visual focused option in wrapper\n        this.loadingWrapper({ name: 'scroll', cursor });\n\n        // open popover\n        this.popoverDisplay = true;\n        break;\n\n      case Keys.LEFT:\n      case Keys.ARROWLEFT:\n      case Keys.HOME:\n      case Keys.RIGHT:\n      case Keys.ARROWRIGHT:\n      case Keys.END:\n        // skip process if visual focus is not in popover\n        if (!isItem(this.option)) break;\n        guard = true;\n\n        // Remove visual focus from popover options\n        this.option = null;\n\n        let index;\n        if (Keys.HOME === event.key) {\n          // Moves visual focus to the textbox and places the editing cursor at the beginning of the field.\n          index = 0;\n        } else if (Keys.END === event.key) {\n          // Moves visual focus to the textbox and places the editing cursor at the end of the field.\n          index = this.filter.length;\n        }\n        if (typeof index === 'number') {\n          this.input.setSelectionRange(index, index);\n        }\n        break;\n\n      case Keys.ESC:\n      case Keys.ESCAPE:\n        guard = true;\n\n        if (this.popoverDisplay) {\n          // If the popover is displayed, closes it.\n          this.popoverDisplay = false;\n        } else {\n          // If the popover is not displayed, clears the filter.\n          this.setValue(null);\n          this.filter = '';\n          // Sets visual focus on the textbox.\n          this.option = null;\n        }\n        break;\n\n      default:\n        // Remove visual focus from popover options\n        this.option = null;\n        break;\n    }\n\n    if (guard) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Scroll to next option from cursor\n   * @param index - targeted option index to scroll into\n   */\n  private scrollToIndex = (index: number): void => {\n    // ensure we have an opened popover element on screen when the scrollIntiView is called\n    requestAnimationFrame(() => {\n      if (!this.popoverDisplay) return;\n      this.element.shadowRoot.querySelector(`li:nth-of-type(${(index || 0) + this.page.baseIndex})`)?.scrollIntoView({ block: 'nearest' });\n    });\n  };\n\n  /**\n   * Is option the current value\n   * @param option - option to match with\n   * @returns true if option is the current value\n   */\n  private isCurrentOption = (option: Option) => (isItem(this.value) ? this.value.value : this.value) === option.value;\n\n  /**\n   * Set value prop\n   * @param newValue - slected option item\n   */\n  private setValue(newValue: MgInputCombobox['option'] | null): void {\n    if (!isItem(newValue)) {\n      this.value = '';\n    } else if (allItemsAreString(this.items || this.options.items)) {\n      this.value = newValue.title;\n    } else {\n      this.value = { ...newValue };\n    }\n  }\n\n  /**\n   * get value prop title\n   * @returns value title\n   */\n  private getValueTitle = (): Option['title'] => {\n    if (this.value && isItem(this.value)) return this.value.title;\n    else if (typeof this.value === 'string') return this.value;\n    else return '';\n  };\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputCombobox['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n    // required\n    else if (!this.valid && this.input.validity.valueMissing) {\n      this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Get filtered options from `filter` input value\n   * @returns filtered options\n   */\n  private optionsFilter = (option): boolean => (this.filter === '' ? true : option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));\n\n  /**\n   * Loading wrapper with a given action\n   * @param action - wrapped loading action\n   * @returns promisified action\n   */\n  private loadingWrapper = (action: ActionType): Promise<void> => {\n    let promise;\n    let index: number;\n\n    // cache initial loading action if not defined\n    if (!Boolean(this.loadingAction)) {\n      this.loadingAction = action.name;\n    }\n\n    // update index\n    if (Boolean(this.option) && this.loadingAction !== 'load-more') {\n      index = this.page.items.findIndex(option => option.value.toString() === this.option.value.toString());\n    } else if (this.loadingAction === 'load-more') {\n      index = this.page.items.length - this.page.baseIndex;\n    }\n    // when action require a loadMore we fetch the API else we report action to next tick\n    // Set \"load more\" if action match OR if next item not available in the current page\n    if (action.name === 'load-more') {\n      // wait for new element render and update scroll position\n      // set component loading\n      this.isLoading = true;\n      promise = this.goToNextPage;\n    } else if (\n      action.cursor === Cursor.NEXT &&\n      this.page.items.length <= this.page.total &&\n      index + this.page.baseIndex === this.page.items.length &&\n      index + this.page.baseIndex < this.page.total\n    ) {\n      // trigger load-more from button to benefit from `disabled-on-click`\n      this.loadMoreElement.click();\n      return;\n    } else if (action.name === 'scroll') {\n      promise = nextTick;\n    } else {\n      promise = this.updatePage;\n    }\n\n    return promise()\n      .then(() => {\n        // parse full items list from options\n        const options = this.options.items.filter(this.optionsFilter);\n\n        // update visual focus\n        if (action.name !== 'load-data') {\n          index = this.page.getIndexFromCursor(action.cursor, this.loadingAction === 'load-more' && index >= 0 ? options[index] : this.option);\n        }\n        this.option = options[index];\n\n        // update scroll position\n        this.scrollToIndex(index);\n      })\n      .finally(() => {\n        // reset loading after next render\n        requestAnimationFrame(() => {\n          this.isLoading = false;\n          this.loadingAction = undefined;\n        });\n      });\n  };\n\n  /**\n   * Go to next page\n   * @returns promise\n   */\n  private goToNextPage = (): Promise<void> => {\n    this.loadMore.emit();\n    if (Boolean(this.fetchurl)) {\n      return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {\n        if (!Boolean(nextPage)) return;\n        // merge items from current page and next page\n        const items = [...this.page.items, ...nextPage.items];\n        // create new options pagination withe merged items\n        this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });\n      });\n    } else {\n      return nextTick(() => {\n        if (typeof this.page.next === 'function') {\n          const nextPage = this.page.next();\n          this.page = new Page({\n            ...nextPage,\n            items: [...this.page.items, ...nextPage.items],\n          });\n        }\n      });\n    }\n  };\n\n  /**\n   * Go to next page\n   * @returns promise\n   */\n  private updatePage = async (): Promise<void> => {\n    if (Boolean(this.fetchurl)) {\n      return this.getOptions().then(page => {\n        if (!Boolean(page)) return;\n        // reset current options pagination from API response\n        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });\n      });\n    } else {\n      this.page = this.options.getPage(0, this.optionsFilter);\n    }\n  };\n\n  /**\n   * Fetch request\n   * @param url - to fetch\n   * @returns new page from url\n   */\n  private getOptions = async (url = this.fetchurl): Promise<Pick<Page<Option>, 'items' | 'top'> & Partial<Page<Option>>> => {\n    // add text filter\n    const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(this.filter));\n\n    try {\n      const response = await fetch(updateUrl, this.fetchoptions);\n      if (!response.ok) {\n        this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));\n        return;\n      }\n      const json = await response.json();\n      const items = getObjectValueFromKey<Response, Option[]>(json, this.fetchmappings.response.items).map(\n        (item): Option => ({\n          title: getObjectValueFromKey<unknown, Option['title']>(item, this.fetchmappings.response.itemTitle),\n          value: this.fetchmappings.response.itemValue !== undefined ? getObjectValueFromKey<unknown, Option['value']>(item, this.fetchmappings.response.itemValue) : item,\n        }),\n      );\n      const total = Number(getObjectValueFromKey<Response, number>(json, this.fetchmappings.response.total, 0));\n      let next = getObjectValueFromKey<Response, string>(json, this.fetchmappings.response.next);\n      if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {\n        const previousUrl = new URL(updateUrl);\n        if (previousUrl.pathname.endsWith(next.split('?')[0])) {\n          next = new URL(next, previousUrl).toString();\n        }\n      }\n      return { items, total, next, top: items.length };\n    } catch (error) {\n      this.fetchError.emit(error);\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.watchIdentifier(this.identifier);\n    this.watchItems(this.items);\n    if (Boolean(this.fetchurl)) {\n      this.watchFetchOptions(this.fetchoptions);\n      this.watchFetchMappings(this.fetchmappings);\n      this.loadingWrapper({ name: 'load-data' });\n    }\n    this.watchValue(this.value);\n    this.watchOptions(this.options);\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const listId = `${this.identifier}-list`;\n    const readonlyValue = this.getValueTitle();\n    const withResetButton = this.value && !this.disabled;\n\n    let popoverContent: 'list' | 'notfound' | 'notavailable';\n    if (this.page?.items.length > 0) popoverContent = 'list';\n    else if (this.page?.items.length === 0 && Boolean(this.filter)) popoverContent = 'notfound';\n    else if (this.page?.items.length === 0) popoverContent = 'notavailable';\n\n    let activeDescendant;\n    if (Boolean(this.option?.value)) {\n      activeDescendant = this.option.value;\n    } else if (typeof this.value === 'string') {\n      activeDescendant = this.value;\n    } else {\n      activeDescendant = this.value?.value;\n    }\n\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.classes.join(' ')}\n        ariaDescribedbyIDs={popoverContent && popoverContent !== 'list' ? [popoverContent] : []}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          readonlyValue && <b class=\"mg-c-input__readonly-value\">{readonlyValue}</b>\n        ) : (\n          <mg-popover\n            identifier={this.popoverId}\n            placement=\"bottom-start\"\n            display={this.popoverDisplay}\n            arrow-hide\n            style={{\n              '--mg-c-input-list-width': Boolean(this.input?.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,\n            }}\n            data-fallback-placement=\"bottom-end\"\n            onDisplay-change={this.handlePopoverDisplay}\n          >\n            <div class=\"mg-c-input__input-group-container\">\n              <mg-icon icon=\"magnifying-glass\"></mg-icon>\n              <input\n                type=\"text\"\n                role=\"combobox\"\n                class=\"mg-c-input__box mg-c-input__box--width\"\n                value={this.filter}\n                id={this.identifier}\n                name={this.name}\n                placeholder={this.placeholder}\n                title={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                autocomplete=\"off\"\n                aria-autocomplete=\"list\"\n                aria-expanded={this.popoverDisplay.toString()}\n                aria-controls={listId}\n                aria-invalid={(this.invalid === true).toString()}\n                aria-activedescendant={formatID(activeDescendant)}\n                onInput={this.handleFilterInput}\n                onBlur={this.handleFilterBlur}\n                onFocus={this.handleFilterFocus}\n                onKeyDown={this.handleFilterKeydown}\n                ref={(el: HTMLInputElement) => {\n                  if (el !== null) this.input = el;\n                }}\n              />\n              {withResetButton ? (\n                <mg-button\n                  class=\"mg-c-input__box-append mg-c-input__reset\"\n                  variant=\"flat\"\n                  is-icon\n                  label={this.messages.general.reset}\n                  aria-controls={this.identifier}\n                  tabindex=\"-1\"\n                  onClick={this.handleResetButton}\n                >\n                  <mg-icon icon=\"cross\"></mg-icon>\n                </mg-button>\n              ) : (\n                <mg-button class=\"mg-c-input__box-append\" variant=\"flat\" is-icon label={this.itemsLabel} tabindex=\"-1\" disabled={this.disabled}>\n                  <mg-icon icon={`chevron-${this.popoverDisplay ? 'up' : 'down'}`}></mg-icon>\n                </mg-button>\n              )}\n            </div>\n            <div slot=\"content\" class=\"mg-c-input__popover-container\">\n              {popoverContent === 'list' && [\n                // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n                <ul key=\"list\" class=\"mg-c-input__input-list\" role=\"listbox\" id={listId} aria-label={this.itemsLabel} aria-setsize={this.page.total}>\n                  {this.page.items.map(option => {\n                    return (\n                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n                      <li\n                        role=\"option\"\n                        class={{\n                          'mg-c-input__input-list-item': true,\n                          'mg-c-input__input-list-item--focus-visible': JSON.stringify(this.option?.value) === JSON.stringify(option.value),\n                          'mg-c-input__input-list-item--selected': this.isCurrentOption(option),\n                        }}\n                        key={option.title}\n                        id={formatID(option.value)}\n                        aria-selected={this.isCurrentOption(option).toString()}\n                        onClick={this.handleOptionClick}\n                      >\n                        {option.title}\n                        {this.isCurrentOption(option) && <mg-icon icon=\"check\"></mg-icon>}\n                      </li>\n                    );\n                  })}\n                </ul>,\n                this.isLoading && <mg-loader key=\"loader\" message={this.messages.input.combobox.search} class={{ 'mg-u-visually-hidden': Boolean(this.page.next) }}></mg-loader>,\n                this.page.next && (\n                  <mg-button\n                    key=\"load-more\"\n                    variant=\"flat\"\n                    class=\"mg-c-input__load-more\"\n                    tabIndex={-1}\n                    disabled={this.isLoading}\n                    full-width\n                    disable-on-click\n                    onClick={this.handleLoadMoreButton}\n                    aria-controls={listId}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) this.loadMoreElement = el;\n                    }}\n                  >\n                    <mg-icon icon=\"chevron-down\"></mg-icon>\n                    {this.messages.input.combobox.loadMore}\n                  </mg-button>\n                ),\n              ]}\n              {popoverContent === 'notfound' && (\n                <p id={popoverContent} class=\"mg-c-input__popover-info\">\n                  {this.messages.input.combobox.notFound}\n                </p>\n              )}\n              {popoverContent === 'notavailable' && (\n                <p id={popoverContent} class=\"mg-c-input__popover-info\">\n                  {this.messages.input.combobox.notAvailable}\n                </p>\n              )}\n            </div>\n          </mg-popover>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}