@madgex/design-system-ce 5.6.1 → 5.6.2

package/dist/custom-elements/mds-combobox.js

@@ -1 +1 @@
-import{_ as h,o as a,c as o,a as c,w as r,t as x,b as v,r as y,n as g,d as p,e as f,f as C,g as _,F as B,h as k,i as w}from"../plugin-vue_export-helper.js";const L={name:"ComboboxClear",inject:["iconPath","clearInput"]},V=["aria-label","title"],S={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},E=["href"];function K(t,n,i,u,l,e){return a(),o("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:n[0]||(n[0]=d=>t.$emit("clear",d)),onKeydown:n[1]||(n[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),o("svg",S,[c("use",{href:`${e.iconPath}#icon-close`},null,8,E)]))],40,V)}var M=h(L,[["render",K]]);const T={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0}},inject:["iconPath","loadingText"]},H=["hidden"],F={key:0,class:"mds-combobox-loading"},D={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},A=["href"],G={class:"mds-visually-hidden"};function N(t,n,i,u,l,e){return a(),o("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:i.hidden},[i.isLoading?(a(),o("li",F,[(a(),o("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",G,x(e.loadingText),1)])):v("",!0),y(t.$slots,"default")],8,H)}var P=h(T,[["render",N]]);const q={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView({block:"nearest",inline:"nearest"})}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),n=>`<span class="mds-combobox__option--marked">${n}</span>`)}}},j=["aria-selected","innerHTML"];function $(t,n,i,u,l,e){return a(),o("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":i.focused}]),role:"option","aria-selected":i.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var R=h(q,[["render",$]]);const U={name:"Combobox",components:{ComboboxClear:M,ListBox:P,ListBoxOption:R},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2}},emits:["search","select-option","clear-all"],data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.findIndex(n=>{var i;return n.value==((i=this.selectedOption)==null?void 0:i.value)});if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},mounted(){var i,u,l,e;const t=(u=(i=this.$el.parentElement)==null?void 0:i.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),n=(e=(l=this.$el.parentElement)==null?void 0:l.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),n&&n.removeAttribute("id")},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>=this.minSearchCharacters?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},handleKeyDownEnter(t){this.expanded&&(t.preventDefault(),this.chooseOption())},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(i=>i.value===this.selectedOption.value),n=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[n]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(i=>i.value===this.selectedOption.value),n=t===0?t:t-1;this.selectedOption=this.visibleOptions[n]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},z=["id","value","name","placeholder","aria-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"};function Q(t,n,i,u,l,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),I=p("ListBox");return a(),o("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[n[4]||(n[4]=r(s=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(s=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(s=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(s=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...s)=>e.makeInactive&&e.makeInactive(...s),["esc"])),n[9]||(n[9]=r((...s)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...s),["enter"]))]},[c("input",{id:i.comboboxid,ref:"comboInput",value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:i.name,placeholder:i.placeholder,"aria-controls":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-describedby":i.describedbyId,"aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,onInput:n[0]||(n[0]=(...s)=>e.handleInput&&e.handleInput(...s)),onChange:n[1]||(n[1]=(...s)=>e.handleChange&&e.handleChange(...s)),onBlur:n[2]||(n[2]=(...s)=>e.onInputBlur&&e.onInputBlur(...s)),onFocus:n[3]||(n[3]=(...s)=>e.handleFocus&&e.handleFocus(...s))},null,40,z),l.searchValue.length>0?(a(),f(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),C(I,{id:e.listBoxId,hidden:e.listBoxHidden,"aria-labelledby":`${i.comboboxid}-label`,"is-loading":e.isLoading},{default:_(()=>[(a(!0),o(B,null,k(e.visibleOptions,(s,m)=>{var b;return a(),f(O,{id:`${e.optionId}-${m}`,key:m,option:s,focused:((b=e.selectedOption)==null?void 0:b.value)===(s==null?void 0:s.value),"search-value":l.searchValue,onMousedown:X=>e.clickOption(s)},null,8,["id","option","focused","search-value","onMousedown"])}),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),c("div",J,x(l.resultCountMessage),1)],34)}var W=h(U,[["render",Q]]);const Z=w(W,{shadowRoot:!1});export{Z as default};
+import{v as C,a as p,i as r,f as I,u as _,q as b,b as D,x as oe,t as F,y as E,z as se,e as N,r as y,A as s,B as ue,C as O,p as q,j as ie,D as re,F as ce,l as de,s as ve}from"../runtime-dom.esm-bundler.js";const fe=["aria-label","title"],pe={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},me=["href"],be={__name:"ComboboxClear",setup(l){const c=C("iconPath"),t=C("clearInput");return(i,o)=>(r(),p("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:o[0]||(o[0]=u=>i.$emit("clear",u)),onKeydown:o[1]||(o[1]=b(u=>i.$emit("clear",u),["enter"])),"aria-label":_(t),title:_(t)},[(r(),p("svg",pe,[I("use",{href:`${_(c)}#icon-close`},null,8,me)]))],40,fe))}},he=["hidden"],ge={key:0,class:"mds-combobox-loading"},xe={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},ye=["href"],_e={class:"mds-visually-hidden"},Ie={__name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0}},setup(l){const c=C("iconPath"),t=C("loadingText");return(i,o)=>(r(),p("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:l.hidden},[l.isLoading?(r(),p("li",ge,[(r(),p("svg",xe,[I("use",{href:`${_(c)}#icon-spinner`},null,8,ye)])),I("span",_e,F(_(t)),1)])):D("",!0),oe(i.$slots,"default")],8,he))}},$e=["aria-selected","innerHTML"],Ce={__name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},setup(l){const c=l,t=E("$listItem");se(()=>c.focused,o=>{o&&t.value?.scrollIntoView({block:"nearest",inline:"nearest"})});function i(){return c.option.label.replace(new RegExp(c.searchValue,"gi"),u=>`<span class="mds-combobox__option--marked">${u}</span>`)}return(o,u)=>(r(),p("li",{ref_key:"$listItem",ref:t,class:N(["mds-combobox__option",{"mds-combobox__option--focused":l.focused}]),role:"option","aria-selected":l.focused.toString(),onMousedown:u[0]||(u[0]=f=>o.$emit("mousedown",f)),innerHTML:i()},null,42,$e))}},Se=["id","value","name","placeholder","aria-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],ke={"aria-live":"polite",role:"status",class:"mds-visually-hidden"},we={__name:"Combobox.ce",props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2}},emits:["search","select-option","clear-all"],setup(l,{emit:c}){const t=l,i=c,o=E("$el"),u=E("$comboInput"),f=y(!1),T=y(null),S=y(null),d=y(t.value),k=y(null),$=s(()=>t.i18n?JSON.parse(t.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}),P=s(()=>g.value?g.value.label:d.value),a=s(()=>t.filterOptions?t.options.filter(e=>e.label.toLowerCase().includes(d.value.toLowerCase())):t.options),K=s(()=>`${t.comboboxid}-listbox`),V=s(()=>`${t.comboboxid}-option`),j=s(()=>t.options.length===0&&f.value),R=s(()=>{const e=a.value.findIndex(v=>String(v.value)===String(n.value?.value));if(e>-1)return`${V.value}-${e}`}),h=s(()=>!f.value),w=s(()=>a.value.length-1),z=s(()=>f.value?"true":"false"),J=s(()=>t.dataAriaInvalid?"true":"false"),n=s({get(){return T.value},set(e){T.value=e}}),g=s({get(){return S.value},set(e){S.value=e,n.value=e,i("select-option",S.value)}});ue(()=>{const e=o.value?.parentElement?.parentElement?.querySelector(".mds-form-element__fallback input"),v=o.value?.parentElement?.parentElement?.querySelector(".mds-form-element__fallback select");e&&e.remove(),v&&v.removeAttribute("id")});function U(){f.value=!0}function x(){f.value=!1}function G(e){g.value=null,d.value=e.target?e.target.value:"",B(),i("search",d.value),a.value.length>0&&L()}function B(){d.value.length===0&&A(),d.value.length>=t.minSearchCharacters?(U(),L()):x()}function Q(){B(),a.value.length>1&&L()}function W(){A(),u.value?.focus()}function A(){d.value="",g.value=null,i("clear-all")}function X(e=n.value){g.value=e,x()}function Y(e){f.value&&(e.preventDefault(),Z())}function Z(){g.value=n.value,x(),M()}function ee(){x(),M()}function te(){if(!h.value)if(n.value){const e=a.value.findIndex(m=>m.value===n.value.value),v=e===w.value?e:e+1;n.value=a.value[v]}else[n.value]=a.value}function ae(){if(!h.value)if(n.value){const e=a.value.findIndex(m=>m.value===n.value.value),v=e===0?e:e-1;n.value=a.value[v]}else n.value=a.value[w.value]}function ne(){h.value||([n.value]=a.value)}function le(){h.value||(n.value=a.value[w.value])}function L(){M(),setTimeout(()=>{const e=a.value.length===1?$.value.resultsMessage:$.value.resultsMessage_plural;k.value=e.replace("{count}",a.value.length)},1400)}function M(){k.value=null}return O("iconPath",t.iconpath),O("loadingText",$.value.loadingText),O("clearInput",$.value.clearInput),(e,v)=>(r(),p("div",{ref_key:"$el",ref:o,class:N(["mds-combobox",{"mds-combobox--active":!h.value}]),onKeydown:[b(te,["down"]),b(ae,["up"]),b(ne,["home"]),b(le,["end"]),b(x,["esc"]),b(Y,["enter"])]},[I("input",{id:l.comboboxid,ref_key:"$comboInput",ref:u,value:P.value,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:l.name,placeholder:l.placeholder,"aria-controls":K.value,"aria-expanded":z.value,"aria-autocomplete":"list","aria-describedby":l.describedbyId,"aria-activedescendant":R.value,"aria-invalid":J.value,onInput:G,onChange:B,onBlur:ee,onFocus:Q},null,40,Se),d.value.length>0?(r(),q(be,{key:0,onClear:W})):D("",!0),ie(Ie,{id:K.value,hidden:h.value,"aria-labelledby":`${l.comboboxid}-label`,"is-loading":j.value},{default:re(()=>[(r(!0),p(ce,null,de(a.value,(m,H)=>(r(),q(Ce,{id:`${V.value}-${H}`,key:H,option:m,focused:n.value?.value===m?.value,"search-value":d.value,onMousedown:Be=>X(m)},null,8,["id","option","focused","search-value","onMousedown"]))),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),I("div",ke,F(k.value),1)],34))}},Me=ve(we,{shadowRoot:!1});export{Me as default};