xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/Accordion/AccordionItemNative.js

@@ -0,0 +1,79 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.AccordionItemComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AccordionContext_1 = require("@components/Accordion/AccordionContext");
+const Accordion_module_scss_1 = __importDefault(require("@components/Accordion/Accordion.module.scss"));
+const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
+const RAccordion = __importStar(require("@radix-ui/react-accordion"));
+const classnames_1 = __importDefault(require("classnames"));
+function defaultRenderer(header) {
+    return (0, jsx_runtime_1.jsx)("div", { children: header });
+}
+exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemComponent({ id, header, headerRenderer = defaultRenderer, content, initiallyExpanded, style }, forwardedRef) {
+    const generatedId = (0, react_1.useId)();
+    const itemId = (0, react_1.useMemo)(() => (id ? `${id}` : generatedId), [id, generatedId]);
+    const triggerId = (0, react_1.useMemo)(() => `trigger_${itemId}`, [itemId]);
+    const { rotateExpanded, expandedItems, hideIcon, expandedIcon, collapsedIcon, triggerPosition, expandItem, register, unRegister, } = (0, AccordionContext_1.useAccordionContext)();
+    const expanded = (0, react_1.useMemo)(() => expandedItems.includes(itemId), [itemId, expandedItems]);
+    const [initialised, setInitialised] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!initialised) {
+            setInitialised(true);
+            if (initiallyExpanded) {
+                expandItem(itemId);
+            }
+        }
+    }, [expandItem, itemId, initiallyExpanded, initialised]);
+    (0, react_1.useEffect)(() => {
+        register(triggerId);
+    }, [register, triggerId]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            unRegister(triggerId);
+        };
+    }, [triggerId, unRegister]);
+    return ((0, jsx_runtime_1.jsxs)(RAccordion.Item, { value: itemId, className: Accordion_module_scss_1.default.item, ref: forwardedRef, style: style, children: [(0, jsx_runtime_1.jsx)(RAccordion.Header, { className: Accordion_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)(RAccordion.Trigger, { id: `trigger_${itemId}`, className: (0, classnames_1.default)(Accordion_module_scss_1.default.trigger, {
+                        [Accordion_module_scss_1.default.triggerStart]: triggerPosition === "start",
+                    }), children: [headerRenderer(header), !hideIcon && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                transform: expanded && !expandedIcon ? `rotate(${rotateExpanded})` : "rotate(0deg)",
+                                transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: !expanded ? collapsedIcon : expandedIcon || collapsedIcon, className: Accordion_module_scss_1.default.chevron }) }))] }) }), (0, jsx_runtime_1.jsx)(RAccordion.Content, { className: Accordion_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Accordion_module_scss_1.default.content, children: content }) })] }, itemId));
+});

package/dist/scripts/src/components/Accordion/AccordionNative.js

