@pdfme/ui 6.2.1-dev.13 → 6.2.1-dev.18

package/dist/index.js

@@ -85536,7 +85536,7 @@ var measureRichTextLineHeights = (lines, fontSize, lineHeight, fallbackFont) =>
 	return lines.map((line, index) => pt2mm(getLineBoxHeightPt(fontSize, index === 0, line.runs.map((run) => run.fontKitFont), fallbackFont) * lineHeight));
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-DkTVIMNr.js
+//#region ../schemas/dist/dynamicTemplate-BecnZ8Uf.js
 function _typeof$17(o) {
 	"@babel/helpers - typeof";
 	return _typeof$17 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -86035,7 +86035,7 @@ function createSingleTable(body, args) {
 		_cache
 	});
 }
-var HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{6})$";
+var HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$";
 var getBody$1 = (value) => {
 	if (typeof value === "string") return JSON.parse(value || "[]");
 	return value || [];
@@ -86113,7 +86113,7 @@ var getDynamicLayoutForTable = async (value, args) => {
 	};
 };
 //#endregion
-//#region ../schemas/dist/utils-BhkbT1F9.js
+//#region ../schemas/dist/utils-DUdv_Vvk.js
 var convertForPdfLayoutProps = ({ schema, pageHeight, applyRotateTranslate = true }) => {
 	const { width: mmWidth, height: mmHeight, position, rotate, opacity } = schema;
 	const { x: mmX, y: mmY } = position;
@@ -86416,7 +86416,7 @@ var Underline = [["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }], ["line", {
 	y2: "20"
 }]];
 //#endregion
-//#region ../schemas/dist/builtins-BEweDprE.js
+//#region ../schemas/dist/builtins-BID2DSHc.js
 var addUriLinkAnnotation = (arg) => {
 	const { pdfDoc, page, uri, rect, borderWidth = 0 } = arg;
 	const safeUri = normalizeSafeLinkUri(uri);
@@ -87251,7 +87251,6 @@ var propPanel = {
 				title: i18n("schemas.textColor"),
 				type: "string",
 				widget: "color",
-				props: { disabledAlpha: true },
 				rules: [{
 					pattern: HEX_COLOR_PATTERN,
 					message: i18n("validation.hexColor")
@@ -87261,7 +87260,6 @@ var propPanel = {
 				title: i18n("schemas.bgColor"),
 				type: "string",
 				widget: "color",
-				props: { disabledAlpha: true },
 				rules: [{
 					pattern: HEX_COLOR_PATTERN,
 					message: i18n("validation.hexColor")
@@ -87271,7 +87269,6 @@ var propPanel = {
 				title: i18n("schemas.borderColor"),
 				type: "string",
 				widget: "color",
-				props: { disabledAlpha: true },
 				rules: [{
 					pattern: HEX_COLOR_PATTERN,
 					message: i18n("validation.hexColor")
@@ -215745,10 +215742,10 @@ var ButtonGroupWidget = (props) => {
 //#endregion
 //#region src/components/Designer/RightSidebar/DetailView/ColorWidget.tsx
 var DEFAULT_COLOR = "#000000";
-var HEX_COLOR_REGEXP = /^#(?:[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
-var isCommittableColor = (value) => value === "" || HEX_COLOR_REGEXP.test(value);
+var HEX_COLOR_REGEXP = /^#(?:[0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+var FULL_HEX_COLOR_REGEXP = /^#(?:[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
 var ColorWidget = (props) => {
-	const { value, onChange, disabled, disabledAlpha = true, readOnly, className, style } = props;
+	const { value, onChange, disabled, disabledAlpha = false, readOnly, className, style } = props;
 	const [inputValue, setInputValue] = (0, import_react$9.useState)(value ?? "");
 	(0, import_react$9.useEffect)(() => {
 		setInputValue(value ?? "");
@@ -215758,8 +215755,15 @@ var ColorWidget = (props) => {
 		children: value || ""
 	});
 	const commit = (next) => {
+		onChange?.(next === "" ? void 0 : next);
+	};
+	const handleInputChange = (next) => {
 		setInputValue(next);
-		if (isCommittableColor(next)) onChange?.(next === "" ? void 0 : next);
+		if (next === "" || FULL_HEX_COLOR_REGEXP.test(next)) commit(next);
+	};
+	const handleInputCommit = () => {
+		if (HEX_COLOR_REGEXP.test(inputValue)) commit(inputValue);
+		else if (inputValue !== "") setInputValue(value ?? "");
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Space$1.Compact, {
 		style,
@@ -215769,13 +215773,19 @@ var ColorWidget = (props) => {
 			disabled,
 			disabledAlpha,
 			format: "hex",
-			onChange: (color) => commit(color.toHexString())
+			onChange: (color) => {
+				const next = color.toHexString();
+				setInputValue(next);
+				commit(next);
+			}
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input$4, {
 			className,
 			placeholder: DEFAULT_COLOR,
 			disabled,
 			value: inputValue,
-			onChange: (ev) => commit(ev.target.value)
+			onChange: (ev) => handleInputChange(ev.target.value),
+			onBlur: handleInputCommit,
+			onPressEnter: handleInputCommit
 		})]
 	});
 };