@memberjunction/ng-forms 0.0.1 → 5.12.0

package/dist/lib/dynamic-form/dynamic-form.component.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @fileoverview Dynamic Form Component
+ *
+ * Top-level container that renders a complete form from an `AgentResponseForm`
+ * schema definition. Automatically builds a reactive `FormGroup`, handles
+ * validation, and emits structured response data on submission.
+ *
+ * Supports two rendering modes:
+ * - **Simple choice mode**: Single buttongroup/radio question with no title —
+ *   renders as standalone buttons for quick one-click responses.
+ * - **Full form mode**: Title bar, description, multiple fields, and an action
+ *   footer with either a Submit button or choice buttons.
+ *
+ * @example Basic usage
+ * ```html
+ * <mj-dynamic-form
+ *   [FormDefinition]="responseForm"
+ *   [Disabled]="isSaving"
+ *   (FormSubmitted)="onFormSubmitted($event)">
+ * </mj-dynamic-form>
+ * ```
+ *
+ * @example With visibility control
+ * ```html
+ * <mj-dynamic-form
+ *   [FormDefinition]="responseForm"
+ *   [Visible]="isLastMessage && isOwner"
+ *   (FormSubmitted)="onFormSubmitted($event)">
+ * </mj-dynamic-form>
+ * ```
+ *
+ * @module @memberjunction/ng-forms
+ */
+import { EventEmitter, OnInit } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { AgentResponseForm, FormQuestion, FormOption } from '@memberjunction/ai-core-plus';
+import * as i0 from "@angular/core";
+export declare class DynamicFormComponent implements OnInit {
+    /**
+     * The form schema that drives rendering.
+     * Contains title, description, questions array, and optional submit label.
+     */
+    FormDefinition: AgentResponseForm;
+    /**
+     * Whether the form is disabled (e.g. while saving).
+     * Disables all inputs and buttons.
+     */
+    Disabled: boolean;
+    /**
+     * Controls overall visibility. When `false`, the component renders nothing.
+     * Defaults to `true` so the form is always shown unless explicitly hidden.
+     */
+    Visible: boolean;
+    /**
+     * Emitted when the user submits the form. The payload is a key-value map
+     * where keys are question IDs and values are the user's responses.
+     */
+    FormSubmitted: EventEmitter<Record<string, string | number | boolean | Date>>;
+    /** The reactive form group built from the form definition */
+    FormGroup: FormGroup;
+    /** Whether a submission is in progress */
+    IsSubmitting: boolean;
+    private cdr;
+    ngOnInit(): void;
+    /**
+     * Whether this form renders as a simple choice (single buttongroup/radio, no title).
+     */
+    get IsSimpleChoice(): boolean;
+    /**
+     * The choice question that should render in the footer (if present).
+     * When a form has a buttongroup/radio question, those buttons replace
+     * the standard Submit button in the footer.
+     */
+    get FooterChoiceQuestion(): FormQuestion | null;
+    /**
+     * Questions rendered in the main form area (excludes footer choice question).
+     */
+    get MainQuestions(): FormQuestion[];
+    /**
+     * Whether to show the standard Submit button (true when no footer choice question).
+     */
+    get ShowSubmitButton(): boolean;
+    /**
+     * Whether the form should be visible (has questions and Visible is true).
+     */
+    get IsVisible(): boolean;
+    /**
+     * Text for the submit button. Falls back to "Submit" if not specified.
+     */
+    get SubmitLabel(): string;
+    /** Get the FormControl for a specific question by ID */
+    GetControl(questionId: string): FormControl;
+    /** Handle simple choice button click (single-question forms) */
+    OnSimpleChoiceClick(value: string | number | boolean): void;
+    /** Whether a given option value is the currently selected simple choice */
+    IsSimpleChoiceSelected(value: string | number | boolean): boolean;
+    /** Handle footer choice button click — selects the option and emits the form data */
+    OnFooterChoiceClick(value: string | number | boolean): void;
+    /** Whether a given option value is the currently selected footer choice */
+    IsFooterChoiceSelected(value: string | number | boolean): boolean;
+    /** Handle full form submission */
+    OnSubmit(): void;
+    /** Get options for a choice question */
+    GetOptions(question: FormQuestion): FormOption[];
+    /** Check if an option has an icon */
+    HasIcon(option: FormOption): boolean;
+    /** Track-by function for questions */
+    TrackByQuestionId(_index: number, question: FormQuestion): string;
+    /** Track-by function for options */
+    TrackByValue(_index: number, option: FormOption): string | number | boolean;
+    private isChoiceQuestion;
+    private buildFormGroup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "mj-dynamic-form", never, { "FormDefinition": { "alias": "FormDefinition"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; }, { "FormSubmitted": "FormSubmitted"; }, never, never, false, never>;
+}
+//# sourceMappingURL=dynamic-form.component.d.ts.map

package/dist/lib/dynamic-form/dynamic-form.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dynamic-form/dynamic-form.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAA4B,YAAY,EAAE,MAAM,EAA6B,MAAM,eAAe,CAAC;AAC1G,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;;AAE3F,qBAMa,oBAAqB,YAAW,MAAM;IAC/C;;;OAGG;IACM,cAAc,EAAG,iBAAiB,CAAC;IAE5C;;;OAGG;IACM,QAAQ,UAAS;IAE1B;;;OAGG;IACM,OAAO,UAAQ;IAExB;;;OAGG;IACO,aAAa,iEAAwE;IAE/F,6DAA6D;IACtD,SAAS,EAAG,SAAS,CAAC;IAE7B,0CAA0C;IACnC,YAAY,UAAS;IAE5B,OAAO,CAAC,GAAG,CAA6B;IAExC,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,IAAW,cAAc,IAAI,OAAO,CAOnC;IAED;;;;OAIG;IACH,IAAW,oBAAoB,IAAI,YAAY,GAAG,IAAI,CAIrD;IAED;;OAEG;IACH,IAAW,aAAa,IAAI,YAAY,EAAE,CAKzC;IAED;;OAEG;IACH,IAAW,gBAAgB,IAAI,OAAO,CAErC;IAED;;OAEG;IACH,IAAW,SAAS,IAAI,OAAO,CAM9B;IAED;;OAEG;IACH,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,wDAAwD;IACjD,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW;IAIlD,gEAAgE;IACzD,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IASlE,2EAA2E;IACpE,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO;IAOxE,qFAAqF;IAC9E,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IAsBlE,2EAA2E;IACpE,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO;IAMxE,kCAAkC;IAC3B,QAAQ,IAAI,IAAI;IAqBvB,wCAAwC;IACjC,UAAU,CAAC,QAAQ,EAAE,YAAY,GAAG,UAAU,EAAE;IAOvD,qCAAqC;IAC9B,OAAO,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAI3C,sCAAsC;IAC/B,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM;IAIxE,oCAAoC;IAC7B,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAIlF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;yCAtMb,oBAAoB;2CAApB,oBAAoB;CA2OhC"}

package/dist/lib/dynamic-form/dynamic-form.component.js

@@ -0,0 +1,258 @@
+/**
+ * @fileoverview Dynamic Form Component
+ *
+ * Top-level container that renders a complete form from an `AgentResponseForm`
+ * schema definition. Automatically builds a reactive `FormGroup`, handles
+ * validation, and emits structured response data on submission.
+ *
+ * Supports two rendering modes:
+ * - **Simple choice mode**: Single buttongroup/radio question with no title —
+ *   renders as standalone buttons for quick one-click responses.
+ * - **Full form mode**: Title bar, description, multiple fields, and an action
+ *   footer with either a Submit button or choice buttons.
+ *
+ * @example Basic usage
+ * ```html
+ * <mj-dynamic-form
+ *   [FormDefinition]="responseForm"
+ *   [Disabled]="isSaving"
+ *   (FormSubmitted)="onFormSubmitted($event)">
+ * </mj-dynamic-form>
+ * ```
+ *
+ * @example With visibility control
+ * ```html
+ * <mj-dynamic-form
+ *   [FormDefinition]="responseForm"
+ *   [Visible]="isLastMessage && isOwner"
+ *   (FormSubmitted)="onFormSubmitted($event)">
+ * </mj-dynamic-form>
+ * ```
+ *
+ * @module @memberjunction/ng-forms
+ */
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "../dynamic-form-field/dynamic-form-field.component";
+export class DynamicFormComponent {
+    /**
+     * The form schema that drives rendering.
+     * Contains title, description, questions array, and optional submit label.
+     */
+    FormDefinition;
+    /**
+     * Whether the form is disabled (e.g. while saving).
+     * Disables all inputs and buttons.
+     */
+    Disabled = false;
+    /**
+     * Controls overall visibility. When `false`, the component renders nothing.
+     * Defaults to `true` so the form is always shown unless explicitly hidden.
+     */
+    Visible = true;
+    /**
+     * Emitted when the user submits the form. The payload is a key-value map
+     * where keys are question IDs and values are the user's responses.
+     */
+    FormSubmitted = new EventEmitter();
+    /** The reactive form group built from the form definition */
+    FormGroup;
+    /** Whether a submission is in progress */
+    IsSubmitting = false;
+    cdr = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.buildFormGroup();
+    }
+    /**
+     * Whether this form renders as a simple choice (single buttongroup/radio, no title).
+     */
+    get IsSimpleChoice() {
+        if (!this.FormDefinition)
+            return false;
+        return (this.FormDefinition.questions.length === 1 &&
+            !this.FormDefinition.title &&
+            this.isChoiceQuestion(this.FormDefinition.questions[0]));
+    }
+    /**
+     * The choice question that should render in the footer (if present).
+     * When a form has a buttongroup/radio question, those buttons replace
+     * the standard Submit button in the footer.
+     */
+    get FooterChoiceQuestion() {
+        if (!this.FormDefinition || this.IsSimpleChoice)
+            return null;
+        const choiceQuestions = this.FormDefinition.questions.filter(q => this.isChoiceQuestion(q));
+        return choiceQuestions.length > 0 ? choiceQuestions[choiceQuestions.length - 1] : null;
+    }
+    /**
+     * Questions rendered in the main form area (excludes footer choice question).
+     */
+    get MainQuestions() {
+        if (!this.FormDefinition)
+            return [];
+        const footerChoice = this.FooterChoiceQuestion;
+        if (!footerChoice)
+            return this.FormDefinition.questions;
+        return this.FormDefinition.questions.filter(q => q.id !== footerChoice.id);
+    }
+    /**
+     * Whether to show the standard Submit button (true when no footer choice question).
+     */
+    get ShowSubmitButton() {
+        return !this.FooterChoiceQuestion;
+    }
+    /**
+     * Whether the form should be visible (has questions and Visible is true).
+     */
+    get IsVisible() {
+        return (this.Visible &&
+            !!this.FormDefinition &&
+            this.FormDefinition.questions.length > 0);
+    }
+    /**
+     * Text for the submit button. Falls back to "Submit" if not specified.
+     */
+    get SubmitLabel() {
+        return this.FormDefinition?.submitLabel || 'Submit';
+    }
+    /** Get the FormControl for a specific question by ID */
+    GetControl(questionId) {
+        return this.FormGroup.get(questionId);
+    }
+    /** Handle simple choice button click (single-question forms) */
+    OnSimpleChoiceClick(value) {
+        if (!this.Disabled) {
+            const question = this.FormDefinition.questions[0];
+            // Update the FormControl so external readers (e.g. collectFormData) can access the value
+            this.FormGroup.get(question.id)?.setValue(value);
+            this.FormSubmitted.emit({ [question.id]: value });
+        }
+    }
+    /** Whether a given option value is the currently selected simple choice */
+    IsSimpleChoiceSelected(value) {
+        if (!this.IsSimpleChoice)
+            return false;
+        const question = this.FormDefinition.questions[0];
+        const control = this.FormGroup.get(question.id);
+        return control?.value === value;
+    }
+    /** Handle footer choice button click — selects the option and emits the form data */
+    OnFooterChoiceClick(value) {
+        if (!this.Disabled && this.FooterChoiceQuestion) {
+            const mainControlKeys = this.MainQuestions.map(q => q.id);
+            let hasInvalidFields = false;
+            for (const key of mainControlKeys) {
+                const control = this.FormGroup.get(key);
+                if (control?.invalid) {
+                    control.markAsTouched();
+                    hasInvalidFields = true;
+                }
+            }
+            if (hasInvalidFields)
+                return;
+            // Update the FormControl so external readers (e.g. collectFormData) can access the value
+            this.FormGroup.get(this.FooterChoiceQuestion.id)?.setValue(value);
+            const formData = { ...this.FormGroup.value };
+            this.FormSubmitted.emit(formData);
+        }
+    }
+    /** Whether a given option value is the currently selected footer choice */
+    IsFooterChoiceSelected(value) {
+        if (!this.FooterChoiceQuestion)
+            return false;
+        const control = this.FormGroup.get(this.FooterChoiceQuestion.id);
+        return control?.value === value;
+    }
+    /** Handle full form submission */
+    OnSubmit() {
+        if (this.FormGroup.invalid) {
+            Object.keys(this.FormGroup.controls).forEach(key => {
+                this.FormGroup.controls[key].markAsTouched();
+            });
+            return;
+        }
+        if (!this.Disabled && !this.IsSubmitting) {
+            this.IsSubmitting = true;
+            this.FormSubmitted.emit(this.FormGroup.value);
+            // Reset submitting state after a short delay — the parent container
+            // is responsible for hiding the form or handling the response
+            setTimeout(() => {
+                this.IsSubmitting = false;
+                this.cdr.detectChanges();
+            }, 1000);
+        }
+    }
+    /** Get options for a choice question */
+    GetOptions(question) {
+        if (typeof question.type === 'object' && 'options' in question.type) {
+            return question.type.options;
+        }
+        return [];
+    }
+    /** Check if an option has an icon */
+    HasIcon(option) {
+        return !!option?.icon;
+    }
+    /** Track-by function for questions */
+    TrackByQuestionId(_index, question) {
+        return question.id;
+    }
+    /** Track-by function for options */
+    TrackByValue(_index, option) {
+        return option.value;
+    }
+    isChoiceQuestion(question) {
+        const type = typeof question.type === 'string' ? question.type : question.type.type;
+        return ['buttongroup', 'radio'].includes(type);
+    }
+    buildFormGroup() {
+        const controls = {};
+        for (const question of this.FormDefinition.questions) {
+            const validators = [];
+            if (question.required) {
+                validators.push(Validators.required);
+            }
+            const questionType = typeof question.type === 'string' ? question.type : question.type.type;
+            if (questionType === 'email') {
+                validators.push(Validators.email);
+            }
+            if (['number', 'currency'].includes(questionType) && typeof question.type === 'object') {
+                if ('min' in question.type && question.type.min != null) {
+                    validators.push(Validators.min(question.type.min));
+                }
+                if ('max' in question.type && question.type.max != null) {
+                    validators.push(Validators.max(question.type.max));
+                }
+            }
+            let initialValue = question.defaultValue;
+            if (!initialValue) {
+                if (questionType === 'checkbox' && typeof question.type === 'object' && 'multiple' in question.type && question.type.multiple) {
+                    initialValue = [];
+                }
+                else {
+                    initialValue = null;
+                }
+            }
+            controls[question.id] = new FormControl(initialValue, validators);
+        }
+        this.FormGroup = new FormGroup(controls);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DynamicFormComponent, isStandalone: false, selector: "mj-dynamic-form", inputs: { FormDefinition: "FormDefinition", Disabled: "Disabled", Visible: "Visible" }, outputs: { FormSubmitted: "FormSubmitted" }, ngImport: i0, template: "@if (IsVisible) {\n  <div class=\"dynamic-form\">\n    <!-- Simple Choice Mode (single question, no title, buttongroup/radio) -->\n    @if (IsSimpleChoice) {\n      <div class=\"simple-choice-buttons\">\n        @for (option of GetOptions(FormDefinition.questions[0]); track TrackByValue($index, option)) {\n          <button\n            kendoButton\n            [themeColor]=\"IsSimpleChoiceSelected(option.value) ? 'primary' : 'base'\"\n            [disabled]=\"Disabled\"\n            (click)=\"OnSimpleChoiceClick(option.value)\"\n            class=\"choice-button\"\n            [class.selected]=\"IsSimpleChoiceSelected(option.value)\"\n            >\n            <span>\n              @if (IsSimpleChoiceSelected(option.value)) {\n                <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n              } @else if (HasIcon(option)) {\n                <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n              }\n              {{ option.label }}\n            </span>\n          </button>\n        }\n      </div>\n    }\n    <!-- Full Form Mode (complex forms) -->\n    @if (!IsSimpleChoice) {\n      <form [formGroup]=\"FormGroup\" (ngSubmit)=\"OnSubmit()\" class=\"response-form\">\n        <!-- Form Title -->\n        @if (FormDefinition.title) {\n          <h3 class=\"form-title\">{{ FormDefinition.title }}</h3>\n        }\n        <!-- Form Description -->\n        @if (FormDefinition.description) {\n          <p class=\"form-description\">{{ FormDefinition.description }}</p>\n        }\n        <!-- Questions (excludes footer choice question) -->\n        @if (MainQuestions.length > 0) {\n          <div class=\"form-questions\">\n            @for (question of MainQuestions; track TrackByQuestionId($index, question)) {\n              <mj-dynamic-form-field\n                [Question]=\"question\"\n                [Control]=\"GetControl(question.id)\"\n                [formControlName]=\"question.id\"\n              ></mj-dynamic-form-field>\n            }\n          </div>\n        }\n        <!-- Footer Actions -->\n        <div class=\"form-actions\">\n          <!-- Footer Choice Buttons (replaces Submit when present) -->\n          @if (FooterChoiceQuestion) {\n            @for (option of GetOptions(FooterChoiceQuestion); track TrackByValue($index, option)) {\n              <button\n                kendoButton\n                type=\"button\"\n                [themeColor]=\"IsFooterChoiceSelected(option.value) ? 'primary' : 'base'\"\n                [disabled]=\"Disabled\"\n                (click)=\"OnFooterChoiceClick(option.value)\"\n                class=\"footer-choice-button\"\n                [class.selected]=\"IsFooterChoiceSelected(option.value)\"\n                >\n                <span>\n                  @if (IsFooterChoiceSelected(option.value)) {\n                    <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  } @else if (HasIcon(option)) {\n                    <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n                  }\n                  {{ option.label }}\n                </span>\n              </button>\n            }\n          }\n          <!-- Standard Submit Button (when no footer choice) -->\n          @if (ShowSubmitButton) {\n            <button\n              kendoButton\n              type=\"submit\"\n              [themeColor]=\"'primary'\"\n              [disabled]=\"Disabled || IsSubmitting || FormGroup.invalid\"\n              class=\"submit-button\"\n              >\n              @if (!IsSubmitting) {\n                <span>\n                  <i class=\"fa fa-check\" aria-hidden=\"true\"></i>\n                  {{ SubmitLabel }}\n                </span>\n              }\n              @if (IsSubmitting) {\n                <span>\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Submitting...\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </form>\n    }\n  </div>\n}\n", styles: [".dynamic-form {\n  margin-top: 16px;\n  display: block;\n  width: fit-content;\n  max-width: 600px;\n}\n\n/* Simple Choice Mode */\n.simple-choice-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.choice-button {\n  padding: 8px 16px;\n  font-size: 14px;\n}\n\n.choice-button i,\n.choice-button i.fa-solid {\n  margin-right: 6px;\n}\n\n.choice-button.selected {\n  box-shadow: 0 0 0 2px var(--mj-brand-primary);\n}\n\n/* Full Form Mode */\n.response-form {\n  background: color-mix(in srgb, var(--mj-brand-primary) 3%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  padding: 0;\n  margin-top: 12px;\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  overflow: hidden;\n}\n\n.form-title {\n  margin: 0;\n  padding: 12px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-title::before {\n  content: \"\\f044\";\n  font-family: \"Font Awesome 6 Free\";\n  font-weight: 900;\n  font-size: 13px;\n  opacity: 0.95;\n}\n\n.form-description {\n  margin: 0;\n  padding: 12px 16px;\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  font-style: italic;\n}\n\n.form-questions {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: flex-start;\n  padding: 12px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.submit-button {\n  min-width: 120px;\n}\n\n/* Footer choice buttons - horizontal on desktop with text wrapping */\n.footer-choice-button {\n  min-width: 120px;\n  max-width: 100%;\n  white-space: normal;\n  text-align: left;\n  line-height: 1.3;\n  padding: 10px 16px;\n}\n\n.footer-choice-button i.fa,\n.footer-choice-button i.fa-solid {\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n\n.footer-choice-button.selected {\n  box-shadow: 0 0 0 2px var(--mj-brand-primary);\n}\n\n.submit-button i.fa {\n  margin-right: 6px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dynamic-form {\n    margin-top: 12px;\n  }\n\n  .response-form {\n    border-radius: 10px;\n  }\n\n  .form-questions {\n    padding: 12px;\n  }\n\n  .form-actions {\n    padding: 10px 12px;\n  }\n\n  .simple-choice-buttons {\n    gap: 8px;\n  }\n\n  .choice-button {\n    padding: 10px 14px;\n    font-size: 13px;\n  }\n}\n\n@media (max-width: 480px) {\n  .dynamic-form {\n    margin-top: 10px;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .response-form {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n\n  .form-title {\n    font-size: 13px;\n    padding: 10px 12px;\n  }\n\n  .form-description {\n    font-size: 12px;\n    padding: 10px 12px;\n  }\n\n  .form-questions {\n    padding: 10px;\n  }\n\n  .form-actions {\n    padding: 8px 10px;\n    flex-direction: column;\n  }\n\n  .choice-button {\n    width: 100%;\n    min-height: 44px;\n    padding: 12px 16px;\n    font-size: 14px;\n  }\n\n  .footer-choice-button {\n    width: 100%;\n    min-height: 44px;\n    font-size: 14px;\n  }\n\n  .submit-button {\n    width: 100%;\n    min-height: 44px;\n    font-size: 13px;\n  }\n}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.DynamicFormFieldComponent, selector: "mj-dynamic-form-field", inputs: ["Question", "Control"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'mj-dynamic-form', template: "@if (IsVisible) {\n  <div class=\"dynamic-form\">\n    <!-- Simple Choice Mode (single question, no title, buttongroup/radio) -->\n    @if (IsSimpleChoice) {\n      <div class=\"simple-choice-buttons\">\n        @for (option of GetOptions(FormDefinition.questions[0]); track TrackByValue($index, option)) {\n          <button\n            kendoButton\n            [themeColor]=\"IsSimpleChoiceSelected(option.value) ? 'primary' : 'base'\"\n            [disabled]=\"Disabled\"\n            (click)=\"OnSimpleChoiceClick(option.value)\"\n            class=\"choice-button\"\n            [class.selected]=\"IsSimpleChoiceSelected(option.value)\"\n            >\n            <span>\n              @if (IsSimpleChoiceSelected(option.value)) {\n                <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n              } @else if (HasIcon(option)) {\n                <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n              }\n              {{ option.label }}\n            </span>\n          </button>\n        }\n      </div>\n    }\n    <!-- Full Form Mode (complex forms) -->\n    @if (!IsSimpleChoice) {\n      <form [formGroup]=\"FormGroup\" (ngSubmit)=\"OnSubmit()\" class=\"response-form\">\n        <!-- Form Title -->\n        @if (FormDefinition.title) {\n          <h3 class=\"form-title\">{{ FormDefinition.title }}</h3>\n        }\n        <!-- Form Description -->\n        @if (FormDefinition.description) {\n          <p class=\"form-description\">{{ FormDefinition.description }}</p>\n        }\n        <!-- Questions (excludes footer choice question) -->\n        @if (MainQuestions.length > 0) {\n          <div class=\"form-questions\">\n            @for (question of MainQuestions; track TrackByQuestionId($index, question)) {\n              <mj-dynamic-form-field\n                [Question]=\"question\"\n                [Control]=\"GetControl(question.id)\"\n                [formControlName]=\"question.id\"\n              ></mj-dynamic-form-field>\n            }\n          </div>\n        }\n        <!-- Footer Actions -->\n        <div class=\"form-actions\">\n          <!-- Footer Choice Buttons (replaces Submit when present) -->\n          @if (FooterChoiceQuestion) {\n            @for (option of GetOptions(FooterChoiceQuestion); track TrackByValue($index, option)) {\n              <button\n                kendoButton\n                type=\"button\"\n                [themeColor]=\"IsFooterChoiceSelected(option.value) ? 'primary' : 'base'\"\n                [disabled]=\"Disabled\"\n                (click)=\"OnFooterChoiceClick(option.value)\"\n                class=\"footer-choice-button\"\n                [class.selected]=\"IsFooterChoiceSelected(option.value)\"\n                >\n                <span>\n                  @if (IsFooterChoiceSelected(option.value)) {\n                    <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  } @else if (HasIcon(option)) {\n                    <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n                  }\n                  {{ option.label }}\n                </span>\n              </button>\n            }\n          }\n          <!-- Standard Submit Button (when no footer choice) -->\n          @if (ShowSubmitButton) {\n            <button\n              kendoButton\n              type=\"submit\"\n              [themeColor]=\"'primary'\"\n              [disabled]=\"Disabled || IsSubmitting || FormGroup.invalid\"\n              class=\"submit-button\"\n              >\n              @if (!IsSubmitting) {\n                <span>\n                  <i class=\"fa fa-check\" aria-hidden=\"true\"></i>\n                  {{ SubmitLabel }}\n                </span>\n              }\n              @if (IsSubmitting) {\n                <span>\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Submitting...\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </form>\n    }\n  </div>\n}\n", styles: [".dynamic-form {\n  margin-top: 16px;\n  display: block;\n  width: fit-content;\n  max-width: 600px;\n}\n\n/* Simple Choice Mode */\n.simple-choice-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.choice-button {\n  padding: 8px 16px;\n  font-size: 14px;\n}\n\n.choice-button i,\n.choice-button i.fa-solid {\n  margin-right: 6px;\n}\n\n.choice-button.selected {\n  box-shadow: 0 0 0 2px var(--mj-brand-primary);\n}\n\n/* Full Form Mode */\n.response-form {\n  background: color-mix(in srgb, var(--mj-brand-primary) 3%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  padding: 0;\n  margin-top: 12px;\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  overflow: hidden;\n}\n\n.form-title {\n  margin: 0;\n  padding: 12px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-title::before {\n  content: \"\\f044\";\n  font-family: \"Font Awesome 6 Free\";\n  font-weight: 900;\n  font-size: 13px;\n  opacity: 0.95;\n}\n\n.form-description {\n  margin: 0;\n  padding: 12px 16px;\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  font-style: italic;\n}\n\n.form-questions {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: flex-start;\n  padding: 12px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.submit-button {\n  min-width: 120px;\n}\n\n/* Footer choice buttons - horizontal on desktop with text wrapping */\n.footer-choice-button {\n  min-width: 120px;\n  max-width: 100%;\n  white-space: normal;\n  text-align: left;\n  line-height: 1.3;\n  padding: 10px 16px;\n}\n\n.footer-choice-button i.fa,\n.footer-choice-button i.fa-solid {\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n\n.footer-choice-button.selected {\n  box-shadow: 0 0 0 2px var(--mj-brand-primary);\n}\n\n.submit-button i.fa {\n  margin-right: 6px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dynamic-form {\n    margin-top: 12px;\n  }\n\n  .response-form {\n    border-radius: 10px;\n  }\n\n  .form-questions {\n    padding: 12px;\n  }\n\n  .form-actions {\n    padding: 10px 12px;\n  }\n\n  .simple-choice-buttons {\n    gap: 8px;\n  }\n\n  .choice-button {\n    padding: 10px 14px;\n    font-size: 13px;\n  }\n}\n\n@media (max-width: 480px) {\n  .dynamic-form {\n    margin-top: 10px;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .response-form {\n    border-radius: 8px;\n    border-width: 1.5px;\n  }\n\n  .form-title {\n    font-size: 13px;\n    padding: 10px 12px;\n  }\n\n  .form-description {\n    font-size: 12px;\n    padding: 10px 12px;\n  }\n\n  .form-questions {\n    padding: 10px;\n  }\n\n  .form-actions {\n    padding: 8px 10px;\n    flex-direction: column;\n  }\n\n  .choice-button {\n    width: 100%;\n    min-height: 44px;\n    padding: 12px 16px;\n    font-size: 14px;\n  }\n\n  .footer-choice-button {\n    width: 100%;\n    min-height: 44px;\n    font-size: 14px;\n  }\n\n  .submit-button {\n    width: 100%;\n    min-height: 44px;\n    font-size: 13px;\n  }\n}\n"] }]
+        }], propDecorators: { FormDefinition: [{
+                type: Input
+            }], Disabled: [{
+                type: Input
+            }], Visible: [{
+                type: Input
+            }], FormSubmitted: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=dynamic-form.component.js.map

package/dist/lib/dynamic-form/dynamic-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form.component.js","sourceRoot":"","sources":["../../../src/lib/dynamic-form/dynamic-form.component.ts","../../../src/lib/dynamic-form/dynamic-form.component.html"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Dynamic Form Component\n *\n * Top-level container that renders a complete form from an `AgentResponseForm`\n * schema definition. Automatically builds a reactive `FormGroup`, handles\n * validation, and emits structured response data on submission.\n *\n * Supports two rendering modes:\n * - **Simple choice mode**: Single buttongroup/radio question with no title —\n *   renders as standalone buttons for quick one-click responses.\n * - **Full form mode**: Title bar, description, multiple fields, and an action\n *   footer with either a Submit button or choice buttons.\n *\n * @example Basic usage\n * ```html\n * <mj-dynamic-form\n *   [FormDefinition]=\"responseForm\"\n *   [Disabled]=\"isSaving\"\n *   (FormSubmitted)=\"onFormSubmitted($event)\">\n * </mj-dynamic-form>\n * ```\n *\n * @example With visibility control\n * ```html\n * <mj-dynamic-form\n *   [FormDefinition]=\"responseForm\"\n *   [Visible]=\"isLastMessage && isOwner\"\n *   (FormSubmitted)=\"onFormSubmitted($event)\">\n * </mj-dynamic-form>\n * ```\n *\n * @module @memberjunction/ng-forms\n */\n\nimport { Component, Input, Output, EventEmitter, OnInit, ChangeDetectorRef, inject } from '@angular/core';\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\nimport { AgentResponseForm, FormQuestion, FormOption } from '@memberjunction/ai-core-plus';\n\n@Component({\n    standalone: false,\n    selector: 'mj-dynamic-form',\n    templateUrl: './dynamic-form.component.html',\n    styleUrls: ['./dynamic-form.component.css']\n})\nexport class DynamicFormComponent implements OnInit {\n    /**\n     * The form schema that drives rendering.\n     * Contains title, description, questions array, and optional submit label.\n     */\n    @Input() FormDefinition!: AgentResponseForm;\n\n    /**\n     * Whether the form is disabled (e.g. while saving).\n     * Disables all inputs and buttons.\n     */\n    @Input() Disabled = false;\n\n    /**\n     * Controls overall visibility. When `false`, the component renders nothing.\n     * Defaults to `true` so the form is always shown unless explicitly hidden.\n     */\n    @Input() Visible = true;\n\n    /**\n     * Emitted when the user submits the form. The payload is a key-value map\n     * where keys are question IDs and values are the user's responses.\n     */\n    @Output() FormSubmitted = new EventEmitter<Record<string, string | number | boolean | Date>>();\n\n    /** The reactive form group built from the form definition */\n    public FormGroup!: FormGroup;\n\n    /** Whether a submission is in progress */\n    public IsSubmitting = false;\n\n    private cdr = inject(ChangeDetectorRef);\n\n    ngOnInit(): void {\n        this.buildFormGroup();\n    }\n\n    /**\n     * Whether this form renders as a simple choice (single buttongroup/radio, no title).\n     */\n    public get IsSimpleChoice(): boolean {\n        if (!this.FormDefinition) return false;\n        return (\n            this.FormDefinition.questions.length === 1 &&\n            !this.FormDefinition.title &&\n            this.isChoiceQuestion(this.FormDefinition.questions[0])\n        );\n    }\n\n    /**\n     * The choice question that should render in the footer (if present).\n     * When a form has a buttongroup/radio question, those buttons replace\n     * the standard Submit button in the footer.\n     */\n    public get FooterChoiceQuestion(): FormQuestion | null {\n        if (!this.FormDefinition || this.IsSimpleChoice) return null;\n        const choiceQuestions = this.FormDefinition.questions.filter(q => this.isChoiceQuestion(q));\n        return choiceQuestions.length > 0 ? choiceQuestions[choiceQuestions.length - 1] : null;\n    }\n\n    /**\n     * Questions rendered in the main form area (excludes footer choice question).\n     */\n    public get MainQuestions(): FormQuestion[] {\n        if (!this.FormDefinition) return [];\n        const footerChoice = this.FooterChoiceQuestion;\n        if (!footerChoice) return this.FormDefinition.questions;\n        return this.FormDefinition.questions.filter(q => q.id !== footerChoice.id);\n    }\n\n    /**\n     * Whether to show the standard Submit button (true when no footer choice question).\n     */\n    public get ShowSubmitButton(): boolean {\n        return !this.FooterChoiceQuestion;\n    }\n\n    /**\n     * Whether the form should be visible (has questions and Visible is true).\n     */\n    public get IsVisible(): boolean {\n        return (\n            this.Visible &&\n            !!this.FormDefinition &&\n            this.FormDefinition.questions.length > 0\n        );\n    }\n\n    /**\n     * Text for the submit button. Falls back to \"Submit\" if not specified.\n     */\n    public get SubmitLabel(): string {\n        return this.FormDefinition?.submitLabel || 'Submit';\n    }\n\n    /** Get the FormControl for a specific question by ID */\n    public GetControl(questionId: string): FormControl {\n        return this.FormGroup.get(questionId) as FormControl;\n    }\n\n    /** Handle simple choice button click (single-question forms) */\n    public OnSimpleChoiceClick(value: string | number | boolean): void {\n        if (!this.Disabled) {\n            const question = this.FormDefinition.questions[0];\n            // Update the FormControl so external readers (e.g. collectFormData) can access the value\n            this.FormGroup.get(question.id)?.setValue(value);\n            this.FormSubmitted.emit({ [question.id]: value });\n        }\n    }\n\n    /** Whether a given option value is the currently selected simple choice */\n    public IsSimpleChoiceSelected(value: string | number | boolean): boolean {\n        if (!this.IsSimpleChoice) return false;\n        const question = this.FormDefinition.questions[0];\n        const control = this.FormGroup.get(question.id);\n        return control?.value === value;\n    }\n\n    /** Handle footer choice button click — selects the option and emits the form data */\n    public OnFooterChoiceClick(value: string | number | boolean): void {\n        if (!this.Disabled && this.FooterChoiceQuestion) {\n            const mainControlKeys = this.MainQuestions.map(q => q.id);\n            let hasInvalidFields = false;\n\n            for (const key of mainControlKeys) {\n                const control = this.FormGroup.get(key);\n                if (control?.invalid) {\n                    control.markAsTouched();\n                    hasInvalidFields = true;\n                }\n            }\n\n            if (hasInvalidFields) return;\n\n            // Update the FormControl so external readers (e.g. collectFormData) can access the value\n            this.FormGroup.get(this.FooterChoiceQuestion.id)?.setValue(value);\n            const formData = { ...this.FormGroup.value };\n            this.FormSubmitted.emit(formData);\n        }\n    }\n\n    /** Whether a given option value is the currently selected footer choice */\n    public IsFooterChoiceSelected(value: string | number | boolean): boolean {\n        if (!this.FooterChoiceQuestion) return false;\n        const control = this.FormGroup.get(this.FooterChoiceQuestion.id);\n        return control?.value === value;\n    }\n\n    /** Handle full form submission */\n    public OnSubmit(): void {\n        if (this.FormGroup.invalid) {\n            Object.keys(this.FormGroup.controls).forEach(key => {\n                this.FormGroup.controls[key].markAsTouched();\n            });\n            return;\n        }\n\n        if (!this.Disabled && !this.IsSubmitting) {\n            this.IsSubmitting = true;\n            this.FormSubmitted.emit(this.FormGroup.value);\n\n            // Reset submitting state after a short delay — the parent container\n            // is responsible for hiding the form or handling the response\n            setTimeout(() => {\n                this.IsSubmitting = false;\n                this.cdr.detectChanges();\n            }, 1000);\n        }\n    }\n\n    /** Get options for a choice question */\n    public GetOptions(question: FormQuestion): FormOption[] {\n        if (typeof question.type === 'object' && 'options' in question.type) {\n            return question.type.options;\n        }\n        return [];\n    }\n\n    /** Check if an option has an icon */\n    public HasIcon(option: FormOption): boolean {\n        return !!option?.icon;\n    }\n\n    /** Track-by function for questions */\n    public TrackByQuestionId(_index: number, question: FormQuestion): string {\n        return question.id;\n    }\n\n    /** Track-by function for options */\n    public TrackByValue(_index: number, option: FormOption): string | number | boolean {\n        return option.value;\n    }\n\n    private isChoiceQuestion(question: FormQuestion): boolean {\n        const type = typeof question.type === 'string' ? question.type : question.type.type;\n        return ['buttongroup', 'radio'].includes(type);\n    }\n\n    private buildFormGroup(): void {\n        const controls: Record<string, FormControl> = {};\n\n        for (const question of this.FormDefinition.questions) {\n            const validators = [];\n            if (question.required) {\n                validators.push(Validators.required);\n            }\n\n            const questionType = typeof question.type === 'string' ? question.type : question.type.type;\n            if (questionType === 'email') {\n                validators.push(Validators.email);\n            }\n\n            if (['number', 'currency'].includes(questionType) && typeof question.type === 'object') {\n                if ('min' in question.type && question.type.min != null) {\n                    validators.push(Validators.min(question.type.min as number));\n                }\n                if ('max' in question.type && question.type.max != null) {\n                    validators.push(Validators.max(question.type.max as number));\n                }\n            }\n\n            let initialValue = question.defaultValue;\n            if (!initialValue) {\n                if (questionType === 'checkbox' && typeof question.type === 'object' && 'multiple' in question.type && question.type.multiple) {\n                    initialValue = [];\n                } else {\n                    initialValue = null;\n                }\n            }\n\n            controls[question.id] = new FormControl(initialValue, validators);\n        }\n\n        this.FormGroup = new FormGroup(controls);\n    }\n}\n","@if (IsVisible) {\n  <div class=\"dynamic-form\">\n    <!-- Simple Choice Mode (single question, no title, buttongroup/radio) -->\n    @if (IsSimpleChoice) {\n      <div class=\"simple-choice-buttons\">\n        @for (option of GetOptions(FormDefinition.questions[0]); track TrackByValue($index, option)) {\n          <button\n            kendoButton\n            [themeColor]=\"IsSimpleChoiceSelected(option.value) ? 'primary' : 'base'\"\n            [disabled]=\"Disabled\"\n            (click)=\"OnSimpleChoiceClick(option.value)\"\n            class=\"choice-button\"\n            [class.selected]=\"IsSimpleChoiceSelected(option.value)\"\n            >\n            <span>\n              @if (IsSimpleChoiceSelected(option.value)) {\n                <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n              } @else if (HasIcon(option)) {\n                <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n              }\n              {{ option.label }}\n            </span>\n          </button>\n        }\n      </div>\n    }\n    <!-- Full Form Mode (complex forms) -->\n    @if (!IsSimpleChoice) {\n      <form [formGroup]=\"FormGroup\" (ngSubmit)=\"OnSubmit()\" class=\"response-form\">\n        <!-- Form Title -->\n        @if (FormDefinition.title) {\n          <h3 class=\"form-title\">{{ FormDefinition.title }}</h3>\n        }\n        <!-- Form Description -->\n        @if (FormDefinition.description) {\n          <p class=\"form-description\">{{ FormDefinition.description }}</p>\n        }\n        <!-- Questions (excludes footer choice question) -->\n        @if (MainQuestions.length > 0) {\n          <div class=\"form-questions\">\n            @for (question of MainQuestions; track TrackByQuestionId($index, question)) {\n              <mj-dynamic-form-field\n                [Question]=\"question\"\n                [Control]=\"GetControl(question.id)\"\n                [formControlName]=\"question.id\"\n              ></mj-dynamic-form-field>\n            }\n          </div>\n        }\n        <!-- Footer Actions -->\n        <div class=\"form-actions\">\n          <!-- Footer Choice Buttons (replaces Submit when present) -->\n          @if (FooterChoiceQuestion) {\n            @for (option of GetOptions(FooterChoiceQuestion); track TrackByValue($index, option)) {\n              <button\n                kendoButton\n                type=\"button\"\n                [themeColor]=\"IsFooterChoiceSelected(option.value) ? 'primary' : 'base'\"\n                [disabled]=\"Disabled\"\n                (click)=\"OnFooterChoiceClick(option.value)\"\n                class=\"footer-choice-button\"\n                [class.selected]=\"IsFooterChoiceSelected(option.value)\"\n                >\n                <span>\n                  @if (IsFooterChoiceSelected(option.value)) {\n                    <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  } @else if (HasIcon(option)) {\n                    <i class=\"fa {{ option.icon }}\" aria-hidden=\"true\"></i>\n                  }\n                  {{ option.label }}\n                </span>\n              </button>\n            }\n          }\n          <!-- Standard Submit Button (when no footer choice) -->\n          @if (ShowSubmitButton) {\n            <button\n              kendoButton\n              type=\"submit\"\n              [themeColor]=\"'primary'\"\n              [disabled]=\"Disabled || IsSubmitting || FormGroup.invalid\"\n              class=\"submit-button\"\n              >\n              @if (!IsSubmitting) {\n                <span>\n                  <i class=\"fa fa-check\" aria-hidden=\"true\"></i>\n                  {{ SubmitLabel }}\n                </span>\n              }\n              @if (IsSubmitting) {\n                <span>\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Submitting...\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </form>\n    }\n  </div>\n}\n"]}

