@abgov/web-components 1.0.0-alpha.71 → 1.0.0-alpha.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.71",
+  "version": "1.0.0-alpha.72",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -4338,12 +4338,12 @@ const BIND$1 = "bind";
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[32] = list[i];
-	child_ctx[34] = i;
+	child_ctx[34] = list[i];
+	child_ctx[36] = i;
 	return child_ctx;
 }
 
-// (144:2) {#if isMenuVisible}
+// (172:2) {#if isMenuVisible}
 function create_if_block$b(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -4353,7 +4353,7 @@ function create_if_block$b(ctx) {
 	return {
 		c() {
 			div = element("div");
-			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`);
+			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[0]}-dropdown-background`);
 			attr(div, "class", "goa-dropdown-background");
 		},
 		m(target, anchor) {
@@ -4365,7 +4365,7 @@ function create_if_block$b(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*name*/ 2 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`)) {
+			if (dirty[0] & /*name*/ 1 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[0]}-dropdown-background`)) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 		},
@@ -4377,10 +4377,10 @@ function create_if_block$b(ctx) {
 	};
 }
 
-// (179:4) {#each options as option, index (option.value)}
+// (208:4) {#each options as option, index (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[32].label + "";
+	let t0_value = /*option*/ ctx[34].label + "";
 	let t0;
 	let t1;
 	let li_data_testid_value;
@@ -4390,7 +4390,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[20](/*option*/ ctx[32]);
+		return /*click_handler*/ ctx[22](/*option*/ ctx[34]);
 	}
 
 	return {
@@ -4400,13 +4400,13 @@ function create_each_block$1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[32].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[34]);
+			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[34].value}-dropdown-item`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[36]);
 			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
-			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[34] === /*highlightedIndex*/ ctx[11]);
-			toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[32].value === /*value*/ ctx[0]);
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
+			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -4421,22 +4421,22 @@ function create_each_block$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[32].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[34].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[32].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[34].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[34])) {
+			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[36])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
 			if (dirty[0] & /*options, highlightedIndex*/ 2304) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[34] === /*highlightedIndex*/ ctx[11]);
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
 			}
 
-			if (dirty[0] & /*options, value*/ 257) {
-				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[32].value === /*value*/ ctx[0]);
+			if (dirty[0] & /*_values, options*/ 384) {
+				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
 			}
 		},
 		d(detaching) {
@@ -4466,7 +4466,7 @@ function create_fragment$k(ctx) {
 	let dispose;
 	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$b(ctx);
 	let each_value = /*options*/ ctx[8];
-	const get_key = ctx => /*option*/ ctx[32].value;
+	const get_key = ctx => /*option*/ ctx[34].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -4492,22 +4492,23 @@ function create_fragment$k(ctx) {
 
 			this.c = noop;
 			set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
-			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
-			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
-			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
-			set_custom_element_data(goa_input, "width", goa_input_width_value = /*width*/ ctx[7] || /*computedWidth*/ ctx[12]);
-			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`);
+			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
+			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[1]);
+			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
+			set_custom_element_data(goa_input, "width", goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12]);
+			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`);
 			set_custom_element_data(goa_input, "name", "search");
 			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
 			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
-			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`);
+			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
+			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 			attr(ul, "class", "goa-dropdown-list");
-			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`);
+			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}`);
 			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
