wini-web-components 2.6.0 → 2.6.1

package/dist/component/wini-icon/winicon.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -52,92 +41,45 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Winicon = Winicon;
-var react_dom_1 = __importDefault(require("react-dom"));
-var react_1 = __importStar(require("react"));
-var winicon_module_css_1 = __importDefault(require("./winicon.module.css"));
-var text_1 = require("../text/text");
-function Winicon(_a) {
-    var _this = this;
-    var id = _a.id, src = _a.src, link = _a.link, className = _a.className, style = _a.style, size = _a.size, color = _a.color, alt = _a.alt, onClick = _a.onClick, tooltip = _a.tooltip;
-    var ref = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(), svgData = _b[0], setSvgData = _b[1];
-    var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
-    var cdnSrc = "https://cdn.jsdelivr.net/gh/WiniGit/icon-library@latest/";
-    var extendAttribute = (0, react_1.useMemo)(function () {
+const react_dom_1 = __importDefault(require("react-dom"));
+const react_1 = __importStar(require("react"));
+const winicon_module_css_1 = __importDefault(require("./winicon.module.css"));
+const text_1 = require("../text/text");
+function Winicon({ id, src, link, className, style, size, color, alt, onClick, tooltip }) {
+    const ref = (0, react_1.useRef)(null);
+    const [svgData, setSvgData] = (0, react_1.useState)();
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const cdnSrc = "https://cdn.jsdelivr.net/gh/WiniGit/icon-library@latest/";
+    const extendAttribute = (0, react_1.useMemo)(() => {
         if (tooltip)
             return {
                 "tooltip-value": tooltip,
-                onMouseOver: function () { setShowTooltip(true); },
-                onMouseOut: function () { setShowTooltip(false); }
+                onMouseOver: () => { setShowTooltip(true); },
+                onMouseOut: () => { setShowTooltip(false); }
             };
         return {};
     }, [tooltip]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (src) {
-            fetch(cdnSrc + src + ".svg").then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = setSvgData;
-                        return [4 /*yield*/, res.text()];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        return [2 /*return*/];
-                }
-            }); }); }).catch(function () { setSvgData(alt !== null && alt !== void 0 ? alt : "error"); });
+            fetch(cdnSrc + src + ".svg").then((res) => __awaiter(this, void 0, void 0, function* () { setSvgData(yield res.text()); })).catch(() => { setSvgData(alt !== null && alt !== void 0 ? alt : "error"); });
         }
         else if (link) {
-            fetch(link).then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = setSvgData;
-                        return [4 /*yield*/, res.text()];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        return [2 /*return*/];
-                }
-            }); }); });
+            fetch(link).then((res) => __awaiter(this, void 0, void 0, function* () { setSvgData(yield res.text()); }));
         }
     }, [src, link]);
     return react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ ref: ref, id: id, onClick: onClick, className: "".concat(winicon_module_css_1.default['wini-icon'], " ").concat(svgData ? "" : "skeleton-loading", " ").concat(onClick ? winicon_module_css_1.default['clickable'] : '', " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(src ? src.split("/").map(function (e, i) { return i === 0 ? "".concat(e, "-icon") : e.replace(" ", "-"); }).join(" ") : '').concat(link ? ' link-icon' : ""), style: (style ? __assign(__assign({}, style), { '--size': size, '--color': color }) : { '--size': size, '--color': color }), dangerouslySetInnerHTML: { __html: svgData !== null && svgData !== void 0 ? svgData : '' } }, extendAttribute)),
-        tooltip && showTooltip && react_dom_1.default.createPortal((function () {
+        react_1.default.createElement("div", Object.assign({ ref: ref, id: id, onClick: onClick, className: `${winicon_module_css_1.default['wini-icon']} ${svgData ? "" : "skeleton-loading"} ${onClick ? winicon_module_css_1.default['clickable'] : ''} ${className !== null && className !== void 0 ? className : ''} ${src ? src.split("/").map((e, i) => i === 0 ? `${e}-icon` : e.replace(" ", "-")).join(" ") : ''}${link ? ' link-icon' : ""}`, style: (style ? Object.assign(Object.assign({}, style), { '--size': size, '--color': color }) : { '--size': size, '--color': color }), dangerouslySetInnerHTML: { __html: svgData !== null && svgData !== void 0 ? svgData : '' } }, extendAttribute)),
+        tooltip && showTooltip && react_dom_1.default.createPortal((() => {
             var _a;
             if (!ref.current)
                 return null;
-            var rect = ref.current.getBoundingClientRect();
-            var pos = (_a = tooltip.position) !== null && _a !== void 0 ? _a : "bottom";
+            const rect = ref.current.getBoundingClientRect();
+            let pos = (_a = tooltip.position) !== null && _a !== void 0 ? _a : "bottom";
             if (document.body.offsetHeight - rect.bottom < 100 && pos === "bottom")
                 pos = "top";
             else if (rect.top < 100 && pos === "top")
@@ -148,85 +90,85 @@ function Winicon(_a) {
                 pos = "right";
             switch (pos) {
                 case "top":
-                    return react_1.default.createElement("div", { ref: function (r) {
+                    return react_1.default.createElement("div", { ref: r => {
                             if (r) {
-                                var _r = r.getBoundingClientRect();
+                                const _r = r.getBoundingClientRect();
                                 if (_r.x < 0) {
-                                    r.style.left = "0px";
-                                    r.style.transform = "translateX(0)";
+                                    r.style.left = (rect.x + rect.width / 2) + "px";
+                                    r.style.transform = "translateX(-1.8rem)";
                                     r.style.alignItems = "start";
                                 }
                                 else if (_r.right > document.body.offsetWidth) {
                                     r.style.left = "unset";
-                                    r.style.right = "0px";
-                                    r.style.transform = "translateX(0)";
+                                    r.style.right = (document.body.offsetWidth - rect.right - rect.width / 2) + "px";
+                                    r.style.transform = "translateX(-1.4rem)";
                                     r.style.alignItems = "end";
                                 }
                             }
-                        }, className: "col ".concat(winicon_module_css_1.default['tooltip-container']), style: { alignItems: "center", bottom: document.body.offsetHeight - rect.top - 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
-                        react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message),
+                        }, className: `col ${winicon_module_css_1.default['tooltip-container']}`, style: { alignItems: "center", bottom: document.body.offsetHeight - rect.top - 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
+                        react_1.default.createElement(text_1.Text, { className: `body-3 ${winicon_module_css_1.default['tooltip-message']}`, maxLine: 2 }, tooltip.message),
                         react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateY(-0.2rem)" } },
                             react_1.default.createElement("div", { style: { borderLeft: "0.6rem solid transparent", borderRight: "0.6rem solid transparent", borderTop: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })));
                 case "bottom":
-                    return react_1.default.createElement("div", { ref: function (r) {
+                    return react_1.default.createElement("div", { ref: r => {
                             if (r) {
-                                var _r = r.getBoundingClientRect();
+                                const _r = r.getBoundingClientRect();
                                 if (_r.x < 0) {
-                                    r.style.left = "0px";
-                                    r.style.transform = "translateX(0)";
+                                    r.style.left = (rect.x + rect.width / 2) + "px";
+                                    r.style.transform = "translateX(-1.8rem)";
                                     r.style.alignItems = "start";
                                 }
                                 else if (_r.right > document.body.offsetWidth) {
                                     r.style.left = "unset";
-                                    r.style.right = "0px";
-                                    r.style.transform = "translateX(0)";
+                                    r.style.right = (document.body.offsetWidth - rect.right - rect.width / 2) + "px";
+                                    r.style.transform = "translateX(-1.4rem)";
                                     r.style.alignItems = "end";
                                 }
                             }
-                        }, className: "col ".concat(winicon_module_css_1.default['tooltip-container']), style: { alignItems: "center", top: rect.bottom + 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
+                        }, className: `col ${winicon_module_css_1.default['tooltip-container']}`, style: { alignItems: "center", top: rect.bottom + 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
                         react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateY(0.2rem)" } },
                             react_1.default.createElement("div", { style: { borderLeft: "0.6rem solid transparent", borderRight: "0.6rem solid transparent", borderBottom: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })),
-                        react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
+                        react_1.default.createElement(text_1.Text, { className: `body-3 ${winicon_module_css_1.default['tooltip-message']}`, maxLine: 2 }, tooltip.message));
                 case "left":
-                    return react_1.default.createElement("div", { ref: function (r) {
+                    return react_1.default.createElement("div", { ref: r => {
                             if (r) {
-                                var _r = r.getBoundingClientRect();
+                                const _r = r.getBoundingClientRect();
                                 if (_r.y < 0) {
-                                    r.style.top = "0px";
-                                    r.style.transform = "translateY(0)";
+                                    r.style.top = (rect.y + rect.height / 2) + "px";
+                                    r.style.transform = "translateY(-1.8rem)";
                                     r.style.alignItems = "start";
                                 }
-                                else if (_r.right > document.body.offsetWidth) {
+                                else if (_r.bottom > document.body.offsetHeight) {
                                     r.style.top = "unset";
-                                    r.style.bottom = "0px";
-                                    r.style.transform = "translateY(0)";
+                                    r.style.bottom = (document.body.offsetHeight - rect.bottom - rect.height / 2) + "px";
+                                    r.style.transform = "translateY(-1.4rem)";
                                     r.style.alignItems = "end";
                                 }
                             }
-                        }, className: "row ".concat(winicon_module_css_1.default['tooltip-container']), style: { top: rect.top + (rect.height / 2), right: document.body.offsetWidth - rect.left - 4, transform: "translateY(-50%)" } },
-                        react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message),
-                        react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateX(-0.2rem)" } },
+                        }, className: `row ${winicon_module_css_1.default['tooltip-container']}`, style: { top: rect.top + (rect.height / 2), right: document.body.offsetWidth - rect.left - 4, transform: "translateY(-50%)" } },
+                        react_1.default.createElement(text_1.Text, { className: `body-3 ${winicon_module_css_1.default['tooltip-message']}`, maxLine: 2 }, tooltip.message),
+                        react_1.default.createElement("div", { className: "row", style: { padding: "1.2rem 0", transform: "translateX(-0.2rem)" } },
                             react_1.default.createElement("div", { style: { borderTop: "0.6rem solid transparent", borderBottom: "0.6rem solid transparent", borderLeft: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })));
                 case "right":
-                    return react_1.default.createElement("div", { ref: function (r) {
+                    return react_1.default.createElement("div", { ref: r => {
                             if (r) {
-                                var _r = r.getBoundingClientRect();
+                                const _r = r.getBoundingClientRect();
                                 if (_r.y < 0) {
-                                    r.style.top = "0px";
-                                    r.style.transform = "translateY(0)";
+                                    r.style.top = (rect.y + rect.height / 2) + "px";
+                                    r.style.transform = "translateY(-1.8rem)";
                                     r.style.alignItems = "start";
                                 }
-                                else if (_r.right > document.body.offsetWidth) {
+                                else if (_r.bottom > document.body.offsetHeight) {
                                     r.style.top = "unset";
-                                    r.style.bottom = "0px";
-                                    r.style.transform = "translateY(0)";
+                                    r.style.bottom = (document.body.offsetHeight - rect.bottom - rect.height / 2) + "px";
+                                    r.style.transform = "translateY(-1.4rem)";
                                     r.style.alignItems = "end";
                                 }
                             }
-                        }, className: "row ".concat(winicon_module_css_1.default['tooltip-container']), style: { top: rect.top + (rect.height / 2), left: rect.right + 4, transform: "translateY(-50%)" } },
-                        react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateX(0.2rem)" } },
+                        }, className: `row ${winicon_module_css_1.default['tooltip-container']}`, style: { top: rect.top + (rect.height / 2), left: rect.right + 4, transform: "translateY(-50%)" } },
+                        react_1.default.createElement("div", { className: "row", style: { padding: "1.2rem 0", transform: "translateX(0.2rem)" } },
                             react_1.default.createElement("div", { style: { borderTop: "0.6rem solid transparent", borderBottom: "0.6rem solid transparent", borderRight: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })),
-                        react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
+                        react_1.default.createElement(text_1.Text, { className: `body-3 ${winicon_module_css_1.default['tooltip-message']}`, maxLine: 2 }, tooltip.message));
                 default:
                     return react_1.default.createElement("div", null);
             }

package/dist/form/login/view.js

@@ -4,39 +4,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WLoginView = WLoginView;
-var react_1 = __importDefault(require("react"));
-var index_1 = require("../../index");
-var view_module_css_1 = __importDefault(require("./view.module.css"));
-var react_hook_form_1 = require("react-hook-form");
-var react_2 = require("react");
-var react_i18next_1 = require("react-i18next");
+const react_1 = __importDefault(require("react"));
+const index_1 = require("../../index");
+const view_module_css_1 = __importDefault(require("./view.module.css"));
+const react_hook_form_1 = require("react-hook-form");
+const react_2 = require("react");
+const react_i18next_1 = require("react-i18next");
 function WLoginView(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    var methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
-    var _y = (0, react_2.useState)(false), isShowPass = _y[0], setShowPass = _y[1];
-    var t = (0, react_i18next_1.useTranslation)().t;
-    var _onSubmit = function (ev) {
+    const methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
+    const [isShowPass, setShowPass] = (0, react_2.useState)(false);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const _onSubmit = (ev) => {
         if (props.onSubmit)
             props.onSubmit(ev, methods);
     };
-    return react_1.default.createElement("form", { id: props.id, className: "col login-view-container ".concat(view_module_css_1.default['login-view-container'], " ").concat((_a = props.className) !== null && _a !== void 0 ? _a : ''), style: props.style },
+    return react_1.default.createElement("form", { id: props.id, className: `col login-view-container ${view_module_css_1.default['login-view-container']} ${(_a = props.className) !== null && _a !== void 0 ? _a : ''}`, style: props.style },
         typeof props.logo === "string" ? react_1.default.createElement("img", { alt: 'logo', src: props.logo, height: "36rem" }) : props.logo,
-        react_1.default.createElement("div", { className: "col login-view-form-container ".concat(view_module_css_1.default['login-view-form-container']) },
-            react_1.default.createElement(index_1.Text, { className: 'heading-4' }, (_b = props.title) !== null && _b !== void 0 ? _b : "".concat(t("loginTo"), " Wini")),
+        react_1.default.createElement("div", { className: `col login-view-form-container ${view_module_css_1.default['login-view-form-container']}` },
+            react_1.default.createElement(index_1.Text, { className: 'heading-4' }, (_b = props.title) !== null && _b !== void 0 ? _b : `${t("loginTo")} Wini`),
             react_1.default.createElement("div", { className: 'col' },
                 react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
                     react_1.default.createElement(index_1.Text, { className: 'label-3' }, (_c = props.formData.username.label) !== null && _c !== void 0 ? _c : t("username")),
                     react_1.default.createElement(index_1.TextField, { autoComplete: 'username', className: "placeholder-2", placeholder: props.formData.username.label, style: { height: "4.8rem" }, prefix: props.formData.username.prefix, name: props.formData.username.name, register: ((_d = props.methods) !== null && _d !== void 0 ? _d : methods).register(props.formData.username.name, {
-                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
+                            onChange: (ev) => { ev.target.value = ev.target.value.trim(); },
                             onBlur: props.formData.username.onValidate
-                        }), onComplete: function (ev) { ev.target.blur(); }, helperText: (_g = (_f = ((_e = props.methods) !== null && _e !== void 0 ? _e : methods).formState.errors) === null || _f === void 0 ? void 0 : _f[props.formData.username.name]) === null || _g === void 0 ? void 0 : _g.message })),
+                        }), onComplete: (ev) => { ev.target.blur(); }, helperText: (_g = (_f = ((_e = props.methods) !== null && _e !== void 0 ? _e : methods).formState.errors) === null || _f === void 0 ? void 0 : _f[props.formData.username.name]) === null || _g === void 0 ? void 0 : _g.message })),
                 react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
                     react_1.default.createElement(index_1.Text, { className: 'label-3' }, (_h = props.formData.password.label) !== null && _h !== void 0 ? _h : t("password")),
-                    react_1.default.createElement(index_1.TextField, { autoComplete: 'current-password', className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: function () { setShowPass(!isShowPass); } },
-                            react_1.default.createElement(index_1.Winicon, { src: "outline/user interface/".concat(isShowPass ? "view" : "hide"), size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: ((_j = props.methods) !== null && _j !== void 0 ? _j : methods).register(props.formData.password.name, {
-                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
+                    react_1.default.createElement(index_1.TextField, { autoComplete: 'current-password', className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: () => { setShowPass(!isShowPass); } },
+                            react_1.default.createElement(index_1.Winicon, { src: `outline/user interface/${isShowPass ? "view" : "hide"}`, size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: ((_j = props.methods) !== null && _j !== void 0 ? _j : methods).register(props.formData.password.name, {
+                            onChange: (ev) => { ev.target.value = ev.target.value.trim(); },
                             onBlur: props.formData.password.onValidate
-                        }), onComplete: function (ev) {
+                        }), onComplete: (ev) => {
                             var _a, _b, _c;
                             if ((_b = ((_a = props.methods) !== null && _a !== void 0 ? _a : methods).watch(props.formData.password.name)) === null || _b === void 0 ? void 0 : _b.length) {
                                 ev.target.blur();
@@ -46,21 +46,21 @@ function WLoginView(props) {
                             else
                                 ev.target.blur();
                         }, helperText: (_m = (_l = ((_k = props.methods) !== null && _k !== void 0 ? _k : methods).formState.errors) === null || _l === void 0 ? void 0 : _l[props.formData.password.name]) === null || _m === void 0 ? void 0 : _m.message })),
-                react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['forgot-password-btn']), onClick: props.onForgotPassword }, (_o = props.forgotPasswordText) !== null && _o !== void 0 ? _o : t("forgotPassword")),
+                react_1.default.createElement(index_1.Text, { className: `button-text-3 ${view_module_css_1.default['forgot-password-btn']}`, onClick: props.onForgotPassword }, (_o = props.forgotPasswordText) !== null && _o !== void 0 ? _o : t("forgotPassword")),
                 react_1.default.createElement("div", { className: 'col', style: { gap: "1.6rem" } },
-                    react_1.default.createElement(index_1.Button, { disabled: ((_q = ((_p = props.methods) !== null && _p !== void 0 ? _p : methods).watch(props.formData.username.name)) === null || _q === void 0 ? void 0 : _q.length) && ((_s = ((_r = props.methods) !== null && _r !== void 0 ? _r : methods).watch(props.formData.password.name)) === null || _s === void 0 ? void 0 : _s.length) ? false : true, className: "button-text-1 ".concat(view_module_css_1.default['login-btn']), onClick: props.onSubmit && ((_t = props.methods) !== null && _t !== void 0 ? _t : methods).handleSubmit(_onSubmit), label: (_u = props.buttonLoginLabel) !== null && _u !== void 0 ? _u : t("login") }),
+                    react_1.default.createElement(index_1.Button, { disabled: ((_q = ((_p = props.methods) !== null && _p !== void 0 ? _p : methods).watch(props.formData.username.name)) === null || _q === void 0 ? void 0 : _q.length) && ((_s = ((_r = props.methods) !== null && _r !== void 0 ? _r : methods).watch(props.formData.password.name)) === null || _s === void 0 ? void 0 : _s.length) ? false : true, className: `button-text-1 ${view_module_css_1.default['login-btn']}`, onClick: props.onSubmit && ((_t = props.methods) !== null && _t !== void 0 ? _t : methods).handleSubmit(_onSubmit), label: (_u = props.buttonLoginLabel) !== null && _u !== void 0 ? _u : t("login") }),
                     react_1.default.createElement("div", { className: 'row', style: { justifyContent: "center", gap: "0.4rem" } },
                         react_1.default.createElement(index_1.Text, { className: 'label-4' }, (_v = props.registerPrefixText) !== null && _v !== void 0 ? _v : t("dontHaveAccount")),
-                        react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['register-btn']), onClick: props.onRegister }, (_w = props.registerText) !== null && _w !== void 0 ? _w : "".concat(t("signupFor"), " Wini")))),
+                        react_1.default.createElement(index_1.Text, { className: `button-text-3 ${view_module_css_1.default['register-btn']}`, onClick: props.onRegister }, (_w = props.registerText) !== null && _w !== void 0 ? _w : `${t("signupFor")} Wini`))),
                 (props.loginWithGoogle || props.loginWithFacebook || props.loginWithApple || props.loginWithMicrosoft) ?
                     react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['or-spacing']) },
+                        react_1.default.createElement("div", { className: `row ${view_module_css_1.default['or-spacing']}` },
                             react_1.default.createElement("div", null),
                             react_1.default.createElement(index_1.Text, { className: "label-4" }, (_x = props.orText) !== null && _x !== void 0 ? _x : t("or")),
                             react_1.default.createElement("div", null)),
-                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['login-social-media']) },
-                            props.loginWithGoogle && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithGoogle, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/google', size: "2rem" }), label: "Google" }),
-                            props.loginWithFacebook && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithFacebook, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/logo-facebook', size: "2rem" }), label: "Facebook" }),
-                            props.loginWithApple && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithApple, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/apple', size: "2rem" }), label: "Apple" }),
-                            props.loginWithMicrosoft && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithMicrosoft, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/microsoft', size: "2rem" }), label: "Microsoft" }))) : null)));
+                        react_1.default.createElement("div", { className: `row ${view_module_css_1.default['login-social-media']}` },
+                            props.loginWithGoogle && react_1.default.createElement(index_1.Button, { className: `label-1`, onClick: props.loginWithGoogle, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/google', size: "2rem" }), label: "Google" }),
+                            props.loginWithFacebook && react_1.default.createElement(index_1.Button, { className: `label-1`, onClick: props.loginWithFacebook, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/logo-facebook', size: "2rem" }), label: "Facebook" }),
+                            props.loginWithApple && react_1.default.createElement(index_1.Button, { className: `label-1`, onClick: props.loginWithApple, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/apple', size: "2rem" }), label: "Apple" }),
+                            props.loginWithMicrosoft && react_1.default.createElement(index_1.Button, { className: `label-1`, onClick: props.loginWithMicrosoft, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/microsoft', size: "2rem" }), label: "Microsoft" }))) : null)));
 }