@memberjunction/ng-conversations 2.128.0 → 2.130.0

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

@@ -555,7 +555,7 @@ export class FormQuestionComponent {
                     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) {
+            ])], 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", "5", 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", "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"], [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);
@@ -601,7 +601,7 @@ export class FormQuestionComponent {
             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}"] });
+        } }, 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: 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,
@@ -611,7 +611,7 @@ export class FormQuestionComponent {
                         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"] }]
+                ], 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=\"5\"\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: 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: [{

package/dist/lib/components/message/message-input-box.component.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { UserInfo } from '@memberjunction/core';
 import { MentionSuggestion } from '../../services/mention-autocomplete.service';
-import { MentionEditorComponent } from '../mention/mention-editor.component';
+import { MentionEditorComponent, PendingAttachment } from '../mention/mention-editor.component';
 import * as i0 from "@angular/core";
 /**
  * Reusable message input box component (presentational)
@@ -27,13 +27,32 @@ export declare class MessageInputBoxComponent {
     enableMentions: boolean;
     currentUser?: UserInfo;
     rows: number;
+    enableAttachments: boolean;
+    maxAttachments: number;
+    maxAttachmentSizeBytes: number;
+    acceptedFileTypes: string;
     textSubmitted: EventEmitter<string>;
     valueChange: EventEmitter<string>;
+    attachmentsChanged: EventEmitter<PendingAttachment[]>;
+    attachmentError: EventEmitter<string>;
+    attachmentClicked: EventEmitter<PendingAttachment>;
     get canSend(): boolean;
     /**
      * Handle value changes from MentionEditorComponent
      */
     onValueChange(newValue: string): void;
