@j2inn/fin5-ui-utils 6.0.5-beta.0 → 6.1.0

package/dist/react/components/charts/pie/SimplePieChart.js

@@ -1,56 +1,56 @@
-"use strict";
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-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.SimplePieChart = void 0;
-const am5 = __importStar(require("@amcharts/amcharts5"));
-const Animated_1 = __importDefault(require("@amcharts/amcharts5/themes/Animated"));
-const react_1 = __importDefault(require("react"));
-const PieChart_1 = require("./PieChart");
-/**
- * Simplified version of the pie chart for quick usage and easy configuration.
- * Serves also as an example of how to use the underlying PieChart component.
- */
-const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
-    style: 'decimal',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 1,
-}, hideLabels, DOMtargetId, }) => {
-    return (react_1.default.createElement(PieChart_1.PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [Animated_1.default] : undefined, chartSettingsProvider: () => ({
-            innerRadius: donut ? am5.percent(55) : undefined,
-        }), numberFormat: numberFormat, legendSettingsProvider: () => ({
-            centerX: am5.percent(50),
-            x: am5.percent(50),
-        }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
-            tooltipText: tooltipFormat,
-        } }));
-};
-exports.SimplePieChart = SimplePieChart;
+"use strict";
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+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.SimplePieChart = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const Animated_1 = __importDefault(require("@amcharts/amcharts5/themes/Animated"));
+const react_1 = __importDefault(require("react"));
+const PieChart_1 = require("./PieChart");
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+}, hideLabels, DOMtargetId, }) => {
+    return (react_1.default.createElement(PieChart_1.PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [Animated_1.default] : undefined, chartSettingsProvider: () => ({
+            innerRadius: donut ? am5.percent(55) : undefined,
+        }), numberFormat: numberFormat, legendSettingsProvider: () => ({
+            centerX: am5.percent(50),
+            x: am5.percent(50),
+        }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
+            tooltipText: tooltipFormat,
+        } }));
+};
+exports.SimplePieChart = SimplePieChart;
 //# sourceMappingURL=SimplePieChart.js.map

package/dist/react/components/graphics/GraphicViewer.d.ts

@@ -1,10 +1,10 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-interface GraphicViewerProps {
-    projectName?: string;
-    graphicId: HRef;
-    targetRef: HRef;
-    className?: string;
-}
-export declare const GraphicViewer: React.FC<GraphicViewerProps>;
-export {};
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicViewerProps {
+    projectName?: string;
+    graphicId: HRef;
+    targetRef: HRef;
+    className?: string;
+}
+export declare const GraphicViewer: React.FC<GraphicViewerProps>;
+export {};

package/dist/react/components/graphics/GraphicViewer.js

@@ -1,30 +1,30 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphicViewer = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const react_jss_1 = require("react-jss");
-const fin5Top_1 = require("../../../fin5Top/fin5Top");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    iframe: {
-        width: '100%',
-        height: '100%',
-        border: 0,
-        overflow: 'hidden',
-    },
-});
-const GraphicViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
-    const classes = useStyles();
-    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
-    url.hash = `targetRef=${targetRef.toAxon()}`;
-    url.searchParams.set('projectRef', graphicId.toAxon());
-    return (react_1.default.createElement("iframe", { id: graphicId.toAxon(), className: (0, classnames_1.default)(classes.iframe, className), src: url.toString() }));
-};
-exports.GraphicViewer = GraphicViewer;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphicViewer = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_jss_1 = require("react-jss");
+const fin5Top_1 = require("../../../fin5Top/fin5Top");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    iframe: {
+        width: '100%',
+        height: '100%',
+        border: 0,
+        overflow: 'hidden',
+    },
+});
+const GraphicViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
+    const classes = useStyles();
+    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
+    url.hash = `targetRef=${targetRef.toAxon()}`;
+    url.searchParams.set('projectRef', graphicId.toAxon());
+    return (react_1.default.createElement("iframe", { id: graphicId.toAxon(), className: (0, classnames_1.default)(classes.iframe, className), src: url.toString() }));
+};
+exports.GraphicViewer = GraphicViewer;
 //# sourceMappingURL=GraphicViewer.js.map

package/dist/react/components/graphics/GraphicsTabViewer.d.ts

@@ -1,17 +1,17 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-interface GraphicsTabViewer {
-    projectName?: string;
-    targetRef: HRef;
-    className?: string;
-    /**
-     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
-     * false to just get the graphics on this target.
-     * @default false
-     */
-    queryRelated?: boolean;
-    fallbackClassName?: string;
-    fallbackText?: string;
-}
-export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
-export {};
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicsTabViewer {
+    projectName?: string;
+    targetRef: HRef;
+    className?: string;
+    /**
+     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
+     * false to just get the graphics on this target.
+     * @default false
+     */
+    queryRelated?: boolean;
+    fallbackClassName?: string;
+    fallbackText?: string;
+}
+export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
+export {};

