@websolutespa/bom-mixer-ui 1.9.8 → 1.9.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.9.10
+
+### Patch Changes
+
+- Added: FieldConsent, FieldImplicit
+
+## 1.9.9
+
+### Patch Changes
+
+- Modified: IThemeFont, Text
+
 ## 1.9.8
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4083,12 +4083,16 @@ function hasBackground(props) {
 
 const StyledText$1 = styled__default.default.div`
   ${props => getFontVariantResponsive(props, (variant, font) => styled.css`
-    ${font.family ? styled.css`font-family: var(--font-${variant}-family, var(--base-font-family));` : ''}
-    ${font.size ? styled.css`font-size: var(--font-${variant}-size, 1rem);` : ''}
+    ${font.fontFamily ? styled.css`font-family: var(--font-${variant}-font-family, var(--base-font-family));` : ''}
+    ${font.fontSize ? styled.css`font-size: var(--font-${variant}-font-size, 1rem);` : ''}
     ${font.lineHeight ? styled.css`line-height: var(--font-${variant}-line-height, 1);` : ''}
     ${font.fontWeight ? styled.css`font-weight: var(--font-${variant}-font-weight, inherit);` : ''}
+    ${font.fontStyle ? styled.css`font-style: var(--font-${variant}-font-style, inherit);` : ''}
     ${font.letterSpacing ? styled.css`letter-spacing: var(--font-${variant}-letter-spacing, inherit);` : ''}
     ${font.textTransform ? styled.css`text-transform: var(--font-${variant}-text-transform, inherit);` : ''}
+    //
+    ${font.family ? styled.css`font-family: var(--font-${variant}-family, var(--base-font-family));` : ''}
+    ${font.size ? styled.css`font-size: var(--font-${variant}-size, 1rem);` : ''}
   `)};
   ${props => props.gradient ? styled.css`
     display: -webkit-inline-box;
@@ -12522,7 +12526,7 @@ function FieldCheckbox(_a) {
     children: [jsxRuntime.jsxs(Label, {
       htmlFor: uniqueName,
       margin: "0",
-      children: [jsxRuntime.jsx(Checkbox, {
+      children: [jsxRuntime.jsx(Ariakit.Checkbox, {
         id: uniqueName,
         name: uniqueName,
         onChange: onChange,
@@ -12604,6 +12608,143 @@ function FieldCombobox(_ref) {
   });
 }
 
+function FieldConsent(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
+  var _a;
+  const label = bomMixerHooks.useLabel();
+  const uniqueName = `${control.name}-${uid}`;
+  const uniqueNameTrue = `${uniqueName}-true`;
+  const uniqueNameFalse = `${uniqueName}-false`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  const onSelect = value => {
+    // console.log('value', value);
+    setValue(value);
+  };
+  const [focus, setFocus] = React.useState(false);
+  const onTrueChange = event => {
+    onSelect(true);
+  };
+  const onTrueBlur = _ => {
+    setTouched();
+    setFocus(false);
+  };
+  const onTrueFocus = _ => {
+    setFocus(true);
+  };
+  const onFalseChange = event => {
+    onSelect(false);
+  };
+  const onFalseBlur = _ => {
+    setTouched();
+    setFocus(false);
+  };
+  const onFalseFocus = _ => {
+    setFocus(true);
+  };
+  const detail = (_a = control.customData) === null || _a === void 0 ? void 0 : _a.detail;
+  const [active, setActive] = React.useState(false);
+  return state.flags.hidden ? jsxRuntime.jsx("input", {
+    type: "hidden",
+    value: state.value ? 'true' : 'false'
+  }) : jsxRuntime.jsxs(Field, {
+    state: state,
+    className: bomCore.getClassNames('field-consent', {
+      required: control.validators.length > 0
+    }),
+    padding: "1em 0",
+    borderBottom: "1px solid var(--color-neutral-200)",
+    children: [jsxRuntime.jsxs("div", {
+      className: "field-consent__description",
+      children: [control.label && jsxRuntime.jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: label(control.label)
+        }
+      }), detail && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["\u00A0", jsxRuntime.jsx(Button, {
+          onClick: () => setActive(!active),
+          children: "Dettagli"
+        }), active && jsxRuntime.jsx("p", {
+          className: "field-consent__detail",
+          dangerouslySetInnerHTML: {
+            __html: detail
+          }
+        })]
+      })]
+    }), jsxRuntime.jsxs("div", {
+      className: "field-consent__group",
+      children: [jsxRuntime.jsxs(Label, {
+        htmlFor: uniqueNameTrue,
+        margin: "0",
+        children: [jsxRuntime.jsx(Checkbox, {
+          id: uniqueNameTrue,
+          name: uniqueNameTrue,
+          onChange: onTrueChange,
+          onBlur: onTrueBlur,
+          onFocus: onTrueFocus,
+          disabled: state.flags.disabled || state.flags.readonly,
+          checked: state.value === true
+        }), jsxRuntime.jsx("span", {
+          children: label('form.consent.true')
+        })]
+      }), jsxRuntime.jsxs(Label, {
+        htmlFor: uniqueNameFalse,
+        margin: "0",
+        children: [jsxRuntime.jsx(Checkbox, {
+          id: uniqueNameFalse,
+          name: uniqueNameFalse,
+          onChange: onFalseChange,
+          onBlur: onFalseBlur,
+          onFocus: onFalseFocus,
+          disabled: state.flags.disabled || state.flags.readonly,
+          checked: state.value === false
+        }), jsxRuntime.jsx("span", {
+          children: label('form.consent.false')
+        })]
+      })]
+    }), jsxRuntime.jsx(FieldError, {
+      state: state
+    })]
+  });
+}
+
+function FieldImplicit(_a) {
+  var {
+      control,
+      uid = 0,
+      before,
+      after
+    } = _a;
+    __rest(_a, ["control", "uid", "before", "after"]);
+  const label = bomMixerHooks.useLabel();
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  return state.flags.hidden ? jsxRuntime.jsx("input", {
+    type: "hidden",
+    value: state.value || ''
+  }) : jsxRuntime.jsxs(Field, {
+    state: state,
+    children: [jsxRuntime.jsxs(Label, {
+      htmlFor: uniqueName,
+      children: [jsxRuntime.jsx("input", {
+        className: "checkbox",
+        type: "hidden",
+        id: uniqueName,
+        name: uniqueName,
+        value: String(state.value)
+      }), control.label && jsxRuntime.jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: label(control.label)
+        }
+      })]
+    }), jsxRuntime.jsx(FieldError, {
+      state: state
+    })]
+  });
+}
+
 function getIcon(type) {
   return type === 'password' ? jsxRuntime.jsx(bomMixerIcons.IconEye, {}) : jsxRuntime.jsx(bomMixerIcons.IconEyeOff, {});
 }
@@ -12616,13 +12757,27 @@ function FieldPassword(_ref) {
   const label = bomMixerHooks.useLabel();
   const uniqueName = `${control.name}-${uid}`;
   const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  const [focus, setFocus] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const onChange = value => {
+      if (focus) {
+        return;
+      }
+      if (ref.current) {
+        ref.current.value = value;
+      }
+      // console.log('FieldText.onChange', ref.current, value);
+    };
+    // control.on('change', onChange);
+    return () => control.off('change', onChange);
+  }, [control, focus]);
+  const [type, setType] = React.useState('password');
   const onChange = event => {
     // console.log('FieldPassword', event.target.value);
     setValue(event.target.value);
     // control.value = event.target.value;
   };