+    /**
+     * Handle attachment changes from MentionEditorComponent
+     */
+    onAttachmentsChanged(attachments: PendingAttachment[]): void;
+    /**
+     * Handle attachment errors from MentionEditorComponent
+     */
+    onAttachmentError(error: string): void;
+    /**
+     * Handle attachment click from MentionEditorComponent
+     */
+    onAttachmentClicked(attachment: PendingAttachment): void;
     /**
      * Handle Enter key from MentionEditorComponent
      * Extracts plain text with JSON-encoded mentions for message submission
@@ -67,7 +86,15 @@ export declare class MessageInputBoxComponent {
         presetId?: string;
         presetName?: string;
     }>;
+    /**
+     * Get pending attachments from the editor
+     */
+    getPendingAttachments(): PendingAttachment[];
+    /**
+     * Open file picker programmatically
+     */
+    openFilePicker(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputBoxComponent, "mj-message-input-box", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "enableMentions": { "alias": "enableMentions"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "textSubmitted": "textSubmitted"; "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputBoxComponent, "mj-message-input-box", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "enableMentions": { "alias": "enableMentions"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "enableAttachments": { "alias": "enableAttachments"; "required": false; }; "maxAttachments": { "alias": "maxAttachments"; "required": false; }; "maxAttachmentSizeBytes": { "alias": "maxAttachmentSizeBytes"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; }, { "textSubmitted": "textSubmitted"; "valueChange": "valueChange"; "attachmentsChanged": "attachmentsChanged"; "attachmentError": "attachmentError"; "attachmentClicked": "attachmentClicked"; }, never, never, false, never>;
 }
 //# sourceMappingURL=message-input-box.component.d.ts.map

package/dist/lib/components/message/message-input-box.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-box.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;;AAE7E;;;;;;;;;;;;;;GAcG;AACH,qBAKa,wBAAwB;IACP,aAAa,CAAC,EAAE,sBAAsB,CAAC;IAE1D,WAAW,EAAE,MAAM,CAAsD;IACzE,QAAQ,EAAE,OAAO,CAAS;IAC1B,KAAK,EAAE,MAAM,CAAM;IACnB,kBAAkB,EAAE,OAAO,CAAS;IACpC,cAAc,EAAE,OAAO,CAAQ;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,EAAE,MAAM,CAAK;IAEhB,aAAa,uBAA8B;IAC3C,WAAW,uBAA8B;IAEnD,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;OAEG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKrC;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAMtD;;;OAGG;IACH,WAAW,IAAI,IAAI;IAgBnB;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IA6BzC;;OAEG;IACH,KAAK,IAAI,IAAI;IAOb;;OAEG;IACH,mBAAmB,IAAI,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;yCA7GrG,wBAAwB;2CAAxB,wBAAwB;CAgHpC"}
+{"version":3,"file":"message-input-box.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;;AAEhG;;;;;;;;;;;;;;GAcG;AACH,qBAKa,wBAAwB;IACP,aAAa,CAAC,EAAE,sBAAsB,CAAC;IAE1D,WAAW,EAAE,MAAM,CAAsD;IACzE,QAAQ,EAAE,OAAO,CAAS;IAC1B,KAAK,EAAE,MAAM,CAAM;IACnB,kBAAkB,EAAE,OAAO,CAAS;IACpC,cAAc,EAAE,OAAO,CAAQ;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,EAAE,MAAM,CAAK;IAGjB,iBAAiB,EAAE,OAAO,CAAQ;IAClC,cAAc,EAAE,MAAM,CAAM;IAC5B,sBAAsB,EAAE,MAAM,CAAoB;IAClD,iBAAiB,EAAE,MAAM,CAAa;IAErC,aAAa,uBAA8B;IAC3C,WAAW,uBAA8B;IACzC,kBAAkB,oCAA2C;IAC7D,eAAe,uBAA8B;IAC7C,iBAAiB,kCAAyC;IAEpE,IAAI,OAAO,IAAI,OAAO,CAIrB;IAED;;OAEG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKrC;;OAEG;IACH,oBAAoB,CAAC,WAAW,EAAE,iBAAiB,EAAE,GAAG,IAAI;IAI5D;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAItC;;OAEG;IACH,mBAAmB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAIxD;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAKtD;;;OAGG;IACH,WAAW,IAAI,IAAI;IAgBnB;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IA6BzC;;OAEG;IACH,KAAK,IAAI,IAAI;IAOb;;OAEG;IACH,mBAAmB,IAAI,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIhH;;OAEG;IACH,qBAAqB,IAAI,iBAAiB,EAAE;IAI5C;;OAEG;IACH,cAAc,IAAI,IAAI;yCA1JX,wBAAwB;2CAAxB,wBAAwB;CA6JpC"}

package/dist/lib/components/message/message-input-box.component.js

@@ -1,8 +1,19 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "../mention/mention-editor.component";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "../mention/mention-editor.component";
 const _c0 = ["mentionEditor"];
+function MessageInputBoxComponent_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵlistener("click", function MessageInputBoxComponent_button_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.openFilePicker(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+} }
 /**
  * Reusable message input box component (presentational)
  * Now uses MentionEditorComponent for rich @mention functionality with chips
@@ -27,10 +38,20 @@ export class MessageInputBoxComponent {
     enableMentions = true;
     currentUser;
     rows = 3;
+    // Attachment settings
+    enableAttachments = true;
+    maxAttachments = 10;
+    maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB
+    acceptedFileTypes = 'image/*';
     textSubmitted = new EventEmitter();
     valueChange = new EventEmitter();
+    attachmentsChanged = new EventEmitter();
+    attachmentError = new EventEmitter();
+    attachmentClicked = new EventEmitter();
     get canSend() {
-        return !this.disabled && this.value.trim().length > 0;
+        const hasText = this.value.trim().length > 0;
+        const hasAttachments = this.mentionEditor?.hasAttachments() || false;
+        return !this.disabled && (hasText || hasAttachments);
     }
     /**
      * Handle value changes from MentionEditorComponent
@@ -39,6 +60,24 @@ export class MessageInputBoxComponent {
         this.value = newValue;
         this.valueChange.emit(this.value);
     }
+    /**
+     * Handle attachment changes from MentionEditorComponent
+     */
+    onAttachmentsChanged(attachments) {
+        this.attachmentsChanged.emit(attachments);
+    }
+    /**
+     * Handle attachment errors from MentionEditorComponent
+     */
+    onAttachmentError(error) {
+        this.attachmentError.emit(error);
+    }
+    /**
+     * Handle attachment click from MentionEditorComponent
+     */
+    onAttachmentClicked(attachment) {
+        this.attachmentClicked.emit(attachment);
+    }
     /**
      * Handle Enter key from MentionEditorComponent
      * Extracts plain text with JSON-encoded mentions for message submission
@@ -52,7 +91,6 @@ export class MessageInputBoxComponent {
     onMentionSelected(suggestion) {
         // MentionEditorComponent already inserts the mention chip
         // This is just for additional tracking/analytics if needed
-        console.log('[MessageInputBox] Mention selected:', suggestion);
     }
     /**
      * Send the message
@@ -114,35 +152,50 @@ export class MessageInputBoxComponent {
     getMentionChipsData() {
         return this.mentionEditor?.getMentionChipsData() || [];
     }
+    /**
+     * Get pending attachments from the editor
+     */
+    getPendingAttachments() {
+        return this.mentionEditor?.getPendingAttachments() || [];
+    }
+    /**
+     * Open file picker programmatically
+     */
+    openFilePicker() {
+        this.mentionEditor?.openFilePicker();
+    }
     static ɵfac = function MessageInputBoxComponent_Factory(t) { return new (t || MessageInputBoxComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageInputBoxComponent, selectors: [["mj-message-input-box"]], viewQuery: function MessageInputBoxComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mentionEditor = _t.first);
-        } }, inputs: { placeholder: "placeholder", disabled: "disabled", value: "value", showCharacterCount: "showCharacterCount", enableMentions: "enableMentions", currentUser: "currentUser", rows: "rows" }, outputs: { textSubmitted: "textSubmitted", valueChange: "valueChange" }, decls: 6, vars: 6, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "placeholder", "disabled", "currentUser", "enableMentions", "ngModel"], ["title", "Send message (Enter)", 1, "send-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"]], template: function MessageInputBoxComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { placeholder: "placeholder", disabled: "disabled", value: "value", showCharacterCount: "showCharacterCount", enableMentions: "enableMentions", currentUser: "currentUser", rows: "rows", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes" }, outputs: { textSubmitted: "textSubmitted", valueChange: "valueChange", attachmentsChanged: "attachmentsChanged", attachmentError: "attachmentError", attachmentClicked: "attachmentClicked" }, decls: 7, vars: 11, consts: [["mentionEditor", ""], [1, "message-input-box-container", 3, "click"], [1, "input-wrapper"], [3, "ngModelChange", "valueChange", "enterPressed", "mentionSelected", "attachmentsChanged", "attachmentError", "attachmentClicked", "placeholder", "disabled", "currentUser", "enableMentions", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "ngModel"], ["class", "attach-button-icon", "title", "Attach file", 3, "disabled", "click", 4, "ngIf"], ["title", "Send message (Enter)", 1, "send-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], ["title", "Attach file", 1, "attach-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paperclip"]], template: function MessageInputBoxComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
             i0.ɵɵelementStart(1, "div", 2)(2, "mj-mention-editor", 3, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function MessageInputBoxComponent_Template_mj_mention_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("valueChange", function MessageInputBoxComponent_Template_mj_mention_editor_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onValueChange($event)); })("enterPressed", function MessageInputBoxComponent_Template_mj_mention_editor_enterPressed_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnterPressed($event)); })("mentionSelected", function MessageInputBoxComponent_Template_mj_mention_editor_mentionSelected_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMentionSelected($event)); });
