blixify-ui-web 0.2.9 → 0.2.11

package/lib/components/advanced/infoWindow/index.d.ts

@@ -1,20 +1,10 @@
-import React, { Component, ReactElement } from "react";
+import React, { ReactElement } from "react";
 import "../../../index.css";
 interface Props {
-    content: string | ReactElement;
+    content: ReactElement;
     icon: ReactElement;
-    type: "top" | "right" | "left";
-    infoTextColor?: string;
-    infoCardClassName?: string;
-    infoCardBackgroundColor?: string;
-}
-interface State {
-    open: boolean;
-}
-export declare class InfoWindow extends Component<Props> {
-    state: State;
-    renderLayout: () => React.JSX.Element;
-    render(): React.JSX.Element;
+    type: "left" | "right";
 }
+export declare const InfoWindow: (props: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/advanced/infoWindow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,GAAG,YAAY,CAAC;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,UAAW,SAAQ,SAAS,CAAC,KAAK,CAAC;IAC9C,KAAK,EAAE,KAAK,CAEV;IAEF,YAAY,0BAqDV;IAEF,MAAM;CAmBP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAA+B,MAAM,OAAO,CAAC;AAEzE,OAAO,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,UAAW,KAAK,sBAoDtC,CAAC"}

package/lib/components/advanced/infoWindow/index.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,57 +22,55 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.InfoWindow = void 0;
 var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
 require("../../../index.css");
-var InfoWindow = /** @class */ (function (_super) {
-    __extends(InfoWindow, _super);
-    function InfoWindow() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            open: false,
+var InfoWindow = function (props) {
+    var iconRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(false), isVisible = _a[0], setIsVisible = _a[1];
+    var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    (0, react_1.useEffect)(function () {
+        var iconElement = iconRef.current;
+        var handleMouseEnter = function (event) {
+            var clientX = event.clientX, clientY = event.clientY;
+            setPosition({ top: clientY, left: clientX });
+            setIsVisible(true);
         };
-        _this.renderLayout = function () {
-            var defaultClassName = "absolute bottom-0 items-center ".concat(_this.props.infoCardClassName && _this.props.infoCardClassName, " ").concat(_this.state.open && " animate-fadeIn ");
-            var layoutClassName = "";
-            var arrowClasses = "w-3 h-3 ".concat(_this.props.infoCardBackgroundColor
-                ? _this.props.infoCardBackgroundColor
-                : "bg-gray-200", " transform rotate-45 ");
-            var arrowPosition = "";
-            switch (_this.props.type) {
-                case "top":
-                    layoutClassName = "".concat(defaultClassName, " mb-7 flex flex-col");
-                    arrowPosition = "-mt-1.5";
-                    break;
-                case "left":
-                    layoutClassName = "".concat(defaultClassName, " top-0 right-7 flex flex-row ");
-                    arrowPosition = "-ml-1.5";
-                    break;
-                default:
-                    layoutClassName = "".concat(defaultClassName, " top-0 ml-7 flex flex-row ");
-                    arrowPosition = "-mr-1.5";
-            }
-            return (react_1.default.createElement("div", { className: layoutClassName },
-                _this.props.type === "right" && (react_1.default.createElement("div", { className: "".concat(arrowClasses, " ").concat(arrowPosition) })),
-                react_1.default.createElement("div", { className: "w-full p-4 ".concat(_this.props.infoCardBackgroundColor
-                        ? _this.props.infoCardBackgroundColor
-                        : "bg-gray-200", " rounded z-10") },
-                    react_1.default.createElement("p", { className: _this.props.infoTextColor
-                            ? _this.props.infoTextColor
-                            : "text-gray-500" }, _this.props.content && _this.props.content)),
-                _this.props.type !== "right" && (react_1.default.createElement("div", { className: "".concat(arrowClasses, " ").concat(arrowPosition) }))));
+        var handleMouseLeave = function () {
+            setIsVisible(false);
         };
-        return _this;
-    }
-    InfoWindow.prototype.render = function () {
-        var _this = this;
-        return (react_1.default.createElement("div", { className: "flex" },
-            react_1.default.createElement("div", { className: "relative flex ".concat(this.props.type === "top" ? "justify-center" : "", " ") },
-                react_1.default.createElement("div", { onMouseOver: function () { return _this.setState({ open: true }); }, onMouseLeave: function () { return _this.setState({ open: false }); } }, this.props.icon && this.props.icon),
-                this.state.open && this.renderLayout())));
-    };
-    return InfoWindow;
-}(react_1.Component));
+        iconElement === null || iconElement === void 0 ? void 0 : iconElement.addEventListener("mouseenter", handleMouseEnter);
+        iconElement === null || iconElement === void 0 ? void 0 : iconElement.addEventListener("mouseleave", handleMouseLeave);
+        return function () {
+            iconElement === null || iconElement === void 0 ? void 0 : iconElement.removeEventListener("mouseenter", handleMouseEnter);
+            iconElement === null || iconElement === void 0 ? void 0 : iconElement.removeEventListener("mouseleave", handleMouseLeave);
+        };
+    }, [isVisible]);
+    (0, react_1.useEffect)(function () {
+        if (isVisible) {
+            var popoutElement_1 = document.createElement("div");
+            popoutElement_1.className =
+                "absolute z-50 " +
+                    (props.type === "left" ? "transform -translate-x-full" : "");
+            popoutElement_1.style.position = "absolute";
+            popoutElement_1.style.top = "".concat(position.top, "px");
+            popoutElement_1.style.left = "".concat(position.left, "px");
+            document.body.appendChild(popoutElement_1);
+            react_dom_1.default.render(props.content, popoutElement_1);
+            return function () {
+                document.body.removeChild(popoutElement_1);
+                react_dom_1.default.unmountComponentAtNode(popoutElement_1);
+            };
+        }
+        return function () { };
+    }, [isVisible, props.content, props.type, position.top, position.left]);
+    var refIcon = react_1.default.cloneElement(props.icon, { ref: iconRef });
+    return react_1.default.createElement("div", null, refIcon);
+};
 exports.InfoWindow = InfoWindow;
 //# sourceMappingURL=index.js.map

package/lib/components/advanced/infoWindow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuD;AACvD,8BAA4B;AAe5B;IAAgC,8BAAgB;IAAhD;QAAA,qEA+EC;QA9EC,WAAK,GAAU;YACb,IAAI,EAAE,KAAK;SACZ,CAAC;QAEF,kBAAY,GAAG;YACb,IAAI,gBAAgB,GAAG,yCACrB,KAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,KAAI,CAAC,KAAK,CAAC,iBAAiB,cAC1D,KAAI,CAAC,KAAK,CAAC,IAAI,IAAI,kBAAkB,CAAE,CAAC;YAC5C,IAAI,eAAe,GAAG,EAAE,CAAC;YACzB,IAAI,YAAY,GAAG,kBACjB,KAAI,CAAC,KAAK,CAAC,uBAAuB;gBAChC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,uBAAuB;gBACpC,CAAC,CAAC,aAAa,0BACI,CAAC;YACxB,IAAI,aAAa,GAAG,EAAE,CAAC;YAEvB,QAAQ,KAAI,CAAC,KAAK,CAAC,IAAI,EAAE;gBACvB,KAAK,KAAK;oBACR,eAAe,GAAG,UAAG,gBAAgB,wBAAqB,CAAC;oBAC3D,aAAa,GAAG,SAAS,CAAC;oBAC1B,MAAM;gBACR,KAAK,MAAM;oBACT,eAAe,GAAG,UAAG,gBAAgB,kCAA+B,CAAC;oBACrE,aAAa,GAAG,SAAS,CAAC;oBAC1B,MAAM;gBACR;oBACE,eAAe,GAAG,UAAG,gBAAgB,+BAA4B,CAAC;oBAClE,aAAa,GAAG,SAAS,CAAC;aAC7B;YAED,OAAO,CACL,uCAAK,SAAS,EAAE,eAAe;gBAC5B,KAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAC9B,uCAAK,SAAS,EAAE,UAAG,YAAY,cAAI,aAAa,CAAE,GAAQ,CAC3D;gBACD,uCACE,SAAS,EAAE,qBACT,KAAI,CAAC,KAAK,CAAC,uBAAuB;wBAChC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,uBAAuB;wBACpC,CAAC,CAAC,aAAa,kBACJ;oBAEf,qCACE,SAAS,EACP,KAAI,CAAC,KAAK,CAAC,aAAa;4BACtB,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,aAAa;4BAC1B,CAAC,CAAC,eAAe,IAGpB,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,CACvC,CACA;gBACL,KAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAC9B,uCAAK,SAAS,EAAE,UAAG,YAAY,cAAI,aAAa,CAAE,GAAQ,CAC3D,CACG,CACP,CAAC;QACJ,CAAC,CAAC;;IAqBJ,CAAC;IAnBC,2BAAM,GAAN;QAAA,iBAkBC;QAjBC,OAAO,CACL,uCAAK,SAAS,EAAC,MAAM;YACnB,uCACE,SAAS,EAAE,wBACT,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,MAChD;gBAEH,uCACE,WAAW,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAA7B,CAA6B,EAChD,YAAY,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAA9B,CAA8B,IAEjD,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAC/B;gBACL,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CACnC,CACF,CACP,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AA/ED,CAAgC,iBAAS,GA+ExC;AA/EY,gCAAU"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/data/dataReference/index.d.ts

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import { DataStructure } from "../dataTemplate/model";
+import { WorkspaceDevSettings } from "../dataTemplate/workspaceModel";
+interface Props {
+    value: any;
+    schema: DataStructure;
+    devSettings?: WorkspaceDevSettings;
+    onChange?: (value: any) => void;
+    lib?: {
+        axios?: any;
+        firebase?: any;
+    };
+}
+export declare class DataReference extends Component<Props> {
+    state: {
+        referenceLoading: boolean;
+        referenceOptions: never[];
+    };
+    render(): React.JSX.Element | null;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/data/dataReference/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataReference/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,UAAU,KAAK;IACb,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;KAChB,CAAC;CACH;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,CAAC;IACjD,KAAK;;;MAGH;IAEF,MAAM;CAgEP"}

package/lib/components/data/dataReference/index.js

@@ -0,0 +1,138 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataReference = void 0;
+var solid_1 = require("@heroicons/react/20/solid");
+var react_1 = __importStar(require("react"));
+var loading_1 = require("../../display/loading");
+var select_1 = require("../../input/select");
+var updateModule_1 = require("../updateModule");
+var DataReference = /** @class */ (function (_super) {
+    __extends(DataReference, _super);
+    function DataReference() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            referenceLoading: false,
+            referenceOptions: [],
+        };
+        return _this;
+    }
+    DataReference.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        var loadingSelect = (react_1.default.createElement("div", { className: "flex flex-row" },
+            react_1.default.createElement(loading_1.Loading, { sizeClassName: "h-5 w-5" }),
+            react_1.default.createElement("p", { className: "ml-1" }, "Loading...")));
+        var additionalSelect = (react_1.default.createElement("div", { className: "flex flex-row" },
+            react_1.default.createElement(solid_1.MagnifyingGlassCircleIcon, { className: "w-5 h-5" }),
+            react_1.default.createElement("p", { className: "ml-1" }, "Search for more...")));
+        var schema = this.props.schema;
+        var referenceLoading = this.state.referenceLoading;
+        var devSettings = this.props.devSettings;
+        var dbModule = (devSettings === null || devSettings === void 0 ? void 0 : devSettings.apiEndpointType) === "firebase"
+            ? (_a = this.props.lib) === null || _a === void 0 ? void 0 : _a.firebase
+            : (_b = this.props.lib) === null || _b === void 0 ? void 0 : _b.axios;
+        if (schema.type !== "reference" && schema.type !== "listReference")
+            return null;
+        return (react_1.default.createElement(select_1.Select, { id: schema.id, value: this.props.value, label: schema.name, placeholder: schema.placeholder, options: this.state.referenceOptions, onChange: function (value) {
+                var _a, _b;
+                (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+            }, additional: referenceLoading ? loadingSelect : additionalSelect, onSearch: function (value) { return __awaiter(_this, void 0, void 0, function () {
+                var clonedReferenceOptions;
+                var _a, _b, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            this.setState({ referenceLoading: true });
+                            clonedReferenceOptions = JSON.parse(JSON.stringify(this.state.referenceOptions));
+                            return [4 /*yield*/, (0, updateModule_1.handleRetrieveObjectReferenceOptions)(schema, clonedReferenceOptions, {}, dbModule, (devSettings === null || devSettings === void 0 ? void 0 : devSettings.apiEndpointType) === "mongoDB"
+                                    ? "mongoServer"
+                                    : "fbServer", (_a = devSettings === null || devSettings === void 0 ? void 0 : devSettings.apiEndpoint) !== null && _a !== void 0 ? _a : "", (_b = devSettings === null || devSettings === void 0 ? void 0 : devSettings.apiEndpointToken) !== null && _b !== void 0 ? _b : "", (_c = devSettings === null || devSettings === void 0 ? void 0 : devSettings.apiUserToken) !== null && _c !== void 0 ? _c : "", undefined, undefined, value)];
+                        case 1:
+                            _d.sent();
+                            this.setState({
+                                referenceLoading: false,
+                                referenceOptions: clonedReferenceOptions[schema.id],
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, disabled: schema.disabled }));
+    };
+    return DataReference;
+}(react_1.Component));
+exports.DataReference = DataReference;
+//# sourceMappingURL=index.js.map

package/lib/components/data/dataReference/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data/dataReference/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/data/dataTemplate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAON,MAAM,OAAO,CAAC;AAqDf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAO1B,eAAO,MAAM,YAAY,mFAw6IvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAON,MAAM,OAAO,CAAC;AAqDf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAO1B,eAAO,MAAM,YAAY,mFA66IvB,CAAC"}

package/lib/components/data/dataTemplate/index.js

@@ -2623,7 +2623,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return elementList;
     };
     var renderDetailListData = function (model) {
-        var _a;
+        var _a, _b, _c, _d;
         var detailList = [];
         var _loop_2 = function (eachKey, eachValue) {
             var showIdCondition = showId
@@ -2642,15 +2642,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var filterModel = props.model.find(function (eachAttribute) {
                         return eachAttribute.id === eachKey;
                     });
+                    var currentValue = eachValue !== null && eachValue !== void 0 ? eachValue : "-";
+                    var bareReadDescFunc = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareReadDescription;
+                    if (bareReadDescFunc === null || bareReadDescFunc === void 0 ? void 0 : bareReadDescFunc((_b = filterModel === null || filterModel === void 0 ? void 0 : filterModel.id) !== null && _b !== void 0 ? _b : "", eachValue))
+                        currentValue = bareReadDescFunc === null || bareReadDescFunc === void 0 ? void 0 : bareReadDescFunc((_c = filterModel === null || filterModel === void 0 ? void 0 : filterModel.id) !== null && _c !== void 0 ? _c : "", eachValue);
                     detailList.push({
-                        title: (_a = filterModel === null || filterModel === void 0 ? void 0 : filterModel.name) !== null && _a !== void 0 ? _a : "",
-                        text: eachValue !== null && eachValue !== void 0 ? eachValue : "-",
+                        title: (_d = filterModel === null || filterModel === void 0 ? void 0 : filterModel.name) !== null && _d !== void 0 ? _d : "",
+                        text: currentValue,
                     });
                 }
             }
         };
-        for (var _i = 0, _b = Object.entries(selectedData); _i < _b.length; _i++) {
-            var _c = _b[_i], eachKey = _c[0], eachValue = _c[1];
+        for (var _i = 0, _e = Object.entries(selectedData); _i < _e.length; _i++) {
+            var _f = _e[_i], eachKey = _f[0], eachValue = _f[1];
             _loop_2(eachKey, eachValue);
         }
         return detailList;
@@ -3367,11 +3371,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         customFeedsData.map(function (eachData) {
                             var _a, _b, _c, _d, _e;
                             var content = {
-                                content: (_a = eachData.content) !== null && _a !== void 0 ? _a : "",
-                                addContent: (_b = eachData.addContent) !== null && _b !== void 0 ? _b : "",
-                                step: (_c = eachData.step) !== null && _c !== void 0 ? _c : "",
+                                content: (_a = eachData.title) !== null && _a !== void 0 ? _a : "",
+                                addContent: (_b = eachData.content) !== null && _b !== void 0 ? _b : "",
+                                step: (_c = eachData.desc) !== null && _c !== void 0 ? _c : "",
                                 iconClass: (_d = eachData.iconClass) !== null && _d !== void 0 ? _d : "",
-                                iconType: (_e = eachData.iconType) !== null && _e !== void 0 ? _e : (react_1.default.createElement(solid_1.CheckIcon, { className: "h-5 w-5 text-white" })),
+                                iconType: (_e = eachData.icon) !== null && _e !== void 0 ? _e : (react_1.default.createElement(solid_1.CheckIcon, { className: "h-5 w-5 text-white" })),
                             };
                             contentList_1.push(content);
                             return null;
@@ -3383,7 +3387,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             var content = {
                                 content: (_a = eachData[feedsSettings_1.title]) !== null && _a !== void 0 ? _a : "",
                                 addContent: (react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, (_b = eachData[feedsSettings_1.content]) !== null && _b !== void 0 ? _b : "")),
-                                step: (_c = eachData[feedsSettings_1.step]) !== null && _c !== void 0 ? _c : "",
+                                step: (_c = eachData[feedsSettings_1.desc]) !== null && _c !== void 0 ? _c : "",
                                 iconClass: (_d = feedsSettings_1.iconClass) !== null && _d !== void 0 ? _d : "bg-primary-500",
                                 iconType: (_e = feedsSettings_1.icon) !== null && _e !== void 0 ? _e : (react_1.default.createElement(solid_1.CheckIcon, { className: "h-5 w-5 text-white" })),
                             };