@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-questionnaire.mjs

@@ -0,0 +1,1012 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, forwardRef, inject, input, model, output, signal } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const questionnaireClass = "flex w-full min-w-0 flex-col gap-4 mx-auto max-w-md mt-auto";
+const questionnaireProgressClass = "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums";
+const questionnaireItemClass = "flex min-w-0 flex-col gap-4 border-0 p-0 outline-none data-active:animate-in data-active:fade-in-0 data-active:slide-in-from-bottom-2 data-active:duration-300 motion-reduce:animate-none";
+const questionnaireTitleClass = "cn-font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4 group-data-[size=sm]/card:text-sm";
+const questionnaireDescriptionClass = "text-sm text-pretty text-muted-foreground";
+const questionnaireChoicesClass = "group/questionnaire-choices grid min-w-0 gap-2";
+const questionnaireChoiceClass = "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
+const questionnaireChoiceInputClass = "absolute inset-0 z-10 size-full cursor-pointer opacity-0";
+const questionnaireChoiceIndicatorClass = "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary";
+const questionnaireChoiceIndicatorDotClass = "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block";
+const questionnaireChoiceLabelClass = "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug";
+const questionnaireChoiceShortcutClass = "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex";
+const questionnaireInputWrapperClass = "group/questionnaire-input relative w-full min-w-0";
+const questionnaireInputClass = "h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground";
+const questionnaireErrorClass = "mt-2 text-sm text-destructive";
+const questionnaireActionsClass = "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8";
+const UI_QUESTIONNAIRE_GENERATED = [];
+let uid = 0;
+var UiQuestionnaire = class UiQuestionnaire {
+	items = contentChildren(forwardRef(() => UiQuestionnaireItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	current = model(0, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	shortcuts = input(true, {
+		...ngDevMode ? { debugName: "shortcuts" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	submitted = output();
+	total = computed(() => this.items().length, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	isFirst = computed(() => this.current() <= 0, ...ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []);
+	isLast = computed(() => this.current() >= this.total() - 1, ...ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(questionnaireClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	activeItem = computed(() => this.items()[this.current()], ...ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []);
+	previous() {
+		if (this.current() > 0) this.current.update((c) => c - 1);
+	}
+	next() {
+		const item = this.activeItem();
+		if (!item || !item.validate()) return;
+		if (!this.isLast()) this.current.update((c) => c + 1);
+	}
+	skip() {
+		if (!this.isLast()) this.current.update((c) => c + 1);
+	}
+	submit() {
+		const items = this.items();
+		for (let i = 0; i < items.length; i++) if (!items[i].validate()) {
+			this.current.set(i);
+			return;
+		}
+		const result = {};
+		for (const it of items) result[it.name() || it.id] = it.multiple() ? it.values() : it.values()[0] ?? it.text();
+		this.submitted.emit(result);
+	}
+	el = inject(ElementRef).nativeElement;
+	onKey(e) {
+		const t = e.target;
+		if (this.shortcuts() && !e.ctrlKey && !e.metaKey && !e.altKey && /^[a-z0-9]$/i.test(e.key) && !(t instanceof HTMLInputElement && t.type === "text") && t.tagName !== "TEXTAREA") {
+			const choice = this.el.querySelector(`[data-slot=questionnaire-item]:not([hidden]) [data-shortcut="${e.key.toUpperCase()}"] input`);
+			if (choice) {
+				e.preventDefault();
+				choice.click();
+				return;
+			}
+		}
+		if (e.key !== "Enter" || e.isComposing) return;
+		if (t.tagName === "BUTTON" || t.tagName === "TEXTAREA") return;
+		e.preventDefault();
+		if (e.ctrlKey || e.metaKey) this.submit();
+		else if (this.isLast()) this.submit();
+		else this.next();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaire,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiQuestionnaire,
+		isStandalone: true,
+		selector: "form[uiQuestionnaire], ui-questionnaire",
+		inputs: {
+			current: {
+				classPropertyName: "current",
+				publicName: "current",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shortcuts: {
+				classPropertyName: "shortcuts",
+				publicName: "shortcuts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			current: "currentChange",
+			submitted: "submitted"
+		},
+		host: {
+			attributes: {
+				"novalidate": "",
+				"data-slot": "questionnaire"
+			},
+			listeners: {
+				"keydown": "onKey($event)",
+				"submit": "$event.preventDefault(); submit()"
+			},
+			properties: {
+				"attr.data-current": "current()",
+				"attr.data-total": "total()",
+				"attr.data-first": "isFirst()",
+				"attr.data-last": "isLast()",
+				"attr.data-shortcuts": "shortcuts()",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiQuestionnaireItem),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiQuestionnaire"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaire,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "form[uiQuestionnaire], ui-questionnaire",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiQuestionnaire",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				novalidate: "",
+				"data-slot": "questionnaire",
+				"[attr.data-current]": "current()",
+				"[attr.data-total]": "total()",
+				"[attr.data-first]": "isFirst()",
+				"[attr.data-last]": "isLast()",
+				"[attr.data-shortcuts]": "shortcuts()",
+				"[attr.class]": "classes()",
+				"(keydown)": "onKey($event)",
+				"(submit)": "$event.preventDefault(); submit()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiQuestionnaireItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		current: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "current",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["currentChange"]
+		}],
+		shortcuts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortcuts",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		submitted: [{
+			type: i0.Output,
+			args: ["submitted"]
+		}]
+	}
+});
+var UiQuestionnaireProgress = class UiQuestionnaireProgress {
+	root = inject(UiQuestionnaire);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireProgressClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireProgress,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireProgress,
+		isStandalone: true,
+		selector: "div[uiQuestionnaireProgress], ui-questionnaire-progress",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "progressbar",
+				"aria-valuemin": "1",
+				"data-slot": "questionnaire-progress"
+			},
+			properties: {
+				"attr.aria-valuemax": "root.total()",
+				"attr.aria-valuenow": "root.current() + 1",
+				"attr.aria-valuetext": "\"Question \" + (root.current() + 1) + \" of \" + root.total()",
+				"attr.class": "classes()",
+				"textContent": "\"Question \" + (root.current() + 1) + \" of \" + root.total()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireProgress,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "div[uiQuestionnaireProgress], ui-questionnaire-progress",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "progressbar",
+				"aria-valuemin": "1",
+				"[attr.aria-valuemax]": "root.total()",
+				"[attr.aria-valuenow]": "root.current() + 1",
+				"[attr.aria-valuetext]": "\"Question \" + (root.current() + 1) + \" of \" + root.total()",
+				"data-slot": "questionnaire-progress",
+				"[attr.class]": "classes()",
+				"[textContent]": "\"Question \" + (root.current() + 1) + \" of \" + root.total()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiQuestionnaireItem = class UiQuestionnaireItem {
+	root = inject(UiQuestionnaire);
+	id = `uiq-${++uid}`;
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	values = signal([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	errorClass = questionnaireErrorClass;
+	index = computed(() => this.root.items().indexOf(this), ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.index() === this.root.current(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	answered = computed(() => this.values().length > 0 || this.text().trim().length > 0, ...ngDevMode ? [{ debugName: "answered" }] : /* istanbul ignore next */ []);
+	status = computed(() => this.error() ? "invalid" : this.answered() ? "answered" : "pending", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(questionnaireItemClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	toggle(value) {
+		this.error.set("");
+		if (this.multiple()) this.values.update((v) => v.includes(value) ? v.filter((x) => x !== value) : [...v, value]);
+		else this.values.set([value]);
+	}
+	validate() {
+		if (this.required() && !this.answered()) {
+			this.error.set("This question is required.");
+			return false;
+		}
+		this.error.set("");
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiQuestionnaireItem,
+		isStandalone: true,
+		selector: "fieldset[uiQuestionnaireItem], ui-questionnaire-item",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "questionnaire-item" },
+			properties: {
+				"attr.data-active": "active() ? \"\" : null",
+				"attr.data-status": "status()",
+				"attr.data-required": "required()",
+				"attr.data-multiple": "multiple()",
+				"attr.hidden": "active() ? null : \"\"",
+				"attr.inert": "active() ? null : \"\"",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiQuestionnaireItem"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<ng-content />
+    @if (error()) {
+      <p data-slot="questionnaire-error" role="alert" [class]="errorClass">{{ error() }}</p>
+    }`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "fieldset[uiQuestionnaireItem], ui-questionnaire-item",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiQuestionnaireItem",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "questionnaire-item",
+				"[attr.data-active]": "active() ? \"\" : null",
+				"[attr.data-status]": "status()",
+				"[attr.data-required]": "required()",
+				"[attr.data-multiple]": "multiple()",
+				"[attr.hidden]": "active() ? null : \"\"",
+				"[attr.inert]": "active() ? null : \"\"",
+				"[attr.class]": "classes()"
+			},
+			template: `<ng-content />
+    @if (error()) {
+      <p data-slot="questionnaire-error" role="alert" [class]="errorClass">{{ error() }}</p>
+    }`
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiQuestionnaireTitle = class UiQuestionnaireTitle {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireTitleClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireTitle,
+		isStandalone: true,
+		selector: "legend[uiQuestionnaireTitle], ui-questionnaire-title",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "questionnaire-title" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "legend[uiQuestionnaireTitle], ui-questionnaire-title",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "questionnaire-title",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiQuestionnaireDescription = class UiQuestionnaireDescription {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireDescriptionClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireDescription,
+		isStandalone: true,
+		selector: "p[uiQuestionnaireDescription], ui-questionnaire-description",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "questionnaire-description" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "p[uiQuestionnaireDescription], ui-questionnaire-description",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "questionnaire-description",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiQuestionnaireChoices = class UiQuestionnaireChoices {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireChoicesClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireChoices,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireChoices,
+		isStandalone: true,
+		selector: "div[uiQuestionnaireChoices], ui-questionnaire-choices",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "questionnaire-choices" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireChoices,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "div[uiQuestionnaireChoices], ui-questionnaire-choices",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "questionnaire-choices",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiQuestionnaireChoice = class UiQuestionnaireChoice {
+	item = inject(UiQuestionnaireItem);
+	root = inject(UiQuestionnaire);
+	el = inject(ElementRef).nativeElement;
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	shortcut = input("", ...ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	checked = computed(() => this.item.values().includes(this.value()), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	shortcutKey = computed(() => {
+		if (this.shortcut()) return this.shortcut().toUpperCase();
+		const siblings = Array.from(this.el.parentElement?.querySelectorAll("[data-slot=questionnaire-choice]") ?? []);
+		return String(siblings.indexOf(this.el) + 1);
+	}, ...ngDevMode ? [{ debugName: "shortcutKey" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(questionnaireChoiceClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	inputClass = questionnaireChoiceInputClass;
+	indicatorClass = questionnaireChoiceIndicatorClass;
+	dotClass = questionnaireChoiceIndicatorDotClass;
+	labelClass = questionnaireChoiceLabelClass;
+	shortcutClass = cn(questionnaireChoiceShortcutClass, "sm:inline-flex");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireChoice,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiQuestionnaireChoice,
+		isStandalone: true,
+		selector: "label[uiQuestionnaireChoice], ui-questionnaire-choice",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			shortcut: {
+				classPropertyName: "shortcut",
+				publicName: "shortcut",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "questionnaire-choice" },
+			properties: {
+				"attr.data-shortcut": "shortcutKey()",
+				"attr.data-type": "item.multiple() ? \"checkbox\" : \"radio\"",
+				"attr.data-checked": "checked() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <input
+      [class]="inputClass"
+      data-slot="questionnaire-choice-input"
+      [type]="item.multiple() ? 'checkbox' : 'radio'"
+      [name]="item.name() || item.id"
+      [value]="value()"
+      [checked]="checked()"
+      (change)="item.toggle(value())"
+    />
+    <span [class]="indicatorClass" data-slot="questionnaire-choice-indicator" aria-hidden="true">
+      @if (item.multiple()) {
+        @if (checked()) {
+          <svg uiIcon="check" class="size-3" strokeWidth="3"></svg>
+        }
+      } @else {
+        <span [class]="dotClass"></span>
+      }
+    </span>
+    <span [class]="labelClass" data-slot="questionnaire-choice-label"><ng-content /></span>
+    @if (root.shortcuts()) {
+      <kbd [class]="shortcutClass" data-slot="questionnaire-choice-shortcut" aria-hidden="true">{{ shortcutKey() }}</kbd>
+    }
+  `,
+		isInline: true,
+		styles: [":host:has(input:checked) [data-slot=questionnaire-choice-indicator]{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireChoice,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "label[uiQuestionnaireChoice], ui-questionnaire-choice",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "questionnaire-choice",
+				"[attr.data-shortcut]": "shortcutKey()",
+				"[attr.data-type]": "item.multiple() ? \"checkbox\" : \"radio\"",
+				"[attr.data-checked]": "checked() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <input
+      [class]="inputClass"
+      data-slot="questionnaire-choice-input"
+      [type]="item.multiple() ? 'checkbox' : 'radio'"
+      [name]="item.name() || item.id"
+      [value]="value()"
+      [checked]="checked()"
+      (change)="item.toggle(value())"
+    />
+    <span [class]="indicatorClass" data-slot="questionnaire-choice-indicator" aria-hidden="true">
+      @if (item.multiple()) {
+        @if (checked()) {
+          <svg uiIcon="check" class="size-3" strokeWidth="3"></svg>
+        }
+      } @else {
+        <span [class]="dotClass"></span>
+      }
+    </span>
+    <span [class]="labelClass" data-slot="questionnaire-choice-label"><ng-content /></span>
+    @if (root.shortcuts()) {
+      <kbd [class]="shortcutClass" data-slot="questionnaire-choice-shortcut" aria-hidden="true">{{ shortcutKey() }}</kbd>
+    }
+  `,
+			styles: [":host:has(input:checked) [data-slot=questionnaire-choice-indicator]{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		shortcut: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortcut",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiQuestionnaireInput = class UiQuestionnaireInput {
+	item = inject(UiQuestionnaireItem);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireInputWrapperClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	inputClass = questionnaireInputClass;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireInput,
+		isStandalone: true,
+		selector: "div[uiQuestionnaireInput], ui-questionnaire-input",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "questionnaire-input-wrapper" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<input
+    data-slot="questionnaire-input"
+    type="text"
+    [class]="inputClass"
+    [placeholder]="placeholder()"
+    [value]="item.text()"
+    [attr.aria-invalid]="item.error() ? 'true' : null"
+    (input)="item.text.set($any($event.target).value)"
+  />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireInput,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiQuestionnaireInput], ui-questionnaire-input",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "questionnaire-input-wrapper",
+				"[attr.class]": "classes()"
+			},
+			template: `<input
+    data-slot="questionnaire-input"
+    type="text"
+    [class]="inputClass"
+    [placeholder]="placeholder()"
+    [value]="item.text()"
+    [attr.aria-invalid]="item.error() ? 'true' : null"
+    (input)="item.text.set($any($event.target).value)"
+  />`
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiQuestionnaireActions = class UiQuestionnaireActions {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(questionnaireActionsClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiQuestionnaireActions,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiQuestionnaireActions,
+		isStandalone: true,
+		selector: "div[uiQuestionnaireActions], ui-questionnaire-actions",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "questionnaire-actions" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiQuestionnaireActions,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "div[uiQuestionnaireActions], ui-questionnaire-actions",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "questionnaire-actions",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_QUESTIONNAIRE = [
+	UiQuestionnaire,
+	UiQuestionnaireProgress,
+	UiQuestionnaireItem,
+	UiQuestionnaireTitle,
+	UiQuestionnaireDescription,
+	UiQuestionnaireChoices,
+	UiQuestionnaireChoice,
+	UiQuestionnaireInput,
+	UiQuestionnaireActions
+];
+export { UI_QUESTIONNAIRE, UI_QUESTIONNAIRE_GENERATED, UiQuestionnaire, UiQuestionnaireActions, UiQuestionnaireChoice, UiQuestionnaireChoices, UiQuestionnaireDescription, UiQuestionnaireInput, UiQuestionnaireItem, UiQuestionnaireProgress, UiQuestionnaireTitle, questionnaireActionsClass, questionnaireChoiceClass, questionnaireChoiceIndicatorClass, questionnaireChoiceIndicatorDotClass, questionnaireChoiceInputClass, questionnaireChoiceLabelClass, questionnaireChoiceShortcutClass, questionnaireChoicesClass, questionnaireClass, questionnaireDescriptionClass, questionnaireErrorClass, questionnaireInputClass, questionnaireInputWrapperClass, questionnaireItemClass, questionnaireProgressClass, questionnaireTitleClass };
+
+//# sourceMappingURL=loomui-ng-ui-questionnaire.mjs.map