xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dropdown_menu_1 = require("@radix-ui/react-dropdown-menu");
+const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const NavLinkNative_1 = require("@components/NavLink/NavLinkNative");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const NavPanelNative_1 = require("@components/NavPanel/NavPanelNative");
+const constants_1 = require("@components-core/constants");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const mergeProps_1 = require("@components-core/utils/mergeProps");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const NavGroupContext = (0, react_1.createContext)({
+    level: -1,
+});
+exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
+    if (navPanelContext !== null) {
+        inline = navPanelContext.inDrawer;
+    }
+    const navGroupContextValue = (0, react_1.useMemo)(() => {
+        return {
+            level: level + 1,
+        };
+    }, [level]);
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
+});
+const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? "chevronup" : "chevrondown" })] }), expanded &&
+                renderChild(node.children, {
+                    wrapChild: ({ node }, renderedChild) => {
+                        if (node.type === "NavLink") {
+                            const element = renderedChild;
+                            return (0, react_1.cloneElement)(element, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
+                                style: {
+                                    paddingLeft: (level + 1) * 2 + "em",
+                                },
+                            })));
+                        }
+                        return renderedChild;
+                    },
+                })] }));
+});
+const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    let Wrapper = react_dropdown_menu_1.DropdownMenu;
+    let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;
+    let Content = react_dropdown_menu_1.DropdownMenuContent;
+    if (level >= 1) {
+        Wrapper = react_dropdown_menu_1.DropdownMenuSub;
+        Trigger = react_dropdown_menu_1.DropdownMenuSubTrigger;
+        Content = react_dropdown_menu_1.DropdownMenuSubContent;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.withNavGroupChevron, {
+                            [NavGroup_module_scss_1.default.pointRight]: level >= 1,
+                        }), children: label }) }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
+                        wrapChild: ({ node }, renderedChild, hints) => {
+                            if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
+                                return renderedChild;
+                            }
+                            if (node.type === "List") {
+                                return renderedChild;
+                            }
+                            if (node.type === "NavGroup") {
+                                return renderedChild;
+                            }
+                            let child = renderedChild;
+                            if (node.type === "NavLink") {
+                                child = (0, react_1.cloneElement)(renderedChild, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
+                                    vertical: true,
+                                })));
+                            }
+                            return (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuItem, { asChild: true, children: child });
+                        },
+                    }) }) })] }));
+});

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

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navLinkComponentRenderer = exports.NavLinkMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const IconNative_1 = require("@components/Icon/IconNative");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const NavLinkNative_1 = require("./NavLinkNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "NavLink";
+exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component defines a navigation target (app navigation menu item) within ` +
+        `the app; it is associated with a particular in-app navigation target (or an external link).`,
+    props: {
+        to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        active: (0, ComponentDefs_1.d)(`This property indicates if the particular navigation is an active link. An active link ` +
+            `has a particular visual appearance, provided its [\`displayActive\`](#displayactive) ` +
+            `property is set to \`true\`.`),
+        target: (0, ComponentDefs_1.d)(`This property specifies how to open the clicked link.`),
+        label: (0, metadata_helpers_1.dLabel)(),
+        vertical: (0, ComponentDefs_1.d)(`This property sets how the active status is displayed on the \`${COMP}\` component. If ` +
+            `set to true, the indicator is displayed on the side which lends itself to a vertically ` +
+            `aligned navigation menu.`),
+        displayActive: (0, ComponentDefs_1.d)(`This Boolean property indicates if the active state of a link should have a visual ` +
+            `indication. Setting it to \`false\` removes the visual indication of an active link.`),
+        icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the navigation link.`),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "radius-NavLink": "$radius",
+        "color-bg-NavLink": "transparent",
+        "padding-horizontal-NavLink": "$space-4",
+        "padding-vertical-NavLink": "$space-2",
+        "font-size-NavLink": "$font-size-small",
+        "font-weight-NavLink": "$font-weight-normal",
+        "font-family-NavLink": "$font-family",
+        "color-text-NavLink": "$color-text-primary",
+        "font-weight-NavLink--pressed": "$font-weight-normal",
+        "thickness-indicator-NavLink": "$space-0_5",
+        "color-outline-NavLink--focus": "$color-outline--focus",
+        "thickness-outline-NavLink--focus": "$thickness-outline--focus",
+        "style-outline-NavLink--focus": "$style-outline--focus",
+        "offset-outline-NavLink--focus": "-1px",
+        "radius-indicator-NavLink": "$radius",
+        light: {
+            "color-icon-NavLink": "$color-surface-500",
+            "color-indicator-NavLink--active": "$color-primary-500",
+            "color-indicator-NavLink--pressed": "$color-primary-500",
+            "color-indicator-NavLink--hover": "$color-primary-600",
+        },
+        dark: {
+            "color-indicator-NavLink--active": "$color-primary-500",
+            "color-indicator-NavLink--pressed": "$color-primary-500",
+            "color-indicator-NavLink--hover": "$color-primary-400",
+        },
+    },
+});
+exports.navLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavLinkMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    var _a, _b;
+    const iconName = extractValue.asString(node.props.icon);
+    return ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { uid: node.uid, to: extractValue(node.props.to), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), vertical: extractValue.asOptionalBoolean(node.props.vertical), displayActive: extractValue.asOptionalBoolean(node.props.displayActive), forceActive: extractValue.asOptionalBoolean(node.props.active), style: layoutCss, target: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.target), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, className: NavLink_module_scss_1.default.icon }), children: extractValue.asDisplayText(node.props.label) || renderChild(node.children) }));
+});

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -0,0 +1,61 @@
+"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.NavLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
+const react_2 = require("@remix-run/react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const AppNative_1 = require("@components/App/AppNative");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const NavPanelNative_1 = require("@components/NavPanel/NavPanelNative");
+const component_utils_1 = require("@components/component-utils");
+exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
+    var { 
+    /* eslint-disable react/prop-types */
+    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    let safeVertical = vertical;
+    if (appLayoutContext && safeVertical === undefined) {
+        safeVertical =
+            (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext.layout) === "vertical" || (navPanelContext === null || navPanelContext === void 0 ? void 0 : navPanelContext.inDrawer);
+    }
+    const smartTo = (0, react_1.useMemo)(() => {
+        if (to) {
+            return (0, component_utils_1.createUrlWithQueryParams)(to);
+        }
+    }, [to]);
+    const styleObj = Object.assign(Object.assign({}, sx), style);
+    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
+        [NavLink_module_scss_1.default.disabled]: disabled,
+        [NavLink_module_scss_1.default.vertical]: safeVertical,
+        [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
+        [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
+    });
+    let content;
+    if (disabled || !smartTo) {
+        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
+                [NavLink_module_scss_1.default.displayActive]: displayActive,
+                [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
+            }), children: [icon, children] })));
+    }
+    return content;
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navPanelRenderer = exports.NavPanelMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const NavPanelNative_1 = require("./NavPanelNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "NavPanel";
+exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` is a placeholder within \`App\` to define the app's navigation (menu) structure.`,
+    props: {
+        logoTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the logo template to display in the navigation panel with the ` +
+            `\`vertical\` and \`vertical-sticky\` layout.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign({ [`color-bg-${COMP}`]: "transparent" }, (0, base_utils_1.borderSubject)(COMP, {})), { [`padding-horizontal-${COMP}`]: "$space-4", [`padding-vertical-logo-${COMP}`]: "$space-4", [`padding-horizontal-logo-${COMP}`]: "$space-4", [`margin-bottom-logo-${COMP}`]: "$space-4", light: {
+            [`shadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
+        }, dark: {
+            [`shadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
+        } }),
+});
+exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {
+    return ((0, jsx_runtime_1.jsx)(NavPanelNative_1.NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, inDrawer: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.inDrawer, renderChild: renderChild, children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -0,0 +1,74 @@
+"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.NavPanel = exports.NavPanelContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const LogoNative_1 = require("@components/Logo/LogoNative");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const AppNative_1 = require("@components/App/AppNative");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+exports.NavPanelContext = react_1.default.createContext(null);
+const contextValue = {
+    inDrawer: true,
+};
+function DrawerNavPanel({ logoContent, children, className, style, }) {
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
+}
+exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer, renderChild, }, forwardedRef) {
+    var _a;
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
+    const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
+    const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
+    const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
+    // console.log(appLayoutContext);
+    if (inDrawer) {
+        return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+            [NavPanel_module_scss_1.default.horizontal]: horizontal,
+            [NavPanel_module_scss_1.default.condensed]: isCondensed,
+        }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }));
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noResultComponentRenderer = exports.NoResultMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const NoResultNative_1 = require("./NoResultNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const renderers_1 = require("@components-core/renderers");
+const COMP = "NoResult";
+exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` is a component that displays a visual indication that some data query (search) ` +
+        `resulted in no (zero) items.`,
+    props: {
+        label: (0, metadata_helpers_1.dLabel)(),
+        icon: (0, ComponentDefs_1.d)(`This property defines the icon to display with the component.`),
+        hideIcon: (0, ComponentDefs_1.d)(`This boolean property indicates if the icon should be hidden.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`padding-vertical-${COMP}`]: "$space-2",
+        [`gap-icon-${COMP}`]: "$space-2",
+        [`size-icon-${COMP}`]: "$space-8",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+});
+exports.noResultComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NoResultMd, ({ node, extractValue, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(NoResultNative_1.NoResult, { label: extractValue.asDisplayText(node.props.label || node.children || "No results found"), icon: node.props.icon, hideIcon: extractValue.asOptionalBoolean(node.props.hideIcon), style: layoutCss }));
+});

