@mozaic-ds/web-components 0.23.0 → 0.25.0

package/public/adeo/components/listbox/Listbox.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.nested.js","sources":["../../../../src/components/listbox/Listbox.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ListboxItems } from './listbox.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let items: string;\n  export let value: any;\n  export let open: boolean;\n  export let multiple: boolean;\n  export let isfiltered: boolean;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let datadisabledexpr = 'disabled';\n  export let maxwidth = '100%';\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const uuid = Math.random();\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: allSelected = selectall ?? false;\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: value = value ? (determineSelectionState() as []) : [];\n  $: selectAllIndeterminate = true;\n\n  function determineSelectionState(): [] {\n    allSelected = false;\n    selectAllIndeterminate = false;\n    if (value && value.length === 0) {\n      allSelected = false;\n      selectAllIndeterminate = false;\n    } else if (value && value.length < parsedItems.length) {\n      selectAllIndeterminate = true;\n    } else if (value && value.length === parsedItems.length) {\n      allSelected = true;\n    }\n\n    return value;\n  }\n\n  function setItemId(index: number) {\n    return `listboxItem-${index + uuid}`;\n  }\n\n  function scrollEnd(node: HTMLElement) {\n    node.addEventListener('scroll', () => {\n      if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {\n        eventHandler.dispatch('scrollend', {});\n      }\n    });\n  }\n\n  function onSelectAll(e: Event) {\n    const ischecked = (<HTMLInputElement>e.target).checked;\n    allSelected = ischecked ? true : false;\n    if (allSelected) {\n      parsedItems.map((item) => {\n        if (\n          !item[datadisabledexpr] &&\n          value.indexOf(item[datavalueexpr]) === -1\n        )\n          value.push(item[datavalueexpr]);\n      });\n    } else {\n      value = [];\n    }\n    eventHandler.dispatch('select-all', value);\n    value = value;\n  }\n</script>\n\n<ul\n  role=\"listbox\"\n  class=\"mc-listbox\"\n  class:is-open={open}\n  class:mc-listbox--multi={multiple}\n  aria-labelledby=\"listbox\"\n  style=\"--listbox-width: {maxwidth};\"\n  use:scrollEnd\n>\n  {#if !isfiltered}\n    {#if multiple && selectall}\n      <li class=\"mc-listbox__item\">\n        <input\n          id=\"select-all\"\n          class=\"mc-listbox__input mc-checkbox__input\"\n          type=\"checkbox\"\n          indeterminate={selectAllIndeterminate}\n          bind:checked={allSelected}\n          on:change={onSelectAll}\n        />\n        <label for=\"select-all\" class=\"mc-listbox__label\">\n          {labelselectall}\n        </label>\n      </li>\n    {/if}\n    {#each parsedItems as item, index}\n      <li class=\"mc-listbox__item\" class:is-disabled={item[datadisabledexpr]}>\n        {#if !multiple}\n          <input\n            id={setItemId(index)}\n            class=\"mc-listbox__input\"\n            class:is-disabled={item[datadisabledexpr]}\n            type=\"radio\"\n            value={item[datavalueexpr]}\n            name={`listboxradio-${uuid}`}\n            disabled={Boolean(item[datadisabledexpr])}\n            bind:group={value}\n            on:change\n          />\n        {:else}\n          <input\n            id={setItemId(index)}\n            class=\"mc-listbox__input mc-checkbox__input\"\n            type=\"checkbox\"\n            value={item[datavalueexpr]}\n            checked={value.includes(item[datavalueexpr])}\n            disabled={Boolean(item[datadisabledexpr])}\n            bind:group={value}\n            on:change\n          />\n        {/if}\n\n        <label for={setItemId(index)} class=\"mc-listbox__label\">\n          {item[datatextexpr]}\n        </label>\n      </li>\n    {/each}\n  {:else}\n    <li class=\"mc-listbox__item\">\n      <span class=\"mc-listbox__empty\">{emptysearchlabel}</span>\n    </li>\n  {/if}\n</ul>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.checkbox';\n  @import '@mozaic-ds/styles/components/c.listbox';\n</style>\n"],"names":["ctx","insert","target","li","anchor","append","span","if_block","create_if_block_2","length","i","input","label","attr","__value","input_value_value","checked","input_checked_value","includes","Boolean","indexOf","dirty","toggle_class","t1_value","create_if_block_1","set_data","t1","create_if_block","ul","items","$$props","value","open","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","datadisabledexpr","maxwidth","selectall","labelselectall","uuid","Math","random","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allSelected","parsedItems","JSON","parse","selectAllIndeterminate","index","node","addEventListener","offsetHeight","scrollTop","scrollHeight","dispatch","e","ischecked","map","item","push","this","get_binding_group_value","$$binding_groups"],"mappings":"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"}
+{"version":3,"file":"Listbox.nested.js","sources":["../../../../src/components/listbox/Listbox.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ListboxItems } from './listbox.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  const uuid = Math.random();\n\n  export let name: string = `listboxradio-${uuid}`;\n  export let items: string;\n  export let value: any;\n  export let multiple: boolean;\n  export let isfiltered: boolean;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let datadisabledexpr = 'disabled';\n  export let maxwidth: string;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n  export let overlay: boolean;\n  export let width: string;\n  export let type = 'options';\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: allSelected = selectall ?? false;\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: value = value ? (determineSelectionState() as []) : [];\n  $: selectAllIndeterminate = true;\n\n  function determineSelectionState(): [] {\n    allSelected = false;\n    selectAllIndeterminate = false;\n    if (value && value.length === 0) {\n      allSelected = false;\n      selectAllIndeterminate = false;\n    } else if (value && value.length < parsedItems.length) {\n      selectAllIndeterminate = true;\n    } else if (value && value.length === parsedItems.length) {\n      allSelected = true;\n    }\n\n    return value;\n  }\n\n  function setItemId(index: number) {\n    return `listboxItem-${index + uuid}`;\n  }\n\n  function scrollEnd(node: HTMLElement) {\n    node.addEventListener('scroll', () => {\n      if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {\n        eventHandler.dispatch('scrollend', {});\n      }\n    });\n  }\n\n  function onSelectAll(e: Event) {\n    const ischecked = (<HTMLInputElement>e.target).checked;\n    allSelected = ischecked ? true : false;\n    if (allSelected) {\n      parsedItems.map((item) => {\n        if (\n          !item[datadisabledexpr] &&\n          value.indexOf(item[datavalueexpr]) === -1\n        )\n          value.push(item[datavalueexpr]);\n      });\n    } else {\n      value = [];\n    }\n    eventHandler.dispatch('select-all', value);\n    value = value;\n  }\n</script>\n\n<div\n  class=\"mc-listbox\"\n  class:mc-listbox--options={type === 'options'}\n  class:mc-listbox--multi={multiple}\n  class:mc-listbox--overlay={overlay}\n  style=\"--listbox-maxwidth': {maxwidth}; --listbox-width: {width};\"\n>\n  {#if !isfiltered}\n    <ul\n      role=\"listbox\"\n      class=\"mc-listbox__list\"\n      aria-labelledby=\"listbox\"\n      use:scrollEnd\n    >\n      {#if multiple && selectall}\n        <li class=\"mc-listbox__tile\">\n          <input\n            id=\"select-all\"\n            class=\"mc-listbox__input mc-checkbox__input\"\n            type=\"checkbox\"\n            indeterminate={selectAllIndeterminate}\n            bind:checked={allSelected}\n            on:change={onSelectAll}\n          />\n          <label for=\"select-all\" class=\"mc-listbox__label\">\n            {labelselectall}\n          </label>\n        </li>\n      {/if}\n      {#each parsedItems as item, index}\n        <li class=\"mc-listbox__tile\" class:is-disabled={item[datadisabledexpr]}>\n          {#if !multiple}\n            <input\n              id={setItemId(index)}\n              class=\"mc-listbox__input\"\n              class:is-disabled={item[datadisabledexpr]}\n              type=\"radio\"\n              value={item[datavalueexpr]}\n              {name}\n              disabled={Boolean(item[datadisabledexpr])}\n              bind:group={value}\n              on:change\n            />\n          {:else}\n            <input\n              id={setItemId(index)}\n              class=\"mc-listbox__input mc-checkbox__input\"\n              type=\"checkbox\"\n              value={item[datavalueexpr]}\n              checked={value.includes(item[datavalueexpr])}\n              disabled={Boolean(item[datadisabledexpr])}\n              bind:group={value}\n              on:change\n            />\n          {/if}\n\n          <label for={setItemId(index)} class=\"mc-listbox__label\">\n            {item[datatextexpr]}\n          </label>\n        </li>\n      {/each}\n    </ul>\n  {:else}\n    <div class=\"mc-listbox__tile mc-listbox__tile--empty\">\n      <span class=\"mc-listbox__label\">{emptysearchlabel}</span>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.checkbox';\n  @import '@mozaic-ds/styles/components/c.listbox';\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","span","if_block","create_if_block_2","length","i","ul","li","input","label","attr","__value","input_value_value","checked","input_checked_value","includes","Boolean","indexOf","dirty","toggle_class","t1_value","create_if_block_1","set_data","t1","create_if_block","div_style_value","uuid","Math","random","name","$$props","items","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","datadisabledexpr","maxwidth","selectall","labelselectall","overlay","width","type","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allSelected","parsedItems","JSON","parse","selectAllIndeterminate","index","node","addEventListener","offsetHeight","scrollTop","scrollHeight","dispatch","e","ischecked","map","item","push","this","get_binding_group_value","$$binding_groups"],"mappings":"ohQAoJuCA,EAAgB,mIADnDC,EAEKC,EAAAC,EAAAC,GADHC,EAAwDF,EAAAG,+BAAvBN,EAAgB,8CAlD5CO,EAAAP,MAAYA,EAAS,IAAAQ,EAAAR,KAenBA,EAAW,yBAAhBS,OAAIC,GAAA,0MArBRT,EAqDIC,EAAAS,EAAAP,uHA/CGJ,MAAYA,EAAS,kFAenBA,EAAW,YAAhBS,OAAIC,GAAA,EAAA,iHAAJD,0IAJKT,EAAc,sIALAA,EAAsB,mIALzCC,EAYIC,EAAAU,EAAAR,GAXFC,EAOCO,EAAAC,aAFeb,EAAW,WAG3BK,EAEOO,EAAAE,kDAJMd,EAAW,iDAFPA,EAAsB,4BACvBA,EAAW,oBAIxBA,EAAc,2GAoBTe,EAAAF,EAAA,KAAAb,MAAUA,EAAK,gGAGZa,EAAAG,QAAAC,EAAAjB,MAAKA,EAAa,sBAChBa,EAAAK,QAAAC,EAAAnB,EAAM,GAAAoB,SAASpB,MAAKA,EAAa,kBAChCqB,QAAQrB,EAAI,IAACA,EAAgB,oBANzCC,EASCC,EAAAW,EAAAT,eAFaJ,EAAK,IAAA,IAAAsB,QAAAT,EAAAG,uEAHV,MAAAO,EAAA,IAAAN,KAAAA,EAAAjB,MAAKA,EAAa,2CAChB,MAAAuB,EAAA,IAAAJ,KAAAA,EAAAnB,EAAM,GAAAoB,SAASpB,MAAKA,EAAa,wCAChCqB,QAAQrB,EAAI,IAACA,EAAgB,oDAC3BA,EAAK,IAAA,IAAAsB,QAAAT,EAAAG,oHAlBbD,EAAAF,EAAA,KAAAb,MAAUA,EAAK,0EAIZa,EAAAG,QAAAC,EAAAjB,MAAKA,EAAa,oDAEfqB,QAAQrB,EAAI,IAACA,EAAgB,KAJpBwB,EAAAX,EAAA,cAAAb,MAAKA,EAAgB,oBAH1CC,EAUCC,EAAAW,EAAAT,yBAFaJ,EAAK,iEAHV,MAAAuB,EAAA,IAAAN,KAAAA,EAAAjB,MAAKA,EAAa,uFAEfqB,QAAQrB,EAAI,IAACA,EAAgB,8DAC3BA,EAAK,gBALEwB,EAAAX,EAAA,cAAAb,MAAKA,EAAgB,iEAsBzCyB,EAAAzB,MAAKA,EAAY,IAAA,0BA1BdA,EAAQ,KAAA0B,+EAyBFX,EAAAD,EAAA,MAAAd,MAAUA,EAAK,qGA1BmBwB,EAAAZ,EAAA,cAAAZ,MAAKA,EAAgB,aAArEC,EA6BIC,EAAAU,EAAAR,sBAHFC,EAEOO,EAAAE,sFADJ,MAAAS,EAAA,IAAAE,KAAAA,EAAAzB,MAAKA,EAAY,IAAA,KAAA2B,EAAAC,EAAAH,eA3B0BD,EAAAZ,EAAA,cAAAZ,MAAKA,EAAgB,wEAvBrEA,EAAU,KAAA6B,yFAFad,EAAAZ,EAAA,QAAA2B,EAAA,wBAAA9B,2BAA6BA,EAAK,IAAA,KAHpCwB,EAAArB,EAAA,sBAAS,YAATH,+BACFA,EAAQ,8BACNA,EAAO,aAJpCC,EAmEKC,EAAAC,EAAAC,uFA9D0B,KAAAmB,EAAA,IAAAO,KAAAA,EAAA,wBAAA9B,2BAA6BA,EAAK,IAAA,gCAHpCwB,EAAArB,EAAA,sBAAS,YAATH,uCACFA,EAAQ,yCACNA,EAAO,qEA9E5B+B,EAAOC,KAAKC,SAEP,IAAAC,KAAAA,kBAA+BH,KAAII,SACnCC,GAAaD,SACbE,GAAUF,YACVG,GAAiBH,cACjBI,GAAmBJ,GACnBK,iBAAAA,EAAmB,oBAAkBL,GACrCM,aAAAA,EAAe,SAAON,GACtBO,cAAAA,EAAgB,SAAOP,GACvBQ,iBAAAA,EAAmB,YAAUR,YAC7BS,GAAgBT,GAChBU,UAAAA,GAAY,GAAKV,GACjBW,eAAAA,EAAiB,cAAYX,WAC7BY,GAAgBZ,SAChBa,GAAab,GACbc,KAAAA,EAAO,WAASd,EAEvBe,EAAmB,IAAAC,EACrBC,IACAC,6mBAGDC,EAAA,GAAEC,EAAcV,SAAAA,0BAChBS,EAAA,GAAEE,EAAcpB,EAASqB,KAAKC,MAAMtB,GAAK,qBACvCkB,EAAA,EAAAjB,EAAQA,GAITiB,EAAA,GAAAC,GAAc,GACdD,EAAA,GAAAK,GAAyB,GACrBtB,GAA0B,IAAjBA,EAAM5B,QACjB6C,EAAA,GAAAC,GAAc,GACdD,EAAA,GAAAK,GAAyB,IAChBtB,GAASA,EAAM5B,OAAS+C,EAAY/C,OAC7C6C,EAAA,GAAAK,GAAyB,GAChBtB,GAASA,EAAM5B,SAAW+C,EAAY/C,QAC/C6C,EAAA,GAAAC,GAAc,GAGTlB,GAfkC,KAC1CiB,EAAA,GAAEK,GAAyB,sCAiBnB,SAAUC,GACK,MAAA,eAAAA,EAAQ7B,KAGvB,SAAU8B,GACjBA,EAAKC,iBAAiB,UAAQ,KACxBD,EAAKE,aAAeF,EAAKG,WAAaH,EAAKI,cAC7Cf,EAAagB,SAAS,YAAW,CAAA,OAK9B,SAAYC,GACb,MAAAC,EAA+BD,EAAEjE,OAAQgB,QAC/CoC,EAAA,GAAAC,IAAca,GACVb,EACFC,EAAYa,KAAKC,IAEZA,EAAK3B,KACkC,IAAxCN,EAAMf,QAAQgD,EAAK5B,KAEnBL,EAAMkC,KAAKD,EAAK5B,GAAa,QAGjCL,EAAK,IAEPa,EAAagB,SAAS,aAAc7B,oFA0BdkB,EAAWiB,KAAAtD,mCAmBXmB,EAAKmC,KAAAxD,6BAWLqB,EAAKoC,EAAAC,EAAA,GAAAF,KAAAxD,QAAAwD,KAAAtD"}

