@gomusdev/web-components 4.1.0 → 4.2.0

package/README.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 4.2.0 (2026-07-09)
+
+### Features
+
+* **membership:** add <go-membership-activation> form web component
+
+## 4.1.1 (2026-07-09)
+
+### Bug Fixes
+
+* **forms:** pass required type argument to HTMLAttributes
+* **forms:** resolve remaining typescript-eslint errors in InputAndLabel
+* **forms:** set field.value when a single payment mode is auto-selected, closes [#135](https://gitlab.giantmonkey.de/gomus/frontend/issues/135)
+* **forms:** type the field snippet map as Record<FieldType, Snippet>
+
 ## 4.1.0 (2026-07-09)
 
 ### Features

package/dist-js/components/membershipActivation/MembershipActivation.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist-js/gomus-webcomponents.iife.js

@@ -13545,6 +13545,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 	var SIGN_IN_ENDPOINT = "/api/v4/auth/sign_in";
 	var SIGN_UP_ENDPOINT = "/api/v4/auth";
 	var WITHDRAWAL_ENDPOINT = "/api/v4/orders/withdrawals";
+	var MEMBERSHIP_ACTIVATION_ENDPOINT = "/api/v4/customer/memberships/activate";
 	var ORDERS_ENDPOINT = "/api/v4/orders";
 	//#endregion
 	//#region ../../packages/gomus-api/lib/customerLevels.ts
@@ -13763,6 +13764,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				requiredFields: ["email"]
 			});
 		}
