cx 26.0.1 → 26.0.2

package/build/widgets/form/Calendar.js

@@ -0,0 +1,445 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { StringTemplate } from "../../data/StringTemplate";
+import { Culture } from "../../ui/Culture";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import "../../ui/Format";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget } from "../../ui/Widget";
+import { parseDateInvariant } from "../../util";
+import { KeyCode } from "../../util/KeyCode";
+import { dateDiff } from "../../util/date/dateDiff";
+import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
+import { monthStart } from "../../util/date/monthStart";
+import { sameDate } from "../../util/date/sameDate";
+import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { zeroTime } from "../../util/date/zeroTime";
+import DropdownIcon from "../icons/drop-down";
+import ForwardIcon from "../icons/forward";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentDidMount, tooltipParentWillReceiveProps, tooltipParentWillUnmount, } from "../overlay/tooltip-ops";
+import { Field, getFieldTooltip } from "./Field";
+export class Calendar extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            value: undefined,
+            refDate: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+            focusable: undefined,
+            dayData: undefined,
+        }, ...args);
+    }
+    init() {
+        if (this.unfocusable)
+            this.focusable = false;
+        super.init();
+    }
+    prepareData(context, instance, ...args) {
+        const { data } = instance;
+        data.stateMods = {
+            disabled: data.disabled,
+        };
+        if (data.value) {
+            let d = parseDateInvariant(data.value);
+            if (!isNaN(d.getTime())) {
+                data.date = zeroTime(d);
+            }
+        }
+        if (data.refDate)
+            data.refDate = zeroTime(parseDateInvariant(data.refDate));
+        if (data.maxValue)
+            data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
+        if (data.minValue)
+            data.minValue = zeroTime(parseDateInvariant(data.minValue));
+        super.prepareData(context, instance, ...args);
+    }
+    validate(context, instance) {
+        super.validate(context, instance);
+        let { data, widget } = instance;
+        let calendarWidget = widget;
+        if (!data.error && data.date) {
+            let d;
+            if (data.maxValue) {
+                d = dateDiff(data.date, data.maxValue);
+                if (d > 0)
+                    data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
+                else if (d == 0 && data.maxExclusive)
+                    data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
+            }
+            if (data.minValue) {
+                d = dateDiff(data.date, data.minValue);
+                if (d < 0)
+                    data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
+                else if (d == 0 && data.minExclusive)
+                    data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
+            }
+            if (calendarWidget.disabledDaysOfWeek) {
+                if (calendarWidget.disabledDaysOfWeek.includes(data.date.getDay()))
+                    data.error = this.disabledDaysOfWeekErrorText;
+            }
+            if (data.dayData) {
+                let date = parseDateInvariant(data.value);
+                let info = data.dayData[date.toDateString()];
+                if (info && info.disabled)
+                    data.error = this.disabledDaysOfWeekErrorText;
+            }
+        }
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(CalendarCmp, { instance: instance, handleSelect: (e, date) => this.handleSelect(e, instance, date) }, key));
+    }
+    handleSelect(e, instance, date) {
+        let { store, data, widget } = instance;
+        let calendarWidget = widget;
+        e.stopPropagation();
+        if (data.disabled)
+            return;
+        if (!validationCheck(date, data, calendarWidget.disabledDaysOfWeek))
+            return;
+        if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false)
+            return;
+        if (calendarWidget.partial) {
+            let mixed = parseDateInvariant(data.value);
+            if (data.value && !isNaN(mixed.getTime())) {
+                mixed.setFullYear(date.getFullYear());
+                mixed.setMonth(date.getMonth());
+                mixed.setDate(date.getDate());
+                date = mixed;
+            }
+        }
+        let encode = calendarWidget.encoding || Culture.getDefaultDateEncoding();
+        instance.set("value", encode(date));
+        if (this.onSelect)
+            instance.invoke("onSelect", e, instance, date);
+    }
+}
+Calendar.prototype.baseClass = "calendar";
+Calendar.prototype.highlightToday = true;
+Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
+Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
+Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+Calendar.prototype.suppressErrorsUntilVisited = false;
+Calendar.prototype.showTodayButton = false;
+Calendar.prototype.todayButtonText = "Today";
+Calendar.prototype.startWithMonday = false;
+Calendar.prototype.focusable = true;
+Localization.registerPrototype("cx/widgets/Calendar", Calendar);
+const validationCheck = (date, data, disabledDaysOfWeek) => {
+    if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive))
+        return false;
+    if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive))
+        return false;
+    if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay()))
+        return false;
+    if (data.dayData) {
+        let day = data.dayData[date.toDateString()];
+        if (day && (day.disabled || day.unselectable))
+            return false;
+    }
+    return true;
+};
+export class CalendarCmp extends VDOM.Component {
+    el = null;
+    constructor(props) {
+        super(props);
+        let { data } = props.instance;
+        let refDate = data.refDate ? data.refDate : data.date || zeroTime(new Date());
+        this.state = {
+            hover: false,
+            focus: false,
+            cursor: zeroTime(data.date || refDate),
+            activeView: "calendar",
+            ...this.getPage(refDate),
+        };
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+    }
+    getPage(refDate) {
+        refDate = monthStart(refDate); //make a copy
+        let calendarWidget = this.props.instance.widget;
+        let startWithMonday = calendarWidget.startWithMonday;
+        let startDay = startWithMonday ? 1 : 0;
+        let startDate = new Date(refDate);
+        while (startDate.getDay() != startDay)
+            startDate.setDate(startDate.getDate() - 1);
+        let endDate = new Date(refDate);
+        endDate.setMonth(refDate.getMonth() + 1);
+        endDate.setDate(endDate.getDate() - 1);
+        let endDay = startWithMonday ? 0 : 6;
+        while (endDate.getDay() != endDay)
+            endDate.setDate(endDate.getDate() + 1);
+        return {
+            refDate,
+            startDate,
+            endDate,
+        };
+    }
+    moveCursor(e, date, options = {}) {
+        e.preventDefault();
+        e.stopPropagation();
+        date = zeroTime(date);
+        if (date.getTime() == this.state.cursor.getTime())
+            return;
+        let refDate = this.state.refDate;
+        if (options.movePage || date < this.state.startDate || date > this.state.endDate)
+            refDate = date;
+        this.setState({
+            ...this.getPage(refDate),
+            cursor: date,
+        });
+    }
+    move(e, period, delta) {
+        e.preventDefault();
+        e.stopPropagation();
+        let refDate = new Date(this.state.refDate);
+        switch (period) {
+            case "y":
+                refDate.setFullYear(refDate.getFullYear() + delta);
+                break;
+            case "m":
+                refDate.setMonth(refDate.getMonth() + delta);
+                break;
+        }
+        let page = this.getPage(refDate);
+        let cursor = this.state.cursor;
+        if (cursor < page.startDate)
+            cursor = page.startDate;
+        else if (cursor > page.endDate)
+            cursor = page.endDate;
+        this.setState({ ...page, cursor });
+    }
+    handleKeyPress(e) {
+        let cursor = new Date(this.state.cursor);
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                this.props.handleSelect(e, this.state.cursor);
+                break;
+            case KeyCode.left:
+                cursor.setDate(cursor.getDate() - 1);
+                this.moveCursor(e, cursor);
+                break;
+            case KeyCode.right:
+                cursor.setDate(cursor.getDate() + 1);
+                this.moveCursor(e, cursor);
+                break;
+            case KeyCode.up:
+                cursor.setDate(cursor.getDate() - 7);
+                this.moveCursor(e, cursor);
+                break;
+            case KeyCode.down:
+                cursor.setDate(cursor.getDate() + 7);
+                this.moveCursor(e, cursor);
+                break;
+            case KeyCode.pageUp:
+                cursor.setMonth(cursor.getMonth() - 1);
+                this.moveCursor(e, cursor, { movePage: true });
+                break;
+            case KeyCode.pageDown:
+                cursor.setMonth(cursor.getMonth() + 1);
+                this.moveCursor(e, cursor, { movePage: true });
+                break;
+            case KeyCode.home:
+                cursor.setDate(1);
+                this.moveCursor(e, cursor, { movePage: true });
+                break;
+            case KeyCode.end:
+                cursor.setMonth(cursor.getMonth() + 1);
+                cursor.setDate(0);
+                this.moveCursor(e, cursor, { movePage: true });
+                break;
+            default:
+                let { instance } = this.props;
+                let calendarWidget = instance.widget;
+                if (calendarWidget.onKeyDown)
+                    instance.invoke("onKeyDown", e, instance);
+                break;
+        }
+    }
+    handleWheel(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let cursor = new Date(this.state.cursor);
+        if (e.deltaY < 0) {
+            cursor.setMonth(cursor.getMonth() - 1);
+            this.moveCursor(e, cursor, { movePage: true });
+        }
+        else if (e.deltaY > 0) {
+            cursor.setMonth(cursor.getMonth() + 1);
+            this.moveCursor(e, cursor, { movePage: true });
+        }
+    }
+    handleBlur(e) {
+        FocusManager.nudge();
+        let { instance } = this.props;
+        let calendarWidget = instance.widget;
+        if (calendarWidget.onBlur)
+            instance.invoke("onBlur", e, instance);
+        this.setState({
+            focus: false,
+        });
+    }
+    handleFocus(e) {
+        oneFocusOut(this, this.el, this.handleFocusOut.bind(this));
+        this.setState({
+            focus: true,
+        });
+    }
+    handleFocusOut() {
+        let { instance } = this.props;
+        let calendarWidget = instance.widget;
+        if (calendarWidget.onFocusOut)
+            instance.invoke("onFocusOut", null, instance);
+    }
+    handleMouseLeave(e) {
+        tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
+        this.setState({
+            hover: false,
+        });
+    }
+    handleMouseEnter(e) {
+        this.setState({
+            hover: true,
+        });
+    }
+    handleMouseMove(e) {
+        this.moveCursor(e, readDate(e.target.dataset));
+    }
+    handleMouseDown(e) {
+        this.props.handleSelect(e, readDate(e.target.dataset));
+    }
+    componentDidMount() {
+        //calendar doesn't bring up keyboard so it's ok to focus it even on mobile
+        let calendarWidget = this.props.instance.widget;
+        if (calendarWidget.autoFocus && this.el)
+            this.el.focus();
+        if (this.el) {
+            tooltipParentDidMount(this.el, ...getFieldTooltip(this.props.instance));
+            this.el.addEventListener("wheel", (e) => this.handleWheel(e));
+        }
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data } = props.instance;
+        if (data.date)
+            this.setState({
+                ...this.getPage(data.date),
+            });
+        if (this.el) {
+            tooltipParentWillReceiveProps(this.el, ...getFieldTooltip(props.instance));
+        }
+    }
+    componentWillUnmount() {
+        offFocusOut(this);
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    showYearDropdown() {
+        if (this.el && this.el.firstChild) {
+            this.setState({
+                activeView: "year-picker",
+                yearPickerHeight: this.el.firstChild.offsetHeight,
+            });
+        }
+    }
+    handleYearSelect(e, year) {
+        e.preventDefault();
+        e.stopPropagation();
+        let refDate = new Date(this.state.refDate);
+        refDate.setFullYear(year);
+        this.setState({
+            ...this.getPage(refDate),
+            activeView: "calendar",
+        });
+    }
+    renderYearPicker() {
+        let { data, widget } = this.props.instance;
+        let calendarWidget = widget;
+        let minYear = data.minValue?.getFullYear();
+        let maxYear = data.maxValue?.getFullYear();
+        let { CSS } = widget;
+        let years = [];
+        let currentYear = new Date().getFullYear();
+        let midYear = currentYear - (currentYear % 5);
+        let refYear = new Date(this.state.refDate).getFullYear();
+        for (let i = midYear - 100; i <= midYear + 100; i++) {
+            years.push(i);
+        }
+        let rows = [];
+        for (let i = 0; i < years.length; i += 5) {
+            rows.push(years.slice(i, i + 5));
+        }
+        return (_jsx("div", { className: CSS.element(calendarWidget.baseClass, "year-picker"), style: {
+                height: this.state.yearPickerHeight,
+            }, ref: (el) => {
+                if (el) {
+                    el.addEventListener("wheel", (e) => {
+                        e.stopPropagation();
+                    });
+                    let activeYear = el.querySelector("." + CSS.state("selected"));
+                    if (activeYear)
+                        activeYear.scrollIntoView({ block: "center", behavior: "instant" });
+                }
+            }, children: _jsx("table", { children: _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx("tr", { children: row.map((year) => (_jsx("td", { className: CSS.element(calendarWidget.baseClass, "year-option", {
+                                unselectable: (minYear && year < minYear) || (maxYear && year > maxYear),
+                                selected: year === refYear,
+                                active: year === currentYear,
+                            }), onClick: (e) => this.handleYearSelect(e, year), children: year }, year))) }, rowIndex))) }) }) }));
+    }
+    render() {
+        let { data, widget } = this.props.instance;
+        let calendarWidget = widget;
+        let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = calendarWidget;
+        let { refDate, startDate, endDate } = this.getPage(this.state.refDate);
+        let month = refDate.getMonth();
+        let year = refDate.getFullYear();
+        let weeks = [];
+        let date = startDate;
+        let empty = {};
+        let today = zeroTime(new Date());
+        while (date >= startDate && date <= endDate) {
+            let days = [];
+            for (let i = 0; i < 7; i++) {
+                let dayInfo = (data.dayData && data.dayData[date.toDateString()]) || empty;
+                let unselectable = !validationCheck(date, data, disabledDaysOfWeek);
+                let classNames = CSS.expand(CSS.element(baseClass, "day", {
+                    outside: month != date.getMonth(),
+                    unselectable: unselectable,
+                    selected: data.date && sameDate(data.date, date),
+                    cursor: (this.state.hover || this.state.focus) && this.state.cursor && sameDate(this.state.cursor, date),
+                    today: calendarWidget.highlightToday && sameDate(date, today),
+                }), dayInfo.className, CSS.mod(dayInfo.mod));
+                let dateInst = new Date(date);
+                days.push(_jsx("td", { className: classNames, style: CSS.parseStyle(dayInfo.style), "data-year": dateInst.getFullYear(), "data-month": dateInst.getMonth() + 1, "data-date": dateInst.getDate(), onMouseMove: unselectable ? undefined : this.handleMouseMove, onMouseDown: unselectable ? undefined : this.handleMouseDown, children: date.getDate() }, i));
+                date.setDate(date.getDate() + 1);
+            }
+            weeks.push(_jsxs("tr", { className: CSS.element(baseClass, "week"), children: [_jsx("td", {}), days, _jsx("td", {})] }, weeks.length));
+        }
+        let culture = Culture.getDateTimeCulture();
+        let monthNames = culture.getMonthNames("long");
+        let dayNames = culture.getWeekdayNames("short").map((x) => x.substr(0, 2));
+        if (startWithMonday)
+            dayNames = [...dayNames.slice(1), dayNames[0]];
+        return (_jsxs("div", { className: data.classNames, tabIndex: data.disabled || !data.focusable ? null : data.tabIndex || 0, onKeyDown: (e) => this.handleKeyPress(e), onMouseDown: (e) => {
+                // prevent losing focus from the input field
+                if (!data.focusable) {
+                    e.preventDefault();
+                }
+                e.stopPropagation();
+            }, ref: (el) => {
+                this.el = el;
+            }, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance)), onMouseLeave: (e) => this.handleMouseLeave(e), onMouseEnter: (e) => this.handleMouseEnter(e), 
+            // onWheel={(e) => this.handleWheel(e)}
+            onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e), children: [this.state.activeView == "calendar" && (_jsxs("table", { children: [_jsxs("thead", { children: [_jsxs("tr", { className: CSS.element(baseClass, "header"), children: [_jsx("td", {}), _jsx("td", { onClick: (e) => this.move(e, "y", -1), children: _jsx(ForwardIcon, { className: CSS.element(baseClass, "icon-prev-year") }) }), _jsx("td", { onClick: (e) => this.move(e, "m", -1), children: _jsx(DropdownIcon, { className: CSS.element(baseClass, "icon-prev-month") }) }), _jsxs("th", { className: CSS.element(baseClass, "display"), colSpan: 3, children: [monthNames[month], _jsx("br", {}), _jsx("span", { onClick: () => this.showYearDropdown(), className: CSS.element(baseClass, "year-name"), children: year })] }), _jsx("td", { onClick: (e) => this.move(e, "m", +1), children: _jsx(DropdownIcon, { className: CSS.element(baseClass, "icon-next-month") }) }), _jsx("td", { onClick: (e) => this.move(e, "y", +1), children: _jsx(ForwardIcon, { className: CSS.element(baseClass, "icon-next-year") }) }), _jsx("td", {})] }, "h"), _jsxs("tr", { className: CSS.element(baseClass, "day-names"), children: [_jsx("td", {}), dayNames.map((name, i) => (_jsx("th", { children: name }, i))), _jsx("td", {})] }, "d")] }), _jsx("tbody", { children: weeks })] })), this.state.activeView == "calendar" && calendarWidget.showTodayButton && (_jsx("div", { className: CSS.element(baseClass, "toolbar"), children: _jsx("button", { className: CSS.expand(CSS.element(baseClass, "today-button"), CSS.block("button", "hollow")), "data-year": today.getFullYear(), "data-month": today.getMonth() + 1, "data-date": today.getDate(), onClick: (e) => {
+                            this.handleMouseDown(e);
+                        }, children: calendarWidget.todayButtonText }) })), this.state.activeView == "year-picker" && this.renderYearPicker()] }));
+    }
+}
+const readDate = (ds) => new Date(Number(ds.year), Number(ds.month) - 1, Number(ds.date));
+Widget.alias("calendar", Calendar);

