@abgov/web-components 1.0.0-alpha.169 → 1.0.0-alpha.170

package/package.json

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

package/web-components.es.js

@@ -5489,7 +5489,7 @@ function get_each_context_1(ctx, list, i) {
 	return child_ctx;
 }
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[50] = list[i];
 	return child_ctx;
@@ -5686,7 +5686,7 @@ function create_if_block$f(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
 	}
 
 	return {
@@ -5723,12 +5723,12 @@ function create_if_block$f(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$4(ctx, each_value, i);
+					const child_ctx = get_each_context$5(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$4(child_ctx);
+						each_blocks[i] = create_each_block$5(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(select, null);
 					}
@@ -5906,7 +5906,7 @@ function create_each_block_1(key_1, ctx) {
 }
 
 // (260:6) {#each _options as option}
-function create_each_block$4(ctx) {
+function create_each_block$5(ctx) {
 	let option;
 	let t0_value = /*option*/ ctx[50].label + "";
 	let t0;
@@ -6400,7 +6400,7 @@ function instance$s($$self, $$props, $$invalidate) {
 class Dropdown extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin: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;bottom:var(--bottom);scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin: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;bottom:var(--bottom);scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
 
 		init(
 			this,
@@ -7106,14 +7106,14 @@ customElements.define("goa-app-footer", Footer);
 
 /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[3] = list[i];
 	return child_ctx;
 }
 
 // (52:4) {#each children as child}
-function create_each_block$3(ctx) {
+function create_each_block$4(ctx) {
 	let li;
 	let a;
 	let t_value = /*child*/ ctx[3].innerHTML + "";
@@ -7154,7 +7154,7 @@ function create_fragment$r(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
 
 	return {
@@ -7190,12 +7190,12 @@ function create_fragment$r(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$3(ctx, each_value, i);
+					const child_ctx = get_each_context$4(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i] = create_each_block$4(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(ul, null);
 					}
@@ -7281,7 +7281,7 @@ customElements.define("goa-app-footer-meta-section", FooterMetaSection);
 
 /* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[5] = list[i];
 	return child_ctx;
@@ -7321,7 +7321,7 @@ function create_if_block$d(ctx) {
 }
 
 // (49:4) {#each children as child}
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
 	let li;
 	let a;
 	let t_value = /*child*/ ctx[5].innerHTML + "";
@@ -7365,7 +7365,7 @@ function create_fragment$q(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	}
 
 	return {
@@ -7428,12 +7428,12 @@ function create_fragment$q(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$2(ctx, each_value, i);
+					const child_ctx = get_each_context$3(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$2(child_ctx);
+						each_blocks[i] = create_each_block$3(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(ul, null);
 					}
@@ -11357,17 +11357,31 @@ customElements.define("goa-page-block", PageBlock);
 
 /* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
 
+function get_each_context$2(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[18] = list[i];
+	child_ctx[20] = i;
+	return child_ctx;
+}
+
+// (66:4) {#if variant === "all"}
 function create_if_block$6(ctx) {
 	let goa_block;
 	let span0;
 	let t1;
 	let input;
 	let t2;
-	let goa_input;
+	let goa_dropdown;
 	let t3;
 	let span1;
 	let t4;
 	let t5;
+	let each_value = { length: /*_pageCount*/ ctx[8] };
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+	}
 
 	return {
 		c() {
@@ -11377,18 +11391,19 @@ function create_if_block$6(ctx) {
 			t1 = space();
 			input = element("input");
 			t2 = space();
-			goa_input = element("goa-input");
+			goa_dropdown = element("goa-dropdown");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
 			t3 = space();
 			span1 = element("span");
 			t4 = text("of ");
 			t5 = text(/*_pageCount*/ ctx[8]);
 			attr(input, "type", "hidden");
-			set_custom_element_data(goa_input, "type", "number");
-			set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
-			set_custom_element_data(goa_input, "width", "8ch");
-			set_custom_element_data(goa_input, "debounce", "500");
-			set_custom_element_data(goa_input, "min", "1");
-			set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
+			set_custom_element_data(goa_dropdown, "value", /*pagenumber*/ ctx[0]);
+			set_custom_element_data(goa_dropdown, "width", "70px");
 			set_custom_element_data(goa_block, "data-testid", "page-selector");
 			set_custom_element_data(goa_block, "alignment", "center");
 			set_custom_element_data(goa_block, "gap", "s");
@@ -11400,20 +11415,44 @@ function create_if_block$6(ctx) {
 			append(goa_block, input);
 			/*input_binding*/ ctx[12](input);
 			append(goa_block, t2);
-			append(goa_block, goa_input);
-			/*goa_input_binding*/ ctx[13](goa_input);
+			append(goa_block, goa_dropdown);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(goa_dropdown, null);
+			}
+
+			/*goa_dropdown_binding*/ ctx[13](goa_dropdown);
 			append(goa_block, t3);
 			append(goa_block, span1);
 			append(span1, t4);
 			append(span1, t5);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*pagenumber*/ 1) {
-				set_custom_element_data(goa_input, "value", /*pagenumber*/ ctx[0]);
+			if (dirty & /*_pageCount*/ 256) {
+				each_value = { length: /*_pageCount*/ ctx[8] };
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$2(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block$2(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(goa_dropdown, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
 			}
 
-			if (dirty & /*_pageCount*/ 256) {
-				set_custom_element_data(goa_input, "max", /*_pageCount*/ ctx[8]);
+			if (dirty & /*pagenumber*/ 1) {
+				set_custom_element_data(goa_dropdown, "value", /*pagenumber*/ ctx[0]);
 			}
 
 			if (dirty & /*_pageCount*/ 256) set_data(t5, /*_pageCount*/ ctx[8]);
@@ -11421,7 +11460,28 @@ function create_if_block$6(ctx) {
 		d(detaching) {
 			if (detaching) detach(goa_block);
 			/*input_binding*/ ctx[12](null);
-			/*goa_input_binding*/ ctx[13](null);
+			destroy_each(each_blocks, detaching);
+			/*goa_dropdown_binding*/ ctx[13](null);
+		}
+	};
+}
+
+// (71:10) {#each {length: _pageCount} as _, i}
+function create_each_block$2(ctx) {
+	let goa_dropdown_item;
+
+	return {
+		c() {
+			goa_dropdown_item = element("goa-dropdown-item");
+			set_custom_element_data(goa_dropdown_item, "value", /*i*/ ctx[20] + 1);
+			set_custom_element_data(goa_dropdown_item, "label", /*i*/ ctx[20] + 1);
+		},
+		m(target, anchor) {
+			insert(target, goa_dropdown_item, anchor);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(goa_dropdown_item);
 		}
 	};
 }
@@ -11560,7 +11620,7 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { ml = null } = $$props;
 
 	// private
-	let inputEl = null;
+	let pageDropdownEl = null;
 
 	let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
 
@@ -11570,16 +11630,11 @@ function instance$d($$self, $$props, $$invalidate) {
 		validateRequired("GoAPagination", { itemcount, pagenumber });
 		validateVariant(variant);
 
-		// prevent event propagation if value is non-numeric 
-		// (input[type=number] returns blank for non-numeric numbers)
-		inputEl && inputEl.addEventListener("_change", e => {
+		// prevent event propagation
+		pageDropdownEl && pageDropdownEl.addEventListener("_change", e => {
 			const page = Number.parseInt(e.detail.value);
 			e.stopPropagation();
 
-			if (isNaN(page)) {
-				return;
-			}
-
 			hiddenEl.dispatchEvent(new CustomEvent("_change",
 			{
 					composed: true,
@@ -11612,10 +11667,10 @@ function instance$d($$self, $$props, $$invalidate) {
 		});
 	}
 
-	function goa_input_binding($$value) {
+	function goa_dropdown_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			inputEl = $$value;
-			$$invalidate(6, inputEl);
+			pageDropdownEl = $$value;
+			$$invalidate(6, pageDropdownEl);
 		});
 	}
 
@@ -11647,14 +11702,14 @@ function instance$d($$self, $$props, $$invalidate) {
 		mr,
 		mb,
 		ml,
-		inputEl,
+		pageDropdownEl,
 		hiddenEl,
 		_pageCount,
 		goto,
 		itemcount,
 		perpagecount,
 		input_binding,
-		goa_input_binding,
+		goa_dropdown_binding,
 		click_handler,
 		click_handler_1
 	];