package/dist/react/components/graphics/GraphicsTabViewer.js

@@ -1,91 +1,91 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-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.GraphicsTabViewer = void 0;
-const ui_1 = require("@j2inn/ui");
-const classnames_1 = __importDefault(require("classnames"));
-const haystack_react_1 = require("haystack-react");
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const fin5Top_1 = require("../../../fin5Top/fin5Top");
-const LoadingSpinner_1 = require("../LoadingSpinner");
-const GraphicViewer_1 = require("./GraphicViewer");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    tabs: {
-        height: '100%',
-        [`& .${ui_1.ant_prefix}-tabs-content-holder`]: {
-            height: '100%',
-            [`& .${ui_1.ant_prefix}-tabs-content`]: {
-                height: '100%',
-                [`& .${ui_1.ant_prefix}-tabs-tabpane`]: {
-                    height: '100%',
-                },
-            },
-        },
-    },
-    fallback: {
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: '1.1em',
-    },
-});
-const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
-    const client = (0, haystack_react_1.useClient)();
-    const classes = useStyles();
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [graphicsList, setGraphicsList] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        if (targetRef) {
-            client.ext
-                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
-                .then((grid) => {
-                setGraphicsList(grid.getRows());
-            })
-                .finally(() => setLoading(false));
-        }
-    }, [targetRef]);
-    const tabs = (0, react_1.useMemo)(() => {
-        return graphicsList
-            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
-            .map((graphic) => {
-            return {
-                label: graphic.toDis(),
-                key: graphic.id.toAxon(),
-                children: (react_1.default.createElement(GraphicViewer_1.GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
-            };
-        });
-    }, [graphicsList]);
-    return loading ? (react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null)) : tabs.length > 0 ? (react_1.default.createElement(ui_1.Tabs, { className: (0, classnames_1.default)(classes.tabs, className), items: tabs })) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.fallback, fallbackClassName) }, fallbackText));
-};
-exports.GraphicsTabViewer = GraphicsTabViewer;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+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.GraphicsTabViewer = void 0;
+const ui_1 = require("@j2inn/ui");
+const classnames_1 = __importDefault(require("classnames"));
+const haystack_react_1 = require("haystack-react");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const fin5Top_1 = require("../../../fin5Top/fin5Top");
+const LoadingSpinner_1 = require("../LoadingSpinner");
+const GraphicViewer_1 = require("./GraphicViewer");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    tabs: {
+        height: '100%',
+        [`& .${ui_1.ant_prefix}-tabs-content-holder`]: {
+            height: '100%',
+            [`& .${ui_1.ant_prefix}-tabs-content`]: {
+                height: '100%',
+                [`& .${ui_1.ant_prefix}-tabs-tabpane`]: {
+                    height: '100%',
+                },
+            },
+        },
+    },
+    fallback: {
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1em',
+    },
+});
+const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
+    const client = (0, haystack_react_1.useClient)();
+    const classes = useStyles();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [graphicsList, setGraphicsList] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (targetRef) {
+            client.ext
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
+                .then((grid) => {
+                setGraphicsList(grid.getRows());
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [targetRef]);
+    const tabs = (0, react_1.useMemo)(() => {
+        return graphicsList
+            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
+            .map((graphic) => {
+            return {
+                label: graphic.toDis(),
+                key: graphic.id.toAxon(),
+                children: (react_1.default.createElement(GraphicViewer_1.GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null)) : tabs.length > 0 ? (react_1.default.createElement(ui_1.Tabs, { className: (0, classnames_1.default)(classes.tabs, className), items: tabs })) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.fallback, fallbackClassName) }, fallbackText));
+};
+exports.GraphicsTabViewer = GraphicsTabViewer;
 //# sourceMappingURL=GraphicsTabViewer.js.map

package/dist/react/components/makeCustomElement.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-interface CustomElementOptions {
-    useShadowDom?: boolean;
-}
-/**
- * Generate a custom element constructor that wraps the given react component.
- */
-export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
-/**
- * Create a custom element wrapping a React component and register it.
- * @param webComponentName the name of the Web component (tag name)
- * @param ReactComponent the React component to wrap
- * @returns
- */
-export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
-export {};
+import React from 'react';
+interface CustomElementOptions {
+    useShadowDom?: boolean;
+}
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
+export {};