package/public/adeo/components/listbox/Listbox.nested.svelte

@@ -8,20 +8,24 @@
     createEventDispatcher,
   } from 'svelte/internal';
 
+  const uuid = Math.random();
+
+  export let name: string = `listboxradio-${uuid}`;
   export let items: string;
   export let value: any;
-  export let open: boolean;
   export let multiple: boolean;
   export let isfiltered: boolean;
   export let emptysearchlabel = 'No results found';
   export let datatextexpr = 'label';
   export let datavalueexpr = 'value';
   export let datadisabledexpr = 'disabled';
-  export let maxwidth = '100%';
+  export let maxwidth: string;
   export let selectall = false;
   export let labelselectall = 'Select all';
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
 
-  const uuid = Math.random();
   let eventHandler = new EventHandler(
     get_current_component(),
     createEventDispatcher(),
@@ -78,69 +82,74 @@
   }
 </script>
 
-<ul
-  role="listbox"
+<div
   class="mc-listbox"
-  class:is-open={open}
+  class:mc-listbox--options={type === 'options'}
   class:mc-listbox--multi={multiple}
-  aria-labelledby="listbox"
-  style="--listbox-width: {maxwidth};"
-  use:scrollEnd
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth': {maxwidth}; --listbox-width: {width};"
 >
   {#if !isfiltered}
-    {#if multiple && selectall}
-      <li class="mc-listbox__item">
-        <input
-          id="select-all"
-          class="mc-listbox__input mc-checkbox__input"
-          type="checkbox"
-          indeterminate={selectAllIndeterminate}
-          bind:checked={allSelected}
-          on:change={onSelectAll}
-        />
-        <label for="select-all" class="mc-listbox__label">
-          {labelselectall}
-        </label>
-      </li>
-    {/if}
-    {#each parsedItems as item, index}
-      <li class="mc-listbox__item" class:is-disabled={item[datadisabledexpr]}>
-        {#if !multiple}
-          <input
-            id={setItemId(index)}
-            class="mc-listbox__input"
-            class:is-disabled={item[datadisabledexpr]}
-            type="radio"
-            value={item[datavalueexpr]}
-            name={`listboxradio-${uuid}`}
-            disabled={Boolean(item[datadisabledexpr])}
-            bind:group={value}
-            on:change
-          />
-        {:else}
+    <ul
+      role="listbox"
+      class="mc-listbox__list"
+      aria-labelledby="listbox"
+      use:scrollEnd
+    >
+      {#if multiple && selectall}
+        <li class="mc-listbox__tile">
           <input
-            id={setItemId(index)}
+            id="select-all"
             class="mc-listbox__input mc-checkbox__input"
             type="checkbox"
-            value={item[datavalueexpr]}
-            checked={value.includes(item[datavalueexpr])}
-            disabled={Boolean(item[datadisabledexpr])}
-            bind:group={value}
-            on:change
+            indeterminate={selectAllIndeterminate}
+            bind:checked={allSelected}
+            on:change={onSelectAll}
           />
-        {/if}
+          <label for="select-all" class="mc-listbox__label">
+            {labelselectall}
+          </label>
+        </li>
+      {/if}
+      {#each parsedItems as item, index}
+        <li class="mc-listbox__tile" class:is-disabled={item[datadisabledexpr]}>
+          {#if !multiple}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input"
+              class:is-disabled={item[datadisabledexpr]}
+              type="radio"
+              value={item[datavalueexpr]}
+              {name}
+              disabled={Boolean(item[datadisabledexpr])}
+              bind:group={value}
+              on:change
+            />
+          {:else}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input mc-checkbox__input"
+              type="checkbox"
+              value={item[datavalueexpr]}
+              checked={value.includes(item[datavalueexpr])}
+              disabled={Boolean(item[datadisabledexpr])}
+              bind:group={value}
+              on:change
+            />
+          {/if}
 
-        <label for={setItemId(index)} class="mc-listbox__label">
-          {item[datatextexpr]}
-        </label>
-      </li>
-    {/each}
+          <label for={setItemId(index)} class="mc-listbox__label">
+            {item[datatextexpr]}
+          </label>
+        </li>
+      {/each}
+    </ul>
   {:else}
-    <li class="mc-listbox__item">
-      <span class="mc-listbox__empty">{emptysearchlabel}</span>
-    </li>
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
   {/if}
-</ul>
+</div>
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/all-settings';

package/public/adeo/components/listbox/Listbox.svelte

@@ -10,13 +10,15 @@
 
   export let items: string;
   export let value: any;
-  export let open: boolean;
   export let multiple: boolean;
   export let isfiltered: boolean;
   export let emptysearchlabel = 'No results found';
   export let datatextexpr = 'label';
   export let datavalueexpr = 'value';
-  export let maxwidth = '100%';
+  export let maxwidth: string;
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
 
   const uuid = Math.random();
   let eventHandler = new EventHandler(
@@ -41,52 +43,57 @@
   }
 </script>
 
-<ul
-  role="listbox"
+<div
   class="mc-listbox"
-  class:is-open={open}
+  class:mc-listbox--options={type === 'options'}
   class:mc-listbox--multi={multiple}
-  aria-labelledby="listbox"
-  style="--listbox-width: {maxwidth};"
-  use:scrollEnd
-  {...attributes}
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth': {maxwidth}; --listbox-width: {width};"
 >
   {#if !isfiltered}
-    {#each parsedItems as item, index}
-      <li class="mc-listbox__item">
-        {#if !multiple}
-          <input
-            id={setItemId(index)}
-            class="mc-listbox__input"
-            type="radio"
-            value={item[datavalueexpr]}
-            name={`listboxradio-${uuid}`}
-            bind:group={value}
-            on:change
-          />
-        {:else}
-          <input
-            id={setItemId(index)}
-            class="mc-listbox__input mc-checkbox__input"
-            type="checkbox"
-            value={item[datavalueexpr]}
-            checked={value.includes(item[datavalueexpr])}
-            bind:group={value}
-            on:change
-          />
-        {/if}
+    <ul
+      role="listbox"
+      class="mc-listbox__list"
+      aria-labelledby="listbox"
+      use:scrollEnd
+      {...attributes}
+    >
+      {#each parsedItems as item, index}
+        <li class="mc-listbox__tile">
+          {#if !multiple}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input"
+              type="radio"
+              value={item[datavalueexpr]}
+              name={`listboxradio-${uuid}`}
+              bind:group={value}
+              on:change
+            />
+          {:else}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input mc-checkbox__input"
+              type="checkbox"
+              value={item[datavalueexpr]}
+              checked={value.includes(item[datavalueexpr])}
+              bind:group={value}
+              on:change
+            />
+          {/if}
 
-        <label for={setItemId(index)} class="mc-listbox__label">
-          {item[datatextexpr]}
-        </label>
-      </li>
-    {/each}
+          <label for={setItemId(index)} class="mc-listbox__label">
+            {item[datatextexpr]}
+          </label>
+        </li>
+      {/each}
+    </ul>
   {:else}
-    <li class="mc-listbox__item">
-      <span class="mc-listbox__empty">{emptysearchlabel}</span>
-    </li>
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
   {/if}
-</ul>
+</div>
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/all-settings';

package/public/adeo/components/menu/Menu.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as i,g as n,b as s,f as l,s as a,e as o,n as c,h as m,l as r,q as d,Q as u,u as f,v as g,w as h,d as b,t as p,k as _,m as k,o as w}from"../../index-48da6c1f.js";import{E as x}from"../../EventHandler-f7ee47ca.js";function v(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function $(e){let t,i,n;return{c(){t=o("span"),i=o("slot"),m(i,"prop",n=e[8]),m(i,"name","icon"),m(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),r(t,i)},p(e,t){2&t&&n!==(n=e[8])&&m(i,"prop",n)},d(e){e&&d(t)}}}function y(e){let t,i,n,l,a,c,u,f,g,h,x=`<${C(e[8].iconName,e[0]===e[10])} />`,v=e[8].label+"",y=e[3].icon&&$(e);function E(){return e[6](e[10],e[8])}return{c(){t=o("li"),i=o("div"),n=o("span"),l=b(),y&&y.c(),a=b(),c=o("span"),u=p(v),f=b(),m(n,"class","mc-menu__icon"),m(c,"class","mc-menu__label"),m(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),m(t,"class","mc-menu__item")},m(e,o){s(e,t,o),r(t,i),r(i,n),n.innerHTML=x,r(i,l),y&&y.m(i,null),r(i,a),r(i,c),r(c,u),r(t,f),g||(h=k(i,"click",E),g=!0)},p(t,s){e=t,3&s&&x!==(x=`<${C(e[8].iconName,e[0]===e[10])} />`)&&(n.innerHTML=x),e[3].icon?y?y.p(e,s):(y=$(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&v!==(v=e[8].label+"")&&w(u,v),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),y&&y.d(),g=!1,h()}}}function E(e){let t,i,n=e[1],l=[];for(let t=0;t<n.length;t+=1)l[t]=y(v(e,n,t));return{c(){t=o("nav"),i=o("ul");for(let e=0;e<l.length;e+=1)l[e].c();this.c=c,m(i,"class","mc-menu__list"),m(t,"class","mc-menu"),m(t,"aria-label","menu")},m(e,n){s(e,t,n),r(t,i);for(let e=0;e<l.length;e+=1)l[e]&&l[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=v(e,n,s);l[s]?l[s].p(a,t):(l[s]=y(a),l[s].c(),l[s].m(i,null))}for(;s<l.length;s+=1)l[s].d(1);l.length=n.length}},i:c,o:c,d(e){e&&d(t),u(l,e)}}}function C(e,t){return t?`${e} fill="white" `:`${e} `}function z(e,t,i){let n,s,{$$slots:l={},$$scope:a}=t;const o=f(l);let{items:c}=t,{selected:m}=t,r=new x(g(),h());function d(e,t){i(0,s=e),r.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,c=e.items),"selected"in e&&i(5,m=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=c?JSON.parse(c):[]),32&e.$$.dirty&&i(0,s=m?Number(m):"")},[s,n,d,o,c,m,(e,t)=>d(e,t)]}class L extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-menu{max-width:16rem}.mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{border-radius:0.25rem;list-style:none;overflow:hidden;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__link{font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;width:100%}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeedea}.mc-menu__link:active{background-color:#dddcd5}.mc-menu__link.is-active{background-color:#007f8c}.mc-menu__link.is-active .mc-menu__label{font-family:\"Roboto\", sans-serif;font-weight:700}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"Roboto\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(o),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},z,E,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),l()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),l()}}export{L as default};
+import{S as e,i as t,a as i,g as n,b as s,f as l,s as a,e as o,n as c,h as r,l as m,q as d,Q as u,u as f,v as g,w as h,d as b,t as p,k as _,m as k,o as w}from"../../index-48da6c1f.js";import{E as x}from"../../EventHandler-f7ee47ca.js";function v(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function $(e){let t,i,n;return{c(){t=o("span"),i=o("slot"),r(i,"prop",n=e[8]),r(i,"name","icon"),r(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),m(t,i)},p(e,t){2&t&&n!==(n=e[8])&&r(i,"prop",n)},d(e){e&&d(t)}}}function y(e){let t,i,n,l,a,c,u,f,g,h,x=`<${C(e[8].iconName,e[0]===e[10])} />`,v=e[8].label+"",y=e[3].icon&&$(e);function E(){return e[6](e[10],e[8])}return{c(){t=o("li"),i=o("div"),n=o("span"),l=b(),y&&y.c(),a=b(),c=o("span"),u=p(v),f=b(),r(n,"class","mc-menu__icon"),r(c,"class","mc-menu__label"),r(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),r(t,"class","mc-menu__item")},m(e,o){s(e,t,o),m(t,i),m(i,n),n.innerHTML=x,m(i,l),y&&y.m(i,null),m(i,a),m(i,c),m(c,u),m(t,f),g||(h=k(i,"click",E),g=!0)},p(t,s){e=t,3&s&&x!==(x=`<${C(e[8].iconName,e[0]===e[10])} />`)&&(n.innerHTML=x),e[3].icon?y?y.p(e,s):(y=$(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&v!==(v=e[8].label+"")&&w(u,v),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),y&&y.d(),g=!1,h()}}}function E(e){let t,i,n=e[1],l=[];for(let t=0;t<n.length;t+=1)l[t]=y(v(e,n,t));return{c(){t=o("nav"),i=o("ul");for(let e=0;e<l.length;e+=1)l[e].c();this.c=c,r(i,"class","mc-menu__list"),r(t,"class","mc-menu"),r(t,"aria-label","menu")},m(e,n){s(e,t,n),m(t,i);for(let e=0;e<l.length;e+=1)l[e]&&l[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=v(e,n,s);l[s]?l[s].p(a,t):(l[s]=y(a),l[s].c(),l[s].m(i,null))}for(;s<l.length;s+=1)l[s].d(1);l.length=n.length}},i:c,o:c,d(e){e&&d(t),u(l,e)}}}function C(e,t){return t?`${e} fill="white" `:`${e} `}function z(e,t,i){let n,s,{$$slots:l={},$$scope:a}=t;const o=f(l);let{items:c}=t,{selected:r}=t,m=new x(g(),h());function d(e,t){i(0,s=e),m.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,c=e.items),"selected"in e&&i(5,r=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=c?JSON.parse(c):[]),32&e.$$.dirty&&i(0,s=r?Number(r):"")},[s,n,d,o,c,r,(e,t)=>d(e,t)]}class L extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{border-radius:0.25rem;list-style:none;overflow:hidden;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__link{font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;width:100%}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeedea}.mc-menu__link:active{background-color:#dddcd5}.mc-menu__link.is-active{background-color:#007f8c}.mc-menu__link.is-active .mc-menu__label{font-family:\"Roboto\", sans-serif;font-weight:700}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"Roboto\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(o),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},z,E,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),l()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),l()}}export{L as default};
 //# sourceMappingURL=Menu.js.map