@bikdotai/bik-component-library 0.0.646-beta.6 → 0.0.646-beta.8

package/dist/esm/components/data-source-panel/model.d.ts

@@ -0,0 +1,135 @@
+/// <reference types="react" />
+export interface MessageSource {
+    sources: InfoContent[];
+    intent: string;
+    messageId: string;
+    output_message_id?: string;
+    isUnsatisfactoryAnswer?: boolean;
+    isEditable?: boolean;
+}
+export interface InfoContent {
+    title: string;
+    docId?: string;
+    subTitle?: string;
+    link?: string | string[];
+    type?: string;
+    intent?: string;
+    productId?: string;
+    variantId?: string;
+    imageUrl?: string;
+    isTrainable?: boolean;
+    subIntent?: string;
+    insights?: string;
+}
+export interface DataSourcePanelZeroState {
+    title: string;
+    leadingIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    onClick: () => void;
+}
+export interface AllSourceInfoDetailsCustomDataModel {
+    [keys: string]: SourceInfoDetailsCustomDataModel;
+}
+export interface SourceInfoDetailsCustomDataModel {
+    storeId: string;
+    type: CustomDataType;
+    data: FileMetaData | CustomDataDocument | CustomDataFaqModel;
+    content?: string;
+    docId: string;
+    onEditClick: (item: FileMetaData | CustomDataDocument | CustomDataFaqModel, type: string) => void;
+    redirect?: (source: InfoContent) => void;
+}
+export declare enum CustomDataCategories {
+    PAGE = "page",
+    POLICY = "policy",
+    ARTICLE = "article",
+    UPLOADED = "uploaded",
+    TEXT = "text"
+}
+export type CustomDataCategory = keyof typeof CustomDataCategories;
+export declare enum CustomDataType {
+    FAQ = "FAQ",
+    FILES = "FILES",
+    WEBSITE_LINKS = "WEBSITE_LINKS",
+    TEXTS = "TEXTS",
+    FETCHED_LINKS = "FETCHED_LINKS",
+    URL = "URL",
+    TRAINING_TEMPLATE = "TRAINING_TEMPLATE"
+}
+export interface FileMetaData {
+    fileId: string;
+    fileName: string;
+    fileSize: string;
+    fileType: string;
+    fileUrl: string;
+    uploadType: 'URL' | 'FileUpload';
+    uploadDate: Date;
+    characterCount?: number;
+    intent?: string;
+    fileContent?: string;
+    fileContentPath?: string;
+    fileContentText?: string;
+    isActive?: boolean;
+}
+export interface CustomDataDocument {
+    category: CustomDataCategory;
+    id: string;
+    handle?: string;
+    title?: string;
+    createdAt?: Date;
+    updatedAt?: Date;
+    url?: string;
+    isActive?: boolean;
+    characterCount?: number;
+    intent?: string;
+    wasManualLinkAdded?: boolean;
+    fileContent?: string;
+    fileContentText?: string;
+    fileId?: string;
+    fileContentPath?: string;
+    fileName?: string;
+    lastEditedAt?: number;
+}
+export interface CustomDataFaqModel {
+    id: string;
+    question: string;
+    answer: string;
+    createdAt: Date;
+    updatedAt?: Date;
+    questionSpecificProducts?: Array<FaqProductModel>;
+    products?: Array<FaqProductModel>;
+    cta?: Array<LiveChatCTA>;
+    intent?: string;
+    crmNoteMeta?: CRMNoteMeta;
+    fromEditResponse?: boolean;
+    isTemplateFAQ?: boolean;
+    isSatisfactoryAnswer?: boolean;
+}
+export interface FaqProductModel {
+    id: string;
+    variantId: string;
+    name: string;
+    imageUrl: string;
+}
+export interface CRMNoteMeta {
+    createdAt: Date;
+    sessionId: string;
+    userId: number;
+    messageId: string;
+    customerId: string;
+    updatedAt: Date;
+}
+export interface LiveChatCTA {
+    url: string;
+    cta: string;
+    buttonType: string;
+}
+export interface footerButtonOptionModel {
+    title?: string;
+    subtitle?: string;
+    buttonTitle: string;
+    addFaqProps?: any;
+    redirectUrl?: string;
+    hideAddDataButton?: boolean;
+    navigate?: (pagePathKey: Record<string, string>, params?: object, queryParam?: object, openInNewTab?: boolean) => void;
+    onClick: () => void;
+}