+		activateMembership(params) {
+			return this.apiPost(MEMBERSHIP_ACTIVATION_ENDPOINT, {
+				body: params,
+				requiredFields: ["email"],
+				parseAs: "text"
+			});
+		}
 		checkout(params) {
 			return this.apiPost(`/api/v4/orders`, {
 				body: params,
@@ -32813,10 +32821,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 	var root_9$1 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
 	var root_10$1 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
 	var root_11 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
-	var root_12 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
-	var root_13 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
-	var root_14 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-	var root_15 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+	var root_12 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-name"> </span>`);
+	var root_13 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+	var root_14 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+	var root_15 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+	var root_16 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 	function InputAndLabel($$anchor, $$props) {
 		push($$props, true);
 		const labelText = ($$anchor) => {
@@ -33016,12 +33025,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		};
 		const paymentMode = ($$anchor) => {
 			const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
-			var fieldset = root_13();
+			var fieldset = root_14();
 			var legend = child(fieldset);
 			labelText(child(legend));
 			reset(legend);
 			each(sibling(legend, 2), 17, () => get$2(modes), (mode) => mode.id, ($$anchor, mode) => {
-				var label_6 = root_12();
+				var label_6 = root_13();
 				var input_4 = child(label_6);
 				remove_input_defaults(input_4);
 				var node_11 = sibling(input_4, 2);
@@ -33040,8 +33049,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					reset(span_2);
 					append($$anchor, span_2);
 				};
+				var alternate = ($$anchor) => {
+					var span_3 = root_12();
+					var text_4 = child(span_3, true);
+					reset(span_3);
+					template_effect(() => set_text(text_4, get$2(mode).name));
+					append($$anchor, span_3);
+				};
 				if_block(node_11, ($$render) => {
 					if (get$2(mode).icons.length > 0) $$render(consequent_3);
+					else $$render(alternate, -1);
 				});
 				reset(label_6);
 				template_effect(($0, $1, $2) => {
@@ -33052,7 +33069,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					set_attribute(input_4, "aria-label", $2);
 				}, [
 					() => String(get$2(mode).id),
-					() => get$2(modes).length === 1 || String(get$2(mode).id) === String(field().value),
+					() => field().value === String(get$2(mode).id),
 					() => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
 				]);
 				delegated("change", input_4, () => {
@@ -33068,17 +33085,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			append($$anchor, fieldset);
 		};
 		const radio = ($$anchor) => {
-			var fieldset_1 = root_15();
+			var fieldset_1 = root_16();
 			var legend_1 = child(fieldset_1);
 			labelText(child(legend_1));
 			reset(legend_1);
 			var node_13 = sibling(legend_1, 2);
 			var consequent_4 = ($$anchor) => {
 				var fragment_9 = comment();
-				each(first_child(fragment_9), 17, () => field().options, index$1, ($$anchor, option) => {
-					var label_7 = root_14();
-					var text_4 = child(label_7);
-					var input_5 = sibling(text_4);
+				each(first_child(fragment_9), 17, () => field().options(), (option) => option.value, ($$anchor, option) => {
+					var label_7 = root_15();
+					var text_5 = child(label_7);
+					var input_5 = sibling(text_5);
 					attribute_effect(input_5, () => ({
 						...get$2(fieldAttributes),
 						...restProps,
@@ -33088,8 +33105,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					reset(label_7);
 					template_effect(() => {
 						set_class(label_7, 1, clsx(labelClass()));
-						set_attribute(label_7, "for", get$2(inputId) + get$2(option));
-						set_text(text_4, `${get$2(option) ?? ""} `);
+						set_attribute(label_7, "for", get$2(inputId) + get$2(option).value);
+						set_text(text_5, `${get$2(option).label ?? ""} `);
 					});
 					bind_value(input_5, () => field().value, ($$value) => field(field().value = $$value, true));
 					append($$anchor, label_7);
@@ -33139,6 +33156,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}));
 		let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
 		const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
+		user_effect(() => {
+			if (field().type !== "paymentMode") return;
+			const modes = shop.payment_modes ? Object.values(shop.payment_modes) : [];
+			if (modes.length === 1 && field().value === "") field(field().value = String(modes[0].id), true);
+		});
 		let filePreviewUrl = /* @__PURE__ */ state(null);
 		user_effect(() => {
 			const value = field().value;
@@ -35758,6 +35780,47 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		type: "String"
 	} }, [], []));
 	//#endregion
+	//#region src/components/membershipActivation/MembershipActivation.svelte
+	function MembershipActivation($$anchor, $$props) {
+		push($$props, true);
+		let custom = prop($$props, "custom", 7, false);
+		Forms.defineForm({
+			id: "membershipActivation",
+			submitLabel: "membership.activation.actions.submit",
+			fields: [{
+				key: "email",
+				required: true
+			}]
+		});
+		async function onSubmit(event) {
+			const details = event.target.details;
+			if ((await shop.activateMembership(details.formData)).response?.ok) $$props.$$host.dispatchEvent(new Event("go-success", {
+				bubbles: true,
+				composed: true
+			}));
+			else details.apiErrors = [shop.t("membership.activation.form.errors.requestFailed")];
+		}
+		wrapInElement($$props.$$host, "go-form", {
+			"form-id": "membershipActivation",
+			custom: custom()
+		});
+		$$props.$$host.addEventListener("submit", onSubmit);
+		return pop({
+			get custom() {
+				return custom();
+			},
+			set custom($$value = false) {
+				custom($$value);
+				flushSync();
+			}
+		});
+	}
+	customElements.define("go-membership-activation", create_custom_element(MembershipActivation, { custom: {
+		attribute: "custom",
+		reflect: true,
+		type: "Boolean"
+	} }, [], []));
+	//#endregion
 	//#region src/components/order/lib/OrderDetails.svelte.ts
 	var OrderDetails = class {
 		#token = /* @__PURE__ */ state();

package/dist-js/gomus-webcomponents.js

@@ -13544,6 +13544,7 @@ var TICKETS_ENDPOINT = "/api/v4/tickets";
 var SIGN_IN_ENDPOINT = "/api/v4/auth/sign_in";
 var SIGN_UP_ENDPOINT = "/api/v4/auth";
 var WITHDRAWAL_ENDPOINT = "/api/v4/orders/withdrawals";
+var MEMBERSHIP_ACTIVATION_ENDPOINT = "/api/v4/customer/memberships/activate";
 var ORDERS_ENDPOINT = "/api/v4/orders";
 //#endregion
 //#region ../../packages/gomus-api/lib/customerLevels.ts
@@ -13762,6 +13763,13 @@ var Shop = class {
 			requiredFields: ["email"]
 		});
 	}
+	activateMembership(params) {
+		return this.apiPost(MEMBERSHIP_ACTIVATION_ENDPOINT, {
+			body: params,
+			requiredFields: ["email"],
+			parseAs: "text"
+		});
+	}
 	checkout(params) {
 		return this.apiPost(`/api/v4/orders`, {
 			body: params,
@@ -32812,10 +32820,11 @@ var select_content = /* @__PURE__ */ from_html(`<!>`, 1);
 var root_9$1 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
 var root_10$1 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
 var root_11 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
-var root_12 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
-var root_13 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
-var root_14 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-var root_15 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+var root_12 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-name"> </span>`);
+var root_13 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+var root_14 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+var root_15 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+var root_16 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 function InputAndLabel($$anchor, $$props) {
 	push($$props, true);
 	const labelText = ($$anchor) => {
@@ -33015,12 +33024,12 @@ function InputAndLabel($$anchor, $$props) {
 	};
 	const paymentMode = ($$anchor) => {
 		const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
-		var fieldset = root_13();
+		var fieldset = root_14();
 		var legend = child(fieldset);
 		labelText(child(legend));
 		reset(legend);
 		each(sibling(legend, 2), 17, () => get$2(modes), (mode) => mode.id, ($$anchor, mode) => {
-			var label_6 = root_12();
+			var label_6 = root_13();
 			var input_4 = child(label_6);
 			remove_input_defaults(input_4);
 			var node_11 = sibling(input_4, 2);
@@ -33039,8 +33048,16 @@ function InputAndLabel($$anchor, $$props) {
 				reset(span_2);
 				append($$anchor, span_2);
 			};
+			var alternate = ($$anchor) => {
+				var span_3 = root_12();
+				var text_4 = child(span_3, true);
+				reset(span_3);
+				template_effect(() => set_text(text_4, get$2(mode).name));
+				append($$anchor, span_3);
+			};
 			if_block(node_11, ($$render) => {
 				if (get$2(mode).icons.length > 0) $$render(consequent_3);
+				else $$render(alternate, -1);
 			});
 			reset(label_6);
 			template_effect(($0, $1, $2) => {
@@ -33051,7 +33068,7 @@ function InputAndLabel($$anchor, $$props) {
 				set_attribute(input_4, "aria-label", $2);
 			}, [
 				() => String(get$2(mode).id),
-				() => get$2(modes).length === 1 || String(get$2(mode).id) === String(field().value),
+				() => field().value === String(get$2(mode).id),
 				() => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
 			]);
 			delegated("change", input_4, () => {
@@ -33067,17 +33084,17 @@ function InputAndLabel($$anchor, $$props) {
 		append($$anchor, fieldset);
 	};
 	const radio = ($$anchor) => {
-		var fieldset_1 = root_15();
+		var fieldset_1 = root_16();
 		var legend_1 = child(fieldset_1);
 		labelText(child(legend_1));
 		reset(legend_1);
 		var node_13 = sibling(legend_1, 2);
 		var consequent_4 = ($$anchor) => {
 			var fragment_9 = comment();
-			each(first_child(fragment_9), 17, () => field().options, index$1, ($$anchor, option) => {
-				var label_7 = root_14();
-				var text_4 = child(label_7);
-				var input_5 = sibling(text_4);
+			each(first_child(fragment_9), 17, () => field().options(), (option) => option.value, ($$anchor, option) => {
+				var label_7 = root_15();
+				var text_5 = child(label_7);
+				var input_5 = sibling(text_5);
 				attribute_effect(input_5, () => ({
 					...get$2(fieldAttributes),
 					...restProps,
@@ -33087,8 +33104,8 @@ function InputAndLabel($$anchor, $$props) {
 				reset(label_7);
 				template_effect(() => {
 					set_class(label_7, 1, clsx(labelClass()));
-					set_attribute(label_7, "for", get$2(inputId) + get$2(option));
-					set_text(text_4, `${get$2(option) ?? ""} `);
+					set_attribute(label_7, "for", get$2(inputId) + get$2(option).value);
+					set_text(text_5, `${get$2(option).label ?? ""} `);
 				});
 				bind_value(input_5, () => field().value, ($$value) => field(field().value = $$value, true));
 				append($$anchor, label_7);
@@ -33138,6 +33155,11 @@ function InputAndLabel($$anchor, $$props) {
 	}));
 	let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
 	const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
+	user_effect(() => {
+		if (field().type !== "paymentMode") return;
+		const modes = shop.payment_modes ? Object.values(shop.payment_modes) : [];
+		if (modes.length === 1 && field().value === "") field(field().value = String(modes[0].id), true);
+	});
 	let filePreviewUrl = /* @__PURE__ */ state(null);
 	user_effect(() => {
 		const value = field().value;
@@ -35757,6 +35779,47 @@ customElements.define("go-link", create_custom_element(Link, { to: {
 	type: "String"
 } }, [], []));
 //#endregion
+//#region src/components/membershipActivation/MembershipActivation.svelte
+function MembershipActivation($$anchor, $$props) {
+	push($$props, true);
+	let custom = prop($$props, "custom", 7, false);
+	Forms.defineForm({
+		id: "membershipActivation",
+		submitLabel: "membership.activation.actions.submit",
+		fields: [{
+			key: "email",
+			required: true
+		}]
+	});
+	async function onSubmit(event) {
+		const details = event.target.details;
+		if ((await shop.activateMembership(details.formData)).response?.ok) $$props.$$host.dispatchEvent(new Event("go-success", {
+			bubbles: true,
+			composed: true
+		}));
+		else details.apiErrors = [shop.t("membership.activation.form.errors.requestFailed")];
+	}
+	wrapInElement($$props.$$host, "go-form", {
+		"form-id": "membershipActivation",
+		custom: custom()
+	});
+	$$props.$$host.addEventListener("submit", onSubmit);
+	return pop({
+		get custom() {
+			return custom();
+		},
+		set custom($$value = false) {
+			custom($$value);
+			flushSync();
+		}
+	});
+}
+customElements.define("go-membership-activation", create_custom_element(MembershipActivation, { custom: {
+	attribute: "custom",
+	reflect: true,
+	type: "Boolean"
+} }, [], []));
+//#endregion
 //#region src/components/order/lib/OrderDetails.svelte.ts
 var OrderDetails = class {
 	#token = /* @__PURE__ */ state();