xmlui 0.4.0

package/dist/scripts/src/components/NumberBox/NumberBox.js

@@ -0,0 +1,373 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberBoxComponentRenderer = exports.NumberBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const constants_1 = require("@components-core/constants");
+const Icon_1 = require("@components/Icon/Icon");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+const Button_1 = require("@components/Button/Button");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const misc_1 = require("@components-core/utils/misc");
+// =====================================================================================================================
+// React NumberBox component definition
+const MAX_VALUE = 999999999999999;
+const DECIMAL_SEPARATOR = ".";
+const EXPONENTIAL_SEPARATOR = "e";
+const NumberBox = ({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -MAX_VALUE, max = MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, }) => {
+    // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
+    min = Math.max(zeroOrPositive ? 0 : -MAX_VALUE, min);
+    // Step must be an integer since floating point arithmetic needs a deeper dive.
+    const _step = toUsableNumber(step, true) || 1;
+    const inputRef = (0, react_1.useRef)(null);
+    const upButton = (0, react_1.useRef)(null);
+    const downButton = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    // --- Convert to representable string value (from number | null | undefined)
+    const [valueStrRep, setValueStrRep] = react_1.default.useState(mapToRepresentation(value));
+    (0, react_1.useEffect)(() => {
+        setValueStrRep(mapToRepresentation(value));
+    }, [value]);
+    // --- Initialize the related field with the input's initial value
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    // --- Handle the value change events for this input
+    const updateValue = (0, react_1.useCallback)((newValue, rep) => {
+        setValueStrRep(rep);
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [onDidChange, updateState]);
+    // --- Keypress
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        // const newValue = sanitizeInput(event.target.value.trim(), value, integersOnly, zeroOrPositive, min, max);
+        // if (!newValue) return;
+        // updateValue(newValue[0], newValue[1]);
+        const value = event.target.value;
+        const repr = value;
+        updateValue(value, repr);
+    }, [integersOnly, updateValue, min, max, zeroOrPositive, value]);
+    // --- Stepper logic
+    const handleIncStep = (0, react_1.useCallback)(() => {
+        if (readOnly)
+            return;
+        const newValue = applyStep(valueStrRep, _step, min, max, integersOnly);
+        if (newValue === undefined)
+            return;
+        updateValue(newValue, newValue.toString());
+    }, [valueStrRep, _step, min, max, integersOnly, updateValue, readOnly]);
+    const handleDecStep = (0, react_1.useCallback)(() => {
+        if (readOnly)
+            return;
+        const newValue = applyStep(valueStrRep, -_step, min, max, integersOnly);
+        if (newValue === undefined)
+            return;
+        updateValue(newValue, newValue.toString());
+    }, [valueStrRep, _step, min, max, integersOnly, updateValue, readOnly]);
+    // --- Register stepper logic to buttons
+    useLongPress(upButton.current, handleIncStep);
+    useLongPress(downButton.current, handleDecStep);
+    // --- This logic prevenst the user from typing invalid characters (in the current typing context)
+    const handleOnBeforeInput = (event) => {
+        var _a;
+        // --- Prevent the default behavior for some characters
+        let shouldPreventDefault = false;
+        let currentValue = (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
+        const currentPos = event.target.selectionStart;
+        // --- Are the caret after the exponential separator?
+        const beforeCaret = currentValue.substring(0, event.target.selectionStart);
+        // --- If "expPos" is -1, the caret is not after the exponential separator
+        const expPos = beforeCaret.indexOf(EXPONENTIAL_SEPARATOR);
+        switch (event.data) {
+            case "-":
+                shouldPreventDefault = true;
+                if (expPos === -1) {
+                    // --- Change the first char to "-" if we are before the exponential separator and it's not already there
+                    if (!currentValue.startsWith("-")) {
+                        setNewValue("-" + currentValue, currentPos + 1);
+                    }
+                }
+                else {
+                    // --- Change the char after the exponential separator to "-" if it's not already there
+                    if (currentValue[expPos + 1] !== "-") {
+                        setNewValue(currentValue.substring(0, expPos + 1) + "-" + currentValue.substring(expPos + 1), currentPos + 1);
+                    }
+                }
+                break;
+            case "+":
+                shouldPreventDefault = true;
+                if (expPos === -1) {
+                    // --- Remove the first char if it's "-" and we are before the exponential separator
+                    if (currentValue.startsWith("-")) {
+                        setNewValue(currentValue.substring(1), currentPos - 1);
+                    }
+                }
+                else {
+                    // --- Remove the char after the exponential separator if it's "-"
+                    if (currentValue[expPos + 1] === "-") {
+                        setNewValue(currentValue.substring(0, expPos + 1) + currentValue.substring(expPos + 2), currentPos - 1);
+                    }
+                }
+                break;
+            case DECIMAL_SEPARATOR:
+                // --- Prevent multiple decimal separators (integers only),
+                // --- or decimal separator after the exponential separator
+                if (integersOnly || currentValue.includes(DECIMAL_SEPARATOR) || expPos !== -1) {
+                    shouldPreventDefault = true;
+                }
+                break;
+            case EXPONENTIAL_SEPARATOR:
+                // --- Prevent exponential notation for integers
+                if (integersOnly) {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent multiple exponential separators (and too many digits after it)
+                if (currentValue.includes(EXPONENTIAL_SEPARATOR) || tooManyDigitsAfterExponentialSeparator(currentPos, 2)) {
+                    shouldPreventDefault = true;
+                }
+                break;
+            default:
+                // --- Prevent non-digit characters
+                if (event.data < "0" || event.data > "9") {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent digits before minus sign
+                if (currentValue.startsWith("-") && event.target.selectionStart === 0) {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent too many digits after the exponential separator
+                if (expPos !== -1 && tooManyDigitsAfterExponentialSeparator(expPos + 1, 1)) {
+                    // --- Caret after the exponential separator
+                    // --- Prevent typing a digi if more than 2 digits after the exponential separator
+                    shouldPreventDefault = true;
+                }
+                break;
+        }
+        // --- Done.
+        if (shouldPreventDefault) {
+            event.preventDefault();
+        }
+        return;
+        // --- Helpers
+        function tooManyDigitsAfterExponentialSeparator(pos, maxDigits) {
+            let numDigitsAfter = 0;
+            while (pos < currentValue.length) {
+                if (/\d/.test(currentValue[pos++])) {
+                    numDigitsAfter++;
+                }
+                else {
+                    numDigitsAfter = maxDigits + 1;
+                    break;
+                }
+            }
+            return numDigitsAfter > maxDigits;
+        }
+        function setNewValue(newValue, pos) {
+            var _a;
+            event.target.value = newValue;
+            updateValue(newValue, newValue);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(pos, pos);
+        }
+    };
+    // --- Setting steppers with keyboard
+    const handleOnKey = (0, react_1.useCallback)((event) => {
+        if (event.code === "ArrowUp") {
+            event.preventDefault();
+            handleIncStep();
+        }
+        if (event.code === "ArrowDown") {
+            event.preventDefault();
+            handleDecStep();
+        }
+    }, [handleIncStep, handleDecStep]);
+    // --- Manage obtaining and losing focus & blur
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        setValueStrRep(mapToRepresentation(value));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [value, onBlur]);
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue, isEmptyLike(newValue) ? "" : String(newValue));
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
+            [NumberBox_module_scss_1.default.readOnly]: readOnly,
+            [NumberBox_module_scss_1.default.disabled]: !enabled,
+            [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
+            [NumberBox_module_scss_1.default.error]: validationStatus === "error",
+            [NumberBox_module_scss_1.default.warning]: validationStatus === "warning",
+            [NumberBox_module_scss_1.default.valid]: validationStatus === "valid",
+        }), tabIndex: -1, style: style, onFocus: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled, ref: upButton, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled, ref: downButton, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }));
+};
+exports.NumberBox = NumberBox;
+function applyStep(valueStrRep, step, min, max, integersOnly) {
+    const currentValue = toUsableNumber(valueStrRep, integersOnly);
+    if (isEmptyLike(currentValue)) {
+        return;
+    }
+    let newValue = clamp(currentValue + step, min, max);
+    return newValue;
+}
+/**
+ * Check whether the input value is a usable number for operations.
+ * Passes if it's of type number or a non-empty string that evaluates to a number.
+ */
+function isUsableFloat(value) {
+    if (typeof value === "string" && value.length > 0) {
+        return !Number.isNaN(+value) && naiveFloatBounding(value);
+    }
+    return typeof value === "number";
+}
+// TEMP
+// Rounding and arithmetic with large floats is a hassle if loss of precision is apparent.
+// Just bound the incoming floating point value to the max value available.
+// This is an edge case but makes it so that we stay consistent and can do arithmetic with the spinner box.
+function naiveFloatBounding(value) {
+    const integerPart = value.split(".")[0];
+    return Math.abs(Number.parseInt(integerPart)) <= MAX_VALUE;
+}
+/**
+ * Check whether the input value is a usable integer for operations.
+ * Passes if it's of type number and is an integer
+ * or a non-empty string that evaluates to an integer.
+ */
+function isUsableInteger(value) {
+    if (typeof value === "string" &&
+        value.length > 0 &&
+        ![EXPONENTIAL_SEPARATOR, DECIMAL_SEPARATOR].some((item) => value.includes(item))) {
+        return Number.isSafeInteger(+value);
+    }
+    else if (typeof value === "number") {
+        return Number.isSafeInteger(value);
+    }
+    return false;
+}
+function toUsableNumber(value, isInteger = false) {
+    const isUsable = isInteger ? isUsableInteger : isUsableFloat;
+    if (!isUsable(value))
+        return null;
+    if (typeof value === "string") {
+        value = isInteger ? Number.parseInt(value) : +value;
+    }
+    return value;
+}
+function mapToRepresentation(value) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return value.toString();
+    return "";
+}
+function clamp(value, min, max) {
+    let clamped = value;
+    if (value < min)
+        clamped = min;
+    if (value > max)
+        clamped = max;
+    return clamped;
+}
+function isEmptyLike(value) {
+    return typeof value === "undefined" || value === null || value === "";
+}
+function useLongPress(elementRef, action, delay = 500) {
+    const timeoutId = (0, react_1.useRef)(0);
+    const intervalId = (0, react_1.useRef)(0);
+    const savedAction = (0, react_1.useRef)(action);
+    // Remember the latest action callback, since it is different every render
+    (0, react_1.useEffect)(() => {
+        savedAction.current = action;
+    }, [action]);
+    (0, react_1.useEffect)(() => {
+        const onMouseDown = () => {
+            var _a;
+            (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+            timeoutId.current = window.setTimeout(() => {
+                intervalId.current = window.setInterval(() => {
+                    var _a;
+                    (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+                }, 100);
+            }, delay);
+        };
+        const onMouseUp = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        const onMouseOut = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mousedown", onMouseDown);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseup", onMouseUp);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseout", onMouseOut);
+        return () => {
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mousedown", onMouseDown);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseup", onMouseUp);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseout", onMouseOut);
+        };
+    }, [elementRef, action, delay]);
+}
+const metadata = {
+    displayName: "NumberBox",
+    description: "Represents an input component for numeric data entry",
+    props: Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), { hasSpinBox: (0, descriptorHelper_1.desc)("Indicates if the component displays a spin box"), step: (0, descriptorHelper_1.desc)("Number of increment and decrement steps used with the spin box"), integersOnly: (0, descriptorHelper_1.desc)("Indicates if the component accepts only integer numbers"), zeroOrPositive: (0, descriptorHelper_1.desc)("Indicates if the component accepts only positive numbers"), minValue: (0, descriptorHelper_1.desc)("Lower boundary of input values (inclusive)"), maxValue: (0, descriptorHelper_1.desc)("Upper boundary of input values (inclusive)") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
+};
+exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)("NumberBox", ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength) }));
+}, metadata);

