sccoreui 6.4.74 → 6.4.76

package/dist/App.scss

@@ -1762,6 +1762,28 @@ code {
   }
 }
 
+.currency_with_input {
+  display: flex;
+  border: 1px solid var(--gray-300);
+  border-radius: 6px;
+  input {
+    border: 0px !important;
+    padding-inline: 0;
+    &:focus {
+      outline: none !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+  .p-inputnumber .p-inputnumber-input {
+    padding-inline: 0;
+  }
+  &:focus-within {
+    border: 1px solid var(--primary-300);
+    outline: 2px solid var(--primary-50);
+  }
+}
+
 .text-truncate {
   white-space: nowrap;
   overflow: hidden;

package/dist/components/form/form-fields/form-fields.js

@@ -12,6 +12,7 @@ const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
 const inputnumber_1 = require("primereact/inputnumber");
 const skeleton_1 = require("primereact/skeleton");
 const FieldLabel_1 = tslib_1.__importDefault(require("./FieldLabel"));
+const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const InputTextField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading, isRequired = false, value, } = props;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
@@ -32,14 +33,14 @@ const InputNumberField = (props) => {
                     } })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const InputCurrencyField = (props) => {
-    const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, useGrouping = false, min, max, maxLength, className, validate, disabled, isLoading, inputNumberProps = {}, isRequired = false, value, currenyIcon } = props;
+    const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, useGrouping = false, min, max, maxLength, className, validate, disabled, isLoading, inputNumberProps = {}, isRequired = false, value, currenyIcon, } = props;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
                 (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
                         const { value, name } = field;
-                        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: currenyIcon ? currenyIcon : "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ name: name, value: value, "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, useGrouping: useGrouping }, inputNumberProps))] })));
+                        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} currency_with_input` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-600 font-normal px-3" }, { children: currenyIcon ? currenyIcon : "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ name: name, value: value, "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "" : ""} ${className}`, id: name, useGrouping: useGrouping }, inputNumberProps))] })), value && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center px-2", onClick: () => setFieldValue(name, null) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 15, color: "text-gray-600" }) })))] })));
                     } })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const InputTextAreaField = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.4.74",
+  "version": "6.4.76",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",