@mj-biz-apps/forms-ng 0.0.0 → 0.2.0

package/dist/lib/builder/style-tokens.js

@@ -0,0 +1,71 @@
+import { parseStyleTokens, buildStyleTokens } from './json-fields';
+/** Semantic token names the theme editor writes into `CSSVariables`. */
+export const BRAND_TOKENS = {
+    /** Primary brand color (buttons, active choice, progress fill). */
+    primary: '--mjf-accent',
+    /** Darker shade used for hover / pressed / strong states. */
+    primaryStrong: '--mjf-accent-strong',
+    /** Page background behind the form cards. */
+    pageBg: '--mjf-page-bg',
+    /** Card / field surface background. */
+    cardBg: '--mjf-card-bg',
+    /** Body font stack. */
+    fontBody: '--mjf-font-body',
+    /** Display / heading font stack. */
+    fontDisplay: '--mjf-font-display',
+};
+/** The four corner-radius tokens set together so the theme's rounding stays coherent. */
+export const RADIUS_TOKENS = ['--mjf-card-radius', '--mjf-input-radius', '--mjf-choice-radius', '--mjf-btn-radius'];
+/** Curated font choices for the theme editor (label → CSS font-family stack). */
+export const FONT_OPTIONS = [
+    { label: 'System', stack: 'system-ui, sans-serif' },
+    { label: 'Inter', stack: "'Inter', system-ui, sans-serif" },
+    { label: 'Sora', stack: "'Sora', system-ui, sans-serif" },
+    { label: 'Nunito', stack: "'Nunito', system-ui, sans-serif" },
+    { label: 'Fraunces (serif)', stack: "'Fraunces', Georgia, serif" },
+];
+/** Serialize a `--token → value` map back to a `CSSVariables` JSON string. */
+export function serializeCssVariables(map) {
+    return JSON.stringify(map, null, 2);
+}
+/** Build the runtime {@link FormStyleTokens} the preview + widget apply from a style entity. */
+export function toStyleTokens(style) {
+    return buildStyleTokens(style.CSSVariables, style.CustomCSS, style.LogoURL);
+}
+/** Read a brand token's current value from a raw `CSSVariables` JSON (empty if unset). */
+export function readBrandToken(cssVariablesRaw, token) {
+    return parseStyleTokens(cssVariablesRaw)[token] ?? '';
+}
+/**
+ * Return an updated `CSSVariables` JSON with `token` set to `value` (or removed when
+ * `value` is blank), preserving every other token. Pure — mutates nothing.
+ */
+export function withBrandToken(cssVariablesRaw, token, value) {
+    const map = parseStyleTokens(cssVariablesRaw);
+    const trimmed = value.trim();
+    if (trimmed) {
+        map[token] = trimmed;
+    }
+    else {
+        delete map[token];
+    }
+    return serializeCssVariables(map);
+}
+/** Read the theme's corner radius (from `--mjf-card-radius`) as a number of px; 0 if unset. */
+export function readRadiusPx(cssVariablesRaw) {
+    const raw = parseStyleTokens(cssVariablesRaw)[RADIUS_TOKENS[0]] ?? '';
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+/**
+ * Return an updated `CSSVariables` JSON with all four {@link RADIUS_TOKENS} set to `px`,
+ * preserving every other token. Keeps card/input/choice/button rounding coherent. Pure.
+ */
+export function withRadiusPx(cssVariablesRaw, px) {
+    const map = parseStyleTokens(cssVariablesRaw);
+    for (const token of RADIUS_TOKENS) {
+        map[token] = `${px}px`;
+    }
+    return serializeCssVariables(map);
+}
+//# sourceMappingURL=style-tokens.js.map

package/dist/lib/builder/style-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-tokens.js","sourceRoot":"","sources":["../../../src/lib/builder/style-tokens.ts"],"names":[],"mappings":"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"}

package/dist/lib/builder/validation-rule-editor.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '@angular/core';
+import type { FormQuestionType, ValidationRule } from '@mj-biz-apps/forms-entities';
+import * as i0 from "@angular/core";
+/**
+ * Friendly editor for a {@link ValidationRule} (S2). Shows only the constraints that
+ * make sense for the question's type: length + pattern for text-ish types, min/max
+ * for numeric types. `required` is intentionally absent — it lives on the question's
+ * IsRequired, not in the validation rule. Emits a fresh rule (or `undefined` when
+ * empty) on every change.
+ */
+export declare class ValidationRuleEditorComponent {
+    questionType: FormQuestionType;
+    set rule(value: ValidationRule | undefined);
+    ruleChange: EventEmitter<ValidationRule | undefined>;
+    protected _rule: ValidationRule;
+    protected get showLength(): boolean;
+    protected get showRange(): boolean;
+    protected get showPattern(): boolean;
+    protected get hasAnyControl(): boolean;
+    protected setNumber(field: 'minLength' | 'maxLength' | 'min' | 'max', raw: string): void;
+    protected setPattern(raw: string): void;
+    protected setPatternMessage(raw: string): void;
+    private emit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationRuleEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationRuleEditorComponent, "mjf-validation-rule-editor", never, { "questionType": { "alias": "questionType"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; }, { "ruleChange": "ruleChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=validation-rule-editor.component.d.ts.map

package/dist/lib/builder/validation-rule-editor.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-rule-editor.component.d.ts","sourceRoot":"","sources":["../../../src/lib/builder/validation-rule-editor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,YAAY,EAAiB,MAAM,eAAe,CAAC;AAGhG,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;;AAUpF;;;;;;GAMG;AACH,qBAQa,6BAA6B;IAC/B,YAAY,EAAE,gBAAgB,CAAe;IAEtD,IACI,IAAI,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,EAEzC;IAES,UAAU,2CAAkD;IAEtE,SAAS,CAAC,KAAK,EAAE,cAAc,CAAM;IAErC,SAAS,KAAK,UAAU,IAAI,OAAO,CAElC;IAED,SAAS,KAAK,SAAS,IAAI,OAAO,CAMjC;IAED,SAAS,KAAK,WAAW,IAAI,OAAO,CAMnC;IAED,SAAS,KAAK,aAAa,IAAI,OAAO,CAErC;IAED,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,WAAW,GAAG,KAAK,GAAG,KAAK,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAYxF,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAYvC,SAAS,CAAC,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAY9C,OAAO,CAAC,IAAI;yCAxED,6BAA6B;2CAA7B,6BAA6B;CA2EzC"}

package/dist/lib/builder/validation-rule-editor.component.js

@@ -0,0 +1,179 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BUILDER_CONTROL_STYLES } from './builder-styles';
+import * as i0 from "@angular/core";
+function ValidationRuleEditorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "p", 7);
+    i0.ɵɵtext(1, "No validation options for this question type.");
+    i0.ɵɵdomElementEnd();
+} }
+function ValidationRuleEditorComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div")(1, "label", 8);
+    i0.ɵɵtext(2, "Min length");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "input", 9, 0);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_2_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r1); const minLenInput_r2 = i0.ɵɵreference(4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setNumber("minLength", minLenInput_r2.value)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div")(6, "label", 10);
+    i0.ɵɵtext(7, "Max length");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "input", 11, 1);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_2_Template_input_change_8_listener() { i0.ɵɵrestoreView(_r1); const maxLenInput_r4 = i0.ɵɵreference(9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setNumber("maxLength", maxLenInput_r4.value)); });
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.minLength ?? "");
+    i0.ɵɵadvance(5);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.maxLength ?? "");
+} }
+function ValidationRuleEditorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div")(1, "label", 12);
+    i0.ɵɵtext(2, "Minimum value");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "input", 13, 2);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_3_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r5); const minInput_r6 = i0.ɵɵreference(4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setNumber("min", minInput_r6.value)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div")(6, "label", 14);
+    i0.ɵɵtext(7, "Maximum value");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "input", 15, 3);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_3_Template_input_change_8_listener() { i0.ɵɵrestoreView(_r5); const maxInput_r7 = i0.ɵɵreference(9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setNumber("max", maxInput_r7.value)); });
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.min ?? "");
+    i0.ɵɵadvance(5);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.max ?? "");
+} }
+function ValidationRuleEditorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 16)(1, "label", 17);
+    i0.ɵɵtext(2, "Pattern (regular expression)");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "input", 18, 4);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_4_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r8); const patternInput_r9 = i0.ɵɵreference(4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setPattern(patternInput_r9.value)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 16)(6, "label", 19);
+    i0.ɵɵtext(7, "Message shown when the pattern fails");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "input", 20, 5);
+    i0.ɵɵdomListener("change", function ValidationRuleEditorComponent_Conditional_4_Template_input_change_8_listener() { i0.ɵɵrestoreView(_r8); const patternMsgInput_r10 = i0.ɵɵreference(9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setPatternMessage(patternMsgInput_r10.value)); });
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.pattern ?? "");
+    i0.ɵɵadvance(5);
+    i0.ɵɵdomProperty("value", ctx_r2._rule.patternMessage ?? "");
+} }
+const VALIDATION_EDITOR_CSS = /* css */ `
+.vre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.vre-full { grid-column: 1 / -1; }
+.vre-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mj-text-secondary); margin-bottom: 3px; }
+.vre-empty { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }
+`;
+/**
+ * Friendly editor for a {@link ValidationRule} (S2). Shows only the constraints that
+ * make sense for the question's type: length + pattern for text-ish types, min/max
+ * for numeric types. `required` is intentionally absent — it lives on the question's
+ * IsRequired, not in the validation rule. Emits a fresh rule (or `undefined` when
+ * empty) on every change.
+ */
+export class ValidationRuleEditorComponent {
+    questionType = 'ShortText';
+    set rule(value) {
+        this._rule = value ? { ...value } : {};
+    }
+    ruleChange = new EventEmitter();
+    _rule = {};
+    get showLength() {
+        return this.questionType === 'ShortText' || this.questionType === 'LongText';
+    }
+    get showRange() {
+        return (this.questionType === 'Number' ||
+            this.questionType === 'Rating' ||
+            this.questionType === 'NPS');
+    }
+    get showPattern() {
+        return (this.questionType === 'ShortText' ||
+            this.questionType === 'Phone' ||
+            this.questionType === 'Email');
+    }
+    get hasAnyControl() {
+        return this.showLength || this.showRange || this.showPattern;
+    }
+    setNumber(field, raw) {
+        const next = { ...this._rule };
+        const parsed = raw.trim() === '' ? undefined : Number(raw);
+        if (parsed === undefined || Number.isNaN(parsed)) {
+            delete next[field];
+        }
+        else {
+            next[field] = parsed;
+        }
+        this._rule = next;
+        this.emit();
+    }
+    setPattern(raw) {
+        const next = { ...this._rule };
+        const trimmed = raw.trim();
+        if (trimmed === '') {
+            delete next.pattern;
+        }
+        else {
+            next.pattern = trimmed;
+        }
+        this._rule = next;
+        this.emit();
+    }
+    setPatternMessage(raw) {
+        const next = { ...this._rule };
+        const trimmed = raw.trim();
+        if (trimmed === '') {
+            delete next.patternMessage;
+        }
+        else {
+            next.patternMessage = trimmed;
+        }
+        this._rule = next;
+        this.emit();
+    }
+    emit() {
+        this.ruleChange.emit(Object.keys(this._rule).length === 0 ? undefined : { ...this._rule });
+    }
+    static ɵfac = function ValidationRuleEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ValidationRuleEditorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ValidationRuleEditorComponent, selectors: [["mjf-validation-rule-editor"]], inputs: { questionType: "questionType", rule: "rule" }, outputs: { ruleChange: "ruleChange" }, decls: 5, vars: 4, consts: [["minLenInput", ""], ["maxLenInput", ""], ["minInput", ""], ["maxInput", ""], ["patternInput", ""], ["patternMsgInput", ""], [1, "vre"], [1, "vre-empty"], ["for", "vre-minlen", 1, "vre-label"], ["id", "vre-minlen", "type", "number", "min", "0", 1, "mjf-input", 3, "change", "value"], ["for", "vre-maxlen", 1, "vre-label"], ["id", "vre-maxlen", "type", "number", "min", "0", 1, "mjf-input", 3, "change", "value"], ["for", "vre-min", 1, "vre-label"], ["id", "vre-min", "type", "number", 1, "mjf-input", 3, "change", "value"], ["for", "vre-max", 1, "vre-label"], ["id", "vre-max", "type", "number", 1, "mjf-input", 3, "change", "value"], [1, "vre-full"], ["for", "vre-pattern", 1, "vre-label"], ["id", "vre-pattern", "type", "text", "placeholder", "^[A-Z]{2}\\d+$", 1, "mjf-input", 3, "change", "value"], ["for", "vre-patternmsg", 1, "vre-label"], ["id", "vre-patternmsg", "type", "text", "placeholder", "Please enter a valid value", 1, "mjf-input", 3, "change", "value"]], template: function ValidationRuleEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 6);
+            i0.ɵɵconditionalCreate(1, ValidationRuleEditorComponent_Conditional_1_Template, 2, 0, "p", 7);
+            i0.ɵɵconditionalCreate(2, ValidationRuleEditorComponent_Conditional_2_Template, 10, 2);
+            i0.ɵɵconditionalCreate(3, ValidationRuleEditorComponent_Conditional_3_Template, 10, 2);
+            i0.ɵɵconditionalCreate(4, ValidationRuleEditorComponent_Conditional_4_Template, 10, 2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.hasAnyControl ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showLength ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showRange ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showPattern ? 4 : -1);
+        } }, dependencies: [CommonModule, FormsModule], styles: ["[_nghost-%COMP%] {\n  --mjf-builder-gap: 16px;\n  --mjf-builder-radius: var(--mj-radius-md, 8px);\n}\n.mjf-input[_ngcontent-%COMP%] {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mjf-builder-radius);\n  transition: border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-input[_ngcontent-%COMP%]:focus {\n  outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary));\n  outline-offset: 1px;\n  border-color: var(--mj-brand-primary);\n}\ntextarea.mjf-input[_ngcontent-%COMP%] { min-height: 64px; resize: vertical; }\n.mjf-field[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--mjf-builder-gap); }\n.mjf-field-label[_ngcontent-%COMP%] { font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); }\n.mjf-field-hint[_ngcontent-%COMP%] { font-size: 0.75rem; color: var(--mj-text-muted); }\n.mjf-row[_ngcontent-%COMP%] { display: flex; gap: 8px; align-items: center; }\n.mjf-btn[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mjf-builder-radius));\n  border: 1px solid transparent;\n  transition: background var(--mj-transition-base, 0.15s ease), border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-btn[_ngcontent-%COMP%]:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n.mjf-btn[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: not-allowed; }\n.mjf-btn--primary[_ngcontent-%COMP%] { color: var(--mj-brand-on-primary, var(--mj-text-inverse)); background: var(--mj-brand-primary); }\n.mjf-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n.mjf-btn--ghost[_ngcontent-%COMP%] { color: var(--mj-text-secondary); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-btn--danger[_ngcontent-%COMP%] { color: var(--mj-status-error, var(--mj-color-error-600)); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--danger[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-pill[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 3px 9px; font-size: 0.75rem; font-weight: 600;\n  border-radius: var(--mjf-pill-radius, var(--mj-radius-full, 999px));\n  color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.mjf-switch[_ngcontent-%COMP%] {\n  position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer;\n  border-radius: var(--mj-radius-full, 999px); background: var(--mj-border-strong);\n  transition: background var(--mj-transition-base, 0.15s ease);\n  border: none; padding: 0;\n}\n.mjf-switch[_ngcontent-%COMP%]::after {\n  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;\n  border-radius: 50%; background: var(--mj-bg-surface);\n  transition: transform var(--mj-transition-base, 0.15s ease);\n}\n.mjf-switch.is-on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mjf-switch.is-on[_ngcontent-%COMP%]::after { transform: translateX(16px); }\n.mjf-switch[_ngcontent-%COMP%]:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }", ".vre[_ngcontent-%COMP%] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.vre-full[_ngcontent-%COMP%] { grid-column: 1 / -1; }\n.vre-label[_ngcontent-%COMP%] { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mj-text-secondary); margin-bottom: 3px; }\n.vre-empty[_ngcontent-%COMP%] { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationRuleEditorComponent, [{
+        type: Component,
+        args: [{ selector: 'mjf-validation-rule-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule], template: "<div class=\"vre\">\n  @if (!hasAnyControl) {\n    <p class=\"vre-empty\">No validation options for this question type.</p>\n  }\n\n  @if (showLength) {\n    <div>\n      <label class=\"vre-label\" for=\"vre-minlen\">Min length</label>\n      <input\n        #minLenInput\n        id=\"vre-minlen\"\n        type=\"number\"\n        min=\"0\"\n        class=\"mjf-input\"\n        [value]=\"_rule.minLength ?? ''\"\n        (change)=\"setNumber('minLength', minLenInput.value)\"\n      />\n    </div>\n    <div>\n      <label class=\"vre-label\" for=\"vre-maxlen\">Max length</label>\n      <input\n        #maxLenInput\n        id=\"vre-maxlen\"\n        type=\"number\"\n        min=\"0\"\n        class=\"mjf-input\"\n        [value]=\"_rule.maxLength ?? ''\"\n        (change)=\"setNumber('maxLength', maxLenInput.value)\"\n      />\n    </div>\n  }\n\n  @if (showRange) {\n    <div>\n      <label class=\"vre-label\" for=\"vre-min\">Minimum value</label>\n      <input\n        #minInput\n        id=\"vre-min\"\n        type=\"number\"\n        class=\"mjf-input\"\n        [value]=\"_rule.min ?? ''\"\n        (change)=\"setNumber('min', minInput.value)\"\n      />\n    </div>\n    <div>\n      <label class=\"vre-label\" for=\"vre-max\">Maximum value</label>\n      <input\n        #maxInput\n        id=\"vre-max\"\n        type=\"number\"\n        class=\"mjf-input\"\n        [value]=\"_rule.max ?? ''\"\n        (change)=\"setNumber('max', maxInput.value)\"\n      />\n    </div>\n  }\n\n  @if (showPattern) {\n    <div class=\"vre-full\">\n      <label class=\"vre-label\" for=\"vre-pattern\">Pattern (regular expression)</label>\n      <input\n        #patternInput\n        id=\"vre-pattern\"\n        type=\"text\"\n        class=\"mjf-input\"\n        placeholder=\"^[A-Z]{2}\\d+$\"\n        [value]=\"_rule.pattern ?? ''\"\n        (change)=\"setPattern(patternInput.value)\"\n      />\n    </div>\n    <div class=\"vre-full\">\n      <label class=\"vre-label\" for=\"vre-patternmsg\">Message shown when the pattern fails</label>\n      <input\n        #patternMsgInput\n        id=\"vre-patternmsg\"\n        type=\"text\"\n        class=\"mjf-input\"\n        placeholder=\"Please enter a valid value\"\n        [value]=\"_rule.patternMessage ?? ''\"\n        (change)=\"setPatternMessage(patternMsgInput.value)\"\n      />\n    </div>\n  }\n</div>\n", styles: ["\n:host {\n  --mjf-builder-gap: 16px;\n  --mjf-builder-radius: var(--mj-radius-md, 8px);\n}\n.mjf-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mjf-builder-radius);\n  transition: border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-input:focus {\n  outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary));\n  outline-offset: 1px;\n  border-color: var(--mj-brand-primary);\n}\ntextarea.mjf-input { min-height: 64px; resize: vertical; }\n.mjf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--mjf-builder-gap); }\n.mjf-field-label { font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); }\n.mjf-field-hint { font-size: 0.75rem; color: var(--mj-text-muted); }\n.mjf-row { display: flex; gap: 8px; align-items: center; }\n.mjf-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mjf-builder-radius));\n  border: 1px solid transparent;\n  transition: background var(--mj-transition-base, 0.15s ease), border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-btn:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n.mjf-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.mjf-btn--primary { color: var(--mj-brand-on-primary, var(--mj-text-inverse)); background: var(--mj-brand-primary); }\n.mjf-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n.mjf-btn--ghost { color: var(--mj-text-secondary); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--ghost:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-btn--danger { color: var(--mj-status-error, var(--mj-color-error-600)); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--danger:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-pill {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 3px 9px; font-size: 0.75rem; font-weight: 600;\n  border-radius: var(--mjf-pill-radius, var(--mj-radius-full, 999px));\n  color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.mjf-switch {\n  position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer;\n  border-radius: var(--mj-radius-full, 999px); background: var(--mj-border-strong);\n  transition: background var(--mj-transition-base, 0.15s ease);\n  border: none; padding: 0;\n}\n.mjf-switch::after {\n  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;\n  border-radius: 50%; background: var(--mj-bg-surface);\n  transition: transform var(--mj-transition-base, 0.15s ease);\n}\n.mjf-switch.is-on { background: var(--mj-brand-primary); }\n.mjf-switch.is-on::after { transform: translateX(16px); }\n.mjf-switch:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n", "\n.vre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.vre-full { grid-column: 1 / -1; }\n.vre-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mj-text-secondary); margin-bottom: 3px; }\n.vre-empty { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }\n"] }]
+    }], null, { questionType: [{
+            type: Input
+        }], rule: [{
+            type: Input
+        }], ruleChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ValidationRuleEditorComponent, { className: "ValidationRuleEditorComponent", filePath: "lib/builder/validation-rule-editor.component.ts", lineNumber: 29 }); })();
+//# sourceMappingURL=validation-rule-editor.component.js.map

