@abgov/web-components 1.0.0-alpha.175 → 1.0.0-alpha.176

package/package.json

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

package/web-components.es.js

@@ -10412,7 +10412,7 @@ function create_if_block$8(ctx) {
 
 	let current_block_type = select_block_type(ctx);
 	let if_block1 = current_block_type(ctx);
-	let if_block2 = /*_isClosable*/ ctx[8] && create_if_block_1$2(ctx);
+	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$2(ctx);
 
 	return {
 		c() {
@@ -10468,21 +10468,22 @@ function create_if_block$8(ctx) {
 			if_block1.m(div1, null);
 			append(header, t2);
 			if (if_block2) if_block2.m(header, null);
+			/*header_binding*/ ctx[16](header);
 			append(div4, t3);
 			append(div4, div2);
 			append(div2, goa_scrollable);
-			/*goa_scrollable_binding*/ ctx[15](goa_scrollable);
-			/*div2_binding*/ ctx[16](div2);
+			/*goa_scrollable_binding*/ ctx[17](goa_scrollable);
+			/*div2_binding*/ ctx[18](div2);
 			append(div4, t4);
 			append(div4, div3);
-			/*div6_binding*/ ctx[17](div6);
+			/*div6_binding*/ ctx[19](div6);
 			current = true;
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[11]),
-					listen(goa_scrollable, "_scroll", /*handleScroll*/ ctx[12]),
-					action_destroyer(noscroll_action = noscroll.call(null, div6, { enable: /*_isOpen*/ ctx[6] }))
+					listen(div0, "click", /*close*/ ctx[12]),
+					listen(goa_scrollable, "_scroll", /*handleScroll*/ ctx[13]),
+					action_destroyer(noscroll_action = noscroll.call(null, div6, { enable: /*_isOpen*/ ctx[7] }))
 				];
 
 				mounted = true;
@@ -10516,7 +10517,7 @@ function create_if_block$8(ctx) {
 				}
 			}
 
-			if (/*_isClosable*/ ctx[8]) {
+			if (/*_isClosable*/ ctx[9]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -10533,7 +10534,7 @@ function create_if_block$8(ctx) {
 				attr(div6, "style", div6_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*_isOpen*/ 64) noscroll_action.update.call(null, { enable: /*_isOpen*/ ctx[6] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*_isOpen*/ 128) noscroll_action.update.call(null, { enable: /*_isOpen*/ ctx[7] });
 
 			if (!current || dirty & /*open*/ 2) {
 				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
@@ -10546,7 +10547,7 @@ function create_if_block$8(ctx) {
 				if (div5_outro) div5_outro.end(1);
 
 				div5_intro = create_in_transition(div5, fly, {
-					duration: /*_transitionTime*/ ctx[10],
+					duration: /*_transitionTime*/ ctx[11],
 					y: 200
 				});
 
@@ -10555,7 +10556,7 @@ function create_if_block$8(ctx) {
 
 			add_render_callback(() => {
 				if (div6_outro) div6_outro.end(1);
-				div6_intro = create_in_transition(div6, fade, { duration: /*_transitionTime*/ ctx[10] });
+				div6_intro = create_in_transition(div6, fade, { duration: /*_transitionTime*/ ctx[11] });
 				div6_intro.start();
 			});
 
@@ -10565,16 +10566,16 @@ function create_if_block$8(ctx) {
 			if (div5_intro) div5_intro.invalidate();
 
 			div5_outro = create_out_transition(div5, fly, {
-				delay: /*_transitionTime*/ ctx[10],
-				duration: /*_transitionTime*/ ctx[10],
+				delay: /*_transitionTime*/ ctx[11],
+				duration: /*_transitionTime*/ ctx[11],
 				y: -100
 			});
 
 			if (div6_intro) div6_intro.invalidate();
 
 			div6_outro = create_out_transition(div6, fade, {
-				delay: /*_transitionTime*/ ctx[10],
-				duration: /*_transitionTime*/ ctx[10]
+				delay: /*_transitionTime*/ ctx[11],
+				duration: /*_transitionTime*/ ctx[11]
 			});
 
 			current = false;
@@ -10584,10 +10585,11 @@ function create_if_block$8(ctx) {
 			if (if_block0) if_block0.d();
 			if_block1.d();
 			if (if_block2) if_block2.d();
-			/*goa_scrollable_binding*/ ctx[15](null);
-			/*div2_binding*/ ctx[16](null);
+			/*header_binding*/ ctx[16](null);
+			/*goa_scrollable_binding*/ ctx[17](null);
+			/*div2_binding*/ ctx[18](null);
 			if (detaching && div5_outro) div5_outro.end();
-			/*div6_binding*/ ctx[17](null);
+			/*div6_binding*/ ctx[19](null);
 			if (detaching && div6_outro) div6_outro.end();
 			mounted = false;
 			run_all(dispose);
@@ -10595,7 +10597,7 @@ function create_if_block$8(ctx) {
 	};
 }
 
-// (116:8) {#if calloutvariant !== null}
+// (132:8) {#if calloutvariant !== null}
 function create_if_block_3$2(ctx) {
 	let div;
 	let goa_icon;
@@ -10606,7 +10608,7 @@ function create_if_block_3$2(ctx) {
 		c() {
 			div = element("div");
 			goa_icon = element("goa-icon");
-			set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[9]);
+			set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[10]);
 
 			set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
 			? "false"
@@ -10619,8 +10621,8 @@ function create_if_block_3$2(ctx) {
 			append(div, goa_icon);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_iconType*/ 512) {
-				set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[9]);
+			if (dirty & /*_iconType*/ 1024) {
+				set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[10]);
 			}
 
 			if (dirty & /*calloutvariant*/ 8 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
@@ -10639,7 +10641,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (129:14) {:else}
+// (145:14) {:else}
 function create_else_block$3(ctx) {
 	let slot;
 
@@ -10658,7 +10660,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (127:14) {#if heading}
+// (143:14) {#if heading}
 function create_if_block_2$2(ctx) {
 	let t;
 
@@ -10678,7 +10680,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (133:12) {#if _isClosable}
+// (149:12) {#if _isClosable}
 function create_if_block_1$2(ctx) {
 	let div;
 	let goa_icon_button;
@@ -10699,7 +10701,7 @@ function create_if_block_1$2(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[11]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[12]);
 				mounted = true;
 			}
 		},
@@ -10715,7 +10717,7 @@ function create_if_block_1$2(ctx) {
 function create_fragment$i(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*_isOpen*/ ctx[6] && create_if_block$8(ctx);
+	let if_block = /*_isOpen*/ ctx[7] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -10729,11 +10731,11 @@ function create_fragment$i(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*_isOpen*/ ctx[6]) {
+			if (/*_isOpen*/ ctx[7]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*_isOpen*/ 64) {
+					if (dirty & /*_isOpen*/ 128) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -10785,6 +10787,7 @@ function instance$g($$self, $$props, $$invalidate) {
 
 	let _contentEl = null;
 	let _scrollEl = null;
+	let _headerEl = null;
 
 	// Type verification
 	const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
@@ -10837,56 +10840,73 @@ function instance$g($$self, $$props, $$invalidate) {
 		}
 	}
 
+	function getChildren() {
+		const slot = _headerEl.querySelector("slot");
+
+		if (slot) {
+			return [...slot.assignedElements()];
+		} else {
+			return [..._headerEl.children]; // unit tests
+		}
+	}
+
+	function header_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_headerEl = $$value;
+			(($$invalidate(6, _headerEl), $$invalidate(7, _isOpen)), $$invalidate(1, open));
+		});
+	}
+
 	function goa_scrollable_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_scrollEl = $$value;
-			(($$invalidate(5, _scrollEl), $$invalidate(6, _isOpen)), $$invalidate(1, open));
+			(($$invalidate(5, _scrollEl), $$invalidate(7, _isOpen)), $$invalidate(1, open));
 		});
 	}
 
 	function div2_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_contentEl = $$value;
-			(($$invalidate(4, _contentEl), $$invalidate(6, _isOpen)), $$invalidate(1, open));
+			(($$invalidate(4, _contentEl), $$invalidate(7, _isOpen)), $$invalidate(1, open));
 		});
 	}
 
 	function div6_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_rootEl = $$value;
-			(($$invalidate(7, _rootEl), $$invalidate(6, _isOpen)), $$invalidate(1, open));
+			(($$invalidate(8, _rootEl), $$invalidate(7, _isOpen)), $$invalidate(1, open));
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(13, closable = $$props.closable);
+		if ('closable' in $$props) $$invalidate(14, closable = $$props.closable);
 		if ('open' in $$props) $$invalidate(1, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(14, transition = $$props.transition);
+		if ('transition' in $$props) $$invalidate(15, transition = $$props.transition);
 		if ('width' in $$props) $$invalidate(2, width = $$props.width);
 		if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 8192) {
+		if ($$self.$$.dirty & /*closable*/ 16384) {
 			// Reactive
-			$$invalidate(8, _isClosable = toBoolean(closable));
+			$$invalidate(9, _isClosable = toBoolean(closable));
 		}
 
 		if ($$self.$$.dirty & /*open*/ 2) {
-			$$invalidate(6, _isOpen = toBoolean(open));
+			$$invalidate(7, _isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*_isOpen*/ 64) {
+		if ($$self.$$.dirty & /*_isOpen*/ 128) {
 			if (!_isOpen) {
 				// prevent null issues
-				$$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(7, _rootEl = null)));
+				$$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(8, _rootEl = $$invalidate(6, _headerEl = null))));
 
 				window.removeEventListener('keydown', onInputKeyDown);
 			}
 		}
 
-		if ($$self.$$.dirty & /*_isOpen, _scrollEl, _contentEl*/ 112) {
+		if ($$self.$$.dirty & /*_isOpen, _scrollEl, _contentEl*/ 176) {
 			if (_isOpen && _scrollEl && _contentEl) {
 				const hasScroll = _scrollEl.scrollHeight > _scrollEl.offsetHeight;
 
@@ -10896,20 +10916,25 @@ function instance$g($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*_isOpen, _contentEl*/ 80) {
+		if ($$self.$$.dirty & /*_isOpen, _contentEl, _headerEl*/ 208) {
 			if (_isOpen && _contentEl) {
 				window.addEventListener('keydown', onInputKeyDown);
+				const children = getChildren();
+
+				if (_headerEl.querySelector("div.modal-title").textContent || _headerEl.querySelector("div.modal-close") || children.length) {
+					_headerEl.classList.add("has-content");
+				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 16384) {
-			$$invalidate(10, _transitionTime = transition === "none"
+		if ($$self.$$.dirty & /*transition*/ 32768) {
+			$$invalidate(11, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
 
 		if ($$self.$$.dirty & /*calloutvariant*/ 8) {
-			$$invalidate(9, _iconType = calloutvariant === "emergency"
+			$$invalidate(10, _iconType = calloutvariant === "emergency"
 			? "warning"
 			: calloutvariant === "important"
 				? "alert-circle"
@@ -10928,6 +10953,7 @@ function instance$g($$self, $$props, $$invalidate) {
 		calloutvariant,
 		_contentEl,
 		_scrollEl,
+		_headerEl,
 		_isOpen,
 		_rootEl,
 		_isClosable,
@@ -10937,6 +10963,7 @@ function instance$g($$self, $$props, $$invalidate) {
 		handleScroll,
 		closable,
 		transition,
+		header_binding,
 		goa_scrollable_binding,
 		div2_binding,
 		div6_binding
@@ -10946,7 +10973,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(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);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}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem}.content header{display:flex;align-items:center;margin-bottom:2rem;justify-content:space-between}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:1.5rem 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font-size:var(--goa-font-size-7);flex:0 0 auto}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);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}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:1.5rem 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
 
 		init(
 			this,
@@ -10960,9 +10987,9 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 13,
+				closable: 14,
 				open: 1,
-				transition: 14,
+				transition: 15,
 				width: 2,
 				calloutvariant: 3
 			},
@@ -10995,7 +11022,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[14];
 	}
 
 	set closable(closable) {
@@ -11013,7 +11040,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set transition(transition) {