package/dist/esm/components/data-source-panel/model.js

@@ -0,0 +1 @@
+var E,T;!function(E){E.PAGE="page",E.POLICY="policy",E.ARTICLE="article",E.UPLOADED="uploaded",E.TEXT="text"}(E||(E={})),function(E){E.FAQ="FAQ",E.FILES="FILES",E.WEBSITE_LINKS="WEBSITE_LINKS",E.TEXTS="TEXTS",E.FETCHED_LINKS="FETCHED_LINKS",E.URL="URL",E.TRAINING_TEMPLATE="TRAINING_TEMPLATE"}(T||(T={}));export{E as CustomDataCategories,T as CustomDataType};

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

@@ -6,7 +6,7 @@ interface ChipInputProps {
     onDeleteChip: (chip: SingleOption) => void;
     containerStyle?: React.CSSProperties;
     isDropdownOpened?: boolean;
-    sizeToUse?: 'default' | 'small' | 'x-small';
+    sizeToUse?: 'default' | 'small';
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as s}from"react";import r from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import n from"../../assets/icons/chevronDown.svg.js";import i from"../../assets/icons/cross.svg.js";import{Tag as c}from"../tag/Tag.js";import{BodyCaption as a}from"../TypographyStyle.js";import{ChipInputWrapper as m}from"./Common.styled.js";const h=h=>{let{chips:d,onDeleteChip:g,containerStyle:p={},sizeToUse:j="default",isDropdownOpened:f,placeholder:b="Select.."}=h;const[y,u]=l(),[v,O]=l(0);return s((()=>{if(!d)return;let e=0;const t=(e=>1===e.length?100:2===e.length?40:34)(d);let l=d.filter((l=>(e+=l.label.length,e<=t)));0===l.length&&d.length>0&&(l=[d[0]]),u(l),O(d.length-l.length)}),[d]),e(m,Object.assign({style:Object.assign({},p)},{children:[e("div",Object.assign({className:"chips-container"},{children:[null==y?void 0:y.map(((e,l)=>t("div",Object.assign({style:{zIndex:2}},{children:t(c,Object.assign({tagText:r.truncateText(e.selectedLabel||e.label,40),TrailingIcon:()=>t(i,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(e)}})},{children:e.selectedLabel||e.label}))}),l))),!!v&&t(a,Object.assign({color:o.content.placeholder},{children:`+${v} more`})),0===d.length&&t("div",Object.assign({style:{color:o.content.placeholder}},{children:b}))]})),t("div",{children:t(n,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},width:"x-small"===j?16:"small"===j?20:24,height:"x-small"===j?16:"small"===j?20:24,color:o.content.primary})})]}))};export{h as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as s}from"react";import r from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import n from"../../assets/icons/chevronDown.svg.js";import i from"../../assets/icons/cross.svg.js";import{Tag as c}from"../tag/Tag.js";import{BodyCaption as a}from"../TypographyStyle.js";import{ChipInputWrapper as h}from"./Common.styled.js";const m=m=>{let{chips:d,onDeleteChip:g,containerStyle:p={},sizeToUse:j="default",isDropdownOpened:f,placeholder:b="Select.."}=m;const[y,u]=l(),[v,O]=l(0);return s((()=>{if(!d)return;let e=0;const t=(e=>1===e.length?100:2===e.length?40:34)(d);let l=d.filter((l=>(e+=l.label.length,e<=t)));0===l.length&&d.length>0&&(l=[d[0]]),u(l),O(d.length-l.length)}),[d]),e(h,Object.assign({style:Object.assign({},p)},{children:[e("div",Object.assign({className:"chips-container"},{children:[null==y?void 0:y.map(((e,l)=>t("div",Object.assign({style:{zIndex:2}},{children:t(c,Object.assign({tagText:r.truncateText(e.selectedLabel||e.label,40),TrailingIcon:()=>t(i,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(e)}})},{children:e.selectedLabel||e.label}))}),l))),!!v&&t(a,Object.assign({color:o.content.placeholder},{children:`+${v} more`})),0===d.length&&t("div",Object.assign({style:{color:o.content.placeholder}},{children:b}))]})),t("div",{children:t(n,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},width:"small"===j?20:24,height:"small"===j?20:24,color:o.content.primary})})]}))};export{m as default};

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OpenDropdownProps, SingleOption } from './type';
 export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
