dhre-component-lib 0.8.1 → 0.8.2

package/dist/components/InputTextField/InputTextField.d.ts

@@ -20,6 +20,10 @@ export interface CustomInputFieldProps {
     disabled?: boolean;
     istoolTip?: boolean;
     toolTipText?: string;
+    link?: string;
+    handleLink?: () => void;
+    linkWrapper?: string;
+    linkClassName?: string;
 }
 declare const CustomInputField: React.FC<CustomInputFieldProps>;
 export default CustomInputField;

package/dist/index.d.ts

@@ -152,6 +152,10 @@ interface CustomInputFieldProps {
     disabled?: boolean;
     istoolTip?: boolean;
     toolTipText?: string;
+    link?: string;
+    handleLink?: () => void;
+    linkWrapper?: string;
+    linkClassName?: string;
 }
 declare const CustomInputField: React.FC<CustomInputFieldProps>;
 

package/dist/index.esm.js

@@ -157,7 +157,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
     return React__default.createElement("div", { className: classNames, ...props }, children);
 };
 
-var css$i = ".inputLabel {\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.inputLabelTooltip {\n  position: absolute;\n  z-index: 1;\n  top: 17px;\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  z-index: 0;\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\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}\n\n.ToolTipImage {\n  position: relative;\n  left: 87.5%;\n  z-index: 2;\n  top: 2.75rem;\n  cursor: pointer;\n}\n\n.tooltipwrapper {\n  display: flex;\n  flex-direction: row !important;\n  gap: 1rem;\n}\n\n.tooltipText {\n  font-family: Meraas Aktiv;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  text-underline-position: from-font;\n  text-decoration-skip-ink: none;\n  color: #000000;\n  max-width: 17.1875rem;\n}\n\n.tooltip {\n  cursor: pointer;\n}";
+var css$i = ".inputLabel {\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.inputLabelTooltip {\n  position: absolute;\n  z-index: 1;\n  top: 17px;\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  z-index: 0;\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\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}\n\n.ToolTipImage {\n  position: relative;\n  left: 87.5%;\n  z-index: 2;\n  top: 2.75rem;\n  cursor: pointer;\n}\n\n.tooltipwrapper {\n  display: flex;\n  flex-direction: row !important;\n  gap: 1rem;\n}\n\n.tooltipText {\n  font-family: Meraas Aktiv;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  text-underline-position: from-font;\n  text-decoration-skip-ink: none;\n  color: #000000;\n  max-width: 17.1875rem;\n}\n\n.tooltip {\n  cursor: pointer;\n}\n\n.linkWrapper {\n  display: flex;\n  gap: 1;\n}\n\n.linkClassName {\n  text-decoration: underline;\n  cursor: pointer;\n  color: #eb0542;\n}";
 n(css$i,{});
 
 const common = {
@@ -12404,7 +12404,7 @@ const TcodeToolTip = styled(({ className, ...props }) => (React__default.createE
         fontSize: "1rem",
     },
 }));
-const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, istoolTip, toolTipText, ...rest }) => {
+const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, istoolTip, toolTipText, link, handleLink, linkWrapper = "", linkClassName = "", ...rest }) => {
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const handleInputValues = (e) => {
         onChange?.(e);
@@ -12433,7 +12433,12 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
         React__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, disabled: disabled, ...rest }),
-        error && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))));
+        error && !link && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error)),
+        error && link && (React__default.createElement("div", { className: linkWrapper },
+            React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName },
+                error,
+                React__default.createElement("span", { onClick: handleLink },
+                    React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: linkClassName }, link)))))));
 };
 
 var css$g = ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.spinner {\n  border: 2px solid transparent;\n  border-radius: 50%;\n  border-top: 2px solid currentColor;\n  animation: spin 1s linear infinite;\n}\n\n.spinnerInner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n\n.errorText {\n  color: red;\n}\n\n.button {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n}\n.button-text {\n  background: none;\n}\n.button-outlined {\n  border: 1px solid currentColor;\n}\n.button-contained {\n  background-color: currentColor;\n  color: white;\n}\n.button-primary {\n  color: blue;\n}\n.button-secondary {\n  color: gray;\n}\n.button-small {\n  font-size: 12px;\n}\n.button-medium {\n  font-size: 16px;\n}\n.button-large {\n  font-size: 20px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";