@thunderid/react 0.1.0 → 0.3.0

package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.cjs

@@ -0,0 +1,460 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
+const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../primitives/Card/Card.cjs');
+const require_Divider = require('../../primitives/Divider/Divider.cjs');
+const require_BaseUserProfile_styles = require('./BaseUserProfile.styles.cjs');
+const require_getMappedUserProfileValue = require('../../../utils/getMappedUserProfileValue.cjs');
+const require_getDisplayName = require('../../../utils/getDisplayName.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_Dialog = require('../../primitives/Dialog/Dialog.cjs');
+const require_MultiInput = require('../../primitives/MultiInput/MultiInput.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/UserProfile/BaseUserProfile.tsx
+const fieldsToSkip = [
+	"roles.default",
+	"active",
+	"groups",
+	"accountLocked",
+	"accountDisabled",
+	"oneTimePassword",
+	"userSourceId",
+	"idpType",
+	"localCredentialExists",
+	"active",
+	"ResourceType",
+	"ExternalID",
+	"MetaData",
+	"verifiedMobileNumbers",
+	"verifiedEmailAddresses",
+	"phoneNumbers.mobile",
+	"emailAddresses",
+	"preferredMFAOption"
+];
+const readonlyFields = [
+	"username",
+	"userName",
+	"user_name"
+];
+const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, profile, schemas = [], flattenedProfile, mode = "inline", title, attributeMapping = {}, editable = true, onOpenChange, onUpdate, open = false, error = null, isLoading = false, preferences, showFields = [], hideFields = [], displayNameAttributes = [] }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const [editedUser, setEditedUser] = (0, react.useState)(flattenedProfile || profile);
+	const [editingFields, setEditingFields] = (0, react.useState)({});
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	/**
+	* Determines if a field should be visible based on showFields, hideFields, and fieldsToSkip arrays.
+	* Priority order:
+	* 1. fieldsToSkip (always hidden) - highest priority
+	* 2. hideFields (explicitly hidden)
+	* 3. showFields (explicitly shown, if array is not empty)
+	* 4. Default behavior (show all fields not in fieldsToSkip)
+	*/
+	const shouldShowField = (0, react.useCallback)((fieldName) => {
+		if (fieldsToSkip.includes(fieldName)) return false;
+		if (hideFields.length > 0 && hideFields.includes(fieldName)) return false;
+		if (showFields.length > 0) return showFields.includes(fieldName);
+		return true;
+	}, [showFields, hideFields]);
+	const PencilIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+	});
+	const toggleFieldEdit = (0, react.useCallback)((fieldName) => {
+		setEditingFields((prev) => ({
+			...prev,
+			[fieldName]: !prev[fieldName]
+		}));
+	}, []);
+	const getFieldPlaceholder = (0, react.useCallback)((schema) => {
+		const { type, displayName, description, name } = schema;
+		const fieldLabel = displayName || description || name || "value";
+		switch (type) {
+			case "DATE_TIME": return `Enter your ${fieldLabel.toLowerCase()}`;
+			case "BOOLEAN": return `Select ${fieldLabel.toLowerCase()}`;
+			case "COMPLEX": return `Enter ${fieldLabel.toLowerCase()} details`;
+			default: return `Enter your ${fieldLabel.toLowerCase()}`;
+		}
+	}, []);
+	const formatLabel = (0, react.useCallback)((key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "), []);
+	const styles = require_BaseUserProfile_styles.default(theme, colorScheme);
+	const ObjectDisplay = ({ data }) => {
+		if (!data || typeof data !== "object") return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			className: styles.value,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: styles.objectKey,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [formatLabel(key), ":"] })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: styles.objectValue,
+				children: typeof value === "object" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObjectDisplay, { data: value }) : String(value)
+			})] }, key)) })
+		});
+	};
+	function set(obj, path, value) {
+		const keys = path.split(".");
+		let current = obj;
+		for (let i = 0; i < keys.length; i += 1) {
+			const key = keys[i];
+			if (i === keys.length - 1) current[key] = value;
+			else {
+				if (!current[key] || typeof current[key] !== "object") current[key] = {};
+				current = current[key];
+			}
+		}
+	}
+	const handleFieldSave = (0, react.useCallback)((schema) => {
+		if (!onUpdate || !schema.name) return;
+		const fieldName = schema.name;
+		let fieldValue;
+		if (editedUser && fieldName && editedUser[fieldName] !== void 0) fieldValue = editedUser[fieldName];
+		else if (flattenedProfile?.[fieldName] !== void 0) fieldValue = flattenedProfile[fieldName];
+		else fieldValue = "";
+		if (Array.isArray(fieldValue)) fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
+		let payload = {};
+		if (schema.schemaId && schema.schemaId !== __thunderid_browser.WellKnownSchemaIds.User) payload = { [schema.schemaId]: { [fieldName]: fieldValue } };
+		else set(payload, fieldName, fieldValue);
+		onUpdate(payload);
+		toggleFieldEdit(fieldName);
+	}, [
+		editedUser,
+		flattenedProfile,
+		onUpdate,
+		toggleFieldEdit
+	]);
+	const handleFieldCancel = (0, react.useCallback)((fieldName) => {
+		const currentUser$1 = flattenedProfile || profile;
+		setEditedUser((prev) => ({
+			...prev,
+			[fieldName]: currentUser$1[fieldName]
+		}));
+		toggleFieldEdit(fieldName);
+	}, [
+		flattenedProfile,
+		profile,
+		toggleFieldEdit
+	]);
+	const mergedMappings = Object.fromEntries(Object.entries({
+		email: ["emails", "email"],
+		firstName: ["name.givenName", "given_name"],
+		lastName: ["name.familyName", "family_name"],
+		picture: [
+			"profile",
+			"profileUrl",
+			"picture",
+			"URL"
+		],
+		username: [
+			"userName",
+			"username",
+			"user_name"
+		],
+		...attributeMapping
+	}).filter((entry) => entry[1] !== void 0));
+	const renderSchemaField = (schema, isEditing, onEditValue, onStartEdit) => {
+		if (!schema) return null;
+		const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
+		const label = displayName || description || name || "";
+		if (subAttributes && Array.isArray(subAttributes)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: subAttributes.map((subAttr, index) => {
+			let displayValue$1;
+			if (Array.isArray(subAttr.value)) displayValue$1 = subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+			else if (typeof subAttr.value === "object") displayValue$1 = JSON.stringify(subAttr.value);
+			else displayValue$1 = String(subAttr.value);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.field,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles.label,
+					children: subAttr.displayName || subAttr.description || ""
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.value,
+					children: displayValue$1
+				})]
+			}, index);
+		}) });
+		if (Array.isArray(value) || multiValued) {
+			const hasValues = Array.isArray(value) ? value.length > 0 : value !== void 0 && value !== null && value !== "";
+			const isEditable$1 = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+			if (isEditing && onEditValue && isEditable$1) {
+				let currentValue;
+				if (editedUser && name && editedUser[name] !== void 0) currentValue = editedUser[name];
+				else if (flattenedProfile && name && flattenedProfile[name] !== void 0) currentValue = flattenedProfile[name];
+				else currentValue = value;
+				let fieldValues;
+				if (Array.isArray(currentValue)) fieldValues = currentValue.map(String);
+				else if (currentValue !== void 0 && currentValue !== null && currentValue !== "") fieldValues = [String(currentValue)];
+				else fieldValues = [];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles.label,
+					children: label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.value,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MultiInput.default, {
+						values: fieldValues,
+						onChange: (newValues) => {
+							if (multiValued || Array.isArray(currentValue)) onEditValue(newValues);
+							else onEditValue(newValues[0] || "");
+						},
+						placeholder: getFieldPlaceholder(schema),
+						fieldType: type,
+						type: type === "DATE_TIME" ? "date" : "text",
+						required
+					})
+				})] });
+			}
+			let displayValue$1;
+			if (hasValues) if (Array.isArray(value)) displayValue$1 = value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+			else displayValue$1 = String(value);
+			else if (isEditable$1) displayValue$1 = getFieldPlaceholder(schema);
+			else displayValue$1 = "-";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.label,
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""),
+				children: !hasValues && isEditable$1 && onStartEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					onClick: onStartEdit,
+					variant: "text",
+					color: "secondary",
+					size: "small",
+					title: "Click to edit",
+					className: styles.editButton,
+					children: displayValue$1
+				}) : displayValue$1
+			})] });
+		}
+		if (type === "COMPLEX" && typeof value === "object") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObjectDisplay, { data: value });
+		if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
+			let fieldValue;
+			if (editedUser && name && editedUser[name] !== void 0) fieldValue = editedUser[name];
+			else if (flattenedProfile && name && flattenedProfile[name] !== void 0) fieldValue = flattenedProfile[name];
+			else fieldValue = value || "";
+			const commonProps = {
+				label: void 0,
+				onChange: (e) => onEditValue(e.target ? e.target.value : e),
+				placeholder: getFieldPlaceholder(schema),
+				required,
+				value: fieldValue
+			};
+			let field;
+			switch (type) {
+				case "STRING":
+					field = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, { ...commonProps });
+					break;
+				case "DATE_TIME":
+					field = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.default, { ...commonProps });
+					break;
+				case "BOOLEAN":
+					field = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.default, {
+						...commonProps,
+						checked: !!fieldValue,
+						onChange: (e) => {
+							onEditValue(e.target.checked);
+						}
+					});
+					break;
+				case "COMPLEX":
+					field = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+						value: fieldValue,
+						onChange: (e) => onEditValue(e.target.value),
+						placeholder: getFieldPlaceholder(schema),
+						required,
+						className: styles.complexTextarea
+					});
+					break;
+				default: field = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, { ...commonProps });
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.label,
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.value,
+				children: field
+			})] });
+		}
+		const hasValue = value !== void 0 && value !== null && value !== "";
+		const isEditable = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+		let displayValue;
+		if (hasValue) displayValue = String(value);
+		else if (isEditable) displayValue = getFieldPlaceholder(schema);
+		else displayValue = "-";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: styles.label,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""),
+			children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				onClick: onStartEdit,
+				variant: "text",
+				color: "secondary",
+				size: "small",
+				title: "Click to edit",
+				className: styles.editButton,
+				children: displayValue
+			}) : displayValue
+		})] });
+	};
+	const renderUserInfo = (schema) => {
+		if (!schema?.name) return null;
+		const hasValue = schema.value !== void 0 && schema.value !== "" && schema.value !== null;
+		const isFieldEditing = editingFields[schema.name];
+		const isReadonlyField = readonlyFields.includes(schema.name);
+		if (!(hasValue || isFieldEditing || editable && schema.mutability === "READ_WRITE")) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: styles.field,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.fieldInner,
+				children: renderSchemaField(schema, isFieldEditing, (value) => {
+					const tempEditedUser = { ...editedUser };
+					tempEditedUser[schema.name] = value;
+					setEditedUser(tempEditedUser);
+				}, () => toggleFieldEdit(schema.name))
+			}), editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.fieldActions,
+				children: [isFieldEditing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					size: "small",
+					color: "primary",
+					variant: "solid",
+					onClick: () => handleFieldSave(schema),
+					children: "Save"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					size: "small",
+					color: "secondary",
+					variant: "solid",
+					onClick: () => handleFieldCancel(schema.name),
+					children: "Cancel"
+				})] }), !isFieldEditing && hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					size: "small",
+					color: "tertiary",
+					variant: "icon",
+					onClick: () => toggleFieldEdit(schema.name),
+					title: "Edit",
+					className: styles.editButton,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PencilIcon, {})
+				})]
+			})]
+		});
+	};
+	if (!profile && !flattenedProfile) return fallback;
+	const containerClasses = (0, __emotion_css.cx)(styles.root, cardLayout ? styles.card : "", (0, __thunderid_browser.withVendorCSSClassPrefix)("user-profile"), className);
+	const currentUser = flattenedProfile || profile;
+	const renderProfileWithoutSchemas = () => {
+		if (!currentUser) return null;
+		const displayName = require_getDisplayName.default(mergedMappings, profile, displayNameAttributes);
+		const profileEntries = Object.entries(currentUser).filter(([key, value]) => {
+			if (!shouldShowField(key)) return false;
+			return value !== void 0 && value !== "" && value !== null;
+		}).sort(([a], [b]) => a.localeCompare(b));
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.profileSummary,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+						imageUrl: require_getMappedUserProfileValue.default("picture", mergedMappings, currentUser),
+						name: displayName,
+						size: 70,
+						alt: `${displayName}'s avatar`,
+						isLoading
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "h3",
+						fontWeight: "medium",
+						children: displayName
+					}),
+					require_getMappedUserProfileValue.default("email", mergedMappings, currentUser) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "body2",
+						color: "textSecondary",
+						children: require_getMappedUserProfileValue.default("email", mergedMappings, currentUser)
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, {}),
+			profileEntries.map(([key, value], index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.sectionRow,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.sectionLabel,
+					children: formatLabel(key)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.sectionValue,
+					children: typeof value === "object" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObjectDisplay, { data: value }) : String(value)
+				})]
+			}), index < profileEntries.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, {})] }, key))
+		] });
+	};
+	const profileContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		className: containerClasses,
+		children: [
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Alert.default, {
+				variant: "error",
+				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("user-profile", "alert")), styles.alert),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Title, { children: t("errors.heading") || "Error" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: error })]
+			}),
+			schemas && schemas.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.header,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+					imageUrl: require_getMappedUserProfileValue.default("picture", mergedMappings, currentUser),
+					name: require_getDisplayName.default(mergedMappings, profile),
+					size: 80,
+					alt: `${require_getDisplayName.default(mergedMappings, profile)}'s avatar`,
+					isLoading
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.infoContainer,
+				children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+					if (!schema.name || !shouldShowField(schema.name)) return false;
+					if (!editable) {
+						const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : void 0;
+						return value !== void 0 && value !== "" && value !== null;
+					}
+					return true;
+				}).sort((a, b) => {
+					return (a.displayOrder ? parseInt(a.displayOrder, 10) : 999) - (b.displayOrder ? parseInt(b.displayOrder, 10) : 999);
+				}).map((schema, index) => {
+					const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : void 0;
+					const schemaWithValue = {
+						...schema,
+						value
+					};
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: styles.info,
+						children: renderUserInfo(schemaWithValue)
+					}, schema.name || index);
+				}) : renderProfileWithoutSchemas()
+			})
+		]
+	});
+	if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title ?? t("user.profile.heading") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.popup,
+			children: profileContent
+		})] })
+	});
+	return profileContent;
+};
+var BaseUserProfile_default = BaseUserProfile;
+
+//#endregion
+exports.default = BaseUserProfile_default;
+//# sourceMappingURL=BaseUserProfile.cjs.map

