@prolibu-suite/cobalt-form 0.1.1 → 0.2.0

package/dist/collection/components/co-form-wizard/co-form-wizard.js

@@ -0,0 +1,502 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { h, Host } from "@stencil/core";
+import { collectQuizFields, computeScore, evaluateExpression, resolveTheme, themeToStyles, toPagedSchema, } from "@prolibu-suite/cobalt-form-core";
+function safeJsonParse(s) {
+    try {
+        return JSON.parse(s);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * Multi-page wrapper around `<co-form>`. Consumes a paged schema (or a flat
+ * one, which it auto-wraps as a single page) and renders one page at a time
+ * with prev/next/submit navigation.
+ *
+ * The wizard owns the aggregate `values` and merges per-page updates as the
+ * user advances. Pages with `visibleIf` are skipped when their expression
+ * evaluates to false against the current values.
+ *
+ * @slot header - Above the stepper.
+ * @slot footer - Below the navigation buttons.
+ */
+export class CoFormWizard {
+    constructor() {
+        /** Locale for AJV error messages. */
+        this.locale = 'es';
+        /** Layout passed to each page's <co-form>. */
+        this.layout = 'grid';
+        /** Number of columns per page. */
+        this.columns = 1;
+        this.currentIndex = 0;
+        this.values = {};
+        this.finalScore = null;
+        /**
+         * Resolved theme styles for the wizard. Stored as state so render() picks
+         * up changes — using `<Host>` to bind the data-attrs + inline styles
+         * dodges the `setAttribute()` timing issues we saw with shadow:false.
+         */
+        this.themeStyles = null;
+        this.hasBg = false;
+        this.paged = { pages: [] };
+        // Use `any` rather than HTMLCoFormElement: type generation happens at
+        // build time, and the wizard lives in the same package, so we can't
+        // depend on the generated type without a chicken-and-egg.
+        this.currentFormEl = null;
+        this.handleNext = async () => {
+            const ok = await this.commitCurrentPage();
+            if (!ok)
+                return;
+            if (this.currentIndex < this.activePages.length - 1) {
+                this.currentIndex += 1;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+            }
+        };
+        this.handlePrev = () => {
+            if (this.currentIndex > 0) {
+                this.currentIndex -= 1;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+            }
+        };
+        /**
+         * Click on a step in the stepper. Backwards navigation is unrestricted
+         * (the user already visited those pages). Forward jumps require the
+         * current page to validate first, then we hop one page at a time so we
+         * don't silently skip validation of intermediate pages.
+         */
+        this.handleStepClick = async (targetIndex) => {
+            if (targetIndex === this.currentIndex)
+                return;
+            if (targetIndex < this.currentIndex) {
+                this.currentIndex = targetIndex;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+                return;
+            }
+            // Forward jump — validate-and-advance one step at a time.
+            while (this.currentIndex < targetIndex) {
+                const ok = await this.commitCurrentPage();
+                if (!ok)
+                    return;
+                this.currentIndex += 1;
+            }
+            this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+        };
+        this.handleSubmit = async () => {
+            const ok = await this.commitCurrentPage();
+            if (!ok)
+                return;
+            let score;
+            if (this.paged.mode === 'quiz') {
+                const allFields = collectQuizFields(this.paged.pages);
+                score = computeScore(this.values, allFields, this.paged.scoring);
+                this.finalScore = score;
+            }
+            this.coSubmit.emit({ values: this.values, score });
+        };
+        this.handlePageChange = (ev) => {
+            this.values = Object.assign(Object.assign({}, this.values), { [ev.detail.name]: ev.detail.value });
+        };
+    }
+    componentWillLoad() {
+        this.parseSchema();
+        this.values = this.parseInitialValues();
+        this.applyTheme();
+    }
+    onSchemaChange() {
+        this.parseSchema();
+        this.currentIndex = 0;
+        this.applyTheme();
+    }
+    onThemeChange() {
+        this.applyTheme();
+    }
+    /**
+     * Compute the resolved theme styles and store in `@State()` so render()
+     * picks them up via `<Host>`. Children `<co-form>` receive a theme with
+     * the background stripped (see `themeForChildren`) so only the wizard's
+     * outer surface carries it — avoids the image leaking into each page.
+     */
+    applyTheme() {
+        var _a;
+        const raw = this.theme
+            ? (typeof this.theme === 'string' ? safeJsonParse(this.theme) : this.theme)
+            : this.paged.theme;
+        console.log('[co-form-wizard] applyTheme called', {
+            themeProp: this.theme,
+            pagedTheme: (_a = this.paged) === null || _a === void 0 ? void 0 : _a.theme,
+            raw,
+        });
+        if (!raw) {
+            this.themeStyles = null;
+            this.hasBg = false;
+            console.log('[co-form-wizard] no theme — cleared');
+            return;
+        }
+        const resolved = resolveTheme(raw);
+        this.themeStyles = themeToStyles(resolved);
+        this.hasBg = !!(resolved.background.color || resolved.background.imageUrl);
+        console.log('[co-form-wizard] theme resolved', {
+            resolved,
+            modifiers: this.themeStyles.modifiers,
+            customProps: this.themeStyles.customProperties,
+            hasBg: this.hasBg,
+        });
+    }
+    parseSchema() {
+        try {
+            const parsed = JSON.parse(this.schema);
+            this.paged = toPagedSchema(parsed);
+        }
+        catch (err) {
+            console.error('[co-form-wizard] failed to parse schema:', err);
+            this.paged = { pages: [] };
+        }
+    }
+    parseInitialValues() {
+        if (!this.initialValues)
+            return {};
+        try {
+            return JSON.parse(this.initialValues) || {};
+        }
+        catch (err) {
+            console.error('[co-form-wizard] failed to parse initialValues:', err);
+            return {};
+        }
+    }
+    /**
+     * Theme JSON forwarded to each child <co-form>. Background is stripped
+     * here — the wizard's host paints the backdrop, the inner form sits on
+     * a solid "page surface" so inputs stay readable.
+     */
+    get themeForChildren() {
+        var _a;
+        const raw = this.theme
+            ? (typeof this.theme === 'string' ? safeJsonParse(this.theme) : this.theme)
+            : (_a = this.paged) === null || _a === void 0 ? void 0 : _a.theme;
+        if (!raw || typeof raw !== 'object')
+            return undefined;
+        // Shallow clone + drop the bg block.
+        const _b = raw, { background } = _b, rest = __rest(_b, ["background"]);
+        void background;
+        return JSON.stringify(rest);
+    }
+    /**
+     * Pages the user should see in order. Filters out pages whose `visibleIf`
+     * evaluates to false against the current values.
+     */
+    get activePages() {
+        return this.paged.pages.filter((p) => p.visibleIf ? evaluateExpression(p.visibleIf, this.values) : true);
+    }
+    get currentPage() {
+        var _a;
+        return (_a = this.activePages[this.currentIndex]) !== null && _a !== void 0 ? _a : null;
+    }
+    async commitCurrentPage() {
+        var _a, _b;
+        if (!this.currentFormEl)
+            return true;
+        const isValid = await ((_b = (_a = this.currentFormEl).validateAndCollect) === null || _b === void 0 ? void 0 : _b.call(_a));
+        if (!(isValid === null || isValid === void 0 ? void 0 : isValid.valid))
+            return false;
+        this.values = Object.assign(Object.assign({}, this.values), isValid.values);
+        return true;
+    }
+    /**
+     * Host element gets nothing extra — Stencil's shadow:false doesn't
+     * reliably rewrite `:host([attr])` selectors, so we put everything on
+     * the inner wrapper instead.
+     */
+    hostProps() {
+        return {};
+    }
+    /**
+     * Data attributes + inline styles for the inner `.co-form-wizard`
+     * wrapper. Scoped CSS targets descendants of this wrapper via normal
+     * descendant selectors that work regardless of Stencil scoping.
+     * CSS custom properties (accent / radius / header) cascade from here
+     * down to children — no need to also put them on the host.
+     */
+    wrapperProps() {
+        const t = this.themeStyles;
+        if (!t)
+            return { class: 'co-form-wizard' };
+        return Object.assign(Object.assign(Object.assign({ class: 'co-form-wizard', 'data-theme': t.modifiers.colorScheme, 'data-density': t.modifiers.density, 'data-appearance': t.modifiers.appearance, 'data-radius': t.modifiers.radius }, (this.hasBg ? { 'data-has-bg': '' } : {})), (t.modifiers.hideHeader ? { 'data-hide-header': '' } : {})), { style: Object.assign(Object.assign({}, t.customProperties), t.inlineStyles) });
+    }
+    render() {
+        var _a;
+        const pages = this.activePages;
+        if (pages.length === 0) {
+            return (h(Host, Object.assign({}, this.hostProps()), h("div", { class: "co-form-wizard__empty" }, "No pages to display.")));
+        }
+        // Quiz finished — show the score panel.
+        if (this.finalScore && ((_a = this.paged.scoring) === null || _a === void 0 ? void 0 : _a.showScore)) {
+            return (h(Host, Object.assign({}, this.hostProps()), this.renderScorePanel(this.finalScore)));
+        }
+        const current = pages[this.currentIndex];
+        const isFirst = this.currentIndex === 0;
+        const isLast = this.currentIndex === pages.length - 1;
+        // Each page is a fresh <co-form> with just its own fields. We pass
+        // initial values filtered to that page's field names so AJV doesn't
+        // complain about unknown properties from other pages.
+        const pageFields = Object.keys(current.fields);
+        const pageInitial = {};
+        for (const k of pageFields) {
+            if (k in this.values)
+                pageInitial[k] = this.values[k];
+        }
+        return (h(Host, Object.assign({}, this.hostProps()), this.renderInner(pages, current, isFirst, isLast, pageInitial)));
+    }
+    renderInner(pages, current, isFirst, isLast, pageInitial) {
+        var _a;
+        const customCss = (_a = this.themeStyles) === null || _a === void 0 ? void 0 : _a.customCss;
+        return (h("div", Object.assign({}, this.wrapperProps()), customCss && h("style", null, customCss), h("slot", { name: "header" }, (this.paged.title || this.paged.description) && (h("header", { class: "co-form-wizard__title-block" }, this.paged.title && (h("h1", { class: "co-form-wizard__title" }, this.paged.title)), this.paged.description && (h("p", { class: "co-form-wizard__title-desc" }, this.paged.description))))), pages.length > 1 && (h("ol", { class: "co-form-wizard__stepper" }, pages.map((p, i) => (h("li", { class: {
+                'co-form-wizard__step': true,
+                'is-active': i === this.currentIndex,
+                'is-done': i < this.currentIndex,
+            }, key: p.name }, h("button", { type: "button", class: "co-form-wizard__step-btn", onClick: () => this.handleStepClick(i) }, h("span", { class: "co-form-wizard__step-num" }, i + 1), h("span", { class: "co-form-wizard__step-label" }, p.title || p.name))))))), h("section", { class: "co-form-wizard__page-card" }, this.renderPageHead(current, pages.length > 1), h("co-form", { ref: (el) => (this.currentFormEl = el), schema: JSON.stringify(current.fields), "initial-values": JSON.stringify(pageInitial), locale: this.locale, layout: this.layout, columns: this.columns, theme: this.themeForChildren, "hide-footer": true, onCoChange: this.handlePageChange }), h("div", { class: "co-form-wizard__nav" }, h("co-button", { label: "Anterior", variant: "outlined", disabled: isFirst, onClick: this.handlePrev }), isLast ? (h("co-button", { label: "Enviar", variant: "primary", onClick: this.handleSubmit })) : (h("co-button", { label: "Siguiente", variant: "primary", onClick: this.handleNext })))), h("slot", { name: "footer" })));
+    }
+    /**
+     * Smart page-head visibility:
+     *  - Multi-page → always show (pill + title for progress tracking),
+     *    unless the page explicitly hides title/description.
+     *  - Single-page with default title "Page N" and no description → hide
+     *    entirely; the form title block above already provides the context.
+     *  - Single-page with a custom title or a description → show the
+     *    relevant parts only.
+     *  - Explicit `hideTitle` / `hideDescription` overrides on the page
+     *    always win.
+     */
+    renderPageHead(current, isMulti) {
+        const titleIsDefault = !current.title || /^Page \d+$/i.test(current.title);
+        const customTitle = !!current.title && !titleIsDefault;
+        const hasDesc = !!current.description;
+        const wantsTitle = (customTitle || (isMulti && current.title)) && !current.hideTitle;
+        const wantsDesc = hasDesc && !current.hideDescription;
+        const wantsPill = isMulti && !current.hideTitle;
+        if (!wantsPill && !wantsTitle && !wantsDesc)
+            return null;
+        return (h("header", { class: "co-form-wizard__page-head" }, wantsPill && (h("span", { class: "co-form-wizard__page-pill" }, "PAGE ", this.currentIndex + 1)), wantsTitle && (h("h2", { class: "co-form-wizard__page-title" }, current.title)), wantsDesc && (h("p", { class: "co-form-wizard__page-desc" }, current.description))));
+    }
+    renderScorePanel(score) {
+        const passText = score.passed === true ? 'Aprobado' : score.passed === false ? 'No aprobado' : null;
+        return (h("div", { class: "co-form-wizard co-form-wizard__score" }, h("h2", { class: "co-form-wizard__score-title" }, "Resultado"), h("div", { class: "co-form-wizard__score-num" }, score.total, " / ", score.max, h("span", { class: "co-form-wizard__score-pct" }, "(", score.percent, "%)")), passText && (h("div", { class: {
+                'co-form-wizard__score-pass': true,
+                'is-pass': score.passed === true,
+                'is-fail': score.passed === false,
+            } }, passText)), score.feedback.length > 0 && (h("ul", { class: "co-form-wizard__score-feedback" }, score.feedback.map((m) => (h("li", null, m)))))));
+    }
+    static get is() { return "co-form-wizard"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-form-wizard.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-form-wizard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "schema": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON schema string. Can be paged or flat."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "schema"
+            },
+            "initialValues": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial values across all pages, JSON-encoded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-values"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'en' | 'es' | 'pt'",
+                    "resolved": "\"en\" | \"es\" | \"pt\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale for AJV error messages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'grid' | 'stack'",
+                    "resolved": "\"grid\" | \"stack\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout passed to each page's <co-form>."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'grid'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "1"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme overrides. Forwarded to each page's `<co-form>`. The wizard\nitself reads `theme` from the parsed paged schema if not supplied\nhere so authors can ship a single bundled schema."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {},
+            "values": {},
+            "finalScore": {},
+            "themeStyles": {},
+            "hasBg": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coSubmit",
+                "name": "coSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ values: Record<string, any>; score?: ScoreResult }",
+                    "resolved": "{ values: Record<string, any>; score?: ScoreResult | undefined; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "ScoreResult": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-form-core",
+                            "id": "../form-core/dist/index.d.ts::ScoreResult",
+                            "referenceLocation": "ScoreResult"
+                        }
+                    }
+                }
+            }, {
+                "method": "coPageChange",
+                "name": "coPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number; page: PageDefinition }",
+                    "resolved": "{ index: number; page: PageDefinition; }",
+                    "references": {
+                        "PageDefinition": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-form-core",
+                            "id": "../form-core/dist/index.d.ts::PageDefinition",
+                            "referenceLocation": "PageDefinition"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "schema",
+                "methodName": "onSchemaChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
+            }];
+    }
+}

