@madgex/design-system-ce 7.1.2 → 7.1.3

package/components/combobox/Combobox.ce.vue

@@ -207,7 +207,7 @@ watch(
 const searchTextVModel = ref(props.searchText);
 
 // initial prefill searchText if we are not multiple and vModel is set
-if (!props.multiple && vModel.value && !searchTextVModel.value) {
+if (!props.multiple && vModel.value?.label) {
   searchTextVModel.value = vModel.value?.label;
 }
 

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

@@ -1 +1 @@
-import{v as $,a as f,b as m,f as h,u as g,q as y,t as T,i as A,x as pe,y as D,r as _,z as W,A as S,e as G,B as C,C as fe,D as k,F as q,l as U,p as V,k as M,E as me,s as ve}from"../runtime-dom.esm-bundler.js";function be(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var F={},H;function he(){return H||(H=1,(function(t){const a={suspectRx:/"(?:_|\\u005[Ff])(?:_|\\u005[Ff])(?:p|\\u0070)(?:r|\\u0072)(?:o|\\u006[Ff])(?:t|\\u0074)(?:o|\\u006[Ff])(?:_|\\u005[Ff])(?:_|\\u005[Ff])"\s*\:/};t.parse=function(e,...n){const i=typeof n[0]=="object"&&n[0],r=n.length>1||!i?n[0]:void 0,o=n.length>1&&n[1]||i||{},u=JSON.parse(e,r);return o.protoAction==="ignore"||!u||typeof u!="object"||!e.match(a.suspectRx)||t.scan(u,o),u},t.scan=function(e,n={}){let i=[e];for(;i.length;){const r=i;i=[];for(const o of r){if(Object.prototype.hasOwnProperty.call(o,"__proto__")){if(n.protoAction!=="remove")throw new SyntaxError("Object contains forbidden prototype property");delete o.__proto__}for(const u in o){const s=o[u];s&&typeof s=="object"&&i.push(o[u])}}}},t.safeParse=function(e,n){try{return t.parse(e,n)}catch{return null}}})(F)),F}var ye=he();const _e=be(ye),ge=["aria-label","title"],xe={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},Oe=["href"],Ce={__name:"ComboboxClear",setup(t){const a=$("iconPath"),e=$("clearInput");return(n,i)=>(f(),m("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:i[0]||(i[0]=r=>n.$emit("clear",r)),onKeydown:i[1]||(i[1]=y(r=>n.$emit("clear",r),["enter"])),"aria-label":g(e),title:g(e)},[(f(),m("svg",xe,[h("use",{href:`${g(a)}#icon-close`},null,8,Oe)]))],40,ge))}},$e=["hidden"],Ie={key:0,class:"mds-combobox-loading"},Se={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},Pe=["href"],ke={class:"mds-visually-hidden"},Ae={__name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0}},setup(t){const a=$("iconPath"),e=$("loadingText");return(n,i)=>(f(),m("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:t.hidden},[t.isLoading?(f(),m("li",Ie,[(f(),m("svg",Se,[h("use",{href:`${g(a)}#icon-spinner`},null,8,Pe)])),h("span",ke,T(g(e)),1)])):A("",!0),pe(n.$slots,"default")],8,$e))}};var B=Te;function Te(t,a,e){if(!t)return e;var n,i;if(Array.isArray(a)&&(n=a.slice(0)),typeof a=="string"&&(n=a.split(".")),typeof a=="symbol"&&(n=[a]),!Array.isArray(n))throw new Error("props arg must be an array, a string or a symbol");for(;n.length;)if(i=n.shift(),!t||(t=t[i],t===void 0))return e;return t}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const N=()=>{};function Le(t,a){function e(...n){return new Promise((i,r)=>{Promise.resolve(t(()=>a.apply(this,n),{fn:a,thisArg:this,args:n})).then(i).catch(r)})}return e}function we(t,a={}){let e,n,i=N;const r=s=>{clearTimeout(s),i(),i=N};let o;return s=>{const b=D(t),p=D(a.maxWait);return e&&r(e),b<=0||p!==void 0&&p<=0?(n&&(r(n),n=void 0),Promise.resolve(s())):new Promise((c,L)=>{i=a.rejectOnCancel?L:c,o=s,p&&!n&&(n=setTimeout(()=>{e&&r(e),n=void 0,c(o())},p)),e=setTimeout(()=>{n&&r(n),n=void 0,c(s())},b)})}}function Q(t,a=200,e={}){return Le(we(a,e),t)}function Me({props:t,searchTextVModel:a,_options:e}){const n=_(!1);function i(o){const u=B(o,t.apiOptionLabelPath),s=B(o,t.apiOptionValuePath);return s==null||u===null||u===void 0?null:{label:String(u),value:String(s)}}return{isLoading:n,debouncedFetchApiOptions:Q(async function(){if(!t.apiUrl)return;const u=a?.value?.trim();try{n.value=!0;let s=await fetch(`${t.apiUrl}?${t.apiQueryKey}=${encodeURIComponent(u)}`);if(!s.ok)return;s=await s.json();const b=t.apiOptionsPath?B(s,t.apiOptionsPath):s;e.value=(b||[]).map(i).filter(p=>p!==null)}finally{n.value=!1}},350)}}const Fe=["aria-selected","innerHTML"],Be={__name:"ListBoxOption",props:{optionLabel:{type:String,required:!0},focused:{type:Boolean,default:!1},searchText:{type:String,default:""}},setup(t){const a=t,e=W("$listItem");S(()=>a.focused,i=>{i&&e.value?.scrollIntoView({block:"nearest",inline:"nearest"})});function n(){return a.optionLabel.replace(new RegExp(a.searchText,"gi"),r=>`<span class="mds-combobox__option--marked">${r}</span>`)}return(i,r)=>(f(),m("li",{ref_key:"$listItem",ref:e,class:G(["mds-combobox__option",{"mds-combobox__option--focused":t.focused}]),role:"option","aria-selected":t.focused.toString(),innerHTML:n()},null,10,Fe))}},Re={role:"status",class:"mds-visually-hidden"},je={__name:"ComboboxAriaLive",props:{visibleOptions:{type:Array,default:()=>[]},expanded:{type:Boolean,default:!1},resultsMessage:{type:String},resultsMessage_plural:{type:String}},setup(t){const a=t;S([()=>a.expanded,()=>a.visibleOptions],()=>{i()},{deep:!0});const e=_(null),n=Q(function(){const o=a.visibleOptions.length===1?a.resultsMessage:a.resultsMessage_plural;e.value=o.replace("{count}",a.visibleOptions.length)},1400);function i(){e.value=null,a.expanded&&n()}return(r,o)=>(f(),m("div",Re,T(e.value),1))}},Ee={class:"mds-combobox__pill mds-border"},Ke={class:"mds-combobox__pill-text"},De=["aria-label"],qe={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},Ue=["href"],Ve={__name:"ComboboxPill",props:{option:{type:Object,required:!0}},emits:["remove"],setup(t,{emit:a}){const e=t,n=a,i=$("iconPath"),r=$("i18nText");function o(){n("remove")}const u=C(()=>r.value.removePill.replace("{label}",e.option.label));return(s,b)=>(f(),m("div",Ee,[h("span",Ke,T(t.option.label),1),h("button",{class:"mds-combobox__pill-icon",type:"button","aria-label":u.value,onClick:o},[(f(),m("svg",qe,[h("use",{href:`${g(i)}#icon-close`},null,8,Ue)]))],8,De)]))}},He={key:0,class:"mds-visually-hidden"},Ne={key:1,class:"mds-combobox__pills"},We=["id","name","value","placeholder","aria-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],Ge={__name:"Combobox.ce",props:{value:{type:[Array,Object]},options:{type:Array},comboboxId:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:String,required:!0},searchText:{type:String,default:""},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2},apiUrl:{type:String,default:void 0},apiQueryKey:{type:String,default:"searchText"},apiOptionsPath:{type:String,default:void 0},apiOptionLabelPath:{type:String,default:"label"},apiOptionValuePath:{type:String,default:"value"},multiple:{type:Boolean,default:!1}},emits:["update:value","change"],setup(t,{emit:a}){const e=t,n=a,i=fe(),r=i?.attachInternals(),o=_(e.multiple?[]:null),u=_([]);if(e.options)u.value=Array.isArray(e.options)?e.options:[];else{const l=(i?._initialOptions||[]).map(d=>({label:d.text,value:d.value,_selected:d._selected}));u.value=l}if(e.value!==void 0&&e.value!==null)o.value=e.value;else{const l=u.value.filter(d=>d._selected);e.multiple?o.value=l:o.value=l[0]||null}S(()=>e.options,l=>{l&&(u.value=Array.isArray(l)?l:[])}),S(()=>e.value,l=>{l!==void 0&&(o.value=l)}),S(o,l=>{n("update:value",l),n("change",l);let d;if(e.multiple){d=new FormData;for(const v of l||[])v.value&&d.append(e.name,v.value)}else d=l?.value;r?.setFormValue(d||"")},{immediate:!0});const s=_(e.searchText);!e.multiple&&o.value&&!s.value&&(s.value=o.value?.label);const b=W("$comboInput"),p=_(!1),c=_(null),{isLoading:L,debouncedFetchApiOptions:z}=Me({props:e,searchTextVModel:s,_options:u}),x=C(()=>{const l={loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input",removePill:"Remove {label}",selectedOptionsLabel:"Selected options:"},d=e.i18n?_e.safeParse(e.i18n):{};return{...l,...d}}),O=C(()=>e.apiUrl?u.value:u.value.filter(l=>l?.label?.toLowerCase().includes(s.value.toLowerCase()))),R=C(()=>`${e.comboboxId}-listbox`);function j(l){if(typeof l=="number"&&l>-1)return`${e.comboboxId}-option-${l}`}const J=C(()=>p.value?"true":"false"),X=C(()=>e.dataAriaInvalid?"true":"false");function E(l){if(!l){console.error("attempted to choose an option, but option was falsy");return}e.multiple?(o.value?.find(v=>v.value===l.value)||(o.value=[...o.value,l]),s.value=""):(o.value=l,s.value=l.label),I(),c.value=null}function Y(){p.value=!0}function I(){p.value=!1}function K(){s.value="",e.multiple||(o.value=null)}function Z(l){c.value=null,s.value=l.target?l.target.value:"",w(),z()}function w(){s.value.length===0&&K(),s.value.length>=e.minSearchCharacters?Y():I()}function ee(){w()}function te(){K(),b.value?.focus()}function ne(){b.value?.focus()}function ae(l){o.value=o.value.filter(d=>d.value!==l.value)}function le(l){E(l)}function oe(l){if(p.value){l.preventDefault();const d=O.value?.[c.value];d?E(d):I()}}function ie(){I()}function se(){p.value&&(c.value!==null?c.value=Math.min(c.value+1,O.value.length-1):c.value=0)}function ue(){p.value&&(c.value!==null?c.value=Math.max(c.value-1,0):c.value=O.value.length-1)}function re(){p.value&&(c.value=0)}function ce(){p.value&&(c.value=O.value.length-1)}function de(){I()}return k("iconPath",e.iconpath),k("i18nText",x),k("loadingText",x.value.loadingText),k("clearInput",x.value.clearInput),(l,d)=>(f(),m("div",{class:G(["mds-combobox",{"mds-combobox--active":p.value}]),onKeydown:[y(se,["down"]),y(ue,["up"]),y(re,["home"]),y(ce,["end"]),y(de,["esc"]),y(oe,["enter"])]},[h("div",{class:"mds-form-control",onClick:ne},[t.multiple&&o.value?.length?(f(),m("span",He,T(x.value.selectedOptionsLabel),1)):A("",!0),t.multiple&&o.value?.length?(f(),m("ul",Ne,[(f(!0),m(q,null,U(o.value,v=>(f(),m("li",{key:v.value},[M(Ve,{option:v,onRemove:P=>ae(v)},null,8,["option","onRemove"])]))),128))])):A("",!0),h("input",{id:t.comboboxId,class:"mds-combobox__search-input",name:`${t.name}_search`,ref_key:"$comboInput",ref:b,value:s.value,autocomplete:"off",type:"text",role:"combobox",placeholder:t.placeholder,"aria-controls":R.value,"aria-expanded":J.value,"aria-autocomplete":"list","aria-describedby":t.describedbyId,"aria-activedescendant":j(c.value),"aria-invalid":X.value,onInput:Z,onChange:w,onBlur:ie,onFocus:ee},null,40,We),s.value.length>0?(f(),V(Ce,{key:2,onClear:te})):A("",!0)]),M(Ae,{id:R.value,hidden:!p.value,"aria-labelledby":`${t.comboboxId}-label`,"is-loading":g(L)},{default:me(()=>[(f(!0),m(q,null,U(O.value,(v,P)=>(f(),V(Be,{id:j(P),key:P,"option-label":v.label,focused:c.value===P,"search-text":s.value,onMousedown:Je=>le(v)},null,8,["id","option-label","focused","search-text","onMousedown"]))),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),M(je,{"visible-options":O.value,expanded:p.value,"results-message":x.value.resultsMessage,"results-message_plural":x.value.resultsMessage_plural},null,8,["visible-options","expanded","results-message","results-message_plural"])],34))}},Qe=ve(Ge,{shadowRoot:!1});class ze extends Qe{connectedCallback(){const a=Array.from(this.querySelectorAll(":scope > option")).map(e=>({value:e.value,text:e.textContent.trim(),_selected:e.hasAttribute("selected")}));(a.length>0||!Array.isArray(this._initialOptions))&&(this._initialOptions=a),super.connectedCallback()}}Object.defineProperty(ze,"formAssociated",{value:!0,writable:!1});export{ze as default};
+import{v as $,a as f,b as m,f as h,u as g,q as y,t as T,i as A,x as pe,y as D,r as _,z as W,A as S,e as G,B as C,C as fe,D as k,F as q,l as U,p as V,k as M,E as me,s as ve}from"../runtime-dom.esm-bundler.js";function be(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var F={},H;function he(){return H||(H=1,(function(t){const a={suspectRx:/"(?:_|\\u005[Ff])(?:_|\\u005[Ff])(?:p|\\u0070)(?:r|\\u0072)(?:o|\\u006[Ff])(?:t|\\u0074)(?:o|\\u006[Ff])(?:_|\\u005[Ff])(?:_|\\u005[Ff])"\s*\:/};t.parse=function(e,...n){const i=typeof n[0]=="object"&&n[0],r=n.length>1||!i?n[0]:void 0,o=n.length>1&&n[1]||i||{},u=JSON.parse(e,r);return o.protoAction==="ignore"||!u||typeof u!="object"||!e.match(a.suspectRx)||t.scan(u,o),u},t.scan=function(e,n={}){let i=[e];for(;i.length;){const r=i;i=[];for(const o of r){if(Object.prototype.hasOwnProperty.call(o,"__proto__")){if(n.protoAction!=="remove")throw new SyntaxError("Object contains forbidden prototype property");delete o.__proto__}for(const u in o){const s=o[u];s&&typeof s=="object"&&i.push(o[u])}}}},t.safeParse=function(e,n){try{return t.parse(e,n)}catch{return null}}})(F)),F}var ye=he();const _e=be(ye),ge=["aria-label","title"],xe={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},Oe=["href"],Ce={__name:"ComboboxClear",setup(t){const a=$("iconPath"),e=$("clearInput");return(n,i)=>(f(),m("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:i[0]||(i[0]=r=>n.$emit("clear",r)),onKeydown:i[1]||(i[1]=y(r=>n.$emit("clear",r),["enter"])),"aria-label":g(e),title:g(e)},[(f(),m("svg",xe,[h("use",{href:`${g(a)}#icon-close`},null,8,Oe)]))],40,ge))}},$e=["hidden"],Ie={key:0,class:"mds-combobox-loading"},Se={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},Pe=["href"],ke={class:"mds-visually-hidden"},Ae={__name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0}},setup(t){const a=$("iconPath"),e=$("loadingText");return(n,i)=>(f(),m("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:t.hidden},[t.isLoading?(f(),m("li",Ie,[(f(),m("svg",Se,[h("use",{href:`${g(a)}#icon-spinner`},null,8,Pe)])),h("span",ke,T(g(e)),1)])):A("",!0),pe(n.$slots,"default")],8,$e))}};var B=Te;function Te(t,a,e){if(!t)return e;var n,i;if(Array.isArray(a)&&(n=a.slice(0)),typeof a=="string"&&(n=a.split(".")),typeof a=="symbol"&&(n=[a]),!Array.isArray(n))throw new Error("props arg must be an array, a string or a symbol");for(;n.length;)if(i=n.shift(),!t||(t=t[i],t===void 0))return e;return t}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const N=()=>{};function Le(t,a){function e(...n){return new Promise((i,r)=>{Promise.resolve(t(()=>a.apply(this,n),{fn:a,thisArg:this,args:n})).then(i).catch(r)})}return e}function we(t,a={}){let e,n,i=N;const r=s=>{clearTimeout(s),i(),i=N};let o;return s=>{const b=D(t),p=D(a.maxWait);return e&&r(e),b<=0||p!==void 0&&p<=0?(n&&(r(n),n=void 0),Promise.resolve(s())):new Promise((c,L)=>{i=a.rejectOnCancel?L:c,o=s,p&&!n&&(n=setTimeout(()=>{e&&r(e),n=void 0,c(o())},p)),e=setTimeout(()=>{n&&r(n),n=void 0,c(s())},b)})}}function Q(t,a=200,e={}){return Le(we(a,e),t)}function Me({props:t,searchTextVModel:a,_options:e}){const n=_(!1);function i(o){const u=B(o,t.apiOptionLabelPath),s=B(o,t.apiOptionValuePath);return s==null||u===null||u===void 0?null:{label:String(u),value:String(s)}}return{isLoading:n,debouncedFetchApiOptions:Q(async function(){if(!t.apiUrl)return;const u=a?.value?.trim();try{n.value=!0;let s=await fetch(`${t.apiUrl}?${t.apiQueryKey}=${encodeURIComponent(u)}`);if(!s.ok)return;s=await s.json();const b=t.apiOptionsPath?B(s,t.apiOptionsPath):s;e.value=(b||[]).map(i).filter(p=>p!==null)}finally{n.value=!1}},350)}}const Fe=["aria-selected","innerHTML"],Be={__name:"ListBoxOption",props:{optionLabel:{type:String,required:!0},focused:{type:Boolean,default:!1},searchText:{type:String,default:""}},setup(t){const a=t,e=W("$listItem");S(()=>a.focused,i=>{i&&e.value?.scrollIntoView({block:"nearest",inline:"nearest"})});function n(){return a.optionLabel.replace(new RegExp(a.searchText,"gi"),r=>`<span class="mds-combobox__option--marked">${r}</span>`)}return(i,r)=>(f(),m("li",{ref_key:"$listItem",ref:e,class:G(["mds-combobox__option",{"mds-combobox__option--focused":t.focused}]),role:"option","aria-selected":t.focused.toString(),innerHTML:n()},null,10,Fe))}},Re={role:"status",class:"mds-visually-hidden"},je={__name:"ComboboxAriaLive",props:{visibleOptions:{type:Array,default:()=>[]},expanded:{type:Boolean,default:!1},resultsMessage:{type:String},resultsMessage_plural:{type:String}},setup(t){const a=t;S([()=>a.expanded,()=>a.visibleOptions],()=>{i()},{deep:!0});const e=_(null),n=Q(function(){const o=a.visibleOptions.length===1?a.resultsMessage:a.resultsMessage_plural;e.value=o.replace("{count}",a.visibleOptions.length)},1400);function i(){e.value=null,a.expanded&&n()}return(r,o)=>(f(),m("div",Re,T(e.value),1))}},Ee={class:"mds-combobox__pill mds-border"},Ke={class:"mds-combobox__pill-text"},De=["aria-label"],qe={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},Ue=["href"],Ve={__name:"ComboboxPill",props:{option:{type:Object,required:!0}},emits:["remove"],setup(t,{emit:a}){const e=t,n=a,i=$("iconPath"),r=$("i18nText");function o(){n("remove")}const u=C(()=>r.value.removePill.replace("{label}",e.option.label));return(s,b)=>(f(),m("div",Ee,[h("span",Ke,T(t.option.label),1),h("button",{class:"mds-combobox__pill-icon",type:"button","aria-label":u.value,onClick:o},[(f(),m("svg",qe,[h("use",{href:`${g(i)}#icon-close`},null,8,Ue)]))],8,De)]))}},He={key:0,class:"mds-visually-hidden"},Ne={key:1,class:"mds-combobox__pills"},We=["id","name","value","placeholder","aria-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],Ge={__name:"Combobox.ce",props:{value:{type:[Array,Object]},options:{type:Array},comboboxId:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:String,required:!0},searchText:{type:String,default:""},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2},apiUrl:{type:String,default:void 0},apiQueryKey:{type:String,default:"searchText"},apiOptionsPath:{type:String,default:void 0},apiOptionLabelPath:{type:String,default:"label"},apiOptionValuePath:{type:String,default:"value"},multiple:{type:Boolean,default:!1}},emits:["update:value","change"],setup(t,{emit:a}){const e=t,n=a,i=fe(),r=i?.attachInternals(),o=_(e.multiple?[]:null),u=_([]);if(e.options)u.value=Array.isArray(e.options)?e.options:[];else{const l=(i?._initialOptions||[]).map(d=>({label:d.text,value:d.value,_selected:d._selected}));u.value=l}if(e.value!==void 0&&e.value!==null)o.value=e.value;else{const l=u.value.filter(d=>d._selected);e.multiple?o.value=l:o.value=l[0]||null}S(()=>e.options,l=>{l&&(u.value=Array.isArray(l)?l:[])}),S(()=>e.value,l=>{l!==void 0&&(o.value=l)}),S(o,l=>{n("update:value",l),n("change",l);let d;if(e.multiple){d=new FormData;for(const v of l||[])v.value&&d.append(e.name,v.value)}else d=l?.value;r?.setFormValue(d||"")},{immediate:!0});const s=_(e.searchText);!e.multiple&&o.value?.label&&(s.value=o.value?.label);const b=W("$comboInput"),p=_(!1),c=_(null),{isLoading:L,debouncedFetchApiOptions:z}=Me({props:e,searchTextVModel:s,_options:u}),x=C(()=>{const l={loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input",removePill:"Remove {label}",selectedOptionsLabel:"Selected options:"},d=e.i18n?_e.safeParse(e.i18n):{};return{...l,...d}}),O=C(()=>e.apiUrl?u.value:u.value.filter(l=>l?.label?.toLowerCase().includes(s.value.toLowerCase()))),R=C(()=>`${e.comboboxId}-listbox`);function j(l){if(typeof l=="number"&&l>-1)return`${e.comboboxId}-option-${l}`}const J=C(()=>p.value?"true":"false"),X=C(()=>e.dataAriaInvalid?"true":"false");function E(l){if(!l){console.error("attempted to choose an option, but option was falsy");return}e.multiple?(o.value?.find(v=>v.value===l.value)||(o.value=[...o.value,l]),s.value=""):(o.value=l,s.value=l.label),I(),c.value=null}function Y(){p.value=!0}function I(){p.value=!1}function K(){s.value="",e.multiple||(o.value=null)}function Z(l){c.value=null,s.value=l.target?l.target.value:"",w(),z()}function w(){s.value.length===0&&K(),s.value.length>=e.minSearchCharacters?Y():I()}function ee(){w()}function te(){K(),b.value?.focus()}function ne(){b.value?.focus()}function ae(l){o.value=o.value.filter(d=>d.value!==l.value)}function le(l){E(l)}function oe(l){if(p.value){l.preventDefault();const d=O.value?.[c.value];d?E(d):I()}}function ie(){I()}function se(){p.value&&(c.value!==null?c.value=Math.min(c.value+1,O.value.length-1):c.value=0)}function ue(){p.value&&(c.value!==null?c.value=Math.max(c.value-1,0):c.value=O.value.length-1)}function re(){p.value&&(c.value=0)}function ce(){p.value&&(c.value=O.value.length-1)}function de(){I()}return k("iconPath",e.iconpath),k("i18nText",x),k("loadingText",x.value.loadingText),k("clearInput",x.value.clearInput),(l,d)=>(f(),m("div",{class:G(["mds-combobox",{"mds-combobox--active":p.value}]),onKeydown:[y(se,["down"]),y(ue,["up"]),y(re,["home"]),y(ce,["end"]),y(de,["esc"]),y(oe,["enter"])]},[h("div",{class:"mds-form-control",onClick:ne},[t.multiple&&o.value?.length?(f(),m("span",He,T(x.value.selectedOptionsLabel),1)):A("",!0),t.multiple&&o.value?.length?(f(),m("ul",Ne,[(f(!0),m(q,null,U(o.value,v=>(f(),m("li",{key:v.value},[M(Ve,{option:v,onRemove:P=>ae(v)},null,8,["option","onRemove"])]))),128))])):A("",!0),h("input",{id:t.comboboxId,class:"mds-combobox__search-input",name:`${t.name}_search`,ref_key:"$comboInput",ref:b,value:s.value,autocomplete:"off",type:"text",role:"combobox",placeholder:t.placeholder,"aria-controls":R.value,"aria-expanded":J.value,"aria-autocomplete":"list","aria-describedby":t.describedbyId,"aria-activedescendant":j(c.value),"aria-invalid":X.value,onInput:Z,onChange:w,onBlur:ie,onFocus:ee},null,40,We),s.value.length>0?(f(),V(Ce,{key:2,onClear:te})):A("",!0)]),M(Ae,{id:R.value,hidden:!p.value,"aria-labelledby":`${t.comboboxId}-label`,"is-loading":g(L)},{default:me(()=>[(f(!0),m(q,null,U(O.value,(v,P)=>(f(),V(Be,{id:j(P),key:P,"option-label":v.label,focused:c.value===P,"search-text":s.value,onMousedown:Je=>le(v)},null,8,["id","option-label","focused","search-text","onMousedown"]))),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),M(je,{"visible-options":O.value,expanded:p.value,"results-message":x.value.resultsMessage,"results-message_plural":x.value.resultsMessage_plural},null,8,["visible-options","expanded","results-message","results-message_plural"])],34))}},Qe=ve(Ge,{shadowRoot:!1});class ze extends Qe{connectedCallback(){const a=Array.from(this.querySelectorAll(":scope > option")).map(e=>({value:e.value,text:e.textContent.trim(),_selected:e.hasAttribute("selected")}));(a.length>0||!Array.isArray(this._initialOptions))&&(this._initialOptions=a),super.connectedCallback()}}Object.defineProperty(ze,"formAssociated",{value:!0,writable:!1});export{ze as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system-ce",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "description": "Custom Elements built in Vue3",
   "main": "dist/index.js",
   "exports": {