@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -1 +1 @@
-import{jsx as o,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as s,useEffect as a,useCallback as i}from"react";import{ImageService as p}from"../../image-compress/ImageCompress.js";import{StateInterface as l}from"../../states/StateComponent.js";import{StateModalComponent as n}from"../../states-modal/StateModalComponent.js";import"../../modals/styledModal.js";import{BikImageCropper as c}from"../BikImageCropper.js";const d=({cropOptions:d,fileTitle:m,compressionOptions:u,currentImage:g,options:h,onFinish:f,onCancel:C,fileUploadOptions:w,loadingStateOptions:y})=>{const I=t(null),[F,R]=s(),[b,j]=s(g),[O,T]=s(!1);a((()=>{h.upload?(R("upload"),setTimeout((()=>{k()}),500)):h.crop?R("crop"):h.compress?R("compress"):h.uploadToFirestorage?R("cloud-upload"):T(!0)}),[h.upload,h.crop,h.compress,h.uploadToFirestorage]);const v=i(((o,e)=>{if(!h.uploadToFirestorage)return f(o,e),void T(!0);R("cloud-upload"),w&&w.uploadFile(e,w.path).then((r=>{f(o,e,r),T(!0)})).catch((o=>{console.log("starting err process with ")}))}),[]),E=o=>{o||C();const e=p.base64ToImage(o);h.compress?(R("compress"),p.compressImage(e,u).then((o=>{if(!o)return T(!0),void C();v(o.base64,o.compressedFile)}))):v(o,e)},k=()=>{I.current.click()};return O?o(e,{}):"cloud-upload"===F?!w||w.success?o(e,{}):w.error?o("div",{children:o(n,{states:l.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{T(!0),C()}})}):o("div",{children:o(n,{headerImage:y?.headerImage,states:l.LOADING,heading:`Uploading your ${m||"photo"}`,subline:`Please wait while we upload your ${m||"photo"}`,isButtonEnabled:!1,width:300})}):r(e,{children:[h.upload&&o("input",{ref:I,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;j({src:r.result}),o=r.result,h.crop?R("crop"):E(o)},e&&r.readAsDataURL(e)}}),"crop"===F&&o(c,{src:b.src,onCropComplete:o=>{j({src:o}),E(o)},aspectRatio:d.aspectRatio,onCancel:C})]})};export{d as BikImagePipeline};
+import{jsx as o,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as s,useEffect as a,useCallback as i}from"react";import{ImageService as l}from"../../image-compress/ImageCompress.js";import{StateInterface as p}from"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import{StateModalComponent as n}from"../../states-modal/StateModalComponent.js";import"../../modals/styledModal.js";import{BikImageCropper as c}from"../BikImageCropper.js";const d=d=>{let{cropOptions:m,fileTitle:u,compressionOptions:g,currentImage:h,options:f,onFinish:C,onCancel:w,fileUploadOptions:y,loadingStateOptions:I}=d;const b=t(null),[j,v]=s(),[F,R]=s(h),[O,T]=s(!1);a((()=>{f.upload?(v("upload"),setTimeout((()=>{B()}),500)):f.crop?v("crop"):f.compress?v("compress"):f.uploadToFirestorage?v("cloud-upload"):T(!0)}),[f.upload,f.crop,f.compress,f.uploadToFirestorage]);const E=i(((o,e)=>{if(!f.uploadToFirestorage)return C(o,e),void T(!0);v("cloud-upload"),y&&y.uploadFile(e,y.path).then((r=>{C(o,e,r),T(!0)})).catch((o=>{console.log("starting err process with ")}))}),[]),k=o=>{o||w();const e=l.base64ToImage(o);f.compress?(v("compress"),l.compressImage(e,g).then((o=>{if(!o)return T(!0),void w();E(o.base64,o.compressedFile)}))):E(o,e)},B=()=>{b.current.click()};return O?o(e,{}):"cloud-upload"===j?!y||y.success?o(e,{}):y.error?o("div",{children:o(n,{states:p.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{T(!0),w()}})}):o("div",{children:o(n,{headerImage:null==I?void 0:I.headerImage,states:p.LOADING,heading:`Uploading your ${u||"photo"}`,subline:`Please wait while we upload your ${u||"photo"}`,isButtonEnabled:!1,width:300})}):r(e,{children:[f.upload&&o("input",{ref:b,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;R({src:r.result}),o=r.result,f.crop?v("crop"):k(o)},e&&r.readAsDataURL(e)}}),"crop"===j&&o(c,{src:F.src,onCropComplete:o=>{R({src:o}),k(o)},aspectRatio:m.aspectRatio,onCancel:w})]})};export{d as BikImagePipeline};

