xmlui 0.7.14 → 0.7.16

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pagesRenderer = exports.PagesMd = exports.pageRenderer = exports.PageMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const TableOfContentsContext_1 = require("@components-core/TableOfContentsContext");
+const PagesNative_1 = require("./PagesNative");
+const PAGE = "Page";
+exports.PageMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    docFolder: PAGE,
+    description: `The \`${PAGE}\` component defines what content is displayed when the user navigates ` +
+        `to a particular URL that is associated with the page.`,
+    props: {
+        //TODO illesg rename to path
+        url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content.`),
+    },
+});
+exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.PageMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(TableOfContentsContext_1.TableOfContentsProvider, { children: (0, jsx_runtime_1.jsx)(PagesNative_1.RouteWrapper, { childRoute: node.children, uid: node.uid, renderChild: renderChild, style: layoutCss }, extractValue(node.props.url)) }));
+});
+const COMP = "Pages";
+exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component is used as a container for [\`Page\`](./Page.mdx) components ` +
+        `within an [\`App\`](./App.mdx).`,
+    props: {
+        defaultRoute: (0, ComponentDefs_1.d)(`The default route when displaying the app`),
+    },
+});
+exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { defaultRoute: extractValue(node.props.defaultRoute), node: node, renderChild: renderChild, extractValue: extractValue }));
+});

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

@@ -0,0 +1,69 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteWrapper = RouteWrapper;
+exports.Pages = Pages;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@remix-run/react");
+const constants_1 = require("@components-core/constants");
+const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+// --- We need this component to make sure all the child routes are wrapped in a
+// --- container and  this way they can access the routeParams
+function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid }) {
+    const params = (0, react_2.useParams)();
+    //we need to wrap the child route in a container to make sure the route params are available.
+    // we do this wrapping by providing an empty object to vars.
+    // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)
+    const wrappedWithContainer = (0, react_1.useMemo)(() => {
+        if (Array.isArray(childRoute)) {
+            return {
+                type: "Fragment",
+                uid,
+                vars: constants_1.EMPTY_OBJECT,
+                children: childRoute,
+            };
+        }
+        return {
+            type: "Fragment",
+            uid,
+            vars: constants_1.EMPTY_OBJECT,
+            children: [childRoute],
+        };
+    }, [childRoute, uid]);
+    const wrapperStyle = (0, react_1.useMemo)(() => {
+        const { padding, paddingLeft, paddingRight, paddingTop, paddingBottom } = style, rest = __rest(style, ["padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]);
+        return Object.assign(Object.assign({}, rest), { "--page-padding-left-override": padding || paddingLeft, "--page-padding-right-override": padding || paddingRight, "--page-padding-top-override": padding || paddingTop, "--page-padding-bottom-override": padding || paddingBottom });
+    }, [style]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Pages_module_scss_1.default.wrapper, "xmlui-page-root"), style: wrapperStyle, children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params)));
+}
+function Pages({ node, renderChild, extractValue, defaultRoute }) {
+    var _a;
+    const routes = [];
+    const restChildren = [];
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+        if (child.type === "Page") {
+            routes.push(child);
+        }
+        else {
+            restChildren.push(child);
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((child, i) => {
+                        return ((0, jsx_runtime_1.jsx)(react_2.Route, { path: extractValue(child.props.url), element: renderChild(child) }, i));
+                    }), !!defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }), renderChild(restChildren)] }));
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pieChartComponentRenderer = exports.PieChartMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const PieChart_module_scss_1 = __importDefault(require("./PieChart.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const PieChartNative_1 = require("./PieChartNative");
+const COMP = "PieChart";
+exports.PieChartMd = (0, ComponentDefs_1.createMetadata)({
+    status: "deprecated",
+    description: "(**OBSOLETE**) A pie chart component",
+    props: {
+        data: (0, ComponentDefs_1.d)("The data to be displayed in the pie chart"),
+        isInteractive: (0, ComponentDefs_1.d)("Whether the chart is interactive"),
+        showLabels: (0, ComponentDefs_1.d)("Whether to show labels"),
+        showLegends: (0, ComponentDefs_1.d)("Whether to show legends"),
+        legendPosition: (0, ComponentDefs_1.d)("The position of the legend"),
+        legendDirection: (0, ComponentDefs_1.d)("The direction of the legend"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`scheme-${COMP}`]: "nivo",
+        [`color-text-${COMP}`]: "$color-text-secondary",
+        [`color-ticks-${COMP}`]: "$color-text-primary",
+        [`color-bg-tooltip-${COMP}`]: "$color-bg-primary",
+        [`color-text-tooltip-${COMP}`]: "$color-text-primary",
+        [`color-axis-${COMP}`]: "$color-text-primary",
+        [`color-text-legend-${COMP}`]: "$color-text-primary",
+        light: {
+            [`scheme-${COMP}`]: "set3",
+        },
+        dark: {
+            [`scheme-${COMP}`]: "dark2",
+        },
+    },
+});
+exports.pieChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PieChartMd, ({ extractValue, node, layoutCss }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ((0, jsx_runtime_1.jsx)(PieChartNative_1.PieChart, { data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), isInteractive: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.isInteractive), showLabels: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.showLabels), style: layoutCss, showLegends: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.showLegends), legendPosition: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.legendPosition), legendDirection: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.legendDirection) }));
+});

