@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/link/Link.svelte

@@ -1,138 +1,86 @@
-<svelte:options customElement="m-link" />
+<svelte:options tag={null} />
 
 <script lang="ts">
-  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
-  interface Props {
-    href: string;
-    target: string;
-    appearance?: LinkStyle;
-    disabled?: boolean;
-    size?: LinkSize;
-    inline?: boolean;
-    iconposition?: LinkIconPosition | undefined;
-    [key: string]: any;
+  import { get_current_component } from 'svelte/internal';
+  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let label: string;
+  export let href: string;
+  export let target: string;
+  export let theme: LinkTheme = undefined;
+  export let disabled = false;
+  export let size: LinkSize = 'm';
+  export let iconname: string | undefined = undefined;
+  export let iconposition: LinkIconPosition | undefined = undefined;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function generateIconName(iconName: string): string {
+    return `${iconName} size="1rem"`;
   }
 
-  let {
-    href,
-    target,
-    appearance = undefined,
-    disabled = false,
-    size = 'm',
-    inline = false,
-    iconposition = undefined,
-    ...events
-  }: Props = $props();
+  function generateIconClass(iconposition: string): string {
+    const classes = ['mc-link__icon'];
+
+    if (iconposition === 'left') {
+      classes.push('mc-link__icon--left');
+    }
+
+    if (iconposition === 'right') {
+      classes.push('mc-link__icon--right');
+    }
+    return classes.join(' ');
+  }
 
-  function setClasses(
-    appearance: LinkStyle,
-    size: LinkSize,
-    inline: boolean,
-  ): string {
+  function setClasses(theme: LinkTheme, size: LinkSize): string {
     const classes = ['mc-link'];
 
-    if (appearance) {
-      classes.push(`mc-link--${appearance}`);
+    if (theme) {
+      classes.push(`mc-link--${theme}`);
     }
     if (size) {
       classes.push(`mc-link--${size}`);
     }
-    if (inline) {
-      classes.push('mc-link--inline');
-    } else {
-      classes.push('mc-link--stand-alone');
-    }
     return classes.join(' ');
   }
 </script>
 
 <a
+  use:forwardEvents
+  on:click
   {href}
   {target}
-  class="{setClasses(appearance, size, inline)} {disabled
-    ? 'is-disabled'
-    : ''} "
-  {...events}
+  class="{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}"
+  {...attributes}
 >
-  {#if iconposition === 'left'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
+  {#if (iconname || $$slots.icon) && iconposition === 'left'}
+    <span class={generateIconClass(iconposition)}>
+      {#if iconname}
+        {@html `<${generateIconName(iconname)} />`}
+      {:else if $$slots.icon}
+        <slot name="icon" />
+      {/if}
     </span>
   {/if}
-  <span class="mc-link__label">
-    <slot />
-  </span>
-  {#if iconposition === 'right'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
+
+  {label}
+
+  {#if (iconname || $$slots.icon) && iconposition === 'right'}
+    <span class={generateIconClass(iconposition)}>
+      {#if iconname}
+        {@html `<${generateIconName(iconname)} />`}
+      {:else if $$slots.icon}
+        <slot name="icon" />
+      {/if}
     </span>
   {/if}
 </a>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-link {
-  transition: box-shadow 200ms ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  min-height: 1.5rem;
-  text-decoration: none;
-  color: var(--link-color-text-primary, #000000);
-  font-size: 0.875rem;
-}
-.mc-link__label {
-  line-height: 1.3;
-}
-.mc-link__icon {
-  display: block;
-  height: 1.25rem;
-  width: 1.25rem;
-  flex-shrink: 0;
-  fill: currentcolor;
-}
-.mc-link:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label {
-  text-decoration: underline;
-}
-.mc-link:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-link--m {
-  min-height: 2rem;
-  font-size: 1rem;
-}
-.mc-link--secondary {
-  color: var(--link-color-text-secondary, #666666);
-}
-.mc-link--accent {
-  color: var(--link-color-text-accent, #117f03);
-}
-.mc-link--inverse {
-  --focus-color-mid: var(--focus-color-outline-outer, #000000);
-  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
-  color: var(--link-color-text-inverse, #ffffff);
-}
-.mc-link--stand-alone {
-  min-height: 2rem;
-  font-weight: 600;
-}
-.mc-link--stand-alone .mc-link__label {
-  border-bottom: 1px solid currentColor;
-}
-.mc-link--stand-alone:hover .mc-link__label {
-  border-color: transparent;
-}
-.mc-link--inline {
-  font-weight: inherit;
-  text-decoration: underline;
-}
-.mc-link--inline .mc-link__label {
-  line-height: 1;
-}
-.mc-link--inline:hover {
-  text-decoration: none;
-}</style>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.links';
+</style>

package/dist/components/link/link.types.d.ts

@@ -1,4 +1,4 @@
 export type LinkSize = 's' | 'm';
-export type LinkStyle = 'accent' | 'inverse' | 'secondary' | 'standard' | undefined;
+export type LinkTheme = 'danger' | 'neutral' | 'light' | undefined;
 export type LinkIconPosition = 'left' | 'right';
 //# sourceMappingURL=link.types.d.ts.map

package/dist/components/link/link.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.types.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACjC,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,CAAC;AACd,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}
+{"version":3,"file":"link.types.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACjC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a as i,b as o,f as l,s,e as a,n as c,h as r,M as n,t as m,m as b,o as d,q as h,r as x,c as p,u,V as _,a0 as g,v as f,k as v,y as w,j as k,N as y,l as $,R as E,d as C,a1 as z,x as M,P as B}from"../../index-c222d0b7.js";import{E as j}from"../../EventHandler-f7ee47ca.js";function H(e,t,i){const o=e.slice();return o[23]=t[i],o[25]=i,o}function L(e){let t,i,l;return{c(){t=a("div"),i=a("span"),l=f(e[3]),r(i,"class","mc-listbox__label"),r(t,"class","mc-listbox__tile mc-listbox__tile--empty")},m(e,s){o(e,t,s),v(t,i),v(i,l)},p(e,t){8&t&&w(l,e[3])},d(e){e&&b(t)}}}function A(e){let t,i,l,s=e[11],c=[];for(let t=0;t<s.length;t+=1)c[t]=R(H(e,s,t));let r=[{role:"listbox"},{class:"mc-listbox__list"},{"aria-labelledby":"listbox"},e[10]],n={};for(let e=0;e<r.length;e+=1)n=p(n,r[e]);return{c(){t=a("ul");for(let e=0;e<c.length;e+=1)c[e].c();k(t,n)},m(s,a){o(s,t,a);for(let e=0;e<c.length;e+=1)c[e]&&c[e].m(t,null);i||(l=y(e[14].call(null,t)),i=!0)},p(e,i){if(14387&i){let o;for(s=e[11],o=0;o<s.length;o+=1){const l=H(e,s,o);c[o]?c[o].p(l,i):(c[o]=R(l),c[o].c(),c[o].m(t,null))}for(;o<c.length;o+=1)c[o].d(1);c.length=s.length}k(t,n=$(r,[{role:"listbox"},{class:"mc-listbox__list"},{"aria-labelledby":"listbox"},1024&i&&e[10]]))},d(e){e&&b(t),E(c,e),i=!1,l()}}}function O(e){let t,i,l,s,c,n,m=!1;return s=z(e[19][0]),{c(){t=a("input"),r(t,"id",e[13](e[25])),r(t,"class","mc-listbox__input mc-checkbox__input"),r(t,"type","checkbox"),t.__value=i=e[23][e[5]],t.value=t.__value,t.checked=l=e[0].includes(e[23][e[5]]),s.p(t)},m(i,l){o(i,t,l),t.checked=~(e[0]||[]).indexOf(t.__value),c||(n=[M(t,"change",e[20]),M(t,"change",e[17])],c=!0)},p(e,o){2080&o&&i!==(i=e[23][e[5]])&&(t.__value=i,t.value=t.__value,m=!0),2081&o&&l!==(l=e[0].includes(e[23][e[5]]))&&(t.checked=l),(m||2049&o)&&(t.checked=~(e[0]||[]).indexOf(t.__value))},d(e){e&&b(t),s.r(),c=!1,B(n)}}}function N(e){let t,i,l,s,c,n=!1;return l=z(e[19][0]),{c(){t=a("input"),r(t,"id",e[13](e[25])),r(t,"class","mc-listbox__input"),r(t,"type","radio"),t.__value=i=e[23][e[5]],t.value=t.__value,r(t,"name",`listboxradio-${e[12]}`),l.p(t)},m(i,l){o(i,t,l),t.checked=t.__value===e[0],s||(c=[M(t,"change",e[18]),M(t,"change",e[16])],s=!0)},p(e,o){2080&o&&i!==(i=e[23][e[5]])&&(t.__value=i,t.value=t.__value,n=!0),(n||2049&o)&&(t.checked=t.__value===e[0])},d(e){e&&b(t),l.r(),s=!1,B(c)}}}function R(e){let t,i,l,s,c,n=e[23][e[4]]+"";function m(e,t){return e[1]?O:N}let d=m(e),h=d(e);return{c(){t=a("li"),h.c(),i=C(),l=a("label"),s=f(n),c=C(),r(l,"for",e[13](e[25])),r(l,"class","mc-listbox__label"),r(t,"class","mc-listbox__tile")},m(e,a){o(e,t,a),h.m(t,null),v(t,i),v(t,l),v(l,s),v(t,c)},p(e,o){d===(d=m(e))&&h?h.p(e,o):(h.d(1),h=d(e),h&&(h.c(),h.m(t,i))),2064&o&&n!==(n=e[23][e[4]]+"")&&w(s,n)},d(e){e&&b(t),h.d()}}}function Y(e){let t;function i(e,t){return e[2]?L:A}let l=i(e),s=l(e);return{c(){t=a("div"),s.c(),this.c=c,r(t,"class","mc-listbox"),n(t,"--listbox-maxwidth",e[6]),n(t,"--listbox-width",e[8]),m(t,"mc-listbox--options","options"===e[9]),m(t,"mc-listbox--multi",e[1]),m(t,"mc-listbox--overlay",e[7])},m(e,i){o(e,t,i),s.m(t,null)},p(e,[o]){l===(l=i(e))&&s?s.p(e,o):(s.d(1),s=l(e),s&&(s.c(),s.m(t,null))),64&o&&n(t,"--listbox-maxwidth",e[6]),256&o&&n(t,"--listbox-width",e[8]),512&o&&m(t,"mc-listbox--options","options"===e[9]),2&o&&m(t,"mc-listbox--multi",e[1]),128&o&&m(t,"mc-listbox--overlay",e[7])},i:c,o:c,d(e){e&&b(t),s.d()}}}function S(e,t,i){let o,l;const s=["items","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth","overlay","width","type"];let a=d(t,s),{items:c}=t,{value:r}=t,{multiple:n}=t,{isfiltered:m}=t,{emptysearchlabel:b="No results found"}=t,{datatextexpr:f="label"}=t,{datavalueexpr:v="value"}=t,{maxwidth:w}=t,{overlay:k}=t,{width:y}=t,{type:$="options"}=t;const E=Math.random();let C=new j(h(),x());const z=[[]];return e.$$set=e=>{t=p(p({},t),u(e)),i(22,a=d(t,s)),"items"in e&&i(15,c=e.items),"value"in e&&i(0,r=e.value),"multiple"in e&&i(1,n=e.multiple),"isfiltered"in e&&i(2,m=e.isfiltered),"emptysearchlabel"in e&&i(3,b=e.emptysearchlabel),"datatextexpr"in e&&i(4,f=e.datatextexpr),"datavalueexpr"in e&&i(5,v=e.datavalueexpr),"maxwidth"in e&&i(6,w=e.maxwidth),"overlay"in e&&i(7,k=e.overlay),"width"in e&&i(8,y=e.width),"type"in e&&i(9,$=e.type)},e.$$.update=()=>{32768&e.$$.dirty&&i(11,o=c?JSON.parse(c):[]),i(10,l=Object.assign({},a)),1024&e.$$.dirty&&delete l.class},[r,n,m,b,f,v,w,k,y,$,l,o,E,function(e){return`listboxItem-${e+E}`},function(e){e.addEventListener("scroll",(()=>{e.offsetHeight+e.scrollTop>=e.scrollHeight&&C.dispatch("scrollend",{})}))},c,function(t){_.call(this,e,t)},function(t){_.call(this,e,t)},function(){r=this.__value,i(0,r)},z,function(){r=g(z[0],this.__value,this.checked),i(0,r)}]}class q extends e{constructor(e){super();const a=document.createElement("style");a.textContent=".mc-checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-checkbox__input{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.is-hover,.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input.is-hover::-ms-check,.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input.is-focus,.mc-checkbox__input:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input.is-focus::-ms-check,.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid.is-hover,.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid.is-hover::-ms-check,.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-listbox{background-color:#ffffff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin-left:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0}.mc-listbox__tile{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.75rem;padding-right:0.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover,.mc-listbox__tile:has(.mc-listbox__input:focus),.mc-listbox__tile:has(.mc-listbox__label:focus){background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666666;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{-webkit-box-shadow:none;box-shadow:none;background-color:#cccccc;color:#666666;pointer-events:none}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666666}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap;outline:transparent}.mc-listbox__label::after{content:\"\";position:absolute;inset:0;z-index:var(--listbox-label-z-index, 2)}.mc-listbox__input{margin-left:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:var(--listbox-minwidth, 6rem)}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label::before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label::before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:0.75rem;top:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{-webkit-transform:translate(0, calc(-100% - 1.5rem));-ms-transform:translate(0, calc(-100% - 1.5rem));transform:translate(0, calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{-webkit-transform:translate(calc(-100% + 1.5rem), 0);-ms-transform:translate(calc(-100% + 1.5rem), 0);transform:translate(calc(-100% + 1.5rem), 0)}.mc-listbox--actions.align-right.align-top{-webkit-transform:translate(calc(-100% + 1.5rem), calc(-100% - 1.5rem));-ms-transform:translate(calc(-100% + 1.5rem), calc(-100% - 1.5rem));transform:translate(calc(-100% + 1.5rem), calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--overlay{position:absolute;z-index:var(--listbox-overlay-z-index, 10)}",this.shadowRoot.appendChild(a),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},S,Y,s,{items:15,value:0,multiple:1,isfiltered:2,emptysearchlabel:3,datatextexpr:4,datavalueexpr:5,maxwidth:6,overlay:7,width:8,type:9},null),e&&(e.target&&o(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["items","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth","overlay","width","type"]}get items(){return this.$$.ctx[15]}set items(e){this.$$set({items:e}),l()}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),l()}get multiple(){return this.$$.ctx[1]}set multiple(e){this.$$set({multiple:e}),l()}get isfiltered(){return this.$$.ctx[2]}set isfiltered(e){this.$$set({isfiltered:e}),l()}get emptysearchlabel(){return this.$$.ctx[3]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),l()}get datatextexpr(){return this.$$.ctx[4]}set datatextexpr(e){this.$$set({datatextexpr:e}),l()}get datavalueexpr(){return this.$$.ctx[5]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),l()}get maxwidth(){return this.$$.ctx[6]}set maxwidth(e){this.$$set({maxwidth:e}),l()}get overlay(){return this.$$.ctx[7]}set overlay(e){this.$$set({overlay:e}),l()}get width(){return this.$$.ctx[8]}set width(e){this.$$set({width:e}),l()}get type(){return this.$$.ctx[9]}set type(e){this.$$set({type:e}),l()}}export{q as default};
+//# sourceMappingURL=Listbox.js.map

package/dist/components/listbox/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sources":["../../../src/components/listbox/Listbox.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 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 maxwidth: string;\n  export let overlay: boolean;\n  export let width: string;\n  export let type = 'options';\n\n  const uuid = Math.random();\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\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</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      {...attributes}\n    >\n      {#each parsedItems as item, index}\n        <li class=\"mc-listbox__tile\">\n          {#if !multiple}\n            <input\n              id={setItemId(index)}\n              class=\"mc-listbox__input\"\n              type=\"radio\"\n              value={item[datavalueexpr]}\n              name={`listboxradio-${uuid}`}\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              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","length","i","ul","attr","input","__value","input_value_value","checked","input_checked_value","includes","indexOf","dirty","t1_value","create_if_block_1","label","li","set_data","t1","create_if_block","toggle_class","items","$$props","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth","overlay","width","type","uuid","Math","random","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","parsedItems","JSON","parse","attributes","Object","assign","$$restProps","class","index","node","addEventListener","offsetHeight","scrollTop","scrollHeight","dispatch","this","get_binding_group_value","$$binding_groups"],"mappings":"gaA4FuCA,EAAgB,qGADnDC,EAEKC,EAAAC,EAAAC,GADHC,EAAwDF,EAAAG,2BAAvBN,EAAgB,8CAhC1CA,EAAW,yBAAhBO,OAAIC,GAAA,oGAFFR,EAAU,2HALhBC,EAoCIC,EAAAO,EAAAL,sHA7BKJ,EAAW,YAAhBO,OAAIC,GAAA,EAAA,iHAAJD,oGAFEP,EAAU,iHAgBFU,EAAAC,EAAA,KAAAX,MAAUA,EAAK,iFAGZW,EAAAC,QAAAC,EAAAb,MAAKA,EAAa,sBAChBW,EAAAG,QAAAC,EAAAf,EAAM,GAAAgB,SAAShB,MAAKA,EAAa,oBAL5CC,EAQCC,EAAAS,EAAAP,eAFaJ,EAAK,IAAA,IAAAiB,QAAAN,EAAAC,uEAFV,KAAAM,GAAAL,KAAAA,EAAAb,MAAKA,EAAa,2CAChB,KAAAkB,GAAAH,KAAAA,EAAAf,EAAM,GAAAgB,SAAShB,MAAKA,EAAa,+CAC9BA,EAAK,IAAA,IAAAiB,QAAAN,EAAAC,kHAfbF,EAAAC,EAAA,KAAAX,MAAUA,EAAK,2DAGZW,EAAAC,QAAAC,EAAAb,MAAKA,EAAa,iDACHA,EAAI,sBAL5BC,EAQCC,EAAAS,EAAAP,yBAFaJ,EAAK,iEAFV,KAAAkB,GAAAL,KAAAA,EAAAb,MAAKA,EAAa,+EAEbA,EAAK,gEAgBlBmB,EAAAnB,MAAKA,EAAY,IAAA,0BAvBdA,EAAQ,KAAAoB,+EAsBFV,EAAAW,EAAA,MAAArB,MAAUA,EAAK,+EAvB7BC,EA0BIC,EAAAoB,EAAAlB,sBAHFC,EAEOiB,EAAAD,sFADJ,KAAAH,GAAAC,KAAAA,EAAAnB,MAAKA,EAAY,IAAA,KAAAuB,EAAAC,EAAAL,oEAjCtBnB,EAAU,KAAAyB,4GAFYzB,EAAQ,0BAAqBA,EAAK,IAHnC0B,EAAAvB,EAAA,sBAAS,YAATH,8BACFA,EAAQ,8BACNA,EAAO,YAJpCC,EAkDKC,EAAAC,EAAAC,wHA7CyBJ,EAAQ,iCAAqBA,EAAK,WAHnC0B,EAAAvB,EAAA,sBAAS,YAATH,mCACFA,EAAQ,qCACNA,EAAO,wNAvCvB2B,GAAaC,SACbC,GAAUD,YACVE,GAAiBF,cACjBG,GAAmBH,GACnBI,iBAAAA,EAAmB,oBAAkBJ,GACrCK,aAAAA,EAAe,SAAOL,GACtBM,cAAAA,EAAgB,SAAON,YACvBO,GAAgBP,WAChBQ,GAAgBR,SAChBS,GAAaT,GACbU,KAAAA,EAAO,WAASV,QAErBW,EAAOC,KAAKC,SACd,IAAAC,EAAmB,IAAAC,EACrBC,IACAC,2eAGDC,EAAA,GAAEC,EAAcpB,EAASqB,KAAKC,MAAMtB,GAAK,SACvCuB,EAALC,OAAAC,UAAuBC,4BACXH,EAAWI,kCAEZ,SAAUC,GACK,MAAA,eAAAA,EAAQhB,KAGvB,SAAUiB,GACjBA,EAAKC,iBAAiB,UAAQ,KACxBD,EAAKE,aAAeF,EAAKG,WAAaH,EAAKI,cAC7ClB,EAAamB,SAAS,YAAW,CAAA,gFA8BfhC,EAAKiC,KAAAlD,6BAULiB,EAAKkC,EAAAC,EAAA,GAAAF,KAAAlD,QAAAkD,KAAAhD"}

package/dist/components/listbox/Listbox.nested.js

@@ -0,0 +1,2 @@
+import{H as e,i as t,s as l,I as s,e as i,h as o,M as a,t as c,b as n,n as r,m as g,q as d,r as b,V as m,a0 as v,v as x,k as h,y as u,d as p,N as _,R as f,x as w,P as k,a1 as y}from"../../index-c222d0b7.js";import{E as z}from"../../EventHandler-f7ee47ca.js";function E(e){s(e,"svelte-46ee2g",".mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:hover{border-color:#191919}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:hover::-ms-check{border-color:#191919}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:checked,.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-listbox.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{background-color:#ffffff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{list-style:none;margin-left:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0}.mc-listbox__tile.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.75rem;padding-right:0.75rem;position:relative}.mc-listbox__tile.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:not(.mc-listbox__tile--empty):not(.is-disabled):hover,.mc-listbox__tile.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:has(.mc-listbox__input:focus),.mc-listbox__tile.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g:has(.mc-listbox__label:focus){background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--empty.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{color:#666666;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-listbox__tile--empty.svelte-46ee2g .mc-listbox__label.svelte-46ee2g.svelte-46ee2g{cursor:default}.mc-listbox__tile.is-disabled.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{-webkit-box-shadow:none;box-shadow:none;background-color:#cccccc;color:#666666;pointer-events:none}.mc-listbox__label.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap;outline:transparent}.mc-listbox__label.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g::after{content:\"\";position:absolute;inset:0;z-index:var(--listbox-label-z-index, 2)}.mc-listbox__input.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{margin-left:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.mc-listbox.svelte-46ee2g:not(.mc-listbox--multi) .mc-listbox__input.svelte-46ee2g.svelte-46ee2g{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-listbox--options.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{max-height:13.8125rem;min-width:var(--listbox-minwidth, 6rem)}.mc-listbox--options.svelte-46ee2g .mc-listbox__tile.svelte-46ee2g.svelte-46ee2g{height:3rem}.mc-listbox--options.svelte-46ee2g .mc-listbox__tile.svelte-46ee2g.svelte-46ee2g:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options.svelte-46ee2g .mc-listbox__tile.is-selected .mc-listbox__label.svelte-46ee2g.svelte-46ee2g::before{visibility:visible}.mc-listbox--options.svelte-46ee2g .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label.svelte-46ee2g.svelte-46ee2g::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-46ee2g .mc-listbox__input.svelte-46ee2g:checked+.mc-listbox__label.svelte-46ee2g::before{visibility:visible}.mc-listbox--options.svelte-46ee2g .mc-listbox__input.svelte-46ee2g:checked:disabled+.mc-listbox__label.svelte-46ee2g::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-46ee2g .mc-listbox__label.svelte-46ee2g.svelte-46ee2g::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:0.75rem;top:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--overlay.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{position:absolute;z-index:var(--listbox-overlay-z-index, 10)}.mc-listbox__tile--auto-size.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{height:auto !important;min-height:3rem}.mc-listbox__label--no-overflow.svelte-46ee2g.svelte-46ee2g.svelte-46ee2g{white-space:break-spaces}")}function C(e,t,l){const s=e.slice();return s[31]=t[l],s[33]=l,s}function $(e){let t,l,s;return{c(){t=i("div"),l=i("span"),s=x(e[4]),o(l,"class","mc-listbox__label svelte-46ee2g"),o(t,"class","mc-listbox__tile mc-listbox__tile--empty svelte-46ee2g")},m(e,i){n(e,t,i),h(t,l),h(l,s)},p(e,t){16&t[0]&&u(s,e[4])},d(e){e&&g(t)}}}function B(e){let t,l,s,a,c=e[2]&&e[9]&&M(e),r=e[15],d=[];for(let t=0;t<r.length;t+=1)d[t]=j(C(e,r,t));return{c(){t=i("ul"),c&&c.c(),l=p();for(let e=0;e<d.length;e+=1)d[e].c();o(t,"role","listbox"),o(t,"class","mc-listbox__list svelte-46ee2g"),o(t,"aria-labelledby","listbox")},m(i,o){n(i,t,o),c&&c.m(t,null),h(t,l);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(t,null);s||(a=_(e[19].call(null,t)),s=!0)},p(e,s){if(e[2]&&e[9]?c?c.p(e,s):(c=M(e),c.c(),c.m(t,l)):c&&(c.d(1),c=null),311527&s[0]){let l;for(r=e[15],l=0;l<r.length;l+=1){const i=C(e,r,l);d[l]?d[l].p(i,s):(d[l]=j(i),d[l].c(),d[l].m(t,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}},d(e){e&&g(t),c&&c.d(),f(d,e),s=!1,a()}}}function M(e){let t,l,s,a,c,r,d;return{c(){t=i("li"),l=i("input"),s=p(),a=i("label"),c=x(e[10]),o(l,"id","select-all"),o(l,"class","mc-listbox__input mc-checkbox__input svelte-46ee2g"),o(l,"type","checkbox"),l.indeterminate=e[17],o(a,"for","select-all"),o(a,"class","mc-listbox__label svelte-46ee2g"),o(t,"class","mc-listbox__tile svelte-46ee2g")},m(i,o){n(i,t,o),h(t,l),l.checked=e[16],h(t,s),h(t,a),h(a,c),r||(d=[w(l,"change",e[24]),w(l,"change",e[20])],r=!0)},p(e,t){131072&t[0]&&(l.indeterminate=e[17]),65536&t[0]&&(l.checked=e[16]),1024&t[0]&&u(c,e[10])},d(e){e&&g(t),r=!1,k(d)}}}function H(e){let t,l,s,a,c,r,d,b=!1;return c=y(e[26][0]),{c(){t=i("input"),o(t,"id",e[18](e[33])),o(t,"class","mc-listbox__input mc-checkbox__input svelte-46ee2g"),o(t,"type","checkbox"),t.__value=l=e[31][e[6]],t.value=t.__value,t.checked=s=e[0].includes(e[31][e[6]]),t.disabled=a=Boolean(e[31][e[7]]),c.p(t)},m(l,s){n(l,t,s),t.checked=~(e[0]||[]).indexOf(t.__value),r||(d=[w(t,"change",e[27]),w(t,"change",e[23])],r=!0)},p(e,i){32832&i[0]&&l!==(l=e[31][e[6]])&&(t.__value=l,t.value=t.__value,b=!0),32833&i[0]&&s!==(s=e[0].includes(e[31][e[6]]))&&(t.checked=s),32896&i[0]&&a!==(a=Boolean(e[31][e[7]]))&&(t.disabled=a),(b||32769&i[0])&&(t.checked=~(e[0]||[]).indexOf(t.__value))},d(e){e&&g(t),c.r(),r=!1,k(d)}}}function L(e){let t,l,s,a,r,d,b=!1;return a=y(e[26][0]),{c(){t=i("input"),o(t,"id",e[18](e[33])),o(t,"class","mc-listbox__input svelte-46ee2g"),o(t,"type","radio"),t.__value=l=e[31][e[6]],t.value=t.__value,o(t,"name",e[1]),t.disabled=s=Boolean(e[31][e[7]]),c(t,"is-disabled",e[31][e[7]]),a.p(t)},m(l,s){n(l,t,s),t.checked=t.__value===e[0],r||(d=[w(t,"change",e[25]),w(t,"change",e[22])],r=!0)},p(e,i){32832&i[0]&&l!==(l=e[31][e[6]])&&(t.__value=l,t.value=t.__value,b=!0),2&i[0]&&o(t,"name",e[1]),32896&i[0]&&s!==(s=Boolean(e[31][e[7]]))&&(t.disabled=s),(b||32769&i[0])&&(t.checked=t.__value===e[0]),32896&i[0]&&c(t,"is-disabled",e[31][e[7]])},d(e){e&&g(t),a.r(),r=!1,k(d)}}}function j(e){let t,l,s,a,r,d=e[31][e[5]]+"";function b(e,t){return e[2]?H:L}let m=b(e),v=m(e);return{c(){t=i("li"),v.c(),l=p(),s=i("label"),a=x(d),r=p(),o(s,"for",e[18](e[33])),o(s,"class","mc-listbox__label svelte-46ee2g"),c(s,"mc-listbox__label--no-overflow",e[14]),o(t,"class","mc-listbox__tile svelte-46ee2g"),c(t,"is-disabled",e[31][e[7]]),c(t,"mc-listbox__tile--auto-size",e[14])},m(e,i){n(e,t,i),v.m(t,null),h(t,l),h(t,s),h(s,a),h(t,r)},p(e,i){m===(m=b(e))&&v?v.p(e,i):(v.d(1),v=m(e),v&&(v.c(),v.m(t,l))),32800&i[0]&&d!==(d=e[31][e[5]]+"")&&u(a,d),16384&i[0]&&c(s,"mc-listbox__label--no-overflow",e[14]),32896&i[0]&&c(t,"is-disabled",e[31][e[7]]),16384&i[0]&&c(t,"mc-listbox__tile--auto-size",e[14])},d(e){e&&g(t),v.d()}}}function O(e){let t;function l(e,t){return e[3]?$:B}let s=l(e),d=s(e);return{c(){t=i("div"),d.c(),o(t,"class","mc-listbox svelte-46ee2g"),a(t,"--listbox-maxwidth",e[8]),a(t,"--listbox-width",e[12]),a(t,"--listbox-minwidth",e[12]),c(t,"mc-listbox--options","options"===e[13]),c(t,"mc-listbox--multi",e[2]),c(t,"mc-listbox--overlay",e[11])},m(e,l){n(e,t,l),d.m(t,null)},p(e,i){s===(s=l(e))&&d?d.p(e,i):(d.d(1),d=s(e),d&&(d.c(),d.m(t,null))),256&i[0]&&a(t,"--listbox-maxwidth",e[8]),4096&i[0]&&a(t,"--listbox-width",e[12]),4096&i[0]&&a(t,"--listbox-minwidth",e[12]),8192&i[0]&&c(t,"mc-listbox--options","options"===e[13]),4&i[0]&&c(t,"mc-listbox--multi",e[2]),2048&i[0]&&c(t,"mc-listbox--overlay",e[11])},i:r,o:r,d(e){e&&g(t),d.d()}}}function A(e,t,l){let s,i,o;const a=Math.random();let{name:c=`listboxradio-${a}`}=t,{items:n}=t,{value:r}=t,{multiple:g}=t,{isfiltered:x}=t,{emptysearchlabel:h="No results found"}=t,{datatextexpr:u="label"}=t,{datavalueexpr:p="value"}=t,{datadisabledexpr:_="disabled"}=t,{maxwidth:f}=t,{selectall:w=!1}=t,{labelselectall:k="Select all"}=t,{overlay:y}=t,{width:E}=t,{type:C="options"}=t,{labelautosize:$=!1}=t,B=new z(d(),b());const M=[[]];return e.$$set=e=>{"name"in e&&l(1,c=e.name),"items"in e&&l(21,n=e.items),"value"in e&&l(0,r=e.value),"multiple"in e&&l(2,g=e.multiple),"isfiltered"in e&&l(3,x=e.isfiltered),"emptysearchlabel"in e&&l(4,h=e.emptysearchlabel),"datatextexpr"in e&&l(5,u=e.datatextexpr),"datavalueexpr"in e&&l(6,p=e.datavalueexpr),"datadisabledexpr"in e&&l(7,_=e.datadisabledexpr),"maxwidth"in e&&l(8,f=e.maxwidth),"selectall"in e&&l(9,w=e.selectall),"labelselectall"in e&&l(10,k=e.labelselectall),"overlay"in e&&l(11,y=e.overlay),"width"in e&&l(12,E=e.width),"type"in e&&l(13,C=e.type),"labelautosize"in e&&l(14,$=e.labelautosize)},e.$$.update=()=>{512&e.$$.dirty[0]&&l(16,s=null!=w&&w),2097152&e.$$.dirty[0]&&l(15,i=n?JSON.parse(n):[]),1&e.$$.dirty[0]&&l(0,r=r?(l(16,s=!1),l(17,o=!1),r&&0===r.length?(l(16,s=!1),l(17,o=!1)):r&&r.length<i.length?l(17,o=!0):r&&r.length===i.length&&l(16,s=!0),r):[])},l(17,o=!0),[r,c,g,x,h,u,p,_,f,w,k,y,E,C,$,i,s,o,function(e){return`listboxItem-${e+a}`},function(e){e.addEventListener("scroll",(()=>{e.offsetHeight+e.scrollTop>=e.scrollHeight&&B.dispatch("scrollend",{})}))},function(e){const t=e.target.checked;l(16,s=!!t),s?i.map((e=>{e[_]||-1!==r.indexOf(e[p])||r.push(e[p])})):l(0,r=[]),B.dispatch("select-all",r),l(0,r)},n,function(t){m.call(this,e,t)},function(t){m.call(this,e,t)},function(){s=this.checked,l(16,s),l(9,w)},function(){r=this.__value,l(0,r)},M,function(){r=v(M[0],this.__value,this.checked),l(0,r)}]}class N extends e{constructor(e){super(),t(this,e,A,O,l,{name:1,items:21,value:0,multiple:2,isfiltered:3,emptysearchlabel:4,datatextexpr:5,datavalueexpr:6,datadisabledexpr:7,maxwidth:8,selectall:9,labelselectall:10,overlay:11,width:12,type:13,labelautosize:14},E,[-1,-1])}}export{N as default};
+//# sourceMappingURL=Listbox.nested.js.map

package/dist/components/listbox/Listbox.nested.js.map

@@ -0,0 +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  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  export let labelautosize = false;\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}; --listbox-minwidth: {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\n          class=\"mc-listbox__tile\"\n          class:is-disabled={item[datadisabledexpr]}\n          class:mc-listbox__tile--auto-size={labelautosize}\n        >\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\n            for={setItemId(index)}\n            class=\"mc-listbox__label\"\n            class:mc-listbox__label--no-overflow={labelautosize}\n          >\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\n  .mc-listbox__tile--auto-size {\n    height: auto !important;\n    min-height: 3rem;\n  }\n  .mc-listbox__label--no-overflow {\n    white-space: break-spaces;\n  }\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","uuid","Math","random","name","$$props","items","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","datadisabledexpr","maxwidth","selectall","labelselectall","overlay","width","type","labelautosize","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":"+5QA6JuCA,EAAgB,iIADnDC,EAEKC,EAAAC,EAAAC,GADHC,EAAwDF,EAAAG,+BAAvBN,EAAgB,8CA1D5CO,EAAAP,MAAYA,EAAS,IAAAQ,EAAAR,KAenBA,EAAW,yBAAhBS,OAAIC,GAAA,yMArBRT,EA6DIC,EAAAS,EAAAP,uHAvDGJ,MAAYA,EAAS,kFAenBA,EAAW,YAAhBS,OAAIC,GAAA,EAAA,iHAAJD,0IAJKT,EAAc,qIALAA,EAAsB,iIALzCC,EAYIC,EAAAU,EAAAR,GAXFC,EAOCO,EAAAC,aAFeb,EAAW,WAG3BK,EAEOO,EAAAE,kDAJMd,EAAW,kDAFPA,EAAsB,4BACvBA,EAAW,oBAIxBA,EAAc,2GAwBTe,EAAAF,EAAA,KAAAb,MAAUA,EAAK,+FAGZa,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,yEAIZa,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,iEA0BzCyB,EAAAzB,MAAKA,EAAY,IAAA,0BA9BdA,EAAQ,KAAA0B,+EA0BPX,EAAAD,EAAA,MAAAd,MAAUA,EAAK,0FAEkBA,EAAa,mDA/BlCwB,EAAAZ,EAAA,cAAAZ,MAAKA,EAAgB,uCACLA,EAAa,aAHlDC,EAqCIC,EAAAU,EAAAR,sBAPFC,EAMOO,EAAAE,sFADJ,MAAAS,EAAA,IAAAE,KAAAA,EAAAzB,MAAKA,EAAY,IAAA,KAAA2B,EAAAC,EAAAH,oDAFoBzB,EAAa,iBA/BlCwB,EAAAZ,EAAA,cAAAZ,MAAKA,EAAgB,mDACLA,EAAa,sEA1BlDA,EAAU,KAAA6B,iHAFY7B,EAAQ,0BAAqBA,EAAK,8BAAwBA,EAAK,KAHhEwB,EAAArB,EAAA,sBAAS,YAATH,+BACFA,EAAQ,8BACNA,EAAO,aAJpCC,EA2EKC,EAAAC,EAAAC,0HAtEyBJ,EAAQ,qCAAqBA,EAAK,yCAAwBA,EAAK,gBAHhEwB,EAAArB,EAAA,sBAAS,YAATH,uCACFA,EAAQ,yCACNA,EAAO,qEA/E5B8B,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,GAChBe,cAAAA,GAAgB,GAAKf,EAE5BgB,EAAmB,IAAAC,EACrBC,IACAC,0pBAGDC,EAAA,GAAEC,EAAcX,SAAAA,0BAChBU,EAAA,GAAEE,EAAcrB,EAASsB,KAAKC,MAAMvB,GAAK,qBACvCmB,EAAA,EAAAlB,EAAQA,GAITkB,EAAA,GAAAC,GAAc,GACdD,EAAA,GAAAK,GAAyB,GACrBvB,GAA0B,IAAjBA,EAAM3B,QACjB6C,EAAA,GAAAC,GAAc,GACdD,EAAA,GAAAK,GAAyB,IAChBvB,GAASA,EAAM3B,OAAS+C,EAAY/C,OAC7C6C,EAAA,GAAAK,GAAyB,GAChBvB,GAASA,EAAM3B,SAAW+C,EAAY/C,QAC/C6C,EAAA,GAAAC,GAAc,GAGTnB,GAfkC,KAC1CkB,EAAA,GAAEK,GAAyB,wCAiBnB,SAAUC,GACK,MAAA,eAAAA,EAAQ9B,KAGvB,SAAU+B,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,EAAK5B,KACkC,IAAxCN,EAAMd,QAAQgD,EAAK7B,KAEnBL,EAAMmC,KAAKD,EAAK7B,GAAa,QAGjCL,EAAK,IAEPc,EAAagB,SAAS,aAAc9B,oFA0BdmB,EAAWiB,KAAAtD,mCAuBXkB,EAAKoC,KAAAxD,6BAWLoB,EAAKqC,EAAAC,EAAA,GAAAF,KAAAxD,QAAAwD,KAAAtD"}

package/dist/components/listbox/Listbox.nested.svelte

@@ -0,0 +1,175 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { ListboxItems } from './listbox.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  const uuid = Math.random();
+
+  export let name: string = `listboxradio-${uuid}`;
+  export let items: string;
+  export let value: any;
+  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: string;
+  export let selectall = false;
+  export let labelselectall = 'Select all';
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
+  export let labelautosize = false;
+
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  $: allSelected = selectall ?? false;
+  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];
+  $: value = value ? (determineSelectionState() as []) : [];
+  $: selectAllIndeterminate = true;
+
+  function determineSelectionState(): [] {
+    allSelected = false;
+    selectAllIndeterminate = false;
+    if (value && value.length === 0) {
+      allSelected = false;
+      selectAllIndeterminate = false;
+    } else if (value && value.length < parsedItems.length) {
+      selectAllIndeterminate = true;
+    } else if (value && value.length === parsedItems.length) {
+      allSelected = true;
+    }
+
+    return value;
+  }
+
+  function setItemId(index: number) {
+    return `listboxItem-${index + uuid}`;
+  }
+
+  function scrollEnd(node: HTMLElement) {
+    node.addEventListener('scroll', () => {
+      if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {
+        eventHandler.dispatch('scrollend', {});
+      }
+    });
+  }
+
+  function onSelectAll(e: Event) {
+    const ischecked = (<HTMLInputElement>e.target).checked;
+    allSelected = ischecked ? true : false;
+    if (allSelected) {
+      parsedItems.map((item) => {
+        if (
+          !item[datadisabledexpr] &&
+          value.indexOf(item[datavalueexpr]) === -1
+        )
+          value.push(item[datavalueexpr]);
+      });
+    } else {
+      value = [];
+    }
+    eventHandler.dispatch('select-all', value);
+    value = value;
+  }
+</script>
+
+<div
+  class="mc-listbox"
+  class:mc-listbox--options={type === 'options'}
+  class:mc-listbox--multi={multiple}
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth: {maxwidth}; --listbox-width: {width}; --listbox-minwidth: {width};"
+>
+  {#if !isfiltered}
+    <ul
+      role="listbox"
+      class="mc-listbox__list"
+      aria-labelledby="listbox"
+      use:scrollEnd
+    >
+      {#if multiple && selectall}
+        <li class="mc-listbox__tile">
+          <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__tile"
+          class:is-disabled={item[datadisabledexpr]}
+          class:mc-listbox__tile--auto-size={labelautosize}
+        >
+          {#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"
+            class:mc-listbox__label--no-overflow={labelautosize}
+          >
+            {item[datatextexpr]}
+          </label>
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.checkbox';
+  @import '@mozaic-ds/styles/components/c.listbox';
+
+  .mc-listbox__tile--auto-size {
+    height: auto !important;
+    min-height: 3rem;
+  }
+  .mc-listbox__label--no-overflow {
+    white-space: break-spaces;
+  }
+</style>

package/dist/components/listbox/Listbox.svelte

@@ -0,0 +1,102 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { ListboxItems } from './listbox.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let items: string;
+  export let value: any;
+  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: string;
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
+
+  const uuid = Math.random();
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function setItemId(index: number) {
+    return `listboxItem-${index + uuid}`;
+  }
+
+  function scrollEnd(node: HTMLElement) {
+    node.addEventListener('scroll', () => {
+      if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {
+        eventHandler.dispatch('scrollend', {});
+      }
+    });
+  }
+</script>
+
+<div
+  class="mc-listbox"
+  class:mc-listbox--options={type === 'options'}
+  class:mc-listbox--multi={multiple}
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth: {maxwidth}; --listbox-width: {width};"
+>
+  {#if !isfiltered}
+    <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}
+    </ul>
+  {:else}
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.checkbox';
+  @import '@mozaic-ds/styles/components/c.listbox';
+</style>

package/dist/components/listbox/listbox.types.d.ts

@@ -0,0 +1,8 @@
+export interface ListboxItems {
+    id?: string;
+    label: string;
+    value: string | boolean | undefined;
+    [value: string]: string | boolean | undefined;
+    selectall: boolean | undefined;
+}
+//# sourceMappingURL=listbox.types.d.ts.map

package/dist/components/listbox/listbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/listbox/listbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACpC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9C,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC"}