-			attr(div1, "data-testid", /*testid*/ ctx[6]);
+			attr(div1, "data-testid", /*testid*/ ctx[5]);
 			attr(div1, "class", "goa-dropdown-box");
 		},
 		m(target, anchor) {
@@ -4525,8 +4526,8 @@ function create_fragment$k(ctx) {
 				each_blocks[i].m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[21](ul);
-			/*div1_binding*/ ctx[22](div1);
+			/*ul_binding*/ ctx[23](ul);
+			/*div1_binding*/ ctx[24](div1);
 
 			if (!mounted) {
 				dispose = listen(goa_input, "click", /*showMenu*/ ctx[16]);
@@ -4551,23 +4552,23 @@ function create_fragment$k(ctx) {
 				set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
 			}
 
-			if (dirty[0] & /*disabled*/ 32) {
-				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
+			if (dirty[0] & /*disabled*/ 16) {
+				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*leadingicon*/ 4) {
-				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
+			if (dirty[0] & /*leadingicon*/ 2) {
+				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[1]);
 			}
 
-			if (dirty[0] & /*placeholder*/ 16) {
-				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
+			if (dirty[0] & /*placeholder*/ 8) {
+				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (dirty[0] & /*width, computedWidth*/ 4224 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[7] || /*computedWidth*/ ctx[12])) {
+			if (dirty[0] & /*width, computedWidth*/ 4160 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12])) {
 				set_custom_element_data(goa_input, "width", goa_input_width_value);
 			}
 
-			if (dirty[0] & /*name*/ 2 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`)) {
+			if (dirty[0] & /*name*/ 1 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
@@ -4575,16 +4576,16 @@ function create_fragment$k(ctx) {
 				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
 			}
 
-			if (dirty[0] & /*name*/ 2 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`)) {
+			if (dirty[0] & /*name*/ 1 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`)) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex, value, onSelect*/ 264449) {
+			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 264576) {
 				each_value = /*options*/ ctx[8];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$1, null, get_each_context$1);
 			}
 
-			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`)) {
+			if (dirty[0] & /*maxheight*/ 4 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}`)) {
 				attr(ul, "style", ul_style_value);
 			}
 
@@ -4592,8 +4593,8 @@ function create_fragment$k(ctx) {
 				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
 			}
 
-			if (dirty[0] & /*testid*/ 64) {
-				attr(div1, "data-testid", /*testid*/ ctx[6]);
+			if (dirty[0] & /*testid*/ 32) {
+				attr(div1, "data-testid", /*testid*/ ctx[5]);
 			}
 		},
 		i: noop,
@@ -4606,31 +4607,33 @@ function create_fragment$k(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*ul_binding*/ ctx[21](null);
-			/*div1_binding*/ ctx[22](null);
+			/*ul_binding*/ ctx[23](null);
+			/*div1_binding*/ ctx[24](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-const MAX_HEIGHT = 300;
+const MAX_HEIGHT = "300px";
 
 function instance$j($$self, $$props, $$invalidate) {
 	let isError;
 	let { name } = $$props;
-	let { value } = $$props;
-	let { leadingicon } = $$props;
+	let { value = "" } = $$props;
+	let { leadingicon = null } = $$props;
 	let { maxheight = MAX_HEIGHT } = $$props;
 	let { placeholder = "" } = $$props;
-	let { disabled } = $$props;
-	let { error } = $$props;
-	let { testid } = $$props;
-	let { width } = $$props;
+	let { disabled = false } = $$props;
+	let { error = false } = $$props;
+	let { testid = "" } = $$props;
+	let { width = "" } = $$props;
+	let { multiselect = false } = $$props;
 
 	// Private
-	let options = [];
+	let _values = [];
 
+	let options = [];
 	let selectedLabel = "";
 	let isMenuVisible = false;
 	let highlightedIndex = 0;
@@ -4644,6 +4647,21 @@ function instance$j($$self, $$props, $$invalidate) {
 	onMount(async () => {
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
+
+		// parse and convert values to strings to avoid later type comparison issues
+		let rawValue;
+
+		try {
+			rawValue = JSON.parse(value || "[]");
+		} catch(e) {
+			rawValue = [value];
+		}
+
+		const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
+
+		// convert all values to strings to avoid later type comparison issues
+		$$invalidate(7, _values = rawValues.map(val => `${val}`));
+
 		bindContext();
 	});
 
@@ -4662,7 +4680,7 @@ function instance$j($$self, $$props, $$invalidate) {
 				case BIND$1:
 					{
 						const _data = data;
-						const selected = value === _data.value;
+						const selected = _values.includes(_data.value);
 						$$invalidate(8, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
 
 						if (selected) {
@@ -4709,15 +4727,33 @@ function instance$j($$self, $$props, $$invalidate) {
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(11, highlightedIndex = options.findIndex(option => option.value === value));
+		$$invalidate(11, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
 	}
 
 	// Event handlers
-	function onSelect(name, val, label) {
+	function onSelect(val, label) {
+		if (disabled) return;
 		$$invalidate(9, selectedLabel = label);
-		$$invalidate(0, value = val);
+
+		if (multiselect) {
+			_values.push(val);
+
+			el.dispatchEvent(new CustomEvent("_change",
+			{
+					composed: true,
+					detail: { name, values: _values }
+				}));
+		} else {
+			$$invalidate(7, _values = [val]);
+
+			el.dispatchEvent(new CustomEvent("_change",
+			{
+					composed: true,
+					detail: { name, value: _values[0] }
+				}));
+		}
+
 		closeMenu();
-		el.dispatchEvent(new CustomEvent("_change", { composed: true, detail: { name, value } }));
 	}
 
 	const onInputKeyDown = e => {
@@ -4755,7 +4791,7 @@ function instance$j($$self, $$props, $$invalidate) {
 				break;
 			case "Tab":
 			case "Enter":
-				onSelect(name, options[highlightedIndex].value, options[highlightedIndex].label);
+				onSelect(options[highlightedIndex].value, options[highlightedIndex].label);
 				e.preventDefault();
 				break;
 			case "Escape":
@@ -4769,7 +4805,7 @@ function instance$j($$self, $$props, $$invalidate) {
 		$$invalidate(11, highlightedIndex = Number(e.target.dataset.index));
 	}
 
-	const click_handler = option => onSelect(option.name, option.value, option.label);
+	const click_handler = option => onSelect(option.value, option.label);
 
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -4786,26 +4822,26 @@ function instance$j($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('value' in $$props) $$invalidate(0, value = $$props.value);
-		if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
-		if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
-		if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
-		if ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(19, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
-		if ('width' in $$props) $$invalidate(7, width = $$props.width);
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('value' in $$props) $$invalidate(19, value = $$props.value);
+		if ('leadingicon' in $$props) $$invalidate(1, leadingicon = $$props.leadingicon);
+		if ('maxheight' in $$props) $$invalidate(2, maxheight = $$props.maxheight);
+		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
+		if ('disabled' in $$props) $$invalidate(4, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(20, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
+		if ('width' in $$props) $$invalidate(6, width = $$props.width);
+		if ('multiselect' in $$props) $$invalidate(21, multiselect = $$props.multiselect);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*error*/ 524288) {
+		if ($$self.$$.dirty[0] & /*error*/ 1048576) {
 			// TODO: remove this once goa-input has the toBoolean method removed
 			$$invalidate(15, isError = error ? "true" : "false");
 		}
 	};
 
 	return [
-		value,
 		name,
 		leadingicon,
 		maxheight,
@@ -4813,6 +4849,7 @@ function instance$j($$self, $$props, $$invalidate) {
 		disabled,
 		testid,
 		width,
+		_values,
 		options,
 		selectedLabel,
 		isMenuVisible,
@@ -4824,7 +4861,9 @@ function instance$j($$self, $$props, $$invalidate) {
 		showMenu,
 		closeMenu,
 		onSelect,
+		value,
 		error,
+		multiselect,
 		click_handler,
 		ul_binding,
 		div1_binding
@@ -4847,15 +4886,16 @@ class Dropdown extends SvelteElement {
 			create_fragment$k,
 			safe_not_equal,
 			{
-				name: 1,
-				value: 0,
-				leadingicon: 2,
-				maxheight: 3,
-				placeholder: 4,
-				disabled: 5,
-				error: 19,
-				testid: 6,
-				width: 7
+				name: 0,
+				value: 19,
+				leadingicon: 1,
+				maxheight: 2,
+				placeholder: 3,
+				disabled: 4,
+				error: 20,
+				testid: 5,
+				width: 6,
+				multiselect: 21
 			},
 			null,
 			[-1, -1]
@@ -4883,12 +4923,13 @@ class Dropdown extends SvelteElement {
 			"disabled",
 			"error",
 			"testid",
-			"width"
+			"width",
+			"multiselect"
 		];
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set name(name) {
@@ -4897,7 +4938,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[19];
 	}
 
 	set value(value) {
@@ -4906,7 +4947,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get leadingicon() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set leadingicon(leadingicon) {
@@ -4915,7 +4956,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get maxheight() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[2];
 	}
 
 	set maxheight(maxheight) {
@@ -4924,7 +4965,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get placeholder() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set placeholder(placeholder) {
@@ -4933,7 +4974,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set disabled(disabled) {
@@ -4942,7 +4983,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[20];
 	}
 
 	set error(error) {
@@ -4951,7 +4992,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[5];
 	}
 
 	set testid(testid) {
@@ -4960,13 +5001,22 @@ class Dropdown extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[6];
 	}
 
 	set width(width) {
 		this.$$set({ width });
 		flush();
 	}
+
+	get multiselect() {
+		return this.$$.ctx[21];
+	}
+
+	set multiselect(multiselect) {
+		this.$$set({ multiselect });
+		flush();
+	}
 }
 
 customElements.define("goa-dropdown", Dropdown);