@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260919084840 → 0.8.1-dev.20260919091004

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/{DataBindingControls-CHXAZSAC.mjs → DataBindingControls-GPFLWLRX.mjs} +1 -1
  2. package/dist/{DataBindingControls-2UETIUJJ.mjs → DataBindingControls-QZRQFELZ.mjs} +1 -1
  3. package/dist/{InputControlClient-M4D4WJVQ.mjs → InputControlClient-3JFQC3VE.mjs} +73 -31
  4. package/dist/{InputControlClient-H7BLOV3P.mjs → InputControlClient-QARWKURU.mjs} +1 -1
  5. package/dist/{chunk-HVJZPJGV.mjs → chunk-ISZQ3PIX.mjs} +1 -1
  6. package/dist/{chunk-OC3VBCRR.mjs → chunk-L6OQILUY.mjs} +73 -31
  7. package/dist/index.js +74 -32
  8. package/dist/index.mjs +3 -3
  9. package/dist/server.js +74 -32
  10. package/dist/server.mjs +1 -1
  11. package/package.json +1 -1
package/dist/{DataBindingControls-CHXAZSAC.mjs → DataBindingControls-GPFLWLRX.mjs} RENAMED
@@ -3,7 +3,7 @@
3
3
  "use client";
4
4
  import {
5
5
  InputControl_default
6
- } from "./chunk-HVJZPJGV.mjs";
6
+ } from "./chunk-ISZQ3PIX.mjs";
7
7
  import {
8
8
  Button_default
9
9
  } from "./chunk-LSKD5U3S.mjs";
package/dist/{DataBindingControls-2UETIUJJ.mjs → DataBindingControls-QZRQFELZ.mjs} RENAMED
@@ -13,7 +13,7 @@ import { useRouter } from "next/navigation";
13
13
 
14
14
  // src/components/controls/edit/InputControl.tsx
15
15
  import dynamic from "next/dynamic";
