@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-questionnaire.mjs

@@ -0,0 +1,1005 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, afterRenderEffect, booleanAttribute, computed, contentChild, effect, inject, input, isDevMode, linkedSignal, model, output, signal } from "@angular/core";
+import { _IdGenerator } from "@angular/cdk/a11y";
+var RaqmQuestionnaireComponent = class RaqmQuestionnaireComponent {
+	host = inject(ElementRef);
+	changeDetector = inject(ChangeDetectorRef);
+	pendingFocus = signal(null, ...ngDevMode ? [{ debugName: "pendingFocus" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			const target = this.pendingFocus();
+			if (!target) return;
+			this.host.nativeElement.querySelector(target === "invalid" ? ".raqm-questionnaire-item:not([hidden]) input:not(:disabled)" : ".raqm-questionnaire-item:not([hidden])")?.focus();
+			this.pendingFocus.set(null);
+		});
+		effect(() => {
+			if (isDevMode() && !this.composed() && this.current() && !this.progressLabel()) console.error("[raqm-questionnaire] The progressbar has no accessible name. Provide `progressLabel`.");
+		});
+	}
+	id = inject(_IdGenerator).getId("raqm-questionnaire-");
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	submitted = output();
+	answers = model({}, ...ngDevMode ? [{ debugName: "answers" }] : /* istanbul ignore next */ []);
+	currentItem = model(void 0, ...ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []);
+	shortcuts = input("none", ...ngDevMode ? [{ debugName: "shortcuts" }] : /* istanbul ignore next */ []);
+	composed = input(false, {
+		...ngDevMode ? { debugName: "composed" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	labels = input.required(...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	requiredMessage = input(void 0, ...ngDevMode ? [{ debugName: "requiredMessage" }] : /* istanbul ignore next */ []);
+	progressLabel = input(void 0, ...ngDevMode ? [{ debugName: "progressLabel" }] : /* istanbul ignore next */ []);
+	index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	freeformValues = linkedSignal(() => {
+		const values = {};
+		for (const item of this.items()) {
+			if (!item.input) continue;
+			const choices = new Set(item.choices.map((choice) => choice.value));
+			values[item.name] = this.answers()[item.name]?.find((answer) => !choices.has(answer)) ?? "";
+		}
+		return values;
+	}, ...ngDevMode ? [{ debugName: "freeformValues" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	invalid = signal(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => this.items().filter((item) => item.visible?.(this.answers()) !== false), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	current = computed(() => this.visibleItems().find((item) => item.name === this.currentItem()) ?? this.visibleItems()[this.index()] ?? this.visibleItems()[0], ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	position = computed(() => Math.max(0, this.visibleItems().indexOf(this.current())), ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	descriptionId(name) {
+		return `${this.id}-${this.items().findIndex((item) => item.name === name)}-description`;
+	}
+	errorId(name) {
+		return `${this.id}-${this.items().findIndex((item) => item.name === name)}-error`;
+	}
+	describedBy(name, hasDescription, hasError = false) {
+		const ids = [hasDescription ? this.descriptionId(name) : "", hasError ? this.errorId(name) : ""].filter(Boolean);
+		return ids.length ? ids.join(" ") : null;
+	}
+	selected(value) {
+		return this.answers()[this.current().name]?.includes(value) ?? false;
+	}
+	shortcut(index) {
+		return this.shortcuts() === "letters" ? String.fromCharCode(65 + index) : String(index + 1);
+	}
+	onKey(event) {
+		if (!this.current()) return;
+		if (this.shortcuts() === "none" || event.altKey || event.ctrlKey || event.metaKey || event.isComposing) return;
+		const target = event.target;
+		if (target.isContentEditable || target instanceof HTMLInputElement && target.type === "text") return;
+		const index = this.current().choices.findIndex((_, i) => this.shortcut(i).toLowerCase() === event.key.toLowerCase());
+		if (index < 0) return;
+		event.preventDefault();
+		const choice = this.current().choices[index];
+		this.choose(choice.value, this.current().multiple ? !this.selected(choice.value) : true);
+		this.host.nativeElement.querySelectorAll(".raqm-questionnaire-item:not([hidden]) .raqm-questionnaire-choices input[type=radio], .raqm-questionnaire-item:not([hidden]) .raqm-questionnaire-choices input[type=checkbox]")[index]?.focus();
+	}
+	choose(value, checked) {
+		const item = this.current();
+		const current = this.answers()[item.name] ?? [];
+		const next = item.multiple ? checked ? [...current, value] : current.filter((v) => v !== value) : [value];
+		this.answers.update((a) => ({
+			...a,
+			[item.name]: next
+		}));
+		if (!item.multiple) this.freeformValues.update((values) => ({
+			...values,
+			[item.name]: ""
+		}));
+		this.error.set("");
+		this.invalid.set(false);
+	}
+	freeform(value) {
+		const item = this.current();
+		const previous = this.freeformValues()[item.name];
+		this.freeformValues.update((values) => ({
+			...values,
+			[item.name]: value
+		}));
+		this.answers.update((answers) => {
+			const choices = item.multiple ? (answers[item.name] ?? []).filter((answer) => answer !== previous) : [];
+			return {
+				...answers,
+				[item.name]: value.trim() ? [...choices, value] : choices
+			};
+		});
+		this.error.set("");
+		this.invalid.set(false);
+	}
+	previous() {
+		if (!this.visibleItems().length) return;
+		const index = Math.max(0, this.position() - 1);
+		this.index.set(index);
+		this.currentItem.set(this.visibleItems()[index]?.name);
+		this.error.set("");
+		this.invalid.set(false);
+		this.focusCurrent();
+	}
+	focusCurrent(validation = false) {
+		this.changeDetector.detectChanges();
+		if (!validation) this.host.nativeElement.querySelector(".raqm-questionnaire-item:not([hidden])")?.focus();
+		this.pendingFocus.set(validation ? "invalid" : "item");
+	}
+	next(skip = false) {
+		const item = this.current();
+		if (!item) return;
+		const answer = this.answers()[item.name] ?? [];
+		const required = !!item.required && !answer.length;
+		let message;
+		if (!skip || item.required) {
+			if (required) {
+				message = this.requiredMessage();
+				if (!message && isDevMode()) console.error("[raqm-questionnaire] The required item has no error message. Provide `requiredMessage`.");
+			} else message = item.validate?.(answer, this.answers());
+		}
+		if (required || message) {
+			this.error.set(message ?? "");
+			this.invalid.set(true);
+			this.focusCurrent(true);
+			return;
+		}
+		const remaining = this.visibleItems().slice(this.position() + 1).map((entry) => entry.name);
+		if (skip && !item.required) {
+			this.answers.update((a) => ({
+				...a,
+				[item.name]: []
+			}));
+			this.freeformValues.update((values) => ({
+				...values,
+				[item.name]: ""
+			}));
+		}
+		const visible = this.visibleItems();
+		const nextName = remaining.find((name) => visible.some((entry) => entry.name === name));
+		const index = nextName ? visible.findIndex((entry) => entry.name === nextName) : -1;
+		if (index < 0) this.submitted.emit(this.answers());
+		else {
+			this.index.set(index);
+			this.currentItem.set(this.visibleItems()[index]?.name);
+			this.focusCurrent();
+		}
+		this.error.set("");
+		this.invalid.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireComponent,
+		isStandalone: true,
+		selector: "raqm-questionnaire",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			answers: {
+				classPropertyName: "answers",
+				publicName: "answers",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			currentItem: {
+				classPropertyName: "currentItem",
+				publicName: "currentItem",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shortcuts: {
+				classPropertyName: "shortcuts",
+				publicName: "shortcuts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			composed: {
+				classPropertyName: "composed",
+				publicName: "composed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			requiredMessage: {
+				classPropertyName: "requiredMessage",
+				publicName: "requiredMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			progressLabel: {
+				classPropertyName: "progressLabel",
+				publicName: "progressLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			submitted: "submitted",
+			answers: "answersChange",
+			currentItem: "currentItemChange"
+		},
+		host: { classAttribute: "raqm-questionnaire" },
+		ngImport: i0,
+		template: "@if (composed()) {\r\n  <ng-content />\r\n} @else if (current(); as item) {\r\n  <p\r\n    class=\"raqm-questionnaire-progress\"\r\n    role=\"progressbar\"\r\n    [attr.aria-label]=\"progressLabel()\"\r\n    aria-valuemin=\"0\"\r\n    [attr.aria-valuemax]=\"visibleItems().length || null\"\r\n    [attr.aria-valuenow]=\"visibleItems().length ? position() + 1 : 0\"\r\n  >\r\n    {{ visibleItems().length ? position() + 1 : 0 }} / {{ visibleItems().length }}\r\n  </p>\r\n  <fieldset\r\n    class=\"raqm-questionnaire-item\"\r\n    tabindex=\"-1\"\r\n    [attr.aria-describedby]=\"describedBy(item.name, !!item.description, !!error())\"\r\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n    (keydown)=\"onKey($event)\"\r\n  >\r\n    <legend>{{ item.title }}</legend>\r\n    @if (item.description) {\r\n      <p [id]=\"descriptionId(item.name)\">{{ item.description }}</p>\r\n    }\r\n    <div class=\"raqm-questionnaire-choices\">\r\n      @for (choice of item.choices; track choice.value; let index = $index) {\r\n        <label\r\n          ><input\r\n            [type]=\"item.multiple ? 'checkbox' : 'radio'\"\r\n            [name]=\"item.name\"\r\n            [checked]=\"selected(choice.value)\"\r\n            [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n            (change)=\"choose(choice.value, $any($event.target).checked)\"\r\n          /><span\r\n            >{{ choice.label }}\r\n            @if (choice.description) {\r\n              <small>{{ choice.description }}</small>\r\n            }\r\n          </span>\r\n          @if (shortcuts() !== 'none') {\r\n            <kbd aria-hidden=\"true\">{{ shortcut(index) }}</kbd>\r\n          }\r\n        </label>\r\n      }\r\n      @if (item.input; as field) {\r\n        <input\r\n          type=\"text\"\r\n          [attr.aria-label]=\"field.label\"\r\n          [placeholder]=\"field.placeholder ?? ''\"\r\n          [value]=\"freeformValues()[item.name] ?? ''\"\r\n          [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n          (input)=\"freeform($any($event.target).value)\"\r\n        />\r\n      }\r\n    </div>\r\n    @if (error()) {\r\n      <p [id]=\"errorId(item.name)\" role=\"alert\">{{ error() }}</p>\r\n    }\r\n  </fieldset>\r\n  <div class=\"raqm-questionnaire-actions\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"raqm-questionnaire-actions__previous\"\r\n      (click)=\"previous()\"\r\n      [disabled]=\"position() === 0\"\r\n    >\r\n      {{ labels().previous }}\r\n    </button>\r\n    @if (!item.required && position() < visibleItems().length - 1) {\r\n      <button type=\"button\" (click)=\"next(true)\">{{ labels().skip }}</button>\r\n    }\r\n    <button type=\"button\" (click)=\"next()\">\r\n      {{ position() === visibleItems().length - 1 ? labels().submit : labels().next }}\r\n    </button>\r\n  </div>\r\n}\r\n",
+		styles: [":host{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);min-inline-size:0;inline-size:100%}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-questionnaire",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "raqm-questionnaire" },
+			template: "@if (composed()) {\r\n  <ng-content />\r\n} @else if (current(); as item) {\r\n  <p\r\n    class=\"raqm-questionnaire-progress\"\r\n    role=\"progressbar\"\r\n    [attr.aria-label]=\"progressLabel()\"\r\n    aria-valuemin=\"0\"\r\n    [attr.aria-valuemax]=\"visibleItems().length || null\"\r\n    [attr.aria-valuenow]=\"visibleItems().length ? position() + 1 : 0\"\r\n  >\r\n    {{ visibleItems().length ? position() + 1 : 0 }} / {{ visibleItems().length }}\r\n  </p>\r\n  <fieldset\r\n    class=\"raqm-questionnaire-item\"\r\n    tabindex=\"-1\"\r\n    [attr.aria-describedby]=\"describedBy(item.name, !!item.description, !!error())\"\r\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n    (keydown)=\"onKey($event)\"\r\n  >\r\n    <legend>{{ item.title }}</legend>\r\n    @if (item.description) {\r\n      <p [id]=\"descriptionId(item.name)\">{{ item.description }}</p>\r\n    }\r\n    <div class=\"raqm-questionnaire-choices\">\r\n      @for (choice of item.choices; track choice.value; let index = $index) {\r\n        <label\r\n          ><input\r\n            [type]=\"item.multiple ? 'checkbox' : 'radio'\"\r\n            [name]=\"item.name\"\r\n            [checked]=\"selected(choice.value)\"\r\n            [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n            (change)=\"choose(choice.value, $any($event.target).checked)\"\r\n          /><span\r\n            >{{ choice.label }}\r\n            @if (choice.description) {\r\n              <small>{{ choice.description }}</small>\r\n            }\r\n          </span>\r\n          @if (shortcuts() !== 'none') {\r\n            <kbd aria-hidden=\"true\">{{ shortcut(index) }}</kbd>\r\n          }\r\n        </label>\r\n      }\r\n      @if (item.input; as field) {\r\n        <input\r\n          type=\"text\"\r\n          [attr.aria-label]=\"field.label\"\r\n          [placeholder]=\"field.placeholder ?? ''\"\r\n          [value]=\"freeformValues()[item.name] ?? ''\"\r\n          [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n          (input)=\"freeform($any($event.target).value)\"\r\n        />\r\n      }\r\n    </div>\r\n    @if (error()) {\r\n      <p [id]=\"errorId(item.name)\" role=\"alert\">{{ error() }}</p>\r\n    }\r\n  </fieldset>\r\n  <div class=\"raqm-questionnaire-actions\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"raqm-questionnaire-actions__previous\"\r\n      (click)=\"previous()\"\r\n      [disabled]=\"position() === 0\"\r\n    >\r\n      {{ labels().previous }}\r\n    </button>\r\n    @if (!item.required && position() < visibleItems().length - 1) {\r\n      <button type=\"button\" (click)=\"next(true)\">{{ labels().skip }}</button>\r\n    }\r\n    <button type=\"button\" (click)=\"next()\">\r\n      {{ position() === visibleItems().length - 1 ? labels().submit : labels().next }}\r\n    </button>\r\n  </div>\r\n}\r\n",
+			styles: [":host{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);min-inline-size:0;inline-size:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		submitted: [{
+			type: i0.Output,
+			args: ["submitted"]
+		}],
+		answers: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "answers",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["answersChange"]
+		}],
+		currentItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currentItem",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["currentItemChange"]
+		}],
+		shortcuts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortcuts",
+				required: false
+			}]
+		}],
+		composed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composed",
+				required: false
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: true
+			}]
+		}],
+		requiredMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredMessage",
+				required: false
+			}]
+		}],
+		progressLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmQuestionnaireProgressComponent = class RaqmQuestionnaireProgressComponent {
+	root = inject(RaqmQuestionnaireComponent);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireProgressComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireProgressComponent,
+		isStandalone: true,
+		selector: "raqm-questionnaire-progress",
+		host: {
+			attributes: {
+				"role": "progressbar",
+				"aria-valuemin": "0"
+			},
+			properties: {
+				"attr.aria-valuemax": "root.visibleItems().length || null",
+				"attr.aria-valuenow": "root.visibleItems().length ? root.position() + 1 : 0"
+			},
+			classAttribute: "raqm-questionnaire-progress"
+		},
+		ngImport: i0,
+		template: "{{ root.visibleItems().length ? root.position() + 1 : 0 }} / {{ root.visibleItems().length }}",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireProgressComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-questionnaire-progress",
+			template: "{{ root.visibleItems().length ? root.position() + 1 : 0 }} / {{ root.visibleItems().length }}",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-questionnaire-progress",
+				role: "progressbar",
+				"aria-valuemin": "0",
+				"[attr.aria-valuemax]": "root.visibleItems().length || null",
+				"[attr.aria-valuenow]": "root.visibleItems().length ? root.position() + 1 : 0"
+			}
+		}]
+	}]
+});
+var RaqmQuestionnaireItemDirective = class RaqmQuestionnaireItemDirective {
+	root = inject(RaqmQuestionnaireComponent);
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	active = computed(() => this.root.current()?.name === this.name(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	description = contentChild(RaqmQuestionnaireDescriptionDirective, {
+		...ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	errorPart = contentChild(RaqmQuestionnaireErrorComponent, ...ngDevMode ? [{ debugName: "errorPart" }] : /* istanbul ignore next */ []);
+	errorMessage = computed(() => this.root.error() || this.errorPart()?.message(), ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	onKey(event) {
+		if (this.active()) this.root.onKey(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireItemDirective,
+		isStandalone: true,
+		selector: "fieldset[raqm-questionnaire-item]",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: { "keydown": "onKey($event)" },
+			properties: {
+				"hidden": "!active()",
+				"attr.inert": "active() ? null : \"\"",
+				"attr.aria-invalid": "active() && (invalid() || root.invalid()) ? \"true\" : null",
+				"attr.aria-describedby": "root.describedBy(name(), !!description(), active() && !!errorMessage())"
+			},
+			classAttribute: "raqm-questionnaire-item"
+		},
+		queries: [{
+			propertyName: "description",
+			first: true,
+			predicate: RaqmQuestionnaireDescriptionDirective,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "errorPart",
+			first: true,
+			predicate: RaqmQuestionnaireErrorComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "fieldset[raqm-questionnaire-item]",
+			host: {
+				class: "raqm-questionnaire-item",
+				tabindex: "-1",
+				"[hidden]": "!active()",
+				"[attr.inert]": "active() ? null : \"\"",
+				"[attr.aria-invalid]": "active() && (invalid() || root.invalid()) ? \"true\" : null",
+				"[attr.aria-describedby]": "root.describedBy(name(), !!description(), active() && !!errorMessage())",
+				"(keydown)": "onKey($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmQuestionnaireDescriptionDirective), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		errorPart: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmQuestionnaireErrorComponent), { isSignal: true }]
+		}]
+	}
+});
+var RaqmQuestionnaireTitleDirective = class RaqmQuestionnaireTitleDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-questionnaire-title]",
+		host: { classAttribute: "raqm-questionnaire-title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-questionnaire-title]",
+			host: { class: "raqm-questionnaire-title" }
+		}]
+	}]
+});
+var RaqmQuestionnaireDescriptionDirective = class RaqmQuestionnaireDescriptionDirective {
+	item = inject(RaqmQuestionnaireItemDirective);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-questionnaire-description]",
+		host: { properties: { "id": "item.root.descriptionId(item.name())" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-questionnaire-description]",
+			host: { "[id]": "item.root.descriptionId(item.name())" }
+		}]
+	}]
+});
+var RaqmQuestionnaireChoicesDirective = class RaqmQuestionnaireChoicesDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireChoicesDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireChoicesDirective,
+		isStandalone: true,
+		selector: "[raqm-questionnaire-choices]",
+		host: { classAttribute: "raqm-questionnaire-choices" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireChoicesDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-questionnaire-choices]",
+			host: { class: "raqm-questionnaire-choices" }
+		}]
+	}]
+});
+var RaqmQuestionnaireChoiceDirective = class RaqmQuestionnaireChoiceDirective {
+	item = inject(RaqmQuestionnaireItemDirective);
+	definition = computed(() => this.item.root.items().find((entry) => entry.name === this.item.name()), ...ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	onChange(event) {
+		this.item.root.choose(this.value(), event.target.checked);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireChoiceDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireChoiceDirective,
+		isStandalone: true,
+		selector: "input[raqm-questionnaire-choice]",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			listeners: { "change": "onChange($event)" },
+			properties: {
+				"attr.name": "item.name()",
+				"attr.type": "definition()?.multiple ? \"checkbox\" : \"radio\"",
+				"checked": "item.root.answers()[item.name()]?.includes(value()) ?? false",
+				"attr.aria-invalid": "item.active() && item.root.invalid() ? \"true\" : null"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireChoiceDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[raqm-questionnaire-choice]",
+			host: {
+				"[attr.name]": "item.name()",
+				"[attr.type]": "definition()?.multiple ? \"checkbox\" : \"radio\"",
+				"[checked]": "item.root.answers()[item.name()]?.includes(value()) ?? false",
+				"[attr.aria-invalid]": "item.active() && item.root.invalid() ? \"true\" : null",
+				"(change)": "onChange($event)"
+			}
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: true
+		}]
+	}] }
+});
+var RaqmQuestionnaireInputDirective = class RaqmQuestionnaireInputDirective {
+	item = inject(RaqmQuestionnaireItemDirective);
+	onInput(event) {
+		this.item.root.freeform(event.target.value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireInputDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireInputDirective,
+		isStandalone: true,
+		selector: "input[raqm-questionnaire-input]",
+		host: {
+			listeners: { "input": "onInput($event)" },
+			properties: {
+				"value": "item.root.freeformValues()[item.name()] ?? \"\"",
+				"attr.aria-invalid": "item.active() && item.root.invalid() ? \"true\" : null"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireInputDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[raqm-questionnaire-input]",
+			host: {
+				"[value]": "item.root.freeformValues()[item.name()] ?? \"\"",
+				"[attr.aria-invalid]": "item.active() && item.root.invalid() ? \"true\" : null",
+				"(input)": "onInput($event)"
+			}
+		}]
+	}]
+});
+var RaqmQuestionnaireErrorComponent = class RaqmQuestionnaireErrorComponent {
+	item = inject(RaqmQuestionnaireItemDirective);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireErrorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireErrorComponent,
+		isStandalone: true,
+		selector: "raqm-questionnaire-error",
+		inputs: { message: {
+			classPropertyName: "message",
+			publicName: "message",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "@if (item.active() && (message() || item.root.error())) { <p [id]=\"item.root.errorId(item.name())\" role=\"alert\">{{ message() || item.root.error() }}</p> }",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireErrorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-questionnaire-error",
+			template: "@if (item.active() && (message() || item.root.error())) { <p [id]=\"item.root.errorId(item.name())\" role=\"alert\">{{ message() || item.root.error() }}</p> }",
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: { message: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "message",
+			required: false
+		}]
+	}] }
+});
+var RaqmQuestionnaireActionsDirective = class RaqmQuestionnaireActionsDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireActionsDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireActionsDirective,
+		isStandalone: true,
+		selector: "[raqm-questionnaire-actions]",
+		host: { classAttribute: "raqm-questionnaire-actions" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-questionnaire-actions]",
+			host: { class: "raqm-questionnaire-actions" }
+		}]
+	}]
+});
+var RaqmQuestionnairePreviousDirective = class RaqmQuestionnairePreviousDirective {
+	root = inject(RaqmQuestionnaireComponent);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnairePreviousDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnairePreviousDirective,
+		isStandalone: true,
+		selector: "button[raqm-questionnaire-previous]",
+		host: {
+			listeners: { "click": "root.previous()" },
+			properties: { "disabled": "root.position() === 0" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnairePreviousDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-questionnaire-previous]",
+			host: {
+				"[disabled]": "root.position() === 0",
+				"(click)": "root.previous()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmQuestionnaireSkipDirective = class RaqmQuestionnaireSkipDirective {
+	root = inject(RaqmQuestionnaireComponent);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireSkipDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireSkipDirective,
+		isStandalone: true,
+		selector: "button[raqm-questionnaire-skip]",
+		host: {
+			listeners: { "click": "root.next(true)" },
+			properties: { "hidden": "root.current()?.required || root.position() === root.visibleItems().length - 1" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireSkipDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-questionnaire-skip]",
+			host: {
+				"[hidden]": "root.current()?.required || root.position() === root.visibleItems().length - 1",
+				"(click)": "root.next(true)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmQuestionnaireNextDirective = class RaqmQuestionnaireNextDirective {
+	root = inject(RaqmQuestionnaireComponent);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireNextDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireNextDirective,
+		isStandalone: true,
+		selector: "button[raqm-questionnaire-next]",
+		host: {
+			listeners: { "click": "root.next()" },
+			properties: { "hidden": "root.position() === root.visibleItems().length - 1" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireNextDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-questionnaire-next]",
+			host: {
+				"[hidden]": "root.position() === root.visibleItems().length - 1",
+				"(click)": "root.next()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmQuestionnaireSubmitDirective = class RaqmQuestionnaireSubmitDirective {
+	root = inject(RaqmQuestionnaireComponent);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmQuestionnaireSubmitDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmQuestionnaireSubmitDirective,
+		isStandalone: true,
+		selector: "button[raqm-questionnaire-submit]",
+		host: {
+			listeners: { "click": "root.next()" },
+			properties: { "hidden": "root.position() !== root.visibleItems().length - 1" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmQuestionnaireSubmitDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-questionnaire-submit]",
+			host: {
+				"[hidden]": "root.position() !== root.visibleItems().length - 1",
+				"(click)": "root.next()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+const RaqmQuestionnaire = [
+	RaqmQuestionnaireComponent,
+	RaqmQuestionnaireProgressComponent,
+	RaqmQuestionnaireItemDirective,
+	RaqmQuestionnaireTitleDirective,
+	RaqmQuestionnaireDescriptionDirective,
+	RaqmQuestionnaireChoicesDirective,
+	RaqmQuestionnaireChoiceDirective,
+	RaqmQuestionnaireInputDirective,
+	RaqmQuestionnaireErrorComponent,
+	RaqmQuestionnaireActionsDirective,
+	RaqmQuestionnairePreviousDirective,
+	RaqmQuestionnaireSkipDirective,
+	RaqmQuestionnaireNextDirective,
+	RaqmQuestionnaireSubmitDirective
+];
+export { RaqmQuestionnaire, RaqmQuestionnaireActionsDirective, RaqmQuestionnaireChoiceDirective, RaqmQuestionnaireChoicesDirective, RaqmQuestionnaireComponent, RaqmQuestionnaireDescriptionDirective, RaqmQuestionnaireErrorComponent, RaqmQuestionnaireInputDirective, RaqmQuestionnaireItemDirective, RaqmQuestionnaireNextDirective, RaqmQuestionnairePreviousDirective, RaqmQuestionnaireProgressComponent, RaqmQuestionnaireSkipDirective, RaqmQuestionnaireSubmitDirective, RaqmQuestionnaireTitleDirective };
+
+//# sourceMappingURL=raqm-ui-questionnaire.mjs.map