@skalfa/skalfa-component 1.0.19 → 1.0.20

package/dist/input/InputPassword.component.js

@@ -6,7 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
+const skalfa_lang_1 = require("@skalfa/skalfa-lang");
 function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
+    const l = (0, skalfa_lang_1.useLang)();
     const [password, setPassword] = (0, react_1.useState)("");
     const [confirmPassword, setConfirmPassword] = (0, react_1.useState)("");
     const [strength, setStrength] = (0, react_1.useState)("");
@@ -52,8 +54,8 @@ function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invali
                         }, onBlur: (e) => {
                             props.onBlur?.(e);
                             setTimeout(() => inputHandler.setFocus(false), 100);
-                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: invalidMessage })), strength && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-weak", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-empty", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", (strength === "weak" || strength === "strong") && "password-strength-bar-empty", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("password-strength-text", strength === "weak" && "password-strength-text-weak", strength === "strong" && "password-strength-text-strong", strength === "excellent" && "password-strength-text-excellent"), children: strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "input-password-confirm-wrapper", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: randomConfirmId, className: (0, _utils_1.cn)("input-label", (0, _utils_1.pcn)(className, "label")), children: "Password Confirm" }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("input", { ...props, id: randomConfirmId, type: "password", className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), isConfirmMismatch && "input-error"), value: confirmPassword, onChange: (e) => {
+                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: invalidMessage })), strength && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-weak", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-empty", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", (strength === "weak" || strength === "strong") && "password-strength-bar-empty", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("password-strength-text", strength === "weak" && "password-strength-text-weak", strength === "strong" && "password-strength-text-strong", strength === "excellent" && "password-strength-text-excellent"), children: strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "input-password-confirm-wrapper", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: randomConfirmId, className: (0, _utils_1.cn)("input-label", (0, _utils_1.pcn)(className, "label")), children: l.base.passwordConfirm ? l.base.passwordConfirm() : "Password Confirm" }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("input", { ...props, placeholder: l.base.passwordConfirm ? l.base.passwordConfirm() : "Repeat password...", id: randomConfirmId, type: "password", className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), isConfirmMismatch && "input-error"), value: confirmPassword, onChange: (e) => {
                                 setConfirmPassword(e.target.value);
                                 onChange?.(password, e.target.value);
-                            }, autoComplete: "off" }) })] }), isConfirmMismatch && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: "Password confirmation not match" }))] }));
+                            }, autoComplete: "off" }) })] }), isConfirmMismatch && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: l.base.passwordConfirmFailed ? l.base.passwordConfirmFailed() : "Passwords do not match!" }))] }));
 }

package/dist/supervision/TableSupervision.component.js

@@ -271,6 +271,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                                 : { idb: { ...fetchControl?.idb, id: selected?.id || "" } }),
                         method: "DELETE",
                     },
+                    paint: "danger",
                     onSuccess: () => {
                         reset();
                         setTimeout(() => { setToggle(`MODAL_DELETE_${toggleKey}`, false); }, 900);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/input/InputPassword.component.tsx

@@ -3,6 +3,7 @@
 import { InputHTMLAttributes, ReactNode, useEffect, useState } from "react";
 import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+import { useLang } from "@skalfa/skalfa-lang";
 
 
 
@@ -45,6 +46,7 @@ export function InputPasswordComponent({
   className = "",
   ...props
 }: InputPasswordProps) {
+  const l                                      =  useLang()
   const [password, setPassword]                =  useState("");
   const [confirmPassword, setConfirmPassword]  =  useState("");
   const [strength, setStrength]                =  useState<"weak" | "strong" | "excellent" | "">("");
@@ -214,10 +216,11 @@ export function InputPasswordComponent({
         <label
           htmlFor={randomConfirmId}
           className={cn("input-label", pcn<CT>(className, "label"))}
-        >Password Confirm</label>
+        >{l.base.passwordConfirm ? l.base.passwordConfirm() : "Password Confirm"}</label>
         <div className="relative">
           <input
             {...props}
+            placeholder={l.base.passwordConfirm ? l.base.passwordConfirm() : "Repeat password..."}
             id={randomConfirmId}
             type="password"
             className={cn(
@@ -238,7 +241,7 @@ export function InputPasswordComponent({
       </div>
 
       {isConfirmMismatch && (
-        <small className="input-error-message">Password confirmation not match</small>
+        <small className="input-error-message">{l.base.passwordConfirmFailed ? l.base.passwordConfirmFailed() : "Passwords do not match!"}</small>
       )}
     </div>
   );

package/src/supervision/TableSupervision.component.tsx

@@ -625,6 +625,7 @@ export function TableSupervisionComponent({
             ),
             method: "DELETE",
           },
+          paint: "danger",
           onSuccess: () => {
             reset();
             setTimeout(() => { setToggle(`MODAL_DELETE_${toggleKey}`, false) }, 900);