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

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

@@ -0,0 +1,282 @@
+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";
+import * as i1 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack1 = ($index, $item) => $item.op;
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 7);
+    i0.ɵɵtext(1, "Add an earlier question first to base a rule on its answer.");
+    i0.ɵɵelementEnd();
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const src_r8 = ctx.$implicit;
+    i0.ɵɵproperty("value", src_r8.id);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(src_r8.prompt);
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const op_r10 = ctx.$implicit;
+    i0.ɵɵproperty("value", op_r10.op);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(op_r10.label);
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 19, 3);
+    i0.ɵɵlistener("input", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Conditional_9_Template_input_input_0_listener() { i0.ɵɵrestoreView(_r11); const valueInput_r12 = i0.ɵɵreference(1); const $index_r6 = i0.ɵɵnextContext().$index; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.setValue($index_r6, valueInput_r12.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cond_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", ctx_r3.valueAsString(cond_r13));
+    i0.ɵɵattribute("placeholder", cond_r13.op === "in" || cond_r13.op === "notIn" ? "a, b, c" : "value");
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "select", 13, 1);
+    i0.ɵɵlistener("change", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Template_select_change_1_listener() { const $index_r6 = i0.ɵɵrestoreView(_r5).$index; const questionSelect_r7 = i0.ɵɵreference(2); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.setQuestion($index_r6, questionSelect_r7.value)); });
+    i0.ɵɵrepeaterCreate(3, ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_For_4_Template, 2, 2, "option", 14, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "select", 15, 2);
+    i0.ɵɵlistener("change", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Template_select_change_5_listener() { const $index_r6 = i0.ɵɵrestoreView(_r5).$index; const operatorSelect_r9 = i0.ɵɵreference(6); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.setOperator($index_r6, operatorSelect_r9.value)); });
+    i0.ɵɵrepeaterCreate(7, ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_For_8_Template, 2, 2, "option", 14, _forTrack1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Conditional_9_Template, 2, 2, "input", 16);
+    i0.ɵɵelementStart(10, "button", 17);
+    i0.ɵɵlistener("click", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Template_button_click_10_listener() { const $index_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.removeCondition($index_r6)); });
+    i0.ɵɵelement(11, "i", 18);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const cond_r13 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", cond_r13.questionId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r3.sources);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", cond_r13.op);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r3.operators);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.operatorNeedsValue(cond_r13.op) ? 9 : -1);
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "span");
+    i0.ɵɵtext(2, "Match");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 9);
+    i0.ɵɵlistener("click", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.setCombinator("all")); });
+    i0.ɵɵtext(4, "all");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 9);
+    i0.ɵɵlistener("click", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.setCombinator("any")); });
+    i0.ɵɵtext(6, "any");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "of these:");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(9, ConditionalRuleEditorComponent_Conditional_6_Conditional_1_For_10_Template, 12, 3, "div", 10, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(11, "button", 11);
+    i0.ɵɵlistener("click", function ConditionalRuleEditorComponent_Conditional_6_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.addCondition()); });
+    i0.ɵɵelement(12, "i", 12);
+    i0.ɵɵtext(13, " Add condition ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("is-on", ctx_r3._combinator === "all");
+    i0.ɵɵattribute("aria-pressed", ctx_r3._combinator === "all");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("is-on", ctx_r3._combinator === "any");
+    i0.ɵɵattribute("aria-pressed", ctx_r3._combinator === "any");
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r3._conditions);
+} }
+function ConditionalRuleEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConditionalRuleEditorComponent_Conditional_6_Conditional_0_Template, 2, 0, "p", 7)(1, ConditionalRuleEditorComponent_Conditional_6_Conditional_1_Template, 14, 6);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r3.sources.length === 0 ? 0 : 1);
+} }
+const CONDITIONAL_EDITOR_CSS = /* css */ `
+.cre { display: flex; flex-direction: column; gap: 10px; }
+.cre-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); cursor: pointer; }
+.cre-empty { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }
+.cre-combinator { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mj-text-secondary); flex-wrap: wrap; }
+.cre-seg { font: inherit; font-size: 0.8125rem; padding: 3px 10px; cursor: pointer; border-radius: var(--mj-radius-full, 999px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-secondary); }
+.cre-seg.is-on { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary, var(--mj-text-inverse)); border-color: var(--mj-brand-primary); }
+.cre-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.cre-input { flex: 1 1 120px; min-width: 0; }
+.cre-value { flex: 1 1 120px; }
+.cre-remove { flex: none; width: 32px; height: 32px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); }
+.cre-remove:hover { background: var(--mj-bg-surface-hover); color: var(--mj-status-error, var(--mj-color-error-600)); }
+.cre-add { align-self: flex-start; font: inherit; font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px dashed var(--mj-border-default); background: transparent; color: var(--mj-brand-primary); }
+.cre-add:hover { background: var(--mj-bg-surface-hover); }
+`;
+const OPERATORS = [
+    { op: 'equals', label: 'equals', needsValue: true },
+    { op: 'notEquals', label: 'does not equal', needsValue: true },
+    { op: 'contains', label: 'contains', needsValue: true },
+    { op: 'in', label: 'is one of', needsValue: true },
+    { op: 'notIn', label: 'is not one of', needsValue: true },
+    { op: 'greaterThan', label: 'is greater than', needsValue: true },
+    { op: 'lessThan', label: 'is less than', needsValue: true },
+    { op: 'isAnswered', label: 'is answered', needsValue: false },
+];
+/**
+ * Friendly editor for a {@link ConditionalRule} `show` group (S2). Emits a new rule
+ * object on every change; the parent persists it. Phase-1 supports a single
+ * combinator (`all` / `any`) over a flat list of leaf conditions — no nesting, in
+ * line with FORMS_BUILD_PLAN §6.
+ *
+ * The editor never mutates the input; it rebuilds the rule and emits it, so change
+ * detection stays predictable.
+ */
+export class ConditionalRuleEditorComponent {
+    /** Questions that may be referenced (typically those preceding the current one). */
+    sources = [];
+    set rule(value) {
+        this._enabled = !!value?.show;
+        this._combinator = value?.show?.any ? 'any' : 'all';
+        const group = value?.show?.any ?? value?.show?.all ?? [];
+        this._conditions = group.map((c) => ({ ...c }));
+    }
+    ruleChange = new EventEmitter();
+    operators = OPERATORS;
+    _enabled = false;
+    _combinator = 'all';
+    _conditions = [];
+    operatorNeedsValue(op) {
+        return OPERATORS.find((o) => o.op === op)?.needsValue ?? true;
+    }
+    toggleEnabled(enabled) {
+        this._enabled = enabled;
+        if (enabled && this._conditions.length === 0) {
+            this.addCondition();
+        }
+        this.emit();
+    }
+    setCombinator(combinator) {
+        this._combinator = combinator;
+        this.emit();
+    }
+    addCondition() {
+        const firstSource = this.sources[0];
+        this._conditions = [
+            ...this._conditions,
+            { questionId: firstSource?.id ?? '', op: 'equals', value: '' },
+        ];
+        this.emit();
+    }
+    removeCondition(index) {
+        this._conditions = this._conditions.filter((_, i) => i !== index);
+        if (this._conditions.length === 0) {
+            this._enabled = false;
+        }
+        this.emit();
+    }
+    setQuestion(index, questionId) {
+        this._conditions = this._conditions.map((c, i) => i === index ? { ...c, questionId } : c);
+        this.emit();
+    }
+    setOperator(index, raw) {
+        const op = this.toOperator(raw);
+        if (!op) {
+            return;
+        }
+        this._conditions = this._conditions.map((c, i) => i === index ? { ...c, op } : c);
+        this.emit();
+    }
+    /** Narrow a raw <select> value to a known operator (it always is, from our own list). */
+    toOperator(raw) {
+        return OPERATORS.find((o) => o.op === raw)?.op;
+    }
+    setValue(index, raw) {
+        this._conditions = this._conditions.map((c, i) => i === index ? { ...c, value: this.coerceValue(c.op, raw) } : c);
+        this.emit();
+    }
+    valueAsString(condition) {
+        if (condition.value === undefined) {
+            return '';
+        }
+        if (Array.isArray(condition.value)) {
+            return condition.value.join(', ');
+        }
+        return String(condition.value);
+    }
+    /** `in` / `notIn` take a comma-separated list; everything else a scalar string. */
+    coerceValue(op, raw) {
+        if (op === 'in' || op === 'notIn') {
+            return raw
+                .split(',')
+                .map((s) => s.trim())
+                .filter((s) => s.length > 0);
+        }
+        return raw;
+    }
+    emit() {
+        if (!this._enabled || this._conditions.length === 0) {
+            this.ruleChange.emit(undefined);
+            return;
+        }
+        const conditions = this._conditions
+            .filter((c) => c.questionId.length > 0)
+            .map((c) => this.normaliseCondition(c));
+        if (conditions.length === 0) {
+            this.ruleChange.emit(undefined);
+            return;
+        }
+        const rule = {
+            show: this._combinator === 'any' ? { any: conditions } : { all: conditions },
+        };
+        this.ruleChange.emit(rule);
+    }
+    /** Drop the value entirely for value-less operators (e.g. `isAnswered`). */
+    normaliseCondition(c) {
+        if (!this.operatorNeedsValue(c.op)) {
+            return { questionId: c.questionId, op: c.op };
+        }
+        return { questionId: c.questionId, op: c.op, value: c.value };
+    }
+    static ɵfac = function ConditionalRuleEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConditionalRuleEditorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConditionalRuleEditorComponent, selectors: [["mjf-conditional-rule-editor"]], inputs: { sources: "sources", rule: "rule" }, outputs: { ruleChange: "ruleChange" }, decls: 7, vars: 2, consts: [["enabledToggle", ""], ["questionSelect", ""], ["operatorSelect", ""], ["valueInput", ""], [1, "cre"], [1, "cre-toggle"], ["type", "checkbox", "aria-label", "Only show this when conditions are met", 3, "change", "checked"], [1, "cre-empty"], ["role", "group", "aria-label", "Match mode", 1, "cre-combinator"], ["type", "button", 1, "cre-seg", 3, "click"], [1, "cre-row"], ["type", "button", 1, "cre-add", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-label", "Question", 1, "cre-input", 3, "change", "value"], [3, "value"], ["aria-label", "Operator", 1, "cre-input", 3, "change", "value"], ["type", "text", "aria-label", "Comparison value", 1, "cre-input", "cre-value", 3, "value"], ["type", "button", "aria-label", "Remove condition", 1, "cre-remove", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["type", "text", "aria-label", "Comparison value", 1, "cre-input", "cre-value", 3, "input", "value"]], template: function ConditionalRuleEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 4)(1, "label", 5)(2, "input", 6, 0);
+            i0.ɵɵlistener("change", function ConditionalRuleEditorComponent_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r1); const enabledToggle_r2 = i0.ɵɵreference(3); return i0.ɵɵresetView(ctx.toggleEnabled(enabledToggle_r2.checked)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span");
+            i0.ɵɵtext(5, "Only show when\u2026");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(6, ConditionalRuleEditorComponent_Conditional_6_Template, 2, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("checked", ctx._enabled);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx._enabled ? 6 : -1);
+        } }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption], 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; }", ".cre[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 10px; }\n.cre-toggle[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); cursor: pointer; }\n.cre-empty[_ngcontent-%COMP%] { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }\n.cre-combinator[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mj-text-secondary); flex-wrap: wrap; }\n.cre-seg[_ngcontent-%COMP%] { font: inherit; font-size: 0.8125rem; padding: 3px 10px; cursor: pointer; border-radius: var(--mj-radius-full, 999px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-secondary); }\n.cre-seg.is-on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary, var(--mj-text-inverse)); border-color: var(--mj-brand-primary); }\n.cre-row[_ngcontent-%COMP%] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }\n.cre-input[_ngcontent-%COMP%] { flex: 1 1 120px; min-width: 0; }\n.cre-value[_ngcontent-%COMP%] { flex: 1 1 120px; }\n.cre-remove[_ngcontent-%COMP%] { flex: none; width: 32px; height: 32px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); }\n.cre-remove[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-status-error, var(--mj-color-error-600)); }\n.cre-add[_ngcontent-%COMP%] { align-self: flex-start; font: inherit; font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px dashed var(--mj-border-default); background: transparent; color: var(--mj-brand-primary); }\n.cre-add[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConditionalRuleEditorComponent, [{
+        type: Component,
+        args: [{ selector: 'mjf-conditional-rule-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule], template: "<div class=\"cre\">\n  <label class=\"cre-toggle\">\n    <input\n      #enabledToggle\n      type=\"checkbox\"\n      [checked]=\"_enabled\"\n      (change)=\"toggleEnabled(enabledToggle.checked)\"\n      aria-label=\"Only show this when conditions are met\"\n    />\n    <span>Only show when&hellip;</span>\n  </label>\n\n  @if (_enabled) {\n    @if (sources.length === 0) {\n      <p class=\"cre-empty\">Add an earlier question first to base a rule on its answer.</p>\n    } @else {\n      <div class=\"cre-combinator\" role=\"group\" aria-label=\"Match mode\">\n        <span>Match</span>\n        <button\n          type=\"button\"\n          class=\"cre-seg\"\n          [class.is-on]=\"_combinator === 'all'\"\n          [attr.aria-pressed]=\"_combinator === 'all'\"\n          (click)=\"setCombinator('all')\"\n        >all</button>\n        <button\n          type=\"button\"\n          class=\"cre-seg\"\n          [class.is-on]=\"_combinator === 'any'\"\n          [attr.aria-pressed]=\"_combinator === 'any'\"\n          (click)=\"setCombinator('any')\"\n        >any</button>\n        <span>of these:</span>\n      </div>\n\n      @for (cond of _conditions; track $index) {\n        <div class=\"cre-row\">\n          <select\n            #questionSelect\n            class=\"cre-input\"\n            [value]=\"cond.questionId\"\n            (change)=\"setQuestion($index, questionSelect.value)\"\n            aria-label=\"Question\"\n          >\n            @for (src of sources; track src.id) {\n              <option [value]=\"src.id\">{{ src.prompt }}</option>\n            }\n          </select>\n\n          <select\n            #operatorSelect\n            class=\"cre-input\"\n            [value]=\"cond.op\"\n            (change)=\"setOperator($index, operatorSelect.value)\"\n            aria-label=\"Operator\"\n          >\n            @for (op of operators; track op.op) {\n              <option [value]=\"op.op\">{{ op.label }}</option>\n            }\n          </select>\n\n          @if (operatorNeedsValue(cond.op)) {\n            <input\n              #valueInput\n              type=\"text\"\n              class=\"cre-input cre-value\"\n              [value]=\"valueAsString(cond)\"\n              (input)=\"setValue($index, valueInput.value)\"\n              [attr.placeholder]=\"cond.op === 'in' || cond.op === 'notIn' ? 'a, b, c' : 'value'\"\n              aria-label=\"Comparison value\"\n            />\n          }\n\n          <button\n            type=\"button\"\n            class=\"cre-remove\"\n            (click)=\"removeCondition($index)\"\n            aria-label=\"Remove condition\"\n          >\n            <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <button type=\"button\" class=\"cre-add\" (click)=\"addCondition()\">\n        <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> Add condition\n      </button>\n    }\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.cre { display: flex; flex-direction: column; gap: 10px; }\n.cre-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); cursor: pointer; }\n.cre-empty { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0; }\n.cre-combinator { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mj-text-secondary); flex-wrap: wrap; }\n.cre-seg { font: inherit; font-size: 0.8125rem; padding: 3px 10px; cursor: pointer; border-radius: var(--mj-radius-full, 999px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-secondary); }\n.cre-seg.is-on { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary, var(--mj-text-inverse)); border-color: var(--mj-brand-primary); }\n.cre-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }\n.cre-input { flex: 1 1 120px; min-width: 0; }\n.cre-value { flex: 1 1 120px; }\n.cre-remove { flex: none; width: 32px; height: 32px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); }\n.cre-remove:hover { background: var(--mj-bg-surface-hover); color: var(--mj-status-error, var(--mj-color-error-600)); }\n.cre-add { align-self: flex-start; font: inherit; font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px dashed var(--mj-border-default); background: transparent; color: var(--mj-brand-primary); }\n.cre-add:hover { background: var(--mj-bg-surface-hover); }\n"] }]
+    }], null, { sources: [{
+            type: Input
+        }], rule: [{
+            type: Input
+        }], ruleChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConditionalRuleEditorComponent, { className: "ConditionalRuleEditorComponent", filePath: "lib/builder/conditional-rule-editor.component.ts", lineNumber: 69 }); })();
+//# sourceMappingURL=conditional-rule-editor.component.js.map

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

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

package/dist/lib/builder/design-panel.component.d.ts

@@ -0,0 +1,71 @@
+import { EventEmitter } from '@angular/core';
+import type { FormStyleTokens, mjBizAppsFormsFormEntity, mjBizAppsFormsFormStyleEntity } from '@mj-biz-apps/forms-entities';
+import * as i0 from "@angular/core";
+/**
+ * The builder "Design" panel (FORMS_BUILD_PLAN §9 polish). Lets the author:
+ *   1. pick which existing {@link mjBizAppsFormsFormStyleEntity} applies to the form
+ *      (sets `Form.StyleID`),
+ *   2. see a LIVE token preview and edit an expanded set of theme controls (colors,
+ *      fonts, corner radius, logo) — all written into `FormStyle.CSSVariables`,
+ *   3. open a full, fillable **Preview** of the real form via `previewRequested` (the
+ *      parent builder owns the tree + modal).
+ *
+ * v1 scope: select a FormStyle + create/edit FormStyle rows with existing columns only.
+ * Per-form (not per-style) overrides would need new `Form` columns — deferred.
+ */
+export declare class DesignPanelComponent {
+    private readonly design;
+    private readonly cdr;
+    /** The form being styled (StyleID is written here). */
+    form: mjBizAppsFormsFormEntity;
+    /** Emitted after the form's StyleID changes so the parent can persist/refresh. */
+    readonly styleApplied: EventEmitter<string | null>;
+    /** Emitted with the current (edited) theme tokens so the parent opens the fill-it preview. */
+    readonly previewRequested: EventEmitter<FormStyleTokens>;
+    private previewHost?;
+    protected readonly fontOptions: readonly {
+        label: string;
+        stack: string;
+    }[];
+    protected styles: mjBizAppsFormsFormStyleEntity[];
+    protected selected: mjBizAppsFormsFormStyleEntity | null;
+    protected busy: boolean;
+    protected loadError: string;
+    protected status: string;
+    /** Theme-editor working values (bound to inputs; committed on save). */
+    protected brandName: string;
+    protected brandLogo: string;
+    protected brandPrimary: string;
+    protected brandAccent: string;
+    protected brandPageBg: string;
+    protected brandCardBg: string;
+    protected fontBody: string;
+    protected fontDisplay: string;
+    protected radiusPx: number;
+    ngOnInit(): Promise<void>;
+    /** (Re)load the theme presets + the form's assigned style; surfaces load failures. */
+    protected reload(): Promise<void>;
+    protected isSelected(style: mjBizAppsFormsFormStyleEntity): boolean;
+    protected isApplied(style: mjBizAppsFormsFormStyleEntity): boolean;
+    protected select(style: mjBizAppsFormsFormStyleEntity): void;
+    /** Persist the selected style onto the form (`Form.StyleID`). */
+    protected applyToForm(): Promise<void>;
+    /** Ask the parent builder to open the full, fillable preview with the current theme. */
+    protected requestPreview(): void;
+    private syncBrandFields;
+    /** Duplicate the selected preset so edits don't touch the shared original. */
+    protected duplicateSelected(): Promise<void>;
+    /** Live-preview the in-progress edits without saving. */
+    protected onBrandInput(): void;
+    /** Persist theme edits onto the (ideally duplicated) style. */
+    protected saveBranding(): Promise<void>;
+    /** The non-radius token edits, keyed by token name (blank values clear the token). */
+    private editedTokenMap;
+    /** Build the runtime tokens for the selected style with unsaved edits layered on. */
+    private buildPreviewTokens;
+    /** Apply the current theme (with unsaved edits) to the inline sample via the widget's applier. */
+    private applyPreview;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DesignPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DesignPanelComponent, "mjf-design-panel", never, { "form": { "alias": "form"; "required": true; }; }, { "styleApplied": "styleApplied"; "previewRequested": "previewRequested"; }, never, never, true, never>;
+}
+//# sourceMappingURL=design-panel.component.d.ts.map

package/dist/lib/builder/design-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/builder/design-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EAKb,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACxB,6BAA6B,EAC9B,MAAM,6BAA6B,CAAC;;AAQrC;;;;;;;;;;;GAWG;AACH,qBASa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IAErD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IAEjD,uDAAuD;IAC5B,IAAI,EAAG,wBAAwB,CAAC;IAE3D,kFAAkF;IACxE,QAAQ,CAAC,YAAY,8BAAqC;IAEpE,8FAA8F;IACpF,QAAQ,CAAC,gBAAgB,gCAAuC;IAEhD,OAAO,CAAC,WAAW,CAAC,CAA0B;IAExE,SAAS,CAAC,QAAQ,CAAC,WAAW;;;QAAgB;IAE9C,SAAS,CAAC,MAAM,EAAE,6BAA6B,EAAE,CAAM;IACvD,SAAS,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI,CAAQ;IAChE,SAAS,CAAC,IAAI,UAAS;IACvB,SAAS,CAAC,SAAS,SAAM;IACzB,SAAS,CAAC,MAAM,SAAM;IAEtB,wEAAwE;IACxE,SAAS,CAAC,SAAS,SAAM;IACzB,SAAS,CAAC,SAAS,SAAM;IACzB,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,WAAW,SAAM;IAC3B,SAAS,CAAC,WAAW,SAAM;IAC3B,SAAS,CAAC,WAAW,SAAM;IAC3B,SAAS,CAAC,QAAQ,SAAM;IACxB,SAAS,CAAC,WAAW,SAAM;IAC3B,SAAS,CAAC,QAAQ,SAAM;IAEX,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAItC,sFAAsF;cACtE,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAmBvC,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,6BAA6B,GAAG,OAAO;IAInE,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,6BAA6B,GAAG,OAAO;IAIlE,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,6BAA6B,GAAG,IAAI;IAM5D,iEAAiE;cACjD,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB5C,wFAAwF;IACxF,SAAS,CAAC,cAAc,IAAI,IAAI;IAMhC,OAAO,CAAC,eAAe;IAavB,8EAA8E;cAC9D,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAoBlD,yDAAyD;IACzD,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,+DAA+D;cAC/C,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAiB7C,sFAAsF;IACtF,OAAO,CAAC,cAAc;IAatB,qFAAqF;IACrF,OAAO,CAAC,kBAAkB;IAc1B,kGAAkG;IAClG,OAAO,CAAC,YAAY;yCAxLT,oBAAoB;2CAApB,oBAAoB;CA+LhC"}