+            i0.ɵɵlistener("valueChange", function MessageInputBoxComponent_Template_mj_mention_editor_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onValueChange($event)); })("enterPressed", function MessageInputBoxComponent_Template_mj_mention_editor_enterPressed_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnterPressed($event)); })("mentionSelected", function MessageInputBoxComponent_Template_mj_mention_editor_mentionSelected_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMentionSelected($event)); })("attachmentsChanged", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentsChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentError_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); })("attachmentClicked", function MessageInputBoxComponent_Template_mj_mention_editor_attachmentClicked_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentClicked($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "button", 4);
-            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendClick()); });
-            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵtemplate(4, MessageInputBoxComponent_button_4_Template, 2, 1, "button", 4);
+            i0.ɵɵelementStart(5, "button", 5);
+            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendClick()); });
+            i0.ɵɵelement(6, "i", 6);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled)("currentUser", ctx.currentUser)("enableMentions", ctx.enableMentions);
+            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled)("currentUser", ctx.currentUser)("enableMentions", ctx.enableMentions)("enableAttachments", ctx.enableAttachments)("maxAttachments", ctx.maxAttachments)("maxAttachmentSizeBytes", ctx.maxAttachmentSizeBytes)("acceptedFileTypes", ctx.acceptedFileTypes);
             i0.ɵɵtwoWayProperty("ngModel", ctx.value);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.enableAttachments);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", !ctx.canSend);