package/dist/lib/builder/validation-rule-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-rule-editor.component.js","sourceRoot":"","sources":["../../../src/lib/builder/validation-rule-editor.component.ts","../../../src/lib/builder/validation-rule-editor.component.html"],"names":[],"mappings":"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"}

package/dist/lib/dashboard/components/distribution-chart.component.d.ts

@@ -0,0 +1,14 @@
+import type { DistributionBucket } from '../models/reporting.model';
+import * as i0 from "@angular/core";
+/**
+ * Horizontal bar chart for a choice/boolean distribution. Pure CSS bars whose
+ * fills come from `--mj-*` design tokens (no hardcoded colors → dark-mode safe).
+ * Each bar's width is the bucket fraction; counts + percentages are labelled.
+ */
+export declare class FormsDistributionChartComponent {
+    buckets: DistributionBucket[];
+    pct(fraction: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormsDistributionChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormsDistributionChartComponent, "mj-forms-distribution-chart", never, { "buckets": { "alias": "buckets"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=distribution-chart.component.d.ts.map

package/dist/lib/dashboard/components/distribution-chart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-chart.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/dashboard/components/distribution-chart.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;;AAEpE;;;;GAIG;AACH,qBAgFa,+BAA+B;IACjC,OAAO,EAAE,kBAAkB,EAAE,CAAM;IAErC,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;yCAHzB,+BAA+B;2CAA/B,+BAA+B;CAM3C"}

package/dist/lib/dashboard/components/distribution-chart.component.js

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.label;
+function FormsDistributionChartComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "p", 0);
+    i0.ɵɵtext(1, "No answers yet.");
+    i0.ɵɵdomElementEnd();
+} }
+function FormsDistributionChartComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "li", 2)(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 4);
+    i0.ɵɵdomElement(4, "span", 5);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 6);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const b_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("title", b_r1.label);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(b_r1.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", b_r1.fraction * 100, "%");
+    i0.ɵɵattribute("aria-label", b_r1.label + ": " + b_r1.count + " (" + ctx_r1.pct(b_r1.fraction) + ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", b_r1.count, " (", ctx_r1.pct(b_r1.fraction), ")");
+} }
+function FormsDistributionChartComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "ul", 1);
+    i0.ɵɵrepeaterCreate(1, FormsDistributionChartComponent_Conditional_1_For_2_Template, 7, 7, "li", 2, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.buckets);
+} }
+/**
+ * Horizontal bar chart for a choice/boolean distribution. Pure CSS bars whose
+ * fills come from `--mj-*` design tokens (no hardcoded colors → dark-mode safe).
+ * Each bar's width is the bucket fraction; counts + percentages are labelled.
+ */
+export class FormsDistributionChartComponent {
+    buckets = [];
+    pct(fraction) {
+        return `${Math.round(fraction * 100)}%`;
+    }
+    static ɵfac = function FormsDistributionChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormsDistributionChartComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormsDistributionChartComponent, selectors: [["mj-forms-distribution-chart"]], inputs: { buckets: "buckets" }, decls: 2, vars: 1, consts: [[1, "empty"], ["role", "list", 1, "bars"], [1, "bar-row"], [1, "bar-label", 3, "title"], [1, "bar-track"], [1, "bar-fill"], [1, "bar-value"]], template: function FormsDistributionChartComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, FormsDistributionChartComponent_Conditional_0_Template, 2, 0, "p", 0)(1, FormsDistributionChartComponent_Conditional_1_Template, 3, 0, "ul", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.buckets.length === 0 ? 0 : 1);
+        } }, styles: ["[_nghost-%COMP%] {\n        display: block;\n      }\n      .empty[_ngcontent-%COMP%] {\n        color: var(--mj-text-muted);\n        font-style: italic;\n        margin: 0;\n      }\n      .bars[_ngcontent-%COMP%] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--mj-space-2);\n      }\n      .bar-row[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: minmax(80px, 30%) 1fr auto;\n        align-items: center;\n        gap: var(--mj-space-2-5);\n      }\n      .bar-label[_ngcontent-%COMP%] {\n        font-size: 13px;\n        color: var(--mj-text-primary);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .bar-track[_ngcontent-%COMP%] {\n        position: relative;\n        height: 18px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: var(--mj-radius-sm);\n        overflow: hidden;\n      }\n      .bar-fill[_ngcontent-%COMP%] {\n        position: absolute;\n        inset: 0 auto 0 0;\n        background: var(--mj-brand-primary);\n        border-radius: var(--mj-radius-sm);\n        min-width: 2px;\n        transition: width 0.3s ease;\n      }\n      .bar-value[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-secondary);\n        white-space: nowrap;\n        font-variant-numeric: tabular-nums;\n      }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormsDistributionChartComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-forms-distribution-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (buckets.length === 0) {
+      <p class="empty">No answers yet.</p>
+    } @else {
+      <ul class="bars" role="list">
+        @for (b of buckets; track b.label) {
+          <li class="bar-row">
+            <span class="bar-label" [title]="b.label">{{ b.label }}</span>
+            <span class="bar-track">
+              <span
+                class="bar-fill"
+                [style.width.%]="b.fraction * 100"
+                [attr.aria-label]="b.label + ': ' + b.count + ' (' + pct(b.fraction) + ')'">
+              </span>
+            </span>
+            <span class="bar-value">{{ b.count }} ({{ pct(b.fraction) }})</span>
+          </li>
+        }
+      </ul>
+    }
+  `, styles: ["\n      :host {\n        display: block;\n      }\n      .empty {\n        color: var(--mj-text-muted);\n        font-style: italic;\n        margin: 0;\n      }\n      .bars {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--mj-space-2);\n      }\n      .bar-row {\n        display: grid;\n        grid-template-columns: minmax(80px, 30%) 1fr auto;\n        align-items: center;\n        gap: var(--mj-space-2-5);\n      }\n      .bar-label {\n        font-size: 13px;\n        color: var(--mj-text-primary);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .bar-track {\n        position: relative;\n        height: 18px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: var(--mj-radius-sm);\n        overflow: hidden;\n      }\n      .bar-fill {\n        position: absolute;\n        inset: 0 auto 0 0;\n        background: var(--mj-brand-primary);\n        border-radius: var(--mj-radius-sm);\n        min-width: 2px;\n        transition: width 0.3s ease;\n      }\n      .bar-value {\n        font-size: 12px;\n        color: var(--mj-text-secondary);\n        white-space: nowrap;\n        font-variant-numeric: tabular-nums;\n      }\n    "] }]
+    }], null, { buckets: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormsDistributionChartComponent, { className: "FormsDistributionChartComponent", filePath: "lib/dashboard/components/distribution-chart.component.ts", lineNumber: 89 }); })();
+//# sourceMappingURL=distribution-chart.component.js.map

package/dist/lib/dashboard/components/distribution-chart.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-chart.component.js","sourceRoot":"","sources":["../../../../src/lib/dashboard/components/distribution-chart.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;IAcpE,+BAAiB;IAAA,+BAAe;IAAA,oBAAI;;;IAK9B,AADF,gCAAoB,cACwB;IAAA,YAAa;IAAA,oBAAO;IAC9D,kCAAwB;IACtB,6BAIO;IACT,oBAAO;IACP,kCAAwB;IAAA,YAAqC;IAC/D,AAD+D,oBAAO,EACjE;;;;IATqB,cAAiB;IAAjB,qCAAiB;IAAC,cAAa;IAAb,gCAAa;IAInD,eAAkC;IAAlC,iDAAkC;;IAId,eAAqC;IAArC,2EAAqC;;;IAXnE,gCAA6B;IAC3B,+GAYC;IACH,oBAAK;;;IAbH,cAYC;IAZD,6BAYC;;AA1BT;;;;GAIG;AAiFH,MAAM,OAAO,+BAA+B;IACjC,OAAO,GAAyB,EAAE,CAAC;IAErC,GAAG,CAAC,QAAgB;QACzB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC;IAC1C,CAAC;yHALU,+BAA+B;6DAA/B,+BAA+B;YAzEtC,AAFF,+FAA4B,0EAEnB;;YAFT,kDAkBC;;;iFAyDQ,+BAA+B;cAhF3C,SAAS;2BACE,6BAA6B,cAC3B,IAAI,mBACC,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;GAoBT;;kBAyDA,KAAK;;kFADK,+BAA+B"}

package/dist/lib/dashboard/components/funnel-chart.component.d.ts

@@ -0,0 +1,14 @@
+import type { FunnelStep } from '../models/reporting.model';
+import * as i0 from "@angular/core";
+/**
+ * Page completion / drop-off funnel. Each step is a token-filled bar whose width
+ * is its retention relative to the first step, with the per-step drop-off called
+ * out. All colors are `--mj-*` tokens (dark-mode safe).
+ */
+export declare class FormsFunnelChartComponent {
+    steps: FunnelStep[];
+    pct(fraction: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormsFunnelChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormsFunnelChartComponent, "mj-forms-funnel-chart", never, { "steps": { "alias": "steps"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=funnel-chart.component.d.ts.map

package/dist/lib/dashboard/components/funnel-chart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-chart.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/dashboard/components/funnel-chart.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;;AAE5D;;;;GAIG;AACH,qBAsFa,yBAAyB;IAC3B,KAAK,EAAE,UAAU,EAAE,CAAM;IAE3B,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;yCAHzB,yBAAyB;2CAAzB,yBAAyB;CAMrC"}

package/dist/lib/dashboard/components/funnel-chart.component.js

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.pageId;
+function FormsFunnelChartComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "p", 0);
+    i0.ɵɵtext(1, "No pages to chart.");
+    i0.ɵɵdomElementEnd();
+} }
+function FormsFunnelChartComponent_Conditional_1_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 8);
+    i0.ɵɵdomElement(1, "i", 9);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const s_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.pct(s_r1.dropOff), " drop-off ");
+} }
+function FormsFunnelChartComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "li", 2)(1, "div", 3)(2, "span", 4);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "span", 5);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 6);
+    i0.ɵɵdomElement(7, "div", 7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(8, FormsFunnelChartComponent_Conditional_1_For_2_Conditional_8_Template, 3, 1, "span", 8);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const s_r1 = ctx.$implicit;
+    const ɵ$index_8_r3 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ɵ$index_8_r3 + 1, ". ", s_r1.title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", s_r1.reached, " reached \u00B7 ", ctx_r1.pct(s_r1.retention), " retained");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", s_r1.retention * 100, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_8_r3 > 0 && s_r1.dropOff > 0 ? 8 : -1);
+} }
+function FormsFunnelChartComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "ol", 1);
+    i0.ɵɵrepeaterCreate(1, FormsFunnelChartComponent_Conditional_1_For_2_Template, 9, 7, "li", 2, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.steps);
+} }
+/**
+ * Page completion / drop-off funnel. Each step is a token-filled bar whose width
+ * is its retention relative to the first step, with the per-step drop-off called
+ * out. All colors are `--mj-*` tokens (dark-mode safe).
+ */
+export class FormsFunnelChartComponent {
+    steps = [];
+    pct(fraction) {
+        return `${Math.round(fraction * 100)}%`;
+    }
+    static ɵfac = function FormsFunnelChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormsFunnelChartComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormsFunnelChartComponent, selectors: [["mj-forms-funnel-chart"]], inputs: { steps: "steps" }, decls: 2, vars: 1, consts: [[1, "empty"], [1, "funnel"], [1, "step"], [1, "step-head"], [1, "step-title"], [1, "step-count"], [1, "step-track"], [1, "step-fill"], [1, "step-drop"], [1, "fa-solid", "fa-arrow-trend-down"]], template: function FormsFunnelChartComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, FormsFunnelChartComponent_Conditional_0_Template, 2, 0, "p", 0)(1, FormsFunnelChartComponent_Conditional_1_Template, 3, 0, "ol", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.steps.length === 0 ? 0 : 1);
+        } }, styles: ["[_nghost-%COMP%] {\n        display: block;\n      }\n      .empty[_ngcontent-%COMP%] {\n        color: var(--mj-text-muted);\n        font-style: italic;\n        margin: 0;\n      }\n      .funnel[_ngcontent-%COMP%] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--mj-space-3);\n      }\n      .step-head[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: baseline;\n        gap: var(--mj-space-2);\n        margin-bottom: var(--mj-space-1);\n      }\n      .step-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n        font-weight: 600;\n        color: var(--mj-text-primary);\n      }\n      .step-count[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-secondary);\n        white-space: nowrap;\n        font-variant-numeric: tabular-nums;\n      }\n      .step-track[_ngcontent-%COMP%] {\n        height: 22px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: var(--mj-radius-sm);\n        overflow: hidden;\n      }\n      .step-fill[_ngcontent-%COMP%] {\n        height: 100%;\n        background: var(--mj-color-brand-600);\n        border-radius: var(--mj-radius-sm);\n        min-width: 2px;\n        transition: width 0.3s ease;\n      }\n      .step-drop[_ngcontent-%COMP%] {\n        display: inline-block;\n        margin-top: var(--mj-space-1);\n        font-size: 11px;\n        color: var(--mj-status-warning);\n      }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormsFunnelChartComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-forms-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (steps.length === 0) {
+      <p class="empty">No pages to chart.</p>
+    } @else {
+      <ol class="funnel">
+        @for (s of steps; track s.pageId; let idx = $index) {
+          <li class="step">
+            <div class="step-head">
+              <span class="step-title">{{ idx + 1 }}. {{ s.title }}</span>
+              <span class="step-count">{{ s.reached }} reached · {{ pct(s.retention) }} retained</span>
+            </div>
+            <div class="step-track">
+              <div class="step-fill" [style.width.%]="s.retention * 100"></div>
+            </div>
+            @if (idx > 0 && s.dropOff > 0) {
+              <span class="step-drop">
+                <i class="fa-solid fa-arrow-trend-down"></i> {{ pct(s.dropOff) }} drop-off
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    }
+  `, styles: ["\n      :host {\n        display: block;\n      }\n      .empty {\n        color: var(--mj-text-muted);\n        font-style: italic;\n        margin: 0;\n      }\n      .funnel {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--mj-space-3);\n      }\n      .step-head {\n        display: flex;\n        justify-content: space-between;\n        align-items: baseline;\n        gap: var(--mj-space-2);\n        margin-bottom: var(--mj-space-1);\n      }\n      .step-title {\n        font-size: 13px;\n        font-weight: 600;\n        color: var(--mj-text-primary);\n      }\n      .step-count {\n        font-size: 12px;\n        color: var(--mj-text-secondary);\n        white-space: nowrap;\n        font-variant-numeric: tabular-nums;\n      }\n      .step-track {\n        height: 22px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: var(--mj-radius-sm);\n        overflow: hidden;\n      }\n      .step-fill {\n        height: 100%;\n        background: var(--mj-color-brand-600);\n        border-radius: var(--mj-radius-sm);\n        min-width: 2px;\n        transition: width 0.3s ease;\n      }\n      .step-drop {\n        display: inline-block;\n        margin-top: var(--mj-space-1);\n        font-size: 11px;\n        color: var(--mj-status-warning);\n      }\n    "] }]
+    }], null, { steps: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormsFunnelChartComponent, { className: "FormsFunnelChartComponent", filePath: "lib/dashboard/components/funnel-chart.component.ts", lineNumber: 95 }); })();
+//# sourceMappingURL=funnel-chart.component.js.map

