@mozaic-ds/web-components 0.11.0 → 0.12.0-beta.0

package/public/components/listbox/Listbox.js

@@ -1,2 +1,596 @@
-import{S as e,i as t,a as i,b as o,f as c,s as a,c as l,e as r,n as s,h as n,z as m,B as d,m as h,o as b,p,q as u,O as x,V as _,t as f,g,j as k,k as v,K as w,J as $,d as y,W as E,l as C,H as z}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";function M(e,t,i){const o=e.slice();return o[21]=t[i],o[23]=i,o}function B(e){let t,i,c;return{c(){t=r("li"),i=r("span"),c=f(e[4]),g(i,"class","mc-listbox__empty"),g(t,"class","mc-listbox__item")},m(e,a){o(e,t,a),k(t,i),k(i,c)},p(e,t){16&t&&v(c,e[4])},d(e){e&&b(t)}}}function H(e){let t,i=e[9],c=[];for(let t=0;t<i.length;t+=1)c[t]=N(M(e,i,t));return{c(){for(let e=0;e<c.length;e+=1)c[e].c();t=w()},m(e,i){for(let t=0;t<c.length;t+=1)c[t]&&c[t].m(e,i);o(e,t,i)},p(e,o){if(3685&o){let a;for(i=e[9],a=0;a<i.length;a+=1){const l=M(e,i,a);c[a]?c[a].p(l,o):(c[a]=N(l),c[a].c(),c[a].m(t.parentNode,t))}for(;a<c.length;a+=1)c[a].d(1);c.length=i.length}},d(e){$(c,e),e&&b(t)}}}function O(e){let t,i,c,a,l,s,n=!1;return a=E(e[17][0]),{c(){t=r("input"),g(t,"id",e[11](e[23])),g(t,"class","mc-listbox__input mc-checkbox__input"),g(t,"type","checkbox"),t.__value=i=e[21][e[6]],t.value=t.__value,t.checked=c=e[0].includes(e[21][e[6]]),a.p(t)},m(i,c){o(i,t,c),t.checked=~(e[0]||[]).indexOf(t.__value),l||(s=[C(t,"change",e[18]),C(t,"change",e[15])],l=!0)},p(e,o){576&o&&i!==(i=e[21][e[6]])&&(t.__value=i,t.value=t.__value,n=!0),577&o&&c!==(c=e[0].includes(e[21][e[6]]))&&(t.checked=c),(n||513&o)&&(t.checked=~(e[0]||[]).indexOf(t.__value))},d(e){e&&b(t),a.r(),l=!1,z(s)}}}function L(e){let t,i,c,a,l,s=!1;return c=E(e[17][0]),{c(){t=r("input"),g(t,"id",e[11](e[23])),g(t,"class","mc-listbox__input"),g(t,"type","radio"),t.__value=i=e[21][e[6]],t.value=t.__value,g(t,"name",`listboxradio-${e[10]}`),c.p(t)},m(i,c){o(i,t,c),t.checked=t.__value===e[0],a||(l=[C(t,"change",e[16]),C(t,"change",e[14])],a=!0)},p(e,o){576&o&&i!==(i=e[21][e[6]])&&(t.__value=i,t.value=t.__value,s=!0),(s||513&o)&&(t.checked=t.__value===e[0])},d(e){e&&b(t),c.r(),a=!1,z(l)}}}function N(e){let t,i,c,a,l,s=e[21][e[5]]+"";function n(e,t){return e[2]?O:L}let m=n(e),d=m(e);return{c(){t=r("li"),d.c(),i=y(),c=r("label"),a=f(s),l=y(),g(c,"for",e[11](e[23])),g(c,"class","mc-listbox__label"),g(t,"class","mc-listbox__item")},m(e,r){o(e,t,r),d.m(t,null),k(t,i),k(t,c),k(c,a),k(t,l)},p(e,o){m===(m=n(e))&&d?d.p(e,o):(d.d(1),d=m(e),d&&(d.c(),d.m(t,i))),544&o&&s!==(s=e[21][e[5]]+"")&&v(a,s)},d(e){e&&b(t),d.d()}}}function Y(e){let t,i,c,a;function p(e,t){return e[3]?B:H}let u=p(e),x=u(e),_=[{role:"listbox"},{class:"mc-listbox"},{"aria-labelledby":"listbox"},{style:i="--listbox-width: "+e[7]+";"},e[8]],f={};for(let e=0;e<_.length;e+=1)f=l(f,_[e]);return{c(){t=r("ul"),x.c(),this.c=s,n(t,f),m(t,"is-open",e[1]),m(t,"mc-listbox--multi",e[2])},m(i,l){o(i,t,l),x.m(t,null),c||(a=d(e[12].call(null,t)),c=!0)},p(e,[o]){u===(u=p(e))&&x?x.p(e,o):(x.d(1),x=u(e),x&&(x.c(),x.m(t,null))),n(t,f=h(_,[{role:"listbox"},{class:"mc-listbox"},{"aria-labelledby":"listbox"},128&o&&i!==(i="--listbox-width: "+e[7]+";")&&{style:i},256&o&&e[8]])),m(t,"is-open",e[1]),m(t,"mc-listbox--multi",e[2])},i:s,o:s,d(e){e&&b(t),x.d(),c=!1,a()}}}function A(e,t,i){let o,c;const a=["items","value","open","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth"];let r=p(t,a),{items:s}=t,{value:n}=t,{open:m}=t,{multiple:d}=t,{isfiltered:h}=t,{emptysearchlabel:b="No results found"}=t,{datatextexpr:f="label"}=t,{datavalueexpr:g="value"}=t,{maxwidth:k="100%"}=t;const v=Math.random();let w=new j;const $=[[]];return e.$$set=e=>{t=l(l({},t),u(e)),i(20,r=p(t,a)),"items"in e&&i(13,s=e.items),"value"in e&&i(0,n=e.value),"open"in e&&i(1,m=e.open),"multiple"in e&&i(2,d=e.multiple),"isfiltered"in e&&i(3,h=e.isfiltered),"emptysearchlabel"in e&&i(4,b=e.emptysearchlabel),"datatextexpr"in e&&i(5,f=e.datatextexpr),"datavalueexpr"in e&&i(6,g=e.datavalueexpr),"maxwidth"in e&&i(7,k=e.maxwidth)},e.$$.update=()=>{8192&e.$$.dirty&&i(9,o=s?JSON.parse(s):[]),i(8,c=Object.assign({},r)),256&e.$$.dirty&&delete c.class},[n,m,d,h,b,f,g,k,c,o,v,function(e){return`listboxItem-${e+v}`},function(e){e.addEventListener("scroll",(()=>{e.offsetHeight+e.scrollTop>=e.scrollHeight&&w.dispatch("scrollend",{})}))},s,function(t){x.call(this,e,t)},function(t){x.call(this,e,t)},function(){n=this.__value,i(0,n)},$,function(){n=_($[0],this.__value,this.checked),i(0,n)}]}class J extends e{constructor(e){super();const l=document.createElement("style");l.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;-o-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{list-style:none;margin-left:0;padding-left:0;background-color:#ffffff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:0.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.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;min-height:3rem;padding-left:0.75rem;padding-right:0.75rem;position:relative;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label::after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;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}.mc-listbox--left{right:0}",this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},A,Y,a,{items:13,value:0,open:1,multiple:2,isfiltered:3,emptysearchlabel:4,datatextexpr:5,datavalueexpr:6,maxwidth:7},null),e&&(e.target&&o(e.target,this,e.anchor),e.props&&(this.$set(e.props),c()))}static get observedAttributes(){return["items","value","open","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth"]}get items(){return this.$$.ctx[13]}set items(e){this.$$set({items:e}),c()}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),c()}get open(){return this.$$.ctx[1]}set open(e){this.$$set({open:e}),c()}get multiple(){return this.$$.ctx[2]}set multiple(e){this.$$set({multiple:e}),c()}get isfiltered(){return this.$$.ctx[3]}set isfiltered(e){this.$$set({isfiltered:e}),c()}get emptysearchlabel(){return this.$$.ctx[4]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),c()}get datatextexpr(){return this.$$.ctx[5]}set datatextexpr(e){this.$$set({datatextexpr:e}),c()}get datavalueexpr(){return this.$$.ctx[6]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),c()}get maxwidth(){return this.$$.ctx[7]}set maxwidth(e){this.$$set({maxwidth:e}),c()}}export{J as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, n as noop, h as set_attributes, z as toggle_class, B as action_destroyer, m as get_spread_update, o as detach, p as compute_rest_props, q as exclude_internal_props, O as bubble, V as get_binding_group_value, t as text, g as attr, j as append, k as set_data, K as empty, J as destroy_each, d as space, W as init_binding_group, l as listen, H as run_all } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/listbox/Listbox.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[21] = list[i];
+	child_ctx[23] = i;
+	return child_ctx;
+}
+
+// (70:2) {:else}
+function create_else_block_1(ctx) {
+	let li;
+	let span;
+	let t;
+
+	return {
+		c() {
+			li = element("li");
+			span = element("span");
+			t = text(/*emptysearchlabel*/ ctx[4]);
+			attr(span, "class", "mc-listbox__empty");
+			attr(li, "class", "mc-listbox__item");
+		},
+		m(target, anchor) {
+			insert(target, li, anchor);
+			append(li, span);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*emptysearchlabel*/ 16) set_data(t, /*emptysearchlabel*/ ctx[4]);
+		},
+		d(detaching) {
+			if (detaching) detach(li);
+		}
+	};
+}
+
+// (40:2) {#if !isfiltered}
+function create_if_block(ctx) {
+	let each_1_anchor;
+	let each_value = /*parsedItems*/ ctx[9];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*setItemId, parsedItems, datatextexpr, datavalueexpr, uuid, value, multiple*/ 3685) {
+				each_value = /*parsedItems*/ ctx[9];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+// (53:8) {:else}
+function create_else_block(ctx) {
+	let input;
+	let input_value_value;
+	let value_has_changed = false;
+	let input_checked_value;
+	let binding_group;
+	let mounted;
+	let dispose;
+	binding_group = init_binding_group(/*$$binding_groups*/ ctx[17][0]);
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "id", /*setItemId*/ ctx[11](/*index*/ ctx[23]));
+			attr(input, "class", "mc-listbox__input mc-checkbox__input");
+			attr(input, "type", "checkbox");
+			input.__value = input_value_value = /*item*/ ctx[21][/*datavalueexpr*/ ctx[6]];
+			input.value = input.__value;
+			input.checked = input_checked_value = /*value*/ ctx[0].includes(/*item*/ ctx[21][/*datavalueexpr*/ ctx[6]]);
+			binding_group.p(input);
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+			input.checked = ~(/*value*/ ctx[0] || []).indexOf(input.__value);
+
+			if (!mounted) {
+				dispose = [
+					listen(input, "change", /*input_change_handler_1*/ ctx[18]),
+					listen(input, "change", /*change_handler_1*/ ctx[15])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if (dirty & /*parsedItems, datavalueexpr*/ 576 && input_value_value !== (input_value_value = /*item*/ ctx[21][/*datavalueexpr*/ ctx[6]])) {
+				input.__value = input_value_value;
+				input.value = input.__value;
+				value_has_changed = true;
+			}
+
+			if (dirty & /*value, parsedItems, datavalueexpr*/ 577 && input_checked_value !== (input_checked_value = /*value*/ ctx[0].includes(/*item*/ ctx[21][/*datavalueexpr*/ ctx[6]]))) {
+				input.checked = input_checked_value;
+			}
+
+			if (value_has_changed || dirty & /*value, parsedItems*/ 513) {
+				input.checked = ~(/*value*/ ctx[0] || []).indexOf(input.__value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(input);
+			binding_group.r();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+// (43:8) {#if !multiple}
+function create_if_block_1(ctx) {
+	let input;
+	let input_value_value;
+	let value_has_changed = false;
+	let binding_group;
+	let mounted;
+	let dispose;
+	binding_group = init_binding_group(/*$$binding_groups*/ ctx[17][0]);
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "id", /*setItemId*/ ctx[11](/*index*/ ctx[23]));
+			attr(input, "class", "mc-listbox__input");
+			attr(input, "type", "radio");
+			input.__value = input_value_value = /*item*/ ctx[21][/*datavalueexpr*/ ctx[6]];
+			input.value = input.__value;
+			attr(input, "name", `listboxradio-${/*uuid*/ ctx[10]}`);
+			binding_group.p(input);
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+			input.checked = input.__value === /*value*/ ctx[0];
+
+			if (!mounted) {
+				dispose = [
+					listen(input, "change", /*input_change_handler*/ ctx[16]),
+					listen(input, "change", /*change_handler*/ ctx[14])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if (dirty & /*parsedItems, datavalueexpr*/ 576 && input_value_value !== (input_value_value = /*item*/ ctx[21][/*datavalueexpr*/ ctx[6]])) {
+				input.__value = input_value_value;
+				input.value = input.__value;
+				value_has_changed = true;
+			}
+
+			if (value_has_changed || dirty & /*value, parsedItems*/ 513) {
+				input.checked = input.__value === /*value*/ ctx[0];
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(input);
+			binding_group.r();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+// (41:4) {#each parsedItems as item, index}
+function create_each_block(ctx) {
+	let li;
+	let t0;
+	let label;
+	let t1_value = /*item*/ ctx[21][/*datatextexpr*/ ctx[5]] + "";
+	let t1;
+	let t2;
+
+	function select_block_type_1(ctx, dirty) {
+		if (!/*multiple*/ ctx[2]) return create_if_block_1;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type_1(ctx);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			li = element("li");
+			if_block.c();
+			t0 = space();
+			label = element("label");
+			t1 = text(t1_value);
+			t2 = space();
+			attr(label, "for", /*setItemId*/ ctx[11](/*index*/ ctx[23]));
+			attr(label, "class", "mc-listbox__label");
+			attr(li, "class", "mc-listbox__item");
+		},
+		m(target, anchor) {
+			insert(target, li, anchor);
+			if_block.m(li, null);
+			append(li, t0);
+			append(li, label);
+			append(label, t1);
+			append(li, t2);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type_1(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(li, t0);
+				}
+			}
+
+			if (dirty & /*parsedItems, datatextexpr*/ 544 && t1_value !== (t1_value = /*item*/ ctx[21][/*datatextexpr*/ ctx[5]] + "")) set_data(t1, t1_value);
+		},
+		d(detaching) {
+			if (detaching) detach(li);
+			if_block.d();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let ul;
+	let ul_style_value;
+	let mounted;
+	let dispose;
+
+	function select_block_type(ctx, dirty) {
+		if (!/*isfiltered*/ ctx[3]) return create_if_block;
+		return create_else_block_1;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
+
+	let ul_levels = [
+		{ role: "listbox" },
+		{ class: "mc-listbox" },
+		{ "aria-labelledby": "listbox" },
+		{
+			style: ul_style_value = "--listbox-width: " + /*maxwidth*/ ctx[7] + ";"
+		},
+		/*attributes*/ ctx[8]
+	];
+
+	let ul_data = {};
+
+	for (let i = 0; i < ul_levels.length; i += 1) {
+		ul_data = assign(ul_data, ul_levels[i]);
+	}
+
+	return {
+		c() {
+			ul = element("ul");
+			if_block.c();
+			this.c = noop;
+			set_attributes(ul, ul_data);
+			toggle_class(ul, "is-open", /*open*/ ctx[1]);
+			toggle_class(ul, "mc-listbox--multi", /*multiple*/ ctx[2]);
+		},
+		m(target, anchor) {
+			insert(target, ul, anchor);
+			if_block.m(ul, null);
+
+			if (!mounted) {
+				dispose = action_destroyer(/*scrollEnd*/ ctx[12].call(null, ul));
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(ul, null);
+				}
+			}
+
+			set_attributes(ul, ul_data = get_spread_update(ul_levels, [
+				{ role: "listbox" },
+				{ class: "mc-listbox" },
+				{ "aria-labelledby": "listbox" },
+				dirty & /*maxwidth*/ 128 && ul_style_value !== (ul_style_value = "--listbox-width: " + /*maxwidth*/ ctx[7] + ";") && { style: ul_style_value },
+				dirty & /*attributes*/ 256 && /*attributes*/ ctx[8]
+			]));
+
+			toggle_class(ul, "is-open", /*open*/ ctx[1]);
+			toggle_class(ul, "mc-listbox--multi", /*multiple*/ ctx[2]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(ul);
+			if_block.d();
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let parsedItems;
+	let attributes;
+
+	const omit_props_names = [
+		"items","value","open","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth"
+	];
+
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { items } = $$props;
+	let { value } = $$props;
+	let { open } = $$props;
+	let { multiple } = $$props;
+	let { isfiltered } = $$props;
+	let { emptysearchlabel = 'No results found' } = $$props;
+	let { datatextexpr = 'label' } = $$props;
+	let { datavalueexpr = 'value' } = $$props;
+	let { maxwidth = '100%' } = $$props;
+	const uuid = Math.random();
+	let eventHandler = new EventHandler();
+
+	function setItemId(index) {
+		return `listboxItem-${index + uuid}`;
+	}
+
+	function scrollEnd(node) {
+		node.addEventListener('scroll', () => {
+			if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {
+				eventHandler.dispatch('scrollend', {});
+			}
+		});
+	}
+
+	const $$binding_groups = [[]];
+
+	function change_handler(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	function change_handler_1(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	function input_change_handler() {
+		value = this.__value;
+		$$invalidate(0, value);
+	}
+
+	function input_change_handler_1() {
+		value = get_binding_group_value($$binding_groups[0], this.__value, this.checked);
+		$$invalidate(0, value);
+	}
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(20, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('items' in $$new_props) $$invalidate(13, items = $$new_props.items);
+		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
+		if ('open' in $$new_props) $$invalidate(1, open = $$new_props.open);
+		if ('multiple' in $$new_props) $$invalidate(2, multiple = $$new_props.multiple);
+		if ('isfiltered' in $$new_props) $$invalidate(3, isfiltered = $$new_props.isfiltered);
+		if ('emptysearchlabel' in $$new_props) $$invalidate(4, emptysearchlabel = $$new_props.emptysearchlabel);
+		if ('datatextexpr' in $$new_props) $$invalidate(5, datatextexpr = $$new_props.datatextexpr);
+		if ('datavalueexpr' in $$new_props) $$invalidate(6, datavalueexpr = $$new_props.datavalueexpr);
+		if ('maxwidth' in $$new_props) $$invalidate(7, maxwidth = $$new_props.maxwidth);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*items*/ 8192) {
+			$$invalidate(9, parsedItems = items ? JSON.parse(items) : []);
+		}
+
+		$$invalidate(8, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 256) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		value,
+		open,
+		multiple,
+		isfiltered,
+		emptysearchlabel,
+		datatextexpr,
+		datavalueexpr,
+		maxwidth,
+		attributes,
+		parsedItems,
+		uuid,
+		setItemId,
+		scrollEnd,
+		items,
+		change_handler,
+		change_handler_1,
+		input_change_handler,
+		$$binding_groups,
+		input_change_handler_1
+	];
+}
+
+class Listbox extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.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;-o-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{list-style:none;margin-left:0;padding-left:0;background-color:#ffffff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:0.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.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;min-height:3rem;padding-left:0.75rem;padding-right:0.75rem;position:relative;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label::after{content:"";position:absolute;inset:0;z-index:2}.mc-listbox__input{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;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}.mc-listbox--left{right:0}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				items: 13,
+				value: 0,
+				open: 1,
+				multiple: 2,
+				isfiltered: 3,
+				emptysearchlabel: 4,
+				datatextexpr: 5,
+				datavalueexpr: 6,
+				maxwidth: 7
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"items",
+			"value",
+			"open",
+			"multiple",
+			"isfiltered",
+			"emptysearchlabel",
+			"datatextexpr",
+			"datavalueexpr",
+			"maxwidth"
+		];
+	}
+
+	get items() {
+		return this.$$.ctx[13];
+	}
+
+	set items(items) {
+		this.$$set({ items });
+		flush();
+	}
+
+	get value() {
+		return this.$$.ctx[0];
+	}
+
+	set value(value) {
+		this.$$set({ value });
+		flush();
+	}
+
+	get open() {
+		return this.$$.ctx[1];
+	}
+
+	set open(open) {
+		this.$$set({ open });
+		flush();
+	}
+
+	get multiple() {
+		return this.$$.ctx[2];
+	}
+
+	set multiple(multiple) {
+		this.$$set({ multiple });
+		flush();
+	}
+
+	get isfiltered() {
+		return this.$$.ctx[3];
+	}
+
+	set isfiltered(isfiltered) {
+		this.$$set({ isfiltered });
+		flush();
+	}
+
+	get emptysearchlabel() {
+		return this.$$.ctx[4];
+	}
+
+	set emptysearchlabel(emptysearchlabel) {
+		this.$$set({ emptysearchlabel });
+		flush();
+	}
+
+	get datatextexpr() {
+		return this.$$.ctx[5];
+	}
+
+	set datatextexpr(datatextexpr) {
+		this.$$set({ datatextexpr });
+		flush();
+	}
+
+	get datavalueexpr() {
+		return this.$$.ctx[6];
+	}
+
+	set datavalueexpr(datavalueexpr) {
+		this.$$set({ datavalueexpr });
+		flush();
+	}
+
+	get maxwidth() {
+		return this.$$.ctx[7];
+	}
+
+	set maxwidth(maxwidth) {
+		this.$$set({ maxwidth });
+		flush();
+	}
+}
+
+export { Listbox as default };
 //# sourceMappingURL=Listbox.js.map

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

@@ -1 +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\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 maxwidth = '100%';\n\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\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<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  {...attributes}\n>\n  {#if !isfiltered}\n    {#each parsedItems as item, index}\n      <li class=\"mc-listbox__item\">\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  {: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","length","i","attr","input","__value","input_value_value","checked","input_checked_value","includes","indexOf","dirty","t1_value","create_if_block_1","label","set_data","t1","create_if_block","ul","style","ul_style_value","items","$$props","value","open","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","maxwidth","uuid","Math","random","eventHandler","EventHandler","$$invalidate","parsedItems","JSON","parse","attributes","Object","assign","$$restProps","class","index","node","addEventListener","offsetHeight","scrollTop","scrollHeight","dispatch","this","get_binding_group_value","$$binding_groups"],"mappings":"+YA8EuCA,EAAgB,6EADnDC,EAEIC,EAAAC,EAAAC,GADFC,EAAwDF,EAAAG,4BAAvBN,EAAgB,0CA/B5CA,EAAW,wBAAhBO,OAAIC,GAAA,uKAACR,EAAW,WAAhBO,OAAIC,GAAA,EAAA,yHAAJD,yGAcUE,EAAAC,EAAA,KAAAV,MAAUA,EAAK,iFAGZU,EAAAC,QAAAC,EAAAZ,MAAKA,EAAa,sBAChBU,EAAAG,QAAAC,EAAAd,EAAM,GAAAe,SAASf,MAAKA,EAAa,oBAL5CC,EAQCC,EAAAQ,EAAAN,eAFaJ,EAAK,IAAA,IAAAgB,QAAAN,EAAAC,uEAFV,IAAAM,GAAAL,KAAAA,EAAAZ,MAAKA,EAAa,2CAChB,IAAAiB,GAAAH,KAAAA,EAAAd,EAAM,GAAAe,SAASf,MAAKA,EAAa,8CAC9BA,EAAK,IAAA,IAAAgB,QAAAN,EAAAC,kHAfbF,EAAAC,EAAA,KAAAV,MAAUA,EAAK,2DAGZU,EAAAC,QAAAC,EAAAZ,MAAKA,EAAa,iDACHA,EAAI,sBAL5BC,EAQCC,EAAAQ,EAAAN,yBAFaJ,EAAK,iEAFV,IAAAiB,GAAAL,KAAAA,EAAAZ,MAAKA,EAAa,8EAEbA,EAAK,gEAgBlBkB,EAAAlB,MAAKA,EAAY,IAAA,0BAvBdA,EAAQ,KAAAmB,+EAsBFV,EAAAW,EAAA,MAAApB,MAAUA,EAAK,+EAvB7BC,EA0BIC,EAAAC,EAAAC,sBAHFC,EAEOF,EAAAiB,sFADJ,IAAAH,GAAAC,KAAAA,EAAAlB,MAAKA,EAAY,IAAA,KAAAqB,EAAAC,EAAAJ,0EA1BpBlB,EAAU,KAAAuB,wHAJSvB,EAAQ,GAAA,KAE7BA,EAAU,0GALCA,EAAI,4BACMA,EAAQ,YAJnCC,EA6CIC,EAAAsB,EAAApB,4OAvCuBJ,EAAQ,GAAA,MAAA,CAAAyB,MAAAC,UAE7B1B,EAAU,oBALCA,EAAI,4BACMA,EAAQ,+MAlCtB2B,GAAaC,SACbC,GAAUD,QACVE,GAAaF,YACbG,GAAiBH,cACjBI,GAAmBJ,GACnBK,iBAAAA,EAAmB,oBAAkBL,GACrCM,aAAAA,EAAe,SAAON,GACtBO,cAAAA,EAAgB,SAAOP,GACvBQ,SAAAA,EAAW,QAAMR,QAEtBS,EAAOC,KAAKC,SACd,IAAAC,MAAmBC,2aAEtBC,EAAA,EAAEC,EAAchB,EAASiB,KAAKC,MAAMlB,GAAK,QACvCmB,EAALC,OAAAC,UAAuBC,2BACXH,EAAWI,8BAEZ,SAAUC,GACK,MAAA,eAAAA,EAAQd,KAGvB,SAAUe,GACjBA,EAAKC,iBAAiB,UAAQ,KACxBD,EAAKE,aAAeF,EAAKG,WAAaH,EAAKI,cAC7ChB,EAAaiB,SAAS,YAAW,CAAA,gFA0BjB5B,EAAK6B,KAAA/C,6BAULkB,EAAK8B,EAAAC,EAAA,GAAAF,KAAA/C,QAAA+C,KAAA7C"}
+{"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\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 maxwidth = '100%';\n\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\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<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  {...attributes}\n>\n  {#if !isfiltered}\n    {#each parsedItems as item, index}\n      <li class=\"mc-listbox__item\">\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  {: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":[],"mappings":"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"}