package/build/widgets/form/Checkbox.d.ts

@@ -0,0 +1,46 @@
+/** @jsxImportSource react */
+import * as React from "react";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+export interface CheckboxConfig extends FieldConfig {
+    /** Value of the checkbox. */
+    value?: BooleanProp;
+    /** Set to `true` to make the checkbox read-only. */
+    readOnly?: BooleanProp;
+    /** Base CSS class to be applied to the element. Defaults to `checkbox`. */
+    baseClass?: string;
+    /** Use native checkbox HTML element. */
+    native?: boolean;
+    /** Set to `true` to display a square icon to indicate `null` or `undefined` value. */
+    indeterminate?: boolean;
+    /** Checked value alias for `value`. */
+    checked?: BooleanProp;
+    /** Text description. */
+    text?: StringProp;
+    /** Set to true to disable focusing on the checkbox. Used in grids to avoid conflicts. */
+    unfocusable?: boolean;
+    /** View mode text. */
+    viewText?: StringProp;
+}
+export declare class Checkbox extends Field<CheckboxConfig> {
+    baseClass: string;
+    checked?: unknown;
+    value?: unknown;
+    indeterminate?: boolean;
+    unfocusable?: boolean;
+    native?: boolean;
+    constructor(config?: CheckboxConfig);
+    init(): void;
+    declareData(...args: Record<string, unknown>[]): void;
+    renderWrap(context: RenderingContext, instance: FieldInstance<Checkbox>, key: string, content: React.ReactNode): React.ReactElement;
+    validateRequired(context: RenderingContext, instance: FieldInstance<Checkbox>): string | undefined;
+    renderNativeCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement;
+    renderCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement;
+    renderInput(context: RenderingContext, instance: FieldInstance<Checkbox>, key: string): React.ReactElement;
+    renderValue(context: RenderingContext, instance: FieldInstance): React.ReactNode;
+    formatValue(context: RenderingContext, instance: Instance): React.ReactNode | string;
+    handleClick(e: React.MouseEvent, instance: Instance): void;
+    handleChange(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent, instance: Instance, checked?: boolean): void;
+}

