dhre-component-lib 0.4.3 → 0.4.4

package/dist/index.js

@@ -179,7 +179,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
     return React__namespace.default.createElement("div", { className: classNames, ...props }, children);
 };
 
-var css$h = ".label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}";
+var css$h = ".label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}\n\n.astreik {\n  color: #eb0542;\n}";
 n(css$h,{});
 
 const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
@@ -202,7 +202,9 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
         setShowLabelOnBorder(!!value);
     }, [value]);
     return (React__namespace.default.createElement("div", { className: `${className} ${'inputContainer'}` },
-        (placeholder && showLabelOnBorder) && React__namespace.default.createElement("label", { className: 'label' }, placeholder),
+        ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'label' },
+            placeholder.replace("*", ""),
+            placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
         React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, 
             // className={inputClassName}
             className: `${inputClassName} ${error ? "inputError" : ''}`, maxLength: maxLength, minLength: minLength, min: min, ...rest }),
@@ -9607,7 +9609,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
                 dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })))))))));
 };
 
-var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
+var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
 n(css$9,{});
 
 function Dropdown(props) {
@@ -9622,24 +9624,32 @@ function Dropdown(props) {
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         openDropdown && (React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
         React__namespace.default.createElement("div", { className: "dropPosition" },
-            placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "label" }, placeholder)),
+            placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "label" },
+                placeholder.replace("*", ""),
+                placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*"))),
             React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
                 !selectedValue && (React__namespace.default.createElement(Typography, { className: "placeholder", variant: "B3", weight: "SEMI_BOLD" }, placeholder)),
-                selectedValue && (React__namespace.default.createElement(Typography, { className: "value", variant: "B3", weight: "BOLD" }, selectedValue.name)),
+                selectedValue && (React__namespace.default.createElement(Typography, { className: "value", variant: "B3", weight: "MEDIUM" }, selectedValue.name)),
                 !openDropdown && React__namespace.default.createElement("div", null, arrowDown),
                 openDropdown && React__namespace.default.createElement("div", null, arrowUp)),
             openDropdown && (React__namespace.default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__namespace.default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
                 React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
 }
 
-var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
+var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
 n(css$8,{});
 
 function TextArea(props) {
     const { value, onChange, requiredLimit, placeholder, charText, property } = props;
+    const [showLabelOnBorder, setShowLabelOnBorder] = React__namespace.default.useState(false);
+    const checkFieldValue = (e) => {
+        if (!e.target.value) {
+            setShowLabelOnBorder(false);
+        }
+    };
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         React__namespace.default.createElement("div", { className: "textArea100" },
-            React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
+            React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
         React__namespace.default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,
             "/",