@abgov/web-components 1.0.0-alpha.172 → 1.0.0-alpha.174

package/package.json

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

package/web-components.es.js

@@ -1771,7 +1771,7 @@ function instance$F($$self, $$props, $$invalidate) {
 	let { ml = null } = $$props;
 
 	onMount(() => {
-		validateType(type);
+		setTimeout(() => validateType(type), 1);
 
 		if (!showIcon && !content) {
 			console.warn("GoABadge must have either then content or icon property set");
@@ -2888,7 +2888,7 @@ function instance$B($$self, $$props, $$invalidate) {
 	let { testid = "" } = $$props;
 
 	onMount(() => {
-		validateType(type);
+		setTimeout(() => validateType(type), 1);
 	});
 
 	$$self.$$set = $$props => {
@@ -8630,7 +8630,7 @@ function create_if_block$b(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (dirty & /*type*/ 16) show_if = null;
-		if (show_if == null) show_if = !!Object.keys(/*_iconOverrides*/ ctx[13]).includes(/*type*/ ctx[4]);
+		if (show_if == null) show_if = !!Object.keys(/*_iconOverrides*/ ctx[12]).includes(/*type*/ ctx[4]);
 		if (show_if) return create_if_block_1$5;
 		return create_else_block$4;
 	}
@@ -8667,7 +8667,7 @@ function create_if_block$b(ctx) {
 	};
 }
 
-// (62:4) {:else}
+// (60:4) {:else}
 function create_else_block$4(ctx) {
 	let ion_icon;
 	let ion_icon_name_value;
@@ -8696,11 +8696,11 @@ function create_else_block$4(ctx) {
 	};
 }
 
-// (57:4) {#if Object.keys(_iconOverrides).includes(type)}
+// (55:4) {#if Object.keys(_iconOverrides).includes(type)}
 function create_if_block_1$5(ctx) {
 	let div;
 	let html_tag;
-	let raw_value = /*_iconOverrides*/ ctx[13][/*type*/ ctx[4]] + "";
+	let raw_value = /*_iconOverrides*/ ctx[12][/*type*/ ctx[4]] + "";
 	let t;
 	let span;
 
@@ -8720,7 +8720,7 @@ function create_if_block_1$5(ctx) {
 			append(div, span);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*type*/ 16 && raw_value !== (raw_value = /*_iconOverrides*/ ctx[13][/*type*/ ctx[4]] + "")) html_tag.p(raw_value);
+			if (dirty & /*type*/ 16 && raw_value !== (raw_value = /*_iconOverrides*/ ctx[12][/*type*/ ctx[4]] + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -8739,18 +8739,17 @@ function create_fragment$l(ctx) {
 			if (if_block) if_block.c();
 			this.c = noop;
 			attr(div, "class", "goa-icon");
-			attr(div, "data-testid", /*testid*/ ctx[10]);
-			attr(div, "title", /*title*/ ctx[9]);
+			attr(div, "data-testid", /*testid*/ ctx[9]);
+			attr(div, "title", /*title*/ ctx[8]);
 
 			attr(div, "style", div_style_value = `
     ${calculateMargin(/*mt*/ ctx[0], /*mr*/ ctx[1], /*mb*/ ctx[2], /*ml*/ ctx[3])}
-    --size: ${/*_size*/ ctx[11]};
+    --size: ${/*_size*/ ctx[10]};
     --fill-color: ${/*fillcolor*/ ctx[6]};
-    --hover-color: ${/*hovercolor*/ ctx[7]};
-    --opacity: ${/*opacity*/ ctx[8]};
+    --opacity: ${/*opacity*/ ctx[7]};
   `);
 
-			toggle_class(div, "inverted", /*isInverted*/ ctx[12]);
+			toggle_class(div, "inverted", /*isInverted*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8770,26 +8769,25 @@ function create_fragment$l(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*testid*/ 1024) {
-				attr(div, "data-testid", /*testid*/ ctx[10]);
+			if (dirty & /*testid*/ 512) {
+				attr(div, "data-testid", /*testid*/ ctx[9]);
 			}
 
-			if (dirty & /*title*/ 512) {
-				attr(div, "title", /*title*/ ctx[9]);
+			if (dirty & /*title*/ 256) {
+				attr(div, "title", /*title*/ ctx[8]);
 			}
 
-			if (dirty & /*mt, mr, mb, ml, _size, fillcolor, hovercolor, opacity*/ 2511 && div_style_value !== (div_style_value = `
+			if (dirty & /*mt, mr, mb, ml, _size, fillcolor, opacity*/ 1231 && div_style_value !== (div_style_value = `
     ${calculateMargin(/*mt*/ ctx[0], /*mr*/ ctx[1], /*mb*/ ctx[2], /*ml*/ ctx[3])}
-    --size: ${/*_size*/ ctx[11]};
+    --size: ${/*_size*/ ctx[10]};
     --fill-color: ${/*fillcolor*/ ctx[6]};
-    --hover-color: ${/*hovercolor*/ ctx[7]};
-    --opacity: ${/*opacity*/ ctx[8]};
+    --opacity: ${/*opacity*/ ctx[7]};
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty & /*isInverted*/ 4096) {
-				toggle_class(div, "inverted", /*isInverted*/ ctx[12]);
+			if (dirty & /*isInverted*/ 2048) {
+				toggle_class(div, "inverted", /*isInverted*/ ctx[11]);
 			}
 		},
 		i: noop,
@@ -8813,7 +8811,6 @@ function instance$j($$self, $$props, $$invalidate) {
 	let { theme = "outline" } = $$props;
 	let { inverted = "false" } = $$props;
 	let { fillcolor = "" } = $$props;
-	let { hovercolor = "" } = $$props;
 	let { opacity = 1 } = $$props;
 	let { title = "" } = $$props;
 	let { testid = "" } = $$props;
@@ -8837,23 +8834,22 @@ function instance$j($$self, $$props, $$invalidate) {
 		if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
 		if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
 		if ('type' in $$props) $$invalidate(4, type = $$props.type);
-		if ('size' in $$props) $$invalidate(14, size = $$props.size);
+		if ('size' in $$props) $$invalidate(13, size = $$props.size);
 		if ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
-		if ('inverted' in $$props) $$invalidate(15, inverted = $$props.inverted);
+		if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
 		if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
-		if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-		if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
-		if ('title' in $$props) $$invalidate(9, title = $$props.title);
-		if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
+		if ('opacity' in $$props) $$invalidate(7, opacity = $$props.opacity);
+		if ('title' in $$props) $$invalidate(8, title = $$props.title);
+		if ('testid' in $$props) $$invalidate(9, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*inverted*/ 32768) {
-			$$invalidate(12, isInverted = toBoolean(inverted));
+		if ($$self.$$.dirty & /*inverted*/ 16384) {
+			$$invalidate(11, isInverted = toBoolean(inverted));
 		}
 
-		if ($$self.$$.dirty & /*size*/ 16384) {
-			$$invalidate(11, _size = ({
+		if ($$self.$$.dirty & /*size*/ 8192) {
+			$$invalidate(10, _size = ({
 				small: "1.25rem",
 				medium: "1.5rem",
 				large: "2rem"
@@ -8869,7 +8865,6 @@ function instance$j($$self, $$props, $$invalidate) {
 		type,
 		theme,
 		fillcolor,
-		hovercolor,
 		opacity,
 		title,
 		testid,
@@ -8884,7 +8879,7 @@ function instance$j($$self, $$props, $$invalidate) {
 class Icon extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
 
 		init(
 			this,
@@ -8902,14 +8897,13 @@ class Icon extends SvelteElement {
 				mb: 2,
 				ml: 3,
 				type: 4,
-				size: 14,
+				size: 13,
 				theme: 5,
-				inverted: 15,
+				inverted: 14,
 				fillcolor: 6,
-				hovercolor: 7,
-				opacity: 8,
-				title: 9,
-				testid: 10
+				opacity: 7,
+				title: 8,
+				testid: 9
 			},
 			null
 		);
@@ -8937,7 +8931,6 @@ class Icon extends SvelteElement {
 			"theme",
 			"inverted",
 			"fillcolor",
-			"hovercolor",
 			"opacity",
 			"title",
 			"testid"
@@ -8990,7 +8983,7 @@ class Icon extends SvelteElement {
 	}
 
 	get size() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[13];
 	}
 
 	set size(size) {
@@ -9008,7 +9001,7 @@ class Icon extends SvelteElement {
 	}
 
 	get inverted() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[14];
 	}
 
 	set inverted(inverted) {
@@ -9025,17 +9018,8 @@ class Icon extends SvelteElement {
 		flush();
 	}
 
-	get hovercolor() {
-		return this.$$.ctx[7];
-	}
-
-	set hovercolor(hovercolor) {
-		this.$$set({ hovercolor });
-		flush();
-	}
-
 	get opacity() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[7];
 	}
 
 	set opacity(opacity) {
@@ -9044,7 +9028,7 @@ class Icon extends SvelteElement {
 	}
 
 	get title() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set title(title) {
@@ -9053,7 +9037,7 @@ class Icon extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[9];
 	}
 
 	set testid(testid) {
@@ -10257,7 +10241,7 @@ function instance$h($$self, $$props, $$invalidate) {
 	let { feedbackurl = "" } = $$props;
 
 	onMount(() => {
-		validateType(type);
+		setTimeout(() => validateType(type), 1);
 	});
 
 	$$self.$$set = $$props => {
@@ -11160,7 +11144,7 @@ function instance$f($$self, $$props, $$invalidate) {
 	let show = true;
 
 	onMount(() => {
-		validateType(type);
+		setTimeout(() => validateType(type), 1);
 	});
 
 	function close(e) {
@@ -13366,7 +13350,7 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { ml = null } = $$props;
 
 	onMount(() => {
-		validateType(type);
+		setTimeout(() => validateType(type), 1);
 		validateSize(size);
 	});