@zitadel/components 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/standalone.mjs

@@ -1561,6 +1561,13 @@ let ZlButton = class ZlButton extends i$2 {
 	set label(value) {
 		this.#_label_accessor_storage = value;
 	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
 	#_forcedState_accessor_storage = null;
 	get forcedState() {
 		return this.#_forcedState_accessor_storage;
@@ -1573,50 +1580,97 @@ let ZlButton = class ZlButton extends i$2 {
 		super();
 		this.internals = this.attachInternals();
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleHostClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleHostClick);
+		super.disconnectedCallback();
+	}
 	focus(options) {
 		this.shadowRoot?.querySelector("button")?.focus(options);
 	}
 	render() {
-		const blocked = this.disabled || this.loading;
-		const body = this.label !== void 0 ? b`<span>${this.label}</span>` : b`<slot></slot>`;
+		const hierarchy = this.stringOption("hierarchy", this.hierarchy, "primary");
+		const size = this.stringOption("size", this.size, "medium");
+		const type = this.buttonType();
+		const loading = this.booleanOption("loading", this.loading);
+		const disabled = this.booleanOption("disabled", this.disabled);
+		const block = this.booleanOption("block", this.block);
+		const label = this.stringOption("label", this.label);
+		const blocked = disabled || loading;
+		const body = label !== void 0 ? b`<span>${label}</span>` : b`<slot></slot>`;
 		return b`
       <button
         class=${e$2({
 			root: true,
 			"zr-btn": true,
-			[`zr-btn--${this.hierarchy}`]: true,
-			[`zr-btn--${this.size}`]: true,
-			"zr-btn--block": this.block
+			[`zr-btn--${hierarchy}`]: true,
+			[`zr-btn--${size}`]: true,
+			"zr-btn--block": block
 		})}
         part="root"
-        type=${this.type}
+        type=${type}
         ?disabled=${blocked}
-        aria-busy=${this.loading ? "true" : "false"}
+        aria-busy=${loading ? "true" : "false"}
+        data-testid=${this.nativeButtonTestId() ?? A}
         data-state=${this.forcedState ?? A}
         @click=${this.handleClick}
       >
         <slot name="leading"></slot>
         ${body}
-        ${this.loading ? b`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${this.size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : b`<slot name="trailing"></slot>`}
+        ${loading ? b`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : b`<slot name="trailing"></slot>`}
       </button>
     `;
 	}
 	handleClick = (event) => {
-		if (this.disabled || this.loading) {
+		this.activate(event);
+	};
+	handleHostClick = (event) => {
+		if (event.composedPath()[0] !== this) return;
+		this.activate(event);
+	};
+	nativeButtonTestId() {
+		const testId = this.stringOption("data-testid", this.testId);
+		if (testId) return `${testId}-button`;
+		const action = this.buttonAction();
+		return action ? `zitadel-action-${action}` : void 0;
+	}
+	buttonType() {
+		const type = this.stringOption("type", this.type, "button");
+		return type === "submit" || type === "reset" ? type : "button";
+	}
+	buttonAction() {
+		return this.stringOption("action", this.action);
+	}
+	activate(event) {
+		const type = this.buttonType();
+		const action = this.buttonAction();
+		if (this.booleanOption("disabled", this.disabled) || this.booleanOption("loading", this.loading)) {
 			event.preventDefault();
 			event.stopImmediatePropagation();
 			return;
 		}
 		const form = this.internals.form;
-		if (this.type === "submit" && form) {
+		if (type === "submit" && form) {
 			event.preventDefault();
 			form.requestSubmit();
-		} else if (this.type === "reset" && form) {
+		} else if (type === "reset" && form) {
 			event.preventDefault();
 			form.reset();
 		}
-		emit(this, "zl-submit", { action: this.action ?? null });
-	};
+		emit(this, "zl-submit", { action: action ?? null });
+	}
+	stringOption(attribute, value, fallback) {
+		if (typeof value === "string" && value.length > 0) return value;
+		const attr = this.getAttribute(attribute);
+		if (attr !== null && attr.length > 0) return attr;
+		return fallback;
+	}
+	booleanOption(attribute, value) {
+		return value === true || this.hasAttribute(attribute);
+	}
 };
 __decorate([n$1({ reflect: true })], ZlButton.prototype, "hierarchy", null);
 __decorate([n$1({ reflect: true })], ZlButton.prototype, "size", null);
@@ -1632,6 +1686,7 @@ __decorate([n$1({
 	reflect: true
 })], ZlButton.prototype, "block", null);
 __decorate([n$1()], ZlButton.prototype, "label", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlButton.prototype, "testId", null);
 __decorate([n$1({ attribute: "data-state" })], ZlButton.prototype, "forcedState", null);
 ZlButton = __decorate([t$4("zl-button")], ZlButton);
 const zlButtonManifest = {
@@ -1648,7 +1703,8 @@ const zlButtonManifest = {
 		"loading",
 		"disabled",
 		"block",
-		"label"
+		"label",
+		"data-testid"
 	],
 	parts: ["root", "spinner"],
 	slots: [
@@ -1857,6 +1913,13 @@ let ZlField = class ZlField extends i$2 {
 	set success(value) {
 		this.#_success_accessor_storage = value;
 	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
 	#_forgotPasswordHref_accessor_storage = void 0;
 	get forgotPasswordHref() {
 		return this.#_forgotPasswordHref_accessor_storage;
@@ -1975,6 +2038,7 @@ let ZlField = class ZlField extends i$2 {
             class="zr-field__input"
             part="input"
             id=${this.inputId}
+            data-testid=${o(this.nativeInputTestId())}
             name=${this.name}
             type=${this.type}
             .value=${l(this.value)}
@@ -2081,23 +2145,26 @@ let ZlField = class ZlField extends i$2 {
 			value: this.value
 		});
 		this.syncFormState();
+		this.dispatchNativeInput();
 		this.inputEl?.focus();
 	};
 	handleInput = (event) => {
+		event.stopPropagation();
 		const input = event.target;
 		this.value = input.value;
+		this.syncFormState();
 		emit(this, "zl-input", {
 			name: this.name,
 			value: this.value
 		});
+		this.dispatchNativeInput(event);
 	};
 	handleChange = (event) => {
+		event.stopPropagation();
 		const input = event.target;
 		this.value = input.value;
-		this.dispatchEvent(new Event("change", {
-			bubbles: true,
-			composed: true
-		}));
+		this.syncFormState();
+		this.dispatchNativeChange();
 	};
 	handleKeyDown = (event) => {
 		if (event.key === "Enter" && !event.isComposing && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey) {
@@ -2108,6 +2175,33 @@ let ZlField = class ZlField extends i$2 {
 			}
 		}
 	};
+	nativeInputTestId() {
+		if (this.testId) return `${this.testId}-input`;
+		return this.name ? `zitadel-input-${this.name}` : void 0;
+	}
+	dispatchNativeInput(source) {
+		if (typeof InputEvent === "function") {
+			const input = source instanceof InputEvent ? source : void 0;
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				data: input?.data ?? null,
+				inputType: input?.inputType ?? "",
+				isComposing: input?.isComposing ?? false
+			}));
+			return;
+		}
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	dispatchNativeChange() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
 };
 __decorate([n$1()], ZlField.prototype, "label", null);
 __decorate([n$1()], ZlField.prototype, "type", null);
@@ -2117,6 +2211,7 @@ __decorate([n$1()], ZlField.prototype, "autocomplete", null);
 __decorate([n$1()], ZlField.prototype, "pattern", null);
 __decorate([n$1()], ZlField.prototype, "error", null);
 __decorate([n$1()], ZlField.prototype, "success", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlField.prototype, "testId", null);
 __decorate([n$1({ attribute: "forgot-password-href" })], ZlField.prototype, "forgotPasswordHref", null);
 __decorate([n$1({ attribute: "forgot-password-label" })], ZlField.prototype, "forgotPasswordLabel", null);
 __decorate([n$1({
@@ -2147,6 +2242,7 @@ const zlFieldManifest = {
 		"placeholder",
 		"autocomplete",
 		"pattern",
+		"data-testid",
 		"required",
 		"disabled",
 		"invalid",
@@ -8677,7 +8773,7 @@ function lookup(locale, key) {
 }
 //#endregion
 //#region src/orchestrator/templates/default.liquid
-var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      <p slot=\"header\" class=\"zl-card-subtitle\">{{ step.texts.description_key | t: identity.display_name }}</p>\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for entry in fields %}\n      {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}\n      {% assign field_help = entry[1].text_key | fieldHelp %}\n      {% assign field_err = entry[0] | fieldError: errors %}\n      {% assign autocomplete_val = '' %}\n      {% if entry[0] == 'email' %}\n        {% assign autocomplete_val = 'email' %}\n      {% elsif entry[1].type == 'password' and step.name contains 'register' %}\n        {% assign autocomplete_val = 'new-password' %}\n      {% elsif entry[1].type == 'password' %}\n        {% assign autocomplete_val = 'current-password' %}\n      {% endif %}\n      <zl-field\n        name=\"{{ entry[0] }}\"\n        label=\"{{ entry[1].text_key | t }}\"\n        type=\"{{ entry[1].type }}\"\n        value=\"{{ entry[1].value }}\"\n        {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n        {% if entry[1].required %}required{% endif %}\n        {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n      >\n        {% if field_help != \"\" %}\n          <span slot=\"help\">{{ field_help }}</span>\n        {% endif %}\n      </zl-field>\n    {% endfor %}\n\n    {% if fields.email and fields.password and step.name == 'identifier' %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ 'action.forgot_password' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for entry in actions %}\n      {% if entry[1].primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for entry in actions %}\n      {% unless entry[1].primary or entry[0] == 'passkey' or entry[0] == 'register' or entry[0] == 'sign_in' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% if actions.passkey %}\n      <zl-button\n        hierarchy=\"secondary\"\n        size=\"medium\"\n        block\n        action=\"passkey\"\n        label=\"{{ actions.passkey.text_key | t }}\"\n      ></zl-button>\n    {% endif %}\n\n\n    {% if actions.register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if actions.sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
+var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      <p slot=\"header\" class=\"zl-card-subtitle\">{{ step.texts.description_key | t: identity.display_name }}</p>\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for entry in fields %}\n      {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}\n      {% assign field_help = entry[1].text_key | fieldHelp %}\n      {% assign field_err = entry[0] | fieldError: errors %}\n      {% assign autocomplete_val = '' %}\n      {% if entry[0] == 'email' %}\n        {% assign autocomplete_val = 'email' %}\n      {% elsif entry[1].type == 'password' and step.name contains 'register' %}\n        {% assign autocomplete_val = 'new-password' %}\n      {% elsif entry[1].type == 'password' %}\n        {% assign autocomplete_val = 'current-password' %}\n      {% endif %}\n      <zl-field\n        name=\"{{ entry[0] }}\"\n        data-testid=\"zitadel-field-{{ entry[0] }}\"\n        label=\"{{ entry[1].text_key | t }}\"\n        type=\"{{ entry[1].type }}\"\n        value=\"{{ entry[1].value }}\"\n        {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n        {% if entry[1].required %}required{% endif %}\n        {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n      >\n        {% if field_help != \"\" %}\n          <span slot=\"help\">{{ field_help }}</span>\n        {% endif %}\n      </zl-field>\n    {% endfor %}\n\n    {% if fields.email and fields.password and step.name == 'identifier' %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ 'action.forgot_password' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for entry in actions %}\n      {% if entry[1].primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ entry[0] }}\"\n          data-testid=\"zitadel-action-{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for entry in actions %}\n      {% unless entry[1].primary or entry[0] == 'passkey' or entry[0] == 'register' or entry[0] == 'sign_in' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ entry[0] }}\"\n          data-testid=\"zitadel-action-{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% if actions.passkey %}\n      <zl-button\n        hierarchy=\"secondary\"\n        size=\"medium\"\n        block\n        action=\"passkey\"\n        data-testid=\"zitadel-action-passkey\"\n        label=\"{{ actions.passkey.text_key | t }}\"\n      ></zl-button>\n    {% endif %}\n\n\n    {% if actions.register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if actions.sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -10898,6 +10994,7 @@ const COMMON_ATTRS = [
 	"style",
 	"name",
 	"for",
+	"data-testid",
 	"data-theme",
 	"hidden"
 ];
@@ -11405,6 +11502,31 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			if (field.value !== next) field.value = next;
 		}
 	}
+	captureValuesFromFields() {
+		const root = this.shadowRoot;
+		if (!root) return this.formValues;
+		const fields = root.querySelectorAll("zl-field");
+		if (fields.length === 0) return this.formValues;
+		const next = { ...this.formValues };
+		let changed = false;
+		for (const field of fields) {
+			const name = field.getAttribute("name");
+			const value = this.currentFieldValue(field);
+			if (!name || value === void 0) continue;
+			if (field.value !== value) field.value = value;
+			if (next[name] !== value) {
+				next[name] = value;
+				changed = true;
+			}
+		}
+		if (changed) this.formValues = next;
+		return next;
+	}
+	currentFieldValue(field) {
+		const native = field.shadowRoot?.querySelector("input");
+		if (native && native.value !== field.value) return native.value;
+		return typeof field.value === "string" ? field.value : void 0;
+	}
 	handleAtomInput = (event) => {
 		if (!event.detail) return;
 		const { name, value } = event.detail;
@@ -11413,11 +11535,23 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			...this.formValues,
 			[name]: value
 		};
+		this.syncFieldElementValue(name, value);
 		emit(this, "zitadel-flow-input", {
 			name,
 			value
 		});
 	};
+	syncFieldElementValue(name, value) {
+		const root = this.shadowRoot;
+		if (!root) return;
+		const fields = root.querySelectorAll("zl-field");
+		for (const field of fields) {
+			if (field.getAttribute("name") !== name) continue;
+			if (field.value !== value) field.value = value;
+			const native = field.shadowRoot?.querySelector("input");
+			if (native && native.value !== value) native.value = value;
+		}
+	}
 	handleAtomSubmit = (event) => {
 		if (this.loading) return;
 		this.submit(event.detail?.action ?? null);
@@ -11495,10 +11629,11 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 		const { id, session_token } = this.response;
 		this.loading = true;
 		try {
+			const formValues = this.captureValuesFromFields();
 			const stepFieldKeys = Object.keys(this.response.step.fields ?? {});
 			const fields = {};
 			for (const key of stepFieldKeys) {
-				const value = this.formValues[key];
+				const value = formValues[key];
 				if (value !== void 0) fields[key] = value;
 			}
 			const body = {