@memberjunction/ng-conversations 2.117.0 → 2.118.0

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

@@ -0,0 +1,621 @@
+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_label_1_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+function FormQuestionComponent_label_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵtemplate(2, FormQuestionComponent_label_1_span_2_Template, 2, 0, "span", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.question.label, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.question.required);
+} }
+function FormQuestionComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.question.helpText, " ");
+} }
+function FormQuestionComponent_input_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 22);
+    i0.ɵɵlistener("input", function FormQuestionComponent_input_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_input_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 23);
+    i0.ɵɵlistener("input", function FormQuestionComponent_input_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_textarea_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 24);
+    i0.ɵɵlistener("input", function FormQuestionComponent_textarea_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_kendo_numerictextbox_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 25);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_kendo_numerictextbox_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_kendo_numerictextbox_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 26);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_kendo_numerictextbox_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_kendo_datepicker_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-datepicker", 27);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_kendo_datepicker_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_kendo_datetimepicker_10_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-datetimepicker", 27);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_kendo_datetimepicker_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_kendo_buttongroup_11_button_1_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+} if (rf & 2) {
+    const option_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMapInterpolate1("fa ", option_r10.icon, "");
+} }
+function FormQuestionComponent_kendo_buttongroup_11_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function FormQuestionComponent_kendo_buttongroup_11_button_1_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.ɵɵtemplate(1, FormQuestionComponent_kendo_buttongroup_11_button_1_i_1_Template, 1, 3, "i", 31);
+    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.ɵɵproperty("ngIf", option_r10.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r10.label, " ");
+} }
+function FormQuestionComponent_kendo_buttongroup_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-buttongroup", 28);
+    i0.ɵɵtemplate(1, FormQuestionComponent_kendo_buttongroup_11_button_1_Template, 3, 5, "button", 29);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("selection", "single");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0.options)("ngForTrackBy", ctx_r0.trackByValue);
+} }
+function FormQuestionComponent_div_12_div_1_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+} if (rf & 2) {
+    const option_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMapInterpolate1("fa ", option_r12.icon, "");
+} }
+function FormQuestionComponent_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "input", 36);
+    i0.ɵɵlistener("change", function FormQuestionComponent_div_12_div_1_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", 37);
+    i0.ɵɵtemplate(3, FormQuestionComponent_div_12_div_1_i_3_Template, 1, 3, "i", 31);
+    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.ɵɵproperty("ngIf", option_r12.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r12.label, " ");
+} }
+function FormQuestionComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, FormQuestionComponent_div_12_div_1_Template, 5, 8, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0.options)("ngForTrackBy", ctx_r0.trackByValue);
+} }
+function FormQuestionComponent_select_13_option_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 41);
+    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_select_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "select", 38)(1, "option", 39);
+    i0.ɵɵtext(2, "Select an option...");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, FormQuestionComponent_select_13_option_3_Template, 2, 2, "option", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("formControl", ctx_r0.control)("disabled", ctx_r0.disabled);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r0.options)("ngForTrackBy", ctx_r0.trackByValue);
+} }
+function FormQuestionComponent_div_14_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42)(1, "kendo-slider", 43);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_div_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", 44);
+    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_div_15_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "kendo-datepicker", 46);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_div_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", 47);
+    i0.ɵɵtext(3, "to");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-datepicker", 48);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_div_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_kendo_timepicker_16_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-timepicker", 49);
+    i0.ɵɵlistener("valueChange", function FormQuestionComponent_kendo_timepicker_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_div_17_div_1_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+} if (rf & 2) {
+    const option_r18 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMapInterpolate1("fa ", option_r18.icon, "");
+} }
+function FormQuestionComponent_div_17_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52)(1, "input", 53);
+    i0.ɵɵlistener("change", function FormQuestionComponent_div_17_div_1_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", 54);
+    i0.ɵɵtemplate(3, FormQuestionComponent_div_17_div_1_i_3_Template, 1, 3, "i", 31);
+    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.ɵɵproperty("ngIf", option_r18.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r18.label, " ");
+} }
+function FormQuestionComponent_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵtemplate(1, FormQuestionComponent_div_17_div_1_Template, 5, 6, "div", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0.options)("ngForTrackBy", ctx_r0.trackByValue);
+} }
+function FormQuestionComponent_div_18_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "This field is required");
+    i0.ɵɵelementEnd();
+} }
+function FormQuestionComponent_div_18_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Please enter a valid email address");
+    i0.ɵɵelementEnd();
+} }
+function FormQuestionComponent_div_18_span_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_div_18_span_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_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵtemplate(1, FormQuestionComponent_div_18_span_1_Template, 2, 0, "span", 56)(2, FormQuestionComponent_div_18_span_2_Template, 2, 0, "span", 56)(3, FormQuestionComponent_div_18_span_3_Template, 2, 1, "span", 56)(4, FormQuestionComponent_div_18_span_4_Template, 2, 1, "span", 56);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.control == null ? null : ctx_r0.control.errors == null ? null : ctx_r0.control.errors["required"]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.control == null ? null : ctx_r0.control.errors == null ? null : ctx_r0.control.errors["email"]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.control == null ? null : ctx_r0.control.errors == null ? null : ctx_r0.control.errors["min"]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.control == null ? null : ctx_r0.control.errors == null ? null : ctx_r0.control.errors["max"]);
+} }
+/**
+ * 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(t) { return new (t || FormQuestionComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormQuestionComponent, selectors: [["mj-form-question"]], inputs: { question: "question", control: "control" }, features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => FormQuestionComponent),
+                    multi: true
+                }
+            ])], decls: 19, vars: 20, consts: [[1, "form-question"], ["class", "question-label", 4, "ngIf"], ["class", "help-text", 4, "ngIf"], [1, "input-container", 3, "ngClass"], ["type", "text", "kendoTextBox", "", "class", "question-input", 3, "value", "placeholder", "disabled", "input", 4, "ngIf"], ["type", "email", "kendoTextBox", "", "class", "question-input", 3, "value", "placeholder", "disabled", "input", 4, "ngIf"], ["kendoTextArea", "", "class", "question-textarea", "rows", "3", 3, "value", "placeholder", "disabled", "input", 4, "ngIf"], ["class", "question-input", 3, "value", "min", "max", "step", "disabled", "valueChange", 4, "ngIf"], ["class", "question-input", 3, "value", "min", "max", "step", "format", "disabled", "valueChange", 4, "ngIf"], ["class", "question-input", 3, "value", "disabled", "valueChange", 4, "ngIf"], ["class", "question-buttongroup", 3, "selection", 4, "ngIf"], ["class", "question-radio-group", 4, "ngIf"], ["class", "question-dropdown", 3, "formControl", "disabled", 4, "ngIf"], ["class", "question-slider-container", 4, "ngIf"], ["class", "question-daterange", 4, "ngIf"], ["class", "question-input", 3, "value", "disabled", "format", "valueChange", 4, "ngIf"], ["class", "question-checkbox-group", 4, "ngIf"], ["class", "validation-error", 4, "ngIf"], [1, "question-label"], ["class", "required-indicator", 4, "ngIf"], [1, "required-indicator"], [1, "help-text"], ["type", "text", "kendoTextBox", "", 1, "question-input", 3, "input", "value", "placeholder", "disabled"], ["type", "email", "kendoTextBox", "", 1, "question-input", 3, "input", "value", "placeholder", "disabled"], ["kendoTextArea", "", "rows", "3", 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"], [1, "question-buttongroup", 3, "selection"], ["kendoButton", "", "class", "buttongroup-option", 3, "toggleable", "selected", "disabled", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["kendoButton", "", 1, "buttongroup-option", 3, "click", "toggleable", "selected", "disabled"], ["aria-hidden", "true", 3, "class", 4, "ngIf"], ["aria-hidden", "true"], [1, "question-radio-group"], ["class", "radio-option", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "radio-option"], ["type", "radio", "kendoRadioButton", "", 3, "change", "name", "value", "checked", "disabled", "id"], [1, "radio-label", 3, "for"], [1, "question-dropdown", 3, "formControl", "disabled"], ["value", ""], [3, "value", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "value"], [1, "question-slider-container"], [1, "question-slider", 3, "valueChange", "min", "max", "smallStep", "value", "disabled"], [1, "slider-value"], [1, "question-daterange"], ["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, "question-checkbox-group"], ["class", "checkbox-option", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "checkbox-option"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked", "disabled", "id"], [1, "checkbox-label", 3, "for"], [1, "validation-error"], [4, "ngIf"]], template: function FormQuestionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, FormQuestionComponent_label_1_Template, 3, 2, "label", 1)(2, FormQuestionComponent_div_2_Template, 2, 1, "div", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵtemplate(4, FormQuestionComponent_input_4_Template, 1, 3, "input", 4)(5, FormQuestionComponent_input_5_Template, 1, 3, "input", 5)(6, FormQuestionComponent_textarea_6_Template, 1, 3, "textarea", 6)(7, FormQuestionComponent_kendo_numerictextbox_7_Template, 1, 5, "kendo-numerictextbox", 7)(8, FormQuestionComponent_kendo_numerictextbox_8_Template, 1, 6, "kendo-numerictextbox", 8)(9, FormQuestionComponent_kendo_datepicker_9_Template, 1, 2, "kendo-datepicker", 9)(10, FormQuestionComponent_kendo_datetimepicker_10_Template, 1, 2, "kendo-datetimepicker", 9)(11, FormQuestionComponent_kendo_buttongroup_11_Template, 2, 3, "kendo-buttongroup", 10)(12, FormQuestionComponent_div_12_Template, 2, 2, "div", 11)(13, FormQuestionComponent_select_13_Template, 4, 4, "select", 12)(14, FormQuestionComponent_div_14_Template, 4, 7, "div", 13)(15, FormQuestionComponent_div_15_Template, 5, 4, "div", 14)(16, FormQuestionComponent_kendo_timepicker_16_Template, 1, 3, "kendo-timepicker", 15)(17, FormQuestionComponent_div_17_Template, 2, 2, "div", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(18, FormQuestionComponent_div_18_Template, 5, 4, "div", 17);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("required", ctx.question.required);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.question.label);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.question.helpText);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.widthClass);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "text");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "email");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "textarea");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "number");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "currency");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "date");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "datetime");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "buttongroup");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "radio");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "dropdown");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "slider");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "daterange");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "time");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.questionType === "checkbox");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", (ctx.control == null ? null : ctx.control.invalid) && (ctx.control == null ? null : ctx.control.touched));
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective, i3.ButtonGroupComponent, i3.ButtonComponent, i4.TextAreaDirective, i4.TextBoxDirective, i4.SliderComponent, i4.NumericTextBoxComponent, i4.CheckBoxDirective, i4.RadioButtonDirective, i5.DatePickerComponent, i5.TimePickerComponent, i5.DateTimePickerComponent], 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: 60px;\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: 350px;\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: 500px;\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: [{ 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  <label *ngIf=\"question.label\" class=\"question-label\">\n    {{ question.label }}\n    <span *ngIf=\"question.required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <!-- Help Text -->\n  <div *ngIf=\"question.helpText\" class=\"help-text\">\n    {{ question.helpText }}\n  </div>\n\n  <!-- Input Container with width class -->\n  <div class=\"input-container\" [ngClass]=\"widthClass\">\n\n  <!-- Text Input -->\n  <input\n    *ngIf=\"questionType === 'text'\"\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  <!-- Email Input -->\n  <input\n    *ngIf=\"questionType === 'email'\"\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  <!-- Textarea -->\n  <textarea\n    *ngIf=\"questionType === '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=\"3\"\n  ></textarea>\n\n  <!-- Number Input -->\n  <kendo-numerictextbox\n    *ngIf=\"questionType === 'number'\"\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  <!-- Currency Input -->\n  <kendo-numerictextbox\n    *ngIf=\"questionType === 'currency'\"\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  <!-- Date Picker -->\n  <kendo-datepicker\n    *ngIf=\"questionType === 'date'\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onValueChange($event)\"\n    class=\"question-input\"\n  ></kendo-datepicker>\n\n  <!-- DateTime Picker -->\n  <kendo-datetimepicker\n    *ngIf=\"questionType === 'datetime'\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onValueChange($event)\"\n    class=\"question-input\"\n  ></kendo-datetimepicker>\n\n  <!-- Button Group -->\n  <kendo-buttongroup\n    *ngIf=\"questionType === 'buttongroup'\"\n    [selection]=\"'single'\"\n    class=\"question-buttongroup\"\n  >\n    <button\n      *ngFor=\"let option of options; trackBy: trackByValue\"\n      kendoButton\n      [toggleable]=\"true\"\n      [selected]=\"value === option.value\"\n      [disabled]=\"disabled\"\n      (click)=\"onValueChange(option.value)\"\n      class=\"buttongroup-option\"\n    >\n      <i *ngIf=\"option.icon\" class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n      {{ option.label }}\n    </button>\n  </kendo-buttongroup>\n\n  <!-- Radio Buttons -->\n  <div *ngIf=\"questionType === 'radio'\" class=\"question-radio-group\">\n    <div *ngFor=\"let option of options; trackBy: trackByValue\" 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        <i *ngIf=\"option.icon\" class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n        {{ option.label }}\n      </label>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  <select\n    *ngIf=\"questionType === 'dropdown'\"\n    [formControl]=\"control\"\n    [disabled]=\"disabled\"\n    class=\"question-dropdown\"\n  >\n    <option value=\"\">Select an option...</option>\n    <option *ngFor=\"let option of options; trackBy: trackByValue\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slider -->\n  <div *ngIf=\"questionType === 'slider'\" 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  <!-- Date Range -->\n  <div *ngIf=\"questionType === 'daterange'\" 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  <!-- Time Picker -->\n  <kendo-timepicker\n    *ngIf=\"questionType === 'time'\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onValueChange($event)\"\n    [format]=\"'h:mm a'\"\n    class=\"question-input\"\n  ></kendo-timepicker>\n\n  <!-- Checkboxes -->\n  <div *ngIf=\"questionType === 'checkbox'\" class=\"question-checkbox-group\">\n    <div *ngFor=\"let option of options; trackBy: trackByValue\" 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        <i *ngIf=\"option.icon\" class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n        {{ option.label }}\n      </label>\n    </div>\n  </div>\n  </div><!-- end input-container -->\n\n  <!-- Validation Error -->\n  <div *ngIf=\"control?.invalid && control?.touched\" class=\"validation-error\">\n    <span *ngIf=\"control?.errors?.['required']\">This field is required</span>\n    <span *ngIf=\"control?.errors?.['email']\">Please enter a valid email address</span>\n    <span *ngIf=\"control?.errors?.['min']\">Value must be at least {{ min }}</span>\n    <span *ngIf=\"control?.errors?.['max']\">Value must be at most {{ max }}</span>\n  </div>\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: 60px;\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: 350px;\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: 500px;\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: 21 }); })();
+//# sourceMappingURL=form-question.component.js.map