@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -0,0 +1,746 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { formatDisplay, isDisabled, parseFlexible, } from "@prolibu-suite/cobalt-date-utils";
+import { getDateStrings } from "../../utils/dateI18n";
+/**
+ * Text input for a single date with manual typing as a first-class input.
+ *
+ * The committed `value` is always a date-only string "YYYY-MM-DD" (or `null`
+ * when empty) — the visible text is formatted per `displayFormat` (default
+ * dd/MM/yyyy, es-CO). The component keeps a `draft` (raw text) separate from the
+ * committed `value`, so a controlled parent setting `value` never clobbers what
+ * the user is typing.
+ *
+ * It owns its own `<input>` (rather than embedding `co-input`) so it can control
+ * the Enter key — committing/validating the typed date instead of submitting the
+ * enclosing form on an unparsed value.
+ *
+ * Events: `coInput` (typing, raw), `coChange` (committed valid value or null),
+ * `coInvalid` (commit failed, value unchanged), `coClear`, `coFocus`, `coBlur`.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered input row
+ * @part input - The native input element
+ * @part clear - The clear button
+ * @part helper - The helper/error text row
+ */
+export class CoDateField {
+    constructor() {
+        /** Committed value, "YYYY-MM-DD" or null. */
+        this.value = null;
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** BCP-47 locale. */
+        this.locale = 'es-CO';
+        /** Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+        this.displayFormat = 'd MMM yyyy';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        /** External invalid flag (e.g. from a form controller). OR'd with internal parse failure. */
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Raw text in the box (display-formatted on commit). */
+        this.draft = '';
+        /** Internal parse-failure flag. */
+        this.internalInvalid = false;
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.internalInvalid = false;
+            this.coInput.emit(this.draft);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.commit();
+            this.coBlur.emit();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                const ok = this.commit();
+                if (!ok) {
+                    // Don't let an unparsed/invalid date submit the enclosing form.
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        };
+        this.handleClear = () => {
+            var _a;
+            this.draft = '';
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            this.coClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    componentWillLoad() {
+        this.draft = formatDisplay(this.value, this.displayFormat, this.locale);
+    }
+    onValueChange() {
+        // Only reformat from the controlled value while NOT focused, so we never
+        // clobber what the user is actively typing.
+        if (this.hasFocus)
+            return;
+        this.draft = formatDisplay(this.value, this.displayFormat, this.locale);
+        this.internalInvalid = false;
+    }
+    /** Focus the text input (used by co-date-picker to return focus on close). */
+    async focusInput() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    get order() {
+        const f = this.displayFormat.toLowerCase();
+        if (f.startsWith('y'))
+            return 'ymd';
+        if (f.startsWith('m'))
+            return 'mdy';
+        return 'dmy';
+    }
+    get isInvalid() {
+        return this.invalid || this.internalInvalid;
+    }
+    get hasValue() {
+        return this.draft.trim() !== '';
+    }
+    /**
+     * Parse the draft and commit. Returns true when the field is in a valid,
+     * committed state (including empty → null), false when invalid.
+     */
+    commit() {
+        const result = parseFlexible(this.draft, { order: this.order, locale: this.locale });
+        if (result.status === 'empty') {
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            return true;
+        }
+        if (result.status === 'invalid' || result.value === null) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        // Valid syntax — also enforce range / disabled rules.
+        const ymd = result.value;
+        const blocked = isDisabled(ymd, {
+            min: this.min,
+            max: this.max,
+            disabledDates: toStringArray(this.disabledDates),
+            disabledDaysOfWeek: toNumberArray(this.disabledDaysOfWeek),
+        });
+        if (blocked) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        this.internalInvalid = false;
+        this.draft = formatDisplay(ymd, this.displayFormat, this.locale);
+        if (this.value !== ymd) {
+            this.value = ymd;
+            this.coChange.emit(ymd);
+        }
+        return true;
+    }
+    render() {
+        var _a, _b;
+        const t = getDateStrings(this.locale);
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        // `||` (not `??`): consumers/forms commonly pass an empty string, which
+        // should still fall back to the localized default placeholder.
+        const placeholder = this.placeholder || t.setDate;
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        return (h("div", { key: 'bd42272c21a560d339158f2b82edd0cb61623e31', class: {
+                'co-date-field': true,
+                'co-date-field--disabled': this.disabled,
+                'co-date-field--focused': this.hasFocus,
+                'co-date-field--filled': this.hasValue,
+                'co-date-field--invalid': this.isInvalid,
+                [`co-date-field--${this.size}`]: true,
+            }, part: "wrapper" }, this.label && (h("div", { key: '210bac89442729649bf59f14eeecb4d3a1d53855', class: "co-date-field__labels" }, h("label", { key: '79a151b05d97b47cec8461c3bd32d0838d9e2d66', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '75a513ad61d0801863d2c01a1f5a2da2023e78d1', required: this.required })))), h("div", { key: 'ebe1983e55ef1a33f17faa95609ee076f957fcdb', class: "co-date-field__field-row" }, h("div", { key: 'b420fa05fbe6a9ea89f02284c52a0e3686cdbaaa', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '19f698a0798c1a32497a1d427ecbf8462027d400', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4aafe0476089a55f1defb4384101442bbc48fdf0', class: "co-date-field__input-wrapper" }, h("input", { key: '7170645098dfa8f08b7fad8f65d590cb22c098da', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '53bd2c0e74a031f5d351617fb7f12d7ed21e8269', class: {
+                'co-date-field__clear': true,
+                'co-date-field__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '28dc6e38810c755d34fcbab2252f011999f0b4d3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '58146749042da81c9a2e0f71edd082fbf478297f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'b1d13979e2b54558950e15bc88f690888ca9345c', class: {
+                'co-date-field__helper': true,
+                'co-date-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'd4a8a63210d503600f5c268e4e8b920c81aca8d1', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6fc66017a9f1bedcb0e0e554643d504683860fbe', class: "co-date-field__helper-text" }, helper)))));
+    }
+    static get is() { return "co-date-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-date-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-date-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed value, \"YYYY-MM-DD\" or null."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest allowed date, \"YYYY-MM-DD\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest allowed date, \"YYYY-MM-DD\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blocked dates (string[] or JSON/comma string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-dates"
+            },
+            "disabledDaysOfWeek": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blocked weekdays 0=Sun..6=Sat (number[] or JSON/comma string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-days-of-week"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format",
+                "defaultValue": "'d MMM yyyy'"
+            },
+            "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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "true"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External invalid flag (e.g. from a form controller). OR'd with internal parse failure."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown when valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "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'"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the clear-button aria-label (defaults from `locale`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label"
+            }
+        };
+    }
+    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 when a valid value (or null) is committed."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                }
+            }, {
+                "method": "coInvalid",
+                "name": "coInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a committed parse fails. Detail carries the raw text."
+                },
+                "complexType": {
+                    "original": "{ raw: string }",
+                    "resolved": "{ raw: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when cleared."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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 methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the text input (used by co-date-picker to return focus on close).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}
+function toStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(String);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}
+function toNumberArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(Number).filter((n) => !Number.isNaN(n));
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+    }
+    return [];
+}