@memberjunction/ng-conversations 5.11.0 → 5.13.0

package/dist/lib/components/message/form-question.component.js

@@ -1,638 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-dateinputs";
-function FormQuestionComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵtext(1, "*");
-    i0.ɵɵelementEnd();
-} }
-function FormQuestionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 1);
-    i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, FormQuestionComponent_Conditional_1_Conditional_2_Template, 2, 0, "span", 18);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.question.label, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.question.required ? 2 : -1);
-} }
-function FormQuestionComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.question.helpText, " ");
-} }
-function FormQuestionComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 19);
-    i0.ɵɵlistener("input", function FormQuestionComponent_Conditional_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event.target.value)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value || "")("placeholder", ctx_r0.placeholder)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 20);
-    i0.ɵɵlistener("input", function FormQuestionComponent_Conditional_5_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event.target.value)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value || "")("placeholder", ctx_r0.placeholder)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 21);
-    i0.ɵɵlistener("input", function FormQuestionComponent_Conditional_6_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event.target.value)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value || "")("placeholder", ctx_r0.placeholder)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-numerictextbox", 22);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_7_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value)("min", ctx_r0.min || 0)("max", ctx_r0.max || 999999999)("step", ctx_r0.step || 1)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-numerictextbox", 23);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_8_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value)("min", ctx_r0.min || 0)("max", ctx_r0.max || 999999999)("step", ctx_r0.step || 0.01)("format", "c2")("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-datepicker", 24);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_9_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-datetimepicker", 24);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_10_Template_kendo_datetimepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_11_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 28);
-} if (rf & 2) {
-    const option_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa ", option_r10.icon));
-} }
-function FormQuestionComponent_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function FormQuestionComponent_Conditional_11_For_2_Template_button_click_0_listener() { const option_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onValueChange(option_r10.value)); });
-    i0.ɵɵconditionalCreate(1, FormQuestionComponent_Conditional_11_For_2_Conditional_1_Template, 1, 3, "i", 27);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r10 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("toggleable", true)("selected", ctx_r0.value === option_r10.value)("disabled", ctx_r0.disabled);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(option_r10.icon ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r10.label, " ");
-} }
-function FormQuestionComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-buttongroup", 10);
-    i0.ɵɵrepeaterCreate(1, FormQuestionComponent_Conditional_11_For_2_Template, 3, 5, "button", 25, i0.ɵɵcomponentInstance().trackByValue, true);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("selection", "single");
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.options);
-} }
-function FormQuestionComponent_Conditional_12_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 28);
-} if (rf & 2) {
-    const option_r12 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa ", option_r12.icon));
-} }
-function FormQuestionComponent_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "input", 30);
-    i0.ɵɵlistener("change", function FormQuestionComponent_Conditional_12_For_2_Template_input_change_1_listener() { const option_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onValueChange(option_r12.value)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 31);
-    i0.ɵɵconditionalCreate(3, FormQuestionComponent_Conditional_12_For_2_Conditional_3_Template, 1, 3, "i", 27);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const option_r12 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", ctx_r0.question.id)("value", option_r12.value)("checked", ctx_r0.value === option_r12.value)("disabled", ctx_r0.disabled)("id", ctx_r0.question.id + "_" + option_r12.value);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r0.question.id + "_" + option_r12.value);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(option_r12.icon ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r12.label, " ");
-} }
-function FormQuestionComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵrepeaterCreate(1, FormQuestionComponent_Conditional_12_For_2_Template, 5, 8, "div", 29, i0.ɵɵcomponentInstance().trackByValue, true);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.options);
-} }
-function FormQuestionComponent_Conditional_13_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 33);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r13 = ctx.$implicit;
-    i0.ɵɵproperty("value", option_r13.value);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r13.label, " ");
-} }
-function FormQuestionComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "select", 12)(1, "option", 32);
-    i0.ɵɵtext(2, "Select an option...");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, FormQuestionComponent_Conditional_13_For_4_Template, 2, 2, "option", 33, i0.ɵɵcomponentInstance().trackByValue, true);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("formControl", ctx_r0.control)("disabled", ctx_r0.disabled);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.options);
-} }
-function FormQuestionComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "kendo-slider", 34);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_14_Template_kendo_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 35);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("min", ctx_r0.getSliderConfig().min)("max", ctx_r0.getSliderConfig().max)("smallStep", ctx_r0.getSliderConfig().step || 1)("value", ctx_r0.value || ctx_r0.getSliderConfig().min)("disabled", ctx_r0.disabled);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", ctx_r0.value || ctx_r0.getSliderConfig().min, "", ctx_r0.getSliderConfig().suffix || "", " ");
-} }
-function FormQuestionComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "kendo-datepicker", 36);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_15_Template_kendo_datepicker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateRangeStartChange($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 37);
-    i0.ɵɵtext(3, "to");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-datepicker", 38);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_15_Template_kendo_datepicker_valueChange_4_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateRangeEndChange($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r0.value == null ? null : ctx_r0.value.start)("disabled", ctx_r0.disabled);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", ctx_r0.value == null ? null : ctx_r0.value.end)("disabled", ctx_r0.disabled);
-} }
-function FormQuestionComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-timepicker", 39);
-    i0.ɵɵlistener("valueChange", function FormQuestionComponent_Conditional_16_Template_kendo_timepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onValueChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r0.value)("disabled", ctx_r0.disabled)("format", "h:mm a");
-} }
-function FormQuestionComponent_Conditional_17_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 28);
-} if (rf & 2) {
-    const option_r18 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa ", option_r18.icon));
-} }
-function FormQuestionComponent_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "input", 41);
-    i0.ɵɵlistener("change", function FormQuestionComponent_Conditional_17_For_2_Template_input_change_1_listener() { const option_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleCheckbox(option_r18)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 42);
-    i0.ɵɵconditionalCreate(3, FormQuestionComponent_Conditional_17_For_2_Conditional_3_Template, 1, 3, "i", 27);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const option_r18 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r0.isChecked(option_r18))("disabled", ctx_r0.disabled)("id", ctx_r0.question.id + "_" + option_r18.value);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r0.question.id + "_" + option_r18.value);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(option_r18.icon ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r18.label, " ");
-} }
-function FormQuestionComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵrepeaterCreate(1, FormQuestionComponent_Conditional_17_For_2_Template, 5, 6, "div", 40, i0.ɵɵcomponentInstance().trackByValue, true);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.options);
-} }
-function FormQuestionComponent_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1, "This field is required");
-    i0.ɵɵelementEnd();
-} }
-function FormQuestionComponent_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1, "Please enter a valid email address");
-    i0.ɵɵelementEnd();
-} }
-function FormQuestionComponent_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Value must be at least ", ctx_r0.min);
-} }
-function FormQuestionComponent_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Value must be at most ", ctx_r0.max);
-} }
-function FormQuestionComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵconditionalCreate(1, FormQuestionComponent_Conditional_18_Conditional_1_Template, 2, 0, "span");
-    i0.ɵɵconditionalCreate(2, FormQuestionComponent_Conditional_18_Conditional_2_Template, 2, 0, "span");
-    i0.ɵɵconditionalCreate(3, FormQuestionComponent_Conditional_18_Conditional_3_Template, 2, 1, "span");
-    i0.ɵɵconditionalCreate(4, FormQuestionComponent_Conditional_18_Conditional_4_Template, 2, 1, "span");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.control.errors == null ? null : ctx_r0.control.errors["required"]) ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.control.errors == null ? null : ctx_r0.control.errors["email"]) ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.control.errors == null ? null : ctx_r0.control.errors["min"]) ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.control.errors == null ? null : ctx_r0.control.errors["max"]) ? 4 : -1);
-} }
-/**
- * Component for rendering individual form questions with various input types
- * Implements ControlValueAccessor for seamless integration with Angular forms
- */
-export class FormQuestionComponent {
-    question;
-    control;
-    value = null;
-    disabled = false;
-    onChange = () => { };
-    onTouched = () => { };
-    ngOnInit() {
-        // Debug logging for dropdown issues
-        if (this.questionType === 'dropdown') {
-            console.log('[FormQuestion] Dropdown initialized:', {
-                questionId: this.question.id,
-                hasControl: !!this.control,
-                controlValue: this.control?.value,
-                options: this.options,
-                value: this.value
-            });
-        }
-    }
-    /**
-     * Get the question type (handles both simple string and complex types)
-     */
-    get questionType() {
-        return typeof this.question.type === 'string'
-            ? this.question.type
-            : this.question.type.type;
-    }
-    /**
-     * Check if this is a choice-based question (buttongroup, radio, dropdown, checkbox)
-     */
-    get isChoiceQuestion() {
-        const type = this.questionType;
-        return ['buttongroup', 'radio', 'dropdown', 'checkbox'].includes(type);
-    }
-    /**
-     * Get options for choice questions
-     */
-    get options() {
-        if (typeof this.question.type === 'object' && 'options' in this.question.type) {
-            return this.question.type.options;
-        }
-        return [];
-    }
-    /**
-     * Check if multiple selections are allowed (for checkbox type)
-     */
-    get allowMultiple() {
-        return this.questionType === 'checkbox' ||
-            (typeof this.question.type === 'object' && 'multiple' in this.question.type && !!this.question.type.multiple);
-    }
-    /**
-     * Get CSS class for field width based on widthHint or intelligent defaults
-     */
-    get widthClass() {
-        // If explicit widthHint provided, use it
-        if (this.question.widthHint) {
-            return `width-${this.question.widthHint}`;
-        }
-        // Otherwise, apply intelligent defaults based on question type
-        const type = this.questionType;
-        // Narrow fields
-        if (['number', 'currency', 'date', 'datetime', 'time'].includes(type)) {
-            return 'width-narrow';
-        }
-        // Wide fields for choice-based controls (need space for multiple options)
-        if (['buttongroup', 'radio', 'checkbox'].includes(type)) {
-            return 'width-wide';
-        }
-        // Auto-width for dropdowns
-        if (type === 'dropdown') {
-            return 'width-auto';
-        }
-        // Full-width fields
-        if (type === 'textarea') {
-            return 'width-full';
-        }
-        // Wide fields
-        if (type === 'email') {
-            return 'width-wide';
-        }
-        // Default to medium for text and other types
-        return 'width-medium';
-    }
-    /**
-     * Get placeholder text for text inputs
-     */
-    get placeholder() {
-        if (typeof this.question.type === 'object' && 'placeholder' in this.question.type) {
-            return this.question.type.placeholder;
-        }
-        return undefined;
-    }
-    /**
-     * Get min value for number/currency inputs
-     */
-    get min() {
-        if (typeof this.question.type === 'object' && 'min' in this.question.type) {
-            return this.question.type.min;
-        }
-        return undefined;
-    }
-    /**
-     * Get max value for number/currency inputs
-     */
-    get max() {
-        if (typeof this.question.type === 'object' && 'max' in this.question.type) {
-            return this.question.type.max;
-        }
-        return undefined;
-    }
-    /**
-     * Get step value for number/currency inputs
-     */
-    get step() {
-        if (typeof this.question.type === 'object' && 'step' in this.question.type) {
-            return this.question.type.step;
-        }
-        return undefined;
-    }
-    /**
-     * Get prefix for currency inputs
-     */
-    get prefix() {
-        if (typeof this.question.type === 'object' && 'prefix' in this.question.type) {
-            return this.question.type.prefix;
-        }
-        return undefined;
-    }
-    /**
-     * Get suffix for currency inputs
-     */
-    get suffix() {
-        if (typeof this.question.type === 'object' && 'suffix' in this.question.type) {
-            return this.question.type.suffix;
-        }
-        return undefined;
-    }
-    /**
-     * Handle value changes
-     */
-    onValueChange(newValue) {
-        this.value = newValue;
-        this.onChange(newValue);
-        this.onTouched();
-    }
-    /**
-     * Handle checkbox toggle for multiple selection
-     */
-    toggleCheckbox(option) {
-        if (!this.allowMultiple) {
-            // Single selection mode
-            this.onValueChange(option.value);
-        }
-        else {
-            // Multiple selection mode
-            const currentValues = Array.isArray(this.value) ? this.value : [];
-            const index = currentValues.indexOf(option.value);
-            let newValues;
-            if (index > -1) {
-                // Remove if already selected
-                newValues = currentValues.filter((v) => v !== option.value);
-            }
-            else {
-                // Add if not selected
-                newValues = [...currentValues, option.value];
-            }
-            this.onValueChange(newValues);
-        }
-    }
-    /**
-     * Check if a checkbox option is selected
-     */
-    isChecked(option) {
-        if (!this.allowMultiple) {
-            return this.value === option.value;
-        }
-        else {
-            return Array.isArray(this.value) && this.value.includes(option.value);
-        }
-    }
-    // ControlValueAccessor implementation
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * Debug handler for dropdown changes
-     */
-    onDropdownChange(value) {
-        console.log('[FormQuestion] Dropdown value changed:', {
-            questionId: this.question.id,
-            newValue: value,
-            controlValue: this.control?.value,
-            optionsCount: this.options.length
-        });
-    }
-    /**
-     * Get slider configuration
-     */
-    getSliderConfig() {
-        if (typeof this.question.type === 'object' && this.question.type.type === 'slider') {
-            return {
-                min: this.question.type.min,
-                max: this.question.type.max,
-                step: this.question.type.step,
-                suffix: this.question.type.suffix
-            };
-        }
-        return { min: 0, max: 100, step: 1 };
-    }
-    /**
-     * Handle date range start date change
-     */
-    onDateRangeStartChange(value) {
-        const current = this.value || {};
-        this.onValueChange({ ...current, start: value });
-    }
-    /**
-     * Handle date range end date change
-     */
-    onDateRangeEndChange(value) {
-        const current = this.value || {};
-        this.onValueChange({ ...current, end: value });
-    }
-    /**
-     * Track by function for options list
-     */
-    trackByValue(index, option) {
-        return option.value;
-    }
-    static ɵfac = function FormQuestionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormQuestionComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormQuestionComponent, selectors: [["mj-form-question"]], inputs: { question: "question", control: "control" }, standalone: false, features: [i0.ɵɵProvidersFeature([
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(() => FormQuestionComponent),
-                    multi: true
-                }
-            ])], decls: 19, vars: 20, consts: [[1, "form-question"], [1, "question-label"], [1, "help-text"], [1, "input-container", 3, "ngClass"], ["type", "text", "kendoTextBox", "", 1, "question-input", 3, "value", "placeholder", "disabled"], ["type", "email", "kendoTextBox", "", 1, "question-input", 3, "value", "placeholder", "disabled"], ["kendoTextArea", "", "rows", "5", 1, "question-textarea", 3, "value", "placeholder", "disabled"], [1, "question-input", 3, "value", "min", "max", "step", "disabled"], [1, "question-input", 3, "value", "min", "max", "step", "format", "disabled"], [1, "question-input", 3, "value", "disabled"], [1, "question-buttongroup", 3, "selection"], [1, "question-radio-group"], [1, "question-dropdown", 3, "formControl", "disabled"], [1, "question-slider-container"], [1, "question-daterange"], [1, "question-input", 3, "value", "disabled", "format"], [1, "question-checkbox-group"], [1, "validation-error"], [1, "required-indicator"], ["type", "text", "kendoTextBox", "", 1, "question-input", 3, "input", "value", "placeholder", "disabled"], ["type", "email", "kendoTextBox", "", 1, "question-input", 3, "input", "value", "placeholder", "disabled"], ["kendoTextArea", "", "rows", "5", 1, "question-textarea", 3, "input", "value", "placeholder", "disabled"], [1, "question-input", 3, "valueChange", "value", "min", "max", "step", "disabled"], [1, "question-input", 3, "valueChange", "value", "min", "max", "step", "format", "disabled"], [1, "question-input", 3, "valueChange", "value", "disabled"], ["kendoButton", "", 1, "buttongroup-option", 3, "toggleable", "selected", "disabled"], ["kendoButton", "", 1, "buttongroup-option", 3, "click", "toggleable", "selected", "disabled"], ["aria-hidden", "true", 3, "class"], ["aria-hidden", "true"], [1, "radio-option"], ["type", "radio", "kendoRadioButton", "", 3, "change", "name", "value", "checked", "disabled", "id"], [1, "radio-label", 3, "for"], ["value", ""], [3, "value"], [1, "question-slider", 3, "valueChange", "min", "max", "smallStep", "value", "disabled"], [1, "slider-value"], ["placeholder", "Start Date", 1, "daterange-start", 3, "valueChange", "value", "disabled"], [1, "daterange-separator"], ["placeholder", "End Date", 1, "daterange-end", 3, "valueChange", "value", "disabled"], [1, "question-input", 3, "valueChange", "value", "disabled", "format"], [1, "checkbox-option"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked", "disabled", "id"], [1, "checkbox-label", 3, "for"]], template: function FormQuestionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, FormQuestionComponent_Conditional_1_Template, 3, 2, "label", 1);
-            i0.ɵɵconditionalCreate(2, FormQuestionComponent_Conditional_2_Template, 2, 1, "div", 2);
-            i0.ɵɵelementStart(3, "div", 3);
-            i0.ɵɵconditionalCreate(4, FormQuestionComponent_Conditional_4_Template, 1, 3, "input", 4);
-            i0.ɵɵconditionalCreate(5, FormQuestionComponent_Conditional_5_Template, 1, 3, "input", 5);
-            i0.ɵɵconditionalCreate(6, FormQuestionComponent_Conditional_6_Template, 1, 3, "textarea", 6);
-            i0.ɵɵconditionalCreate(7, FormQuestionComponent_Conditional_7_Template, 1, 5, "kendo-numerictextbox", 7);
-            i0.ɵɵconditionalCreate(8, FormQuestionComponent_Conditional_8_Template, 1, 6, "kendo-numerictextbox", 8);
-            i0.ɵɵconditionalCreate(9, FormQuestionComponent_Conditional_9_Template, 1, 2, "kendo-datepicker", 9);
-            i0.ɵɵconditionalCreate(10, FormQuestionComponent_Conditional_10_Template, 1, 2, "kendo-datetimepicker", 9);
-            i0.ɵɵconditionalCreate(11, FormQuestionComponent_Conditional_11_Template, 3, 1, "kendo-buttongroup", 10);
-            i0.ɵɵconditionalCreate(12, FormQuestionComponent_Conditional_12_Template, 3, 0, "div", 11);
-            i0.ɵɵconditionalCreate(13, FormQuestionComponent_Conditional_13_Template, 5, 2, "select", 12);
-            i0.ɵɵconditionalCreate(14, FormQuestionComponent_Conditional_14_Template, 4, 7, "div", 13);
-            i0.ɵɵconditionalCreate(15, FormQuestionComponent_Conditional_15_Template, 5, 4, "div", 14);
-            i0.ɵɵconditionalCreate(16, FormQuestionComponent_Conditional_16_Template, 1, 3, "kendo-timepicker", 15);
-            i0.ɵɵconditionalCreate(17, FormQuestionComponent_Conditional_17_Template, 3, 0, "div", 16);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, FormQuestionComponent_Conditional_18_Template, 5, 4, "div", 17);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassProp("required", ctx.question.required);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.question.label ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.question.helpText ? 2 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.widthClass);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "text" ? 4 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "email" ? 5 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "textarea" ? 6 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "number" ? 7 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "currency" ? 8 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "date" ? 9 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "datetime" ? 10 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "buttongroup" ? 11 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "radio" ? 12 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "dropdown" ? 13 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "slider" ? 14 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "daterange" ? 15 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "time" ? 16 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionType === "checkbox" ? 17 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.control.invalid && ctx.control.touched ? 18 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective, i3.ButtonComponent, i3.ButtonGroupComponent, i4.TextBoxDirective, i4.NumericTextBoxComponent, i4.TextAreaDirective, i4.CheckBoxDirective, i4.RadioButtonDirective, i4.SliderComponent, i5.DatePickerComponent, i5.DateTimePickerComponent, i5.TimePickerComponent], styles: [".form-question[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.question-label[_ngcontent-%COMP%] {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 6px;\n  color: #333;\n  font-size: 14px;\n}\n\n.required-indicator[_ngcontent-%COMP%] {\n  color: #d9534f;\n  margin-left: 2px;\n}\n\n.help-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 8px;\n  font-style: italic;\n}\n\n\n\n.question-input[_ngcontent-%COMP%], \n.question-textarea[_ngcontent-%COMP%], \n.question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 100%;\n}\n\n.question-dropdown[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  font-size: 14px;\n  font-family: inherit;\n  background-color: white;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  background-size: 12px;\n  padding-right: 32px;\n  cursor: pointer;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.question-dropdown[_ngcontent-%COMP%]:hover {\n  border-color: #9ca3af;\n}\n\n.question-dropdown[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.question-dropdown[_ngcontent-%COMP%]:disabled {\n  background-color: #f3f4f6;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.question-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 100px;\n}\n\n.question-buttongroup[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 8px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(16, 185, 129, 0.3) transparent;\n}\n\n.question-buttongroup[_ngcontent-%COMP%]::-webkit-scrollbar {\n  height: 6px;\n}\n\n.question-buttongroup[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.question-buttongroup[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: rgba(16, 185, 129, 0.3);\n  border-radius: 3px;\n}\n\n.question-buttongroup[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: rgba(16, 185, 129, 0.5);\n}\n\n.buttongroup-option[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.buttongroup-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n.question-radio-group[_ngcontent-%COMP%], \n.question-checkbox-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px 16px;\n}\n\n.radio-option[_ngcontent-%COMP%], \n.checkbox-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 120px;\n  flex: 0 0 auto;\n}\n\n.radio-label[_ngcontent-%COMP%], \n.checkbox-label[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.checkbox-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\n}\n\n.validation-error[_ngcontent-%COMP%] {\n  color: #d9534f;\n  font-size: 12px;\n  margin-top: 4px;\n}\n\n\n\n.form-question.required[_ngcontent-%COMP%]   .question-label[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n\n.question-slider-container[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.question-slider[_ngcontent-%COMP%] {\n  width: 100%;\n  margin-bottom: 8px;\n}\n\n.slider-value[_ngcontent-%COMP%] {\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  color: #10b981;\n  padding: 4px 0;\n}\n\n\n\n.question-daterange[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.daterange-start[_ngcontent-%COMP%], \n.daterange-end[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 150px;\n}\n\n.daterange-separator[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: #666;\n  white-space: nowrap;\n}\n\n\n\n@media (max-width: 480px) {\n  .question-daterange[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .daterange-separator[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 4px 0;\n  }\n}\n\n\n\n\n\n\n.input-container[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n\n.input-container.width-narrow[_ngcontent-%COMP%] {\n  max-width: 200px;\n}\n\n.input-container.width-narrow[_ngcontent-%COMP%]   .question-input[_ngcontent-%COMP%], \n.input-container.width-narrow[_ngcontent-%COMP%]   .question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.input-container.width-medium[_ngcontent-%COMP%] {\n  max-width: 450px;\n}\n\n.input-container.width-medium[_ngcontent-%COMP%]   .question-input[_ngcontent-%COMP%], \n.input-container.width-medium[_ngcontent-%COMP%]   .question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.input-container.width-wide[_ngcontent-%COMP%] {\n  max-width: 100%;\n}\n\n.input-container.width-wide[_ngcontent-%COMP%]   .question-input[_ngcontent-%COMP%], \n.input-container.width-wide[_ngcontent-%COMP%]   .question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.input-container.width-full[_ngcontent-%COMP%] {\n  max-width: 100%;\n}\n\n.input-container.width-full[_ngcontent-%COMP%]   .question-input[_ngcontent-%COMP%], \n.input-container.width-full[_ngcontent-%COMP%]   .question-textarea[_ngcontent-%COMP%], \n.input-container.width-full[_ngcontent-%COMP%]   .question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.input-container.width-auto[_ngcontent-%COMP%] {\n  max-width: 350px;\n  min-width: 150px;\n  width: auto;\n}\n\n.input-container.width-auto[_ngcontent-%COMP%]   .question-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n@media (max-width: 600px) {\n  .input-container.width-narrow[_ngcontent-%COMP%], \n   .input-container.width-medium[_ngcontent-%COMP%], \n   .input-container.width-wide[_ngcontent-%COMP%], \n   .input-container.width-auto[_ngcontent-%COMP%] {\n    max-width: 100%;\n  }\n}"] });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormQuestionComponent, [{
-        type: Component,
-        args: [{ standalone: false, selector: 'mj-form-question', providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => FormQuestionComponent),
-                        multi: true
-                    }
-                ], template: "<div class=\"form-question\" [class.required]=\"question.required\">\n  <!-- Label -->\n  @if (question.label) {\n    <label class=\"question-label\">\n      {{ question.label }}\n      @if (question.required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Help Text -->\n  @if (question.helpText) {\n    <div class=\"help-text\">\n      {{ question.helpText }}\n    </div>\n  }\n\n  <!-- Input Container with width class -->\n  <div class=\"input-container\" [ngClass]=\"widthClass\">\n\n    <!-- Text Input -->\n    @if (questionType === 'text') {\n      <input\n        type=\"text\"\n        kendoTextBox\n        [value]=\"value || ''\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        (input)=\"onValueChange($any($event.target).value)\"\n        class=\"question-input\"\n        />\n    }\n\n    <!-- Email Input -->\n    @if (questionType === 'email') {\n      <input\n        type=\"email\"\n        kendoTextBox\n        [value]=\"value || ''\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        (input)=\"onValueChange($any($event.target).value)\"\n        class=\"question-input\"\n        />\n    }\n\n    <!-- Textarea -->\n    @if (questionType === 'textarea') {\n      <textarea\n        kendoTextArea\n        [value]=\"value || ''\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        (input)=\"onValueChange($any($event.target).value)\"\n        class=\"question-textarea\"\n        rows=\"5\"\n      ></textarea>\n    }\n\n    <!-- Number Input -->\n    @if (questionType === 'number') {\n      <kendo-numerictextbox\n        [value]=\"value\"\n        [min]=\"min || 0\"\n        [max]=\"max || 999999999\"\n        [step]=\"step || 1\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onValueChange($event)\"\n        class=\"question-input\"\n      ></kendo-numerictextbox>\n    }\n\n    <!-- Currency Input -->\n    @if (questionType === 'currency') {\n      <kendo-numerictextbox\n        [value]=\"value\"\n        [min]=\"min || 0\"\n        [max]=\"max || 999999999\"\n        [step]=\"step || 0.01\"\n        [format]=\"'c2'\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onValueChange($event)\"\n        class=\"question-input\"\n      ></kendo-numerictextbox>\n    }\n\n    <!-- Date Picker -->\n    @if (questionType === 'date') {\n      <kendo-datepicker\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onValueChange($event)\"\n        class=\"question-input\"\n      ></kendo-datepicker>\n    }\n\n    <!-- DateTime Picker -->\n    @if (questionType === 'datetime') {\n      <kendo-datetimepicker\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onValueChange($event)\"\n        class=\"question-input\"\n      ></kendo-datetimepicker>\n    }\n\n    <!-- Button Group -->\n    @if (questionType === 'buttongroup') {\n      <kendo-buttongroup\n        [selection]=\"'single'\"\n        class=\"question-buttongroup\"\n        >\n        @for (option of options; track trackByValue($index, option)) {\n          <button\n            kendoButton\n            [toggleable]=\"true\"\n            [selected]=\"value === option.value\"\n            [disabled]=\"disabled\"\n            (click)=\"onValueChange(option.value)\"\n            class=\"buttongroup-option\"\n            >\n            @if (option.icon) {\n              <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n            }\n            {{ option.label }}\n          </button>\n        }\n      </kendo-buttongroup>\n    }\n\n    <!-- Radio Buttons -->\n    @if (questionType === 'radio') {\n      <div class=\"question-radio-group\">\n        @for (option of options; track trackByValue($index, option)) {\n          <div class=\"radio-option\">\n            <input\n              type=\"radio\"\n              kendoRadioButton\n              [name]=\"question.id\"\n              [value]=\"option.value\"\n              [checked]=\"value === option.value\"\n              [disabled]=\"disabled\"\n              (change)=\"onValueChange(option.value)\"\n              [id]=\"question.id + '_' + option.value\"\n              />\n            <label [for]=\"question.id + '_' + option.value\" class=\"radio-label\">\n              @if (option.icon) {\n                <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n              }\n              {{ option.label }}\n            </label>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Dropdown -->\n    @if (questionType === 'dropdown') {\n      <select\n        [formControl]=\"control\"\n        [disabled]=\"disabled\"\n        class=\"question-dropdown\"\n        >\n        <option value=\"\">Select an option...</option>\n        @for (option of options; track trackByValue($index, option)) {\n          <option [value]=\"option.value\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n    }\n\n    <!-- Slider -->\n    @if (questionType === 'slider') {\n      <div class=\"question-slider-container\">\n        <kendo-slider\n          [min]=\"getSliderConfig().min\"\n          [max]=\"getSliderConfig().max\"\n          [smallStep]=\"getSliderConfig().step || 1\"\n          [value]=\"value || getSliderConfig().min\"\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange($event)\"\n          class=\"question-slider\"\n        ></kendo-slider>\n        <div class=\"slider-value\">\n          {{ value || getSliderConfig().min }}{{ getSliderConfig().suffix || '' }}\n        </div>\n      </div>\n    }\n\n    <!-- Date Range -->\n    @if (questionType === 'daterange') {\n      <div class=\"question-daterange\">\n        <kendo-datepicker\n          [value]=\"value?.start\"\n          [disabled]=\"disabled\"\n          (valueChange)=\"onDateRangeStartChange($event)\"\n          placeholder=\"Start Date\"\n          class=\"daterange-start\"\n        ></kendo-datepicker>\n        <span class=\"daterange-separator\">to</span>\n        <kendo-datepicker\n          [value]=\"value?.end\"\n          [disabled]=\"disabled\"\n          (valueChange)=\"onDateRangeEndChange($event)\"\n          placeholder=\"End Date\"\n          class=\"daterange-end\"\n        ></kendo-datepicker>\n      </div>\n    }\n\n    <!-- Time Picker -->\n    @if (questionType === 'time') {\n      <kendo-timepicker\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onValueChange($event)\"\n        [format]=\"'h:mm a'\"\n        class=\"question-input\"\n      ></kendo-timepicker>\n    }\n\n    <!-- Checkboxes -->\n    @if (questionType === 'checkbox') {\n      <div class=\"question-checkbox-group\">\n        @for (option of options; track trackByValue($index, option)) {\n          <div class=\"checkbox-option\">\n            <input\n              type=\"checkbox\"\n              kendoCheckBox\n              [checked]=\"isChecked(option)\"\n              [disabled]=\"disabled\"\n              (change)=\"toggleCheckbox(option)\"\n              [id]=\"question.id + '_' + option.value\"\n              />\n            <label [for]=\"question.id + '_' + option.value\" class=\"checkbox-label\">\n              @if (option.icon) {\n                <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n              }\n              {{ option.label }}\n            </label>\n          </div>\n        }\n      </div>\n    }\n  </div><!-- end input-container -->\n\n  <!-- Validation Error -->\n  @if (control.invalid && control.touched) {\n    <div class=\"validation-error\">\n      @if (control.errors?.['required']) {\n        <span>This field is required</span>\n      }\n      @if (control.errors?.['email']) {\n        <span>Please enter a valid email address</span>\n      }\n      @if (control.errors?.['min']) {\n        <span>Value must be at least {{ min }}</span>\n      }\n      @if (control.errors?.['max']) {\n        <span>Value must be at most {{ max }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [".form-question {\n  margin-bottom: 16px;\n}\n\n.question-label {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 6px;\n  color: #333;\n  font-size: 14px;\n}\n\n.required-indicator {\n  color: #d9534f;\n  margin-left: 2px;\n}\n\n.help-text {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 8px;\n  font-style: italic;\n}\n\n/* Default widths - controlled by input-container width classes */\n.question-input,\n.question-textarea,\n.question-dropdown {\n  width: 100%;\n  max-width: 100%;\n}\n\n.question-dropdown {\n  padding: 8px 12px;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  font-size: 14px;\n  font-family: inherit;\n  background-color: white;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  background-size: 12px;\n  padding-right: 32px;\n  cursor: pointer;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.question-dropdown:hover {\n  border-color: #9ca3af;\n}\n\n.question-dropdown:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.question-dropdown:disabled {\n  background-color: #f3f4f6;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.question-textarea {\n  resize: vertical;\n  min-height: 100px;\n}\n\n.question-buttongroup {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 8px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(16, 185, 129, 0.3) transparent;\n}\n\n.question-buttongroup::-webkit-scrollbar {\n  height: 6px;\n}\n\n.question-buttongroup::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.question-buttongroup::-webkit-scrollbar-thumb {\n  background: rgba(16, 185, 129, 0.3);\n  border-radius: 3px;\n}\n\n.question-buttongroup::-webkit-scrollbar-thumb:hover {\n  background: rgba(16, 185, 129, 0.5);\n}\n\n.buttongroup-option {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.buttongroup-option i {\n  margin-right: 6px;\n}\n\n.question-radio-group,\n.question-checkbox-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px 16px;\n}\n\n.radio-option,\n.checkbox-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 120px;\n  flex: 0 0 auto;\n}\n\n.radio-label,\n.checkbox-label {\n  cursor: pointer;\n  user-select: none;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-label i,\n.checkbox-label i {\n  color: #666;\n}\n\n.validation-error {\n  color: #d9534f;\n  font-size: 12px;\n  margin-top: 4px;\n}\n\n/* Required field styling */\n.form-question.required .question-label {\n  font-weight: 600;\n}\n\n/* Slider styling */\n.question-slider-container {\n  width: 100%;\n}\n\n.question-slider {\n  width: 100%;\n  margin-bottom: 8px;\n}\n\n.slider-value {\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  color: #10b981;\n  padding: 4px 0;\n}\n\n/* Date range styling */\n.question-daterange {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.daterange-start,\n.daterange-end {\n  flex: 1;\n  min-width: 150px;\n}\n\n.daterange-separator {\n  font-weight: 500;\n  color: #666;\n  white-space: nowrap;\n}\n\n/* Mobile adjustments for date range */\n@media (max-width: 480px) {\n  .question-daterange {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .daterange-separator {\n    text-align: center;\n    padding: 4px 0;\n  }\n}\n\n/* ===== Semantic Width Classes ===== */\n/* Controls field width based on expected content length */\n\n.input-container {\n  display: block;\n}\n\n/* Narrow fields - for numbers, dates, times, short codes */\n.input-container.width-narrow {\n  max-width: 200px;\n}\n\n.input-container.width-narrow .question-input,\n.input-container.width-narrow .question-dropdown {\n  width: 100%;\n}\n\n/* Medium fields - for names, cities, phone numbers (DEFAULT) */\n.input-container.width-medium {\n  max-width: 450px;\n}\n\n.input-container.width-medium .question-input,\n.input-container.width-medium .question-dropdown {\n  width: 100%;\n}\n\n/* Wide fields - for emails, URLs, long text */\n.input-container.width-wide {\n  max-width: 100%;\n}\n\n.input-container.width-wide .question-input,\n.input-container.width-wide .question-dropdown {\n  width: 100%;\n}\n\n/* Full width - for textarea, search fields */\n.input-container.width-full {\n  max-width: 100%;\n}\n\n.input-container.width-full .question-input,\n.input-container.width-full .question-textarea,\n.input-container.width-full .question-dropdown {\n  width: 100%;\n}\n\n/* Auto-width - for dropdowns, radio, checkbox (sizes to content) */\n.input-container.width-auto {\n  max-width: 350px;\n  min-width: 150px;\n  width: auto;\n}\n\n.input-container.width-auto .question-dropdown {\n  width: 100%;\n}\n\n/* Responsive adjustments for smaller screens */\n@media (max-width: 600px) {\n  .input-container.width-narrow,\n  .input-container.width-medium,\n  .input-container.width-wide,\n  .input-container.width-auto {\n    max-width: 100%;\n  }\n}\n"] }]
-    }], null, { question: [{
-            type: Input
-        }], control: [{
-            type: Input
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormQuestionComponent, { className: "FormQuestionComponent", filePath: "src/lib/components/message/form-question.component.ts", lineNumber: 22 }); })();
-//# sourceMappingURL=form-question.component.js.map