-  const [focus, setFocus] = React.useState(false);
-  const [type, setType] = React.useState('password');
   const onBlur = _ => {
     setTouched();
     setFocus(false);
@@ -12638,21 +12793,25 @@ function FieldPassword(_ref) {
     value: state.value || ''
   }) : jsxRuntime.jsxs(Field, {
     state: state,
+    className: bomCore.getClassNames({
+      required: control.required && !control.disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
       children: control.label && label(control.label)
     }), jsxRuntime.jsx(Input, {
+      width: "100%",
+      ref: ref,
       id: uniqueName,
       name: uniqueName,
       type: type,
       placeholder: label(control.placeholder || control.label || ''),
-      value: state.value || '',
+      defaultValue: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
-      width: "100%",
       after: jsxRuntime.jsx(Button, {
         onClick: () => onToggle(),
         children: icon(type)
@@ -12750,6 +12909,9 @@ function FieldSelect(_ref) {
     value: bomMixerForms.valueToString(state.value)
   }) : jsxRuntime.jsxs(Field, {
     state: state,
+    className: bomCore.getClassNames({
+      required: control.required && !control.disabled
+    }),
     children: [jsxRuntime.jsxs(Select, {
       name: uniqueName,
       value: control.value,
@@ -12761,6 +12923,7 @@ function FieldSelect(_ref) {
       children: [control.label && jsxRuntime.jsx(Select.Label, {
         children: label(control.label)
       }), jsxRuntime.jsx(Select.Select, {
+        disabled: control.disabled,
         children: icon || jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {})
       }), jsxRuntime.jsx(Select.Popover, {
         gutter: 4,
@@ -12788,12 +12951,26 @@ function FieldText(_a) {
   const label = bomMixerHooks.useLabel();
   const uniqueName = `${control.name}-${uid}`;
   const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  const [focus, setFocus] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const onChange = value => {
+      if (focus) {
+        return;
+      }
+      if (ref.current) {
+        ref.current.value = value;
+      }
+      // console.log('FieldText.onChange', ref.current, value);
+    };
+    // control.on('change', onChange);
+    return () => control.off('change', onChange);
+  }, [control, focus]);
   const onChange = event => {
     // console.log('FieldText', event.target.value);
     setValue(event.target.value);
     // control.value = event.target.value;
   };
-  const [focus, setFocus] = React.useState(false);
   const onBlur = _ => {
     setTouched();
     setFocus(false);
@@ -12806,16 +12983,20 @@ function FieldText(_a) {
     value: state.value || ''
   }) : jsxRuntime.jsxs(Field, {
     state: state,
+    className: bomCore.getClassNames({
+      required: control.required && !control.disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
       children: control.label && label(control.label)
     }), jsxRuntime.jsx(Input, Object.assign({
       width: "100%"
     }, props, {
+      ref: ref,
       id: uniqueName,
       name: uniqueName,
       placeholder: label(control.placeholder || control.label || ''),
-      value: state.value || '',
+      defaultValue: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
@@ -12879,15 +13060,19 @@ function FieldTextArea(_ref) {
   * Here we define the types of form fields.
 */
 const FIELDS = {
-  text: (control, uid) => jsxRuntime.jsx(FieldText, {
+  accept: (control, uid) => jsxRuntime.jsx(FieldAccept, {
     control: control,
     uid: uid
   }, uid),
-  textarea: (control, uid) => jsxRuntime.jsx(FieldTextArea, {
+  autocomplete: (control, uid) => jsxRuntime.jsx(FieldAutocomplete, {
     control: control,
     uid: uid
   }, uid),
-  password: (control, uid) => jsxRuntime.jsx(FieldPassword, {
+  card: (control, uid) => jsxRuntime.jsx(FieldCard, {
+    control: control,
+    uid: uid
+  }, uid),
+  checkbox: (control, uid) => jsxRuntime.jsx(FieldCheckbox, {
     control: control,
     uid: uid
   }, uid),
@@ -12895,15 +13080,15 @@ const FIELDS = {
     control: control,
     uid: uid
   }, uid),
-  select: (control, uid) => jsxRuntime.jsx(FieldSelect, {
+  consent: (control, uid) => jsxRuntime.jsx(FieldConsent, {
     control: control,
     uid: uid
   }, uid),
-  autocomplete: (control, uid) => jsxRuntime.jsx(FieldAutocomplete, {
+  implicit: (control, uid) => jsxRuntime.jsx(FieldImplicit, {
     control: control,
     uid: uid
   }, uid),
-  checkbox: (control, uid) => jsxRuntime.jsx(FieldCheckbox, {
+  password: (control, uid) => jsxRuntime.jsx(FieldPassword, {
     control: control,
     uid: uid
   }, uid),
@@ -12911,11 +13096,15 @@ const FIELDS = {
     control: control,
     uid: uid
   }, uid),
-  accept: (control, uid) => jsxRuntime.jsx(FieldAccept, {
+  select: (control, uid) => jsxRuntime.jsx(FieldSelect, {
     control: control,
     uid: uid
   }, uid),
-  card: (control, uid) => jsxRuntime.jsx(FieldCard, {
+  text: (control, uid) => jsxRuntime.jsx(FieldText, {
+    control: control,
+    uid: uid
+  }, uid),
+  textarea: (control, uid) => jsxRuntime.jsx(FieldTextArea, {
     control: control,
     uid: uid
   }, uid)
@@ -13740,6 +13929,7 @@ exports.Dropdown = Dropdown;
 exports.Ellipsis = Ellipsis;
 exports.ErrorHandler = ErrorHandler;
 exports.Expand = Expand;
+exports.FIELDS = FIELDS;
 exports.Field = Field;
 exports.FieldAccept = FieldAccept;
 exports.FieldAutocomplete = FieldAutocomplete;
@@ -13747,7 +13937,9 @@ exports.FieldCard = FieldCard;
 exports.FieldCheckbox = FieldCheckbox;
 exports.FieldCollection = FieldCollection;
 exports.FieldCombobox = FieldCombobox;
+exports.FieldConsent = FieldConsent;
 exports.FieldError = FieldError;
+exports.FieldImplicit = FieldImplicit;
 exports.FieldPassword = FieldPassword;
 exports.FieldRadio = FieldRadio;
 exports.FieldSelect = FieldSelect;