@abgov/web-components 1.0.0-alpha.119 → 1.0.0-alpha.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.119",
+  "version": "1.0.0-alpha.120",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -14,8 +14,6 @@
   "module": "web-components.umd.js",
   "scripts": {
     "dev": "rollup -c rollup.config.js -w",
-    "demo": "rollup -c rollup.demo.config.js -w",
-    "start": "sirv demo/public",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "license": "Apache-2.0",
@@ -41,7 +39,6 @@
     "rollup-plugin-summary": "^1.3.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "sirv-cli": "^1.0.0",
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",

package/web-components.es.js

@@ -877,7 +877,7 @@ if (typeof HTMLElement === 'function') {
 
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$4(ctx) {
+function create_else_block$3(ctx) {
 	let div;
 	let img0;
 	let img0_src_value;
@@ -924,7 +924,7 @@ function create_else_block$4(ctx) {
 	};
 }
 
-// (18:4) {#if url}
+// (19:4) {#if url}
 function create_if_block$j(ctx) {
 	let a;
 	let img0;
@@ -986,7 +986,7 @@ function create_fragment$F(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*url*/ ctx[1]) return create_if_block$j;
-		return create_else_block$4;
+		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1153,7 +1153,7 @@ function fromBoolean(value) {
 
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$3(ctx) {
+function create_else_block$2(ctx) {
 	let div;
 
 	return {
@@ -1172,7 +1172,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (40:2) {#if showIcon}
+// (35:2) {#if showIcon}
 function create_if_block_1$b(ctx) {
 	let goa_icon;
 
@@ -1196,7 +1196,7 @@ function create_if_block_1$b(ctx) {
 	};
 }
 
-// (45:2) {#if content}
+// (40:2) {#if content}
 function create_if_block$i(ctx) {
 	let div;
 	let t;
@@ -1227,7 +1227,7 @@ function create_fragment$E(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*showIcon*/ ctx[3]) return create_if_block_1$b;
-		return create_else_block$3;
+		return create_else_block$2;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1305,8 +1305,8 @@ function instance$z($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let { testid = "" } = $$props;
-	let { icon = "false" } = $$props;
 	let { content = "" } = $$props;
+	let { icon = "false" } = $$props;
 
 	onMount(() => {
 		if (!showIcon && !content) {
@@ -1317,13 +1317,12 @@ function instance$z($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
 		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
-		if ('icon' in $$props) $$invalidate(5, icon = $$props.icon);
 		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+		if ('icon' in $$props) $$invalidate(5, icon = $$props.icon);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*icon*/ 32) {
-			// export let icon: WCBoolean = WC_FALSE;
 			$$invalidate(3, showIcon = toBoolean(icon));
 		}
 
@@ -1358,7 +1357,7 @@ class Badge extends SvelteElement {
 			instance$z,
 			create_fragment$E,
 			safe_not_equal,
-			{ type: 0, testid: 1, icon: 5, content: 2 },
+			{ type: 0, testid: 1, content: 2, icon: 5 },
 			null
 		);
 
@@ -1375,7 +1374,7 @@ class Badge extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "testid", "icon", "content"];
+		return ["type", "testid", "content", "icon"];
 	}
 
 	get type() {
@@ -1396,21 +1395,21 @@ class Badge extends SvelteElement {
 		flush();
 	}
 
-	get icon() {
-		return this.$$.ctx[5];
+	get content() {
+		return this.$$.ctx[2];
 	}
 
-	set icon(icon) {
-		this.$$set({ icon });
+	set content(content) {
+		this.$$set({ content });
 		flush();
 	}
 
-	get content() {
-		return this.$$.ctx[2];
+	get icon() {
+		return this.$$.ctx[5];
 	}
 
-	set content(content) {
-		this.$$set({ content });
+	set icon(icon) {
+		this.$$set({ icon });
 		flush();
 	}
 }
@@ -1522,7 +1521,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 /* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$2(ctx) {
+function create_else_block$1(ctx) {
 	let t0;
 	let slot;
 	let t1;
@@ -1682,7 +1681,7 @@ function create_fragment$C(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*type*/ ctx[0] === "start") return create_if_block$h;
-		return create_else_block$2;
+		return create_else_block$1;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1787,15 +1786,15 @@ function instance$x($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		if (!isButtonType(type)) {
-			throw "Invalid button type";
+			console.error("Invalid button type");
 		}
 
 		if (!isSize(size)) {
-			throw "Invalid button size";
+			console.error("Invalid button size");
 		}
 
 		if (!isVariant(variant)) {
-			throw "Invalid button variant";
+			console.error("Invalid button variant");
 		}
 	});
 
@@ -2722,7 +2721,7 @@ function instance$t($$self, $$props, $$invalidate) {
 	let isChecked;
 	let isIndeterminate;
 	let { name } = $$props;
-	let { checked } = $$props;
+	let { checked = "false" } = $$props;
 	let { text = "" } = $$props;
 	let { value = "" } = $$props;
 	let { disabled = "false" } = $$props;
@@ -2936,7 +2935,7 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (44:2) {#if _deletable}
+// (46:2) {#if _deletable}
 function create_if_block$e(ctx) {
 	let goa_icon;
 	let goa_icon_fillcolor_value;
@@ -4040,7 +4039,7 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (204:2) {#if isMenuVisible}
+// (203:2) {#if isMenuVisible}
 function create_if_block$c(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -4074,7 +4073,7 @@ function create_if_block$c(ctx) {
 	};
 }
 
-// (243:4) {#each options as option, index}
+// (244:4) {#each options as option, index}
 function create_each_block$4(ctx) {
 	let li;
 	let t_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
@@ -4473,8 +4472,6 @@ function instance$p($$self, $$props, $$invalidate) {
 		// hide menu on blur
 		menuEl.addEventListener("blur", closeMenu);
 
-		menuEl.focus();
-
 		// bind up/down arrows to navigate options
 		menuEl.addEventListener("mouseover", onHighlight);
 	}
@@ -5140,13 +5137,19 @@ function create_fragment$n(ctx) {
 function isFocusable(element) {
 	const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
 	if (isTabbable) return true;
-	if (element.disabled) return false;
+	if (element["disabled"]) return false;
 
 	switch (element.nodeName) {
 		case 'A':
-			return !!element.href && element.rel !== 'ignore';
+			{
+				const el = element;
+				return !!el.href && el.rel !== 'ignore';
+			}
 		case 'INPUT':
-			return element.type !== 'hidden' && element.type !== 'file';
+			{
+				const el = element;
+				return el.type !== 'hidden' && el.type !== 'file';
+			}
 		case 'BUTTON':
 		case 'SELECT':
 		case 'TEXTAREA':
@@ -6260,7 +6263,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		if (!isRequirementType(requirement)) {
-			throw "Invalid requirement type";
+			console.error("Invalid requirement type", requirement);
 		}
 	});
 
@@ -7067,7 +7070,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (78:4) {#if leadingicon}
+// (79:4) {#if leadingicon}
 function create_if_block_3$2(ctx) {
 	let goa_icon;
 
@@ -7092,7 +7095,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (108:4) {#if trailingicon && !handlesTrailingIconClick}
+// (109:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$4(ctx) {
 	let goa_icon;
 
@@ -7118,7 +7121,7 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (118:4) {#if trailingicon && handlesTrailingIconClick}
+// (119:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$5(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -7158,7 +7161,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (129:4) {#if suffix}
+// (131:4) {#if suffix}
 function create_if_block$7(ctx) {
 	let span;
 	let t;
@@ -7466,15 +7469,17 @@ function instance$d($$self, $$props, $$invalidate) {
 	let inputEl;
 
 	function onKeyUp(e) {
+		const ee = e.target;
+
 		e.target.dispatchEvent(new CustomEvent("_change",
 		{
 				composed: true,
 				bubbles: false,
 				cancelable: true,
-				detail: { name, value: e.target.value }
+				detail: { name, value: ee.value }
 			}));
 
-		$$invalidate(0, value = e.target.value);
+		$$invalidate(0, value = ee.value);
 	}
 
 	function input_binding($$value) {
@@ -8101,8 +8106,8 @@ function capitalize(val) {
 
 function instance$c($$self, $$props, $$invalidate) {
 	let { type } = $$props;
-	let { version } = $$props;
-	let { feedbackurl } = $$props;
+	let { version = "" } = $$props;
+	let { feedbackurl = "" } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
@@ -8206,11 +8211,10 @@ function create_if_block$5(ctx) {
 	let if_block1 = /*isClosable*/ ctx[3] && create_if_block_2$2(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[6]) return create_if_block_1$3;
-		return create_else_block$1;
+		return create_if_block_1$3;
 	}
 
-	let current_block_type = select_block_type(ctx);
+	let current_block_type = select_block_type();
 	let if_block2 = current_block_type(ctx);
 
 	return {
@@ -8263,7 +8267,7 @@ function create_if_block$5(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[7]),
+					listen(div0, "click", /*close*/ ctx[6]),
 					action_destroyer(noscroll_action = noscroll.call(null, div4, { enable: /*isOpen*/ ctx[5] }))
 				];
 
@@ -8299,16 +8303,6 @@ function create_if_block$5(ctx) {
 				if_block1 = null;
 			}
 
-			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
-				if_block2.d(1);
-				if_block2 = current_block_type(ctx);
-
-				if (if_block2) {
-					if_block2.c();
-					if_block2.m(div1, t3);
-				}
-			}
-
 			if (!current || dirty & /*width*/ 4 && div4_style_value !== (div4_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
 				attr(div4, "style", div4_style_value);
 			}
@@ -8372,7 +8366,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (54:8) {#if heading}
+// (53:8) {#if heading}
 function create_if_block_3(ctx) {
 	let div;
 	let t;
@@ -8397,7 +8391,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (57:8) {#if isClosable}
+// (56:8) {#if isClosable}
 function create_if_block_2$2(ctx) {
 	let div;
 	let goa_icon_button;
@@ -8417,7 +8411,7 @@ function create_if_block_2$2(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[7]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[6]);
 				mounted = true;
 			}
 		},
@@ -8430,25 +8424,6 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (71:10) {:else}
-function create_else_block$1(ctx) {
-	let div;
-
-	return {
-		c() {
-			div = element("div");
-			div.innerHTML = `<slot></slot>`;
-			set_style(div, "margin", "1.75rem");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
 // (67:10) {#if isScrollable}
 function create_if_block_1$3(ctx) {
 	let goa_scrollable;
@@ -8528,15 +8503,13 @@ function create_fragment$d(ctx) {
 
 function instance$b($$self, $$props, $$invalidate) {
 	let isClosable;
-	let isScrollable;
 	let isOpen;
 	let _transitionTime;
-	let { heading } = $$props;
-	let { closable } = $$props;
-	let { scrollable } = $$props;
-	let { open } = $$props;
+	let { heading = "" } = $$props;
+	let { closable = "false" } = $$props;
+	let { open = "false" } = $$props;
 	let { transition = "none" } = $$props;
-	let { width } = $$props;
+	let { width = "" } = $$props;
 
 	function close(e) {
 		if (!isClosable) {
@@ -8549,27 +8522,22 @@ function instance$b($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(8, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(9, scrollable = $$props.scrollable);
+		if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
 		if ('open' in $$props) $$invalidate(1, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
+		if ('transition' in $$props) $$invalidate(8, transition = $$props.transition);
 		if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 256) {
+		if ($$self.$$.dirty & /*closable*/ 128) {
 			$$invalidate(3, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 512) {
-			$$invalidate(6, isScrollable = toBoolean(scrollable));
-		}
-
 		if ($$self.$$.dirty & /*open*/ 2) {
 			$$invalidate(5, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 1024) {
+		if ($$self.$$.dirty & /*transition*/ 256) {
 			$$invalidate(4, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
@@ -8583,10 +8551,8 @@ function instance$b($$self, $$props, $$invalidate) {
 		isClosable,
 		_transitionTime,
 		isOpen,
-		isScrollable,
 		close,
 		closable,
-		scrollable,
 		transition
 	];
 }
@@ -8608,10 +8574,9 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 8,
-				scrollable: 9,
+				closable: 7,
 				open: 1,
-				transition: 10,
+				transition: 8,
 				width: 2
 			},
 			null
@@ -8630,7 +8595,7 @@ class Modal extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["heading", "closable", "scrollable", "open", "transition", "width"];
+		return ["heading", "closable", "open", "transition", "width"];
 	}
 
 	get heading() {
@@ -8643,7 +8608,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[7];
 	}
 
 	set closable(closable) {
@@ -8651,15 +8616,6 @@ class Modal extends SvelteElement {
 		flush();
 	}
 
-	get scrollable() {
-		return this.$$.ctx[9];
-	}
-
-	set scrollable(scrollable) {
-		this.$$set({ scrollable });
-		flush();
-	}
-
 	get open() {
 		return this.$$.ctx[1];
 	}
@@ -8670,7 +8626,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[8];
 	}
 
 	set transition(transition) {
@@ -8957,7 +8913,7 @@ function instance$9($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		if (!isValidSize(width)) {
-			throw "Invalid PageBlock width";
+			console.error("Invalid PageBlock width");
 		}
 
 		$$invalidate(0, _width = Sizes[width] || width);
@@ -9908,7 +9864,7 @@ function create_if_block$3(ctx) {
 			props: {
 				type: "lines",
 				size: /*size*/ ctx[1],
-				count: 3
+				linecount: 3
 			}
 		});
 
@@ -9985,7 +9941,7 @@ function create_each_block(ctx) {
 			props: {
 				type: "text",
 				size: /*size*/ ctx[1],
-				count: /*linecount*/ ctx[2]
+				linecount: /*linecount*/ ctx[2]
 			}
 		});
 
@@ -10000,7 +9956,7 @@ function create_each_block(ctx) {
 		p(ctx, dirty) {
 			const skeleton_changes = {};
 			if (dirty & /*size*/ 2) skeleton_changes.size = /*size*/ ctx[1];
-			if (dirty & /*linecount*/ 4) skeleton_changes.count = /*linecount*/ ctx[2];
+			if (dirty & /*linecount*/ 4) skeleton_changes.linecount = /*linecount*/ ctx[2];
 			skeleton.$set(skeleton_changes);
 		},
 		i(local) {
@@ -10091,7 +10047,7 @@ function create_fragment$7(ctx) {
 }
 
 function instance$5($$self, $$props, $$invalidate) {
-	let { maxwidth } = $$props;
+	let { maxwidth = "" } = $$props;
 	let { size = 1 } = $$props;
 	let { linecount = 3 } = $$props;
 	let { type } = $$props;
@@ -11620,7 +11576,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		if (!isSpacing(spacing)) {
-			throw "Invalid spacing";
+			console.error("Invalid spacing");
 		}
 	});