@pisell/materials 1.8.38 → 1.8.41

package/lib/components/PisellCards/components/TextCard/docs/TextCard.md

@@ -411,7 +411,58 @@ export default () => {
 };
 ```
 
-### 角标位置
+### 角标位置和大小
+
+角标位置通过 `offset` 控制，大小通过 `size` 控制。
+
+```tsx
+import { PisellCards } from '@pisell/materials';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', gap: '16px' }}>
+        <PisellCards.TextCard
+          text="Top Right (默认)"
+          variant="filled"
+          badge={{ type: 'number', content: 99 }}
+        />
+        <PisellCards.TextCard
+          text="Top Left"
+          variant="filled"
+          badge={{ type: 'number', content: 99, offset: [-10, 0] }}
+        />
+        <PisellCards.TextCard
+          text="Bottom Right"
+          variant="filled"
+          badge={{ type: 'number', content: 99, offset: [0, 10] }}
+        />
+        <PisellCards.TextCard
+          text="Bottom Left"
+          variant="filled"
+          badge={{ type: 'number', content: 99, offset: [-10, 10] }}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: '16px' }}>
+        <PisellCards.TextCard
+          text="Small Badge"
+          variant="filled"
+          badge={{ type: 'number', content: 99, size: 'small' }}
+        />
+        <PisellCards.TextCard
+          text="Default Badge"
+          variant="filled"
+          badge={{ type: 'number', content: 99, size: 'default' }}
+        />
+      </div>
+    </div>
+  );
+};
+```
+
+### 角标显示零值
+
+通过 `showZero` 控制数字角标是否显示零值。
 
 ```tsx
 import { PisellCards } from '@pisell/materials';