package/dist/components/co-form-wizard.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CoFormWizard extends Components.CoFormWizard, HTMLElement {}
+export const CoFormWizard: {
+    prototype: CoFormWizard;
+    new (): CoFormWizard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/co-form-wizard.js

@@ -0,0 +1 @@
+import{t as a,d as r,p as o,H as t,c as e,a as i,b as c,r as s,e as d,f as n,g as l,h as m,i as f}from"./index.js";function p(a){try{return JSON.parse(a)}catch(a){return null}}const h=o(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.coSubmit=e(this,"coSubmit"),this.coPageChange=e(this,"coPageChange"),this.locale="es",this.layout="grid",this.columns=1,this.currentIndex=0,this.values={},this.finalScore=null,this.themeStyles=null,this.hasBg=!1,this.paged={pages:[]},this.currentFormEl=null,this.handleNext=async()=>{await this.commitCurrentPage()&&this.currentIndex<this.activePages.length-1&&(this.currentIndex+=1,this.coPageChange.emit({index:this.currentIndex,page:this.currentPage}))},this.handlePrev=()=>{this.currentIndex>0&&(this.currentIndex-=1,this.coPageChange.emit({index:this.currentIndex,page:this.currentPage}))},this.handleStepClick=async a=>{if(a!==this.currentIndex){if(a<this.currentIndex)return this.currentIndex=a,void this.coPageChange.emit({index:this.currentIndex,page:this.currentPage});for(;this.currentIndex<a;){if(!await this.commitCurrentPage())return;this.currentIndex+=1}this.coPageChange.emit({index:this.currentIndex,page:this.currentPage})}},this.handleSubmit=async()=>{if(!await this.commitCurrentPage())return;let a;if("quiz"===this.paged.mode){const r=i(this.paged.pages);a=c(this.values,r,this.paged.scoring),this.finalScore=a}this.coSubmit.emit({values:this.values,score:a})},this.handlePageChange=a=>{this.values=Object.assign(Object.assign({},this.values),{[a.detail.name]:a.detail.value})}}componentWillLoad(){this.parseSchema(),this.values=this.parseInitialValues(),this.applyTheme()}onSchemaChange(){this.parseSchema(),this.currentIndex=0,this.applyTheme()}onThemeChange(){this.applyTheme()}applyTheme(){var a;const r=this.theme?"string"==typeof this.theme?p(this.theme):this.theme:this.paged.theme;if(console.log("[co-form-wizard] applyTheme called",{themeProp:this.theme,pagedTheme:null===(a=this.paged)||void 0===a?void 0:a.theme,raw:r}),!r)return this.themeStyles=null,this.hasBg=!1,void console.log("[co-form-wizard] no theme — cleared");const o=s(r);this.themeStyles=d(o),this.hasBg=!(!o.background.color&&!o.background.imageUrl),console.log("[co-form-wizard] theme resolved",{resolved:o,modifiers:this.themeStyles.modifiers,customProps:this.themeStyles.customProperties,hasBg:this.hasBg})}parseSchema(){try{const a=JSON.parse(this.schema);this.paged=n(a)}catch(a){console.error("[co-form-wizard] failed to parse schema:",a),this.paged={pages:[]}}}parseInitialValues(){if(!this.initialValues)return{};try{return JSON.parse(this.initialValues)||{}}catch(a){return console.error("[co-form-wizard] failed to parse initialValues:",a),{}}}get themeForChildren(){var a;const r=this.theme?"string"==typeof this.theme?p(this.theme):this.theme:null===(a=this.paged)||void 0===a?void 0:a.theme;if(!r||"object"!=typeof r)return;const o=function(a,r){var o={};for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&r.indexOf(t)<0&&(o[t]=a[t]);if(null!=a&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(t=Object.getOwnPropertySymbols(a);e<t.length;e++)r.indexOf(t[e])<0&&Object.prototype.propertyIsEnumerable.call(a,t[e])&&(o[t[e]]=a[t[e]])}return o}(r,["background"]);return JSON.stringify(o)}get activePages(){return this.paged.pages.filter((a=>!a.visibleIf||l(a.visibleIf,this.values)))}get currentPage(){var a;return null!==(a=this.activePages[this.currentIndex])&&void 0!==a?a:null}async commitCurrentPage(){var a,r;if(!this.currentFormEl)return!0;const o=await(null===(r=(a=this.currentFormEl).validateAndCollect)||void 0===r?void 0:r.call(a));return!!(null==o?void 0:o.valid)&&(this.values=Object.assign(Object.assign({},this.values),o.values),!0)}hostProps(){return{}}wrapperProps(){const a=this.themeStyles;return a?Object.assign(Object.assign(Object.assign({class:"co-form-wizard","data-theme":a.modifiers.colorScheme,"data-density":a.modifiers.density,"data-appearance":a.modifiers.appearance,"data-radius":a.modifiers.radius},this.hasBg?{"data-has-bg":""}:{}),a.modifiers.hideHeader?{"data-hide-header":""}:{}),{style:Object.assign(Object.assign({},a.customProperties),a.inlineStyles)}):{class:"co-form-wizard"}}render(){var a;const r=this.activePages;if(0===r.length)return m(f,Object.assign({},this.hostProps()),m("div",{class:"co-form-wizard__empty"},"No pages to display."));if(this.finalScore&&(null===(a=this.paged.scoring)||void 0===a?void 0:a.showScore))return m(f,Object.assign({},this.hostProps()),this.renderScorePanel(this.finalScore));const o=r[this.currentIndex],t=0===this.currentIndex,e=this.currentIndex===r.length-1,i=Object.keys(o.fields),c={};for(const a of i)a in this.values&&(c[a]=this.values[a]);return m(f,Object.assign({},this.hostProps()),this.renderInner(r,o,t,e,c))}renderInner(a,r,o,t,e){var i;const c=null===(i=this.themeStyles)||void 0===i?void 0:i.customCss;return m("div",Object.assign({},this.wrapperProps()),c&&m("style",null,c),m("slot",{name:"header"},(this.paged.title||this.paged.description)&&m("header",{class:"co-form-wizard__title-block"},this.paged.title&&m("h1",{class:"co-form-wizard__title"},this.paged.title),this.paged.description&&m("p",{class:"co-form-wizard__title-desc"},this.paged.description))),a.length>1&&m("ol",{class:"co-form-wizard__stepper"},a.map(((a,r)=>m("li",{class:{"co-form-wizard__step":!0,"is-active":r===this.currentIndex,"is-done":r<this.currentIndex},key:a.name},m("button",{type:"button",class:"co-form-wizard__step-btn",onClick:()=>this.handleStepClick(r)},m("span",{class:"co-form-wizard__step-num"},r+1),m("span",{class:"co-form-wizard__step-label"},a.title||a.name)))))),m("section",{class:"co-form-wizard__page-card"},this.renderPageHead(r,a.length>1),m("co-form",{ref:a=>this.currentFormEl=a,schema:JSON.stringify(r.fields),"initial-values":JSON.stringify(e),locale:this.locale,layout:this.layout,columns:this.columns,theme:this.themeForChildren,"hide-footer":!0,onCoChange:this.handlePageChange}),m("div",{class:"co-form-wizard__nav"},m("co-button",{label:"Anterior",variant:"outlined",disabled:o,onClick:this.handlePrev}),m("co-button",t?{label:"Enviar",variant:"primary",onClick:this.handleSubmit}:{label:"Siguiente",variant:"primary",onClick:this.handleNext}))),m("slot",{name:"footer"}))}renderPageHead(a,r){const o=(!!a.title&&!(!a.title||/^Page \d+$/i.test(a.title))||r&&a.title)&&!a.hideTitle,t=!!a.description&&!a.hideDescription,e=r&&!a.hideTitle;return e||o||t?m("header",{class:"co-form-wizard__page-head"},e&&m("span",{class:"co-form-wizard__page-pill"},"PAGE ",this.currentIndex+1),o&&m("h2",{class:"co-form-wizard__page-title"},a.title),t&&m("p",{class:"co-form-wizard__page-desc"},a.description)):null}renderScorePanel(a){const r=!0===a.passed?"Aprobado":!1===a.passed?"No aprobado":null;return m("div",{class:"co-form-wizard co-form-wizard__score"},m("h2",{class:"co-form-wizard__score-title"},"Resultado"),m("div",{class:"co-form-wizard__score-num"},a.total," / ",a.max,m("span",{class:"co-form-wizard__score-pct"},"(",a.percent,"%)")),r&&m("div",{class:{"co-form-wizard__score-pass":!0,"is-pass":!0===a.passed,"is-fail":!1===a.passed}},r),a.feedback.length>0&&m("ul",{class:"co-form-wizard__score-feedback"},a.feedback.map((a=>m("li",null,a)))))}get host(){return this}static get watchers(){return{schema:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}}static get style(){return':host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-wizard{max-width:720px;margin:0 auto;padding:var(--co-spacing-2xl, 24px);display:flex;flex-direction:column;gap:var(--co-spacing-lg, 16px)}.co-form-wizard[data-has-bg]{padding:var(--co-spacing-3xl, 32px) var(--co-spacing-2xl, 24px);background-repeat:no-repeat}.co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page, #fff));border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);padding:var(--co-spacing-2xl, 24px) var(--co-spacing-3xl, 28px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);min-height:var(--co-form-header-height, auto)}.co-form-wizard[data-hide-header] .co-form-wizard__title-block{display:none}.co-form-wizard[data-density="compact"] .co-form-wizard{gap:var(--co-spacing-sm, 8px)}.co-form-wizard[data-density="compact"] .co-form-wizard__title-block{padding:var(--co-spacing-lg, 16px) var(--co-spacing-xl, 20px)}.co-form-wizard[data-density="compact"] .co-form-wizard__page-head,.co-form-wizard[data-density="compact"] .co-form-wizard__nav{padding-top:var(--co-spacing-sm, 8px);padding-bottom:var(--co-spacing-sm, 8px)}.co-form-wizard__title{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__title-desc{margin:6px 0 0;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__stepper{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);list-style:none;padding:0;margin:0;flex-wrap:wrap}.co-form-wizard__step{display:flex;align-items:center;color:var(--co-semantic-text-secondary, #6b7280);font-size:var(--co-font-size-12, 12px)}.co-form-wizard__step-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:4px 6px;border:0;background:transparent;border-radius:var(--co-border-radius-xxs, 4px);font:inherit;color:inherit;cursor:pointer}.co-form-wizard__step-btn:hover{background:var(--co-semantic-surface-hover, #f3f4f6);color:var(--co-semantic-text-default, #111827)}.co-form-wizard__step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, #f3f4f6);font-weight:600}.co-form-wizard__step.is-active .co-form-wizard__step-num{background:var(--co-color-primary-azul, #2563eb);color:white}.co-form-wizard__step.is-done .co-form-wizard__step-num{background:var(--co-color-primary-verde, #02a270);color:white}.co-form-wizard__step.is-active{color:var(--co-semantic-text-default, #111827);font-weight:600}.co-form-wizard__page-card{background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);overflow:hidden;display:flex;flex-direction:column}.co-form-wizard__page-head{padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px);border-bottom:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__page-pill{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--co-color-primary-azul, #2563eb);background:color-mix(in srgb, var(--co-color-primary-azul) 10%, transparent);padding:3px 8px;border-radius:var(--co-border-radius-full, 9999px);margin-bottom:6px}.co-form-wizard__page-title{margin:0;font-size:var(--co-font-size-18, 18px);font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__page-desc{margin:4px 0 0;font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__page-card>co-form{display:block;padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px)}.co-form-wizard__nav{display:flex;justify-content:space-between;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-2xl, 24px);border-top:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__empty{padding:var(--co-spacing-lg, 16px);text-align:center;color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__score{text-align:center;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04)}.co-form-wizard__score-title{margin:0;font-size:var(--co-font-size-18, 18px)}.co-form-wizard__score-num{font-size:48px;font-weight:600;color:var(--co-color-primary-azul, #2563eb);margin:var(--co-spacing-md, 12px) 0}.co-form-wizard__score-pct{font-size:var(--co-font-size-16, 16px);color:var(--co-semantic-text-secondary, #6b7280);margin-left:var(--co-spacing-sm, 8px)}.co-form-wizard__score-pass{display:inline-block;padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);border-radius:var(--co-border-radius-full, 9999px);font-weight:600;margin-bottom:var(--co-spacing-md, 12px)}.co-form-wizard__score-pass.is-pass{background:var(--co-color-status-success, #0a7724);color:white}.co-form-wizard__score-pass.is-fail{background:var(--co-color-status-error, #aa2e1b);color:white}.co-form-wizard__score-feedback{text-align:left;list-style:disc;padding-left:var(--co-spacing-2xl, 24px);color:var(--co-semantic-text-default, #111827)}.co-form-wizard[data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-has-bg] .co-form-wizard__score{border:0;box-shadow:0 4px 24px rgba(0, 0, 0, 0.08)}.co-form-wizard[data-theme="dark"]{--co-semantic-surface-page:#1a1f2b;--co-semantic-surface-secondary:#1a1f2b;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-muted:#2a3142;--co-semantic-surface-hover:rgba(255, 255, 255, 0.06);--co-semantic-surface-disabled:rgba(255, 255, 255, 0.04);--co-semantic-text-default:#f9fafb;--co-semantic-text-secondary:#9ca3af;--co-semantic-text-muted:#6b7280;--co-semantic-text-disabled:#4b5563;--co-semantic-border-default:rgba(255, 255, 255, 0.12);--co-semantic-border-subtle:rgba(255, 255, 255, 0.14);--co-semantic-border-strong:rgba(255, 255, 255, 0.25);--co-semantic-border-focus:rgba(255, 255, 255, 0.25);--co-semantic-border-focus-ring:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"] .co-form-wizard__score{background:var(--co-semantic-surface-page);border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page));border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-title{color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-desc,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-desc{color:#9ca3af}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-head,.co-form-wizard[data-theme="dark"] .co-form-wizard__nav{background:rgba(255, 255, 255, 0.03);border-color:var(--co-semantic-border-default)}.co-form-wizard[data-theme="dark"] .co-form-wizard__step-num{background:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__score{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}.co-form-wizard[data-appearance="flat"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-head{background:transparent !important;border-bottom:0 !important;padding:0 0 var(--co-spacing-md, 12px) 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__nav{background:transparent !important;border-top:0 !important;padding:var(--co-spacing-md, 12px) 0 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card>co-form{padding:0 !important}.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__page-card{color:#f9fafb}'}},[260,"co-form-wizard",{schema:[1],initialValues:[1,"initial-values"],locale:[1],layout:[1],columns:[2],theme:[1],currentIndex:[32],values:[32],finalScore:[32],themeStyles:[32],hasBg:[32]},void 0,{schema:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}]);function g(){"undefined"!=typeof customElements&&["co-form-wizard","co-form"].forEach((o=>{switch(o){case"co-form-wizard":customElements.get(a(o))||customElements.define(a(o),h);break;case"co-form":customElements.get(a(o))||r()}}))}g();const b=h,u=g;export{b as CoFormWizard,u as defineCustomElement}