@bikdotai/bik-component-library 0.0.787-beta.1 → 0.0.787-beta.11

package/dist/esm/components/avatar/Avatar.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as o,AVATAR_BACKGROUND as r,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import m from"../../assets/icons/bik_livechat.svg.js";import g from"../../assets/icons/email-channel.svg.js";import p from"../../assets/icons/facebook_channel.svg.js";import u from"../../assets/icons/gmail.svg.js";import b from"../../assets/icons/instagram-channel.svg.js";import A from"../../assets/icons/task.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const y={[o.SMALL]:16,[o.MEDIUM]:20,[o.INBOX]:24,[o.LARGE]:32},S={[r.LIGHT]:h.content.secondary,[r.WHITE]:h.content.secondary,[r.DARK]:h.surface.standard};var f;!function(e){e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat"}(f||(f={}));const E=r=>{const[E,j]=s(!1),v=()=>{const e=(r.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return r.size===o.SMALL?t(c,Object.assign({style:{color:S[r.background]}},{children:e})):r.size===o.MEDIUM||r.size===o.INBOX?t(l,Object.assign({style:{color:S[r.background]}},{children:e})):r.size===o.LARGE?t(d,Object.assign({style:{color:S[r.background]}},{children:e})):void 0};return e("div",Object.assign({style:{position:"relative"}},{children:[e(i,Object.assign({type:r.type===a.IMAGE&&E&&r.useNameFallback&&r.name?a.INITIALS:r.type,size:r.size,background:r.background},{children:[r.type===a.IMAGE&&(r.useNameFallback&&!E?t("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl,onError:()=>{j(!0)}}):r.useNameFallback&&E&&r.name?t("div",{children:v()}):t("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl})),r.type===a.INITIALS&&t("div",{children:v()}),r.type===a.ICON&&r.icon&&t(r.icon,{width:y[r.size],height:y[r.size],color:S[r.background]})]})),r.inboxSettings&&t("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:14,height:14,borderRadius:(null==r?void 0:r.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:r.inboxSettings.isSelected?r.inboxSettings.isComments?h.content.primary:h.background.brandLight:r.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(r.channelName){case f.EMAIL:case f.SMTP:return t(g,{width:11,height:11});case f.FACEBOOK:case f.FACEBOOK_CATALOG:case f.MESSENGER:return t(p,{width:11,height:11});case f.INSTAGRAM:return t(b,{width:11,height:11});case f.WHATSAPP:return t(I,{width:11,height:11});case f.GMAIL:return t(u,{width:11,height:11});case f.TASKS:return t(A,{width:11,height:11});case f.BIK_LIVECHAT:return t(m,{width:11,height:11})}})()})),r.status&&t("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:r.status?t("div",{style:{backgroundColor:"ONLINE"===r.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{y as AVATAR_SIZE_VS_ICON_SIZE_MAP,E as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,f as MESSAGE_CHANNELS};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as o,AVATAR_BACKGROUND as r,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import p from"../../assets/icons/bik_livechat.svg.js";import m from"../../assets/icons/email-channel.svg.js";import g from"../../assets/icons/facebook_channel.svg.js";import u from"../../assets/icons/gmail.svg.js";import b from"../../assets/icons/instagram-channel.svg.js";import A from"../../assets/icons/task.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const y={[o.SMALL]:16,[o.MEDIUM]:20,[o.INBOX]:24,[o.LARGE]:32},S={[r.LIGHT]:h.content.secondary,[r.WHITE]:h.content.secondary,[r.DARK]:h.surface.standard};var f;!function(t){t.INSTAGRAM="instagram",t.MESSENGER="messenger",t.WHATSAPP="whatsapp",t.GMAIL="gmail",t.LIVECHAT="livechat",t.GOOGLE_BUSINESS_CHAT="gbm",t.SHOPIFY="shopify",t.FACEBOOK="facebook",t.EMAIL="email",t.SMTP="smtp",t.FACEBOOK_CATALOG="facebook-catalog",t.TASKS="tasks",t.BIK_LIVECHAT="livechat"}(f||(f={}));const E=r=>{const[E,j]=s(!1),v=()=>{const t=(r.name||"").split(".").join(" ").split(" ").map((t=>t.charAt(0).toUpperCase())).slice(0,2).join("");return r.size===o.SMALL?e(c,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.MEDIUM||r.size===o.INBOX?e(l,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.LARGE?e(d,Object.assign({style:{color:S[r.background]}},{children:t})):void 0};return t("div",Object.assign({style:{position:"relative"}},{children:[t(i,Object.assign({type:r.type===a.IMAGE&&(E||!r.photoUrl)&&r.useNameFallback&&r.name?a.INITIALS:r.type,size:r.size,background:r.background},{children:[r.type===a.IMAGE&&(r.useNameFallback&&(!r.photoUrl||E)&&r.name?e("div",{children:v()}):r.useNameFallback&&r.photoUrl&&!E?e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl,onError:()=>{j(!0)}}):e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl})),r.type===a.INITIALS&&e("div",{children:v()}),r.type===a.ICON&&r.icon&&e(r.icon,{width:y[r.size],height:y[r.size],color:S[r.background]})]})),r.inboxSettings&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:14,height:14,borderRadius:(null==r?void 0:r.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:r.inboxSettings.isSelected?r.inboxSettings.isComments?h.content.primary:h.background.brandLight:r.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(r.channelName){case f.EMAIL:case f.SMTP:return e(m,{width:11,height:11});case f.FACEBOOK:case f.FACEBOOK_CATALOG:case f.MESSENGER:return e(g,{width:11,height:11});case f.INSTAGRAM:return e(b,{width:11,height:11});case f.WHATSAPP:return e(I,{width:11,height:11});case f.GMAIL:return e(u,{width:11,height:11});case f.TASKS:return e(A,{width:11,height:11});case f.BIK_LIVECHAT:return e(p,{width:11,height:11})}})()})),r.status&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:r.status?e("div",{style:{backgroundColor:"ONLINE"===r.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{y as AVATAR_SIZE_VS_ICON_SIZE_MAP,E as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,f as MESSAGE_CHANNELS};

package/dist/esm/components/bik-layout/BikSidebar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface MenuItem {
     key: string | number;
     displayName: string;

package/dist/esm/components/bik-layout/Sidebar.model.d.ts

@@ -0,0 +1,27 @@
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarTheme = 'brand' | 'white';
+export interface SimpleSidebarProps {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarTheme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}

package/dist/esm/components/bik-layout/SidebarPopup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface SidebarPopupI {
     menuList: Menu[];
     width?: number;

package/dist/esm/components/bik-layout/SidebarSkeleton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export interface BikSidebarShimmerProps {
     theme: SidebarTheme;
     width?: number;

package/dist/esm/components/bik-layout/SidebarStyles.d.ts

@@ -1,4 +1,4 @@
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export declare const SideBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainSideBarMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SibeBarMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/bik-layout/SimpleSidebar.d.ts

@@ -1,29 +1,3 @@
 /// <reference types="react" />
-export interface Menu {
-    key: string | number;
-    displayName: string;
-    description?: string;
-    path?: string;
-    page?: string;
-    isNew?: string;
-}
-export type SidebarTheme = 'brand' | 'white';
-export interface SimpleSidebarProps {
-    menuList: Menu[];
-    activeMenu: Menu;
-    theme: SidebarTheme;
-    showAccessUpgradePanel?: boolean;
-    header?: string;
-    width?: number;
-    zIndex?: number;
-    left?: number;
-    postion?: 'fixed' | 'sticky';
-    top?: number;
-    router: any;
-    onMouseLeaveOnMenu?: () => void;
-    onMouseEnterOnMenu?: () => void;
-    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
-    onUpgrade?: () => void;
-    isNewSidebar?: boolean;
-}
+import { SimpleSidebarProps } from './Sidebar.model';
 export declare const SimpleSidebar: React.FC<SimpleSidebarProps>;

package/dist/esm/components/floating-input-dropdown/FloatingInputDropdown.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Placement } from "../tooltips";
 import { DropdownOption, OpenDropdownProps } from '../dropdown/type';
 import { FloaterProps } from '../floater/floater';
-import { InputProps } from '../input';
+import { InputProps } from '../input/Input.model';
 type DropdownProps = OpenDropdownProps & {
     isLoading?: boolean;
     children?: React.ReactNode;

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

@@ -1,9 +1,4 @@
 import 'react-image-crop/dist/ReactCrop.css';
-export interface BikImageCropperProps {
-    aspectRatio?: number;
-    src: string;
-    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
-    onCancel: () => void;
-}
+import { BikImageCropperProps } from './BikImageCropper.model';
 export declare const BikImageCropper: (props: BikImageCropperProps) => import("react/jsx-runtime").JSX.Element;
 export default BikImageCropper;

package/dist/esm/components/image-cropper/BikImageCropper.model.d.ts

@@ -0,0 +1,6 @@
+export interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
+    onCancel: () => void;
+}

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

@@ -1,5 +1,5 @@
 import { CompressImageOptions } from "../../image-compress";
-import { BikImageCropperProps } from "..";
+import { BikImageCropperProps } from '../BikImageCropper.model';
 /**
  * Todos
  * 	- Add option to pass https url in the src / edit an image

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

@@ -1 +1 @@
-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};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r}from"react";import{COLORS as o}from"../../constants/Theme.js";import{BodySecondary as s,BodyCaption as l}from"../TypographyStyle.js";import{getContainerStyle as i,getContainerHoverStyle as c,getChipStyle as a,getChipRemoveStyle as u,getInputStyle as d}from"./ChipInput.styled.js";const p=p=>{let{onChipsChange:y,placeholder:h,chips:g,label:m,labelColor:v,hintText:b,hintTextColor:f,error:C,inputHeight:j,createChipKeys:k,chipsContainerCustomStyle:x,nativeID:T}=p;const[O,D]=n(""),[M,E]=n(!1),w=r(null),B=k||[",",188,"Enter",13],I=i(!!C,j,x,M),K=M?{}:c(),L=a(),S=u(),$=d(j);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:T},{children:[m&&t(s,Object.assign({style:{color:M?o.content.brand:C?o.content.negative:v||o.content.primary}},{children:m})),e("div",Object.assign({style:I,onClick:()=>{var e;null===(e=w.current)||void 0===e||e.focus()},onMouseEnter:e=>{M||Object.assign(e.currentTarget.style,K)},onMouseLeave:e=>{M||(e.currentTarget.style.border=`1px solid ${C?o.stroke.negative.vibrant:o.stroke.primary}`)}},{children:[g.map(((n,r)=>e("div",Object.assign({style:L},{children:[t("span",{children:n}),t("button",Object.assign({style:S,onClick:e=>{var t;e.stopPropagation(),t=r,y(g.filter(((e,n)=>n!==t)))},onMouseEnter:e=>{e.currentTarget.style.color=o.content.secondary},onMouseLeave:e=>{e.currentTarget.style.color=o.content.secondary},"aria-label":`Remove ${n}`},{children:"×"}))]}),r))),t("input",{ref:w,type:"text",value:O,onChange:e=>D(e.target.value),onKeyDown:e=>{if(B.includes(e.key)||B.includes(e.keyCode)||B.includes(e.which)){e.preventDefault();const t=O.trim();t&&!g.includes(t)&&(y([...g,t]),D(""))}else"Backspace"===e.key&&""===O&&g.length>0&&y(g.slice(0,-1))},onFocus:()=>{E(!0)},onBlur:()=>{E(!1);const e=O.trim();e&&!g.includes(e)&&(y([...g,e]),D(""))},placeholder:0===g.length&&h&&!M?h:void 0,style:$})]})),(!!b||!!C)&&t(l,Object.assign({style:{color:C?o.content.negative:f||o.content.secondary}},{children:C||b}))]}))};export{p as default};

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

@@ -1,66 +1,6 @@
-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;
-    };
-};
+import React from 'react';
+export declare const getChipStyle: () => React.CSSProperties;
+export declare const getChipRemoveStyle: () => React.CSSProperties;
+export declare const getContainerStyle: (error?: boolean, height?: number, chipsContainerCustomStyle?: React.CSSProperties, focused?: boolean) => React.CSSProperties;
+export declare const getContainerHoverStyle: () => React.CSSProperties;
+export declare const getInputStyle: (height?: number) => React.CSSProperties;

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

@@ -1 +1 @@
-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};
+import{COLORS as n}from"../../constants/Theme.js";const e=()=>({padding:"0px 8px 0px 8px",background:n.surface.subdued,border:`1px solid ${n.stroke.primary}`,fontSize:12,color:n.content.secondary,fontWeight:400,borderRadius:4,display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter",marginBottom:"2px",marginTop:"2px",height:24}),r=()=>({fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:n.content.secondary,marginLeft:6,background:"none",border:"none",padding:0,display:"inline-flex",alignItems:"center"}),o=(e,r,o,t)=>Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?n.stroke.brand:e?n.stroke.negative.vibrant:n.stroke.primary}`,backgroundColor:n.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,cursor:"text",minHeight:r||32},o),t=()=>({border:`2px solid ${n.stroke.brand}`}),i=n=>({border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:n||32,flex:1,minWidth:120,paddingTop:0,paddingBottom:0,backgroundColor:"transparent"});export{r as getChipRemoveStyle,e as getChipStyle,t as getContainerHoverStyle,o as getContainerStyle,i as getInputStyle};

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

@@ -1,4 +1,4 @@
-import { InputTypeI } from "./Input";
+import { InputTypeI } from './Input.model';
 export declare const isFunction: (fn: any) => boolean;
 export declare const sanitizeUnsafeInput: (input: string) => string;
 export declare const shouldSanitizeForType: (type: InputTypeI) => boolean;

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

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

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

@@ -0,0 +1,73 @@
+/// <reference types="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;
+    isDisabled?: boolean;
+    allowUnsafeInput?: boolean;
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from "./Input";
+import { InputStateI, InputTypeI, InputVariant } from './Input.model';
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -60,7 +60,6 @@ export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     invalid?: boolean | undefined;
-    maxCharAlignment?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
     [x: string]: any;