@@ -420,14 +471,14 @@ export default () => {
   return (
     <div style={{ display: 'flex', gap: '16px' }}>
       <PisellCards.TextCard
-        text="Top Right"
+        text="Hide Zero"
         variant="filled"
-        badge={{ type: 'number', content: 99, position: 'top-right' }}
+        badge={{ type: 'number', content: 0, showZero: false }}
       />
       <PisellCards.TextCard
-        text="Top Left"
+        text="Show Zero"
         variant="filled"
-        badge={{ type: 'number', content: 99, position: 'top-left' }}
+        badge={{ type: 'number', content: 0, showZero: true }}
       />
     </div>
   );
@@ -643,14 +694,28 @@ export default () => {
 
 ### BadgeConfig
 
-| 参数     | 说明                   | 类型                                                           | 默认值        |
-| -------- | ---------------------- | -------------------------------------------------------------- | ------------- |
-| type     | 角标类型               | `'dot' \| 'number' \| 'text'`                                  | `'dot'`       |
-| content  | 角标内容（数字或文本） | `ReactNode`                                                    | -             |
-| position | 角标位置               | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` |
-| offset   | 角标偏移量 [x, y]      | `[number, number]`                                             | -             |
-| color    | 角标颜色               | `string`                                                       | -             |
-| style    | 角标自定义样式         | `CSSProperties`                                                | -             |
+| 参数     | 说明                   | 类型                  | 默认值   |
+| -------- | ---------------------- | --------------------- | -------- |
+| type     | 角标类型               | `'dot' \| 'number' \| 'text'` | `'dot'`  |
+| content  | 角标内容（数字或文本） | `ReactNode`           | -        |
+| offset   | 角标偏移量 [x, y]      | `[number, number]`    | -        |
+| size     | 角标大小               | `'small' \| 'default'` | -        |
+| color    | 角标颜色               | `string`              | -        |
+| style    | 角标自定义样式         | `CSSProperties`       | -        |
+| showZero | 是否显示零值           | `boolean`             | `false`  |
+
+**角标位置说明**：
+- 角标位置通过 `offset` 控制，不设置 `offset` 时默认在右上角
+- `offset` 格式为 `[x, y]`，正数向右/下偏移，负数向左/上偏移
+- 例如：`offset: [0, 0]` 为默认位置，`offset: [-10, 0]` 向左偏移，`offset: [0, 10]` 向下偏移
+
+**角标大小说明**：
+- `size: 'small'` - 小尺寸角标
+- `size: 'default'` - 默认尺寸角标（不设置时使用默认尺寸）
+
+**角标显示零值说明**：
+- `showZero: true` - 当 content 为 0 时显示角标
+- `showZero: false` - 当 content 为 0 时不显示角标（默认）
 
 ### TextConfig
 

package/lib/components/PisellCards/index.d.ts

@@ -2,6 +2,8 @@
 import { PisellBasicCardProps } from "./types.js";
 import { ImageDataSource, ImageFillMode, PisellImageCardProps } from "./components/PisellImageCard/types.js";
 import { GraphicConfig, GraphicTextCardProps, GraphicTextCardSize, GraphicTextCardVariant } from "./components/GraphicTextCard/types.js";
+import { EntityCardActionItem, EntityCardDensity, EntityCardLayout, EntityCardMediaConfig, EntityCardMediaType, EntityCardSecondaryItem, EntityCardTagItem, EntityCardTagPosition, EntityCardWidth, PisellEntityCardProps } from "../pisellEntityCard/types.js";
+import { PisellEntityCard } from "../pisellEntityCard/PisellEntityCard.js";
 import { BadgeConfig, TabCardProps } from "./components/TabCard/types.js";
 import { MultilevelCardProps } from "./components/MultilevelCard/types.js";
 import * as _$react from "react";
@@ -13,6 +15,7 @@ declare const PisellCards: {
   GraphicTextCard: (props: GraphicTextCardProps) => _$react.JSX.Element;
   MultilevelCard: (props: any) => _$react.JSX.Element;
   PisellImageCard: (props: PisellImageCardProps) => _$react.JSX.Element;
+  PisellEntityCard: typeof PisellEntityCard;
 };
 //#endregion
 export { PisellCards };

package/lib/components/PisellCards/index.js

@@ -3,6 +3,7 @@ const require_TextCard = require("./components/TextCard/TextCard.js");
 const require_PisellImageCard = require("./components/PisellImageCard/PisellImageCard.js");
 const require_GraphicTextCard = require("./components/GraphicTextCard/GraphicTextCard.js");
 const require_MultilevelCard = require("./components/MultilevelCard/MultilevelCard.js");
+const require_PisellEntityCard = require("../pisellEntityCard/PisellEntityCard.js");
 //#region src/components/PisellCards/index.tsx
 /**
 * PisellCards 组件主入口
@@ -13,7 +14,8 @@ const PisellCards = {
 	TextCard: require_TextCard.default,
 	GraphicTextCard: require_GraphicTextCard.default,
 	MultilevelCard: require_MultilevelCard.default,
-	PisellImageCard: require_PisellImageCard.default
+	PisellImageCard: require_PisellImageCard.default,
+	PisellEntityCard: require_PisellEntityCard.PisellEntityCard
 };
 //#endregion
 exports.default = PisellCards;

package/lib/components/PisellContactBrief/PisellContactBrief.d.ts

@@ -0,0 +1,34 @@
+import { PisellContactBriefProps } from "./types.js";
+import React from "react";
+//#region src/components/PisellContactBrief/PisellContactBrief.d.ts
+/**
+ * PisellContactBrief 联系人简要卡片
+ * 基于 PisellEntityCard 展示姓名、电话、邮箱及扩展字段，右侧编辑图标调起编辑弹窗
+ */
+declare function PisellContactBrief({
+  name,
+  phone,
+  email,
+  avatar,
+  extraData,
+  extraFields,
+  onSubmit,
+  onDelete,
+  swipeToDelete,
+  layout,
+  showAvatar,
+  showPhone,
+  showEmail,
+  primaryLineClamp,
+  secondaryLineClamp,
+  className,
+  style,
+  hoverStyle,
+  activeStyle,
+  disabledStyle,
+  clickable,
+  disabled,
+  onClick
+}: PisellContactBriefProps): React.JSX.Element;
+//#endregion
+export { PisellContactBrief };

package/lib/components/PisellContactBrief/PisellContactBrief.js

@@ -0,0 +1,158 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_PisellEntityCard = require("../pisellEntityCard/PisellEntityCard.js");
+const require_ContactFormModal = require("./components/ContactFormModal.js");
+const require_locales = require("./locales.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _pisell_utils = require("@pisell/utils");
+let _ant_design_icons = require("@ant-design/icons");
+require("./PisellContactBrief.less");
+//#region src/components/PisellContactBrief/PisellContactBrief.tsx
+/** 初始化多语言（合并到全局 locales），确保 getText 能取到本组件文案 */
+function ensureLocales() {
+	try {
+		var _getLocale, _getLocale2;
+		const current = (_getLocale = (_getLocale2 = _pisell_utils.locales.getLocale) === null || _getLocale2 === void 0 ? void 0 : _getLocale2.call(_pisell_utils.locales)) !== null && _getLocale !== void 0 ? _getLocale : "en";
+		const locale = current === "zh-TW" ? "zh-HK" : current;
+		_pisell_utils.locales.init(require_locales.default, locale);
+	} catch (_unused) {}
+}
+/**
+* PisellContactBrief 联系人简要卡片
+* 基于 PisellEntityCard 展示姓名、电话、邮箱及扩展字段，右侧编辑图标调起编辑弹窗
+*/
+function PisellContactBrief({ name, phone, email, avatar, extraData = {}, extraFields = [], onSubmit, onDelete, swipeToDelete = false, layout = "horizontal", showAvatar = true, showPhone = true, showEmail = true, primaryLineClamp, secondaryLineClamp, className, style, hoverStyle, activeStyle, disabledStyle, clickable = true, disabled = false, onClick }) {
+	const [editModalVisible, setEditModalVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		ensureLocales();
+	}, []);
+	const media = (0, react.useMemo)(() => {
+		if (!showAvatar) return void 0;
+		return {
+			type: "avatar",
+			src: avatar,
+			alt: name,
+			size: 32,
+			shape: "circle"
+		};
+	}, [
+		showAvatar,
+		avatar,
+		name
+	]);
+	const secondaryTexts = (0, react.useMemo)(() => {
+		const list = [];
+		if (showEmail && email) list.push({ text: email });
+		extraFields.forEach((f) => {
+			const v = extraData[f.key];
+			if (v) list.push({ text: v });
+		});
+		return list;
+	}, [
+		showEmail,
+		email,
+		extraFields,
+		extraData
+	]);
+	const editAction = (0, react.useMemo)(() => ({
+		type: "icon",
+		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.EditOutlined, { className: "pisell-contact-brief-action-edit" }),
+		onClick: () => {
+			setEditModalVisible(true);
+		}
+	}), []);
+	const initialEditValues = (0, react.useMemo)(() => require_objectSpread2._objectSpread2({
+		name,
+		phone,
+		email
+	}, extraData), [
+		name,
+		phone,
+		email,
+		extraData
+	]);
+	const handleEditSubmit = (0, react.useCallback)((values) => {
+		onSubmit === null || onSubmit === void 0 || onSubmit(values);
+		setEditModalVisible(false);
+	}, [onSubmit]);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-contact-brief-wrap" }, /* @__PURE__ */ react.default.createElement(require_PisellEntityCard.PisellEntityCard, {
+		className,
+		style,
+		hoverStyle,
+		activeStyle,
+		disabledStyle,
+		clickable,
+		disabled,
+		onClick,
+		media,
+		primaryText: name,
+		subtitleText: showPhone && phone ? phone : void 0,
+		secondaryTexts,
+		showMedia: showAvatar,
+		showPrimaryText: true,
+		showSubtitle: showPhone,
+		showSecondaryText: true,
+		showTags: false,
+		showActions: true,
+		actions: [editAction],
+		density: "B2",
+		layout,
+		width: "content",
+		swipeToDelete,
+		onDelete,
+		primaryLineClamp,
+		secondaryLineClamp
+	})), /* @__PURE__ */ react.default.createElement(require_ContactFormModal.ContactFormModal, {
+		visible: editModalVisible,
+		onCancel: () => setEditModalVisible(false),
+		onSubmit: handleEditSubmit,
+		mode: "edit",
+		initialValues: initialEditValues,
+		extraFields
+	}));
+}
+/**
+* 新建联系人入口按钮
+* 展示「Add Contact」+ 占位头像 + plus 图标，点击打开新建弹窗
+*/
+function PisellContactBriefCreateButton({ extraFields = [], onCreate, onClick: onClickProp, className, style }) {
+	const [createModalVisible, setCreateModalVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		ensureLocales();
+	}, []);
+	const handleClick = (0, react.useCallback)((e) => {
+		if (onClickProp) {
+			onClickProp(e);
+			return;
+		}
+		setCreateModalVisible(true);
+	}, [onClickProp]);
+	const handleCreateSubmit = (0, react.useCallback)((values) => {
+		onCreate === null || onCreate === void 0 || onCreate(values);
+		setCreateModalVisible(false);
+	}, [onCreate]);
+	const addContactText = _pisell_utils.locales.getText("pisell.contact.brief.addContact");
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
+		role: "button",
+		tabIndex: 0,
+		className: `pisell-contact-brief-create-btn ${className !== null && className !== void 0 ? className : ""}`.trim(),
+		style,
+		onClick: handleClick,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleClick(e);
+			}
+		}
+	}, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-contact-brief-create-btn-avatar" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-contact-brief-create-btn-avatar-inner" })), /* @__PURE__ */ react.default.createElement("span", { className: "pisell-contact-brief-create-btn-text" }, addContactText), /* @__PURE__ */ react.default.createElement(_ant_design_icons.PlusCircleOutlined, { className: "pisell-contact-brief-create-btn-icon" })), /* @__PURE__ */ react.default.createElement(require_ContactFormModal.ContactFormModal, {
+		visible: createModalVisible,
+		onCancel: () => setCreateModalVisible(false),
+		onSubmit: handleCreateSubmit,
+		mode: "create",
+		extraFields
+	}));
+}
+PisellContactBrief.CreateButton = PisellContactBriefCreateButton;
+//#endregion
+exports.PisellContactBrief = PisellContactBrief;

package/lib/components/PisellContactBrief/PisellContactBrief.less

@@ -0,0 +1,192 @@
+/**
+ * PisellContactBrief 样式
+ * 类名前缀 pisell-contact-brief-
+ */
+.pisell-contact-brief-wrap {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* 编辑图标与右侧操作区 */
+.pisell-contact-brief-action-edit {
+  font-size: 16px;
+  color: #667085;
+}
+
+/* 新建按钮：水平布局，占位头像 + 文案 + plus 图标，与设计稿一致 */
+.pisell-contact-brief-create-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  background-color: #ffffff;
+  transition: background-color 0.2s, border-color 0.2s;
+
+  &:hover {
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+  }
+}
+
+.pisell-contact-brief-create-btn-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f2f4f7;
+}
+
+.pisell-contact-brief-create-btn-avatar-inner {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #e4e7ec;
+}
+
+.pisell-contact-brief-create-btn-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pisell-contact-brief-create-btn-icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  color: #667085;
+}
+
+/* 弹窗：对齐 Figma 新建/编辑弹窗，新建与编辑完全一致 */
+.pisell-contact-brief-modal {
+  /* 容器：12px 圆角、Shadow xl */
+
+  .ant-modal-content,
+  .pisell-lowcode-modal-content {
+    border-radius: 12px;
+    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
+    overflow: hidden;
+    padding: 0;
+  }
+
+  /* Header：24px 16px，标题 18px Semibold #101828 */
+
+  .ant-modal-header,
+  .pisell-lowcode-modal-header {
+    padding: 16px 24px;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .ant-modal-title,
+  .pisell-lowcode-modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+    color: #101828;
+  }
+
+  /* Header 下方分割线 */
+
+  .ant-modal-header + .ant-modal-body,
+  .pisell-lowcode-modal-header + .pisell-lowcode-modal-body {
+    border-top: 1px solid #eaecf0;
+  }
+
+  /* Body：24px padding */
+
+  .ant-modal-body,
+  .pisell-lowcode-modal-body {
+    padding: 24px;
+  }
+
+  /* 表单：表单项间距 24px */
+
+  .pisell-contact-brief-modal-form.ant-form,
+  .pisell-contact-brief-modal-form.pisell-lowcode-form {
+    .ant-form-item,
+    .pisell-lowcode-form-item {
+      margin-bottom: 24px;
+    }
+
+    .ant-form-item:last-child,
+    .pisell-lowcode-form-item:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  /* 第一行：Firstname + Lastname 两列，间距 16px */
+
+  .pisell-contact-brief-modal-form-row {
+    display: flex;
+    gap: 16px;
+
+    .ant-form-item,
+    .pisell-lowcode-form-item {
+      flex: 1;
+      margin-bottom: 0;
+    }
+  }
+
+  /* Label：14px Medium #344054 */
+
+  .ant-form-item-label > label,
+  .pisell-lowcode-form-item-label > label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #344054;
+  }
+
+  /* Footer：顶部分割线、24px padding、按钮间距 12px */
+
+  .ant-modal-footer,
+  .pisell-lowcode-modal-footer {
+    padding: 24px;
+    border-top: 1px solid #eaecf0;
+    gap: 12px;
+    margin-top: 0;
+  }
+
+  /* 取消：白底、边框 #D0D5DD、48px 高、16px Semibold #344054 */
+
+  .ant-btn-default,
+  .pisell-lowcode-btn-default {
+    height: 48px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    border-color: #d0d5dd;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #344054;
+    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  }
+
+  /* 主按钮：Primary #7F56D9、白字 */
+
+  .ant-btn-primary,
+  .pisell-lowcode-btn-primary {
+    height: 48px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    background-color: #7f56d9;
+    border-color: #7f56d9;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  }
+}

package/lib/components/PisellContactBrief/components/ContactFormModal.js

@@ -0,0 +1,139 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_PisellSingleLineText = require("../../pisellSingleLineText/PisellSingleLineText.js");
+const require_PisellPhone = require("../../pisellPhone/PisellPhone.js");
+const require_PisellEmail = require("../../pisellEmail/PisellEmail.js");
+const require_asyncToGenerator = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _pisell_utils = require("@pisell/utils");
+let antd = require("antd");
+//#region src/components/PisellContactBrief/components/ContactFormModal.tsx
+const FIRSTNAME_FIELD = "firstname";
+const LASTNAME_FIELD = "lastname";
+const PHONE_FIELD = "phone";
+const EMAIL_FIELD = "email";
+/** 将 name 拆分为 firstname + lastname（按首个空格） */
+function splitName(name) {
+	if (!name || !name.trim()) return ["", ""];
+	const idx = name.trim().indexOf(" ");
+	if (idx <= 0) return [name.trim(), ""];
+	return [name.trim().slice(0, idx), name.trim().slice(idx + 1)];
+}
+/** 将 firstname + lastname 合并为 name */
+function joinName(first, last) {
+	return [first, last].map((s) => s === null || s === void 0 ? void 0 : s.trim()).filter(Boolean).join(" ");
+}
+/**
+* 联系人新建/编辑弹窗
+* 表单含 Firstname、Lastname、Phone、Email + extraFields，与 Figma 新建/编辑弹窗一致
+*/
+function ContactFormModal({ visible, onCancel, onSubmit, mode, initialValues, extraFields = [] }) {
+	const [form] = antd.Form.useForm();
+	(0, react.useEffect)(() => {
+		if (visible) {
+			var _initialValues$name, _initialValues$phone, _initialValues$email;
+			const [firstname, lastname] = splitName(initialValues === null || initialValues === void 0 ? void 0 : initialValues.name);
+			const values = {
+				firstname,
+				lastname,
+				name: (_initialValues$name = initialValues === null || initialValues === void 0 ? void 0 : initialValues.name) !== null && _initialValues$name !== void 0 ? _initialValues$name : "",
+				phone: (_initialValues$phone = initialValues === null || initialValues === void 0 ? void 0 : initialValues.phone) !== null && _initialValues$phone !== void 0 ? _initialValues$phone : "",
+				email: (_initialValues$email = initialValues === null || initialValues === void 0 ? void 0 : initialValues.email) !== null && _initialValues$email !== void 0 ? _initialValues$email : ""
+			};
+			if (initialValues && extraFields.length > 0) extraFields.forEach((f) => {
+				var _initialValues$f$key;
+				values[f.key] = (_initialValues$f$key = initialValues[f.key]) !== null && _initialValues$f$key !== void 0 ? _initialValues$f$key : "";
+			});
+			form.setFieldsValue(values);
+		}
+	}, [
+		visible,
+		initialValues,
+		extraFields,
+		form
+	]);
+	const handleOk = function() {
+		var _ref = require_asyncToGenerator._asyncToGenerator(function* () {
+			try {
+				var _raw$firstname, _raw$lastname;
+				const raw = yield form.validateFields();
+				const values = {
+					name: joinName((_raw$firstname = raw.firstname) !== null && _raw$firstname !== void 0 ? _raw$firstname : "", (_raw$lastname = raw.lastname) !== null && _raw$lastname !== void 0 ? _raw$lastname : ""),
+					phone: raw.phone,
+					email: raw.email
+				};
+				extraFields.forEach((f) => {
+					values[f.key] = raw[f.key];
+				});
+				onSubmit(values);
+				form.resetFields();
+				onCancel();
+			} catch (_unused) {}
+		});
+		return function handleOk() {
+			return _ref.apply(this, arguments);
+		};
+	}();
+	const handleCancel = () => {
+		form.resetFields();
+		onCancel();
+	};
+	const title = mode === "create" ? _pisell_utils.locales.getText("pisell.contact.brief.modal.title.create") : _pisell_utils.locales.getText("pisell.contact.brief.modal.title.edit");
+	const okText = _pisell_utils.locales.getText("pisell.contact.brief.modal.save");
+	const cancelText = _pisell_utils.locales.getText("pisell.contact.brief.modal.cancel");
+	return /* @__PURE__ */ react.default.createElement(antd.Modal, {
+		title,
+		open: visible,
+		onOk: handleOk,
+		onCancel: handleCancel,
+		okText,
+		cancelText,
+		destroyOnClose: true,
+		width: 480,
+		className: "pisell-contact-brief-modal"
+	}, /* @__PURE__ */ react.default.createElement(antd.Form, {
+		form,
+		layout: "vertical",
+		preserve: false,
+		className: "pisell-contact-brief-modal-form"
+	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-contact-brief-modal-form-row" }, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		name: FIRSTNAME_FIELD,
+		label: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.firstname"),
+		rules: [{
+			required: true,
+			message: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.required")
+		}],
+		className: "pisell-contact-brief-modal-form-item-half"
+	}, /* @__PURE__ */ react.default.createElement(require_PisellSingleLineText.default, {
+		placeholder: "",
+		mode: "edit"
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		name: LASTNAME_FIELD,
+		label: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.lastname"),
+		className: "pisell-contact-brief-modal-form-item-half"
+	}, /* @__PURE__ */ react.default.createElement(require_PisellSingleLineText.default, {
+		placeholder: "",
+		mode: "edit"
+	}))), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		name: PHONE_FIELD,
+		label: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.phone")
+	}, /* @__PURE__ */ react.default.createElement(require_PisellPhone.default, {
+		placeholder: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.phone.placeholder"),
+		mode: "edit"
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		name: EMAIL_FIELD,
+		label: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.email")
+	}, /* @__PURE__ */ react.default.createElement(require_PisellEmail.default, {
+		placeholder: _pisell_utils.locales.getText("pisell.contact.brief.modal.field.email.placeholder"),
+		mode: "edit"
+	})), extraFields.map((f) => /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: f.key,
+		name: f.key,
+		label: f.label
+	}, /* @__PURE__ */ react.default.createElement(require_PisellSingleLineText.default, {
+		placeholder: "",
+		mode: "edit"
+	})))));
+}
+//#endregion
+exports.ContactFormModal = ContactFormModal;