@abgov/web-components 1.0.0-alpha.84 → 1.0.0-alpha.87

package/package.json

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

package/web-components.es.js

@@ -3228,7 +3228,7 @@ function instance$q($$self, $$props, $$invalidate) {
 class Chip extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+		this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
 
 		init(
 			this,
@@ -3577,7 +3577,7 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (175:2) {#if isMenuVisible}
+// (179:2) {#if isMenuVisible}
 function create_if_block$d(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -3611,7 +3611,7 @@ function create_if_block$d(ctx) {
 	};
 }
 
-// (211:4) {#each options as option, index (option.value)}
+// (215:4) {#each options as option, index (option.value)}
 function create_each_block$4(key_1, ctx) {
 	let li;
 	let t0_value = /*option*/ ctx[35].label + "";
@@ -3881,6 +3881,11 @@ function instance$o($$self, $$props, $$invalidate) {
 
 	// Hooks
 	onMount(async () => {
+		if (!name) {
+			console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+			return;
+		}
+
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
 
@@ -4284,6 +4289,11 @@ function instance$n($$self, $$props, $$invalidate) {
 
 	// Hooks
 	onMount(async () => {
+		if (!name) {
+			console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
+			return;
+		}
+
 		ctx = await getContext(name);
 		ctx.notify({ type: BIND$1, name, label, value });
 	});
@@ -6233,12 +6243,26 @@ function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0,
 }
 
 function noScroll(_node, opts) {
+  let toggledScrolling = false;
   function hideScrollbars() {
+    if (!isScrollable()) {
+      return;
+    }
     const scrollbarWidth = calculateScrollbarWidth();
-    document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = scrollbarWidth + "px";
+    if (scrollbarWidth > 0) {
+      toggledScrolling = true;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = scrollbarWidth + "px";
+    }
+  }
+  function isScrollable() {
+    return document.body.style.overflow !== "hidden";
   }
   function resetScrollbars() {
+    if (!toggledScrolling) {
+      return;
+    }
+    toggledScrolling = false;
     setTimeout(() => {
       document.body.style.overflow = "";
       document.body.style.paddingRight = "0";
@@ -6263,9 +6287,7 @@ function noScroll(_node, opts) {
   }
   return {
     update() {
-      if (opts.enable) {
-        hideScrollbars();
-      } else {
+      if (!opts.enable) {
         resetScrollbars();
       }
     },
@@ -6300,10 +6322,10 @@ function create_if_block$9(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*heading*/ ctx[0] && create_if_block_3$2(ctx);
-	let if_block1 = /*isClosable*/ ctx[5] && create_if_block_2$4(ctx);
+	let if_block1 = /*isClosable*/ ctx[3] && create_if_block_2$4(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[7]) return create_if_block_1$5;
+		if (/*isScrollable*/ ctx[6]) return create_if_block_1$5;
 		return create_else_block$1;
 	}
 
@@ -6337,7 +6359,7 @@ function create_if_block$9(ctx) {
 			attr(div3, "class", "modal-pane");
 			attr(div4, "data-testid", "modal");
 			attr(div4, "class", "modal");
-			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[4] + "px; " + (/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";");
+			attr(div4, "style", div4_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"));
 			set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -6360,8 +6382,8 @@ function create_if_block$9(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[8]),
-					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[3] }))
+					listen(div0, "click", /*close*/ ctx[7]),
+					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[5] }))
 				];
 
 				mounted = true;
@@ -6383,7 +6405,7 @@ function create_if_block$9(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*isClosable*/ ctx[5]) {
+			if (/*isClosable*/ ctx[3]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -6406,11 +6428,11 @@ function create_if_block$9(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*scrollOffset, width*/ 20 && div4_style_value !== (div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[4] + "px; " + (/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";")) {
+			if (!current || dirty & /*width*/ 4 && div4_style_value !== (div4_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
 				attr(div4, "style", div4_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 8) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[3] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 32) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[5] });
 
 			if (!current || dirty & /*open*/ 2) {
 				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
@@ -6423,7 +6445,7 @@ function create_if_block$9(ctx) {
 				if (div3_outro) div3_outro.end(1);
 
 				div3_intro = create_in_transition(div3, fly, {
-					duration: /*_transitionTime*/ ctx[6],
+					duration: /*_transitionTime*/ ctx[4],
 					y: 200
 				});
 
@@ -6432,7 +6454,7 @@ function create_if_block$9(ctx) {
 
 			add_render_callback(() => {
 				if (div4_outro) div4_outro.end(1);
-				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[6] });
+				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[4] });
 				div4_intro.start();
 			});
 
@@ -6442,16 +6464,16 @@ function create_if_block$9(ctx) {
 			if (div3_intro) div3_intro.invalidate();
 
 			div3_outro = create_out_transition(div3, fly, {
-				delay: /*_transitionTime*/ ctx[6],
-				duration: /*_transitionTime*/ ctx[6],
+				delay: /*_transitionTime*/ ctx[4],
+				duration: /*_transitionTime*/ ctx[4],
 				y: -100
 			});
 
 			if (div4_intro) div4_intro.invalidate();
 
 			div4_outro = create_out_transition(div4, fade, {
-				delay: /*_transitionTime*/ ctx[6],
-				duration: /*_transitionTime*/ ctx[6]
+				delay: /*_transitionTime*/ ctx[4],
+				duration: /*_transitionTime*/ ctx[4]
 			});
 
 			current = false;
@@ -6469,7 +6491,7 @@ function create_if_block$9(ctx) {
 	};
 }
 
-// (60:8) {#if heading}
+// (58:8) {#if heading}
 function create_if_block_3$2(ctx) {
 	let div;
 	let t;
@@ -6494,7 +6516,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (63:8) {#if isClosable}
+// (61:8) {#if isClosable}
 function create_if_block_2$4(ctx) {
 	let div;
 	let goa_icon_button;
@@ -6514,7 +6536,7 @@ function create_if_block_2$4(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[8]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[7]);
 				mounted = true;
 			}
 		},
@@ -6527,7 +6549,7 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (77:10) {:else}
+// (75:10) {:else}
 function create_else_block$1(ctx) {
 	let div;
 
@@ -6546,7 +6568,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (73:10) {#if isScrollable}
+// (71:10) {#if isScrollable}
 function create_if_block_1$5(ctx) {
 	let goa_scrollable;
 
@@ -6570,7 +6592,7 @@ function create_if_block_1$5(ctx) {
 function create_fragment$i(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[3] && create_if_block$9(ctx);
+	let if_block = /*isOpen*/ ctx[5] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -6584,11 +6606,11 @@ function create_fragment$i(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[3]) {
+			if (/*isOpen*/ ctx[5]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 8) {
+					if (dirty & /*isOpen*/ 32) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -6634,7 +6656,10 @@ function instance$g($$self, $$props, $$invalidate) {
 	let { open } = $$props;
 	let { transition } = $$props;
 	let { width } = $$props;
-	let scrollOffset = 0;
+
+	onMount(() => {
+		console.log("in the modal v2");
+	});
 
 	function close(e) {
 		if (!isClosable) {
@@ -6647,36 +6672,28 @@ function instance$g($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(10, scrollable = $$props.scrollable);
+		if ('closable' in $$props) $$invalidate(8, closable = $$props.closable);
+		if ('scrollable' in $$props) $$invalidate(9, scrollable = $$props.scrollable);
 		if ('open' in $$props) $$invalidate(1, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
+		if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
 		if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 512) {
-			$$invalidate(5, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 256) {
+			$$invalidate(3, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 1024) {
-			$$invalidate(7, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 512) {
+			$$invalidate(6, isScrollable = toBoolean(scrollable));
 		}
 
 		if ($$self.$$.dirty & /*open*/ 2) {
-			$$invalidate(3, isOpen = toBoolean(open));
-		}
-
-		if ($$self.$$.dirty & /*isOpen*/ 8) {
-			{
-				if (isOpen) {
-					$$invalidate(4, scrollOffset = window.pageYOffset);
-				}
-			}
+			$$invalidate(5, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 2048) {
-			$$invalidate(6, _transitionTime = transition === "none"
+		if ($$self.$$.dirty & /*transition*/ 1024) {
+			$$invalidate(4, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
@@ -6686,10 +6703,9 @@ function instance$g($$self, $$props, $$invalidate) {
 		heading,
 		open,
 		width,
-		isOpen,
-		scrollOffset,
 		isClosable,
 		_transitionTime,
+		isOpen,
 		isScrollable,
 		close,
 		closable,
@@ -6701,7 +6717,7 @@ function instance$g($$self, $$props, $$invalidate) {
 class Modal extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
 
 		init(
 			this,
@@ -6715,10 +6731,10 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 9,
-				scrollable: 10,
+				closable: 8,
+				scrollable: 9,
 				open: 1,
-				transition: 11,
+				transition: 10,
 				width: 2
 			},
 			null
@@ -6750,7 +6766,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set closable(closable) {
@@ -6759,7 +6775,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[9];
 	}
 
 	set scrollable(scrollable) {
@@ -6777,7 +6793,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[10];
 	}
 
 	set transition(transition) {
@@ -7550,7 +7566,7 @@ function get_each_context$3(ctx, list, i) {
 	return child_ctx;
 }
 
-// (51:2) {#each options as option (option.value) }
+// (55:2) {#each options as option (option.value) }
 function create_each_block$3(key_1, ctx) {
 	let label;
 	let input;
@@ -7738,6 +7754,11 @@ function instance$d($$self, $$props, $$invalidate) {
 	let el;
 
 	onMount(() => {
+		if (!name) {
+			console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+			return;
+		}
+
 		ctx = createContext(name);
 
 		ctx.subscribe(msg => {
@@ -7926,6 +7947,11 @@ function instance$c($$self, $$props, $$invalidate) {
 	let ctx;
 
 	onMount(async () => {
+		if (!name) {
+			console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+			return;
+		}
+
 		ctx = await getContext(name);
 		ctx.notify({ type: BIND, value, label });
 	});
@@ -9711,7 +9737,7 @@ class TextArea extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
 
 		init(