package/dist/scripts/src/components/Option/Option.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const SelectContext_1 = require("@components/Select/SelectContext");
+const container_helpers_1 = require("@components/container-helpers");
+function OptionComponent(props) {
+    const id = (0, react_1.useId)();
+    const { register, unRegister } = (0, SelectContext_1.useSelectContext)();
+    (0, react_1.useEffect)(() => {
+        register(Object.assign(Object.assign({}, props), { id }));
+    }, [id, props, register]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            unRegister(id);
+        };
+    }, [id, unRegister]);
+    return null;
+}
+exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)("Option", (rendererContext) => {
+    var _a;
+    const { node, renderChild, extractValue } = rendererContext;
+    let label = extractValue(node.props.label);
+    let value = extractValue(node.props.value);
+    if (label == undefined && value == undefined) {
+        return null;
+    }
+    if (label != undefined && value == undefined) {
+        value = label;
+    }
+    else if (label == undefined && value != undefined) {
+        label = value;
+    }
+    return ((0, jsx_runtime_1.jsx)(OptionComponent, { value: value, label: label, disabled: extractValue.asOptionalBoolean(node.props.disabled), renderer: ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)
+            ? (item) => {
+                return (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, item: item, renderChild: renderChild });
+            }
+            : undefined }));
+});