package/build/widgets/form/Checkbox.js

@@ -0,0 +1,157 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { VDOM } from "../../ui/VDOM";
+import { Widget, getContent } from "../../ui/Widget";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import CheckIcon from "../icons/check";
+import SquareIcon from "../icons/square";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { Field, getFieldTooltip } from "./Field";
+export class Checkbox extends Field {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        if (this.checked)
+            this.value = this.checked;
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData({
+            value: !this.indeterminate ? false : undefined,
+            text: undefined,
+            readOnly: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            viewText: undefined,
+        }, ...args);
+    }
+    renderWrap(context, instance, key, content) {
+        let { data } = instance;
+        return (_jsxs("label", { className: data.classNames, onMouseDown: (e) => {
+                e.stopPropagation();
+                if (this.unfocusable)
+                    e.preventDefault();
+            }, onMouseMove: (e) => {
+                const tooltip = getFieldTooltip(instance);
+                if (Array.isArray(tooltip)) {
+                    tooltipMouseMove(e, ...tooltip);
+                }
+            }, onMouseLeave: (e) => {
+                const tooltip = getFieldTooltip(instance);
+                if (Array.isArray(tooltip)) {
+                    tooltipMouseLeave(e, ...tooltip);
+                }
+            }, onClick: (e) => {
+                this.handleClick(e, instance);
+            }, style: data.style, children: [content, this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))] }, key));
+    }
+    validateRequired(context, instance) {
+        let { data } = instance;
+        if (!data.value)
+            return this.requiredText;
+    }
+    renderNativeCheck(context, instance) {
+        let { CSS, baseClass } = this;
+        let { data } = instance;
+        return (_jsx("input", { className: CSS.element(baseClass, "checkbox"), id: data.id, type: "checkbox", checked: data.value || false, disabled: data.disabled, ...data.inputAttrs, onClick: stopPropagation, onChange: (e) => {
+                this.handleChange(e, instance, e.target.checked);
+            } }, "input"));
+    }
+    renderCheck(context, instance) {
+        return _jsx(CheckboxCmp, { instance: instance, data: instance.data }, "check");
+    }
+    renderInput(context, instance, key) {
+        let { data } = instance;
+        let text = data.text || this.renderChildren?.(context, instance);
+        let { CSS, baseClass } = this;
+        return this.renderWrap(context, instance, key, [
+            this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+            text ? (_jsx("div", { className: CSS.element(baseClass, "text"), children: text }, "text")) : (_jsx("span", { className: CSS.element(baseClass, "baseline"), children: "\u00A0" }, "baseline")),
+        ]);
+    }
+    renderValue(context, instance) {
+        let { data } = instance;
+        if (!data.viewText)
+            return super.renderValue(context, instance, undefined);
+        return _jsx("span", { className: this.CSS.element(this.baseClass, "view-text"), children: data.viewText });
+    }
+    formatValue(context, instance) {
+        let { data } = instance;
+        return data.value && (data.text || this.renderChildren?.(context, instance));
+    }
+    handleClick(e, instance) {
+        if (this.native)
+            e.stopPropagation();
+        else {
+            var el = document.getElementById(instance.data.id);
+            if (el)
+                el.focus();
+            if (!instance.data.viewMode) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.handleChange(e, instance, !instance.data.value);
+            }
+        }
+    }
+    handleChange(e, instance, checked) {
+        let { data } = instance;
+        if (data.readOnly || data.disabled || data.viewMode)
+            return;
+        instance.set("value", checked != null ? checked : e.target.checked);
+    }
+}
+Checkbox.prototype.baseClass = "checkbox";
+Checkbox.prototype.native = false;
+Checkbox.prototype.indeterminate = false;
+Checkbox.prototype.unfocusable = false;
+Widget.alias("checkbox", Checkbox);
+class CheckboxCmp extends VDOM.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.data.value,
+        };
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.setState({
+            value: props.data.value,
+        });
+    }
+    render() {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        let { baseClass, CSS } = widget;
+        let check = false;
+        if (this.state.value == null && widget.indeterminate)
+            check = "indeterminate";
+        else if (this.state.value)
+            check = "check";
+        return (_jsxs("span", { tabIndex: widget.unfocusable || data.disabled ? undefined : data.tabIndex || 0, className: CSS.element(baseClass, "input", {
+                checked: check,
+            }), style: CSS.parseStyle(data.inputStyle), id: data.id, onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), children: [check == "check" && _jsx(CheckIcon, { className: CSS.element(baseClass, "input-check") }), check == "indeterminate" && _jsx(SquareIcon, { className: CSS.element(baseClass, "input-check") })] }, "check"));
+    }
+    onClick(e) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (!data.disabled && !data.readOnly) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.setState({ value: !this.state.value });
+            widget.handleChange(e, instance, !this.state.value);
+        }
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        const { widget } = instance;
+        if (widget.handleKeyDown &&
+            widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.space:
+                this.onClick(e);
+                break;
+        }
+    }
+}