package/dist/lib/dashboard/components/funnel-chart.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-chart.component.js","sourceRoot":"","sources":["../../../../src/lib/dashboard/components/funnel-chart.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;IAcpE,+BAAiB;IAAA,kCAAkB;IAAA,oBAAI;;;IAa/B,kCAAwB;IACtB,0BAA4C;IAAC,YAC/C;IAAA,oBAAO;;;;IADwC,eAC/C;IAD+C,kEAC/C;;;IATA,AADF,AADF,gCAAiB,aACQ,cACI;IAAA,YAA4B;IAAA,oBAAO;IAC5D,kCAAyB;IAAA,YAAyD;IACpF,AADoF,oBAAO,EACrF;IACN,iCAAwB;IACtB,4BAAiE;IACnE,oBAAM;IACN,gHAAgC;IAKlC,oBAAK;;;;;IAXwB,eAA4B;IAA5B,6DAA4B;IAC5B,eAAyD;IAAzD,oGAAyD;IAG3D,eAAmC;IAAnC,kDAAmC;IAE5D,cAIC;IAJD,+DAIC;;;IAdP,gCAAmB;IACjB,yGAeC;IACH,oBAAK;;;IAhBH,cAeC;IAfD,2BAeC;;AA7BT;;;;GAIG;AAuFH,MAAM,OAAO,yBAAyB;IAC3B,KAAK,GAAiB,EAAE,CAAC;IAE3B,GAAG,CAAC,QAAgB;QACzB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC;IAC1C,CAAC;mHALU,yBAAyB;6DAAzB,yBAAyB;YA/EhC,AAFF,yFAA0B,oEAEjB;;YAFT,gDAqBC;;;iFA4DQ,yBAAyB;cAtFrC,SAAS;2BACE,uBAAuB,cACrB,IAAI,mBACC,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;GAuBT;;kBA4DA,KAAK;;kFADK,yBAAyB"}

package/dist/lib/dashboard/components/question-breakdown.component.d.ts

@@ -0,0 +1,16 @@
+import type { QuestionBreakdown } from '../models/reporting.model';
+import * as i0 from "@angular/core";
+/**
+ * Renders one question's breakdown card, switching by kind:
+ * - distribution/boolean → bar chart
+ * - numeric → aggregates (with NPS score + segments when applicable)
+ * - freeText → verbatim list
+ */
+export declare class FormsQuestionBreakdownComponent {
+    breakdown: QuestionBreakdown;
+    get typeLabel(): string;
+    fmt(value: number | null): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormsQuestionBreakdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormsQuestionBreakdownComponent, "mj-forms-question-breakdown", never, { "breakdown": { "alias": "breakdown"; "required": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=question-breakdown.component.d.ts.map

package/dist/lib/dashboard/components/question-breakdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"question-breakdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/dashboard/components/question-breakdown.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAGnE;;;;;GAKG;AACH,qBAqJa,+BAA+B;IACf,SAAS,EAAG,iBAAiB,CAAC;IAEzD,IAAW,SAAS,IAAI,MAAM,CAE7B;IAEM,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;yCAP7B,+BAA+B;2CAA/B,+BAA+B;CAW3C"}