package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserProfile.cjs","names":["fieldsToSkip: string[]","readonlyFields: string[]","BaseUserProfile: FC<BaseUserProfileProps>","useTheme","useTranslation","shouldShowField: any","toggleFieldEdit: any","getFieldPlaceholder: any","fieldLabel: any","formatLabel: any","styles: any","useStyles","ObjectDisplay: FC<{data: unknown}>","keys: any","current: any","i: any","key: any","handleFieldSave: any","fieldName: string","fieldValue: any","payload: Record<string, any>","WellKnownSchemaIds","handleFieldCancel: any","currentUser: any","currentUser","mergedMappings: Record<string, string | string[]>","label: any","displayValue: string","displayValue","hasValues: any","isEditable: any","isEditable","currentValue: any","fieldValues: string[]","MultiInput","Button","commonProps: any","field: ReactElement","TextField","DatePicker","Checkbox","hasValue: any","isFieldEditing: any","isReadonlyField: any","tempEditedUser: any","containerClasses: any","displayName: any","getDisplayName","profileEntries: any","Avatar","getMappedUserProfileValue","Typography","Divider","profileContent: any","CardPrimitive","AlertPrimitive","value: any","schemaWithValue: any","DialogPrimitive"],"sources":["../../../../../src/components/presentation/UserProfile/BaseUserProfile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {User, withVendorCSSClassPrefix, WellKnownSchemaIds, bem, Preferences} from '@thunderid/browser';\nimport {FC, ReactElement, useState, useCallback} from 'react';\nimport useStyles from './BaseUserProfile.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport Divider from '../../primitives/Divider/Divider';\nimport MultiInput from '../../primitives/MultiInput/MultiInput';\nimport TextField from '../../primitives/TextField/TextField';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface ExtendedFlatSchema {\n  path?: string;\n  schemaId?: string;\n}\n\ninterface Schema extends ExtendedFlatSchema {\n  caseExact?: boolean;\n  description?: string;\n  displayName?: string;\n  displayOrder?: string;\n  multiValued?: boolean;\n  mutability?: string;\n  name?: string;\n  required?: boolean;\n  returned?: string;\n  subAttributes?: Schema[];\n  type?: string;\n  uniqueness?: string;\n  value?: any;\n}\n\nexport interface BaseUserProfileProps {\n  attributeMapping?: {\n    [key: string]: string | string[] | undefined;\n    firstName?: string | string[];\n    lastName?: string | string[];\n    picture?: string | string[];\n    username?: string | string[];\n  };\n  cardLayout?: boolean;\n  className?: string;\n  displayNameAttributes?: string[];\n  editable?: boolean;\n  error?: string | null;\n  fallback?: ReactElement | null;\n  flattenedProfile?: User;\n  hideFields?: string[];\n  isLoading?: boolean;\n  mode?: 'inline' | 'popup';\n  onOpenChange?: (open: boolean) => void;\n  onUpdate?: (payload: any) => Promise<void>;\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  profile?: User;\n  schemas?: Schema[];\n  showFields?: string[];\n\n  title?: string;\n}\n\n// Fields to skip based on schema.name\nconst fieldsToSkip: string[] = [\n  'roles.default',\n  'active',\n  'groups',\n  'accountLocked',\n  'accountDisabled',\n  'oneTimePassword',\n  'userSourceId',\n  'idpType',\n  'localCredentialExists',\n  'active',\n  'ResourceType',\n  'ExternalID',\n  'MetaData',\n  'verifiedMobileNumbers',\n  'verifiedEmailAddresses',\n  'phoneNumbers.mobile',\n  'emailAddresses',\n  'preferredMFAOption',\n];\n\n// Fields that should be readonly\nconst readonlyFields: string[] = ['username', 'userName', 'user_name'];\n\nconst BaseUserProfile: FC<BaseUserProfileProps> = ({\n  fallback = null,\n  className = '',\n  cardLayout = true,\n  profile,\n  schemas = [],\n  flattenedProfile,\n  mode = 'inline',\n  title,\n  attributeMapping = {},\n  editable = true,\n  onOpenChange,\n  onUpdate,\n  open = false,\n  error = null,\n  isLoading = false,\n  preferences,\n  showFields = [],\n  hideFields = [],\n  displayNameAttributes = [],\n}: BaseUserProfileProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const [editedUser, setEditedUser] = useState(flattenedProfile || profile);\n  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});\n  const {t} = useTranslation(preferences?.i18n);\n\n  /**\n   * Determines if a field should be visible based on showFields, hideFields, and fieldsToSkip arrays.\n   * Priority order:\n   * 1. fieldsToSkip (always hidden) - highest priority\n   * 2. hideFields (explicitly hidden)\n   * 3. showFields (explicitly shown, if array is not empty)\n   * 4. Default behavior (show all fields not in fieldsToSkip)\n   */\n  const shouldShowField: any = useCallback(\n    (fieldName: string): boolean => {\n      // Always skip fields in the hardcoded fieldsToSkip array\n      if (fieldsToSkip.includes(fieldName)) {\n        return false;\n      }\n\n      // If hideFields is provided and contains this field, hide it\n      if (hideFields.length > 0 && hideFields.includes(fieldName)) {\n        return false;\n      }\n\n      // If showFields is provided and not empty, only show fields in that array\n      if (showFields.length > 0) {\n        return showFields.includes(fieldName);\n      }\n\n      return true;\n    },\n    [showFields, hideFields],\n  );\n\n  const PencilIcon = (): any => (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n\n  const toggleFieldEdit: any = useCallback((fieldName: string) => {\n    setEditingFields((prev: any) => ({\n      ...prev,\n      [fieldName]: !prev[fieldName],\n    }));\n  }, []);\n\n  const getFieldPlaceholder: any = useCallback((schema: Schema): string => {\n    const {type, displayName, description, name} = schema;\n\n    const fieldLabel: any = displayName || description || name || 'value';\n\n    switch (type) {\n      case 'DATE_TIME':\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n      case 'BOOLEAN':\n        return `Select ${fieldLabel.toLowerCase()}`;\n      case 'COMPLEX':\n        return `Enter ${fieldLabel.toLowerCase()} details`;\n      default:\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n    }\n  }, []);\n\n  const formatLabel: any = useCallback(\n    (key: string): string =>\n      key\n        .split(/(?=[A-Z])|_/)\n        .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n        .join(' '),\n    [],\n  );\n\n  const styles: any = useStyles(theme, colorScheme);\n\n  const ObjectDisplay: FC<{data: unknown}> = ({data}: {data: unknown}): ReactElement | null => {\n    if (!data || typeof data !== 'object') return null;\n\n    return (\n      <table className={styles.value}>\n        <tbody>\n          {Object.entries(data).map(([key, value]: any) => (\n            <tr key={key}>\n              <td className={styles.objectKey}>\n                <strong>{formatLabel(key)}:</strong>\n              </td>\n              <td className={styles.objectValue}>\n                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  };\n\n  function set(obj: Record<string, any>, path: string, value: any): void {\n    const keys: any = path.split('.');\n    let current: any = obj;\n\n    for (let i: any = 0; i < keys.length; i += 1) {\n      const key: any = keys[i];\n\n      if (i === keys.length - 1) {\n        current[key] = value;\n      } else {\n        if (!current[key] || typeof current[key] !== 'object') {\n          current[key] = {};\n        }\n        current = current[key];\n      }\n    }\n  }\n\n  const handleFieldSave: any = useCallback(\n    (schema: Schema): void => {\n      if (!onUpdate || !schema.name) return;\n\n      const fieldName: string = schema.name;\n      let fieldValue: any;\n      if (editedUser && fieldName && editedUser[fieldName] !== undefined) {\n        fieldValue = editedUser[fieldName];\n      } else if (flattenedProfile?.[fieldName] !== undefined) {\n        fieldValue = flattenedProfile[fieldName];\n      } else {\n        fieldValue = '';\n      }\n\n      if (Array.isArray(fieldValue)) {\n        fieldValue = fieldValue.filter((v: any) => v !== undefined && v !== null && v !== '');\n      }\n\n      let payload: Record<string, any> = {};\n\n      // SCIM Patch Operation Logic:\n      // - Fields from core schema (urn:ietf:params:scim:schemas:core:2.0:User)\n      //   should be sent directly: {\"name\":{\"givenName\":\"John\"}}\n      // - Fields from extension schemas (like urn:scim:wso2:schema)\n      //   should be nested under the schema namespace: {\"urn:scim:wso2:schema\":{\"country\":\"Sri Lanka\"}}\n      if (schema.schemaId && schema.schemaId !== WellKnownSchemaIds.User) {\n        // For non-core schemas, nest the field under the schema namespace\n        payload = {\n          [schema.schemaId]: {\n            [fieldName]: fieldValue,\n          },\n        };\n      } else {\n        // For core schema or fields without schemaId, use the field path directly\n        // This handles complex paths like \"name.givenName\" correctly\n        set(payload, fieldName, fieldValue);\n      }\n\n      onUpdate(payload);\n\n      toggleFieldEdit(fieldName);\n    },\n    [editedUser, flattenedProfile, onUpdate, toggleFieldEdit],\n  );\n\n  const handleFieldCancel: any = useCallback(\n    (fieldName: string) => {\n      const currentUser: any = flattenedProfile || profile;\n      setEditedUser((prev: any) => ({\n        ...prev,\n        [fieldName]: currentUser[fieldName],\n      }));\n      toggleFieldEdit(fieldName);\n    },\n    [flattenedProfile, profile, toggleFieldEdit],\n  );\n\n  const defaultAttributeMappings: Record<string, string | string[]> = {\n    email: ['emails', 'email'],\n    firstName: ['name.givenName', 'given_name'],\n    lastName: ['name.familyName', 'family_name'],\n    picture: ['profile', 'profileUrl', 'picture', 'URL'],\n    username: ['userName', 'username', 'user_name'],\n  };\n\n  const mergedMappings: Record<string, string | string[]> = Object.fromEntries(\n    Object.entries({...defaultAttributeMappings, ...attributeMapping}).filter(\n      (entry): entry is [string, string | string[]] => entry[1] !== undefined,\n    ),\n  );\n\n  const renderSchemaField = (\n    schema: Schema,\n    isEditing: boolean,\n    onEditValue?: (value: any) => void,\n    onStartEdit?: () => void,\n  ): ReactElement | null => {\n    if (!schema) return null;\n    const {value, displayName, description, name, type, required, mutability, subAttributes, multiValued} = schema;\n    const label: any = displayName || description || name || '';\n\n    if (subAttributes && Array.isArray(subAttributes)) {\n      return (\n        <>\n          {subAttributes.map((subAttr: any, index: any) => {\n            let displayValue: string;\n            if (Array.isArray(subAttr.value)) {\n              displayValue = subAttr.value\n                .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n                .join(', ');\n            } else if (typeof subAttr.value === 'object') {\n              displayValue = JSON.stringify(subAttr.value);\n            } else {\n              displayValue = String(subAttr.value);\n            }\n\n            return (\n              <div key={index} className={styles.field}>\n                <span className={styles.label}>{subAttr.displayName || subAttr.description || ''}</span>\n                <div className={styles.value}>{displayValue}</div>\n              </div>\n            );\n          })}\n        </>\n      );\n    }\n\n    if (Array.isArray(value) || multiValued) {\n      const hasValues: any = Array.isArray(value)\n        ? value.length > 0\n        : value !== undefined && value !== null && value !== '';\n      const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n      if (isEditing && onEditValue && isEditable) {\n        let currentValue: any;\n        if (editedUser && name && editedUser[name] !== undefined) {\n          currentValue = editedUser[name];\n        } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n          currentValue = flattenedProfile[name];\n        } else {\n          currentValue = value;\n        }\n\n        let fieldValues: string[];\n        if (Array.isArray(currentValue)) {\n          fieldValues = currentValue.map(String);\n        } else if (currentValue !== undefined && currentValue !== null && currentValue !== '') {\n          fieldValues = [String(currentValue)];\n        } else {\n          fieldValues = [];\n        }\n\n        return (\n          <>\n            <span className={styles.label}>{label}</span>\n            <div className={styles.value}>\n              <MultiInput\n                values={fieldValues}\n                onChange={(newValues: any): void => {\n                  if (multiValued || Array.isArray(currentValue)) {\n                    onEditValue(newValues);\n                  } else {\n                    onEditValue(newValues[0] || '');\n                  }\n                }}\n                placeholder={getFieldPlaceholder(schema)}\n                fieldType={type as 'STRING' | 'DATE_TIME' | 'BOOLEAN'}\n                type={type === 'DATE_TIME' ? 'date' : 'text'}\n                required={required}\n              />\n            </div>\n          </>\n        );\n      }\n\n      let displayValue: string;\n      if (hasValues) {\n        if (Array.isArray(value)) {\n          displayValue = value\n            .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n            .join(', ');\n        } else {\n          displayValue = String(value);\n        }\n      } else if (isEditable) {\n        displayValue = getFieldPlaceholder(schema);\n      } else {\n        displayValue = '-';\n      }\n\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={cx(styles.value, !hasValues ? styles.valuePlaceholder : '')}>\n            {!hasValues && isEditable && onStartEdit ? (\n              <Button\n                onClick={onStartEdit}\n                variant=\"text\"\n                color=\"secondary\"\n                size=\"small\"\n                title=\"Click to edit\"\n                className={styles.editButton}\n              >\n                {displayValue}\n              </Button>\n            ) : (\n              displayValue\n            )}\n          </div>\n        </>\n      );\n    }\n    if (type === 'COMPLEX' && typeof value === 'object') {\n      return <ObjectDisplay data={value} />;\n    }\n\n    if (isEditing && onEditValue && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '')) {\n      let fieldValue: any;\n      if (editedUser && name && editedUser[name] !== undefined) {\n        fieldValue = editedUser[name];\n      } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n        fieldValue = flattenedProfile[name];\n      } else {\n        fieldValue = value || '';\n      }\n\n      const commonProps: any = {\n        label: undefined,\n        onChange: (e: any) => onEditValue(e.target ? e.target.value : e),\n        placeholder: getFieldPlaceholder(schema),\n        required,\n        value: fieldValue,\n        // Removed inline style, use .styles.ts for marginBottom if needed\n      };\n      let field: ReactElement;\n      switch (type) {\n        case 'STRING':\n          field = <TextField {...commonProps} />;\n          break;\n        case 'DATE_TIME':\n          field = <DatePicker {...commonProps} />;\n          break;\n        case 'BOOLEAN':\n          field = (\n            <Checkbox\n              {...commonProps}\n              checked={!!fieldValue}\n              onChange={(e: any): void => {\n                onEditValue(e.target.checked);\n              }}\n            />\n          );\n          break;\n        case 'COMPLEX':\n          field = (\n            <textarea\n              value={fieldValue}\n              onChange={(e: any): void => onEditValue(e.target.value)}\n              placeholder={getFieldPlaceholder(schema)}\n              required={required}\n              className={styles.complexTextarea}\n            />\n          );\n          break;\n        default:\n          field = <TextField {...commonProps} />;\n      }\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.value}>{field}</div>\n        </>\n      );\n    }\n\n    const hasValue: any = value !== undefined && value !== null && value !== '';\n    const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n    let displayValue: string;\n    if (hasValue) {\n      displayValue = String(value);\n    } else if (isEditable) {\n      displayValue = getFieldPlaceholder(schema);\n    } else {\n      displayValue = '-';\n    }\n\n    return (\n      <>\n        <span className={styles.label}>{label}</span>\n        <div className={cx(styles.value, !hasValue ? styles.valuePlaceholder : '')}>\n          {!hasValue && isEditable && onStartEdit ? (\n            <Button\n              onClick={onStartEdit}\n              variant=\"text\"\n              color=\"secondary\"\n              size=\"small\"\n              title=\"Click to edit\"\n              className={styles.editButton}\n            >\n              {displayValue}\n            </Button>\n          ) : (\n            displayValue\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const renderUserInfo = (schema: Schema): any => {\n    if (!schema?.name) return null;\n\n    const hasValue: any = schema.value !== undefined && schema.value !== '' && schema.value !== null;\n    const isFieldEditing: any = editingFields[schema.name];\n    const isReadonlyField: any = readonlyFields.includes(schema.name);\n\n    const shouldShow: any = hasValue || isFieldEditing || (editable && schema.mutability === 'READ_WRITE');\n\n    if (!shouldShow) {\n      return null;\n    }\n\n    return (\n      <div className={styles.field}>\n        <div className={styles.fieldInner}>\n          {renderSchemaField(\n            schema,\n            isFieldEditing,\n            (value: any) => {\n              const tempEditedUser: any = {...editedUser};\n              tempEditedUser[schema.name!] = value;\n              setEditedUser(tempEditedUser);\n            },\n            () => toggleFieldEdit(schema.name),\n          )}\n        </div>\n        {editable && schema.mutability !== 'READ_ONLY' && !isReadonlyField && (\n          <div className={styles.fieldActions}>\n            {isFieldEditing && (\n              <>\n                <Button size=\"small\" color=\"primary\" variant=\"solid\" onClick={(): any => handleFieldSave(schema)}>\n                  Save\n                </Button>\n                <Button\n                  size=\"small\"\n                  color=\"secondary\"\n                  variant=\"solid\"\n                  onClick={(): any => handleFieldCancel(schema.name)}\n                >\n                  Cancel\n                </Button>\n              </>\n            )}\n            {!isFieldEditing && hasValue && (\n              <Button\n                size=\"small\"\n                color=\"tertiary\"\n                variant=\"icon\"\n                onClick={(): any => toggleFieldEdit(schema.name)}\n                title=\"Edit\"\n                className={styles.editButton}\n              >\n                <PencilIcon />\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!profile && !flattenedProfile) {\n    return fallback;\n  }\n\n  const containerClasses: any = cx(\n    styles.root,\n    cardLayout ? styles.card : '',\n    withVendorCSSClassPrefix('user-profile'),\n    className,\n  );\n\n  const currentUser: any = flattenedProfile || profile;\n\n  const renderProfileWithoutSchemas = (): any => {\n    if (!currentUser) return null;\n\n    const displayName: any = getDisplayName(mergedMappings, profile!, displayNameAttributes);\n\n    const profileEntries: any = Object.entries(currentUser)\n      .filter(([key, value]: [string, any]) => {\n        if (!shouldShowField(key)) return false;\n\n        return value !== undefined && value !== '' && value !== null;\n      })\n      .sort(([a]: [string, ...any[]], [b]: [string, ...any[]]) => a.localeCompare(b));\n\n    return (\n      <>\n        <div className={styles.profileSummary}>\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}\n            name={displayName}\n            size={70}\n            alt={`${displayName}'s avatar`}\n            isLoading={isLoading}\n          />\n          <Typography variant=\"h3\" fontWeight=\"medium\">\n            {displayName}\n          </Typography>\n          {getMappedUserProfileValue('email', mergedMappings, currentUser) && (\n            <Typography variant=\"body2\" color=\"textSecondary\">\n              {getMappedUserProfileValue('email', mergedMappings, currentUser)}\n            </Typography>\n          )}\n        </div>\n        <Divider />\n        {profileEntries.map(([key, value]: any, index: any) => (\n          <div key={key}>\n            <div className={styles.sectionRow}>\n              <div className={styles.sectionLabel}>{formatLabel(key)}</div>\n              <div className={styles.sectionValue}>\n                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}\n              </div>\n            </div>\n            {index < profileEntries.length - 1 && <Divider />}\n          </div>\n        ))}\n      </>\n    );\n  };\n\n  const profileContent: any = (\n    <CardPrimitive className={containerClasses}>\n      {error && (\n        <AlertPrimitive\n          variant=\"error\"\n          className={cx(withVendorCSSClassPrefix(bem('user-profile', 'alert')), styles.alert)}\n        >\n          <AlertPrimitive.Title>{t('errors.heading') || 'Error'}</AlertPrimitive.Title>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n      {schemas && schemas.length > 0 && (\n        <div className={styles.header}>\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}\n            name={getDisplayName(mergedMappings, profile!)}\n            size={80}\n            alt={`${getDisplayName(mergedMappings, profile!)}'s avatar`}\n            isLoading={isLoading}\n          />\n        </div>\n      )}\n      <div className={styles.infoContainer}>\n        {schemas && schemas.length > 0\n          ? schemas\n              .filter((schema: any) => {\n                if (!schema.name || !shouldShowField(schema.name)) return false;\n\n                if (!editable) {\n                  const value: any = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;\n                  return value !== undefined && value !== '' && value !== null;\n                }\n\n                return true;\n              })\n              .sort((a: any, b: any) => {\n                const orderA: any = a.displayOrder ? parseInt(a.displayOrder, 10) : 999;\n                const orderB: any = b.displayOrder ? parseInt(b.displayOrder, 10) : 999;\n                return orderA - orderB;\n              })\n              .map((schema: any, index: any) => {\n                const value: any = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;\n                const schemaWithValue: any = {\n                  ...schema,\n                  value,\n                };\n\n                return (\n                  <div key={schema.name || index} className={styles.info}>\n                    {renderUserInfo(schemaWithValue)}\n                  </div>\n                );\n              })\n          : renderProfileWithoutSchemas()}\n      </div>\n    </CardPrimitive>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title ?? t('user.profile.heading')}</DialogPrimitive.Heading>\n          <div className={styles.popup}>{profileContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return profileContent;\n};\n\nexport default BaseUserProfile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAMA,eAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAGD,MAAMC,iBAA2B;CAAC;CAAY;CAAY;CAAY;AAEtE,MAAMC,mBAA6C,EACjD,WAAW,MACX,YAAY,IACZ,aAAa,MACb,SACA,UAAU,EAAE,EACZ,kBACA,OAAO,UACP,OACA,mBAAmB,EAAE,EACrB,WAAW,MACX,cACA,UACA,OAAO,OACP,QAAQ,MACR,YAAY,OACZ,aACA,aAAa,EAAE,EACf,aAAa,EAAE,EACf,wBAAwB,EAAE,OACqB;CAC/C,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAM,CAAC,YAAY,qCAA0B,oBAAoB,QAAQ;CACzE,MAAM,CAAC,eAAe,wCAAsD,EAAE,CAAC;CAC/E,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;;;;;;;;;CAU7C,MAAMC,0CACH,cAA+B;AAE9B,MAAI,aAAa,SAAS,UAAU,CAClC,QAAO;AAIT,MAAI,WAAW,SAAS,KAAK,WAAW,SAAS,UAAU,CACzD,QAAO;AAIT,MAAI,WAAW,SAAS,EACtB,QAAO,WAAW,SAAS,UAAU;AAGvC,SAAO;IAET,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,mBACJ,2CAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;YAEf,2CAAC,UAAK,GAAE,4DAA4D;GAChE;CAGR,MAAMC,0CAAoC,cAAsB;AAC9D,oBAAkB,UAAe;GAC/B,GAAG;IACF,YAAY,CAAC,KAAK;GACpB,EAAE;IACF,EAAE,CAAC;CAEN,MAAMC,8CAAwC,WAA2B;EACvE,MAAM,EAAC,MAAM,aAAa,aAAa,SAAQ;EAE/C,MAAMC,aAAkB,eAAe,eAAe,QAAQ;AAE9D,UAAQ,MAAR;GACE,KAAK,YACH,QAAO,cAAc,WAAW,aAAa;GAC/C,KAAK,UACH,QAAO,UAAU,WAAW,aAAa;GAC3C,KAAK,UACH,QAAO,SAAS,WAAW,aAAa,CAAC;GAC3C,QACE,QAAO,cAAc,WAAW,aAAa;;IAEhD,EAAE,CAAC;CAEN,MAAMC,sCACH,QACC,IACG,MAAM,cAAc,CACpB,KAAK,SAAc,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE,CAAC,aAAa,CAAC,CAC9E,KAAK,IAAI,EACd,EAAE,CACH;CAED,MAAMC,SAAcC,uCAAU,OAAO,YAAY;CAEjD,MAAMC,iBAAsC,EAAC,WAAgD;AAC3F,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAE9C,SACE,2CAAC;GAAM,WAAW,OAAO;aACvB,2CAAC,qBACE,OAAO,QAAQ,KAAK,CAAC,KAAK,CAAC,KAAK,WAC/B,4CAAC,mBACC,2CAAC;IAAG,WAAW,OAAO;cACpB,4CAAC,uBAAQ,YAAY,IAAI,EAAC,OAAU;KACjC,EACL,2CAAC;IAAG,WAAW,OAAO;cACnB,OAAO,UAAU,WAAW,2CAAC,iBAAc,MAAM,QAAS,GAAG,OAAO,MAAM;KACxE,KANE,IAOJ,CACL,GACI;IACF;;CAIZ,SAAS,IAAI,KAA0B,MAAc,OAAkB;EACrE,MAAMC,OAAY,KAAK,MAAM,IAAI;EACjC,IAAIC,UAAe;AAEnB,OAAK,IAAIC,IAAS,GAAG,IAAI,KAAK,QAAQ,KAAK,GAAG;GAC5C,MAAMC,MAAW,KAAK;AAEtB,OAAI,MAAM,KAAK,SAAS,EACtB,SAAQ,OAAO;QACV;AACL,QAAI,CAAC,QAAQ,QAAQ,OAAO,QAAQ,SAAS,SAC3C,SAAQ,OAAO,EAAE;AAEnB,cAAU,QAAQ;;;;CAKxB,MAAMC,0CACH,WAAyB;AACxB,MAAI,CAAC,YAAY,CAAC,OAAO,KAAM;EAE/B,MAAMC,YAAoB,OAAO;EACjC,IAAIC;AACJ,MAAI,cAAc,aAAa,WAAW,eAAe,OACvD,cAAa,WAAW;WACf,mBAAmB,eAAe,OAC3C,cAAa,iBAAiB;MAE9B,cAAa;AAGf,MAAI,MAAM,QAAQ,WAAW,CAC3B,cAAa,WAAW,QAAQ,MAAW,MAAM,UAAa,MAAM,QAAQ,MAAM,GAAG;EAGvF,IAAIC,UAA+B,EAAE;AAOrC,MAAI,OAAO,YAAY,OAAO,aAAaC,uCAAmB,KAE5D,WAAU,GACP,OAAO,WAAW,GAChB,YAAY,YACd,EACF;MAID,KAAI,SAAS,WAAW,WAAW;AAGrC,WAAS,QAAQ;AAEjB,kBAAgB,UAAU;IAE5B;EAAC;EAAY;EAAkB;EAAU;EAAgB,CAC1D;CAED,MAAMC,4CACH,cAAsB;EACrB,MAAMC,gBAAmB,oBAAoB;AAC7C,iBAAe,UAAe;GAC5B,GAAG;IACF,YAAYC,cAAY;GAC1B,EAAE;AACH,kBAAgB,UAAU;IAE5B;EAAC;EAAkB;EAAS;EAAgB,CAC7C;CAUD,MAAMC,iBAAoD,OAAO,YAC/D,OAAO,QAAQ;EARf,OAAO,CAAC,UAAU,QAAQ;EAC1B,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,mBAAmB,cAAc;EAC5C,SAAS;GAAC;GAAW;GAAc;GAAW;GAAM;EACpD,UAAU;GAAC;GAAY;GAAY;GAAY;EAIF,GAAG;EAAiB,CAAC,CAAC,QAChE,UAAgD,MAAM,OAAO,OAC/D,CACF;CAED,MAAM,qBACJ,QACA,WACA,aACA,gBACwB;AACxB,MAAI,CAAC,OAAQ,QAAO;EACpB,MAAM,EAAC,OAAO,aAAa,aAAa,MAAM,MAAM,UAAU,YAAY,eAAe,gBAAe;EACxG,MAAMC,QAAa,eAAe,eAAe,QAAQ;AAEzD,MAAI,iBAAiB,MAAM,QAAQ,cAAc,CAC/C,QACE,mFACG,cAAc,KAAK,SAAc,UAAe;GAC/C,IAAIC;AACJ,OAAI,MAAM,QAAQ,QAAQ,MAAM,CAC9B,kBAAe,QAAQ,MACpB,KAAK,SAAe,OAAO,SAAS,WAAW,KAAK,UAAU,KAAK,GAAG,OAAO,KAAK,CAAE,CACpF,KAAK,KAAK;YACJ,OAAO,QAAQ,UAAU,SAClC,kBAAe,KAAK,UAAU,QAAQ,MAAM;OAE5C,kBAAe,OAAO,QAAQ,MAAM;AAGtC,UACE,4CAAC;IAAgB,WAAW,OAAO;eACjC,2CAAC;KAAK,WAAW,OAAO;eAAQ,QAAQ,eAAe,QAAQ,eAAe;MAAU,EACxF,2CAAC;KAAI,WAAW,OAAO;eAAQC;MAAmB;MAF1C,MAGJ;IAER,GACD;AAIP,MAAI,MAAM,QAAQ,MAAM,IAAI,aAAa;GACvC,MAAMC,YAAiB,MAAM,QAAQ,MAAM,GACvC,MAAM,SAAS,IACf,UAAU,UAAa,UAAU,QAAQ,UAAU;GACvD,MAAMC,eAAkB,YAAY,eAAe,eAAe,CAAC,eAAe,SAAS,QAAQ,GAAG;AAEtG,OAAI,aAAa,eAAeC,cAAY;IAC1C,IAAIC;AACJ,QAAI,cAAc,QAAQ,WAAW,UAAU,OAC7C,gBAAe,WAAW;aACjB,oBAAoB,QAAQ,iBAAiB,UAAU,OAChE,gBAAe,iBAAiB;QAEhC,gBAAe;IAGjB,IAAIC;AACJ,QAAI,MAAM,QAAQ,aAAa,CAC7B,eAAc,aAAa,IAAI,OAAO;aAC7B,iBAAiB,UAAa,iBAAiB,QAAQ,iBAAiB,GACjF,eAAc,CAAC,OAAO,aAAa,CAAC;QAEpC,eAAc,EAAE;AAGlB,WACE,qFACE,2CAAC;KAAK,WAAW,OAAO;eAAQ;MAAa,EAC7C,2CAAC;KAAI,WAAW,OAAO;eACrB,2CAACC;MACC,QAAQ;MACR,WAAW,cAAyB;AAClC,WAAI,eAAe,MAAM,QAAQ,aAAa,CAC5C,aAAY,UAAU;WAEtB,aAAY,UAAU,MAAM,GAAG;;MAGnC,aAAa,oBAAoB,OAAO;MACxC,WAAW;MACX,MAAM,SAAS,cAAc,SAAS;MAC5B;OACV;MACE,IACL;;GAIP,IAAIP;AACJ,OAAI,UACF,KAAI,MAAM,QAAQ,MAAM,CACtB,kBAAe,MACZ,KAAK,SAAe,OAAO,SAAS,WAAW,KAAK,UAAU,KAAK,GAAG,OAAO,KAAK,CAAE,CACpF,KAAK,KAAK;OAEb,kBAAe,OAAO,MAAM;YAErBI,aACT,kBAAe,oBAAoB,OAAO;OAE1C,kBAAe;AAGjB,UACE,qFACE,2CAAC;IAAK,WAAW,OAAO;cAAQ;KAAa,EAC7C,2CAAC;IAAI,iCAAc,OAAO,OAAO,CAAC,YAAY,OAAO,mBAAmB,GAAG;cACxE,CAAC,aAAaA,gBAAc,cAC3B,2CAACI;KACC,SAAS;KACT,SAAQ;KACR,OAAM;KACN,MAAK;KACL,OAAM;KACN,WAAW,OAAO;eAEjBP;MACM,GAETA;KAEE,IACL;;AAGP,MAAI,SAAS,aAAa,OAAO,UAAU,SACzC,QAAO,2CAAC,iBAAc,MAAM,QAAS;AAGvC,MAAI,aAAa,eAAe,eAAe,eAAe,CAAC,eAAe,SAAS,QAAQ,GAAG,EAAE;GAClG,IAAIT;AACJ,OAAI,cAAc,QAAQ,WAAW,UAAU,OAC7C,cAAa,WAAW;YACf,oBAAoB,QAAQ,iBAAiB,UAAU,OAChE,cAAa,iBAAiB;OAE9B,cAAa,SAAS;GAGxB,MAAMiB,cAAmB;IACvB,OAAO;IACP,WAAW,MAAW,YAAY,EAAE,SAAS,EAAE,OAAO,QAAQ,EAAE;IAChE,aAAa,oBAAoB,OAAO;IACxC;IACA,OAAO;IAER;GACD,IAAIC;AACJ,WAAQ,MAAR;IACE,KAAK;AACH,aAAQ,2CAACC,6BAAU,GAAI,cAAe;AACtC;IACF,KAAK;AACH,aAAQ,2CAACC,8BAAW,GAAI,cAAe;AACvC;IACF,KAAK;AACH,aACE,2CAACC;MACC,GAAI;MACJ,SAAS,CAAC,CAAC;MACX,WAAW,MAAiB;AAC1B,mBAAY,EAAE,OAAO,QAAQ;;OAE/B;AAEJ;IACF,KAAK;AACH,aACE,2CAAC;MACC,OAAO;MACP,WAAW,MAAiB,YAAY,EAAE,OAAO,MAAM;MACvD,aAAa,oBAAoB,OAAO;MAC9B;MACV,WAAW,OAAO;OAClB;AAEJ;IACF,QACE,SAAQ,2CAACF,6BAAU,GAAI,cAAe;;AAE1C,UACE,qFACE,2CAAC;IAAK,WAAW,OAAO;cAAQ;KAAa,EAC7C,2CAAC;IAAI,WAAW,OAAO;cAAQ;KAAY,IAC1C;;EAIP,MAAMG,WAAgB,UAAU,UAAa,UAAU,QAAQ,UAAU;EACzE,MAAMX,aAAkB,YAAY,eAAe,eAAe,CAAC,eAAe,SAAS,QAAQ,GAAG;EAEtG,IAAIH;AACJ,MAAI,SACF,gBAAe,OAAO,MAAM;WACnB,WACT,gBAAe,oBAAoB,OAAO;MAE1C,gBAAe;AAGjB,SACE,qFACE,2CAAC;GAAK,WAAW,OAAO;aAAQ;IAAa,EAC7C,2CAAC;GAAI,iCAAc,OAAO,OAAO,CAAC,WAAW,OAAO,mBAAmB,GAAG;aACvE,CAAC,YAAY,cAAc,cAC1B,2CAACQ;IACC,SAAS;IACT,SAAQ;IACR,OAAM;IACN,MAAK;IACL,OAAM;IACN,WAAW,OAAO;cAEjB;KACM,GAET;IAEE,IACL;;CAIP,MAAM,kBAAkB,WAAwB;AAC9C,MAAI,CAAC,QAAQ,KAAM,QAAO;EAE1B,MAAMM,WAAgB,OAAO,UAAU,UAAa,OAAO,UAAU,MAAM,OAAO,UAAU;EAC5F,MAAMC,iBAAsB,cAAc,OAAO;EACjD,MAAMC,kBAAuB,eAAe,SAAS,OAAO,KAAK;AAIjE,MAAI,EAFoB,YAAY,kBAAmB,YAAY,OAAO,eAAe,cAGvF,QAAO;AAGT,SACE,4CAAC;GAAI,WAAW,OAAO;cACrB,2CAAC;IAAI,WAAW,OAAO;cACpB,kBACC,QACA,iBACC,UAAe;KACd,MAAMC,iBAAsB,EAAC,GAAG,YAAW;AAC3C,oBAAe,OAAO,QAAS;AAC/B,mBAAc,eAAe;aAEzB,gBAAgB,OAAO,KAAK,CACnC;KACG,EACL,YAAY,OAAO,eAAe,eAAe,CAAC,mBACjD,4CAAC;IAAI,WAAW,OAAO;eACpB,kBACC,qFACE,2CAACT;KAAO,MAAK;KAAQ,OAAM;KAAU,SAAQ;KAAQ,eAAoB,gBAAgB,OAAO;eAAE;MAEzF,EACT,2CAACA;KACC,MAAK;KACL,OAAM;KACN,SAAQ;KACR,eAAoB,kBAAkB,OAAO,KAAK;eACnD;MAEQ,IACR,EAEJ,CAAC,kBAAkB,YAClB,2CAACA;KACC,MAAK;KACL,OAAM;KACN,SAAQ;KACR,eAAoB,gBAAgB,OAAO,KAAK;KAChD,OAAM;KACN,WAAW,OAAO;eAElB,2CAAC,eAAa;MACP;KAEP;IAEJ;;AAIV,KAAI,CAAC,WAAW,CAAC,iBACf,QAAO;CAGT,MAAMU,yCACJ,OAAO,MACP,aAAa,OAAO,OAAO,sDACF,eAAe,EACxC,UACD;CAED,MAAMtB,cAAmB,oBAAoB;CAE7C,MAAM,oCAAyC;AAC7C,MAAI,CAAC,YAAa,QAAO;EAEzB,MAAMuB,cAAmBC,+BAAe,gBAAgB,SAAU,sBAAsB;EAExF,MAAMC,iBAAsB,OAAO,QAAQ,YAAY,CACpD,QAAQ,CAAC,KAAK,WAA0B;AACvC,OAAI,CAAC,gBAAgB,IAAI,CAAE,QAAO;AAElC,UAAO,UAAU,UAAa,UAAU,MAAM,UAAU;IACxD,CACD,MAAM,CAAC,IAAwB,CAAC,OAA2B,EAAE,cAAc,EAAE,CAAC;AAEjF,SACE;GACE,4CAAC;IAAI,WAAW,OAAO;;KACrB,2CAACC;MACC,UAAUC,0CAA0B,WAAW,gBAAgB,YAAY;MAC3E,MAAM;MACN,MAAM;MACN,KAAK,GAAG,YAAY;MACT;OACX;KACF,2CAACC;MAAW,SAAQ;MAAK,YAAW;gBACjC;OACU;KACZD,0CAA0B,SAAS,gBAAgB,YAAY,IAC9D,2CAACC;MAAW,SAAQ;MAAQ,OAAM;gBAC/BD,0CAA0B,SAAS,gBAAgB,YAAY;OACrD;;KAEX;GACN,2CAACE,4BAAU;GACV,eAAe,KAAK,CAAC,KAAK,QAAa,UACtC,4CAAC,oBACC,4CAAC;IAAI,WAAW,OAAO;eACrB,2CAAC;KAAI,WAAW,OAAO;eAAe,YAAY,IAAI;MAAO,EAC7D,2CAAC;KAAI,WAAW,OAAO;eACpB,OAAO,UAAU,WAAW,2CAAC,iBAAc,MAAM,QAAS,GAAG,OAAO,MAAM;MACvE;KACF,EACL,QAAQ,eAAe,SAAS,KAAK,2CAACA,4BAAU,KAPzC,IAQJ,CACN;MACD;;CAIP,MAAMC,iBACJ,4CAACC;EAAc,WAAW;;GACvB,SACC,4CAACC;IACC,SAAQ;IACR,gHAA2C,gBAAgB,QAAQ,CAAC,EAAE,OAAO,MAAM;eAEnF,2CAACA,sBAAe,mBAAO,EAAE,iBAAiB,IAAI,UAA+B,EAC7E,2CAACA,sBAAe,yBAAa,QAAmC;KACjD;GAElB,WAAW,QAAQ,SAAS,KAC3B,2CAAC;IAAI,WAAW,OAAO;cACrB,2CAACN;KACC,UAAUC,0CAA0B,WAAW,gBAAgB,YAAY;KAC3E,MAAMH,+BAAe,gBAAgB,QAAS;KAC9C,MAAM;KACN,KAAK,GAAGA,+BAAe,gBAAgB,QAAS,CAAC;KACtC;MACX;KACE;GAER,2CAAC;IAAI,WAAW,OAAO;cACpB,WAAW,QAAQ,SAAS,IACzB,QACG,QAAQ,WAAgB;AACvB,SAAI,CAAC,OAAO,QAAQ,CAAC,gBAAgB,OAAO,KAAK,CAAE,QAAO;AAE1D,SAAI,CAAC,UAAU;MACb,MAAMS,QAAa,oBAAoB,OAAO,OAAO,iBAAiB,OAAO,QAAQ;AACrF,aAAO,UAAU,UAAa,UAAU,MAAM,UAAU;;AAG1D,YAAO;MACP,CACD,MAAM,GAAQ,MAAW;AAGxB,aAFoB,EAAE,eAAe,SAAS,EAAE,cAAc,GAAG,GAAG,QAChD,EAAE,eAAe,SAAS,EAAE,cAAc,GAAG,GAAG;MAEpE,CACD,KAAK,QAAa,UAAe;KAChC,MAAMA,QAAa,oBAAoB,OAAO,OAAO,iBAAiB,OAAO,QAAQ;KACrF,MAAMC,kBAAuB;MAC3B,GAAG;MACH;MACD;AAED,YACE,2CAAC;MAA+B,WAAW,OAAO;gBAC/C,eAAe,gBAAgB;QADxB,OAAO,QAAQ,MAEnB;MAER,GACJ,6BAA6B;KAC7B;;GACQ;AAGlB,KAAI,SAAS,QACX,QACE,2CAACC;EAAsB;EAAoB;YACzC,4CAACA,uBAAgB,sBACf,2CAACA,uBAAgB,qBAAS,SAAS,EAAE,uBAAuB,GAA2B,EACvF,2CAAC;GAAI,WAAW,OAAO;aAAQ;IAAqB,IAC5B;GACV;AAItB,QAAO;;AAGT,8BAAe"}