package/dist/scripts/src/components/NoResult/NoResultNative.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoResult = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IconNative_1 = require("@components/Icon/IconNative");
+const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
+const NoResult = ({ label, icon, hideIcon = false, style }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, children: [!hideIcon && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon !== null && icon !== void 0 ? icon : "noresult", className: NoResult_module_scss_1.default.icon }), label] }));
+};
+exports.NoResult = NoResult;

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberBoxComponentRenderer = exports.NumberBoxMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const NumberBoxNative_1 = require("./NumberBoxNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "NumberBox";
+exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
+        `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        startText: (0, metadata_helpers_1.dStartText)(),
+        startIcon: (0, metadata_helpers_1.dStartIcon)(),
+        endText: (0, metadata_helpers_1.dEndText)(),
+        endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        hasSpinBox: (0, ComponentDefs_1.d)(`This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`, null, "boolean", true),
+        step: (0, ComponentDefs_1.d)(`This prop governs how big the step when clicking on the spinner of the field.`, null, "number"),
+        integersOnly: (0, ComponentDefs_1.d)(`This boolean property signs whether the input field accepts integers only (\`true\`) ` +
+            `or not (\`false\`).`, null, "boolean", false),
+        zeroOrPositive: (0, ComponentDefs_1.d)(`This boolean property determines whether the input value can only be 0 or positive numbers ` +
+            `(\`true\`) or also negative (\`false\`).`, null, "boolean", false),
+        minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+        maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
+});
+exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.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), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+});