@abgov/web-components 1.0.0-alpha.147 → 1.0.0-alpha.149

package/README.md

@@ -0,0 +1,13 @@
+# GoA Web components
+
+This library contains custom components from the Government of Alberta.
+
+## [View Angular Setup](https://ui-components.alberta.ca/?path=/docs/setup-angular--page)
+
+## [View React Setup](https://ui-components.alberta.ca/?path=/docs/setup-react--page)
+
+## [View Vue Setup](https://ui-components.alberta.ca/?path=/docs/setup-vue--page)
+
+
+---
+[Visit Design System](https://ui-components.alberta.ca)

package/package.json

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

package/web-components.es.js

@@ -883,6 +883,399 @@ var variables = '';
 
 var tokens = '';
 
+function calculateMargin(mt, mr, mb, ml) {
+  return [
+    mt && `margin-top:var(--goa-space-${mt});`,
+    mr && `margin-right:var(--goa-space-${mr});`,
+    mb && `margin-bottom:var(--goa-space-${mb});`,
+    ml && `margin-left:var(--goa-space-${ml});`
+  ].join(" ");
+}
+function injectCss(el, rootSelector, css, media) {
+  const style = document.createElement("style");
+  const _css = Object.entries(css).map((entry) => `${entry[0]}: ${entry[1]};`).join(" ");
+  if (media) {
+    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
+  } else {
+    style.innerHTML = `${rootSelector} {${_css}}`;
+  }
+  el.appendChild(style);
+}
+
+function toBoolean(value) {
+  if (value === "false") {
+    return false;
+  }
+  if (value === "") {
+    return true;
+  }
+  return !!value;
+}
+function fromBoolean(value) {
+  return value ? "true" : "false";
+}
+function validateRequired(componentName, props) {
+  Object.entries(props).forEach((prop) => {
+    if (!prop[1]) {
+      console.warn(`${componentName}: ${prop[0]} is required`);
+    }
+  });
+}
+function typeValidator(message, values, required = false) {
+  const validator = (value) => {
+    if (!required && !value) {
+      return;
+    }
+    if (!values.includes(value)) {
+      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
+    }
+  };
+  return [values, validator];
+}
+
+/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
+
+function create_fragment$H(ctx) {
+	let div3;
+	let details;
+	let summary;
+	let goa_icon;
+	let goa_icon_fillcolor_value;
+	let t0;
+	let div1;
+	let span0;
+	let t1;
+	let span0_class_value;
+	let span0_data_testid_value;
+	let t2;
+	let span1;
+	let t3;
+	let t4;
+	let div0;
+	let summary_class_value;
+	let t5;
+	let div2;
+	let div3_style_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div3 = element("div");
+			details = element("details");
+			summary = element("summary");
+			goa_icon = element("goa-icon");
+			t0 = space();
+			div1 = element("div");
+			span0 = element("span");
+			t1 = text(/*heading*/ ctx[0]);
+			t2 = space();
+			span1 = element("span");
+			t3 = text(/*secondarytext*/ ctx[1]);
+			t4 = space();
+			div0 = element("div");
+			div0.innerHTML = `<slot name="headingcontent"></slot>`;
+			t5 = space();
+			div2 = element("div");
+			div2.innerHTML = `<slot></slot>`;
+			this.c = noop;
+			set_custom_element_data(goa_icon, "type", "chevron-forward");
+
+			set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_hovering*/ ctx[8]
+			? "var(--goa-color-interactive-hover)"
+			: "var(--goa-color-interactive-default)");
+
+			attr(span0, "class", span0_class_value = "heading heading-" + /*headingsize*/ ctx[2]);
+			attr(span0, "data-testid", span0_data_testid_value = `${/*testid*/ ctx[3]}-heading`);
+			attr(span1, "class", "secondary-text");
+			attr(div0, "class", "heading-content");
+			attr(div1, "class", "title");
+			attr(summary, "class", summary_class_value = `container-${/*headingsize*/ ctx[2]}`);
+			attr(div2, "class", "content");
+			details.open = /*isOpen*/ ctx[9];
+			attr(div3, "style", div3_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]));
+
+			attr(div3, "class", `
+    goa-accordion
+  `);
+
+			attr(div3, "data-testid", /*testid*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert(target, div3, anchor);
+			append(div3, details);
+			append(details, summary);
+			append(summary, goa_icon);
+			append(summary, t0);
+			append(summary, div1);
+			append(div1, span0);
+			append(span0, t1);
+			append(div1, t2);
+			append(div1, span1);
+			append(span1, t3);
+			append(div1, t4);
+			append(div1, div0);
+			append(details, t5);
+			append(details, div2);
+
+			if (!mounted) {
+				dispose = [
+					listen(summary, "mouseover", /*mouseover_handler*/ ctx[11]),
+					listen(summary, "mouseout", /*mouseout_handler*/ ctx[12]),
+					listen(summary, "focus", /*focus_handler*/ ctx[13]),
+					listen(summary, "blur", /*blur_handler*/ ctx[14])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_hovering*/ 256 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_hovering*/ ctx[8]
+			? "var(--goa-color-interactive-hover)"
+			: "var(--goa-color-interactive-default)")) {
+				set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
+			}
+
+			if (dirty & /*heading*/ 1) set_data(t1, /*heading*/ ctx[0]);
+
+			if (dirty & /*headingsize*/ 4 && span0_class_value !== (span0_class_value = "heading heading-" + /*headingsize*/ ctx[2])) {
+				attr(span0, "class", span0_class_value);
+			}
+
+			if (dirty & /*testid*/ 8 && span0_data_testid_value !== (span0_data_testid_value = `${/*testid*/ ctx[3]}-heading`)) {
+				attr(span0, "data-testid", span0_data_testid_value);
+			}
+
+			if (dirty & /*secondarytext*/ 2) set_data(t3, /*secondarytext*/ ctx[1]);
+
+			if (dirty & /*headingsize*/ 4 && summary_class_value !== (summary_class_value = `container-${/*headingsize*/ ctx[2]}`)) {
+				attr(summary, "class", summary_class_value);
+			}
+
+			if (dirty & /*isOpen*/ 512) {
+				details.open = /*isOpen*/ ctx[9];
+			}
+
+			if (dirty & /*mt, mr, mb, ml*/ 240 && div3_style_value !== (div3_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]))) {
+				attr(div3, "style", div3_style_value);
+			}
+
+			if (dirty & /*testid*/ 8) {
+				attr(div3, "data-testid", /*testid*/ ctx[3]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div3);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance$B($$self, $$props, $$invalidate) {
+	let isOpen;
+	const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
+	let { open = "false" } = $$props;
+	let { heading = "" } = $$props;
+	let { secondarytext = "" } = $$props;
+	let { headingsize = "small" } = $$props;
+	let { testid = "" } = $$props;
+	let { mt = null } = $$props;
+	let { mr = null } = $$props;
+	let { mb = "xs" } = $$props;
+	let { ml = null } = $$props;
+	let _hovering = false;
+
+	onMount(() => {
+		validateRequired("GoAAccordion", { heading });
+		validateHeadingSize(headingsize);
+	});
+
+	const mouseover_handler = () => $$invalidate(8, _hovering = true);
+	const mouseout_handler = () => $$invalidate(8, _hovering = false);
+	const focus_handler = () => $$invalidate(8, _hovering = false);
+	const blur_handler = () => $$invalidate(8, _hovering = false);
+
+	$$self.$$set = $$props => {
+		if ('open' in $$props) $$invalidate(10, open = $$props.open);
+		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+		if ('secondarytext' in $$props) $$invalidate(1, secondarytext = $$props.secondarytext);
+		if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
+		if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
+		if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*open*/ 1024) {
+			$$invalidate(9, isOpen = toBoolean(open));
+		}
+	};
+
+	return [
+		heading,
+		secondarytext,
+		headingsize,
+		testid,
+		mt,
+		mr,
+		mb,
+		ml,
+		_hovering,
+		isOpen,
+		open,
+		mouseover_handler,
+		mouseout_handler,
+		focus_handler,
+		blur_handler
+	];
+}
+
+class Accordion 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)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$B,
+			create_fragment$H,
+			safe_not_equal,
+			{
+				open: 10,
+				heading: 0,
+				secondarytext: 1,
+				headingsize: 2,
+				testid: 3,
+				mt: 4,
+				mr: 5,
+				mb: 6,
+				ml: 7
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"open",
+			"heading",
+			"secondarytext",
+			"headingsize",
+			"testid",
+			"mt",
+			"mr",
+			"mb",
+			"ml"
+		];
+	}
+
+	get open() {
+		return this.$$.ctx[10];
+	}
+
+	set open(open) {
+		this.$$set({ open });
+		flush();
+	}
+
+	get heading() {
+		return this.$$.ctx[0];
+	}
+
+	set heading(heading) {
+		this.$$set({ heading });
+		flush();
+	}
+
+	get secondarytext() {
+		return this.$$.ctx[1];
+	}
+
+	set secondarytext(secondarytext) {
+		this.$$set({ secondarytext });
+		flush();
+	}
+
+	get headingsize() {
+		return this.$$.ctx[2];
+	}
+
+	set headingsize(headingsize) {
+		this.$$set({ headingsize });
+		flush();
+	}
+
+	get testid() {
+		return this.$$.ctx[3];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[4];
+	}
+
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
+	}
+
+	get mr() {
+		return this.$$.ctx[5];
+	}
+
+	set mr(mr) {
+		this.$$set({ mr });
+		flush();
+	}
+
+	get mb() {
+		return this.$$.ctx[6];
+	}
+
+	set mb(mb) {
+		this.$$set({ mb });
+		flush();
+	}
+
+	get ml() {
+		return this.$$.ctx[7];
+	}
+
+	set ml(ml) {
+		this.$$set({ ml });
+		flush();
+	}
+}
+
+customElements.define("goa-accordion", Accordion);
+
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$4(ctx) {
@@ -1146,56 +1539,6 @@ class AppHeader extends SvelteElement {
 
 customElements.define("goa-app-header", AppHeader);
 
-function calculateMargin(mt, mr, mb, ml) {
-  return [
-    mt && `margin-top:var(--goa-space-${mt});`,
-    mr && `margin-right:var(--goa-space-${mr});`,
-    mb && `margin-bottom:var(--goa-space-${mb});`,
-    ml && `margin-left:var(--goa-space-${ml});`
-  ].join(" ");
-}
-function injectCss(el, rootSelector, css, media) {
-  const style = document.createElement("style");
-  const _css = Object.entries(css).map((entry) => `${entry[0]}: ${entry[1]};`).join(" ");
-  if (media) {
-    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
-  } else {
-    style.innerHTML = `${rootSelector} {${_css}}`;
-  }
-  el.appendChild(style);
-}
-
-function toBoolean(value) {
-  if (value === "false") {
-    return false;
-  }
-  if (value === "") {
-    return true;
-  }
-  return !!value;
-}
-function fromBoolean(value) {
-  return value ? "true" : "false";
-}
-function validateRequired(componentName, props) {
-  Object.entries(props).forEach((prop) => {
-    if (!prop[1]) {
-      console.warn(`${componentName}: ${prop[0]} is required`);
-    }
-  });
-}
-function typeValidator(message, values, required = false) {
-  const validator = (value) => {
-    if (!required && !value) {
-      return;
-    }
-    if (!values.includes(value)) {
-      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
-    }
-  };
-  return [values, validator];
-}
-
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$3(ctx) {
@@ -10344,8 +10687,10 @@ function instance$a($$self, $$props, $$invalidate) {
 		validateType(type);
 	});
 
-	function close() {
+	function close(e) {
 		$$invalidate(1, show = false);
+		e.target.dispatchEvent(new CustomEvent("_dismiss", { composed: true }));
+		e.stopPropagation();
 	}
 
 	$$self.$$set = $$props => {
@@ -12774,7 +13119,7 @@ class TextArea extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.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(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);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,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+		this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.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(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@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,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
 
 		init(