-    size?: 'default' | 'small' | 'x-small';
+    size?: 'default' | 'small';
     disabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useState as l,useRef as i,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import c from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,w,x,b,{placeHolder:j,size:I,onSelect:y,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:D,showPlaceholderWhenSelected:T=!1,inputStyle:C={},inputType:P="default",onDeleteChip:E,truncatedText:z,showLeadingIconInPlaceholder:W=!1}=v,A=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder"]);const[L,_]=l(!1),k=null!=I?I:"default",M=i(),[N,U]=l(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),U([...o])}),[A.options]),r((()=>{O&&U([...O])}),[O]);const V=h(N);return o(p.Provider,Object.assign({value:{InputWrapper:Object.assign({height:D||("x-small"===k?24:"small"===k?32:48),width:null!==(g=null!==(f=A.buttonWidth)&&void 0!==f?f:A.width)&&void 0!==g?g:"100%",zIndex:1,cursor:"pointer",padding:"x-small"===k?"4px 8px":"6px 8px"},C),input:{minHeight:"100%"}}},{children:t(u,Object.assign({"data-test":A["data-test"],ref:M,onSelect:function(e){Array.isArray(e)?U([...e]):U([e]),null==y||y(e)},disabled:S,onDropdownVisbilityChange:e=>_(e)},A,{children:["default"==P&&o(d,{version:A.version,noErrorHint:H,state:S?"disabled":"none",value:T?j:null!=V?V:"",errorMessage:A.error,variant:k,placeholder:null!=j?j:"Select an option",width:null!==(w=A.width)&&void 0!==w?w:"100%",onChangeText:m,leftIcon:W&&(null===(x=N[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=N[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>o(a,{style:{transform:L?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===k?16:"small"===k?20:24,height:"x-small"===k?16:"small"===k?20:24,color:s.content.primary})},truncateText:null==z||z}),"chip"==P&&o(c,{placeholder:null!=j?j:"Select options",chips:N,onDeleteChip:e=>{null==E||E(e)},isDropdownOpened:L,sizeToUse:k,containerStyle:{width:null!==(b=A.width)&&void 0!==b?b:"100%",cursor:"pointer"}})]}))}))};v.displayName="Dropdown";export{v as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as a}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import c from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,w,b,j,{placeHolder:I,size:y,onSelect:x,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:D,showPlaceholderWhenSelected:T=!1,inputStyle:C={},inputType:P="default",onDeleteChip:E,truncatedText:z,showLeadingIconInPlaceholder:W=!1}=v,A=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder"]);const[L,_]=i(!1),k=null!=y?y:"default",M=l(),[N,U]=i(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),U([...o])}),[A.options]),r((()=>{O&&U([...O])}),[O]);const V=h(N);return o(p.Provider,Object.assign({value:{InputWrapper:Object.assign({height:D||("small"===k?32:48),width:null!==(g=null!==(f=A.buttonWidth)&&void 0!==f?f:A.width)&&void 0!==g?g:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},C),input:{minHeight:"100%"}}},{children:t(u,Object.assign({"data-test":A["data-test"],ref:M,onSelect:function(e){Array.isArray(e)?U([...e]):U([e]),null==x||x(e)},disabled:S,onDropdownVisbilityChange:e=>_(e)},A,{children:["default"==P&&o(a,{version:A.version,noErrorHint:H,state:S?"disabled":"none",value:T?I:null!=V?V:"",errorMessage:A.error,variant:k,placeholder:null!=I?I:"Select an option",width:null!==(w=A.width)&&void 0!==w?w:"100%",onChangeText:m,leftIcon:W&&(null===(b=N[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=N[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>o(d,{style:{transform:L?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"small"===k?20:24,height:"small"===k?20:24,color:s.content.primary})},truncateText:null==z||z}),"chip"==P&&o(c,{placeholder:null!=I?I:"Select options",chips:N,onDeleteChip:e=>{null==E||E(e)},isDropdownOpened:L,sizeToUse:k,containerStyle:{width:null!==(j=A.width)&&void 0!==j?j:"100%",cursor:"pointer"}})]}))}))};v.displayName="Dropdown";export{v as Dropdown};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../button/model';
-export type InputVariant = 'default' | 'small' | 'x-small';
+export type InputVariant = 'default' | '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 {

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

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