@@ -0,0 +1,122 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.AccordionComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RAccordion = __importStar(require("@radix-ui/react-accordion"));
+const AccordionContext_1 = require("@components/Accordion/AccordionContext");
+const Accordion_module_scss_1 = __importDefault(require("./Accordion.module.scss"));
+const react_1 = require("react");
+const constants_1 = require("@components-core/constants");
+exports.AccordionComponent = (0, react_1.forwardRef)(function AccordionComponent({ style, children, hideIcon = false, expandedIcon, collapsedIcon = "chevrondown", triggerPosition = "end", onDisplayDidChange = constants_1.noop, registerComponentApi, rotateExpanded = "180deg", }, forwardedRef) {
+    const [expandedItems, setExpandedItems] = (0, react_1.useState)([]);
+    const [itemElements, setItemElements] = (0, react_1.useState)(new Set());
+    const collapseItem = (0, react_1.useCallback)((id) => {
+        setExpandedItems((prev) => prev.filter((item) => item !== `${id}`));
+    }, [setExpandedItems]);
+    const expandItem = (0, react_1.useCallback)((id) => {
+        if (!expandedItems.includes(`${id}`)) {
+            setExpandedItems((prev) => [...prev, `${id}`]);
+        }
+    }, [setExpandedItems, expandedItems]);
+    const toggleItem = (0, react_1.useCallback)((id) => {
+        if (expandedItems.includes(`${id}`)) {
+            collapseItem(id);
+        }
+        else {
+            expandItem(id);
+        }
+    }, [setExpandedItems, expandedItems]);
+    const register = (0, react_1.useCallback)((id) => {
+        setItemElements((prev) => {
+            prev.add(id);
+            return prev;
+        });
+    }, [setItemElements]);
+    const unRegister = (0, react_1.useCallback)((id) => {
+        setItemElements((prev) => {
+            prev.delete(id);
+            return prev;
+        });
+    }, [setItemElements]);
+    const focusItem = (0, react_1.useCallback)((id) => {
+        if (itemElements.has(`trigger_${id}`)) {
+            const trigger = document.getElementById(`trigger_${id}`);
+            if (trigger) {
+                trigger.focus();
+            }
+        }
+    }, [itemElements]);
+    const isExpanded = (0, react_1.useCallback)((id) => {
+        return expandedItems.includes(`${id}`);
+    }, [expandedItems]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            expanded: isExpanded,
+            expand: expandItem,
+            collapse: collapseItem,
+            toggle: toggleItem,
+            focus: focusItem,
+        });
+    }, [registerComponentApi, expandItem, collapseItem, toggleItem, focusItem, isExpanded]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        register,
+        unRegister,
+        expandItem,
+        expandedItems,
+        hideIcon,
+        expandedIcon,
+        collapsedIcon,
+        triggerPosition,
+        rotateExpanded,
+    }), [
+        register,
+        unRegister,
+        expandedItems,
+        hideIcon,
+        expandedIcon,
+        collapsedIcon,
+        triggerPosition,
+        expandItem,
+        rotateExpanded,
+    ]);
+    (0, react_1.useEffect)(() => {
+        onDisplayDidChange === null || onDisplayDidChange === void 0 ? void 0 : onDisplayDidChange(expandedItems);
+    }, [expandedItems, onDisplayDidChange]);
+    return ((0, jsx_runtime_1.jsx)(AccordionContext_1.AccordionContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(RAccordion.Root, { style: style, ref: forwardedRef, value: expandedItems, type: "multiple", className: Accordion_module_scss_1.default.root, onValueChange: (value) => setExpandedItems(value), children: children }) }));
+});

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertComponentRenderer = exports.AlertMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const Alert_module_scss_1 = __importDefault(require("./Alert.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const AlertNative_1 = require("./AlertNative");
+const abstractions_1 = require("@components/abstractions");
+const COMP = "Alert";
+// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
+exports.AlertMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component is a panel used to display important ` +
+        `notifications or feedback to users. It helps convey different statuses or levels of urgency, ` +
+        `such as success, warning, error, and others.`,
+    props: {
+        statusColor: (0, ComponentDefs_1.d)(`The value of this optional property sets the string to provide a color scheme for the ${COMP}.`, abstractions_1.statusColorMd, "string", "primary"),
+        dismissable: (0, ComponentDefs_1.d)(`This property's \`true\` value indicates if this alert is dismissable by the user. When the ` +
+            `user closes the ${COMP}, it gets hidden.`),
+        autoDismissInMs: (0, ComponentDefs_1.d)("Timeout for the alert to be dismissed"),
+        showIcon: (0, ComponentDefs_1.d)("Indicates if the alert should display an icon"),
+        icon: (0, ComponentDefs_1.d)("Icon to be displayed in the alert"),
+    },
+    events: {},
+    apis: {
+        dismiss: (0, ComponentDefs_1.d)(`This method dismisses the ${COMP}. It triggers the \`didDismiss\` event with the argument set ` +
+            `to \`false\`.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Alert_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {},
+        dark: {},
+    },
+});
+exports.alertComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AlertMd, ({ layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(AlertNative_1.Alert, {});
+});

package/dist/scripts/src/components/Alert/AlertNative.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.Alert = (0, react_1.forwardRef)(function Alert({ style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: Object.assign({ backgroundColor: "orange", color: "white", padding: 2 }, style), children: "Alert component is not implemented yet" }));
+});

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slideInAnimationRenderer = exports.fadeInAnimationRenderer = exports.animationComponentRenderer = exports.SlideInAnimationMd = exports.FadeInAnimationMd = exports.AnimationMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const AnimationNative_1 = require("@components/Animation/AnimationNative");
+const COMP = "Animation";
+exports.AnimationMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: ``,
+    props: {
+        animation: (0, ComponentDefs_1.d)(`The animation object to be applied to the component`),
+        animateWhenInView: (0, ComponentDefs_1.d)(`Indicates whether the animation should start when the component is in view`),
+        duration: (0, ComponentDefs_1.d)(`The duration of the animation in milliseconds`),
+        once: (0, ComponentDefs_1.d)(`Indicates whether the animation should only run once`),
+    },
+    events: {
+        started: (0, ComponentDefs_1.d)(`Event fired when the animation starts`),
+        stopped: (0, ComponentDefs_1.d)(`Event fired when the animation stops`),
+    },
+    apis: {
+        start: (0, ComponentDefs_1.d)(`Starts the animation`),
+        stop: (0, ComponentDefs_1.d)(`Stops the animation`),
+    },
+});
+exports.FadeInAnimationMd = (0, ComponentDefs_1.createMetadata)(Object.assign(Object.assign({}, exports.AnimationMd), { specializedFrom: COMP, description: `The \`${COMP}\` component represents an animation that fades in the content.` }));
+exports.SlideInAnimationMd = (0, ComponentDefs_1.createMetadata)(Object.assign(Object.assign({}, exports.AnimationMd), { specializedFrom: COMP, description: `The \`${COMP}\` component represents an animation that slides in the content from the left.`, props: {
+        animateWhenInView: (0, ComponentDefs_1.d)(`Indicates whether the animation should start when the component is in view`),
+        direction: (0, ComponentDefs_1.d)(`The direction from which the content should slide in`),
+        duration: (0, ComponentDefs_1.d)(`The duration of the animation in milliseconds`),
+    } }));
+exports.animationComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AnimationMd, ({ registerComponentApi, renderChild, node, extractValue, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, { registerComponentApi: registerComponentApi, animation: extractValue(node.props.animation), onStop: lookupEventHandler("stopped"), onStart: lookupEventHandler("started"), duration: extractValue.asOptionalNumber(node.props.duration), animateWhenInView: extractValue.asOptionalBoolean(node.props.animateWhenInView), once: extractValue.asOptionalBoolean(node.props.once), children: renderChild(node.children) }));
+});
+exports.fadeInAnimationRenderer = (0, renderers_1.createComponentRenderer)("FadeInAnimation", exports.FadeInAnimationMd, ({ node, renderChild, extractValue, registerComponentApi, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, { registerComponentApi: registerComponentApi, animation: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        }, duration: extractValue.asOptionalNumber(node.props.duration), onStop: lookupEventHandler("stopped"), onStart: lookupEventHandler("started"), animateWhenInView: extractValue.asOptionalBoolean(node.props.animateWhenInView), children: renderChild(node.children) }));
+});
+exports.slideInAnimationRenderer = (0, renderers_1.createComponentRenderer)("SlideInAnimation", exports.SlideInAnimationMd, ({ node, renderChild, extractValue, registerComponentApi, lookupEventHandler }) => {
+    const direction = extractValue.asString(node.props.direction);
+    const animation = {
+        from: {
+            transform: direction === "right"
+                ? "translateX(100%)"
+                : direction === "left"
+                    ? "translateX(-100%)"
+                    : direction === "top"
+                        ? "translateY(-100%)"
+                        : "translateY(100%)",
+        },
+        to: {
+            transform: direction === "right" || direction === "left" ? "translateX(0)" : "translateY(0)",
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, { registerComponentApi: registerComponentApi, animation: animation, duration: extractValue.asOptionalNumber(node.props.duration), onStop: lookupEventHandler("stopped"), onStart: lookupEventHandler("started"), animateWhenInView: extractValue.asOptionalBoolean(node.props.animateWhenInView), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/Animation/AnimationNative.js

@@ -0,0 +1,75 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const web_1 = require("@react-spring/web");
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const AnimatedComponent = (0, web_1.animated)((0, react_1.forwardRef)(function InlineComponentDef(props, ref) {
+    const { children, style } = props;
+    return react_1.default.cloneElement(children, { style, ref });
+}));
+const Animation = ({ children, registerComponentApi, animation, duration = 500, onStop, onStart, animateWhenInView = false, once = false, }) => {
+    const animationSettings = (0, react_1.useMemo)(() => ({
+        from: animation.from,
+        to: animation.to,
+        config: Object.assign(Object.assign({}, animation.config), { duration }),
+        onStart,
+        onRest: onStop,
+        once,
+    }), [animation, duration, onStart, onStop, once]);
+    const [springs, api] = (0, web_1.useSpring)(() => (Object.assign({}, animationSettings)));
+    const [ref, animationStyles] = (0, web_1.useInView)(() => animationSettings, {
+        once,
+    });
+    const startAnimation = (0, react_2.useCallback)(() => {
+        api.start(animation);
+        return () => {
+            api.stop();
+        };
+    }, [api]);
+    const stopAnimation = (0, react_2.useCallback)(() => {
+        api.stop();
+    }, [api]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            start: startAnimation,
+            stop: stopAnimation,
+        });
+    }, [registerComponentApi, startAnimation, stopAnimation]);
+    return react_1.Children.map(children, (child, index) => ((0, jsx_runtime_1.jsx)(AnimatedComponent, { style: animateWhenInView ? animationStyles : springs, ref: ref, children: child }, index)));
+};
+exports.Animation = Animation;

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

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appRenderer = exports.AppMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const AppLayoutContext_1 = require("./AppLayoutContext");
+const App_module_scss_1 = __importDefault(require("./App.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const AppNative_1 = require("./AppNative");
+const COMP = "App";
+exports.AppMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` component provides a UI frame for XMLUI apps. According to predefined (and ` +
+        `run-time configurable) structure templates, \`${COMP}\` allows you to display your ` +
+        `preferred layout.`,
+    props: {
+        layout: (0, ComponentDefs_1.d)(`This property sets the layout template of the app. This setting determines the position ` +
+            `and size of the app parts (such as header, navigation bar, footer, etc.) and the app's ` +
+            `scroll behavior.`, AppLayoutContext_1.appLayoutMd),
+        loggedInUser: (0, ComponentDefs_1.d)(`Stores information about the currently logged in user.`),
+        logoTemplate: (0, metadata_helpers_1.dComponent)("Optional template of the app logo"),
+        logo: (0, ComponentDefs_1.d)("Optional logo path"),
+        "logo-dark": (0, ComponentDefs_1.d)("Optional logo path in dark tone"),
+        "logo-light": (0, ComponentDefs_1.d)("Optional logo path in light tone"),
+        name: (0, ComponentDefs_1.d)("Optional application name (visible in the browser tab)"),
+        scrollWholePage: (0, ComponentDefs_1.d)(`This boolean property specifies whether the whole page should scroll (\`true\`) or just ` +
+            `the content area (\`false\`). The default value is \`true\`.`, null, "boolean", true),
+        noScrollbarGutters: (0, ComponentDefs_1.d)("This boolean property specifies whether the scrollbar gutters should be hidden.", null, "boolean", false),
+        defaultTone: (0, ComponentDefs_1.d)('This property sets the app\'s default tone ("light" or "dark").', null, "string", "light"),
+        defaultTheme: (0, ComponentDefs_1.d)("This property sets the app's default theme.", null, "string", "xmlui"),
+    },
+    events: {
+        ready: (0, ComponentDefs_1.d)(`This event fires when the \`${COMP}\` component finishes rendering on the page.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`width-navPanel-${COMP}`]: "$space-64",
+        [`max-content-width-${COMP}`]: "$max-content-width",
+        [`shadow-header-${COMP}`]: "$shadow-spread",
+        [`shadow-pages-${COMP}`]: "$shadow-spread",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+});
+exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    var _a;
+    let AppHeader;
+    let Footer;
+    let NavPanel;
+    const restChildren = [];
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+        if (child.type === "AppHeader") {
+            AppHeader = child;
+        }
+        else if (child.type === "Footer") {
+            Footer = child;
+        }
+        else if (child.type === "NavPanel") {
+            NavPanel = child;
+        }
+        else {
+            restChildren.push(child);
+        }
+    });
+    const layoutType = extractValue(node.props.layout);
+    return ((0, jsx_runtime_1.jsx)(AppNative_1.App, { scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage, true), noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false), style: layoutCss, layout: layoutType, loggedInUser: extractValue(node.props.loggedInUser), onReady: lookupEventHandler("ready"), header: renderChild(AppHeader), footer: renderChild(Footer), navPanel: renderChild(NavPanel), navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, name: extractValue(node.props.name), logo: extractValue(node.props.logo), logoDark: extractValue(node.props["logo-dark"]), logoLight: extractValue(node.props["logo-light"]), defaultTone: extractValue(node.props.defaultTone), defaultTheme: extractValue(node.props.defaultTheme), children: renderChild(restChildren) }));
+});

package/dist/scripts/src/components/App/AppLayoutContext.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLayoutContext = exports.appLayouts = exports.appLayoutMd = void 0;
+exports.useAppLayoutContext = useAppLayoutContext;
+const react_1 = require("react");
+const appLayoutNames = [
+    "vertical",
+    "vertical-sticky",
+    "vertical-full-header",
+    "condensed",
+    "condensed-sticky",
+    "horizontal",
+    "horizontal-sticky",
+];
+exports.appLayoutMd = [
+    {
+        value: "vertical",
+        description: "This layout puts the navigation bar on the left side and displays its items vertically. The main content is aligned to the right (including the header and the footer), and its content is a single scroll container; every part of it moves as you scroll the page. This layout does not display the logo in the app header.",
+    },
+    {
+        value: "vertical-sticky",
+        description: "Similar to `vertical`, the header and the navigation bar dock to the top of the main content's viewport, while the footer sticks to the bottom. This layout does not display the logo in the app header.",
+    },
+    {
+        value: "vertical-full-header",
+        description: "Similar to `vertical-sticky`. However, the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom.",
+    },
+    {
+        value: "condensed",
+        description: "Similar to `horizontal`. However, the header and the navigation bar are in a single header block. (default)",
+    },
+    {
+        value: "condensed-sticky",
+        description: "However, the header and the navigation bar are in a single header block.",
+    },
+    {
+        value: "horizontal",
+        description: "This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page.",
+    },
+    {
+        value: "horizontal-sticky",
+        description: "Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom.",
+    },
+];
+exports.appLayouts = [...appLayoutNames];
+exports.AppLayoutContext = (0, react_1.createContext)(null);
+function useAppLayoutContext() {
+    return (0, react_1.useContext)(exports.AppLayoutContext);
+}