dhre-component-lib 0.8.1 → 0.8.3

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/components/TextArea/TextArea.d.ts

@@ -11,5 +11,6 @@ declare function TextArea(props: {
     placeholder: string;
     charText: string;
     property?: any;
+    isShortTextBox?: boolean;
 }): React.JSX.Element;
 export default TextArea;

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>;
 
@@ -309,6 +313,7 @@ declare function TextArea(props: {
     placeholder: string;
     charText: string;
     property?: any;
+    isShortTextBox?: boolean;
 }): React.JSX.Element;
 
 interface DrawerProps {

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}";
@@ -21879,11 +21884,11 @@ function Dropdown(props) {
                 React__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.inputTextAreaLabel {\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.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.positionRel {\n  position: relative;\n  z-index: 0;\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}";
+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.shortTextBox {\n  min-width: 70%;\n  width: 100%;\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.inputTextAreaLabel {\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.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.positionRel {\n  position: relative;\n  z-index: 0;\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 { value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const checkSpecialChar = (e) => {
         if (!/[0-9a-zA-Z ]/.test(e.key)) {
@@ -21904,7 +21909,7 @@ function TextArea(props) {
             ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputTextAreaLabel' },
                 placeholder.replace("*", ""),
                 placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
-            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
+            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `${isShortTextBox ? "shortTextBox" : "textArea"} ${value && value.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
         React__default.createElement(Typography, { className: `characters ${value &&
                 value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,