package/dist/esm/components/image-cropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BikImageCropper';
+export * from './BikImagePipeline/BikImagePipeline';

package/dist/esm/components/image-cropper/useMockFileUpload.d.ts

@@ -0,0 +1,8 @@
+interface FileUploadOptions {
+    uploadProgress: number;
+    uploadFile: (file: File, path: string) => Promise<string>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockFileUpload: () => FileUploadOptions;
+export default useMockFileUpload;

package/dist/esm/components/input/ChipInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const extractSingleValueIfAny: (nativeID: string) => string;
+export declare const getInputNode: (nativeID: string) => HTMLInputElement;
+export interface ChipInputProps {
+    onChipsChange: (chips: (string | number)[]) => void;
+    placeholder: string;
+    label?: string;
+    labelColor?: string;
+    hintText?: string;
+    hintTextColor?: string;
+    chipTheme?: () => void;
+    chips: string[];
+    error?: string;
+    inputHeight?: number;
+    createChipKeys?: (string | number)[];
+    chipsContainerCustomStyle?: React.CSSProperties;
+    nativeID?: string;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

package/dist/esm/components/input/ChipInput.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as n}from"react";import o from"react-chips";import{COLORS as i}from"../../constants/Theme.js";import{BodySecondary as c,BodyCaption as l}from"../TypographyStyle.js";import{theme as a,chipTheme as p}from"./ChipInput.styled.js";var s=({onChipsChange:s,placeholder:h,chips:m,label:d,labelColor:u,hintText:y,hintTextColor:f,error:C,inputHeight:g,createChipKeys:v,chipsContainerCustomStyle:x,nativeID:T})=>{const[b,j]=r(!1);return n((()=>{document.querySelector(`#${T} input`)?.addEventListener("focus",(()=>{j(!0)})),document.querySelector(`#${T} input`)?.addEventListener("blur",(()=>{j(!1)}))}),[]),e("div",{style:{display:"flex",flexDirection:"column",gap:8},id:T,children:[d&&t(c,{style:{color:b?i.content.brand:C?i.content.negative:u||i.content.primary},children:d}),t(o,{value:m,theme:a(!!C,g,x,b),chipTheme:p,placeholder:0===m.length&&!!h&&!b&&h,onChange:e=>{s(e)},createChipKeys:v||","}),(!!y||!!C)&&t(l,{style:{color:C?i.content.negative:f||i.content.secondary},children:C||y})]})};export{s as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";import o from"react-chips";import{COLORS as i}from"../../constants/Theme.js";import{BodySecondary as l,BodyCaption as c}from"../TypographyStyle.js";import{theme as a,chipTheme as s}from"./ChipInput.styled.js";const p=p=>{let{onChipsChange:h,placeholder:m,chips:d,label:u,labelColor:y,hintText:g,hintTextColor:f,error:v,inputHeight:C,createChipKeys:b,chipsContainerCustomStyle:j,nativeID:x}=p;const[T,S]=n(!1);return r((()=>{var e,t;null===(e=document.querySelector(`#${x} input`))||void 0===e||e.addEventListener("focus",(()=>{S(!0)})),null===(t=document.querySelector(`#${x} input`))||void 0===t||t.addEventListener("blur",(()=>{S(!1)}))}),[]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:x},{children:[u&&t(l,Object.assign({style:{color:T?i.content.brand:v?i.content.negative:y||i.content.primary}},{children:u})),t(o,{value:d,theme:a(!!v,C,j,T),chipTheme:s,placeholder:0===d.length&&!!m&&!T&&m,onChange:e=>{h(e)},createChipKeys:b||","}),(!!g||!!v)&&t(c,Object.assign({style:{color:v?i.content.negative:f||i.content.secondary}},{children:v||g}))]}))};export{p as default};

package/dist/esm/components/input/ChipInput.styled.d.ts

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/dist/esm/components/input/ChipInput.styled.js

@@ -1 +1 @@
-import{COLORS as e}from"../../constants/Theme.js";const o={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},n=(o,n,r,t)=>({chipsContainer:{display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:o?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`},...r??{}},container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:n||32,width:"100%",paddingTop:0,paddingBottom:0}});export{o as chipTheme,n as theme};
+import{COLORS as e}from"../../constants/Theme.js";const n={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},o=(n,o,r,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:n?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`}},null!=r?r:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});export{n as chipTheme,o as theme};

package/dist/esm/components/input/Input-helper.d.ts

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

package/dist/esm/components/input/Input-helper.js

@@ -1 +1 @@
-import{phone as n}from"phone";const r=n=>n&&"function"==typeof n,e=(r,e,t={})=>{let i;const a=["phonenumber","zip","number"].includes(e),m=a?r?Number(r):null:r;if(null==m||""===m)return[!0,""];if(a&&String(m).length&&(t.min&&m<t.min||t.max&&m>t.max))return[!1,`Enter valid number between ${t.min} and ${t.max}`];if("email"===e)return i=/(.+)@(.+){2,}\.(.+){2,}/,m.match(i)?[!0,""]:[!1,"Enter a valid email id"];if("url"===e)return i=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,m.match(i)?[!0,""]:[!1,"Enter a valid url"];if("number"===e)return m>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===e)return 6===String(m).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===e){const{isValid:r}=n("+"+String(m));return r?[!0,""]:[!1,"Enter a valid phonenumber"]}return m?.trim().length>0?[!0,""]:[!1,"Enter a valid data"]};export{r as isFunction,e as validateInput};
+import{phone as n}from"phone";const e=n=>n&&"function"==typeof n,r=function(e,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),l=a?e?Number(e):null:e;if(null==l||""===l)return[!0,""];if(a&&String(l).length&&(i.min&&l<i.min||i.max&&l>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,l.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,l.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return l>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(l).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:e}=n("+"+String(l));return e?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==l?void 0:l.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};export{e as isFunction,r as validateInput};