package/dist/scripts/src/components/PageMetaTitle/PageMetaTitle.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageMetaTitleComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_helmet_async_1 = require("react-helmet-async");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+// =====================================================================================================================
+// React PageMetaTitle component implementation
+const PageMetaTitle = ({ title }) => {
+    return (0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { title: title });
+};
+const metadata = {
+    displayName: "PageMetaTitle",
+    description: "This component defines the title to add to the current page's metadata",
+    props: {
+        value: (0, descriptorHelper_1.desc)("Page title"),
+    },
+};
+exports.pageMetaTitleComponentRenderer = (0, renderers_1.createComponentRenderer)("PageMetaTitle", ({ node, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(PageMetaTitle, { title: extractValue(node.props.value) });
+}, metadata);

package/dist/scripts/src/components/Pages/Pages.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pagesRenderer = exports.pageRenderer = void 0;
+exports.RouteWrapper = RouteWrapper;
+exports.Page = Page;
+exports.Pages = Pages;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const react_2 = require("@remix-run/react");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const RouteContext_1 = require("@components-core/RouteContext");
+const constants_1 = require("@components-core/constants");
+//we need this component to make sure all the child routes are wrapped in a container.
+//  this way they can access the routeParams
+function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, }) {
+    const params = (0, react_2.useParams)();
+    const wrappedWithContainer = (0, react_1.useMemo)(() => {
+        if (Array.isArray(childRoute)) {
+            return {
+                type: "Container",
+                children: childRoute,
+            };
+        }
+        return {
+            type: "Container",
+            children: [childRoute],
+        };
+    }, [childRoute]);
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params));
+}
+const PageMetadata = {
+    displayName: "Page",
+    description: "A placeholder for the content to display with a particular route",
+    props: {
+        url: (0, descriptorHelper_1.desc)("The URL of the route associated with the content"),
+    },
+};
+function Page({ children, url }) {
+    const id = (0, react_1.useId)();
+    const { register, unRegister } = (0, RouteContext_1.useRouteContext)();
+    (0, react_1.useEffect)(() => {
+        register({
+            id,
+            url,
+            children,
+        });
+    }, [children, id, register, url]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            unRegister(id);
+        };
+    }, [id, unRegister]);
+    return null;
+}
+exports.pageRenderer = (0, renderers_1.createComponentRenderer)("Page", ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(Page, { url: extractValue(node.props.url), children: (0, jsx_runtime_1.jsx)(RouteWrapper, { childRoute: node.children, renderChild: renderChild }) }));
+}, PageMetadata);
+function Pages({ defaultRoute, children }) {
+    const { routes, routeContextValue } = (0, RouteContext_1.useRouteContextValue)();
+    return ((0, jsx_runtime_1.jsxs)(RouteContext_1.RouteContext.Provider, { value: routeContextValue, children: [children, routes.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((value) => {
+                        return (0, jsx_runtime_1.jsx)(react_2.Route, { path: value.url, element: value.children }, value.id);
+                    }), defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }))] }));
+}
+const PagesMetadata = {
+    displayName: "Pages",
+    description: "A node grouping routes with their contents",
+    props: {
+        defaultRoute: (0, descriptorHelper_1.desc)("The default route when displaying the app"),
+    },
+};
+exports.pagesRenderer = (0, renderers_1.createComponentRenderer)("Pages", ({ node, extractValue, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)(Pages, { defaultRoute: extractValue(node.props.defaultRoute), children: renderChild(node.children) });
+}, PagesMetadata);