package/dist/lib/dynamic-form-field/dynamic-form-field.component.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Dynamic Form Field Component
+ *
+ * Renders a single form field based on a `FormQuestion` definition from
+ * `@memberjunction/ai-core-plus`. Supports 14+ input types including text,
+ * textarea, email, number, currency, date, datetime, time, daterange,
+ * buttongroup, radio, dropdown, checkbox, and slider.
+ *
+ * Implements `ControlValueAccessor` for seamless integration with Angular
+ * Reactive Forms. Width is automatically sized based on field type or an
+ * explicit `widthHint` on the question definition.
+ *
+ * @example
+ * ```html
+ * <mj-dynamic-form-field
+ *   [Question]="question"
+ *   [Control]="formGroup.get(question.id)"
+ *   [formControlName]="question.id">
+ * </mj-dynamic-form-field>
+ * ```
+ *
+ * @module @memberjunction/ng-forms
+ */
+import { OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { FormQuestion, FormOption } from '@memberjunction/ai-core-plus';
+import * as i0 from "@angular/core";
+export declare class DynamicFormFieldComponent implements ControlValueAccessor, OnInit {
+    /**
+     * The question definition that drives this field's rendering.
+     * Determines the input type, label, validation, options, and layout.
+     */
+    Question: FormQuestion;
+    /**
+     * The reactive FormControl bound to this field.
+     * Used for validation state display and dropdown binding.
+     */
+    Control: FormControl;
+    /** Current field value (managed by ControlValueAccessor) */
+    Value: string | number | boolean | Date | Record<string, Date> | (string | number | boolean)[] | null;
+    /** Whether this field is disabled */
+    Disabled: boolean;
+    private onChange;
+    private onTouched;
+    ngOnInit(): void;
+    /**
+     * Resolved question type string (handles both simple string and object types).
+     */
+    get QuestionType(): string;
+    /**
+     * Whether this is a choice-based question (buttongroup, radio, dropdown, checkbox).
+     */
+    get IsChoiceQuestion(): boolean;
+    /**
+     * Available options for choice-type questions.
+     */
+    get Options(): FormOption[];
+    /**
+     * Whether multiple selections are allowed (for checkbox type).
+     */
+    get AllowMultiple(): boolean;
+    /**
+     * CSS class controlling the field width based on `widthHint` or intelligent defaults.
+     *
+     * Width mapping:
+     * - `'narrow'` (~200px): numbers, dates, times
+     * - `'medium'` (~450px): text inputs (default)
+     * - `'wide'` (100%): emails, buttongroup, radio, checkbox
+     * - `'full'` (100%): textarea
+     * - `'auto'` (150–350px): dropdowns
+     */
+    get WidthClass(): string;
+    /** Placeholder text for text-based inputs */
+    get Placeholder(): string | undefined;
+    /** Minimum value for numeric inputs */
+    get Min(): number | undefined;
+    /** Maximum value for numeric inputs */
+    get Max(): number | undefined;
+    /** Step increment for numeric inputs */
+    get Step(): number | undefined;
+    /** Prefix string for currency inputs (e.g. "$") */
+    get Prefix(): string | undefined;
+    /** Suffix string for currency/slider inputs (e.g. "USD", "%") */
+    get Suffix(): string | undefined;
+    /** Handle value changes from any input type */
+    OnValueChange(newValue: string | number | boolean | Date | Record<string, Date> | (string | number | boolean)[] | null): void;
+    /** Toggle a checkbox option (supports single and multiple selection) */
+    ToggleCheckbox(option: FormOption): void;
+    /** Check whether a checkbox option is currently selected */
+    IsChecked(option: FormOption): boolean;
+    /** Get slider configuration with defaults */
+    GetSliderConfig(): {
+        min: number;
+        max: number;
+        step?: number;
+        suffix?: string;
+    };
+    /** Handle date range start date change */
+    OnDateRangeStartChange(value: Date): void;
+    /** Handle date range end date change */
+    OnDateRangeEndChange(value: Date): void;
+    /** Track-by function for options lists */
+    TrackByValue(_index: number, option: FormOption): string | number | boolean;
+    writeValue(value: string | number | boolean | Date | Record<string, Date> | (string | number | boolean)[] | null): void;
+    registerOnChange(fn: (value: string | number | boolean | Date | Record<string, Date> | (string | number | boolean)[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormFieldComponent, "mj-dynamic-form-field", never, { "Question": { "alias": "Question"; "required": false; }; "Control": { "alias": "Control"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=dynamic-form-field.component.d.ts.map

package/dist/lib/dynamic-form-field/dynamic-form-field.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form-field.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dynamic-form-field/dynamic-form-field.component.ts"],"names":[],"mappings":"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"}