package/dist/esm/components/input/Input.d.ts

@@ -1,76 +1,72 @@
-import React__default from 'react';
-import { ButtonProps } from '../button/model.js';
-
-type InputVariant = 'default' | 'small' | 'x-small';
-type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
-type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
-interface InputProps {
-    'data-test'?: string;
-    noErrorHint?: boolean;
-    placeholder?: string;
-    variant?: InputVariant;
-    width?: string;
-    height?: string;
-    leftIcon?: {
-        icon: React__default.FC;
-        callback?: () => void;
-    };
-    rightIcon?: {
-        icon: React__default.FC;
-        callback?: () => void;
-    };
-    labelElement?: React__default.ReactNode;
-    labelText?: string;
-    maxCharLimit?: number;
-    isRequired?: boolean;
-    errorMessage?: string;
-    hintText?: string;
-    state?: InputStateI;
-    type?: InputTypeI;
-    /**
-        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
-     **/
-    validate?: (input?: string | number) => [boolean, string];
-    onChangeText: (input: string, event?: Event) => void;
-    button?: {
-        text: string;
-        onClick?: () => void;
-        buttonProps?: ButtonProps;
-    };
-    suffixText?: string;
-    prefixText?: string;
-    value?: string;
-    reset?: boolean;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onClick?: (e: any) => void;
-    isActive?: boolean;
-    id?: string;
-    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
-    rangeValidation?: {
-        min: number;
-        max: number;
-    };
-    noKeyDownChange?: boolean;
-    skipFocus?: boolean;
-    version?: '1.0' | '2.0';
-    textControl?: boolean;
-    noMaxCharCheck?: boolean;
-    tooltipText?: string;
-    autoGrow?: boolean;
-    minHeight?: string;
-    maxHeight?: string;
-    labelTextBold?: boolean;
-    truncateText?: boolean;
-    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
-    hightlightInputColor?: string;
-    onKeyDownEvent?: (e: Event) => void;
-    hideInputHeader?: boolean;
-    hideBorder?: boolean;
-    inputWrapperStyles?: React__default.CSSProperties;
-    minCharsToTrigger?: number;
-}
-declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
-
-export { Input };
-export type { InputProps, InputStateI, InputTypeI, InputVariant };
+import React from 'react';
+import { ButtonProps } from '../button/model';
+export type InputVariant = 'default' | 'small' | 'x-small';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+export interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    labelElement?: React.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
+     **/
+    validate?: (input?: string | number) => [boolean, string];
+    onChangeText: (input: string, event?: Event) => void;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React.CSSProperties;
+    minCharsToTrigger?: number;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as r,useState as o,useContext as l,useRef as a,useEffect as s}from"react";import{Button as h}from"../button/Button.js";import{isFunction as c,validateInput as p}from"./Input-helper.js";import{Tooltip as u}from"../tooltips/Tooltip.js";import{TitleSmall as d,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import v from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as y,MaxCharStyle as C,InputWrapper as T,IconHolder as b,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as j,InputHeader as B}from"./Input.styled.js";const L=r(((r,L)=>{const{placeholder:H,leftIcon:E,rightIcon:M,labelText:P,maxCharLimit:S,isRequired:D,hintText:O,type:z,state:F,validate:A,variant:K,button:N,suffixText:R,prefixText:G,onChangeText:W,value:_,noErrorHint:q,reset:V,rangeValidation:$,noKeyDownChange:J,version:Q,noMaxCharCheck:U,labelElement:X,autoGrow:Y,minHeight:Z,maxHeight:ee,labelTextBold:te,truncateText:ie,maxCharLimitPosition:ne,hightlightInputColor:re,onKeyDownEvent:oe,hideInputHeader:le,hideBorder:ae,inputWrapperStyles:se,minCharsToTrigger:he}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,...r},ce=E?.icon,pe=M?.icon,[ue,de]=o(!1),[me,ge]=o(!1),[ve,xe]=o(),fe="x-small"===K?"12px":"small"===K?"18px":"22px",ye=l(x),[Ce,Te]=o(),be=a(null),we=L??be;s((()=>{Te(_),!_&&Y&&(we.current.style.height=Z||"48px")}),[_]),s((()=>{we.current&&r.onReferenceInit?.(we.current)}),[we]),s((()=>{const e=we.current;if(e&&["phonenumber","zip","number"].includes(z))return e.addEventListener("wheel",Be,{passive:!1}),()=>{e.removeEventListener("wheel",Be)}}),[]),s((()=>{V&&Te("")}),[V]),s((()=>{ge(!!r.isActive),r.isActive&&we.current?.focus()}),[r.isActive]),s((()=>{xe(r.errorMessage)}),[r.errorMessage]),s((()=>{de(!1),("invalid"===r.state||ve||"disabled-invalid"===r.state)&&de(!0),"active"===r.state&&we.current?.focus()}),[r.state,ve]),s((()=>{de(!!ve||"invalid"===r.state)}),[ve,r.state]);const Ie=(e,...t)=>{c(e)&&e(...t)},ke=()=>"zip"===z?6:2e3,je=e=>{const t=0!==S?S:ke(),i=he,n=e.target.value;oe&&(!n.length||n.length>=i)&&oe(e),J||n.length&&!(n.length>=i)||W(_||"",e),U||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Be=e=>{e.preventDefault()},Le=e=>{let t=e.target.value;const i=0!==S?S+1:ke(),n=he;if(!U&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),r.textControl||Te(t),n&&t&&t.length<n)return;W(t,e),Y&&(we.current.style.height=`${we.current.scrollHeight}px`,t||(we.current.style.height=Z||"48px"));const o=A||p;if(!o||!c(o))return;const[l,a]=o(t,z,$);de(!l),xe(r.errorMessage?r.errorMessage:a)},He=e=>{r.skipFocus||ge(!0),Ie(r.onFocus?.(e))},Ee=e=>{r.skipFocus||ge(!1),Ie(r.onBlur?.(e))},Me=()=>e(i,{children:["multiline"!==z&&t("input",{className:ie?"truncate-class":"","data-test":r["data-test"],id:r.id,style:ye?.input??{},ref:we,type:["phonenumber","zip","number"].includes(z)?"number":z,value:Ce,onFocus:e=>He(e),onBlur:e=>Ee(e),placeholder:H||"Enter here",onChange:Le,onClick:e=>Ie(r.onClick),onKeyDown:e=>je(e)}),"multiline"===z&&t("textarea",{"data-test":r["data-test"],value:Ce,ref:we,onFocus:e=>He(e),onBlur:e=>Ee(e),onClick:e=>Ie(r.onClick),placeholder:H||"Enter here",onChange:Le,onKeyDown:e=>je(e),maxLength:S>0?S:void 0})]});return e(f,{width:r.width,height:r.height,state:F,type:z,style:ye?.RootContainer??{},children:[e("div",{className:"flex-align-center",children:[!q&&(!!O||!!ve)&&e(y,{invalid:!!ve,children:[!!ve&&t(v,{width:16,height:16}),ve||O]}),S>0&&"BOTTOM"===ne&&e(C,{position:"BOTTOM",children:[(_??"").toString()?.length??0,"/",S]})]}),e(T,{variant:K,state:F,width:r.width,isActive:"active"===F||me,isInvalid:ue,style:ye?.InputWrapper??se??{},version:Q,height:r.height,hightlightInputColor:re,hideBorder:ae,children:[!!ce&&t(b,{variant:K,iconSize:fe,onClick:()=>Ie(E?.callback),isLeft:!0,style:ye?.IconHolder??{},children:t(ce,{})}),!!G&&t(w,{variant:K,children:G}),"default"===K&&t(I,{height:r.height,type:r.type,minHeight:Z,maxHeight:ee,autoGrow:Y,children:Me()}),["x-small","small"].includes(K)&&t(k,{height:r.height,type:r.type,children:Me()}),!!pe&&t(b,{variant:K,iconSize:fe,onClick:()=>Ie(M?.callback),isLeft:!1,children:t(pe,{})}),!!R&&t(j,{variant:K,children:R}),N&&N.text&&t(h,{buttonText:N.text,onClick:()=>Ie(N?.onClick)}),N&&N.buttonProps&&t(h,{...N.buttonProps})]}),!le&&(!!P||!!S)&&e(B,{invalid:ue,children:[X&&X,e("div",{className:"label__container",children:[e(te?d:m,{children:[P,D?t("span",{children:"*"}):""]}),r.tooltipText&&t(u,{body:r.tooltipText,placement:"top",children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:ue?g.content.negative:g.content.primary})})})]}),S>0&&"TOP"===ne&&e(C,{children:[(_??"").toString()?.length??0,"/",S]})]})]})}));L.displayName="Input";export{L as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as g}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as T,InputContainer as O,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const B=l(((l,B)=>{var L,H,E,M,P,S,D,z;const{placeholder:A,leftIcon:F,rightIcon:K,labelText:N,maxCharLimit:R,isRequired:G,hintText:W,type:_,state:q,validate:V,variant:$,button:J,suffixText:Q,prefixText:U,onChangeText:X,value:Y,noErrorHint:Z,reset:ee,rangeValidation:te,noKeyDownChange:ne,version:ie,noMaxCharCheck:le,labelElement:re,autoGrow:oe,minHeight:ae,maxHeight:se,labelTextBold:ce,truncateText:he,maxCharLimitPosition:ue,hightlightInputColor:de,onKeyDownEvent:ve,hideInputHeader:ge,hideBorder:pe,inputWrapperStyles:me,minCharsToTrigger:xe}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),be=null==F?void 0:F.icon,fe=null==K?void 0:K.icon,[ye,je]=r(!1),[Ce,Te]=r(!1),[Oe,we]=r(),Ie="x-small"===$?"12px":"small"===$?"18px":"22px",ke=o(x),[Be,Le]=r(),He=a(null),Ee=null!=B?B:He;s((()=>{Le(Y),!Y&&oe&&(Ee.current.style.height=ae||"48px")}),[Y]),s((()=>{var e;Ee.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Ee.current))}),[Ee]),s((()=>{const e=Ee.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",De,{passive:!1}),()=>{e.removeEventListener("wheel",De)}}),[]),s((()=>{ee&&Le("")}),[ee]),s((()=>{var e;Te(!!l.isActive),l.isActive&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{we(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;je(!1),("invalid"===l.state||Oe||"disabled-invalid"===l.state)&&je(!0),"active"===l.state&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.state,Oe]),s((()=>{je(!!Oe||"invalid"===l.state)}),[Oe,l.state]);const Me=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Pe=()=>"zip"===_?6:2e3,Se=e=>{const t=0!==R?R:Pe(),n=xe,i=e.target.value;ve&&(!i.length||i.length>=n)&&ve(e),ne||i.length&&!(i.length>=n)||X(Y||"",e),le||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},De=e=>{e.preventDefault()},ze=e=>{let t=e.target.value;const n=0!==R?R+1:Pe(),i=xe;if(!le&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Le(t),i&&t&&t.length<i)return;X(t,e),oe&&(Ee.current.style.height=`${Ee.current.scrollHeight}px`,t||(Ee.current.style.height=ae||"48px"));const r=V||u;if(!r||!h(r))return;const[o,a]=r(t,_,te);je(!o),we(l.errorMessage?l.errorMessage:a)},Ae=e=>{var t;l.skipFocus||Te(!0),Me(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Fe=e=>{var t;l.skipFocus||Te(!1),Me(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ke=()=>{var i;return e(n,{children:["multiline"!==_&&t("input",{className:he?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==ke?void 0:ke.input)&&void 0!==i?i:{},ref:Ee,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Be,onFocus:e=>Ae(e),onBlur:e=>Fe(e),placeholder:A||"Enter here",onChange:ze,onClick:e=>Me(l.onClick),onKeyDown:e=>Se(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Be,ref:Ee,onFocus:e=>Ae(e),onBlur:e=>Fe(e),onClick:e=>Me(l.onClick),placeholder:A||"Enter here",onChange:ze,onKeyDown:e=>Se(e),maxLength:R>0?R:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(L=null==ke?void 0:ke.RootContainer)&&void 0!==L?L:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Z&&(!!W||!!Oe)&&e(f,Object.assign({invalid:!!Oe},{children:[!!Oe&&t(m,{width:16,height:16}),Oe||W]})),R>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(H=(null!=Y?Y:"").toString())||void 0===H?void 0:H.length)&&void 0!==E?E:0,"/",R]}))]})),e(j,Object.assign({variant:$,state:q,width:l.width,isActive:"active"===q||Ce,isInvalid:ye,style:null!==(P=null!==(M=null==ke?void 0:ke.InputWrapper)&&void 0!==M?M:me)&&void 0!==P?P:{},version:ie,height:l.height,hightlightInputColor:de,hideBorder:pe},{children:[!!be&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==F?void 0:F.callback),isLeft:!0,style:null!==(S=null==ke?void 0:ke.IconHolder)&&void 0!==S?S:{}},{children:t(be,{})})),!!U&&t(T,Object.assign({variant:$},{children:U})),"default"===$&&t(O,Object.assign({height:l.height,type:l.type,minHeight:ae,maxHeight:se,autoGrow:oe},{children:Ke()})),["x-small","small"].includes($)&&t(w,Object.assign({height:l.height,type:l.type},{children:Ke()})),!!fe&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==K?void 0:K.callback),isLeft:!1},{children:t(fe,{})})),!!Q&&t(I,Object.assign({variant:$},{children:Q})),J&&J.text&&t(c,{buttonText:J.text,onClick:()=>Me(null==J?void 0:J.onClick)}),J&&J.buttonProps&&t(c,Object.assign({},J.buttonProps))]})),!ge&&(!!N||!!R)&&e(k,Object.assign({invalid:ye},{children:[re&&re,e("div",Object.assign({className:"label__container"},{children:[e(ce?v:g,{children:[N,G?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:ye?p.content.negative:p.content.primary})})}))]})),R>0&&"TOP"===ue&&e(y,{children:[null!==(z=null===(D=(null!=Y?Y:"").toString())||void 0===D?void 0:D.length)&&void 0!==z?z:0,"/",R]})]}))]}))}));B.displayName="Input";export{B as Input};

package/dist/esm/components/input/Input.styled.d.ts

@@ -0,0 +1,128 @@
+/// <reference types="react" />
+import { InputStateI, InputTypeI, InputVariant } from "./Input";
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    isActive?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    state?: InputStateI | undefined;
+    variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
+    hightlightInputColor?: string | undefined;
+    hideBorder?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHolder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isLeft?: boolean | undefined;
+    iconSize?: string | undefined;
+    variant?: InputVariant | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+    autoGrow?: boolean | undefined;
+    minHeight?: string | undefined;
+    maxHeight?: string | undefined;
+}, {}, {}>;
+export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, {}, {}>;
+export declare const InputHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    position?: string | undefined;
+}, {}, {}>;
+export declare const InputFooter: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, {}, {}>;
+export declare const RootContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    state?: InputStateI | undefined;
+    type: InputTypeI;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;
+export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;