@focuson/form_components/dist/src/debugState.js

Components that can be used by @focuson/forms

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DebugState = exports.DisplayGuards = exports.ToggleDebugs = exports.ToggleOneDebug = exports.Tracing = exports.OneTracing = exports.SetJsonTracing = exports.MassTransformTracing = exports.ClearTrace = exports.Optionals = exports.CommonIds = exports.Messages = exports.Rest = exports.Pages = exports.Tags = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const state_1 = require("@focuson/state");
const pages_1 = require("@focuson/pages");
const template_1 = require("@focuson/template");
const utils_1 = require("@focuson/utils");
const focuson_1 = require("@focuson/focuson");
const lens_1 = require("@focuson/lens");
const toggleButton_1 = require("./toggleButton");
const makeTest_1 = require("./makeTest");
const labelAndInput_1 = require("./labelAndInput");
const labelAndDropdown_1 = require("./labelAndDropdown");
const accordion_1 = require("./accordion");
const common_1 = require("./common");
const CopyToClipboard_1 = require("./CopyToClipboard");
const react_1 = require("react");
const setStateButton_1 = require("./setStateButton");
function Tags({ state }) {
    return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { children: (0, utils_1.sortedEntries)(state.main.tags).map(([n, t]) => (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "json-key" }, { children: n })), " : ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "json-value" }, { children: JSON.stringify(t) }))] }) }, n)) }) });
}
exports.Tags = Tags;
function Pages({ state }) {
    const pages = (0, utils_1.safeArray)(state.context.pageSelectionL.getOption(state.main));
    return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { children: pages.map((p, i) => (0, jsx_runtime_1.jsx)("li", { children: JSON.stringify(p) }, i)) }) });
}
exports.Pages = Pages;
function Rest({ state }) {
    const restCommands = (0, utils_1.safeArray)(state.context.restL.getOption(state.main));
    return (0, jsx_runtime_1.jsxs)("div", { children: ["Rest", (0, jsx_runtime_1.jsx)("ul", { children: restCommands.map((p, i) => (0, jsx_runtime_1.jsx)("li", { children: JSON.stringify(p) }, i)) })] });
}
exports.Rest = Rest;
function Messages({ state }) {
    const messages = (0, utils_1.safeArray)(state.main.messages);
    return (0, jsx_runtime_1.jsxs)("div", { children: ["Messages", (0, jsx_runtime_1.jsx)("ul", { children: messages.map((p, i) => (0, jsx_runtime_1.jsx)("li", { children: JSON.stringify(p) }, i)) })] });
}
exports.Messages = Messages;
function CommonIds({ state }) {
    const commonIds = state.context.commonIds;
    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Common Ids" }), (0, jsx_runtime_1.jsx)("ul", { children: (0, utils_1.sortedEntries)(commonIds).map(([n, l]) => {
                    if (n === 'dbName')
                        return (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(labelAndDropdown_1.LabelAndDropdown, { id: `commonIds.${n}`, parentState: state, state: state.copyWithLens(l), label: n, allButtons: {}, enums: { mock: 'Mock', db: 'Database' } }) }, n);
                    return (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(labelAndInput_1.LabelAndStringInput, { id: `commonIds.${n}`, state: state.copyWithLens(l), label: n, allButtons: {} }) }, n);
                }) })] });
}
exports.CommonIds = CommonIds;
function Optionals({ state }) {
    const p = (0, pages_1.mainPage)(state);
    if (p === undefined)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    const details = state.context.pages;
    const pageDetails = details[p.pageName];
    if (pageDetails && (0, pages_1.isMainPageDetails)(pageDetails)) {
        const optionals = (0, utils_1.safeObject)(pageDetails.namedOptionals);
        const identity = lens_1.Lenses.identity();
        const optionalJsx = Object.keys(optionals).length == 0 ? (0, jsx_runtime_1.jsx)("p", { children: "No Optionals" }) :
            (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsxs)("thead", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Optional" }), (0, jsx_runtime_1.jsx)("th", { children: "Description" }), (0, jsx_runtime_1.jsx)("th", { children: "Value" })] }), (0, jsx_runtime_1.jsx)("tbody", { children: Object.entries(optionals).map(([name, optional]) => (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: name }), (0, jsx_runtime_1.jsx)("td", { children: optional(identity).description }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(optional(identity).getOption(state.main), null, 2) }) })] }, name)) })] });
        return optionalJsx;
    }
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
exports.Optionals = Optionals;
function ClearTrace({ state }) {
    const traceState = state.copyWithLens((0, focuson_1.traceL)());
    return (0, jsx_runtime_1.jsx)("button", Object.assign({ id: 'ClearTrace', onClick: () => traceState.setJson([], (0, state_1.reasonFor)('ClearTrace', 'onClick', 'ClearTrace')) }, { children: "Clear Trace" }));
}
exports.ClearTrace = ClearTrace;
function PagesData({ state }) {
    const pages = (0, utils_1.safeArray)(state.context.pageSelectionL.getOption(state.main));
    return (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-pages-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 2 }, { children: "Pages" })) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: pages.map((p, index) => {
                        const page = pages[index];
                        const pageDetails = state.context.pages[page.pageName];
                        const lens = (0, pages_1.isMainPageDetails)(pageDetails) ? pageDetails.lens : (0, pages_1.fromPathGivenState)(state)((0, utils_1.safeString)(page.focusOn));
                        const title = (0, pages_1.isMainPageDetails)(pageDetails) ? "Main" : "Modal";
                        const pageData = (0, utils_1.safeObject)(lens.getOption(state.main));
                        const accordionsOpen = state.focusOn('debug').focusOn('accordions').optJsonOr([]);
                        const accordions = Object.keys(pageData);
                        return (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsxs)("td", Object.assign({ className: 'debug-page-info' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'debug-page-title' }, { children: [title, " ", page.pageName, " - ", (0, utils_1.safeString)(page.focusOn)] })), (0, jsx_runtime_1.jsx)("div", { children: lens === null || lens === void 0 ? void 0 : lens.description }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(page, null, 2) })] })), (0, jsx_runtime_1.jsxs)("td", Object.assign({ className: 'debug-page-data' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionExpandAll, { id: "expandAllPageButtons", buttonText: "Expand All", state: state.focusOn('debug').focusOn('accordions'), list: accordions }), (0, jsx_runtime_1.jsx)(accordion_1.AccordionCollapseAll, { id: "collapseAllPageButtons", buttonText: "Collapse All", state: state.focusOn('debug').focusOn('accordions'), list: accordions })] }), Object.entries(pageData).map(([itemKey, itemVal], index) => {
                                            return (0, jsx_runtime_1.jsx)("div", { children: (Array.isArray(itemVal) && itemVal.length > 0)
                                                    ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionWithInfo, { id: itemKey, buttonText: "-|+", state: state.focusOn('debug').focusOn('accordions'), list: accordions, count: itemVal.length }), accordionsOpen.find((elem) => elem == itemKey) && (0, jsx_runtime_1.jsx)("pre", Object.assign({ className: "json-value" }, { children: JSON.stringify(itemVal, null, 2) }))] })
                                                    : (typeof itemVal === 'object' && itemVal !== null)
                                                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionWithInfo, { id: itemKey, buttonText: "-|+", state: state.focusOn('debug').focusOn('accordions'), list: accordions, count: Object.entries(itemVal).length }), accordionsOpen.find((elem) => elem == itemKey) && (0, jsx_runtime_1.jsx)("pre", Object.assign({ className: "json-value" }, { children: JSON.stringify(itemVal, null, 2) }))] })
                                                        : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "json-key" }, { children: itemKey })), ": ", typeof itemVal === 'boolean' ? (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "json-value" }, { children: itemVal.toString() })) : (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "json-string" }, { children: itemVal + "" }))] }) }, `${itemKey}-${index}`);
                                        })] }))] }, index);
                    }) })] })) }));
}
function MassTransformTracing({ reason }) {
    return (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("pre", { children: [JSON.stringify(reason.reason, null, 2), " "] }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("ul", { children: reason.txLens.map(([lens, json], i) => (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("b", { children: lens }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(json, null, 2) })] }, lens)) }) })] });
}
exports.MassTransformTracing = MassTransformTracing;
function SetJsonTracing({ reason }) {
    return (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("pre", { children: [JSON.stringify(reason.reason, null, 2), " "] }) }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("b", { children: reason.lens }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(reason.json, null, 2) })] })] });
}
exports.SetJsonTracing = SetJsonTracing;
function OneTracing(reason) {
    if (reason) {
        let r = reason.reason;
        if ((0, state_1.isSetJsonReason)(r))
            return (0, jsx_runtime_1.jsx)(SetJsonTracing, { reason: r });
        if ((0, state_1.isMassTransformReason)(r))
            return (0, jsx_runtime_1.jsx)(MassTransformTracing, { reason: r });
    }
    return (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", Object.assign({ colSpan: 2 }, { children: [(0, jsx_runtime_1.jsx)(CopyToClipboard_1.CopyToClipboard, { textToCopy: JSON.stringify(reason) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "tooltip" }, { children: ["Reason:: ", (0, common_1.trimDownText)(JSON.stringify(reason), 100), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "tooltiptext" }, { children: [(0, jsx_runtime_1.jsx)(CopyToClipboard_1.CopyToClipboard, { textToCopy: JSON.stringify(reason) }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(reason, null, 2) })] }))] }))] })) });
}
exports.OneTracing = OneTracing;
function Tracing({ state }) {
    return (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-tracing-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 2 }, { children: "Tracing" })) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: state.copyWithLens((0, focuson_1.traceL)()).optJsonOr([]).map((r, i) => (0, jsx_runtime_1.jsx)(OneTracing, { reason: r }, i)) })] })) }));
}
exports.Tracing = Tracing;
function ToggleOneDebug({ state, name }) {
    return (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: name, buttonText: `{/debug/${name}|Hiding|Showing} ${name}`, state: state.focusOn(name) });
}
exports.ToggleOneDebug = ToggleOneDebug;
function ToggleDebugs({ state }) {
    const debugState = state.copyWithLens(lens_1.Lenses.identity().focusQuery('debug'));
    return (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'fetcherDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'restDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'reduxDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'selectedPageDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'loadTreeDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'tagFetcherDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'guardDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'validityDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'showOptionalsDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'dateDebug' }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ToggleOneDebug, { state: debugState, name: 'modalDebug' }) })] });
}
exports.ToggleDebugs = ToggleDebugs;
function DisplayGuards({ guards }) {
    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-guards' }, { children: guards.map(([name, value], i) => (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `guard-${value}` }, { children: [i === 0 ? '' : ',  ', name, ":", `${JSON.stringify(value)}`] }), name)) }));
}
exports.DisplayGuards = DisplayGuards;
const findTagLens = ({ cd, fdd }, id) => fdd[id] ? fdd[id] : cd[id];
function TagTable(rest, theseTags, desiredTags) {
    if (rest.ids.length === 0 && rest.resourceId.length === 0)
        return (0, jsx_runtime_1.jsx)("div", { children: "There are no ids" });
    return (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "fetcher-debug" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Id" }), (0, jsx_runtime_1.jsx)("th", { children: "Path to id" }), (0, jsx_runtime_1.jsx)("th", { children: "value (must be defined for load)" }), (0, jsx_runtime_1.jsx)("th", { children: "Remembered value in 'tags'" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: desiredTags.map(([id, thisTag], tagIndex) => {
                    const tagLens = findTagLens(rest, id);
                    let thisRememberedTag = theseTags === null || theseTags === void 0 ? void 0 : theseTags[tagIndex];
                    const classForUndefinedTag = thisTag ? undefined : 'debug-tag-undefined';
                    return (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: id }), (0, jsx_runtime_1.jsx)("td", { children: tagLens.description }), (0, jsx_runtime_1.jsx)("td", Object.assign({ className: classForUndefinedTag }, { children: thisTag ? JSON.stringify(thisTag) : 'undefined' })), (0, jsx_runtime_1.jsx)("td", { children: thisRememberedTag ? JSON.stringify(thisRememberedTag) : 'undefined' })] }, id);
                }) })] }));
}
function Fetchers({ state }) {
    var _a, _b, _c;
    // @ts-ignore
    const debug = (_b = (_a = state.main) === null || _a === void 0 ? void 0 : _a.debug) === null || _b === void 0 ? void 0 : _b.tagFetcherDebug;
    if (!debug)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    const page = (0, pages_1.mainPage)(state);
    const tagsInState = (0, utils_1.safeObject)(state.context.tagHolderL.getOption(state.main));
    let { tagHolderL, newFetchers, restDetails } = state.context;
    let fromFetchers = (0, focuson_1.restCommandsAndWhyFromFetchers)(tagHolderL, newFetchers, restDetails, page.pageName, Object.assign(Object.assign({}, state.json()), { debug: {} }));
    return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Rest commands" }), (0, utils_1.toArray)((_c = state.context.newFetchers) === null || _c === void 0 ? void 0 : _c[page.pageName]).map((f, i) => {
                const rest = state.context.restDetails[f.restName];
                const tagName = `${page.pageName}_${f.tagName}`;
                const theseTags = tagsInState === null || tagsInState === void 0 ? void 0 : tagsInState[tagName];
                const { tags } = template_1.tagOps;
                const desiredTags = tags(rest, true, 'get')(state.main);
                let json = state.copyWithLens(rest.fdLens).chainLens(rest.dLens).optJson();
                return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h3", { children: ["Rest ", f.restName, " "] }), (0, jsx_runtime_1.jsxs)("dl", { children: [(0, jsx_runtime_1.jsx)("dt", { children: "url" }), (0, jsx_runtime_1.jsx)("dd", { children: rest.url }), (0, jsx_runtime_1.jsx)("dt", { children: "Summary" }), (0, jsx_runtime_1.jsx)("dd", { children: fromFetchers.flatMap(([restCommand, tagName, reason]) => tagName == f.tagName ? [reason] : []) }), (0, jsx_runtime_1.jsx)("dt", { children: "Tags" }), (0, jsx_runtime_1.jsx)("dd", { children: TagTable(rest, theseTags, desiredTags) }), (0, jsx_runtime_1.jsx)("dt", { children: "Target path" }), (0, jsx_runtime_1.jsx)("dd", { children: f.tagName }), (0, jsx_runtime_1.jsx)("dt", { children: "Target - This must be undefined for the fetcher to load data" }), (0, jsx_runtime_1.jsx)("dd", { children: (0, jsx_runtime_1.jsx)("pre", { children: json ? JSON.stringify(json, null, 2) : 'undefined' }) })] })] }, i);
            })] });
}
function DebugTags({ state }) {
    return (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-tags-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { children: "Tag Fetchers" }) }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(Fetchers, { state: state }) }) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(Tags, { state: state }) }) })] })] })) }));
}
function DebugState(props) {
    const { state } = props;
    let main = state.main;
    const { showDebug } = main.debug;
    const validationRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        function textFor(title, details) {
            const text = details.map(([id, label, value]) => `<span class='validity-${value}'>${id}${id !== label ? ` - ${label}` : ''}</span>`).join(' ');
            return `<h3>${title}</h3>${text}`;
        }
        if (validationRef.current === null)
            return;
        const thisPage = (0, pages_1.findThisPageElement)(pages_1.focusPageClassName);
        validationRef.current.innerHTML =
            textFor('inputs', (0, pages_1.findValidityForInput)(thisPage, false)) +
                textFor('selects', (0, pages_1.findValidityForSelect)(thisPage, false)) +
                textFor('radios', (0, pages_1.findValidityForRadio)(thisPage, false));
    });
    const debugState = state.copyWithLens(lens_1.Lenses.identity().focusQuery('debug'));
    if (showDebug) {
        let showTracingState = debugState.focusOn('showTracing');
        let showOptionalsState = debugState.focusOn('showOptionalsDebug');
        let useRefsState = state.focusOn('useRefs');
        let showValidityState = debugState.focusOn('validityDebug');
        let recordTracingState = debugState.focusOn('recordTrace');
        let clearTagsState = state.copyWithLens(state.context.tagHolderL);
        let clearMessagesState = state.copyWithLens(state.context.simpleMessagesL);
        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "debug-container" }, { children: [(0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: 'hideDebug', buttonText: 'Hide Debug', state: debugState.focusOn('showDebug') }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "debug-bucket" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-log" }, { children: (0, jsx_runtime_1.jsx)(ToggleDebugs, { state: state }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-trace" }, { children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: 'debug.showTracing', buttonText: '{/debug/showTracing|Show|Hide} Tracing ', state: showTracingState }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: 'debug.recordTracing', buttonText: '{/debug/recordTrace|Start|Stop} Trace ', state: recordTracingState }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ClearTrace, { state: state }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(setStateButton_1.SetStateButton, { id: 'debug.clearMessage', label: 'Clear Messages', state: clearMessagesState, target: [] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(setStateButton_1.SetStateButton, { id: 'debug.clearTags', label: 'Clear Tags', state: clearTagsState, target: {} }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: 'debug.useRefs', buttonText: '{/useRefs|Start using|Stop using} Userefs ', state: useRefsState, defaultValue: false }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(makeTest_1.MakeTest, { state: state }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(makeTest_1.AssertPages, { state: state }) })] }) }))] })), showValidityState.optJsonOr(false) &&
                    (0, jsx_runtime_1.jsx)("div", Object.assign({ id: 'debug-validation-container' }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { children: "Validations" }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("div", { ref: validationRef }) }) }) })] })) })), showTracingState.optJsonOr(false) && (0, jsx_runtime_1.jsx)(Tracing, { state: state }), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-state-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { children: "State" }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(CommonIds, Object.assign({}, props)) }) }) })] })) })), showOptionalsState.optJsonOr(false) &&
                    (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-state-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { children: "Optionals" }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(Optionals, Object.assign({}, props)) }) }) })] })) })), (0, jsx_runtime_1.jsx)(PagesData, Object.assign({}, props)), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-context-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 2 }, { children: "Context" })) }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Page Selection Lens:" }), (0, jsx_runtime_1.jsxs)("td", { children: ["$", state.context.pageSelectionL.description] })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Rest Command Lens:" }), (0, jsx_runtime_1.jsxs)("td", { children: ["$", state.context.restL.description] })] })] })] })) })), (0, jsx_runtime_1.jsx)(DebugTags, { state: state }), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-raw-state-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 2 }, { children: "Raw State" })) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(state.json(), null, 2) }) }) }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-messages-container" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { children: "Messages" }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(Messages, { state: state }) }) }) })] })) }))] }));
    }
    else
        return (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "debug-container" }, { children: (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { id: 'showDebug', buttonText: 'Show Debug', state: debugState.focusOn('showDebug') }) }));
    // {PagesData ( { state, config } )}
}
exports.DebugState = DebugState;