dhre-component-lib 0.8.2 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/TextArea/TextArea.d.ts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.esm.js +3 -3
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +3 -3
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/components/TextArea/TextArea.d.ts CHANGED
@@ -11,5 +11,6 @@ declare function TextArea(props: {
11
11
  placeholder: string;
12
12
  charText: string;
13
13
  property?: any;
14
+ isShortTextBox?: boolean;
14
15
  }): React.JSX.Element;
15
16
  export default TextArea;
package/dist/index.d.ts CHANGED
@@ -313,6 +313,7 @@ declare function TextArea(props: {
313
313
  placeholder: string;
314
314
  charText: string;
315
315
  property?: any;
316
+ isShortTextBox?: boolean;
316
317
  }): React.JSX.Element;
317
318
 
318
319
  interface DrawerProps {
package/dist/index.esm.js CHANGED
@@ -21884,11 +21884,11 @@ function Dropdown(props) {
21884
21884
  React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
21885
21885
  }
21886
21886
 
21887
- 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}";
21887
+ 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}";
21888
21888
  n(css$8,{});
21889
21889
 
21890
21890
  function TextArea(props) {
21891
- const { value, onChange, requiredLimit, placeholder, charText, property } = props;
21891
+ const { value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
21892
21892
  const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
21893
21893
  const checkSpecialChar = (e) => {
21894
21894
  if (!/[0-9a-zA-Z ]/.test(e.key)) {
@@ -21909,7 +21909,7 @@ function TextArea(props) {
21909
21909
  ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputTextAreaLabel' },
21910
21910
  placeholder.replace("*", ""),
21911
21911
  placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
21912
- 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 })),
21912
+ 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 })),
21913
21913
  React__default.createElement(Typography, { className: `characters ${value &&
21914
21914
  value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
21915
21915
  value?.length ?? 0,