-        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MentionEditorComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--primary-color, #007bff);\n  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper[_ngcontent-%COMP%]   mj-mention-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n}\n.message-input-box-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--text-tertiary, #999);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:focus, .message-input-box-textarea[_ngcontent-%COMP%]:active, .message-input-box-textarea[_ngcontent-%COMP%]:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.send-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--primary-color-dark, #0056b3);\n  transform: scale(1.05);\n}\n.send-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon[_ngcontent-%COMP%]:disabled {\n  background: var(--background-disabled, #d0d0d0);\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n@media (max-width: 768px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}"] });
+        } }, dependencies: [i1.NgIf, i2.NgControlStatus, i2.NgModel, i3.MentionEditorComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--primary-color, #007bff);\n  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper[_ngcontent-%COMP%]   mj-mention-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n}\n.message-input-box-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--text-tertiary, #999);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n.message-input-box-textarea[_ngcontent-%COMP%]:focus, .message-input-box-textarea[_ngcontent-%COMP%]:active, .message-input-box-textarea[_ngcontent-%COMP%]:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.send-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--primary-color-dark, #0056b3);\n  transform: scale(1.05);\n}\n.send-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon[_ngcontent-%COMP%]:disabled {\n  background: var(--background-disabled, #d0d0d0);\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n.attach-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--text-secondary, #666);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.attach-button-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--primary-color, #007bff);\n  transform: scale(1.05);\n}\n.attach-button-icon[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon[_ngcontent-%COMP%]:disabled {\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n\n\n@media (max-width: 768px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-input-box-container[_ngcontent-%COMP%] {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea[_ngcontent-%COMP%] {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputBoxComponent, [{
         type: Component,
-        args: [{ selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\" (click)=\"onContainerClick($event)\">\n  <div class=\"input-wrapper\">\n    <mj-mention-editor\n      #mentionEditor\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [currentUser]=\"currentUser\"\n      [enableMentions]=\"enableMentions\"\n      [(ngModel)]=\"value\"\n      (valueChange)=\"onValueChange($event)\"\n      (enterPressed)=\"onEnterPressed($event)\"\n      (mentionSelected)=\"onMentionSelected($event)\">\n    </mj-mention-editor>\n\n    <!-- Send Button (Icon Only) - Positioned over editor -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n    >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container:focus-within {\n  border-color: var(--primary-color, #007bff);\n  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper mj-mention-editor {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n}\n.message-input-box-textarea::placeholder {\n  color: var(--text-tertiary, #999);\n}\n.message-input-box-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n.message-input-box-textarea:focus, .message-input-box-textarea:active, .message-input-box-textarea:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon i {\n  font-size: 1rem;\n}\n.send-button-icon:hover:not(:disabled) {\n  background: var(--primary-color-dark, #0056b3);\n  transform: scale(1.05);\n}\n.send-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon:disabled {\n  background: var(--background-disabled, #d0d0d0);\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-input-box-container {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n  .message-input-box-textarea {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-input-box-container {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\" (click)=\"onContainerClick($event)\">\n  <div class=\"input-wrapper\">\n    <mj-mention-editor\n      #mentionEditor\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [currentUser]=\"currentUser\"\n      [enableMentions]=\"enableMentions\"\n      [enableAttachments]=\"enableAttachments\"\n      [maxAttachments]=\"maxAttachments\"\n      [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n      [acceptedFileTypes]=\"acceptedFileTypes\"\n      [(ngModel)]=\"value\"\n      (valueChange)=\"onValueChange($event)\"\n      (enterPressed)=\"onEnterPressed($event)\"\n      (mentionSelected)=\"onMentionSelected($event)\"\n      (attachmentsChanged)=\"onAttachmentsChanged($event)\"\n      (attachmentError)=\"onAttachmentError($event)\"\n      (attachmentClicked)=\"onAttachmentClicked($event)\">\n    </mj-mention-editor>\n\n    <!-- Attach Button - Positioned over editor -->\n    <button\n      *ngIf=\"enableAttachments\"\n      class=\"attach-button-icon\"\n      [disabled]=\"disabled\"\n      (click)=\"openFilePicker(); $event.stopPropagation()\"\n      title=\"Attach file\"\n    >\n      <i class=\"fa-solid fa-paperclip\"></i>\n    </button>\n\n    <!-- Send Button (Icon Only) - Positioned over editor -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n    >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible;\n  position: relative;\n  cursor: text;\n}\n.message-input-box-container:focus-within {\n  border-color: var(--primary-color, #007bff);\n  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  padding: 5px;\n}\n.input-wrapper mj-mention-editor {\n  flex: 1;\n  display: block;\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem;\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n}\n.message-input-box-textarea::placeholder {\n  color: var(--text-tertiary, #999);\n}\n.message-input-box-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  background: var(--background-disabled, #f5f5f5);\n}\n.message-input-box-textarea:focus, .message-input-box-textarea:active, .message-input-box-textarea:focus-visible {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.send-button-icon i {\n  font-size: 1rem;\n}\n.send-button-icon:hover:not(:disabled) {\n  background: var(--primary-color-dark, #0056b3);\n  transform: scale(1.05);\n}\n.send-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.send-button-icon:disabled {\n  background: var(--background-disabled, #d0d0d0);\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Attach button */\n.attach-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 3rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--text-secondary, #666);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n.attach-button-icon i {\n  font-size: 1rem;\n}\n.attach-button-icon:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--primary-color, #007bff);\n  transform: scale(1.05);\n}\n.attach-button-icon:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.attach-button-icon:disabled {\n  color: var(--text-disabled, #999);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-input-box-container {\n    border-radius: 10px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n  .message-input-box-textarea {\n    min-height: 80px;\n    padding: 0.75rem;\n    padding-right: 3rem;\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  .send-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.625rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-input-box-container {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n  .message-input-box-textarea {\n    min-height: 60px;\n    padding: 0.625rem;\n    padding-right: 2.75rem;\n    font-size: 16px;\n    line-height: 1.3;\n  }\n  .send-button-icon {\n    width: 36px;\n    height: 36px;\n    bottom: 0.5rem;\n    right: 0.5rem;\n    border-radius: 6px;\n  }\n  .send-button-icon i {\n    font-size: 0.875rem;\n  }\n  .attach-button-icon {\n    width: 32px;\n    height: 32px;\n    bottom: 0.5rem;\n    right: 2.75rem;\n  }\n  .attach-button-icon i {\n    font-size: 0.875rem;\n  }\n}\n"] }]
     }], null, { mentionEditor: [{
             type: ViewChild,
             args: ['mentionEditor']
@@ -160,10 +213,24 @@ export class MessageInputBoxComponent {
             type: Input
         }], rows: [{
             type: Input
+        }], enableAttachments: [{
+            type: Input
+        }], maxAttachments: [{
+            type: Input
+        }], maxAttachmentSizeBytes: [{
+            type: Input
+        }], acceptedFileTypes: [{
+            type: Input
         }], textSubmitted: [{
             type: Output
         }], valueChange: [{
             type: Output
+        }], attachmentsChanged: [{
+            type: Output
+        }], attachmentError: [{
+            type: Output
+        }], attachmentClicked: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputBoxComponent, { className: "MessageInputBoxComponent", filePath: "src/lib/components/message/message-input-box.component.ts", lineNumber: 26 }); })();
 //# sourceMappingURL=message-input-box.component.js.map