package/dist/scripts/src/components/PieChart/PieChartNative.js

@@ -0,0 +1,165 @@
+"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.PieChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const PieChart_module_scss_1 = __importDefault(require("./PieChart.module.scss"));
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const chart_color_schemes_1 = __importDefault(require("@components/chart-color-schemes"));
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("@components-core/utils/hooks");
+const ResponsivePie = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/pie"))).then((module) => ({ default: module.ResponsivePie })));
+const PieChart = ({ data = [], isInteractive = true, style, showLabels = false, showLegends = true, legendPosition = "bottom", legendDirection = "row", }) => {
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const [customLegendData, setCustomLegendData] = react_1.default.useState([]);
+    const colors = (0, hooks_1.useColors)({
+        name: "color-text-PieChart",
+        format: "hex",
+    }, {
+        name: "color-ticks-PieChart",
+        format: "hex",
+    }, {
+        name: "color-bg-tooltip-PieChart",
+        format: "hex",
+    }, {
+        name: "color-text-tooltip-PieChart",
+        format: "hex",
+    }, {
+        name: "color-axis-PieChart",
+        format: "hex",
+    }, {
+        name: "color-text-legend-PieChart",
+        format: "hex",
+    });
+    const pieChart = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(ResponsivePie, { fit: true, data: data, colors: { scheme: chart_color_schemes_1.default[getThemeVar("scheme-PieChart")] }, margin: { top: 12, right: 12, bottom: 12, left: 12 }, forwardLegendData: setCustomLegendData, theme: {
+            background: "transparent",
+            text: {
+                fontSize: 11,
+                fill: colors["color-text-PieChart"],
+                outlineWidth: 0,
+                outlineColor: "transparent",
+            },
+            axis: {
+                domain: {
+                    line: {
+                        stroke: colors["color-axis-PieChart"],
+                        strokeWidth: 1,
+                    },
+                },
+                legend: {
+                    text: {
+                        fontSize: 12,
+                        fill: colors["color-text-legend-PieChart"],
+                        outlineWidth: 0,
+                        outlineColor: "transparent",
+                    },
+                },
+                ticks: {
+                    line: {
+                        stroke: "#777777",
+                        strokeWidth: 1,
+                    },
+                    text: {
+                        fontSize: 11,
+                        fill: colors["color-ticks-PieChart"],
+                        outlineWidth: 0,
+                        outlineColor: "transparent",
+                    },
+                },
+            },
+            grid: {
+                line: {
+                    stroke: "#dddddd",
+                    strokeWidth: 1,
+                },
+            },
+            annotations: {
+                text: {
+                    fontSize: 13,
+                    fill: "#333333",
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                link: {
+                    stroke: "#000000",
+                    strokeWidth: 1,
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                outline: {
+                    stroke: "#000000",
+                    strokeWidth: 2,
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                symbol: {
+                    fill: "#000000",
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+            },
+            tooltip: {
+                wrapper: {},
+                container: {
+                    background: colors["color-bg-tooltip-PieChart"],
+                    color: colors["color-text-tooltip-PieChart"],
+                    fontSize: 12,
+                },
+                basic: {},
+                chip: {},
+                table: {},
+                tableCell: {},
+                tableCellValue: {},
+            },
+        }, padAngle: 0.7, cornerRadius: 3, activeOuterRadiusOffset: 8, borderWidth: 1, borderColor: { from: "color", modifiers: [["darker", 0.2]] }, enableArcLinkLabels: showLabels, arcLinkLabelsSkipAngle: 10, arcLinkLabelsThickness: 2, arcLabelsSkipAngle: 10, isInteractive: isInteractive })), [showLegends, data, colors, isInteractive, legendPosition, legendDirection]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, style), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.chart, {
+                    [PieChart_module_scss_1.default.legendTop]: legendPosition === "top",
+                    [PieChart_module_scss_1.default.legendRight]: legendPosition === "right",
+                    [PieChart_module_scss_1.default.legendBottom]: legendPosition === "bottom",
+                    [PieChart_module_scss_1.default.legendLeft]: legendPosition === "left",
+                }), children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.chartContainer, children: pieChart }) }), showLegends && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.legends, {
+                            [PieChart_module_scss_1.default.legendRow]: legendDirection === "row",
+                            [PieChart_module_scss_1.default.legendColumn]: legendDirection === "column",
+                        }), children: customLegendData.map((item, i) => ((0, jsx_runtime_1.jsxs)("div", { className: PieChart_module_scss_1.default.legendItem, children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendBullet, style: { backgroundColor: item.color } }), (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendLabel, children: item.label })] }, i))) }))] }) }) }));
+};
+exports.PieChart = PieChart;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionedContainerComponentRenderer = exports.PositionedContainerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const PositionedContainer_module_scss_1 = __importDefault(require("./PositionedContainer.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const PositionedContainerNative_1 = require("./PositionedContainerNative");
+const COMP = "PositionedContainer";
+exports.PositionedContainerMd = (0, ComponentDefs_1.createMetadata)({
+    status: "deprecated",
+    description: "(**OBSOLETE**) This component was created for the ChatEngine app.",
+    props: {
+        visibleOnHover: (0, ComponentDefs_1.d)("No description"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PositionedContainer_module_scss_1.default.themeVars),
+});
+exports.positionedContainerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PositionedContainerMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(PositionedContainerNative_1.PositionedContainer, { top: layoutCss.top, right: layoutCss.right, bottom: layoutCss.bottom, left: layoutCss.left, visibleOnHover: extractValue.asOptionalBoolean(node.props.visibleOnHover), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/PositionedContainer/PositionedContainerNative.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PositionedContainer = PositionedContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PositionedContainer_module_scss_1 = __importDefault(require("./PositionedContainer.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+function PositionedContainer({ children, top, right, bottom, left, visibleOnHover = false, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { top, right, bottom, left }, className: (0, classnames_1.default)(PositionedContainer_module_scss_1.default.wrapper, {
+            [PositionedContainer_module_scss_1.default.visibleOnHover]: visibleOnHover,
+        }), children: children }));
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressBarComponentRenderer = exports.ProgressBarMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ProgressBarNative_1 = require("./ProgressBarNative");
+const COMP = "ProgressBar";
+exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
+    description: `A \`${COMP}\` component visually represents the progress of a task or process.`,
+    props: {
+        value: (0, ComponentDefs_1.d)(`This property defines the progress value with a number between 0 and 1.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`radius-${COMP}`]: "$radius",
+        [`radius-indicator-${COMP}`]: "0px",
+        [`thickness-${COMP}`]: "$space-2",
+        light: {
+            [`color-bg-${COMP}`]: "$color-surface-200",
+            [`color-indicator-${COMP}`]: "$color-primary-500",
+        },
+        dark: {
+            [`color-bg-${COMP}`]: "$color-surface-700",
+            [`color-indicator-${COMP}`]: "$color-primary-500",
+        },
+    },
+});
+exports.progressBarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ProgressBarMd, ({ node, extractValue, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(ProgressBarNative_1.ProgressBar, { value: Math.max(0, Math.min(1, extractValue(node.props.value))), style: layoutCss }));
+});

package/dist/scripts/src/components/ProgressBar/ProgressBarNative.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
+const react_1 = require("react");
+exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = 0, style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
+});

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queueComponentRenderer = exports.QueueMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const container_helpers_1 = require("@components/container-helpers");
+const QueueNative_1 = require("./QueueNative");
+const COMP = "Queue";
+exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`Queue\` component provides an API to enqueue elements and defines events to process ` +
+        `queued elements in a FIFO order.`,
+    props: {
+        progressFeedback: (0, ComponentDefs_1.d)(`This property defines the component template of the UI that displays ` +
+            `progress information whenever, the queue's \`progressReport\` function in invoked.`),
+        resultFeedback: (0, ComponentDefs_1.d)(`This property defines the component template of the UI that displays result ` +
+            `information when the queue becomes empty after processing all queued items.`),
+        clearAfterFinish: (0, ComponentDefs_1.d)(`This property indicates the completed items (successful or error) should ` +
+            `be removed from the queue after completion.`),
+    },
+    nonVisual: true,
+    events: {
+        willProcess: (0, ComponentDefs_1.d)(`This event is triggered to process a particular item.`),
+        process: (0, ComponentDefs_1.d)(`This event is fired to process the next item in the queue. If the processing cannot ` +
+            `proceed because of some error, raise an exception, and the queue will handle that.`),
+        didProcess: (0, ComponentDefs_1.d)(`This event is fired when the processing of a queued item has been successfully processed.`),
+        processError: (0, ComponentDefs_1.d)(`This event is fired when processing an item raises an error. The event handler method ` +
+            `receives two parameters. The first is the error raised during the processing of the ` +
+            `item; the second is an object with these properties:`),
+        complete: (0, ComponentDefs_1.d)(`The queue fires this event when the queue gets empty after processing all items. ` +
+            `The event handler has no arguments.`),
+    },
+    apis: {
+        enqueueItem: (0, ComponentDefs_1.d)(`This method enqueues the item passed in the method parameter. The new item will be ` +
+            `processed after the current queue items have been handled. The method retrieves the ` +
+            `unique ID of the newly added item; this ID can be used later in other methods, ` +
+            `such as \`remove\`.`),
+        enqueueItems: (0, ComponentDefs_1.d)(`This method enqueues the array of items passed in the method parameter. The new items ` +
+            `will be processed after the current queue items have been handled. The method ` +
+            `retrieves an array of unique IDs, one for each new item. An item ID can be used later ` +
+            `in other methods, such as \`remove\`.`),
+        getQueuedItems: (0, ComponentDefs_1.d)(`You can use this method to return the items in the queue. These items contain all ` +
+            `entries not removed from the queue yet, including pending, in-progress, and ` +
+            `completed items.`),
+        getQueueLength: (0, ComponentDefs_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
+            `that are not fully processed yet.`),
+        remove: (0, ComponentDefs_1.d)(`This method retrieves the current queue length. The queue contains only those items ` +
+            `that are not fully processed yet.`),
+    },
+    contextVars: {
+        $completedItems: (0, ComponentDefs_1.d)(`A list containing the queue items that have been completed (fully processed).`),
+        $queuedItems: (0, ComponentDefs_1.d)(`A list containing the items waiting in the queue, icluding the completed items.`),
+    },
+});
+exports.queueComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.QueueMd, ({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(QueueNative_1.Queue, { registerComponentApi: registerComponentApi, renderResultFeedback: node.props.resultFeedback
+            ? (completedItems, queuedItems) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.resultFeedback, contextVars: {
+                        $completedItems: completedItems,
+                        $queuedItems: queuedItems,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, renderProgressFeedback: node.props.progressFeedback
+            ? (completedItems, queuedItems) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.progressFeedback, contextVars: {
+                        $completedItems: completedItems,
+                        $queuedItems: queuedItems,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, willProcessItem: lookupEventHandler("willProcess"), processItem: lookupEventHandler("process", { signError: false }), didProcessItem: lookupEventHandler("didProcess"), processItemError: lookupEventHandler("processError"), onComplete: lookupEventHandler("complete"), clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish) }));
+});