package/dist/scripts/src/components/Pdf/LazyPdf.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pdfComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const Pdf = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("./Pdf"))));
+const LazyPdf = (props) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: (0, jsx_runtime_1.jsx)(Pdf, Object.assign({}, props)) }));
+};
+const metadata = {
+    displayName: "PDF Preview",
+    description: "Displays a PDF document preview",
+    props: {
+        src: (0, descriptorHelper_1.desc)("Specifies the path to the pdf"),
+    },
+};
+exports.pdfComponentRenderer = (0, renderers_1.createComponentRenderer)("Pdf", ({ node, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(LazyPdf, { src: extractValue(node.props.src) });
+}, metadata);

package/dist/scripts/src/components/Pdf/Pdf.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Pdf_module_scss_1 = __importDefault(require("./Pdf.module.scss"));
+const react_pdf_1 = require("react-pdf");
+const pdf_worker_url_1 = __importDefault(require("pdfjs-dist/build/pdf.worker?url"));
+react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = pdf_worker_url_1.default;
+const Pdf = ({ src }) => {
+    const [numPages, setNumPages] = (0, react_1.useState)(null);
+    function onLoadSuccess({ numPages }) {
+        setNumPages(numPages);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: Pdf_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { position: "relative", minHeight: 0 }, children: (0, jsx_runtime_1.jsx)(react_pdf_1.Document, { file: src, onLoadSuccess: onLoadSuccess, children: Array.from(new Array(numPages), (_, index) => ((0, jsx_runtime_1.jsx)(react_pdf_1.Page, { pageNumber: index + 1, loading: "", className: Pdf_module_scss_1.default.page }, index + 1))) }) }) }));
+};
+exports.default = Pdf;