package/dist/lib/components/message/message-input-box.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-box.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts","../../../../src/lib/components/message/message-input-box.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"message-input-box.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts","../../../../src/lib/components/message/message-input-box.component.html"],"names":[],"mappings":"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"}

package/dist/lib/components/message/message-input.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
 import { UserInfo } from '@memberjunction/core';
-import { ConversationDetailEntity, AIAgentEntityExtended, AIAgentRunEntityExtended } from '@memberjunction/core-entities';
+import { ConversationDetailEntity } from '@memberjunction/core-entities';
+import { AIAgentEntityExtended, AIAgentRunEntityExtended } from "@memberjunction/ai-core-plus";
 import { DialogService } from '../../services/dialog.service';
 import { ToastService } from '../../services/toast.service';
 import { ConversationAgentService } from '../../services/conversation-agent.service';
@@ -11,6 +12,8 @@ import { ConversationStreamingService } from '../../services/conversation-stream
 import { ExecuteAgentResult } from '@memberjunction/ai-core-plus';
 import { MentionAutocompleteService } from '../../services/mention-autocomplete.service';
 import { MentionParserService } from '../../services/mention-parser.service';
+import { ConversationAttachmentService } from '../../services/conversation-attachment.service';
+import { PendingAttachment } from '../mention/mention-editor.component';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
 import { MessageInputBoxComponent } from './message-input-box.component';
 import * as i0 from "@angular/core";
