@mozaic-ds/web-components 0.4.1-beta.0 → 0.5.0

package/public/components/radiogroup/RadioGroup.js

@@ -1,2 +1,415 @@
-import{S as e,i,a as n,b as t,f as r,s as o,c as a,e as l,d as c,n as d,g as s,h as m,j as _,a2 as f,m as p,o as u,p as h,r as b,q as g,t as k,k as v,W as x,B as w,l as $,H as y,a3 as z}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import{c as E}from"../../EventForward-8492ff62.js";function q(e,i,n){const t=e.slice();return t[16]=i[n],t}function C(e){let i,n;return{c(){i=l("legend"),n=k(e[1]),s(i,"class","mc-field__legend")},m(e,r){t(e,i,r),_(i,n)},p(e,i){2&i&&v(n,e[1])},d(e){e&&u(i)}}}function F(e,i){let n,r,o,a,d,m,f,p,h,b,g,z,j,E,q,C=!1,F=i[16].label+"";function H(){return i[13](i[16])}return j=x(i[12][0]),{key:e,first:null,c(){n=l("div"),r=l("input"),f=c(),p=l("label"),h=k(F),g=c(),s(r,"type","radio"),s(r,"class","mc-radio__input"),s(r,"id",o=i[16].id),s(r,"name",a=i[16].name),r.__value=d=i[16].value,r.value=r.__value,r.disabled=m=i[16].disabled,s(p,"for",b=i[16].id),s(p,"class","mc-radio__label"),s(n,"class",z="mc-radio mc-field__item "+i[8].class),j.p(r),this.first=n},m(e,o){t(e,n,o),_(n,r),r.checked=r.__value===i[4],_(n,f),_(n,p),_(p,h),_(n,g),E||(q=[w(i[6].call(null,r)),$(r,"change",i[11]),$(r,"change",H)],E=!0)},p(e,t){i=e,32&t&&o!==(o=i[16].id)&&s(r,"id",o),32&t&&a!==(a=i[16].name)&&s(r,"name",a),32&t&&d!==(d=i[16].value)&&(r.__value=d,r.value=r.__value,C=!0),32&t&&m!==(m=i[16].disabled)&&(r.disabled=m),(C||48&t)&&(r.checked=r.__value===i[4]),32&t&&F!==(F=i[16].label+"")&&v(h,F),32&t&&b!==(b=i[16].id)&&s(p,"for",b),256&t&&z!==(z="mc-radio mc-field__item "+i[8].class)&&s(n,"class",z)},d(e){e&&u(n),j.r(),E=!1,y(q)}}}function H(e){let i,n,r,o,h,b=[],g=new Map,k=e[1]&&e[1].length&&C(e),v=e[5];const x=e=>e[16].id;for(let i=0;i<v.length;i+=1){let n=q(e,v,i),t=x(n);g.set(t,b[i]=F(t,n))}let w=[{id:e[0]},{class:"radio-group-container"},e[3]],$={};for(let e=0;e<w.length;e+=1)$=a($,w[e]);return{c(){i=l("div"),n=l("fieldset"),k&&k.c(),r=c(),o=l("div");for(let e=0;e<b.length;e+=1)b[e].c();this.c=d,s(o,"class",h="mc-field__container "+(e[2]?"mc-field__container--inline":"")),s(n,"class","mc-field mc-field--group"),m(i,$)},m(e,a){t(e,i,a),_(i,n),k&&k.m(n,null),_(n,r),_(n,o);for(let e=0;e<b.length;e+=1)b[e]&&b[e].m(o,null)},p(e,[t]){e[1]&&e[1].length?k?k.p(e,t):(k=C(e),k.c(),k.m(n,r)):k&&(k.d(1),k=null),432&t&&(v=e[5],b=f(b,t,x,1,e,v,g,o,z,F,null,q)),4&t&&h!==(h="mc-field__container "+(e[2]?"mc-field__container--inline":""))&&s(o,"class",h),m(i,$=p(w,[1&t&&{id:e[0]},{class:"radio-group-container"},8&t&&e[3]]))},i:d,o:d,d(e){e&&u(i),k&&k.d();for(let e=0;e<b.length;e+=1)b[e].d()}}}function M(e,i,n){let t,r;const o=["id","selectedvalue","options","legend","inline"];let l=h(i,o),{id:c}=i,{selectedvalue:d}=i,{options:s}=i,{legend:m}=i,{inline:_}=i,f=new j;const p=E(b());let u;function k(e){n(4,u=e),f.dispatch("change",e)}return e.$$set=e=>{n(8,i=a(a({},i),g(e))),n(15,l=h(i,o)),"id"in e&&n(0,c=e.id),"selectedvalue"in e&&n(9,d=e.selectedvalue),"options"in e&&n(10,s=e.options),"legend"in e&&n(1,m=e.legend),"inline"in e&&n(2,_=e.inline)},e.$$.update=()=>{1024&e.$$.dirty&&n(5,t=s?JSON.parse(s):[]),n(3,r=Object.assign({},l)),8&e.$$.dirty&&delete r.class,512&e.$$.dirty&&n(4,u=d)},i=g(i),[c,m,_,r,u,t,p,k,i,d,s,function(){u=this.__value,n(4,u),n(9,d)},[[]],e=>k(e.value)]}class O extends e{constructor(e){super();const a=document.createElement("style");a.textContent='@charset "UTF-8";.mc-radio{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-radio__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;border:2px solid #666666;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input::before{border-radius:50%;content:"";display:block;height:0.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:0.375rem}.mc-radio__input::-ms-check{background-color:#ffffff;border:2px solid #666666;color:#ffffff}.mc-radio__input.is-hover,.mc-radio__input:hover{border-color:#191919}.mc-radio__input.is-hover::-ms-check,.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input.is-focus,.mc-radio__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-radio__input.is-focus::-ms-check,.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-radio__input:checked{background-color:#46a610;border-color:#46a610}.mc-radio__input:checked::-ms-check{border-color:#46a610;background-color:#46a610}.mc-radio__input:checked::before{background-color:#ffffff}.mc-radio__input:checked:hover{border-color:#035010}.mc-radio__input:checked:hover::-ms-check{border-color:#035010}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:#808080}.mc-radio__input:disabled:checked::before{background-color:#999999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid.is-hover,.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid.is-hover::-ms-check,.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}',this.shadowRoot.appendChild(a),i(this,{target:this.shadowRoot,props:n(this.attributes),customElement:!0},M,H,o,{id:0,selectedvalue:9,options:10,legend:1,inline:2},null),e&&(e.target&&t(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["id","selectedvalue","options","legend","inline"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),r()}get selectedvalue(){return this.$$.ctx[9]}set selectedvalue(e){this.$$set({selectedvalue:e}),r()}get options(){return this.$$.ctx[10]}set options(e){this.$$set({options:e}),r()}get legend(){return this.$$.ctx[1]}set legend(e){this.$$set({legend:e}),r()}get inline(){return this.$$.ctx[2]}set inline(e){this.$$set({inline:e}),r()}}export{O 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, d as space, n as noop, g as attr, h as set_attributes, j as append, a2 as update_keyed_each, m as get_spread_update, o as detach, p as compute_rest_props, r as get_current_component, q as exclude_internal_props, t as text, k as set_data, W as init_binding_group, B as action_destroyer, l as listen, H as run_all, a3 as destroy_block } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+
+/* src/components/radiogroup/RadioGroup.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[16] = list[i];
+	return child_ctx;
+}
+
+// (26:4) {#if legend && legend.length}
+function create_if_block(ctx) {
+	let legend_1;
+	let t;
+
+	return {
+		c() {
+			legend_1 = element("legend");
+			t = text(/*legend*/ ctx[1]);
+			attr(legend_1, "class", "mc-field__legend");
+		},
+		m(target, anchor) {
+			insert(target, legend_1, anchor);
+			append(legend_1, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*legend*/ 2) set_data(t, /*legend*/ ctx[1]);
+		},
+		d(detaching) {
+			if (detaching) detach(legend_1);
+		}
+	};
+}
+
+// (35:6) {#each parsedOptions as opt (opt.id)}
+function create_each_block(key_1, ctx) {
+	let div;
+	let input;
+	let input_id_value;
+	let input_name_value;
+	let input_value_value;
+	let value_has_changed = false;
+	let input_disabled_value;
+	let t0;
+	let label;
+	let t1_value = /*opt*/ ctx[16].label + "";
+	let t1;
+	let label_for_value;
+	let t2;
+	let div_class_value;
+	let binding_group;
+	let mounted;
+	let dispose;
+
+	function change_handler() {
+		return /*change_handler*/ ctx[13](/*opt*/ ctx[16]);
+	}
+
+	binding_group = init_binding_group(/*$$binding_groups*/ ctx[12][0]);
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			div = element("div");
+			input = element("input");
+			t0 = space();
+			label = element("label");
+			t1 = text(t1_value);
+			t2 = space();
+			attr(input, "type", "radio");
+			attr(input, "class", "mc-radio__input");
+			attr(input, "id", input_id_value = /*opt*/ ctx[16].id);
+			attr(input, "name", input_name_value = /*opt*/ ctx[16].name);
+			input.__value = input_value_value = /*opt*/ ctx[16].value;
+			input.value = input.__value;
+			input.disabled = input_disabled_value = /*opt*/ ctx[16].disabled;
+			attr(label, "for", label_for_value = /*opt*/ ctx[16].id);
+			attr(label, "class", "mc-radio__label");
+			attr(div, "class", div_class_value = "mc-radio mc-field__item " + /*$$props*/ ctx[8].class);
+			binding_group.p(input);
+			this.first = div;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, input);
+			input.checked = input.__value === /*selectedValue*/ ctx[4];
+			append(div, t0);
+			append(div, label);
+			append(label, t1);
+			append(div, t2);
+
+			if (!mounted) {
+				dispose = [
+					action_destroyer(/*forwardEvents*/ ctx[6].call(null, input)),
+					listen(input, "change", /*input_change_handler*/ ctx[11]),
+					listen(input, "change", change_handler)
+				];
+
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*parsedOptions*/ 32 && input_id_value !== (input_id_value = /*opt*/ ctx[16].id)) {
+				attr(input, "id", input_id_value);
+			}
+
+			if (dirty & /*parsedOptions*/ 32 && input_name_value !== (input_name_value = /*opt*/ ctx[16].name)) {
+				attr(input, "name", input_name_value);
+			}
+
+			if (dirty & /*parsedOptions*/ 32 && input_value_value !== (input_value_value = /*opt*/ ctx[16].value)) {
+				input.__value = input_value_value;
+				input.value = input.__value;
+				value_has_changed = true;
+			}
+
+			if (dirty & /*parsedOptions*/ 32 && input_disabled_value !== (input_disabled_value = /*opt*/ ctx[16].disabled)) {
+				input.disabled = input_disabled_value;
+			}
+
+			if (value_has_changed || dirty & /*selectedValue, parsedOptions*/ 48) {
+				input.checked = input.__value === /*selectedValue*/ ctx[4];
+			}
+
+			if (dirty & /*parsedOptions*/ 32 && t1_value !== (t1_value = /*opt*/ ctx[16].label + "")) set_data(t1, t1_value);
+
+			if (dirty & /*parsedOptions*/ 32 && label_for_value !== (label_for_value = /*opt*/ ctx[16].id)) {
+				attr(label, "for", label_for_value);
+			}
+
+			if (dirty & /*$$props*/ 256 && div_class_value !== (div_class_value = "mc-radio mc-field__item " + /*$$props*/ ctx[8].class)) {
+				attr(div, "class", div_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			binding_group.r();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div1;
+	let fieldset;
+	let t;
+	let div0;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let div0_class_value;
+	let if_block = /*legend*/ ctx[1] && /*legend*/ ctx[1].length && create_if_block(ctx);
+	let each_value = /*parsedOptions*/ ctx[5];
+	const get_key = ctx => /*opt*/ ctx[16].id;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	let div1_levels = [
+		{ id: /*id*/ ctx[0] },
+		{ class: "radio-group-container" },
+		/*attributes*/ ctx[3]
+	];
+
+	let div_data_1 = {};
+
+	for (let i = 0; i < div1_levels.length; i += 1) {
+		div_data_1 = assign(div_data_1, div1_levels[i]);
+	}
+
+	return {
+		c() {
+			div1 = element("div");
+			fieldset = element("fieldset");
+			if (if_block) if_block.c();
+			t = space();
+			div0 = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.c = noop;
+			attr(div0, "class", div0_class_value = "mc-field__container " + (/*inline*/ ctx[2] ? 'mc-field__container--inline' : ''));
+			attr(fieldset, "class", "mc-field mc-field--group");
+			set_attributes(div1, div_data_1);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, fieldset);
+			if (if_block) if_block.m(fieldset, null);
+			append(fieldset, t);
+			append(fieldset, div0);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(div0, null);
+				}
+			}
+		},
+		p(ctx, [dirty]) {
+			if (/*legend*/ ctx[1] && /*legend*/ ctx[1].length) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(fieldset, t);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*$$props, parsedOptions, selectedValue, onChange*/ 432) {
+				each_value = /*parsedOptions*/ ctx[5];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div0, destroy_block, create_each_block, null, get_each_context);
+			}
+
+			if (dirty & /*inline*/ 4 && div0_class_value !== (div0_class_value = "mc-field__container " + (/*inline*/ ctx[2] ? 'mc-field__container--inline' : ''))) {
+				attr(div0, "class", div0_class_value);
+			}
+
+			set_attributes(div1, div_data_1 = get_spread_update(div1_levels, [
+				dirty & /*id*/ 1 && { id: /*id*/ ctx[0] },
+				{ class: "radio-group-container" },
+				dirty & /*attributes*/ 8 && /*attributes*/ ctx[3]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			if (if_block) if_block.d();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let parsedOptions;
+	let attributes;
+	const omit_props_names = ["id","selectedvalue","options","legend","inline"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { id } = $$props;
+	let { selectedvalue } = $$props;
+	let { options } = $$props;
+	let { legend } = $$props;
+	let { inline } = $$props;
+	let eventHandler = new EventHandler();
+	const forwardEvents = createEventForwarder(get_current_component());
+	let selectedValue;
+
+	function onChange(value) {
+		$$invalidate(4, selectedValue = value);
+		eventHandler.dispatch('change', value);
+	}
+
+	const $$binding_groups = [[]];
+
+	function input_change_handler() {
+		selectedValue = this.__value;
+		($$invalidate(4, selectedValue), $$invalidate(9, selectedvalue));
+	}
+
+	const change_handler = opt => onChange(opt.value);
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(8, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(15, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('id' in $$new_props) $$invalidate(0, id = $$new_props.id);
+		if ('selectedvalue' in $$new_props) $$invalidate(9, selectedvalue = $$new_props.selectedvalue);
+		if ('options' in $$new_props) $$invalidate(10, options = $$new_props.options);
+		if ('legend' in $$new_props) $$invalidate(1, legend = $$new_props.legend);
+		if ('inline' in $$new_props) $$invalidate(2, inline = $$new_props.inline);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*options*/ 1024) {
+			$$invalidate(5, parsedOptions = options ? JSON.parse(options) : []);
+		}
+
+		$$invalidate(3, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 8) {
+			delete attributes.class;
+		}
+
+		if ($$self.$$.dirty & /*selectedvalue*/ 512) {
+			$$invalidate(4, selectedValue = selectedvalue);
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+
+	return [
+		id,
+		legend,
+		inline,
+		attributes,
+		selectedValue,
+		parsedOptions,
+		forwardEvents,
+		onChange,
+		$$props,
+		selectedvalue,
+		options,
+		input_change_handler,
+		$$binding_groups,
+		change_handler
+	];
+}
+
+class RadioGroup extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `@charset "UTF-8";.mc-radio{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-radio__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;border:2px solid #666666;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input::before{border-radius:50%;content:"";display:block;height:0.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:0.375rem}.mc-radio__input::-ms-check{background-color:#ffffff;border:2px solid #666666;color:#ffffff}.mc-radio__input.is-hover,.mc-radio__input:hover{border-color:#191919}.mc-radio__input.is-hover::-ms-check,.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input.is-focus,.mc-radio__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-radio__input.is-focus::-ms-check,.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-radio__input:checked{background-color:#46a610;border-color:#46a610}.mc-radio__input:checked::-ms-check{border-color:#46a610;background-color:#46a610}.mc-radio__input:checked::before{background-color:#ffffff}.mc-radio__input:checked:hover{border-color:#035010}.mc-radio__input:checked:hover::-ms-check{border-color:#035010}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:#808080}.mc-radio__input:disabled:checked::before{background-color:#999999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid.is-hover,.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid.is-hover::-ms-check,.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 0,
+				selectedvalue: 9,
+				options: 10,
+				legend: 1,
+				inline: 2
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["id", "selectedvalue", "options", "legend", "inline"];
+	}
+
+	get id() {
+		return this.$$.ctx[0];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get selectedvalue() {
+		return this.$$.ctx[9];
+	}
+
+	set selectedvalue(selectedvalue) {
+		this.$$set({ selectedvalue });
+		flush();
+	}
+
+	get options() {
+		return this.$$.ctx[10];
+	}
+
+	set options(options) {
+		this.$$set({ options });
+		flush();
+	}
+
+	get legend() {
+		return this.$$.ctx[1];
+	}
+
+	set legend(legend) {
+		this.$$set({ legend });
+		flush();
+	}
+
+	get inline() {
+		return this.$$.ctx[2];
+	}
+
+	set inline(inline) {
+		this.$$set({ inline });
+		flush();
+	}
+}
+
+export { RadioGroup as default };
 //# sourceMappingURL=RadioGroup.js.map

package/public/components/radiogroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  export let id: string;\n  export let selectedvalue: string;\n  export let options: string;\n  export let legend: string;\n  export let inline: boolean;\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n  let selectedValue: string | undefined;\n\n  $: parsedOptions = options ? (JSON.parse(options) as RadioGroupOption[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  $: selectedValue = selectedvalue;\n\n  function onChange(value: string) {\n    selectedValue = value;\n    eventHandler.dispatch('change', value);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\" {...attributes}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div\n      class=\"mc-field__container {inline ? 'mc-field__container--inline' : ''}\"\n    >\n      {#each parsedOptions as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item {$$props.class}\">\n          <input\n            use:forwardEvents\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            on:change={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.radio';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","legend_1","anchor","t1_value","label","attr","input","input_id_value","id","input_name_value","name","__value","input_value_value","value","disabled","input_disabled_value","label_for_value","div","div_class_value","class","append","dirty","set_data","t1","length","create_if_block","get_key","i","div1","fieldset","div0","$$props","selectedvalue","options","legend","inline","eventHandler","EventHandler","forwardEvents","createEventForwarder","get_current_component","selectedValue","onChange","$$invalidate","dispatch","parsedOptions","JSON","parse","attributes","Object","assign","$$restProps","this","opt"],"mappings":"yaAgCSA,EAAM,4CADTC,EAEQC,EAAAC,EAAAC,2BADLJ,EAAM,2EAoBwCK,EAAAL,MAAIM,MAAK,0LAPhDC,EAAAC,EAAA,KAAAC,EAAAT,MAAIU,IACFH,EAAAC,EAAA,OAAAG,EAAAX,MAAIY,MAEHJ,EAAAK,QAAAC,EAAAd,MAAIe,wBACDP,EAAAQ,SAAAC,EAAAjB,MAAIgB,SAGJT,EAAAD,EAAA,MAAAY,EAAAlB,MAAIU,mCAZmBH,EAAAY,EAAA,QAAAC,EAAA,2BAAApB,KAAQqB,mCAA7CpB,EAaKC,EAAAiB,EAAAf,GAZHkB,EAUCH,EAAAX,yBAJaR,EAAa,UAK3BsB,EAA8DH,EAAAb,oGAPxD,GAAAiB,GAAAd,KAAAA,EAAAT,MAAIU,iBACF,GAAAa,GAAAZ,KAAAA,EAAAX,MAAIY,qBAEH,GAAAW,GAAAT,KAAAA,EAAAd,MAAIe,6CACD,GAAAQ,GAAAN,KAAAA,EAAAjB,MAAIgB,4DAFFhB,EAAa,IAKkB,GAAAuB,GAAAlB,KAAAA,EAAAL,MAAIM,MAAK,KAAAkB,EAAAC,EAAApB,GAA1C,GAAAkB,GAAAL,KAAAA,EAAAlB,MAAIU,kBAZmB,IAAAa,GAAAH,KAAAA,EAAA,2BAAApB,KAAQqB,oGAV5CrB,EAAM,IAAIA,EAAM,GAAC0B,QAAMC,EAAA3B,KASnBA,EAAa,GAAS,MAAA4B,EAAA5B,GAAAA,MAAIU,mBAA/BgB,OAAIG,GAAA,EAAA,6FAXgC7B,EAAU,qMASpBA,EAAM,GAAG,8BAAgC,4DAT3EC,EA6BKC,EAAA4B,EAAA1B,GA5BHkB,EA2BUQ,EAAAC,yBApBRT,EAmBKS,EAAAC,8DAzBAhC,EAAM,IAAIA,EAAM,GAAC0B,uEASb1B,EAAa,wEAFQA,EAAM,GAAG,8BAAgC,oFAT/BA,EAAU,kLApBzCU,GAAUuB,iBACVC,GAAqBD,WACrBE,GAAeF,UACfG,GAAcH,UACdI,GAAeJ,EACtBK,MAAmBC,QACjBC,EAAgBC,EAAqBC,SACvCC,EAOK,SAAAC,EAAS7B,GAChB8B,EAAA,EAAAF,EAAgB5B,GAChBuB,EAAaQ,SAAS,SAAU/B,8PAPjC8B,EAAA,EAAEE,EAAgBZ,EAAWa,KAAKC,MAAMd,GAAO,QAC7Ce,EAALC,OAAAC,UAAuBC,yBACXH,EAAW7B,sBACpBwB,EAAA,EAAEF,EAAgBT,6CA2BGS,EAAaW,KAAAzC,+BAGR+B,EAASW,EAAIxC"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  export let id: string;\n  export let selectedvalue: string;\n  export let options: string;\n  export let legend: string;\n  export let inline: boolean;\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n  let selectedValue: string | undefined;\n\n  $: parsedOptions = options ? (JSON.parse(options) as RadioGroupOption[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  $: selectedValue = selectedvalue;\n\n  function onChange(value: string) {\n    selectedValue = value;\n    eventHandler.dispatch('change', value);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\" {...attributes}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div\n      class=\"mc-field__container {inline ? 'mc-field__container--inline' : ''}\"\n    >\n      {#each parsedOptions as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item {$$props.class}\">\n          <input\n            use:forwardEvents\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            on:change={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.radio';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":[],"mappings":"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"}