@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-json-field/co-json-field.js

@@ -0,0 +1,453 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Multiline JSON / arbitrary-object editor — a `<textarea>` with inline JSON
+ * validation. It is the renderer for schema fields whose type is `mixed`
+ * (free-form object value). The committed `value` is the raw JSON *text*; the
+ * consuming form renderer is responsible for parsing it to an object (keeping
+ * this component framework-agnostic and string-only, like `co-ref-field`).
+ *
+ * Emits `coInput` on every keystroke, `coChange` with the committed text on blur
+ * (so half-typed invalid JSON never reaches the form), and `coValidity` whenever
+ * the parse status changes.
+ *
+ * Visually mirrors `co-input` / `co-date-field`.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered textarea wrapper
+ * @part input - The native textarea
+ * @part helper - The helper/error text row
+ */
+export class CoJsonField {
+    constructor() {
+        /** Committed JSON text. */
+        this.value = '';
+        this.placeholder = '{ }';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.rows = 8;
+        /** External validation status (e.g. from a form controller). */
+        this.status = 'default';
+        /** Message shown when the typed JSON cannot be parsed. */
+        this.invalidMessage = 'Invalid JSON';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Raw text in the textarea. */
+        this.draft = '';
+        /** Internal JSON parse-failure flag. */
+        this.internalInvalid = false;
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.validate(true);
+            this.coInput.emit(this.draft);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.value = this.draft;
+            this.coChange.emit(this.draft);
+            this.coBlur.emit();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        this.draft = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        this.validate(false);
+    }
+    onValueChange() {
+        var _a;
+        // Don't clobber what the user is actively typing.
+        if (this.hasFocus)
+            return;
+        this.draft = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        this.validate(false);
+    }
+    get isInvalid() {
+        return this.status === 'error' || this.internalInvalid;
+    }
+    /** Re-evaluate JSON validity; emit coValidity when it changes. */
+    validate(emit) {
+        const text = this.draft.trim();
+        const valid = text === '' ? true : this.tryParse(text);
+        if (!valid !== this.internalInvalid) {
+            this.internalInvalid = !valid;
+            if (emit)
+                this.coValidity.emit({ valid, message: valid ? undefined : this.invalidMessage });
+        }
+        return valid;
+    }
+    tryParse(text) {
+        try {
+            JSON.parse(text);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    render() {
+        const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
+        const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
+        return (h("div", { key: '90ec8c329801fb0b4ace08669d6b502037dfa16b', class: {
+                'co-json-field': true,
+                'co-json-field--disabled': this.disabled,
+                'co-json-field--focused': this.hasFocus,
+                'co-json-field--invalid': this.isInvalid,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (h("div", { key: 'a701737ea2c5b108dec90091566f2d3a397ec3b7', class: "co-json-field__labels" }, h("label", { key: 'd1b7d6b5f683fe9bf8e644ba4deb3bfba0d93040', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '249e52050171e00b27a7fd9751a3595440371cc0', required: this.required })))), h("div", { key: '4c6453d7e4670124e4a48cb449b3bae639ee3b1f', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'bcccb3efa34a50aa1a7a6f0c3db2e5431a0dafde', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '5cf1f53f4b77532d6473fcfa964985509c57e782', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'b906abdf2335b84df2d3976cde5eb7018ed549d3', class: {
+                'co-json-field__helper': true,
+                'co-json-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0111116f0dc1a4608ac18ed5db04a6bd1342f6a6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '54b8b02fcf03b53105e9254c69e3ea5228e882c2', class: "co-json-field__helper-text" }, helper)))));
+    }
+    static get is() { return "co-json-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-json-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-json-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed JSON text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'{ }'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "8"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External validation status (e.g. from a form controller)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "invalidMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when the typed JSON cannot be parsed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-message",
+                "defaultValue": "'Invalid JSON'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "draft": {},
+            "internalInvalid": {},
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke with the raw text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the committed text on blur."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coValidity",
+                "name": "coValidity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the internal JSON parse status changes."
+                },
+                "complexType": {
+                    "original": "{ valid: boolean; message?: string }",
+                    "resolved": "{ valid: boolean; message?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coFocus",
+                "name": "coFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coBlur",
+                "name": "coBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/co-lightbox/co-lightbox.css

@@ -0,0 +1,164 @@
+/* ============================================================
+   co-lightbox — fullscreen image viewer: dark scrim, zoom/pan,
+   prev/next carousel. Chrome is white over the scrim (theme-
+   independent, like any lightbox).
+   ============================================================ */
+
+:host {
+  display: contents;
+  font-family: var(--co-font-family-primary);
+}
+
+.co-lightbox {
+  position: fixed;
+  inset: 0;
+  /* Above co-overlay (1000, hardcoded there too — no z-index tokens). */
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--co-color-opacity-negro-80);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.co-lightbox--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---- Toolbar ---- */
+.co-lightbox__toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-md) var(--co-spacing-lg);
+  background: linear-gradient(var(--co-color-opacity-negro-50), transparent);
+}
+
+.co-lightbox__caption {
+  flex: 1;
+  min-width: 0;
+  color: var(--co-color-base-blanco);
+  font-size: var(--co-font-size-14);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-lightbox__zoom {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: 0 var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+}
+
+.co-lightbox__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--co-spacing-xs);
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: transparent;
+  color: var(--co-color-base-blanco);
+  font-family: inherit;
+  font-size: var(--co-font-size-13);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.co-lightbox__btn:hover {
+  background: var(--co-color-opacity-blanco-16);
+}
+
+.co-lightbox__zoom-value {
+  min-width: 48px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Stage / image ---- */
+.co-lightbox__stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* The browser must not hijack drags for scrolling on touch. */
+  touch-action: none;
+}
+
+.co-lightbox__img {
+  max-width: calc(100vw - var(--co-spacing-5xl) * 2);
+  max-height: calc(100vh - var(--co-spacing-5xl) * 2);
+  border-radius: var(--co-border-radius-xs);
+  user-select: none;
+  transition: transform 0.18s ease;
+}
+
+.co-lightbox__img--zoomed {
+  cursor: grab;
+}
+
+.co-lightbox__img--dragging {
+  cursor: grabbing;
+  transition: none;
+}
+
+/* ---- Nav arrows ---- */
+.co-lightbox__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+  color: var(--co-color-base-blanco);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.co-lightbox__nav:hover {
+  background: var(--co-color-opacity-blanco-25);
+}
+
+.co-lightbox__nav--prev {
+  left: var(--co-spacing-lg);
+}
+
+.co-lightbox__nav--next {
+  right: var(--co-spacing-lg);
+}
+
+/* ---- Counter ---- */
+.co-lightbox__counter {
+  position: absolute;
+  bottom: var(--co-spacing-lg);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  padding: var(--co-spacing-xs) var(--co-spacing-md);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+  color: var(--co-color-base-blanco);
+  font-size: var(--co-font-size-13);
+  font-variant-numeric: tabular-nums;
+}