@@ -24,6 +27,7 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
     private streamingService;
     private mentionParser;
     private mentionAutocomplete;
+    private attachmentService;
     private readonly JSON_ARTIFACT_TYPE_ID;
     conversationId: string;
     conversationName?: string | null;
@@ -31,10 +35,21 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
     disabled: boolean;
     placeholder: string;
     parentMessageId?: string;
-    initialMessage: string | null;
+    enableAttachments: boolean;
+    maxAttachments: number;
+    maxAttachmentSizeBytes: number;
+    acceptedFileTypes: string;
     artifactsByDetailId?: Map<string, LazyArtifactInfo[]>;
     systemArtifactsByDetailId?: Map<string, LazyArtifactInfo[]>;
     agentRunsByDetailId?: Map<string, AIAgentRunEntityExtended>;
+    emptyStateMode: boolean;
+    private _initialMessage;
+    private _initialAttachments;
+    private _isComponentReady;
+    set initialMessage(value: string | null);
+    get initialMessage(): string | null;
+    set initialAttachments(value: PendingAttachment[] | null);
+    get initialAttachments(): PendingAttachment[] | null;
     private _conversationHistory;
     get conversationHistory(): ConversationDetailEntity[];
     set conversationHistory(value: ConversationDetailEntity[]);
@@ -73,18 +88,34 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
     }>;
     intentCheckStarted: EventEmitter<void>;
     intentCheckCompleted: EventEmitter<void>;
+    emptyStateSubmit: EventEmitter<{
+        text: string;
+        attachments: PendingAttachment[];
+    }>;
+    uploadStateChanged: EventEmitter<{
+        isUploading: boolean;
+        message: string;
+    }>;
     inputBox: MessageInputBoxComponent;
     messageText: string;
     isSending: boolean;
     isProcessing: boolean;
     processingMessage: string;
+    isUploadingAttachments: boolean;
+    uploadingMessage: string;
     converationManagerAgent: AIAgentEntityExtended | null;
     private completionTimestamps;
     private registeredCallbacks;
-    constructor(dialogService: DialogService, toastService: ToastService, agentService: ConversationAgentService, conversationData: ConversationDataService, dataCache: DataCacheService, activeTasks: ActiveTasksService, streamingService: ConversationStreamingService, mentionParser: MentionParserService, mentionAutocomplete: MentionAutocompleteService);
+    private pendingAttachments;
+    constructor(dialogService: DialogService, toastService: ToastService, agentService: ConversationAgentService, conversationData: ConversationDataService, dataCache: DataCacheService, activeTasks: ActiveTasksService, streamingService: ConversationStreamingService, mentionParser: MentionParserService, mentionAutocomplete: MentionAutocompleteService, attachmentService: ConversationAttachmentService);
     ngOnInit(): Promise<void>;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
+    /**
+     * Triggers sending of initial message and attachments.
+     * Called from setter or ngAfterViewInit when conditions are met.
+     */
+    private triggerInitialSend;
     ngOnDestroy(): void;
     /**
      * Focus the message input textarea
@@ -110,6 +141,14 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
      */
     private unregisterAllCallbacks;
     get canSend(): boolean;
+    /**
+     * Handle attachments changed from the input box
+     */
+    onAttachmentsChanged(attachments: PendingAttachment[]): void;
+    /**
+     * Handle attachment errors from the input box
+     */
+    onAttachmentError(error: string): void;
     /**
      * Handle text submitted from the input box
      */
