@abgov/web-components 1.0.0-alpha.182 → 1.0.0-alpha.184

package/web-components.es.js

@@ -7493,7 +7493,7 @@ function instance$r($$self, $$props, $$invalidate) {
 class FooterNavSection extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4);padding-bottom:var(--goa-space-l)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
 
 		init(
 			this,
@@ -11905,9 +11905,9 @@ function create_if_block$7(ctx) {
 			attr(section, "data-testid", "popover-content");
 			attr(section, "class", "popover-content");
 			set_style(section, "max-width", /*maxwidth*/ ctx[1]);
-			set_style(section, "padding", /*paddedContent*/ ctx[4] ? 'var(--goa-space-m)' : '0');
+			set_style(section, "padding", /*paddedContent*/ ctx[9] ? 'var(--goa-space-m)' : '0');
 			attr(div1, "class", "popover-container");
-			set_custom_element_data(goa_focus_trap, "active", /*_isContentVisible*/ ctx[2]);
+			set_custom_element_data(goa_focus_trap, "active", /*_isContentVisible*/ ctx[6]);
 		},
 		m(target, anchor) {
 			insert(target, goa_focus_trap, anchor);
@@ -11916,9 +11916,10 @@ function create_if_block$7(ctx) {
 			append(goa_focus_trap, div1);
 			append(div1, section);
 			append(section, slot);
+			/*section_binding*/ ctx[14](section);
 
 			if (!mounted) {
-				dispose = listen(div0, "click", /*closePopover*/ ctx[6]);
+				dispose = listen(div0, "click", /*closePopover*/ ctx[11]);
 				mounted = true;
 			}
 		},
@@ -11927,16 +11928,17 @@ function create_if_block$7(ctx) {
 				set_style(section, "max-width", /*maxwidth*/ ctx[1]);
 			}
 
-			if (dirty & /*paddedContent*/ 16) {
-				set_style(section, "padding", /*paddedContent*/ ctx[4] ? 'var(--goa-space-m)' : '0');
+			if (dirty & /*paddedContent*/ 512) {
+				set_style(section, "padding", /*paddedContent*/ ctx[9] ? 'var(--goa-space-m)' : '0');
 			}
 
-			if (dirty & /*_isContentVisible*/ 4) {
-				set_custom_element_data(goa_focus_trap, "active", /*_isContentVisible*/ ctx[2]);
+			if (dirty & /*_isContentVisible*/ 64) {
+				set_custom_element_data(goa_focus_trap, "active", /*_isContentVisible*/ ctx[6]);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_focus_trap);
+			/*section_binding*/ ctx[14](null);
 			mounted = false;
 			dispose();
 		}
@@ -11947,9 +11949,10 @@ function create_fragment$h(ctx) {
 	let div1;
 	let div0;
 	let t;
+	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*_isContentVisible*/ ctx[2] && create_if_block$7(ctx);
+	let if_block = /*_isContentVisible*/ ctx[6] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -11963,21 +11966,22 @@ function create_fragment$h(ctx) {
 			attr(div0, "tabindex", "0");
 			attr(div0, "data-testid", "popover-target");
 			attr(div1, "data-testid", /*testid*/ ctx[0]);
+			attr(div1, "style", div1_style_value = calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]));
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
 			append(div1, div0);
-			/*div0_binding*/ ctx[8](div0);
+			/*div0_binding*/ ctx[13](div0);
 			append(div1, t);
 			if (if_block) if_block.m(div1, null);
 
 			if (!mounted) {
-				dispose = listen(div0, "click", /*showPopover*/ ctx[5]);
+				dispose = listen(div0, "click", /*showPopover*/ ctx[10]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (/*_isContentVisible*/ ctx[2]) {
+			if (/*_isContentVisible*/ ctx[6]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -11993,12 +11997,16 @@ function create_fragment$h(ctx) {
 			if (dirty & /*testid*/ 1) {
 				attr(div1, "data-testid", /*testid*/ ctx[0]);
 			}
+
+			if (dirty & /*mt, mr, mb, ml*/ 60 && div1_style_value !== (div1_style_value = calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]))) {
+				attr(div1, "style", div1_style_value);
+			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div1);
-			/*div0_binding*/ ctx[8](null);
+			/*div0_binding*/ ctx[13](null);
 			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
@@ -12006,6 +12014,26 @@ function create_fragment$h(ctx) {
 	};
 }
 
+function getBoundingClientRectWithMargins(el) {
+	const rect = el.getBoundingClientRect();
+	const style = window.getComputedStyle(el);
+	const mTop = parseInt(style.marginTop, 10) || 0;
+	const mRight = parseInt(style.marginRight, 10) || 0;
+	const mBottom = parseInt(style.marginBottom, 10) || 0;
+	const mLeft = parseInt(style.marginLeft, 10) || 0;
+
+	return {
+		top: rect.top - mTop,
+		right: rect.right + mRight,
+		bottom: rect.bottom + mBottom,
+		left: rect.left - mLeft,
+		width: rect.width + mLeft + mRight,
+		height: rect.height + mTop + mBottom,
+		x: rect.x - mLeft,
+		y: rect.y - mTop
+	};
+}
+
 function instance$f($$self, $$props, $$invalidate) {
 	let paddedContent;
 	let { testid = "" } = $$props;
@@ -12013,6 +12041,11 @@ function instance$f($$self, $$props, $$invalidate) {
 	let { padded = "true" } = $$props;
 	let _isContentVisible = false;
 	let _targetEl;
+	let _popoverEl;
+	let { mt = null } = $$props;
+	let { mr = null } = $$props;
+	let { mb = null } = $$props;
+	let { ml = null } = $$props;
 
 	onMount(async () => {
 		await tick();
@@ -12023,12 +12056,14 @@ function instance$f($$self, $$props, $$invalidate) {
 		removeEventListeners();
 	});
 
-	function showPopover() {
-		$$invalidate(2, _isContentVisible = true);
+	async function showPopover() {
+		$$invalidate(6, _isContentVisible = true);
+		await tick();
+		setPopoverPosition();
 	}
 
 	function closePopover() {
-		$$invalidate(2, _isContentVisible = false);
+		$$invalidate(6, _isContentVisible = false);
 	}
 
 	const onInputKeyDown = e => {
@@ -12045,6 +12080,35 @@ function instance$f($$self, $$props, $$invalidate) {
 		}
 	};
 
+	function setPopoverPosition() {
+		// Get target and content rectangles
+		const targetRect = getBoundingClientRectWithMargins(_targetEl);
+
+		const contentRect = getBoundingClientRectWithMargins(_popoverEl);
+
+		// Calculate available space above and below the target element
+		const spaceAbove = targetRect.top;
+
+		const spaceBelow = window.innerHeight - targetRect.bottom;
+
+		// Determine if there's more space above or below the target element
+		const displayAbove = spaceAbove > contentRect.height && spaceAbove > spaceBelow && spaceBelow < contentRect.height;
+
+		// If there's more space above, display the popover above the target element
+		if (displayAbove) {
+			$$invalidate(8, _popoverEl.style.top = `${-contentRect.height - targetRect.height - 4}px`, _popoverEl);
+		} else {
+			$$invalidate(8, _popoverEl.style.top = '0px', _popoverEl);
+		}
+
+		// Move the popover to the left if it is too far to the right and only if there is space to the left
+		if (window.innerWidth - targetRect.right < contentRect.width && targetRect.left > contentRect.width) {
+			$$invalidate(8, _popoverEl.style.left = `-${contentRect.width - targetRect.width}px`, _popoverEl);
+		} else {
+			$$invalidate(8, _popoverEl.style.left = '0px', _popoverEl);
+		}
+	}
+
 	function addFocusEventListener() {
 		_targetEl.addEventListener("focus", onFocus, true);
 	}
@@ -12062,39 +12126,56 @@ function instance$f($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_targetEl = $$value;
-			$$invalidate(3, _targetEl);
+			$$invalidate(7, _targetEl);
+		});
+	}
+
+	function section_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_popoverEl = $$value;
+			$$invalidate(8, _popoverEl);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
 		if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
-		if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
+		if ('padded' in $$props) $$invalidate(12, padded = $$props.padded);
+		if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*padded*/ 128) {
-			$$invalidate(4, paddedContent = toBoolean(padded));
+		if ($$self.$$.dirty & /*padded*/ 4096) {
+			$$invalidate(9, paddedContent = toBoolean(padded));
 		}
 	};
 
 	return [
 		testid,
 		maxwidth,
+		mt,
+		mr,
+		mb,
+		ml,
 		_isContentVisible,
 		_targetEl,
+		_popoverEl,
 		paddedContent,
 		showPopover,
 		closePopover,
 		padded,
-		div0_binding
+		div0_binding,
+		section_binding
 	];
 }
 
 class Popover extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
 
 		init(
 			this,
@@ -12106,7 +12187,15 @@ class Popover extends SvelteElement {
 			instance$f,
 			create_fragment$h,
 			safe_not_equal,
-			{ testid: 0, maxwidth: 1, padded: 7 },
+			{
+				testid: 0,
+				maxwidth: 1,
+				padded: 12,
+				mt: 2,
+				mr: 3,
+				mb: 4,
+				ml: 5
+			},
 			null
 		);
 
@@ -12123,7 +12212,7 @@ class Popover extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["testid", "maxwidth", "padded"];
+		return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
 	}
 
 	get testid() {
@@ -12145,13 +12234,49 @@ class Popover extends SvelteElement {
 	}
 
 	get padded() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[12];
 	}
 
 	set padded(padded) {
 		this.$$set({ padded });
 		flush();
 	}
+
+	get mt() {
+		return this.$$.ctx[2];
+	}
+
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
+	}
+
+	get mr() {
+		return this.$$.ctx[3];
+	}
+
+	set mr(mr) {
+		this.$$set({ mr });
+		flush();
+	}
+
+	get mb() {
+		return this.$$.ctx[4];
+	}
+
+	set mb(mb) {
+		this.$$set({ mb });
+		flush();
+	}
+
+	get ml() {
+		return this.$$.ctx[5];
+	}
+
+	set ml(ml) {
+		this.$$set({ ml });
+		flush();
+	}
 }
 
 customElements.define("goa-popover", Popover);