16
- var InputControl = dynamic(() => import("./InputControlClient-M4D4WJVQ.mjs"), {
16
+ var InputControl = dynamic(() => import("./InputControlClient-3JFQC3VE.mjs"), {
17
17
  ssr: false
18
18
  });
19
19
  var InputControl_default = InputControl;
package/dist/{InputControlClient-M4D4WJVQ.mjs → InputControlClient-3JFQC3VE.mjs} RENAMED
@@ -466,8 +466,10 @@ var NumberInput_default = NumberInput;
466
466
  import React8 from "react";
467
467
  import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
468
468
  var CheckboxInput = (props) => {
469
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
469
470
  const textChangeHandler = (event) => {
470
- let text = event.target.checked;
471
+ if (isReadOnly) return;
472
+ const text = event.target.checked;
471
473
  if (props.callback !== void 0) {
472
474
  props.callback({
473
475
  name: props.name,
@@ -478,20 +480,21 @@ var CheckboxInput = (props) => {
478
480
  }
479
481
  };
480
482
  let value = false;
481
- if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
483
+ if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
482
484
  value = true;
483
485
  }
484
- return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: "mb-1", children: [
486
+ return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
485
487
  props?.attributes?.label && /* @__PURE__ */ jsxs8(Fragment, { children: [
486
488
  /* @__PURE__ */ jsx8(
487
489
  "label",
488
490
  {
489
491
  htmlFor: props.name,
490
- className: "inline-block text-sm font-medium",
492
+ className: "inline-block text-sm font-medium pb-1",
491
493
  children: props.attributes.label
492
494
  }
493
495
  ),
494
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak", children: "*" })
496
+ " ",
497
+ props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak !bg-transparent", children: "*" })
495
498
  ] }),
496
499
  /* @__PURE__ */ jsx8(
497
500
  "input",
@@ -501,13 +504,23 @@ var CheckboxInput = (props) => {
501
504
  id: props.name,
502
505
  checked: value,
503
506
  onChange: textChangeHandler,
504
- required: props?.attributes?.required,
507
+ onBlur: props?.onBlur,
508
+ autoFocus: props?.attributes?.autoFocus,
509
+ required: !isReadOnly && Boolean(props?.attributes?.required),
505
510
  placeholder: props?.attributes?.placeholder,
506
511
  maxLength: props?.attributes?.maxLength,
507
512
  pattern: props?.attributes?.pattern,
508
- disabled: props?.attributes?.readOnly,
513
+ disabled: isReadOnly,
514
+ readOnly: isReadOnly,
515
+ tabIndex: isReadOnly ? -1 : void 0,
516
+ onClick: (e) => {
517
+ if (isReadOnly) {
518
+ e.preventDefault();
519
+ e.stopPropagation();
520
+ }
521
+ },
509
522
  minLength: props?.attributes?.minLength,
510
- className: "peer mt-1 py-1.5 block rounded shadow-sm\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n "
523
+ className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
511
524
  }
512
525
  ),
513
526
  /* @__PURE__ */ jsx8("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -636,11 +649,21 @@ var DateTimeInput_default = DateTimeInput;
636
649
  import React11, { useEffect as useEffect2 } from "react";
637
650
  import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
638
651
  var DEFAULT_COLOR = "#3b82f6";
652
+ var isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
653
+ var normalizeColor = (val) => {
654
+ if (isValidHex(val)) {
655
+ return val.trim();
656
+ }
657
+ return DEFAULT_COLOR;
658
+ };
639
659
  var ColorInput = (props) => {
640
- const [color, setColor] = React11.useState(DEFAULT_COLOR);
660
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
661
+ const [color, setColor] = React11.useState(
662
+ () => normalizeColor(props.value)
663
+ );
641
664
  useEffect2(() => {
642
665
  const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
643
- if (!hasValue && props.callback && !props.attributes?.readOnly) {
666
+ if (!hasValue && props.callback && !isReadOnly) {
644
667
  props.callback({
645
668
  name: props.name,
646
669
  value: DEFAULT_COLOR,
@@ -648,15 +671,16 @@ var ColorInput = (props) => {
648
671
  groupKey: props.groupKey
649
672
  });
650
673
  }
651
- }, []);
674
+ }, [isReadOnly]);
652
675
  useEffect2(() => {
653
- if (props.value !== void 0 && props.value !== null) {
676
+ if (props.value !== void 0 && props.value !== null && props.value !== "") {
654
677
  if (typeof props.value === "string") {
655
- setColor(props.value);
678
+ setColor(normalizeColor(props.value));
656
679
  }
657
680
  }
658
681
  }, [props.value]);
659
682
  const handleColorChange = (event) => {
683
+ if (isReadOnly) return;
660
684
  const newColor = event.target.value;
661
685
  setColor(newColor);
662
686
  if (props.callback) {
@@ -668,38 +692,50 @@ var ColorInput = (props) => {
668
692
  });
669
693
  }
670
694
  };
671
- return /* @__PURE__ */ jsxs11("label", { className: "block mb-1", children: [
672
- /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
695
+ const displayColor = normalizeColor(color || props.value);
696
+ return /* @__PURE__ */ jsx11(React11.Fragment, { children: /* @__PURE__ */ jsxs11("label", { className: `block ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
697
+ props?.attributes?.label && /* @__PURE__ */ jsx11("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
673
698
  " ",
674
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx11("span", { className: "bg-error-weak", children: "*" }),
699
+ props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx11("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
675
700
  /* @__PURE__ */ jsx11(
676
701
  "input",
677
702
  {
678
703
  type: "color",
679
704
  name: props.name,
680
- title: color,
705
+ title: displayColor,
681
706
  id: props.name,
682
- value: color,
707
+ value: displayColor,
683
708
  onChange: handleColorChange,
684
- required: props?.attributes?.required,
685
- disabled: props?.attributes?.readOnly,
686
- className: `peer block cursor-pointer`,
709
+ onBlur: props?.onBlur,
710
+ autoFocus: props?.attributes?.autoFocus,
711
+ required: !isReadOnly && Boolean(props?.attributes?.required),
712
+ disabled: isReadOnly,
713
+ readOnly: isReadOnly,
714
+ tabIndex: isReadOnly ? -1 : void 0,
715
+ onClick: (e) => {
716
+ if (isReadOnly) {
717
+ e.preventDefault();
718
+ e.stopPropagation();
719
+ }
720
+ },
721
+ className: `peer block rounded ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`,
687
722
  style: {
688
723
  width: "78px",
689
724
  height: "33px",
690
725
  padding: 0,
691
726
  margin: 0,
692
- border: "none",
727
+ border: isReadOnly ? "1px solid var(--border, #e2e8f0)" : "1px solid #e2e8f0",
693
728
  borderRadius: "5px",
694
729
  overflow: "hidden",
695
- backgroundColor: "transparent",
696
- appearance: "none"
697
- // WebkitAppearance: "none",
730
+ backgroundColor: isReadOnly ? "var(--bg-color, transparent)" : "transparent",
731
+ appearance: "none",
732
+ cursor: isReadOnly ? "not-allowed" : "pointer",
733
+ pointerEvents: isReadOnly ? "none" : "auto"
698
734
  }
699
735
  }
700
736
  ),
701
737
  /* @__PURE__ */ jsx11("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
702
- ] });
738
+ ] }) });
703
739
  };
704
740
  var ColorInput_default = ColorInput;
705
741
 
@@ -1162,7 +1198,8 @@ var EmailInput = (props) => {
1162
1198
  props.callback({
1163
1199
  name: props.name,
1164
1200
  value: text,
1165
- index: props.index
1201
+ index: props.index,
1202
+ groupKey: props.groupKey
1166
1203
  });
1167
1204
  }
1168
1205
  };
@@ -1170,8 +1207,8 @@ var EmailInput = (props) => {
1170
1207
  if (props.value !== void 0 && props.value !== null) {
1171
1208
  value = props.value;
1172
1209
  }
1173
- return /* @__PURE__ */ jsx14(React14.Fragment, { children: /* @__PURE__ */ jsxs14("label", { className: "block mb-1", children: [
1174
- /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium text-slate-700", children: props?.attributes?.label }),
1210
+ return /* @__PURE__ */ jsx14(React14.Fragment, { children: /* @__PURE__ */ jsxs14("label", { className: "block", children: [
1211
+ props?.attributes?.label && /* @__PURE__ */ jsx14("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
1175
1212
  " ",
1176
1213
  props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx14("span", { className: "bg-error-weak", children: "*" }),
1177
1214
  /* @__PURE__ */ jsx14(
@@ -1182,15 +1219,20 @@ var EmailInput = (props) => {
1182
1219
  id: props.name,
1183
1220
  value,
1184
1221
  onChange: textChangeHandler,
1222
+ onBlur: props?.onBlur,
1223
+ autoFocus: props?.attributes?.autoFocus,
1185
1224
  required: props?.attributes?.required,
1186
1225
  placeholder: props?.attributes?.placeholder,
1187
1226
  maxLength: props?.attributes?.maxLength,
1227
+ pattern: props?.attributes?.pattern,
1188
1228
  disabled: props?.attributes?.readOnly,
1189
1229
  minLength: props?.attributes?.minLength,
1190
- className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n transition-all duration-500 ease-in-out"
1230
+ className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
1231
+ ${props?.inputClasses ? props.inputClasses : ``}
1232
+ `
1191
1233
  }
1192
1234
  ),
1193
- /* @__PURE__ */ jsx14("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
1235
+ /* @__PURE__ */ jsx14("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
1194
1236
  ] }) });
1195
1237
  };
1196
1238
  var EmailInput_default = EmailInput;
package/dist/{InputControlClient-H7BLOV3P.mjs → InputControlClient-QARWKURU.mjs} RENAMED
@@ -18,7 +18,7 @@ import {
18
18
  SelectWithSearchInput_default,
19
19
  Select_default,
20
20
  TimeInput_default
21
- } from "./chunk-OC3VBCRR.mjs";
21
+ } from "./chunk-L6OQILUY.mjs";
22
22
  import {
23
23
  Hyperlink,
24
24
  Icon_default
package/dist/{chunk-HVJZPJGV.mjs → chunk-ISZQ3PIX.mjs} RENAMED
@@ -3,7 +3,7 @@
3
3
 
4
4
  // src/components/controls/edit/InputControl.tsx
5
5
  import dynamic from "next/dynamic";
6
- var InputControl = dynamic(() => import("./InputControlClient-H7BLOV3P.mjs"), {
6
+ var InputControl = dynamic(() => import("./InputControlClient-QARWKURU.mjs"), {
7
7
  ssr: false
8
8
  });
9
9
  var InputControl_default = InputControl;
package/dist/{chunk-OC3VBCRR.mjs → chunk-L6OQILUY.mjs} RENAMED
@@ -450,8 +450,10 @@ var NumberInput_default = NumberInput;
450
450
  import React8 from "react";
451
451
  import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
452
452
  var CheckboxInput = (props) => {
453
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
453
454
  const textChangeHandler = (event) => {
454
- let text = event.target.checked;
455
+ if (isReadOnly) return;
456
+ const text = event.target.checked;
455
457
  if (props.callback !== void 0) {
456
458
  props.callback({
457
459
  name: props.name,
@@ -462,20 +464,21 @@ var CheckboxInput = (props) => {
462
464
  }
463
465
  };
464
466
  let value = false;
465
- if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
467
+ if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
466
468
  value = true;
467
469
  }
468
- return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: "mb-1", children: [
470
+ return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
469
471
  props?.attributes?.label && /* @__PURE__ */ jsxs8(Fragment, { children: [
470
472
  /* @__PURE__ */ jsx8(
471
473
  "label",
472
474
  {
473
475
  htmlFor: props.name,
474
- className: "inline-block text-sm font-medium",
476
+ className: "inline-block text-sm font-medium pb-1",
475
477
  children: props.attributes.label
476
478
  }
477
479
  ),
478
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak", children: "*" })
480
+ " ",
481
+ props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak !bg-transparent", children: "*" })
479
482
  ] }),
480
483
  /* @__PURE__ */ jsx8(
481
484
  "input",
@@ -485,13 +488,23 @@ var CheckboxInput = (props) => {
485
488
  id: props.name,
486
489
  checked: value,
487
490
  onChange: textChangeHandler,
488
- required: props?.attributes?.required,
491
+ onBlur: props?.onBlur,
492
+ autoFocus: props?.attributes?.autoFocus,
493
+ required: !isReadOnly && Boolean(props?.attributes?.required),
489
494
  placeholder: props?.attributes?.placeholder,
490
495
  maxLength: props?.attributes?.maxLength,
491
496
  pattern: props?.attributes?.pattern,
492
- disabled: props?.attributes?.readOnly,
497
+ disabled: isReadOnly,
498
+ readOnly: isReadOnly,
499
+ tabIndex: isReadOnly ? -1 : void 0,
500
+ onClick: (e) => {
501
+ if (isReadOnly) {
502
+ e.preventDefault();
503
+ e.stopPropagation();
504
+ }
505
+ },
493
506
  minLength: props?.attributes?.minLength,
494
- className: "peer mt-1 py-1.5 block rounded shadow-sm\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n "
507
+ className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
495
508
  }
496
509
  ),
497
510
  /* @__PURE__ */ jsx8("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -620,11 +633,21 @@ var DateTimeInput_default = DateTimeInput;
620
633
  import React11, { useEffect as useEffect2 } from "react";
621
634
  import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
622
635
  var DEFAULT_COLOR = "#3b82f6";
636
+ var isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
637
+ var normalizeColor = (val) => {
638
+ if (isValidHex(val)) {
639
+ return val.trim();
640
+ }
641
+ return DEFAULT_COLOR;
642
+ };
623
643
  var ColorInput = (props) => {
624
- const [color, setColor] = React11.useState(DEFAULT_COLOR);
644
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
645
+ const [color, setColor] = React11.useState(
646
+ () => normalizeColor(props.value)
647
+ );
625
648
  useEffect2(() => {
626
649
  const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
627
- if (!hasValue && props.callback && !props.attributes?.readOnly) {
650
+ if (!hasValue && props.callback && !isReadOnly) {
628
651
  props.callback({
629
652
  name: props.name,
630
653
  value: DEFAULT_COLOR,
@@ -632,15 +655,16 @@ var ColorInput = (props) => {
632
655
  groupKey: props.groupKey
633
656
  });
634
657
  }
635
- }, []);
658
+ }, [isReadOnly]);
636
659
  useEffect2(() => {
637
- if (props.value !== void 0 && props.value !== null) {
660
+ if (props.value !== void 0 && props.value !== null && props.value !== "") {
638
661
  if (typeof props.value === "string") {
639
- setColor(props.value);
662
+ setColor(normalizeColor(props.value));
640
663
  }
641
664
  }
642
665
  }, [props.value]);
643
666
  const handleColorChange = (event) => {
667
+ if (isReadOnly) return;
644
668
  const newColor = event.target.value;
645
669
  setColor(newColor);
646
670
  if (props.callback) {
@@ -652,38 +676,50 @@ var ColorInput = (props) => {
652
676
  });
653
677
  }
654
678
  };
655
- return /* @__PURE__ */ jsxs11("label", { className: "block mb-1", children: [
656
- /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
679
+ const displayColor = normalizeColor(color || props.value);
680
+ return /* @__PURE__ */ jsx11(React11.Fragment, { children: /* @__PURE__ */ jsxs11("label", { className: `block ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
681
+ props?.attributes?.label && /* @__PURE__ */ jsx11("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
657
682
  " ",
658
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx11("span", { className: "bg-error-weak", children: "*" }),
683
+ props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx11("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
659
684
  /* @__PURE__ */ jsx11(
660
685
  "input",
661
686
  {
662
687
  type: "color",
663
688
  name: props.name,
664
- title: color,
689
+ title: displayColor,
665
690
  id: props.name,
666
- value: color,
691
+ value: displayColor,
667
692
  onChange: handleColorChange,
668
- required: props?.attributes?.required,
669
- disabled: props?.attributes?.readOnly,
670
- className: `peer block cursor-pointer`,
693
+ onBlur: props?.onBlur,
694
+ autoFocus: props?.attributes?.autoFocus,
695
+ required: !isReadOnly && Boolean(props?.attributes?.required),
696
+ disabled: isReadOnly,
697
+ readOnly: isReadOnly,
698
+ tabIndex: isReadOnly ? -1 : void 0,
699
+ onClick: (e) => {
700
+ if (isReadOnly) {
701
+ e.preventDefault();
702
+ e.stopPropagation();
703
+ }
704
+ },
705
+ className: `peer block rounded ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`,
671
706
  style: {
672
707
  width: "78px",
673
708
  height: "33px",
674
709
  padding: 0,
675
710
  margin: 0,
676
- border: "none",
711
+ border: isReadOnly ? "1px solid var(--border, #e2e8f0)" : "1px solid #e2e8f0",
677
712
  borderRadius: "5px",
678
713
  overflow: "hidden",
679
- backgroundColor: "transparent",
680
- appearance: "none"
681
- // WebkitAppearance: "none",
714
+ backgroundColor: isReadOnly ? "var(--bg-color, transparent)" : "transparent",
715
+ appearance: "none",
716
+ cursor: isReadOnly ? "not-allowed" : "pointer",
717
+ pointerEvents: isReadOnly ? "none" : "auto"
682
718
  }
683
719
  }
684
720
  ),
685
721
  /* @__PURE__ */ jsx11("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
686
- ] });
722
+ ] }) });
687
723
  };
688
724
  var ColorInput_default = ColorInput;
689
725
 
@@ -894,7 +930,8 @@ var EmailInput = (props) => {
894
930
  props.callback({
895
931
  name: props.name,
896
932
  value: text,
897
- index: props.index
933
+ index: props.index,
934
+ groupKey: props.groupKey
898
935
  });
899
936
  }
900
937
  };
@@ -902,8 +939,8 @@ var EmailInput = (props) => {
902
939
  if (props.value !== void 0 && props.value !== null) {
903
940
  value = props.value;
904
941
  }
905
- return /* @__PURE__ */ jsx13(React13.Fragment, { children: /* @__PURE__ */ jsxs13("label", { className: "block mb-1", children: [
906
- /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-slate-700", children: props?.attributes?.label }),
942
+ return /* @__PURE__ */ jsx13(React13.Fragment, { children: /* @__PURE__ */ jsxs13("label", { className: "block", children: [
943
+ props?.attributes?.label && /* @__PURE__ */ jsx13("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
907
944
  " ",
908
945
  props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx13("span", { className: "bg-error-weak", children: "*" }),
909
946
  /* @__PURE__ */ jsx13(
@@ -914,15 +951,20 @@ var EmailInput = (props) => {
914
951
  id: props.name,
915
952
  value,
916
953
  onChange: textChangeHandler,
954
+ onBlur: props?.onBlur,
955
+ autoFocus: props?.attributes?.autoFocus,
917
956
  required: props?.attributes?.required,
918
957
  placeholder: props?.attributes?.placeholder,
919
958
  maxLength: props?.attributes?.maxLength,
959
+ pattern: props?.attributes?.pattern,
920
960
  disabled: props?.attributes?.readOnly,
921
961
  minLength: props?.attributes?.minLength,
922
- className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n transition-all duration-500 ease-in-out"
962
+ className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
963
+ ${props?.inputClasses ? props.inputClasses : ``}
964
+ `
923
965
  }
924
966
  ),
925
- /* @__PURE__ */ jsx13("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
967
+ /* @__PURE__ */ jsx13("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
926
968
  ] }) });
927
969
  };
928
970
  var EmailInput_default = EmailInput;
package/dist/index.js CHANGED
@@ -2684,8 +2684,10 @@ var init_CheckboxInput = __esm({
2684
2684
  import_react30 = __toESM(require("react"));
2685
2685
  import_jsx_runtime37 = require("react/jsx-runtime");
2686
2686
  CheckboxInput = (props) => {
2687
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
2687
2688
  const textChangeHandler = (event) => {
2688
- let text = event.target.checked;
2689
+ if (isReadOnly) return;
2690
+ const text = event.target.checked;
2689
2691
  if (props.callback !== void 0) {
2690
2692
  props.callback({
2691
2693
  name: props.name,
@@ -2696,20 +2698,21 @@ var init_CheckboxInput = __esm({
2696
2698
  }
2697
2699
  };
2698
2700
  let value = false;
2699
- if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
2701
+ if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
2700
2702
  value = true;
2701
2703
  }
2702
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react30.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mb-1", children: [
2704
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react30.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
2703
2705
  props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
2704
2706
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2705
2707
  "label",
2706
2708
  {
2707
2709
  htmlFor: props.name,
2708
- className: "inline-block text-sm font-medium",
2710
+ className: "inline-block text-sm font-medium pb-1",
2709
2711
  children: props.attributes.label
2710
2712
  }
2711
2713
  ),
2712
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-error-weak", children: "*" })
2714
+ " ",
2715
+ props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" })
2713
2716
  ] }),
2714
2717
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2715
2718
  "input",
@@ -2719,13 +2722,23 @@ var init_CheckboxInput = __esm({
2719
2722
  id: props.name,
2720
2723
  checked: value,
2721
2724
  onChange: textChangeHandler,
2722
- required: props?.attributes?.required,
2725
+ onBlur: props?.onBlur,
2726
+ autoFocus: props?.attributes?.autoFocus,
2727
+ required: !isReadOnly && Boolean(props?.attributes?.required),
2723
2728
  placeholder: props?.attributes?.placeholder,
2724
2729
  maxLength: props?.attributes?.maxLength,
2725
2730
  pattern: props?.attributes?.pattern,
2726
- disabled: props?.attributes?.readOnly,
2731
+ disabled: isReadOnly,
2732
+ readOnly: isReadOnly,
2733
+ tabIndex: isReadOnly ? -1 : void 0,
2734
+ onClick: (e) => {
2735
+ if (isReadOnly) {
2736
+ e.preventDefault();
2737
+ e.stopPropagation();
2738
+ }
2739
+ },
2727
2740
  minLength: props?.attributes?.minLength,
2728
- className: "peer mt-1 py-1.5 block rounded shadow-sm\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n "
2741
+ className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
2729
2742
  }
2730
2743
  ),
2731
2744
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -2865,18 +2878,28 @@ var init_DateTimeInput = __esm({
2865
2878
  });
2866
2879
 
2867
2880
  // src/components/controls/edit/ColorInput.tsx
2868
- var import_react33, import_jsx_runtime40, DEFAULT_COLOR, ColorInput, ColorInput_default;
2881
+ var import_react33, import_jsx_runtime40, DEFAULT_COLOR, isValidHex, normalizeColor, ColorInput, ColorInput_default;
2869
2882
  var init_ColorInput = __esm({
2870
2883
  "src/components/controls/edit/ColorInput.tsx"() {
2871
2884
  "use strict";
2872
2885
  import_react33 = __toESM(require("react"));
2873
2886
  import_jsx_runtime40 = require("react/jsx-runtime");
2874
2887
  DEFAULT_COLOR = "#3b82f6";
2888
+ isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
2889
+ normalizeColor = (val) => {
2890
+ if (isValidHex(val)) {
2891
+ return val.trim();
2892
+ }
2893
+ return DEFAULT_COLOR;
2894
+ };
2875
2895
  ColorInput = (props) => {
2876
- const [color, setColor] = import_react33.default.useState(DEFAULT_COLOR);
2896
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
2897
+ const [color, setColor] = import_react33.default.useState(
2898
+ () => normalizeColor(props.value)
2899
+ );
2877
2900
  (0, import_react33.useEffect)(() => {
2878
2901
  const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
2879
- if (!hasValue && props.callback && !props.attributes?.readOnly) {
2902
+ if (!hasValue && props.callback && !isReadOnly) {
2880
2903
  props.callback({
2881
2904
  name: props.name,
2882
2905
  value: DEFAULT_COLOR,
@@ -2884,15 +2907,16 @@ var init_ColorInput = __esm({
2884
2907
  groupKey: props.groupKey
2885
2908
  });
2886
2909
  }
2887
- }, []);
2910
+ }, [isReadOnly]);
2888
2911
  (0, import_react33.useEffect)(() => {
2889
- if (props.value !== void 0 && props.value !== null) {
2912
+ if (props.value !== void 0 && props.value !== null && props.value !== "") {
2890
2913
  if (typeof props.value === "string") {
2891
- setColor(props.value);
2914
+ setColor(normalizeColor(props.value));
2892
2915
  }
2893
2916
  }
2894
2917
  }, [props.value]);
2895
2918
  const handleColorChange = (event) => {
2919
+ if (isReadOnly) return;
2896
2920
  const newColor = event.target.value;
2897
2921
  setColor(newColor);
2898
2922
  if (props.callback) {
@@ -2904,38 +2928,50 @@ var init_ColorInput = __esm({
2904
2928
  });
2905
2929
  }
2906
2930
  };
2907
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: "block mb-1", children: [
2908
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
2931
+ const displayColor = normalizeColor(color || props.value);
2932
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react33.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: `block ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
2933
+ props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
2909
2934
  " ",
2910
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "bg-error-weak", children: "*" }),
2935
+ props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
2911
2936
  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
2912
2937
  "input",
2913
2938
  {
2914
2939
  type: "color",
2915
2940
  name: props.name,
2916
- title: color,
2941
+ title: displayColor,
2917
2942
  id: props.name,
2918
- value: color,
2943
+ value: displayColor,
2919
2944
  onChange: handleColorChange,
2920
- required: props?.attributes?.required,
2921
- disabled: props?.attributes?.readOnly,
2922
- className: `peer block cursor-pointer`,
2945
+ onBlur: props?.onBlur,
2946
+ autoFocus: props?.attributes?.autoFocus,
2947
+ required: !isReadOnly && Boolean(props?.attributes?.required),
2948
+ disabled: isReadOnly,
2949
+ readOnly: isReadOnly,
2950
+ tabIndex: isReadOnly ? -1 : void 0,
2951
+ onClick: (e) => {
2952
+ if (isReadOnly) {
2953
+ e.preventDefault();
2954
+ e.stopPropagation();
2955
+ }
2956
+ },
2957
+ className: `peer block rounded ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`,
2923
2958
  style: {
2924
2959
  width: "78px",
2925
2960
  height: "33px",
2926
2961
  padding: 0,
2927
2962
  margin: 0,
2928
- border: "none",
2963
+ border: isReadOnly ? "1px solid var(--border, #e2e8f0)" : "1px solid #e2e8f0",
2929
2964
  borderRadius: "5px",
2930
2965
  overflow: "hidden",
2931
- backgroundColor: "transparent",
2932
- appearance: "none"
2933
- // WebkitAppearance: "none",
2966
+ backgroundColor: isReadOnly ? "var(--bg-color, transparent)" : "transparent",
2967
+ appearance: "none",
2968
+ cursor: isReadOnly ? "not-allowed" : "pointer",
2969
+ pointerEvents: isReadOnly ? "none" : "auto"
2934
2970
  }
2935
2971
  }
2936
2972
  ),
2937
2973
  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
2938
- ] });
2974
+ ] }) });
2939
2975
  };
2940
2976
  ColorInput_default = ColorInput;
2941
2977
  }
@@ -3709,7 +3745,8 @@ var init_EmailInput = __esm({
3709
3745
  props.callback({
3710
3746
  name: props.name,
3711
3747
  value: text,
3712
- index: props.index
3748
+ index: props.index,
3749
+ groupKey: props.groupKey
3713
3750
  });
3714
3751
  }
3715
3752
  };
@@ -3717,8 +3754,8 @@ var init_EmailInput = __esm({
3717
3754
  if (props.value !== void 0 && props.value !== null) {
3718
3755
  value = props.value;
3719
3756
  }
3720
- return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react39.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("label", { className: "block mb-1", children: [
3721
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium text-slate-700", children: props?.attributes?.label }),
3757
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react39.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("label", { className: "block", children: [
3758
+ props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
3722
3759
  " ",
3723
3760
  props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "bg-error-weak", children: "*" }),
3724
3761
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -3729,15 +3766,20 @@ var init_EmailInput = __esm({
3729
3766
  id: props.name,
3730
3767
  value,
3731
3768
  onChange: textChangeHandler,
3769
+ onBlur: props?.onBlur,
3770
+ autoFocus: props?.attributes?.autoFocus,
3732
3771
  required: props?.attributes?.required,
3733
3772
  placeholder: props?.attributes?.placeholder,
3734
3773
  maxLength: props?.attributes?.maxLength,
3774
+ pattern: props?.attributes?.pattern,
3735
3775
  disabled: props?.attributes?.readOnly,
3736
3776
  minLength: props?.attributes?.minLength,
3737
- className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n transition-all duration-500 ease-in-out"
3777
+ className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
3778
+ ${props?.inputClasses ? props.inputClasses : ``}
3779
+ `
3738
3780
  }
3739
3781
  ),
3740
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
3782
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
3741
3783
  ] }) });
3742
3784
  };
3743
3785
  EmailInput_default = EmailInput;
package/dist/index.mjs CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  } from "./chunk-SNDGEYWZ.mjs";
9
9
  import {
10
10
  InputControl_default
11
- } from "./chunk-HVJZPJGV.mjs";
11
+ } from "./chunk-ISZQ3PIX.mjs";
12
12
  import "./chunk-JDX47MFV.mjs";
13
13
  import {
14
14
  CheckboxInput_default,
@@ -27,7 +27,7 @@ import {
27
27
  SelectWithSearchInput_default,
28
28
  Select_default,
29
29
  TimeInput_default
30
- } from "./chunk-OC3VBCRR.mjs";
30
+ } from "./chunk-L6OQILUY.mjs";
31
31
  import {
32
32
  Hyperlink,
33
33
  Icon_default
@@ -2391,7 +2391,7 @@ var GoogleMapNode_default = GoogleMapNode;
2391
2391
  // src/components/pageRenderingEngine/nodes/DivContainer.tsx
2392
2392
  import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
2393
2393
  var Pagination = dynamic13(() => import("./Pagination-BDWRNSFB.mjs"), { ssr: true });
2394
- var DataBindingControls = dynamic13(() => import("./DataBindingControls-CHXAZSAC.mjs"), {
2394
+ var DataBindingControls = dynamic13(() => import("./DataBindingControls-GPFLWLRX.mjs"), {
2395
2395
  ssr: true
2396
2396
  });
2397
2397
  var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {
package/dist/server.js CHANGED
@@ -4163,8 +4163,10 @@ var init_CheckboxInput = __esm({
4163
4163
  import_react46 = __toESM(require("react"));
4164
4164
  import_jsx_runtime71 = require("react/jsx-runtime");
4165
4165
  CheckboxInput = (props) => {
4166
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
4166
4167
  const textChangeHandler = (event) => {
4167
- let text = event.target.checked;
4168
+ if (isReadOnly) return;
4169
+ const text = event.target.checked;
4168
4170
  if (props.callback !== void 0) {
4169
4171
  props.callback({
4170
4172
  name: props.name,
@@ -4175,20 +4177,21 @@ var init_CheckboxInput = __esm({
4175
4177
  }
4176
4178
  };
4177
4179
  let value = false;
4178
- if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
4180
+ if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
4179
4181
  value = true;
4180
4182
  }
4181
- return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react46.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mb-1", children: [
4183
+ return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react46.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
4182
4184
  props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
4183
4185
  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4184
4186
  "label",
4185
4187
  {
4186
4188
  htmlFor: props.name,
4187
- className: "inline-block text-sm font-medium",
4189
+ className: "inline-block text-sm font-medium pb-1",
4188
4190
  children: props.attributes.label
4189
4191
  }
4190
4192
  ),
4191
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "bg-error-weak", children: "*" })
4193
+ " ",
4194
+ props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" })
4192
4195
  ] }),
4193
4196
  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4194
4197
  "input",
@@ -4198,13 +4201,23 @@ var init_CheckboxInput = __esm({
4198
4201
  id: props.name,
4199
4202
  checked: value,
4200
4203
  onChange: textChangeHandler,
4201
- required: props?.attributes?.required,
4204
+ onBlur: props?.onBlur,
4205
+ autoFocus: props?.attributes?.autoFocus,
4206
+ required: !isReadOnly && Boolean(props?.attributes?.required),
4202
4207
  placeholder: props?.attributes?.placeholder,
4203
4208
  maxLength: props?.attributes?.maxLength,
4204
4209
  pattern: props?.attributes?.pattern,
4205
- disabled: props?.attributes?.readOnly,
4210
+ disabled: isReadOnly,
4211
+ readOnly: isReadOnly,
4212
+ tabIndex: isReadOnly ? -1 : void 0,
4213
+ onClick: (e) => {
4214
+ if (isReadOnly) {
4215
+ e.preventDefault();
4216
+ e.stopPropagation();
4217
+ }
4218
+ },
4206
4219
  minLength: props?.attributes?.minLength,
4207
- className: "peer mt-1 py-1.5 block rounded shadow-sm\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n "
4220
+ className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
4208
4221
  }
4209
4222
  ),
4210
4223
  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -4344,18 +4357,28 @@ var init_DateTimeInput = __esm({
4344
4357
  });
4345
4358
 
4346
4359
  // src/components/controls/edit/ColorInput.tsx
4347
- var import_react49, import_jsx_runtime74, DEFAULT_COLOR, ColorInput, ColorInput_default;
4360
+ var import_react49, import_jsx_runtime74, DEFAULT_COLOR, isValidHex, normalizeColor, ColorInput, ColorInput_default;
4348
4361
  var init_ColorInput = __esm({
4349
4362
  "src/components/controls/edit/ColorInput.tsx"() {
4350
4363
  "use strict";
4351
4364
  import_react49 = __toESM(require("react"));
4352
4365
  import_jsx_runtime74 = require("react/jsx-runtime");
4353
4366
  DEFAULT_COLOR = "#3b82f6";
4367
+ isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
4368
+ normalizeColor = (val) => {
4369
+ if (isValidHex(val)) {
4370
+ return val.trim();
4371
+ }
4372
+ return DEFAULT_COLOR;
4373
+ };
4354
4374
  ColorInput = (props) => {
4355
- const [color, setColor] = import_react49.default.useState(DEFAULT_COLOR);
4375
+ const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
4376
+ const [color, setColor] = import_react49.default.useState(
4377
+ () => normalizeColor(props.value)
4378
+ );
4356
4379
  (0, import_react49.useEffect)(() => {
4357
4380
  const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
4358
- if (!hasValue && props.callback && !props.attributes?.readOnly) {
4381
+ if (!hasValue && props.callback && !isReadOnly) {
4359
4382
  props.callback({
4360
4383
  name: props.name,
4361
4384
  value: DEFAULT_COLOR,
@@ -4363,15 +4386,16 @@ var init_ColorInput = __esm({
4363
4386
  groupKey: props.groupKey
4364
4387
  });
4365
4388
  }
4366
- }, []);
4389
+ }, [isReadOnly]);
4367
4390
  (0, import_react49.useEffect)(() => {
4368
- if (props.value !== void 0 && props.value !== null) {
4391
+ if (props.value !== void 0 && props.value !== null && props.value !== "") {
4369
4392
  if (typeof props.value === "string") {
4370
- setColor(props.value);
4393
+ setColor(normalizeColor(props.value));
4371
4394
  }
4372
4395
  }
4373
4396
  }, [props.value]);
4374
4397
  const handleColorChange = (event) => {
4398
+ if (isReadOnly) return;
4375
4399
  const newColor = event.target.value;
4376
4400
  setColor(newColor);
4377
4401
  if (props.callback) {
@@ -4383,38 +4407,50 @@ var init_ColorInput = __esm({
4383
4407
  });
4384
4408
  }
4385
4409
  };
4386
- return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("label", { className: "block mb-1", children: [
4387
- /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
4410
+ const displayColor = normalizeColor(color || props.value);
4411
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("label", { className: `block ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
4412
+ props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
4388
4413
  " ",
4389
- props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "bg-error-weak", children: "*" }),
4414
+ props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
4390
4415
  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
4391
4416
  "input",
4392
4417
  {
4393
4418
  type: "color",
4394
4419
  name: props.name,
4395
- title: color,
4420
+ title: displayColor,
4396
4421
  id: props.name,
4397
- value: color,
4422
+ value: displayColor,
4398
4423
  onChange: handleColorChange,
4399
- required: props?.attributes?.required,
4400
- disabled: props?.attributes?.readOnly,
4401
- className: `peer block cursor-pointer`,
4424
+ onBlur: props?.onBlur,
4425
+ autoFocus: props?.attributes?.autoFocus,
4426
+ required: !isReadOnly && Boolean(props?.attributes?.required),
4427
+ disabled: isReadOnly,
4428
+ readOnly: isReadOnly,
4429
+ tabIndex: isReadOnly ? -1 : void 0,
4430
+ onClick: (e) => {
4431
+ if (isReadOnly) {
4432
+ e.preventDefault();
4433
+ e.stopPropagation();
4434
+ }
4435
+ },
4436
+ className: `peer block rounded ${isReadOnly ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`,
4402
4437
  style: {
4403
4438
  width: "78px",
4404
4439
  height: "33px",
4405
4440
  padding: 0,
4406
4441
  margin: 0,
4407
- border: "none",
4442
+ border: isReadOnly ? "1px solid var(--border, #e2e8f0)" : "1px solid #e2e8f0",
4408
4443
  borderRadius: "5px",
4409
4444
  overflow: "hidden",
4410
- backgroundColor: "transparent",
4411
- appearance: "none"
4412
- // WebkitAppearance: "none",
4445
+ backgroundColor: isReadOnly ? "var(--bg-color, transparent)" : "transparent",
4446
+ appearance: "none",
4447
+ cursor: isReadOnly ? "not-allowed" : "pointer",
4448
+ pointerEvents: isReadOnly ? "none" : "auto"
4413
4449
  }
4414
4450
  }
4415
4451
  ),
4416
4452
  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
4417
- ] });
4453
+ ] }) });
4418
4454
  };
4419
4455
  ColorInput_default = ColorInput;
4420
4456
  }
@@ -4893,7 +4929,8 @@ var init_EmailInput = __esm({
4893
4929
  props.callback({
4894
4930
  name: props.name,
4895
4931
  value: text,
4896
- index: props.index
4932
+ index: props.index,
4933
+ groupKey: props.groupKey
4897
4934
  });
4898
4935
  }
4899
4936
  };
@@ -4901,8 +4938,8 @@ var init_EmailInput = __esm({
4901
4938
  if (props.value !== void 0 && props.value !== null) {
4902
4939
  value = props.value;
4903
4940
  }
4904
- return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { className: "block mb-1", children: [
4905
- /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-sm font-medium text-slate-700", children: props?.attributes?.label }),
4941
+ return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { className: "block", children: [
4942
+ props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
4906
4943
  " ",
4907
4944
  props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "bg-error-weak", children: "*" }),
4908
4945
  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
@@ -4913,15 +4950,20 @@ var init_EmailInput = __esm({
4913
4950
  id: props.name,
4914
4951
  value,
4915
4952
  onChange: textChangeHandler,
4953
+ onBlur: props?.onBlur,
4954
+ autoFocus: props?.attributes?.autoFocus,
4916
4955
  required: props?.attributes?.required,
4917
4956
  placeholder: props?.attributes?.placeholder,
4918
4957
  maxLength: props?.attributes?.maxLength,
4958
+ pattern: props?.attributes?.pattern,
4919
4959
  disabled: props?.attributes?.readOnly,
4920
4960
  minLength: props?.attributes?.minLength,
4921
- className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n transition-all duration-500 ease-in-out"
4961
+ className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
4962
+ ${props?.inputClasses ? props.inputClasses : ``}
4963
+ `
4922
4964
  }
4923
4965
  ),
4924
- /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
4966
+ /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
4925
4967
  ] }) });
4926
4968
  };
4927
4969
  EmailInput_default = EmailInput;
package/dist/server.mjs CHANGED
@@ -2359,7 +2359,7 @@ var GoogleMapNode_default = GoogleMapNode;
2359
2359
  // src/components/pageRenderingEngine/nodes/DivContainer.tsx
2360
2360
  import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
2361
2361
  var Pagination = dynamic13(() => import("./Pagination-OSLUL7SF.mjs"), { ssr: true });
2362
- var DataBindingControls = dynamic13(() => import("./DataBindingControls-2UETIUJJ.mjs"), {
2362
+ var DataBindingControls = dynamic13(() => import("./DataBindingControls-QZRQFELZ.mjs"), {
2363
2363
  ssr: true
2364
2364
  });
2365
2365
  var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clyrex-digital/clyrex-controls-dev",
3
- "version": "0.8.1-dev.20260919084840",
3
+ "version": "0.8.1-dev.20260919091004",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",