@@ -117,7 +156,8 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
     onSend(): Promise<void>;
     /**
      * Send a message with custom text WITHOUT modifying the visible messageText input
-     * Used for suggested responses - sends message silently without affecting user's current input
+     * Used for suggested responses and initial messages from empty state.
+     * Also saves any pending attachments.
      */
     sendMessageWithText(text: string): Promise<void>;
     /**
@@ -208,6 +248,8 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
     protected updateConversationDetail(convoDetail: ConversationDetailEntity, message: string, status: 'In-Progress' | 'Complete' | 'Error', result?: ExecuteAgentResult): Promise<void>;
     /**
      * Load previous payload for an agent from its most recent OUTPUT artifact.
+     * Searches backwards through all messages from this agent until an artifact is found.
+     * This ensures payload continuity even after clarifying exchanges without artifacts.
      * Checks both user-visible and system artifacts to support agents like Agent Manager.
      */
     private loadPreviousPayloadForAgent;
@@ -238,6 +280,19 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
      * @param targetArtifactVersionId Optional specific artifact version to use as payload (from intent check)
      */
     private continueWithAgent;
+    /**
+     * Executes agent continuation with all context already gathered.
+     * This is the shared execution logic used by both continueWithAgent and direct Sage config path.
+     *
+     * @param userMessage The user's message entity
+     * @param agentId The agent ID to invoke
+     * @param agentName The agent's display name
+     * @param conversationId The conversation ID
+     * @param previousPayload Optional payload from previous artifact
+     * @param previousArtifactInfo Optional artifact info (id, versionId, versionNumber)
+     * @param configurationId Optional configuration preset ID to use
+     */
+    private executeAgentContinuation;
     /**
      * Name the conversation based on the first message using GraphQL AI client
      *
@@ -255,6 +310,6 @@ export declare class MessageInputComponent implements OnInit, OnDestroy, OnChang
      */
     private cleanupCompletionTimestamp;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "mj-message-input", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "conversationName": { "alias": "conversationName"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "parentMessageId": { "alias": "parentMessageId"; "required": false; }; "initialMessage": { "alias": "initialMessage"; "required": false; }; "artifactsByDetailId": { "alias": "artifactsByDetailId"; "required": false; }; "systemArtifactsByDetailId": { "alias": "systemArtifactsByDetailId"; "required": false; }; "agentRunsByDetailId": { "alias": "agentRunsByDetailId"; "required": false; }; "conversationHistory": { "alias": "conversationHistory"; "required": false; }; "inProgressMessageIds": { "alias": "inProgressMessageIds"; "required": false; }; }, { "messageSent": "messageSent"; "agentResponse": "agentResponse"; "agentRunDetected": "agentRunDetected"; "agentRunUpdate": "agentRunUpdate"; "messageComplete": "messageComplete"; "artifactCreated": "artifactCreated"; "conversationRenamed": "conversationRenamed"; "intentCheckStarted": "intentCheckStarted"; "intentCheckCompleted": "intentCheckCompleted"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "mj-message-input", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "conversationName": { "alias": "conversationName"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "parentMessageId": { "alias": "parentMessageId"; "required": false; }; "enableAttachments": { "alias": "enableAttachments"; "required": false; }; "maxAttachments": { "alias": "maxAttachments"; "required": false; }; "maxAttachmentSizeBytes": { "alias": "maxAttachmentSizeBytes"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "artifactsByDetailId": { "alias": "artifactsByDetailId"; "required": false; }; "systemArtifactsByDetailId": { "alias": "systemArtifactsByDetailId"; "required": false; }; "agentRunsByDetailId": { "alias": "agentRunsByDetailId"; "required": false; }; "emptyStateMode": { "alias": "emptyStateMode"; "required": false; }; "initialMessage": { "alias": "initialMessage"; "required": false; }; "initialAttachments": { "alias": "initialAttachments"; "required": false; }; "conversationHistory": { "alias": "conversationHistory"; "required": false; }; "inProgressMessageIds": { "alias": "inProgressMessageIds"; "required": false; }; }, { "messageSent": "messageSent"; "agentResponse": "agentResponse"; "agentRunDetected": "agentRunDetected"; "agentRunUpdate": "agentRunUpdate"; "messageComplete": "messageComplete"; "artifactCreated": "artifactCreated"; "conversationRenamed": "conversationRenamed"; "intentCheckStarted": "intentCheckStarted"; "intentCheckCompleted": "intentCheckCompleted"; "emptyStateSubmit": "emptyStateSubmit"; "uploadStateChanged": "uploadStateChanged"; }, never, never, false, never>;
 }
 //# sourceMappingURL=message-input.component.d.ts.map