@prolibu-suite/cobalt-form 0.2.2 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/co-form-wizard.cjs.entry.js +40 -11
- package/dist/cjs/co-form.cjs.entry.js +1 -1
- package/dist/cjs/cobalt-form.cjs.js +1 -1
- package/dist/cjs/{index-CLL7Ervz.js → index-Brpri7nS.js} +120 -19
- package/dist/cjs/index.cjs.js +146 -5
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cobalt-form/cobalt-form.esm.js +1 -1
- package/dist/cobalt-form/index.esm.js +1 -1
- package/dist/cobalt-form/p-296094ec.entry.js +1 -0
- package/dist/cobalt-form/{p-2168be6b.entry.js → p-95e1cedb.entry.js} +1 -1
- package/dist/cobalt-form/{p-CPE0t-C2.js → p-CzvtCEKX.js} +3 -3
- package/dist/collection/components/co-form/co-form.css +326 -4
- package/dist/collection/components/co-form/co-form.js +167 -4
- package/dist/collection/components/co-form-wizard/co-form-wizard.css +5 -0
- package/dist/collection/components/co-form-wizard/co-form-wizard.js +92 -10
- package/dist/components/co-form-wizard.js +1 -1
- package/dist/components/index.js +7 -7
- package/dist/esm/co-form-wizard.entry.js +40 -11
- package/dist/esm/co-form.entry.js +1 -1
- package/dist/esm/cobalt-form.js +1 -1
- package/dist/esm/{index-CPE0t-C2.js → index-CzvtCEKX.js} +120 -19
- package/dist/esm/index.js +146 -5
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/co-form/co-form.d.ts +7 -0
- package/dist/types/components/co-form-wizard/co-form-wizard.d.ts +15 -1
- package/dist/types/components.d.ts +33 -0
- package/dist/types/jsx-cobalt.d.ts +3 -0
- package/package.json +3 -3
- package/dist/cobalt-form/p-0a2a284f.entry.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Mpsm3UE7.js');
|
|
4
|
-
var index$1 = require('./index-
|
|
4
|
+
var index$1 = require('./index-Brpri7nS.js');
|
|
5
5
|
|
|
6
|
-
const coFormCss = () => `:host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-layout{display:grid;gap:var(--co-spacing-lg, 16px)}.co-form-layout--gap-sm{gap:var(--co-spacing-sm, 8px)}.co-form-layout--gap-md{gap:var(--co-spacing-md, 12px)}.co-form-layout--gap-lg{gap:var(--co-spacing-lg, 16px)}.co-form-layout--grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.co-form-layout--stack{grid-template-columns:1fr}@media (max-width: 640px){.co-form-layout--grid{grid-template-columns:1fr !important}}.co-form-layout>[data-full="true"],.co-form-layout .co-form-section,.co-form-layout .co-form-repeater{grid-column:1 / -1}.co-form-footer--start{justify-content:flex-start}.co-form-footer--end{justify-content:flex-end}.co-form-footer--center{justify-content:center}.co-form-footer--between{justify-content:space-between}.co-form-footer--stretch{justify-content:stretch}.co-form-footer--stretch>*{flex:1}.co-form-footer{margin-top:var(--co-spacing-lg, 16px);display:flex;justify-content:flex-end;gap:var(--co-spacing-sm, 8px)}:host{display:block;background-repeat:no-repeat}form[data-has-bg]{max-width:720px;margin:var(--co-spacing-3xl, 32px) auto;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.08)}form[data-theme="dark"][data-has-bg]{background:#232936;color:#f9fafb;box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}form[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-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--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:var(--co-semantic-text-default)}form[data-density="compact"] .co-form-layout{gap:var(--co-spacing-sm, 8px)}form[data-density="compact"] .co-form-footer{margin-top:var(--co-spacing-sm, 8px)}form[data-appearance="flat"] .co-form-section{border-top:0;padding-top:0}form[data-appearance="flat"][data-has-bg]{background:transparent;box-shadow:none;padding:0}form[data-hide-header] .co-form-layout>slot[name="header"]{display:none}:host{--co-form-header-bg-applied:var(--co-form-header-bg, transparent)}.co-form-section{grid-column:1 / -1;border-top:1px solid var(--co-semantic-border-default, #e5e7eb);padding-top:var(--co-spacing-md, 12px);margin-top:var(--co-spacing-sm, 8px)}.co-form-section__title{margin:0 0 var(--co-spacing-xxs, 2px);font-size:var(--co-font-size-16, 16px);font-weight:600;color:var(--co-semantic-text-default, #111)}.co-form-section__desc{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-repeater{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-repeater__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-repeater__row{display:flex;align-items:flex-start;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);background:var(--co-semantic-surface-primary, #fff)}.co-form-repeater__fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:var(--co-spacing-sm, 8px)}`;
|
|
6
|
+
const coFormCss = () => `:host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-layout{display:grid;gap:var(--co-spacing-lg, 16px)}.co-form-layout--gap-sm{gap:var(--co-spacing-sm, 8px)}.co-form-layout--gap-md{gap:var(--co-spacing-md, 12px)}.co-form-layout--gap-lg{gap:var(--co-spacing-lg, 16px)}.co-form-layout--grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.co-form-layout--stack{grid-template-columns:1fr}@media (max-width: 640px){.co-form-layout--grid{grid-template-columns:1fr !important}}.co-form-layout>[data-full="true"],.co-form-layout .co-form-section,.co-form-layout .co-form-repeater{grid-column:1 / -1}.co-form-footer--start{justify-content:flex-start}.co-form-footer--end{justify-content:flex-end}.co-form-footer--center{justify-content:center}.co-form-footer--between{justify-content:space-between}.co-form-footer--stretch{justify-content:stretch}.co-form-footer--stretch>*{flex:1}.co-form-footer{margin-top:var(--co-spacing-lg, 16px);display:flex;justify-content:flex-end;gap:var(--co-spacing-sm, 8px)}:host{display:block;background-repeat:no-repeat}form[data-has-bg]{max-width:720px;margin:var(--co-spacing-3xl, 32px) auto;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 24px var(--co-color-opacity-negro-8))}form[data-theme="dark"][data-has-bg]{background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default);box-shadow:0 4px 24px var(--co-color-opacity-negro-50)}form[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-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--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:var(--co-semantic-text-default)}form[data-density="compact"] .co-form-layout{gap:var(--co-spacing-sm, 8px)}form[data-density="compact"] .co-form-footer{margin-top:var(--co-spacing-sm, 8px)}form[data-appearance="flat"] .co-form-section{border-top:0;padding-top:0}form[data-appearance="flat"][data-has-bg]{background:transparent;box-shadow:none;padding:0}form[data-hide-header] .co-form-layout>slot[name="header"]{display:none}:host{--co-form-header-bg-applied:var(--co-form-header-bg, transparent)}.co-form-section{grid-column:1 / -1;border-top:1px solid var(--co-semantic-border-default, #e5e7eb);padding-top:var(--co-spacing-md, 12px);margin-top:var(--co-spacing-sm, 8px)}.co-form-section__title{margin:0 0 var(--co-spacing-xxs, 2px);font-size:var(--co-font-size-16, 16px);font-weight:600;color:var(--co-semantic-text-default, #111)}.co-form-section__desc{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-repeater{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-repeater__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-repeater__row{display:flex;align-items:flex-start;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);background:var(--co-semantic-surface-primary, #fff)}.co-form-repeater__fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:var(--co-spacing-sm, 8px)}.co-form-textarea-wrap{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-form-textarea-wrap__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-textarea{width:100%;min-height:100px;padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);font-family:var(--co-font-family-primary, sans-serif);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #111);background:var(--co-semantic-surface-secondary, #f7f6f0);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);resize:vertical;outline:none;transition:border-color 120ms;box-sizing:border-box}.co-form-textarea:focus{border-color:var(--co-color-primary-azul, #2563eb)}.co-form-textarea--error{border-color:var(--co-color-status-error, #AA2E1B)}.co-form-textarea:disabled{opacity:0.5;cursor:not-allowed}.co-form-textarea-wrap__helper{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-textarea-wrap__helper[data-status="error"]{color:var(--co-color-status-error, #AA2E1B)}co-number-field{max-width:240px}.co-form-ordering{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-ordering__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-ordering__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-ordering__list{display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-ordering__item{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);background:var(--co-semantic-surface-secondary, #f7f6f0);transition:border-color 120ms, box-shadow 120ms, opacity 120ms;cursor:grab;user-select:none}.co-form-ordering__item:hover{border-color:var(--co-color-primary-azul, #2563eb)}.co-form-ordering__item.is-dragging{opacity:0.4;cursor:grabbing}.co-form-ordering__item.is-drop-target{border-color:var(--co-color-primary-azul, #2563eb);box-shadow:0 -2px 0 0 var(--co-color-primary-azul, #2563eb)}.co-form-ordering__grip{display:flex;align-items:center;color:var(--co-semantic-text-muted, #9ca3af);flex-shrink:0;cursor:grab}.co-form-ordering__num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--co-border-radius-full, 9999px);background:color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 10%, transparent);color:var(--co-color-primary-azul, #2563eb);font-size:12px;font-weight:700;flex-shrink:0}.co-form-ordering__text{flex:1;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #111)}.co-form-ordering__actions{display:flex;flex-direction:column;gap:1px;flex-shrink:0}.co-form-ordering__move-btn{display:flex;align-items:center;justify-content:center;width:22px;height:16px;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted, #9ca3af);cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px)}.co-form-ordering__move-btn:hover:not(:disabled){background:var(--co-semantic-surface-hover, #f3f4f6);color:var(--co-semantic-text-default, #111)}.co-form-ordering__move-btn:disabled{opacity:0.3;cursor:not-allowed}.co-form-matching{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-matching__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-matching__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-matching__list{display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-matching__row{display:grid;grid-template-columns:1fr 20px 1fr;gap:var(--co-spacing-sm, 8px);align-items:center}.co-form-matching__term{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);background:var(--co-semantic-surface-secondary, #f7f6f0)}.co-form-matching__row co-icon{color:var(--co-semantic-text-muted, #9ca3af);justify-self:center}.co-form-matching__select{min-width:0}.co-form-image-choice{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-image-choice__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-image-choice__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-image-choice__helper[data-status="error"]{color:var(--co-color-status-error, #AA2E1B)}.co-form-image-choice__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:var(--co-spacing-sm, 8px)}.co-form-image-choice__card{display:flex;flex-direction:column;border:2px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);overflow:hidden;cursor:pointer;transition:border-color 120ms, box-shadow 120ms;background:var(--co-semantic-surface-secondary, #f7f6f0)}.co-form-image-choice__card:hover:not(.is-disabled){border-color:var(--co-color-primary-azul, #2563eb)}.co-form-image-choice__card.is-selected{border-color:var(--co-color-primary-azul, #2563eb);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 20%, transparent)}.co-form-image-choice__card.is-disabled{opacity:0.5;cursor:not-allowed}.co-form-image-choice__img-wrap{width:100%;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--co-semantic-text-muted, #9ca3af)}.co-form-image-choice__img{width:100%;height:100%;object-fit:cover}.co-form-image-choice__footer{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-top:1px solid var(--co-semantic-border-default, #e5e7eb);min-height:32px}.co-form-image-choice__check{flex-shrink:0;display:flex;color:var(--co-semantic-text-muted, #9ca3af)}.co-form-image-choice__card.is-selected .co-form-image-choice__check{color:var(--co-color-primary-azul, #2563eb)}.co-form-image-choice__text{font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-default, #111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
|
|
7
7
|
|
|
8
8
|
const PAGE_SIZE = 20;
|
|
9
9
|
function safeParse(json) {
|
|
@@ -45,6 +45,8 @@ const CoForm = class {
|
|
|
45
45
|
this.footerAlign = 'end';
|
|
46
46
|
/** Hide the entire footer (use when embedded in a wizard or custom shell). */
|
|
47
47
|
this.hideFooter = false;
|
|
48
|
+
/** When to run validation: on every change, on blur, or only on submit. */
|
|
49
|
+
this.validateOn = 'change';
|
|
48
50
|
this.snapshot = {
|
|
49
51
|
values: {},
|
|
50
52
|
errors: {},
|
|
@@ -120,6 +122,9 @@ const CoForm = class {
|
|
|
120
122
|
}
|
|
121
123
|
this.handleFieldChange(f.name, value);
|
|
122
124
|
};
|
|
125
|
+
// ── Ordering (kind: 'ordering') ───────────────────────────────────────────
|
|
126
|
+
this.orderingDragIdx = null;
|
|
127
|
+
this.orderingDropIdx = null;
|
|
123
128
|
}
|
|
124
129
|
componentWillLoad() {
|
|
125
130
|
this.rebuildController();
|
|
@@ -187,6 +192,7 @@ const CoForm = class {
|
|
|
187
192
|
this.controller = index$1.createForm({
|
|
188
193
|
schema: { instance },
|
|
189
194
|
initialValues,
|
|
195
|
+
validateOn: this.validateOn,
|
|
190
196
|
});
|
|
191
197
|
this.fields = index$1.describeFields(instance.formSchema.properties);
|
|
192
198
|
this.snapshot = this.controller.state;
|
|
@@ -447,8 +453,14 @@ const CoForm = class {
|
|
|
447
453
|
switch (f.kind) {
|
|
448
454
|
case 'text':
|
|
449
455
|
return (index.h("co-input", Object.assign({}, common, { value: value !== null && value !== void 0 ? value : '', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
450
|
-
case 'textarea':
|
|
451
|
-
|
|
456
|
+
case 'textarea': {
|
|
457
|
+
const textareaId = `co-form-${f.name}`;
|
|
458
|
+
const helperId = helperText ? `co-form-${f.name}-helper` : undefined;
|
|
459
|
+
return (index.h("div", { class: "co-form-textarea-wrap", "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && index.h("label", { class: "co-form-textarea-wrap__label", htmlFor: textareaId }, f.label), index.h("textarea", { id: textareaId, class: {
|
|
460
|
+
'co-form-textarea': true,
|
|
461
|
+
'co-form-textarea--error': status === 'error',
|
|
462
|
+
}, name: f.name, placeholder: f.placeholder, disabled: disabled, required: required, rows: 4, "aria-invalid": status === 'error' ? 'true' : undefined, "aria-describedby": helperId, value: value !== null && value !== void 0 ? value : '', onInput: (e) => this.handleFieldChange(f.name, e.target.value) }), helperText && index.h("p", { id: helperId, class: "co-form-textarea-wrap__helper", "data-status": status }, helperText)));
|
|
463
|
+
}
|
|
452
464
|
case 'html':
|
|
453
465
|
return (index.h("co-input", Object.assign({}, common, { multiline: true, value: value !== null && value !== void 0 ? value : '', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
454
466
|
case 'date':
|
|
@@ -459,16 +471,28 @@ const CoForm = class {
|
|
|
459
471
|
return (index.h("co-switch", Object.assign({}, common, { checked: !!value, onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
460
472
|
case 'select':
|
|
461
473
|
return (index.h("co-select", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: String(value !== null && value !== void 0 ? value : ''), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
474
|
+
case 'radio':
|
|
475
|
+
return (index.h("co-radio-group", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: String(value !== null && value !== void 0 ? value : ''), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
476
|
+
case 'checkbox':
|
|
477
|
+
return (index.h("co-checkbox-group", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: JSON.stringify(Array.isArray(value) ? value : []), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
462
478
|
case 'rating':
|
|
463
479
|
return (index.h("co-rating", Object.assign({}, common, { value: typeof value === 'number' ? value : 0, max: Number((_c = f.originalAttrs.max) !== null && _c !== void 0 ? _c : 5), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
464
480
|
case 'slider':
|
|
465
481
|
return (index.h("co-slider", Object.assign({}, common, { value: typeof value === 'number' ? value : Number((_d = f.originalAttrs.min) !== null && _d !== void 0 ? _d : 0), min: Number((_e = f.originalAttrs.min) !== null && _e !== void 0 ? _e : 0), max: Number((_f = f.originalAttrs.max) !== null && _f !== void 0 ? _f : 100), step: Number((_g = f.originalAttrs.step) !== null && _g !== void 0 ? _g : 1), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
466
482
|
case 'color':
|
|
467
|
-
return (index.h("co-
|
|
483
|
+
return (index.h("co-color-picker", Object.assign({}, common, { value: typeof value === 'string' ? value : '', presets: f.originalAttrs.presets ? JSON.stringify(f.originalAttrs.presets) : undefined, onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
468
484
|
case 'section':
|
|
469
485
|
return (index.h("div", { class: "co-form-section", key: f.name }, index.h("h3", { class: "co-form-section__title" }, f.label), f.helperText && index.h("p", { class: "co-form-section__desc" }, f.helperText)));
|
|
486
|
+
case 'phone':
|
|
487
|
+
return (index.h("co-phone-field", Object.assign({}, common, { value: typeof value === 'string' ? value : '', defaultCountry: f.originalAttrs.defaultCountry || '', onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
470
488
|
case 'file':
|
|
471
489
|
return (index.h("co-input", Object.assign({}, common, { type: "file", onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
|
|
490
|
+
case 'ordering':
|
|
491
|
+
return this.renderOrdering(f, value);
|
|
492
|
+
case 'matching':
|
|
493
|
+
return this.renderMatching(f, value);
|
|
494
|
+
case 'image-choice':
|
|
495
|
+
return this.renderImageChoice(f, value);
|
|
472
496
|
case 'array':
|
|
473
497
|
return this.renderRepeater(f, value);
|
|
474
498
|
case 'ref': {
|
|
@@ -521,6 +545,123 @@ const CoForm = class {
|
|
|
521
545
|
return (index.h("co-input", { key: n, label: ((_a = itemSchema[n]) === null || _a === void 0 ? void 0 : _a.label) || n, value: (_b = row[n]) !== null && _b !== void 0 ? _b : '', disabled: this.disabled || f.disabled, onCoInput: (e) => patchRow(idx, n, e.detail) }));
|
|
522
546
|
})), index.h("co-icon-button", { icon: "trash", variant: "ghost", onClick: () => removeRow(idx), disabled: this.disabled || f.disabled })))), index.h("co-button", { label: "Agregar", variant: "outlined", "icon-left": "plus", onClick: addRow, disabled: this.disabled || f.disabled })));
|
|
523
547
|
}
|
|
548
|
+
// ── Image Choice (kind: 'image-choice') ────────────────────────────────
|
|
549
|
+
renderImageChoice(f, value) {
|
|
550
|
+
const opts = Array.isArray(f.originalAttrs.enum) ? f.originalAttrs.enum : [];
|
|
551
|
+
const images = Array.isArray(f.originalAttrs.optionImages) ? f.originalAttrs.optionImages : [];
|
|
552
|
+
const isMulti = !!f.originalAttrs.multiSelect;
|
|
553
|
+
const isDisabled = this.disabled || f.disabled;
|
|
554
|
+
const isTouched = !!this.snapshot.touched[f.name];
|
|
555
|
+
const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
|
|
556
|
+
const helperText = errors[0] || f.helperText;
|
|
557
|
+
// For single select: value is a string (option text or index).
|
|
558
|
+
// For multi select: value is an array.
|
|
559
|
+
const selected = isMulti
|
|
560
|
+
? (Array.isArray(value) ? value : [])
|
|
561
|
+
: (value != null && value !== '' ? [String(value)] : []);
|
|
562
|
+
const toggle = (opt) => {
|
|
563
|
+
if (isDisabled)
|
|
564
|
+
return;
|
|
565
|
+
if (isMulti) {
|
|
566
|
+
const next = selected.includes(opt)
|
|
567
|
+
? selected.filter((s) => s !== opt)
|
|
568
|
+
: [...selected, opt];
|
|
569
|
+
this.handleFieldChange(f.name, next);
|
|
570
|
+
}
|
|
571
|
+
else {
|
|
572
|
+
this.handleFieldChange(f.name, opt);
|
|
573
|
+
}
|
|
574
|
+
};
|
|
575
|
+
return (index.h("div", { class: "co-form-image-choice", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && index.h("label", { class: "co-form-image-choice__label" }, f.label), helperText && index.h("p", { class: "co-form-image-choice__helper", "data-status": errors.length ? 'error' : undefined }, helperText), index.h("div", { class: "co-form-image-choice__grid", role: isMulti ? 'group' : 'radiogroup', "aria-label": f.label || f.name }, opts.map((opt, idx) => {
|
|
576
|
+
const isSelected = selected.includes(opt);
|
|
577
|
+
const imgSrc = images[idx] || '';
|
|
578
|
+
return (index.h("div", { class: `co-form-image-choice__card ${isSelected ? 'is-selected' : ''} ${isDisabled ? 'is-disabled' : ''}`, key: `${f.name}-${idx}`, onClick: () => toggle(opt), onKeyDown: (e) => {
|
|
579
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
580
|
+
e.preventDefault();
|
|
581
|
+
toggle(opt);
|
|
582
|
+
}
|
|
583
|
+
}, role: isMulti ? 'checkbox' : 'radio', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, tabIndex: isDisabled ? -1 : 0 }, index.h("div", { class: "co-form-image-choice__img-wrap" }, imgSrc
|
|
584
|
+
? index.h("img", { src: imgSrc, alt: opt, class: "co-form-image-choice__img" })
|
|
585
|
+
: index.h("co-icon", { name: "image-square", size: "32" })), index.h("div", { class: "co-form-image-choice__footer" }, index.h("span", { class: "co-form-image-choice__check" }, isSelected && index.h("co-icon", { name: "check-circle", size: "18", weight: "fill" }), !isSelected && index.h("co-icon", { name: "circle", size: "18" })), opt && index.h("span", { class: "co-form-image-choice__text" }, opt))));
|
|
586
|
+
}))));
|
|
587
|
+
}
|
|
588
|
+
renderOrdering(f, value) {
|
|
589
|
+
const items = Array.isArray(f.originalAttrs.enum) ? f.originalAttrs.enum : [];
|
|
590
|
+
// Value is the user's ordering: an array of item strings in the order they chose.
|
|
591
|
+
const ordered = Array.isArray(value) ? value : [...items];
|
|
592
|
+
const isDisabled = this.disabled || f.disabled;
|
|
593
|
+
const isTouched = !!this.snapshot.touched[f.name];
|
|
594
|
+
const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
|
|
595
|
+
const helperText = errors[0] || f.helperText;
|
|
596
|
+
const onDragStart = (ev, idx) => {
|
|
597
|
+
if (isDisabled)
|
|
598
|
+
return;
|
|
599
|
+
this.orderingDragIdx = idx;
|
|
600
|
+
if (ev.dataTransfer) {
|
|
601
|
+
ev.dataTransfer.effectAllowed = 'move';
|
|
602
|
+
ev.dataTransfer.setData('text/plain', String(idx));
|
|
603
|
+
}
|
|
604
|
+
};
|
|
605
|
+
const onDragOver = (ev, idx) => {
|
|
606
|
+
if (this.orderingDragIdx === null)
|
|
607
|
+
return;
|
|
608
|
+
ev.preventDefault();
|
|
609
|
+
if (ev.dataTransfer)
|
|
610
|
+
ev.dataTransfer.dropEffect = 'move';
|
|
611
|
+
this.orderingDropIdx = idx;
|
|
612
|
+
};
|
|
613
|
+
const onDrop = (ev, idx) => {
|
|
614
|
+
ev.preventDefault();
|
|
615
|
+
const fromIdx = this.orderingDragIdx;
|
|
616
|
+
this.orderingDragIdx = null;
|
|
617
|
+
this.orderingDropIdx = null;
|
|
618
|
+
if (fromIdx === null || fromIdx === idx)
|
|
619
|
+
return;
|
|
620
|
+
const next = [...ordered];
|
|
621
|
+
const [moved] = next.splice(fromIdx, 1);
|
|
622
|
+
// Adjust target for downward moves: removing fromIdx shifts later indices down by 1
|
|
623
|
+
const insertAt = fromIdx < idx ? idx - 1 : idx;
|
|
624
|
+
next.splice(insertAt, 0, moved);
|
|
625
|
+
this.handleFieldChange(f.name, next);
|
|
626
|
+
};
|
|
627
|
+
const onDragEnd = () => {
|
|
628
|
+
this.orderingDragIdx = null;
|
|
629
|
+
this.orderingDropIdx = null;
|
|
630
|
+
};
|
|
631
|
+
const moveItem = (fromIdx, toIdx) => {
|
|
632
|
+
if (isDisabled || toIdx < 0 || toIdx >= ordered.length)
|
|
633
|
+
return;
|
|
634
|
+
const next = [...ordered];
|
|
635
|
+
const [moved] = next.splice(fromIdx, 1);
|
|
636
|
+
next.splice(toIdx, 0, moved);
|
|
637
|
+
this.handleFieldChange(f.name, next);
|
|
638
|
+
};
|
|
639
|
+
return (index.h("div", { class: "co-form-ordering", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && index.h("label", { class: "co-form-ordering__label" }, f.label), helperText && index.h("p", { class: "co-form-ordering__helper" }, helperText), index.h("div", { class: "co-form-ordering__list", role: "list", "aria-label": f.label }, ordered.map((item, idx) => (index.h("div", { class: {
|
|
640
|
+
'co-form-ordering__item': true,
|
|
641
|
+
'is-dragging': this.orderingDragIdx === idx,
|
|
642
|
+
'is-drop-target': this.orderingDropIdx === idx && this.orderingDragIdx !== idx,
|
|
643
|
+
}, key: `${f.name}-${idx}`, role: "listitem", draggable: !isDisabled, onDragStart: (ev) => onDragStart(ev, idx), onDragOver: (ev) => onDragOver(ev, idx), onDrop: (ev) => onDrop(ev, idx), onDragEnd: onDragEnd }, index.h("span", { class: "co-form-ordering__grip", "aria-hidden": "true" }, index.h("co-icon", { name: "dots-six-vertical", size: "16" })), index.h("span", { class: "co-form-ordering__num" }, idx + 1), index.h("span", { class: "co-form-ordering__text" }, item), index.h("span", { class: "co-form-ordering__actions" }, index.h("button", { type: "button", class: "co-form-ordering__move-btn", disabled: isDisabled || idx === 0, onClick: () => moveItem(idx, idx - 1), "aria-label": `Move ${item} up` }, index.h("co-icon", { name: "caret-up", size: "14" })), index.h("button", { type: "button", class: "co-form-ordering__move-btn", disabled: isDisabled || idx === ordered.length - 1, onClick: () => moveItem(idx, idx + 1), "aria-label": `Move ${item} down` }, index.h("co-icon", { name: "caret-down", size: "14" })))))))));
|
|
644
|
+
}
|
|
645
|
+
// ── Matching (kind: 'matching') ───────────────────────────────────────────
|
|
646
|
+
renderMatching(f, value) {
|
|
647
|
+
const leftItems = Array.isArray(f.originalAttrs.matchLeft) ? f.originalAttrs.matchLeft : [];
|
|
648
|
+
const rightItems = Array.isArray(f.originalAttrs.matchRight) ? f.originalAttrs.matchRight : [];
|
|
649
|
+
// Value is an object mapping left index → selected right value string.
|
|
650
|
+
const pairs = value && typeof value === 'object' ? value : {};
|
|
651
|
+
const isDisabled = this.disabled || f.disabled;
|
|
652
|
+
const isTouched = !!this.snapshot.touched[f.name];
|
|
653
|
+
const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
|
|
654
|
+
const helperText = errors[0] || f.helperText;
|
|
655
|
+
const rightOptions = rightItems.map((r) => ({ label: r, value: r }));
|
|
656
|
+
const handleSelect = (leftIdx, selectedValue) => {
|
|
657
|
+
const next = Object.assign(Object.assign({}, pairs), { [String(leftIdx)]: selectedValue });
|
|
658
|
+
this.handleFieldChange(f.name, next);
|
|
659
|
+
};
|
|
660
|
+
return (index.h("div", { class: "co-form-matching", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && index.h("label", { class: "co-form-matching__label" }, f.label), helperText && index.h("p", { class: "co-form-matching__helper" }, helperText), index.h("div", { class: "co-form-matching__list" }, leftItems.map((term, idx) => {
|
|
661
|
+
var _a;
|
|
662
|
+
return (index.h("div", { class: "co-form-matching__row", key: `${f.name}-${idx}` }, index.h("span", { class: "co-form-matching__term" }, term), index.h("co-icon", { name: "arrow-right", size: "16" }), index.h("co-select", { class: "co-form-matching__select", options: JSON.stringify(rightOptions), value: (_a = pairs[String(idx)]) !== null && _a !== void 0 ? _a : '', placeholder: "Select match\u2026", disabled: isDisabled, onCoChange: (e) => handleSelect(idx, e.detail) })));
|
|
663
|
+
}))));
|
|
664
|
+
}
|
|
524
665
|
get host() { return index.getElement(this); }
|
|
525
666
|
static get watchers() { return {
|
|
526
667
|
"schema": [{
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["co-form.cjs",[[260,"co-form",{"schema":[1],"initialValues":[1,"initial-values"],"schemaInstance":[16],"refResolver":[16],"locale":[1],"layout":[1],"excludeFields":[1,"exclude-fields"],"disabled":[4],"readOnly":[4,"read-only"],"columns":[2],"gap":[1],"footerAlign":[1,"footer-align"],"hideFooter":[4,"hide-footer"],"theme":[1],"snapshot":[32],"refStates":[32],"themeStyles":[32],"hasBg":[32],"setValue":[64],"getValue":[64],"touch":[64],"validateAndCollect":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]],["co-form-wizard.cjs",[[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]},null,{"schema":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
|
|
9
|
+
return index.bootstrapLazy([["co-form.cjs",[[260,"co-form",{"schema":[1],"initialValues":[1,"initial-values"],"schemaInstance":[16],"refResolver":[16],"locale":[1],"layout":[1],"excludeFields":[1,"exclude-fields"],"disabled":[4],"readOnly":[4,"read-only"],"columns":[2],"gap":[1],"footerAlign":[1,"footer-align"],"hideFooter":[4,"hide-footer"],"validateOn":[1,"validate-on"],"theme":[1],"snapshot":[32],"refStates":[32],"themeStyles":[32],"hasBg":[32],"orderingDragIdx":[32],"orderingDropIdx":[32],"setValue":[64],"getValue":[64],"touch":[64],"validateAndCollect":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]],["co-form-wizard.cjs",[[260,"co-form-wizard",{"schema":[1],"initialValues":[1,"initial-values"],"locale":[1],"layout":[1],"columns":[2],"theme":[1],"validateOn":[1,"validate-on"],"labels":[1],"currentIndex":[32],"values":[32],"finalScore":[32],"themeStyles":[32],"hasBg":[32]},null,{"schema":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-C1670_IO.js";export{s as setNonce}from"./p-C1670_IO.js";import{g as l}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-
|
|
1
|
+
import{p as e,b as a}from"./p-C1670_IO.js";export{s as setNonce}from"./p-C1670_IO.js";import{g as l}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-95e1cedb",[[260,"co-form",{schema:[1],initialValues:[1,"initial-values"],schemaInstance:[16],refResolver:[16],locale:[1],layout:[1],excludeFields:[1,"exclude-fields"],disabled:[4],readOnly:[4,"read-only"],columns:[2],gap:[1],footerAlign:[1,"footer-align"],hideFooter:[4,"hide-footer"],validateOn:[1,"validate-on"],theme:[1],snapshot:[32],refStates:[32],themeStyles:[32],hasBg:[32],orderingDragIdx:[32],orderingDropIdx:[32],setValue:[64],getValue:[64],touch:[64],validateAndCollect:[64]},null,{schema:[{onSchemaChange:0}],schemaInstance:[{onSchemaChange:0}],locale:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}]]],["p-296094ec",[[260,"co-form-wizard",{schema:[1],initialValues:[1,"initial-values"],locale:[1],layout:[1],columns:[2],theme:[1],validateOn:[1,"validate-on"],labels:[1],currentIndex:[32],values:[32],finalScore:[32],themeStyles:[32],hasBg:[32]},null,{schema:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}]]]],e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,H as a,g as s}from"./p-C1670_IO.js";import{n as i,r,t as n,d as c,f as l,g as d}from"./p-CPE0t-C2.js";const h=class{constructor(o){t(this,o),this.coSubmit=e(this,"coSubmit"),this.coChange=e(this,"coChange"),this.coValidate=e(this,"coValidate"),this.locale="es",this.layout="grid",this.disabled=!1,this.readOnly=!1,this.columns=2,this.gap="lg",this.footerAlign="end",this.hideFooter=!1,this.snapshot={values:{},errors:{},touched:{},isValid:!0,isDirty:!1,isSubmitting:!1},this.refStates={},this.themeStyles=null,this.hasBg=!1,this.controller=null,this.fields=[],this.unsubscribe=null,this.handleFieldChange=(t,e)=>{var o;null===(o=this.controller)||void 0===o||o.setValue(t,e),this.coChange.emit({name:t,value:e})},this.handleSubmit=t=>{if(t.preventDefault(),!this.controller||!this.controller)return;if(!this.controller.validate())return void this.controller.touchAll();const e=this.controller.fields.reduce(((t,e)=>(t[e.name]=e.ajvProperty,t)),{}),o=i(this.controller.state.values,e);this.coSubmit.emit({values:o})},this.handleRefSearch=(t,e)=>{this.refResolver&&this.fetchRefPage(t,e,1,!1)},this.handleRefLoadMore=t=>{var e;if(!this.refResolver)return;const o=null!==(e=this.refStates[t.name])&&void 0!==e?e:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};!o.loading&&o.hasMore&&this.fetchRefPage(t,o.query,o.page+1,!0)},this.handleRefSelect=(t,e)=>{var o,a;const s=null!==(o=e.detail)&&void 0!==o?o:{},i=s.value,r=s.item;if(r){const e=null!==(a=this.refStates[t.name])&&void 0!==a?a:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},o=Array.isArray(i)?i:i?[i]:[],s=[];for(const t of o){const o=e.selectedDisplay.find((e=>e.value===t))||e.options.find((e=>e.value===t))||(r.value===t?r:null);s.push(o||{value:t,label:t})}this.patchRefState(t.name,{selectedDisplay:s})}this.handleFieldChange(t.name,i)}}componentWillLoad(){this.rebuildController(),this.applyTheme()}onSchemaChange(){this.rebuildController()}onThemeChange(){this.applyTheme()}disconnectedCallback(){var t;null===(t=this.unsubscribe)||void 0===t||t.call(this),this.unsubscribe=null}applyTheme(){if(!this.theme)return this.themeStyles=null,void(this.hasBg=!1);const t="string"==typeof this.theme?function(t){try{return JSON.parse(t)}catch(t){return null}}(this.theme):this.theme,e=r(t);this.themeStyles=n(e),this.hasBg=!(!e.background.color&&!e.background.imageUrl)}hostProps(){const t=this.themeStyles;return t?{style:t.inlineStyles}:{}}formProps(){const t=this.themeStyles;return t?Object.assign(Object.assign(Object.assign({"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:t.customProperties}):{}}rebuildController(){var t;null===(t=this.unsubscribe)||void 0===t||t.call(this);const e=this.resolveSchemaInstance();if(!e)return void(this.fields=[]);const o=this.parseInitialValues();this.controller=c({schema:{instance:e},initialValues:o}),this.fields=l(e.formSchema.properties),this.snapshot=this.controller.state,this.unsubscribe=this.controller.subscribe((t=>{this.snapshot=t,this.coValidate.emit({isValid:t.isValid,errors:t.errors})})),this.initRefStates()}resolveSchemaInstance(){var t;if(this.schemaInstance)return this.schemaInstance;if(!this.schema)return console.warn("[co-form] no `schema` attribute provided"),null;try{const e=JSON.parse(this.schema);return e&&"object"==typeof e&&(null===(t=e.formSchema)||void 0===t?void 0:t.properties)?e:d(e,this.locale)}catch(t){return console.error("[co-form] failed to parse `schema` JSON:",t),null}}parseInitialValues(){if(!this.initialValues)return{};try{return JSON.parse(this.initialValues)||{}}catch(t){return console.error("[co-form] failed to parse `initialValues` JSON:",t),{}}}get excludedSet(){return this.excludeFields?new Set(this.excludeFields.split(",").map((t=>t.trim())).filter(Boolean)):new Set}async setValue(t,e){this.handleFieldChange(t,e)}async getValue(t){var e;return null===(e=this.controller)||void 0===e?void 0:e.getValue(t)}async touch(t){var e;null===(e=this.controller)||void 0===e||e.touch(t)}async validateAndCollect(){if(!this.controller)return{valid:!1,values:{}};if(!this.controller.validate())return this.controller.touchAll(),{valid:!1,values:this.controller.state.values};const t=this.controller.fields.reduce(((t,e)=>(t[e.name]=e.ajvProperty,t)),{});return{valid:!0,values:i(this.controller.state.values,t)}}hasSlotContent(t){return!!this.host.querySelector(`[slot="${t}"]`)}initRefStates(){const t={},e=[];for(const o of this.fields){if("ref"!==o.kind)continue;const a=this.snapshot.values[o.name],s={options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},{ids:i,display:r}=this.normalizeRefValue(o,a);s.selectedDisplay=r,t[o.name]=s;const n=i.filter((t=>!r.some((e=>e.value===t))));n.length>0&&e.push({field:o,ids:n})}this.refStates=t;for(const{field:t,ids:o}of e)this.hydrateRefFieldLabels(t,o)}normalizeRefValue(t,e){const o=t.originalAttrs.displayName||"name",a=[],s=[],i=t=>{var e,i;t&&("string"==typeof t?a.push(t):"object"==typeof t&&t._id&&(a.push(t._id),s.push({value:t._id,label:String(null!==(i=null!==(e=t[o])&&void 0!==e?e:t.name)&&void 0!==i?i:t._id),meta:t})))};return Array.isArray(e)?e.forEach(i):i(e),{ids:a,display:s}}async hydrateRefFieldLabels(t,e){var o;if(this.refResolver){this.patchRefState(t.name,{loading:!0});try{const a=await this.refResolver({model:t.originalAttrs.ref,ids:e}),s=null!==(o=this.refStates[t.name])&&void 0!==o?o:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},i=new Set(s.selectedDisplay.map((t=>t.value))),r=[...s.selectedDisplay];for(const t of a.options)i.has(t.value)||r.push(t);this.patchRefState(t.name,{selectedDisplay:r,loading:!1})}catch(e){console.error(`[co-form] refResolver failed to hydrate "${t.name}":`,e),this.patchRefState(t.name,{loading:!1})}}else console.warn(`[co-form] field "${t.name}" has unpopulated values but no refResolver is set; labels will fall back to raw ids.`)}patchRefState(t,e){var o;const a=null!==(o=this.refStates[t])&&void 0!==o?o:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};this.refStates=Object.assign(Object.assign({},this.refStates),{[t]:Object.assign(Object.assign({},a),e)})}async fetchRefPage(t,e,o,a){var s,i,r;if(this.refResolver){this.patchRefState(t.name,{loading:!0,query:e});try{const n=await this.refResolver({model:t.originalAttrs.ref,query:e,page:o,pageSize:20}),c=null!==(s=this.refStates[t.name])&&void 0!==s?s:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},l=a?[...c.options,...n.options]:n.options,d=null!==(i=n.total)&&void 0!==i?i:l.length,h=null!==(r=n.hasMore)&&void 0!==r?r:20*o<d;this.patchRefState(t.name,{options:l,total:d,hasMore:h,page:o,loading:!1})}catch(e){console.error("[co-form] refResolver failed:",e),this.patchRefState(t.name,{loading:!1})}}}refValueAsString(t,e){if(null==e)return"";const o=!!t.originalAttrs.multiple||"array"===t.originalAttrs.type;if(Array.isArray(e)){const t=e.map((t=>"string"==typeof t?t:(null==t?void 0:t._id)||""));return JSON.stringify(t)}return"string"==typeof e?o?JSON.stringify([e]):e:"object"==typeof e&&e._id?o?JSON.stringify([e._id]):String(e._id):""}render(){var t;const e=this.excludedSet,s=this.fields.filter((t=>!e.has(t.name)&&(this.controller?this.controller.getFieldState(t.name).visible:!t.hidden))),i="grid"===this.layout?{"grid-template-columns":`repeat(${this.columns}, minmax(0, 1fr))`}:void 0,r=null===(t=this.themeStyles)||void 0===t?void 0:t.customCss;return o(a,Object.assign({},this.hostProps()),o("form",Object.assign({onSubmit:this.handleSubmit},this.formProps()),r&&o("style",null,r),o("slot",{name:"header"}),o("div",{class:`co-form-layout co-form-layout--${this.layout} co-form-layout--gap-${this.gap}`,style:i},s.map((t=>o("div",{key:t.name,class:"co-form-field-wrap","data-full":t.fullWidth?"true":"false","data-co-field":t.name,"data-co-field-kind":t.kind},this.renderField(t))))),!this.hideFooter&&o("div",{class:`co-form-footer co-form-footer--${this.footerAlign}`},o("slot",{name:"footer"},o("co-button",{type:"submit",label:"Enviar",variant:"primary"})))))}renderField(t){var e,a,s,i,r,n,c,l;const d=`field:${t.name}`;if(this.hasSlotContent(d))return o("slot",{name:d});const h=!!this.snapshot.touched[t.name]&&this.snapshot.errors[t.name]||[],u=h.length>0?"error":"default",f=h[0]||t.helperText,p=this.snapshot.values[t.name],m=null===(e=this.controller)||void 0===e?void 0:e.getFieldState(t.name),g=null!==(a=null==m?void 0:m.required)&&void 0!==a?a:t.required,v={key:t.name,label:t.label,placeholder:t.placeholder,required:g,disabled:this.disabled||(null==m?void 0:m.disabled)||t.disabled,status:u,helperText:f};switch(t.kind){case"text":return o("co-input",Object.assign({},v,{value:null!=p?p:"",onCoInput:e=>this.handleFieldChange(t.name,e.detail)}));case"textarea":case"html":return o("co-input",Object.assign({},v,{multiline:!0,value:null!=p?p:"",onCoInput:e=>this.handleFieldChange(t.name,e.detail)}));case"date":return o("co-input",Object.assign({},v,{type:"date",value:null!=p?p:"",onCoInput:e=>this.handleFieldChange(t.name,e.detail)}));case"number":return o("co-number-field",Object.assign({},v,{value:"number"==typeof p?p:void 0,onCoChange:e=>this.handleFieldChange(t.name,e.detail)}));case"boolean":return o("co-switch",Object.assign({},v,{checked:!!p,onCoChange:e=>this.handleFieldChange(t.name,e.detail)}));case"select":return o("co-select",Object.assign({},v,{options:JSON.stringify(this.optionsFor(t)),value:String(null!=p?p:""),onCoChange:e=>this.handleFieldChange(t.name,e.detail)}));case"rating":return o("co-rating",Object.assign({},v,{value:"number"==typeof p?p:0,max:Number(null!==(s=t.originalAttrs.max)&&void 0!==s?s:5),onCoChange:e=>this.handleFieldChange(t.name,e.detail)}));case"slider":return o("co-slider",Object.assign({},v,{value:"number"==typeof p?p:Number(null!==(i=t.originalAttrs.min)&&void 0!==i?i:0),min:Number(null!==(r=t.originalAttrs.min)&&void 0!==r?r:0),max:Number(null!==(n=t.originalAttrs.max)&&void 0!==n?n:100),step:Number(null!==(c=t.originalAttrs.step)&&void 0!==c?c:1),onCoChange:e=>this.handleFieldChange(t.name,e.detail)}));case"color":return o("co-input",Object.assign({},v,{type:"color",value:"string"==typeof p?p:"#000000",onCoInput:e=>this.handleFieldChange(t.name,e.detail)}));case"section":return o("div",{class:"co-form-section",key:t.name},o("h3",{class:"co-form-section__title"},t.label),t.helperText&&o("p",{class:"co-form-section__desc"},t.helperText));case"file":return o("co-input",Object.assign({},v,{type:"file",onCoInput:e=>this.handleFieldChange(t.name,e.detail)}));case"array":return this.renderRepeater(t,p);case"ref":{const e=null!==(l=this.refStates[t.name])&&void 0!==l?l:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};return o("co-ref-field",Object.assign({},v,{model:t.originalAttrs.ref,multiple:!!t.originalAttrs.multiple||"array"===t.originalAttrs.type,value:this.refValueAsString(t,p),options:JSON.stringify(e.options),selectedDisplay:JSON.stringify(e.selectedDisplay),loading:e.loading,total:e.total,onCoOpen:()=>{this.refResolver&&0===e.options.length&&!e.loading&&this.fetchRefPage(t,"",1,!1)},onCoSearch:e=>this.handleRefSearch(t,e.detail),onCoLoadMore:()=>this.handleRefLoadMore(t),onCoChange:e=>this.handleRefSelect(t,e)}))}default:return o("slot",{name:`field:${t.name}`})}}optionsFor(t){const e=t.originalAttrs.enum;return Array.isArray(e)?e.map((t=>({label:String(t),value:String(t)}))):[]}renderRepeater(t,e){const a=Array.isArray(e)?e:[],s=t.originalAttrs.itemSchema||t.originalAttrs.objectShape||{},i=Object.keys(s),r=e=>this.handleFieldChange(t.name,e);return o("div",{class:"co-form-repeater",key:t.name},t.label&&o("label",{class:"co-form-repeater__label"},t.label),a.map(((e,n)=>o("div",{class:"co-form-repeater__row",key:`${t.name}-${n}`},o("div",{class:"co-form-repeater__fields"},i.map((i=>{var c,l;return o("co-input",{key:i,label:(null===(c=s[i])||void 0===c?void 0:c.label)||i,value:null!==(l=e[i])&&void 0!==l?l:"",disabled:this.disabled||t.disabled,onCoInput:t=>((t,e,o)=>{const s=a.map(((a,s)=>s===t?Object.assign(Object.assign({},a),{[e]:o}):a));r(s)})(n,i,t.detail)})}))),o("co-icon-button",{icon:"trash",variant:"ghost",onClick:()=>(t=>r(a.filter(((e,o)=>o!==t))))(n),disabled:this.disabled||t.disabled})))),o("co-button",{label:"Agregar",variant:"outlined","icon-left":"plus",onClick:()=>{const t=i.reduce(((t,e)=>{var o;return t[e]=null===(o=s[e])||void 0===o?void 0:o.default,t}),{});r([...a,t])},disabled:this.disabled||t.disabled}))}get host(){return s(this)}static get watchers(){return{schema:[{onSchemaChange:0}],schemaInstance:[{onSchemaChange:0}],locale:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}}};h.style=':host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-layout{display:grid;gap:var(--co-spacing-lg, 16px)}.co-form-layout--gap-sm{gap:var(--co-spacing-sm, 8px)}.co-form-layout--gap-md{gap:var(--co-spacing-md, 12px)}.co-form-layout--gap-lg{gap:var(--co-spacing-lg, 16px)}.co-form-layout--grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.co-form-layout--stack{grid-template-columns:1fr}@media (max-width: 640px){.co-form-layout--grid{grid-template-columns:1fr !important}}.co-form-layout>[data-full="true"],.co-form-layout .co-form-section,.co-form-layout .co-form-repeater{grid-column:1 / -1}.co-form-footer--start{justify-content:flex-start}.co-form-footer--end{justify-content:flex-end}.co-form-footer--center{justify-content:center}.co-form-footer--between{justify-content:space-between}.co-form-footer--stretch{justify-content:stretch}.co-form-footer--stretch>*{flex:1}.co-form-footer{margin-top:var(--co-spacing-lg, 16px);display:flex;justify-content:flex-end;gap:var(--co-spacing-sm, 8px)}:host{display:block;background-repeat:no-repeat}form[data-has-bg]{max-width:720px;margin:var(--co-spacing-3xl, 32px) auto;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.08)}form[data-theme="dark"][data-has-bg]{background:#232936;color:#f9fafb;box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}form[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-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--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:var(--co-semantic-text-default)}form[data-density="compact"] .co-form-layout{gap:var(--co-spacing-sm, 8px)}form[data-density="compact"] .co-form-footer{margin-top:var(--co-spacing-sm, 8px)}form[data-appearance="flat"] .co-form-section{border-top:0;padding-top:0}form[data-appearance="flat"][data-has-bg]{background:transparent;box-shadow:none;padding:0}form[data-hide-header] .co-form-layout>slot[name="header"]{display:none}:host{--co-form-header-bg-applied:var(--co-form-header-bg, transparent)}.co-form-section{grid-column:1 / -1;border-top:1px solid var(--co-semantic-border-default, #e5e7eb);padding-top:var(--co-spacing-md, 12px);margin-top:var(--co-spacing-sm, 8px)}.co-form-section__title{margin:0 0 var(--co-spacing-xxs, 2px);font-size:var(--co-font-size-16, 16px);font-weight:600;color:var(--co-semantic-text-default, #111)}.co-form-section__desc{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-repeater{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-repeater__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-repeater__row{display:flex;align-items:flex-start;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);background:var(--co-semantic-surface-primary, #fff)}.co-form-repeater__fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:var(--co-spacing-sm, 8px)}';export{h as CoForm}
|
|
1
|
+
import{r as o,c as e,h as r,H as a,g as t}from"./p-C1670_IO.js";import{n as i,r as c,t as s,d as n,f as l,g as d}from"./p-CzvtCEKX.js";const m=class{constructor(r){o(this,r),this.coSubmit=e(this,"coSubmit"),this.coChange=e(this,"coChange"),this.coValidate=e(this,"coValidate"),this.locale="es",this.layout="grid",this.disabled=!1,this.readOnly=!1,this.columns=2,this.gap="lg",this.footerAlign="end",this.hideFooter=!1,this.validateOn="change",this.snapshot={values:{},errors:{},touched:{},isValid:!0,isDirty:!1,isSubmitting:!1},this.refStates={},this.themeStyles=null,this.hasBg=!1,this.controller=null,this.fields=[],this.unsubscribe=null,this.handleFieldChange=(o,e)=>{var r;null===(r=this.controller)||void 0===r||r.setValue(o,e),this.coChange.emit({name:o,value:e})},this.handleSubmit=o=>{if(o.preventDefault(),!this.controller||!this.controller)return;if(!this.controller.validate())return void this.controller.touchAll();const e=this.controller.fields.reduce(((o,e)=>(o[e.name]=e.ajvProperty,o)),{}),r=i(this.controller.state.values,e);this.coSubmit.emit({values:r})},this.handleRefSearch=(o,e)=>{this.refResolver&&this.fetchRefPage(o,e,1,!1)},this.handleRefLoadMore=o=>{var e;if(!this.refResolver)return;const r=null!==(e=this.refStates[o.name])&&void 0!==e?e:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};!r.loading&&r.hasMore&&this.fetchRefPage(o,r.query,r.page+1,!0)},this.handleRefSelect=(o,e)=>{var r,a;const t=null!==(r=e.detail)&&void 0!==r?r:{},i=t.value,c=t.item;if(c){const e=null!==(a=this.refStates[o.name])&&void 0!==a?a:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},r=Array.isArray(i)?i:i?[i]:[],t=[];for(const o of r){const r=e.selectedDisplay.find((e=>e.value===o))||e.options.find((e=>e.value===o))||(c.value===o?c:null);t.push(r||{value:o,label:o})}this.patchRefState(o.name,{selectedDisplay:t})}this.handleFieldChange(o.name,i)},this.orderingDragIdx=null,this.orderingDropIdx=null}componentWillLoad(){this.rebuildController(),this.applyTheme()}onSchemaChange(){this.rebuildController()}onThemeChange(){this.applyTheme()}disconnectedCallback(){var o;null===(o=this.unsubscribe)||void 0===o||o.call(this),this.unsubscribe=null}applyTheme(){if(!this.theme)return this.themeStyles=null,void(this.hasBg=!1);const o="string"==typeof this.theme?function(o){try{return JSON.parse(o)}catch(o){return null}}(this.theme):this.theme,e=c(o);this.themeStyles=s(e),this.hasBg=!(!e.background.color&&!e.background.imageUrl)}hostProps(){const o=this.themeStyles;return o?{style:o.inlineStyles}:{}}formProps(){const o=this.themeStyles;return o?Object.assign(Object.assign(Object.assign({"data-theme":o.modifiers.colorScheme,"data-density":o.modifiers.density,"data-appearance":o.modifiers.appearance,"data-radius":o.modifiers.radius},this.hasBg?{"data-has-bg":""}:{}),o.modifiers.hideHeader?{"data-hide-header":""}:{}),{style:o.customProperties}):{}}rebuildController(){var o;null===(o=this.unsubscribe)||void 0===o||o.call(this);const e=this.resolveSchemaInstance();if(!e)return void(this.fields=[]);const r=this.parseInitialValues();this.controller=n({schema:{instance:e},initialValues:r,validateOn:this.validateOn}),this.fields=l(e.formSchema.properties),this.snapshot=this.controller.state,this.unsubscribe=this.controller.subscribe((o=>{this.snapshot=o,this.coValidate.emit({isValid:o.isValid,errors:o.errors})})),this.initRefStates()}resolveSchemaInstance(){var o;if(this.schemaInstance)return this.schemaInstance;if(!this.schema)return console.warn("[co-form] no `schema` attribute provided"),null;try{const e=JSON.parse(this.schema);return e&&"object"==typeof e&&(null===(o=e.formSchema)||void 0===o?void 0:o.properties)?e:d(e,this.locale)}catch(o){return console.error("[co-form] failed to parse `schema` JSON:",o),null}}parseInitialValues(){if(!this.initialValues)return{};try{return JSON.parse(this.initialValues)||{}}catch(o){return console.error("[co-form] failed to parse `initialValues` JSON:",o),{}}}get excludedSet(){return this.excludeFields?new Set(this.excludeFields.split(",").map((o=>o.trim())).filter(Boolean)):new Set}async setValue(o,e){this.handleFieldChange(o,e)}async getValue(o){var e;return null===(e=this.controller)||void 0===e?void 0:e.getValue(o)}async touch(o){var e;null===(e=this.controller)||void 0===e||e.touch(o)}async validateAndCollect(){if(!this.controller)return{valid:!1,values:{}};if(!this.controller.validate())return this.controller.touchAll(),{valid:!1,values:this.controller.state.values};const o=this.controller.fields.reduce(((o,e)=>(o[e.name]=e.ajvProperty,o)),{});return{valid:!0,values:i(this.controller.state.values,o)}}hasSlotContent(o){return!!this.host.querySelector(`[slot="${o}"]`)}initRefStates(){const o={},e=[];for(const r of this.fields){if("ref"!==r.kind)continue;const a=this.snapshot.values[r.name],t={options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},{ids:i,display:c}=this.normalizeRefValue(r,a);t.selectedDisplay=c,o[r.name]=t;const s=i.filter((o=>!c.some((e=>e.value===o))));s.length>0&&e.push({field:r,ids:s})}this.refStates=o;for(const{field:o,ids:r}of e)this.hydrateRefFieldLabels(o,r)}normalizeRefValue(o,e){const r=o.originalAttrs.displayName||"name",a=[],t=[],i=o=>{var e,i;o&&("string"==typeof o?a.push(o):"object"==typeof o&&o._id&&(a.push(o._id),t.push({value:o._id,label:String(null!==(i=null!==(e=o[r])&&void 0!==e?e:o.name)&&void 0!==i?i:o._id),meta:o})))};return Array.isArray(e)?e.forEach(i):i(e),{ids:a,display:t}}async hydrateRefFieldLabels(o,e){var r;if(this.refResolver){this.patchRefState(o.name,{loading:!0});try{const a=await this.refResolver({model:o.originalAttrs.ref,ids:e}),t=null!==(r=this.refStates[o.name])&&void 0!==r?r:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},i=new Set(t.selectedDisplay.map((o=>o.value))),c=[...t.selectedDisplay];for(const o of a.options)i.has(o.value)||c.push(o);this.patchRefState(o.name,{selectedDisplay:c,loading:!1})}catch(e){console.error(`[co-form] refResolver failed to hydrate "${o.name}":`,e),this.patchRefState(o.name,{loading:!1})}}else console.warn(`[co-form] field "${o.name}" has unpopulated values but no refResolver is set; labels will fall back to raw ids.`)}patchRefState(o,e){var r;const a=null!==(r=this.refStates[o])&&void 0!==r?r:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};this.refStates=Object.assign(Object.assign({},this.refStates),{[o]:Object.assign(Object.assign({},a),e)})}async fetchRefPage(o,e,r,a){var t,i,c;if(this.refResolver){this.patchRefState(o.name,{loading:!0,query:e});try{const s=await this.refResolver({model:o.originalAttrs.ref,query:e,page:r,pageSize:20}),n=null!==(t=this.refStates[o.name])&&void 0!==t?t:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""},l=a?[...n.options,...s.options]:s.options,d=null!==(i=s.total)&&void 0!==i?i:l.length,m=null!==(c=s.hasMore)&&void 0!==c?c:20*r<d;this.patchRefState(o.name,{options:l,total:d,hasMore:m,page:r,loading:!1})}catch(e){console.error("[co-form] refResolver failed:",e),this.patchRefState(o.name,{loading:!1})}}}refValueAsString(o,e){if(null==e)return"";const r=!!o.originalAttrs.multiple||"array"===o.originalAttrs.type;if(Array.isArray(e)){const o=e.map((o=>"string"==typeof o?o:(null==o?void 0:o._id)||""));return JSON.stringify(o)}return"string"==typeof e?r?JSON.stringify([e]):e:"object"==typeof e&&e._id?r?JSON.stringify([e._id]):String(e._id):""}render(){var o;const e=this.excludedSet,t=this.fields.filter((o=>!e.has(o.name)&&(this.controller?this.controller.getFieldState(o.name).visible:!o.hidden))),i="grid"===this.layout?{"grid-template-columns":`repeat(${this.columns}, minmax(0, 1fr))`}:void 0,c=null===(o=this.themeStyles)||void 0===o?void 0:o.customCss;return r(a,Object.assign({},this.hostProps()),r("form",Object.assign({onSubmit:this.handleSubmit},this.formProps()),c&&r("style",null,c),r("slot",{name:"header"}),r("div",{class:`co-form-layout co-form-layout--${this.layout} co-form-layout--gap-${this.gap}`,style:i},t.map((o=>r("div",{key:o.name,class:"co-form-field-wrap","data-full":o.fullWidth?"true":"false","data-co-field":o.name,"data-co-field-kind":o.kind},this.renderField(o))))),!this.hideFooter&&r("div",{class:`co-form-footer co-form-footer--${this.footerAlign}`},r("slot",{name:"footer"},r("co-button",{type:"submit",label:"Enviar",variant:"primary"})))))}renderField(o){var e,a,t,i,c,s,n,l;const d=`field:${o.name}`;if(this.hasSlotContent(d))return r("slot",{name:d});const m=!!this.snapshot.touched[o.name]&&this.snapshot.errors[o.name]||[],f=m.length>0?"error":"default",p=m[0]||o.helperText,h=this.snapshot.values[o.name],u=null===(e=this.controller)||void 0===e?void 0:e.getFieldState(o.name),g=this.disabled||(null==u?void 0:u.disabled)||o.disabled,v=null!==(a=null==u?void 0:u.required)&&void 0!==a?a:o.required,b={key:o.name,label:o.label,placeholder:o.placeholder,required:v,disabled:g,status:f,helperText:p};switch(o.kind){case"text":return r("co-input",Object.assign({},b,{value:null!=h?h:"",onCoInput:e=>this.handleFieldChange(o.name,e.detail)}));case"textarea":{const e=`co-form-${o.name}`,a=p?`co-form-${o.name}-helper`:void 0;return r("div",{class:"co-form-textarea-wrap","data-full":o.originalAttrs.full?"true":void 0},o.label&&r("label",{class:"co-form-textarea-wrap__label",htmlFor:e},o.label),r("textarea",{id:e,class:{"co-form-textarea":!0,"co-form-textarea--error":"error"===f},name:o.name,placeholder:o.placeholder,disabled:g,required:v,rows:4,"aria-invalid":"error"===f?"true":void 0,"aria-describedby":a,value:null!=h?h:"",onInput:e=>this.handleFieldChange(o.name,e.target.value)}),p&&r("p",{id:a,class:"co-form-textarea-wrap__helper","data-status":f},p))}case"html":return r("co-input",Object.assign({},b,{multiline:!0,value:null!=h?h:"",onCoInput:e=>this.handleFieldChange(o.name,e.detail)}));case"date":return r("co-input",Object.assign({},b,{type:"date",value:null!=h?h:"",onCoInput:e=>this.handleFieldChange(o.name,e.detail)}));case"number":return r("co-number-field",Object.assign({},b,{value:"number"==typeof h?h:void 0,onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"boolean":return r("co-switch",Object.assign({},b,{checked:!!h,onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"select":return r("co-select",Object.assign({},b,{options:JSON.stringify(this.optionsFor(o)),value:String(null!=h?h:""),onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"radio":return r("co-radio-group",Object.assign({},b,{options:JSON.stringify(this.optionsFor(o)),value:String(null!=h?h:""),onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"checkbox":return r("co-checkbox-group",Object.assign({},b,{options:JSON.stringify(this.optionsFor(o)),value:JSON.stringify(Array.isArray(h)?h:[]),onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"rating":return r("co-rating",Object.assign({},b,{value:"number"==typeof h?h:0,max:Number(null!==(t=o.originalAttrs.max)&&void 0!==t?t:5),onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"slider":return r("co-slider",Object.assign({},b,{value:"number"==typeof h?h:Number(null!==(i=o.originalAttrs.min)&&void 0!==i?i:0),min:Number(null!==(c=o.originalAttrs.min)&&void 0!==c?c:0),max:Number(null!==(s=o.originalAttrs.max)&&void 0!==s?s:100),step:Number(null!==(n=o.originalAttrs.step)&&void 0!==n?n:1),onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"color":return r("co-color-picker",Object.assign({},b,{value:"string"==typeof h?h:"",presets:o.originalAttrs.presets?JSON.stringify(o.originalAttrs.presets):void 0,onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"section":return r("div",{class:"co-form-section",key:o.name},r("h3",{class:"co-form-section__title"},o.label),o.helperText&&r("p",{class:"co-form-section__desc"},o.helperText));case"phone":return r("co-phone-field",Object.assign({},b,{value:"string"==typeof h?h:"",defaultCountry:o.originalAttrs.defaultCountry||"",onCoChange:e=>this.handleFieldChange(o.name,e.detail)}));case"file":return r("co-input",Object.assign({},b,{type:"file",onCoInput:e=>this.handleFieldChange(o.name,e.detail)}));case"ordering":return this.renderOrdering(o,h);case"matching":return this.renderMatching(o,h);case"image-choice":return this.renderImageChoice(o,h);case"array":return this.renderRepeater(o,h);case"ref":{const e=null!==(l=this.refStates[o.name])&&void 0!==l?l:{options:[],selectedDisplay:[],loading:!1,total:0,hasMore:!1,page:1,query:""};return r("co-ref-field",Object.assign({},b,{model:o.originalAttrs.ref,multiple:!!o.originalAttrs.multiple||"array"===o.originalAttrs.type,value:this.refValueAsString(o,h),options:JSON.stringify(e.options),selectedDisplay:JSON.stringify(e.selectedDisplay),loading:e.loading,total:e.total,onCoOpen:()=>{this.refResolver&&0===e.options.length&&!e.loading&&this.fetchRefPage(o,"",1,!1)},onCoSearch:e=>this.handleRefSearch(o,e.detail),onCoLoadMore:()=>this.handleRefLoadMore(o),onCoChange:e=>this.handleRefSelect(o,e)}))}default:return r("slot",{name:`field:${o.name}`})}}optionsFor(o){const e=o.originalAttrs.enum;return Array.isArray(e)?e.map((o=>({label:String(o),value:String(o)}))):[]}renderRepeater(o,e){const a=Array.isArray(e)?e:[],t=o.originalAttrs.itemSchema||o.originalAttrs.objectShape||{},i=Object.keys(t),c=e=>this.handleFieldChange(o.name,e);return r("div",{class:"co-form-repeater",key:o.name},o.label&&r("label",{class:"co-form-repeater__label"},o.label),a.map(((e,s)=>r("div",{class:"co-form-repeater__row",key:`${o.name}-${s}`},r("div",{class:"co-form-repeater__fields"},i.map((i=>{var n,l;return r("co-input",{key:i,label:(null===(n=t[i])||void 0===n?void 0:n.label)||i,value:null!==(l=e[i])&&void 0!==l?l:"",disabled:this.disabled||o.disabled,onCoInput:o=>((o,e,r)=>{const t=a.map(((a,t)=>t===o?Object.assign(Object.assign({},a),{[e]:r}):a));c(t)})(s,i,o.detail)})}))),r("co-icon-button",{icon:"trash",variant:"ghost",onClick:()=>(o=>c(a.filter(((e,r)=>r!==o))))(s),disabled:this.disabled||o.disabled})))),r("co-button",{label:"Agregar",variant:"outlined","icon-left":"plus",onClick:()=>{const o=i.reduce(((o,e)=>{var r;return o[e]=null===(r=t[e])||void 0===r?void 0:r.default,o}),{});c([...a,o])},disabled:this.disabled||o.disabled}))}renderImageChoice(o,e){const a=Array.isArray(o.originalAttrs.enum)?o.originalAttrs.enum:[],t=Array.isArray(o.originalAttrs.optionImages)?o.originalAttrs.optionImages:[],i=!!o.originalAttrs.multiSelect,c=this.disabled||o.disabled,s=!!this.snapshot.touched[o.name]&&this.snapshot.errors[o.name]||[],n=s[0]||o.helperText,l=i?Array.isArray(e)?e:[]:null!=e&&""!==e?[String(e)]:[],d=e=>{if(!c)if(i){const r=l.includes(e)?l.filter((o=>o!==e)):[...l,e];this.handleFieldChange(o.name,r)}else this.handleFieldChange(o.name,e)};return r("div",{class:"co-form-image-choice",key:o.name,"data-full":o.originalAttrs.full?"true":void 0},o.label&&r("label",{class:"co-form-image-choice__label"},o.label),n&&r("p",{class:"co-form-image-choice__helper","data-status":s.length?"error":void 0},n),r("div",{class:"co-form-image-choice__grid",role:i?"group":"radiogroup","aria-label":o.label||o.name},a.map(((e,a)=>{const s=l.includes(e),n=t[a]||"";return r("div",{class:`co-form-image-choice__card ${s?"is-selected":""} ${c?"is-disabled":""}`,key:`${o.name}-${a}`,onClick:()=>d(e),onKeyDown:o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),d(e))},role:i?"checkbox":"radio","aria-checked":s?"true":"false","aria-disabled":c?"true":void 0,tabIndex:c?-1:0},r("div",{class:"co-form-image-choice__img-wrap"},n?r("img",{src:n,alt:e,class:"co-form-image-choice__img"}):r("co-icon",{name:"image-square",size:"32"})),r("div",{class:"co-form-image-choice__footer"},r("span",{class:"co-form-image-choice__check"},s&&r("co-icon",{name:"check-circle",size:"18",weight:"fill"}),!s&&r("co-icon",{name:"circle",size:"18"})),e&&r("span",{class:"co-form-image-choice__text"},e)))}))))}renderOrdering(o,e){const a=Array.isArray(o.originalAttrs.enum)?o.originalAttrs.enum:[],t=Array.isArray(e)?e:[...a],i=this.disabled||o.disabled,c=(!!this.snapshot.touched[o.name]&&this.snapshot.errors[o.name]||[])[0]||o.helperText,s=(o,e)=>{i||(this.orderingDragIdx=e,o.dataTransfer&&(o.dataTransfer.effectAllowed="move",o.dataTransfer.setData("text/plain",String(e))))},n=(o,e)=>{null!==this.orderingDragIdx&&(o.preventDefault(),o.dataTransfer&&(o.dataTransfer.dropEffect="move"),this.orderingDropIdx=e)},l=(e,r)=>{e.preventDefault();const a=this.orderingDragIdx;if(this.orderingDragIdx=null,this.orderingDropIdx=null,null===a||a===r)return;const i=[...t],[c]=i.splice(a,1);i.splice(a<r?r-1:r,0,c),this.handleFieldChange(o.name,i)},d=()=>{this.orderingDragIdx=null,this.orderingDropIdx=null},m=(e,r)=>{if(i||r<0||r>=t.length)return;const a=[...t],[c]=a.splice(e,1);a.splice(r,0,c),this.handleFieldChange(o.name,a)};return r("div",{class:"co-form-ordering",key:o.name,"data-full":o.originalAttrs.full?"true":void 0},o.label&&r("label",{class:"co-form-ordering__label"},o.label),c&&r("p",{class:"co-form-ordering__helper"},c),r("div",{class:"co-form-ordering__list",role:"list","aria-label":o.label},t.map(((e,a)=>r("div",{class:{"co-form-ordering__item":!0,"is-dragging":this.orderingDragIdx===a,"is-drop-target":this.orderingDropIdx===a&&this.orderingDragIdx!==a},key:`${o.name}-${a}`,role:"listitem",draggable:!i,onDragStart:o=>s(o,a),onDragOver:o=>n(o,a),onDrop:o=>l(o,a),onDragEnd:d},r("span",{class:"co-form-ordering__grip","aria-hidden":"true"},r("co-icon",{name:"dots-six-vertical",size:"16"})),r("span",{class:"co-form-ordering__num"},a+1),r("span",{class:"co-form-ordering__text"},e),r("span",{class:"co-form-ordering__actions"},r("button",{type:"button",class:"co-form-ordering__move-btn",disabled:i||0===a,onClick:()=>m(a,a-1),"aria-label":`Move ${e} up`},r("co-icon",{name:"caret-up",size:"14"})),r("button",{type:"button",class:"co-form-ordering__move-btn",disabled:i||a===t.length-1,onClick:()=>m(a,a+1),"aria-label":`Move ${e} down`},r("co-icon",{name:"caret-down",size:"14"}))))))))}renderMatching(o,e){const a=Array.isArray(o.originalAttrs.matchLeft)?o.originalAttrs.matchLeft:[],t=Array.isArray(o.originalAttrs.matchRight)?o.originalAttrs.matchRight:[],i=e&&"object"==typeof e?e:{},c=this.disabled||o.disabled,s=(!!this.snapshot.touched[o.name]&&this.snapshot.errors[o.name]||[])[0]||o.helperText,n=t.map((o=>({label:o,value:o}))),l=(e,r)=>{const a=Object.assign(Object.assign({},i),{[String(e)]:r});this.handleFieldChange(o.name,a)};return r("div",{class:"co-form-matching",key:o.name,"data-full":o.originalAttrs.full?"true":void 0},o.label&&r("label",{class:"co-form-matching__label"},o.label),s&&r("p",{class:"co-form-matching__helper"},s),r("div",{class:"co-form-matching__list"},a.map(((e,a)=>{var t;return r("div",{class:"co-form-matching__row",key:`${o.name}-${a}`},r("span",{class:"co-form-matching__term"},e),r("co-icon",{name:"arrow-right",size:"16"}),r("co-select",{class:"co-form-matching__select",options:JSON.stringify(n),value:null!==(t=i[String(a)])&&void 0!==t?t:"",placeholder:"Select match…",disabled:c,onCoChange:o=>l(a,o.detail)}))}))))}get host(){return t(this)}static get watchers(){return{schema:[{onSchemaChange:0}],schemaInstance:[{onSchemaChange:0}],locale:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}}};m.style=':host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-layout{display:grid;gap:var(--co-spacing-lg, 16px)}.co-form-layout--gap-sm{gap:var(--co-spacing-sm, 8px)}.co-form-layout--gap-md{gap:var(--co-spacing-md, 12px)}.co-form-layout--gap-lg{gap:var(--co-spacing-lg, 16px)}.co-form-layout--grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.co-form-layout--stack{grid-template-columns:1fr}@media (max-width: 640px){.co-form-layout--grid{grid-template-columns:1fr !important}}.co-form-layout>[data-full="true"],.co-form-layout .co-form-section,.co-form-layout .co-form-repeater{grid-column:1 / -1}.co-form-footer--start{justify-content:flex-start}.co-form-footer--end{justify-content:flex-end}.co-form-footer--center{justify-content:center}.co-form-footer--between{justify-content:space-between}.co-form-footer--stretch{justify-content:stretch}.co-form-footer--stretch>*{flex:1}.co-form-footer{margin-top:var(--co-spacing-lg, 16px);display:flex;justify-content:flex-end;gap:var(--co-spacing-sm, 8px)}:host{display:block;background-repeat:no-repeat}form[data-has-bg]{max-width:720px;margin:var(--co-spacing-3xl, 32px) auto;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 24px var(--co-color-opacity-negro-8))}form[data-theme="dark"][data-has-bg]{background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default);box-shadow:0 4px 24px var(--co-color-opacity-negro-50)}form[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-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--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:var(--co-semantic-text-default)}form[data-density="compact"] .co-form-layout{gap:var(--co-spacing-sm, 8px)}form[data-density="compact"] .co-form-footer{margin-top:var(--co-spacing-sm, 8px)}form[data-appearance="flat"] .co-form-section{border-top:0;padding-top:0}form[data-appearance="flat"][data-has-bg]{background:transparent;box-shadow:none;padding:0}form[data-hide-header] .co-form-layout>slot[name="header"]{display:none}:host{--co-form-header-bg-applied:var(--co-form-header-bg, transparent)}.co-form-section{grid-column:1 / -1;border-top:1px solid var(--co-semantic-border-default, #e5e7eb);padding-top:var(--co-spacing-md, 12px);margin-top:var(--co-spacing-sm, 8px)}.co-form-section__title{margin:0 0 var(--co-spacing-xxs, 2px);font-size:var(--co-font-size-16, 16px);font-weight:600;color:var(--co-semantic-text-default, #111)}.co-form-section__desc{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-repeater{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-repeater__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-repeater__row{display:flex;align-items:flex-start;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);background:var(--co-semantic-surface-primary, #fff)}.co-form-repeater__fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:var(--co-spacing-sm, 8px)}.co-form-textarea-wrap{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-form-textarea-wrap__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111)}.co-form-textarea{width:100%;min-height:100px;padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);font-family:var(--co-font-family-primary, sans-serif);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #111);background:var(--co-semantic-surface-secondary, #f7f6f0);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);resize:vertical;outline:none;transition:border-color 120ms;box-sizing:border-box}.co-form-textarea:focus{border-color:var(--co-color-primary-azul, #2563eb)}.co-form-textarea--error{border-color:var(--co-color-status-error, #AA2E1B)}.co-form-textarea:disabled{opacity:0.5;cursor:not-allowed}.co-form-textarea-wrap__helper{margin:0;font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-textarea-wrap__helper[data-status="error"]{color:var(--co-color-status-error, #AA2E1B)}co-number-field{max-width:240px}.co-form-ordering{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-ordering__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-ordering__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-ordering__list{display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-ordering__item{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);background:var(--co-semantic-surface-secondary, #f7f6f0);transition:border-color 120ms, box-shadow 120ms, opacity 120ms;cursor:grab;user-select:none}.co-form-ordering__item:hover{border-color:var(--co-color-primary-azul, #2563eb)}.co-form-ordering__item.is-dragging{opacity:0.4;cursor:grabbing}.co-form-ordering__item.is-drop-target{border-color:var(--co-color-primary-azul, #2563eb);box-shadow:0 -2px 0 0 var(--co-color-primary-azul, #2563eb)}.co-form-ordering__grip{display:flex;align-items:center;color:var(--co-semantic-text-muted, #9ca3af);flex-shrink:0;cursor:grab}.co-form-ordering__num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--co-border-radius-full, 9999px);background:color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 10%, transparent);color:var(--co-color-primary-azul, #2563eb);font-size:12px;font-weight:700;flex-shrink:0}.co-form-ordering__text{flex:1;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #111)}.co-form-ordering__actions{display:flex;flex-direction:column;gap:1px;flex-shrink:0}.co-form-ordering__move-btn{display:flex;align-items:center;justify-content:center;width:22px;height:16px;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted, #9ca3af);cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px)}.co-form-ordering__move-btn:hover:not(:disabled){background:var(--co-semantic-surface-hover, #f3f4f6);color:var(--co-semantic-text-default, #111)}.co-form-ordering__move-btn:disabled{opacity:0.3;cursor:not-allowed}.co-form-matching{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-matching__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-matching__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-matching__list{display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px)}.co-form-matching__row{display:grid;grid-template-columns:1fr 20px 1fr;gap:var(--co-spacing-sm, 8px);align-items:center}.co-form-matching__term{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);border:1px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xxs, 4px);background:var(--co-semantic-surface-secondary, #f7f6f0)}.co-form-matching__row co-icon{color:var(--co-semantic-text-muted, #9ca3af);justify-self:center}.co-form-matching__select{min-width:0}.co-form-image-choice{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px)}.co-form-image-choice__label{font-size:var(--co-font-size-14, 14px);font-weight:500;color:var(--co-semantic-text-default, #111);margin-bottom:var(--co-spacing-xs, 4px)}.co-form-image-choice__helper{margin:0 0 var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-image-choice__helper[data-status="error"]{color:var(--co-color-status-error, #AA2E1B)}.co-form-image-choice__grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:var(--co-spacing-sm, 8px)}.co-form-image-choice__card{display:flex;flex-direction:column;border:2px solid var(--co-semantic-border-default, #e5e7eb);border-radius:var(--co-border-radius-xs, 8px);overflow:hidden;cursor:pointer;transition:border-color 120ms, box-shadow 120ms;background:var(--co-semantic-surface-secondary, #f7f6f0)}.co-form-image-choice__card:hover:not(.is-disabled){border-color:var(--co-color-primary-azul, #2563eb)}.co-form-image-choice__card.is-selected{border-color:var(--co-color-primary-azul, #2563eb);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 20%, transparent)}.co-form-image-choice__card.is-disabled{opacity:0.5;cursor:not-allowed}.co-form-image-choice__img-wrap{width:100%;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--co-semantic-text-muted, #9ca3af)}.co-form-image-choice__img{width:100%;height:100%;object-fit:cover}.co-form-image-choice__footer{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-top:1px solid var(--co-semantic-border-default, #e5e7eb);min-height:32px}.co-form-image-choice__check{flex-shrink:0;display:flex;color:var(--co-semantic-text-muted, #9ca3af)}.co-form-image-choice__card.is-selected .co-form-image-choice__check{color:var(--co-color-primary-azul, #2563eb)}.co-form-image-choice__text{font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-default, #111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}';export{m as CoForm}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as r,h as o,H as t,g as e}from"./p-C1670_IO.js";import{c as i,a as c,r as s,t as d,b as n,e as f}from"./p-CzvtCEKX.js";function l(a){try{return JSON.parse(a)}catch(a){return null}}const m={result:"Result",passed:"Passed",failed:"Failed",prev:"Previous",next:"Next",submit:"Submit",empty:"No pages to display.",pagePrefix:"PAGE"},p=class{constructor(o){a(this,o),this.coSubmit=r(this,"coSubmit"),this.coPageChange=r(this,"coPageChange"),this.coChange=r(this,"coChange"),this.locale="es",this.layout="grid",this.columns=1,this.validateOn="change",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.emitPageChange())},this.handlePrev=()=>{this.currentIndex>0&&(this.currentIndex-=1,this.emitPageChange())},this.handleStepClick=async a=>{if(a!==this.currentIndex){if(a<this.currentIndex)return this.currentIndex=a,void this.emitPageChange();for(;this.currentIndex<a;){if(!await this.commitCurrentPage())return;this.currentIndex+=1}this.emitPageChange()}},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}),this.coChange.emit(a.detail)}}get mergedLabels(){if(!this.labels)return m;const a=l(this.labels);return a&&"object"==typeof a?Object.assign(Object.assign({},m),a):m}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?l(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?l(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||f(a.visibleIf,this.values)))}get currentPage(){var a;return null!==(a=this.activePages[this.currentIndex])&&void 0!==a?a:null}emitPageChange(){const a=this.currentPage;a&&this.coPageChange.emit({index:this.currentIndex,page:a})}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 o(t,Object.assign({},this.hostProps()),o("div",{class:"co-form-wizard__empty"},this.mergedLabels.empty));if(this.finalScore&&(null===(a=this.paged.scoring)||void 0===a?void 0:a.showScore))return o(t,Object.assign({},this.hostProps()),this.renderScorePanel(this.finalScore));const e=r[this.currentIndex],i=0===this.currentIndex,c=this.currentIndex===r.length-1,s=Object.keys(e.fields),d={};for(const a of s)a in this.values&&(d[a]=this.values[a]);return o(t,Object.assign({},this.hostProps()),this.renderInner(r,e,i,c,d))}renderInner(a,r,t,e,i){var c;const s=null===(c=this.themeStyles)||void 0===c?void 0:c.customCss;return o("div",Object.assign({},this.wrapperProps()),s&&o("style",null,s),o("slot",{name:"header"},(this.paged.title||this.paged.description)&&o("header",{class:"co-form-wizard__title-block"},this.paged.title&&o("h1",{class:"co-form-wizard__title"},this.paged.title),this.paged.description&&o("p",{class:"co-form-wizard__title-desc"},this.paged.description))),a.length>1&&o("ol",{class:"co-form-wizard__stepper"},a.map(((a,r)=>o("li",{class:{"co-form-wizard__step":!0,"is-active":r===this.currentIndex,"is-done":r<this.currentIndex},key:a.name},o("button",{type:"button",class:"co-form-wizard__step-btn",onClick:()=>this.handleStepClick(r)},o("span",{class:"co-form-wizard__step-num"},r+1),o("span",{class:"co-form-wizard__step-label"},a.title||a.name)))))),o("section",{class:"co-form-wizard__page-card"},this.renderPageHead(r,a.length>1),o("co-form",{ref:a=>this.currentFormEl=a,schema:JSON.stringify(r.fields),"initial-values":JSON.stringify(i),locale:this.locale,layout:this.layout,columns:this.columns,theme:this.themeForChildren,"validate-on":this.validateOn,"hide-footer":!0,onCoChange:this.handlePageChange}),o("div",{class:"co-form-wizard__nav"},a.length>1&&o("co-button",{label:this.mergedLabels.prev,variant:"stroke",disabled:t,onClick:this.handlePrev}),o("co-button",e?{label:this.mergedLabels.submit,variant:"primary",onClick:this.handleSubmit}:{label:this.mergedLabels.next,variant:"primary",onClick:this.handleNext}))),o("slot",{name:"footer"}))}renderPageHead(a,r){const t=!a.title||/^Page \d+$/i.test(a.title),e=(!!a.title&&!t||r&&a.title)&&!a.hideTitle,i=!!a.description&&!a.hideDescription,c=r&&!a.hideTitle;return c||e||i?o("header",{class:"co-form-wizard__page-head"},c&&o("span",{class:"co-form-wizard__page-pill"},this.mergedLabels.pagePrefix," ",this.currentIndex+1),e&&o("h2",{class:"co-form-wizard__page-title"},a.title),i&&o("p",{class:"co-form-wizard__page-desc"},a.description)):null}renderScorePanel(a){const r=this.mergedLabels,t=!0===a.passed?r.passed:!1===a.passed?r.failed:null;return o("div",{class:"co-form-wizard co-form-wizard__score"},o("h2",{class:"co-form-wizard__score-title"},r.result),o("div",{class:"co-form-wizard__score-num"},a.total," / ",a.max,o("span",{class:"co-form-wizard__score-pct"},"(",a.percent,"%)")),t&&o("div",{class:{"co-form-wizard__score-pass":!0,"is-pass":!0===a.passed,"is-fail":!1===a.passed}},t),a.feedback.length>0&&o("ul",{class:"co-form-wizard__score-feedback"},a.feedback.map((a=>o("li",null,a)))))}get host(){return e(this)}static get watchers(){return{schema:[{onSchemaChange:0}],theme:[{onThemeChange:0}]}}};p.style=':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__nav co-button:only-child{margin-left:auto}.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-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--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}';export{p as co_form_wizard}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{CoForm as co_form}from"./index.esm.js";import"./p-C1670_IO.js";import"./p-
|
|
1
|
+
export{CoForm as co_form}from"./index.esm.js";import"./p-C1670_IO.js";import"./p-CzvtCEKX.js";
|