@bikdotai/bik-component-library 0.0.858-beta.1 → 0.0.858
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js +23 -23
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/AiTextArea.js +1 -1
- package/dist/cjs/components/agent-builder/components/AiTextArea.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/ToolInstructionsField.js +2 -2
- package/dist/cjs/components/agent-builder/components/ToolInstructionsField.js.map +1 -1
- package/dist/cjs/components/bik-chatbot/components/ChatWindow.js +20 -20
- package/dist/cjs/components/bik-chatbot/components/ChatWindow.js.map +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +2 -2
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +2 -2
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/input/ChipInput.js +1 -1
- package/dist/cjs/components/input/ChipInput.js.map +1 -1
- package/dist/cjs/components/input/Input-helper.js +1 -1
- package/dist/cjs/components/input/Input-helper.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/plans/SubscriptionPlanSelector.js +5 -5
- package/dist/cjs/components/plans/SubscriptionPlanSelector.js.map +1 -1
- package/dist/cjs/editor/BikEditor.js +1 -1
- package/dist/cjs/editor/BikEditor.js.map +1 -1
- package/dist/cjs/editor/BikEditor.utils.js +3 -3
- package/dist/cjs/editor/BikEditor.utils.js.map +1 -1
- package/dist/cjs/editor/extensions/buildExtensions.js +2 -2
- package/dist/cjs/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/cjs/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js +2 -0
- package/dist/cjs/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js.map +1 -0
- package/dist/cjs/helpers/sanitize.js +2 -0
- package/dist/cjs/helpers/sanitize.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js +144 -143
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
- package/dist/esm/components/agent-builder/components/AiTextArea.js +24 -23
- package/dist/esm/components/agent-builder/components/AiTextArea.js.map +1 -1
- package/dist/esm/components/agent-builder/components/ToolInstructionsField.js +38 -37
- package/dist/esm/components/agent-builder/components/ToolInstructionsField.js.map +1 -1
- package/dist/esm/components/bik-chatbot/components/ChatWindow.js +54 -53
- package/dist/esm/components/bik-chatbot/components/ChatWindow.js.map +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +346 -420
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +35 -33
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +48 -47
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/types/props.types.d.ts +2 -2
- package/dist/esm/components/input/ChipInput.js +41 -40
- package/dist/esm/components/input/ChipInput.js.map +1 -1
- package/dist/esm/components/input/Input-helper.d.ts +7 -0
- package/dist/esm/components/input/Input-helper.js +16 -25
- package/dist/esm/components/input/Input-helper.js.map +1 -1
- package/dist/esm/components/input/Input.js +59 -57
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.model.d.ts +1 -0
- package/dist/esm/components/plans/SubscriptionPlanSelector.js +42 -40
- package/dist/esm/components/plans/SubscriptionPlanSelector.js.map +1 -1
- package/dist/esm/editor/BikEditor.js +221 -217
- package/dist/esm/editor/BikEditor.js.map +1 -1
- package/dist/esm/editor/BikEditor.utils.d.ts +1 -1
- package/dist/esm/editor/BikEditor.utils.js +141 -140
- package/dist/esm/editor/BikEditor.utils.js.map +1 -1
- package/dist/esm/editor/extensions/buildExtensions.js +35 -25
- package/dist/esm/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.d.ts +13 -0
- package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js +64 -0
- package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js.map +1 -0
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/sanitize.d.ts +32 -0
- package/dist/esm/helpers/sanitize.js +207 -0
- package/dist/esm/helpers/sanitize.js.map +1 -0
- package/dist/esm/icons/index.d.ts +25 -25
- package/dist/esm/index.js +125 -115
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),S=require("react"),o=require("../../constants/Theme.js"),m=require("../TypographyStyle.js"),r=require("./ChipInput.styled.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),S=require("react"),o=require("../../constants/Theme.js"),_=require("../../helpers/sanitize.js"),m=require("../TypographyStyle.js"),r=require("./ChipInput.styled.js"),w=({onChipsChange:i,placeholder:p,chips:n,label:f,labelColor:R,hintText:v,hintTextColor:h,error:l,inputHeight:C,createChipKeys:j,chipsContainerCustomStyle:x,nativeID:L})=>{const[a,d]=S.useState(""),[c,O]=S.useState(!1),g=S.useRef(null),y=j||[",",188,"Enter",13],k=e=>{if(y.includes(e.key)||y.includes(e.keyCode)||y.includes(e.which)){e.preventDefault();const t=a.trim();t&&!n.includes(t)&&(i([...n,t]),d(""))}else e.key==="Backspace"&&a===""&&n.length>0&&i(n.slice(0,-1))},b=e=>{i(n.filter((u,t)=>t!==e))},T=()=>{O(!0)},q=()=>{O(!1);const e=a.trim();e&&!n.includes(e)&&(i([...n,e]),d(""))},M=()=>{g.current?.focus()},B=r.getContainerStyle(!!l,C,x,c),K=c?{}:r.getContainerHoverStyle(),D=r.getChipStyle(),I=r.getChipRemoveStyle(),V=r.getInputStyle(C);return s.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},id:L,children:[f&&s.jsx(m.BodySecondary,{style:{color:c?o.COLORS.content.brand:l?o.COLORS.content.negative:R||o.COLORS.content.primary},children:f}),s.jsxs("div",{style:B,onClick:M,onMouseEnter:e=>{c||Object.assign(e.currentTarget.style,K)},onMouseLeave:e=>{c||(e.currentTarget.style.border=`1px solid ${l?o.COLORS.stroke.negative.vibrant:o.COLORS.stroke.primary}`)},children:[n.map((e,u)=>s.jsxs("div",{style:D,children:[s.jsx("span",{children:e}),s.jsx("button",{style:I,onClick:t=>{t.stopPropagation(),b(u)},onMouseEnter:t=>{t.currentTarget.style.color=o.COLORS.content.secondary},onMouseLeave:t=>{t.currentTarget.style.color=o.COLORS.content.secondary},"aria-label":`Remove ${e}`,children:"×"})]},u)),s.jsx("input",{ref:g,type:"text",value:a,onChange:e=>d(_.stripHtmlTags(e.target.value)),onKeyDown:k,onFocus:T,onBlur:q,placeholder:n.length===0&&p&&!c?p:void 0,style:V})]}),(!!v||!!l)&&s.jsx(m.BodyCaption,{style:{color:l?o.COLORS.content.negative:h||o.COLORS.content.secondary},children:l||v})]})};exports.default=w;
|
|
2
2
|
//# sourceMappingURL=ChipInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","BodyCaption"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { stripHtmlTags } from '../../helpers/sanitize';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(stripHtmlTags(e.target.value))}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","stripHtmlTags","BodyCaption"],"mappings":"uTAkCMA,EAAsC,CAAC,CAC5C,cAAAC,EACA,YAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,MAAAC,EACA,YAAAC,EACA,eAAAC,EACA,0BAAAC,EACA,SAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,EAAE,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EACtCG,EAAWC,EAAAA,OAAyB,IAAI,EAIxCC,EAAWV,GADG,CAAC,IAAK,IAAK,QAAS,EAAE,EAGpCW,EAAiB,GAAuC,CAM7D,GAJCD,EAAS,SAAS,EAAE,GAAG,GACvBA,EAAS,SAAS,EAAE,OAAO,GAC3BA,EAAS,SAAS,EAAE,KAAK,EAEJ,CACrB,EAAE,eAAA,EACF,MAAME,EAAeT,EAAW,KAAA,EAC5BS,GAAgB,CAACnB,EAAM,SAASmB,CAAY,IAC/CrB,EAAc,CAAC,GAAGE,EAAOmB,CAAY,CAAC,EACtCR,EAAc,EAAE,EAElB,MAAW,EAAE,MAAQ,aAAeD,IAAe,IAAMV,EAAM,OAAS,GAEvEF,EAAcE,EAAM,MAAM,EAAG,EAAE,CAAC,CAElC,EAEMoB,EAAoBC,GAA0B,CACnDvB,EAAcE,EAAM,OAAO,CAACsB,EAAGC,IAAUA,IAAUF,CAAa,CAAC,CAClE,EAEMG,EAAc,IAAM,CACzBV,EAAW,EAAI,CAChB,EAEMW,EAAa,IAAM,CACxBX,EAAW,EAAK,EAEhB,MAAMK,EAAeT,EAAW,KAAA,EAC5BS,GAAgB,CAACnB,EAAM,SAASmB,CAAY,IAC/CrB,EAAc,CAAC,GAAGE,EAAOmB,CAAY,CAAC,EACtCR,EAAc,EAAE,EAElB,EAEMe,EAAuB,IAAM,CAClCX,EAAS,SAAS,MAAA,CACnB,EAEMY,EAAiBC,EAAAA,kBACtB,CAAC,CAACvB,EACFC,EACAE,EACAK,CAAA,EAEKgB,EAAsBhB,EAAU,CAAA,EAAKiB,yBAAA,EACrCC,EAAYC,EAAAA,aAAA,EACZC,EAAkBC,EAAAA,mBAAA,EAClBC,EAAaC,EAAAA,cAAc9B,CAAW,EAE5C,OACC+B,EAAAA,KAAC,MAAA,CACA,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,CAAA,EACxD,GAAI5B,EAEH,SAAA,CAAAR,GACAqC,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAO1B,EACJ2B,SAAO,QAAQ,MACfnC,EACAmC,EAAAA,OAAO,QAAQ,SACftC,GAAcsC,EAAAA,OAAO,QAAQ,OAAA,EAGhC,SAAAvC,CAAA,CAAA,EAGHoC,EAAAA,KAAC,MAAA,CACA,MAAOV,EACP,QAASD,EACT,aAAe,GAAM,CACfb,GACJ,OAAO,OAAO,EAAE,cAAc,MAAOgB,CAAmB,CAE1D,EACA,aAAe,GAAM,CACfhB,IACJ,EAAE,cAAc,MAAM,OAAS,aAC9BR,EAAQmC,EAAAA,OAAO,OAAO,SAAS,QAAUA,EAAAA,OAAO,OAAO,OACxD,GAEF,EAEC,SAAA,CAAAxC,EAAM,IAAI,CAACyC,EAAMlB,IACjBc,OAAC,MAAA,CAAgB,MAAON,EACvB,SAAA,CAAAO,EAAAA,IAAC,QAAM,SAAAG,CAAA,CAAK,EACZH,EAAAA,IAAC,SAAA,CACA,MAAOL,EACP,QAAUS,GAAM,CACfA,EAAE,gBAAA,EACFtB,EAAiBG,CAAK,CACvB,EACA,aAAemB,GAAM,CACpBA,EAAE,cAAc,MAAM,MAAQF,EAAAA,OAAO,QAAQ,SAC9C,EACA,aAAeE,GAAM,CACpBA,EAAE,cAAc,MAAM,MAAQF,EAAAA,OAAO,QAAQ,SAC9C,EACA,aAAY,UAAUC,CAAI,GAC1B,SAAA,GAAA,CAAA,CAED,CAAA,EAjBSlB,CAkBV,CACA,EACDe,EAAAA,IAAC,QAAA,CACA,IAAKvB,EACL,KAAK,OACL,MAAOL,EACP,SAAW,GAAMC,EAAcgC,EAAAA,cAAc,EAAE,OAAO,KAAK,CAAC,EAC5D,UAAWzB,EACX,QAASM,EACT,OAAQC,EACR,YACCzB,EAAM,SAAW,GAAOD,GAAe,CAACc,EACrCd,EACA,OAEJ,MAAOoC,CAAA,CAAA,CACR,CAAA,CAAA,GAEC,CAAC,CAAChC,GAAY,CAAC,CAACE,IACjBiC,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MAAOvC,EACJmC,SAAO,QAAQ,SACfpC,GAAiBoC,EAAAA,OAAO,QAAQ,SAAA,EAGnC,YAAgBrC,CAAA,CAAA,CAClB,CAAA,CAAA,CAIJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("phone"),a=require("../../helpers/sanitize.js"),o=e=>e&&typeof e=="function",m=e=>e&&a.stripHtmlTags(e),c=["text","multiline","email","url","password"],f=e=>c.includes(e),d=(e,t,r={})=>{let i;const u=["phonenumber","zip","number"].includes(t),n=u?e?Number(e):null:e;if(n==null||n==="")return[!0,""];if(u&&String(n).length&&(r.min&&n<r.min||r.max&&n>r.max))return[!1,`Enter valid number between ${r.min} and ${r.max}`];if(t==="email")return i=/(.+)@(.+){2,}\.(.+){2,}/,n.match(i)?[!0,""]:[!1,"Enter a valid email id"];if(t==="url")return i=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,n.match(i)?[!0,""]:[!1,"Enter a valid url"];if(t==="number")return n>=0?[!0,""]:[!1,"Enter a valid number"];if(t==="zip")return String(n).trim().length===6?[!0,""]:[!1,"Enter a valid zip code"];if(t==="phonenumber"){const{isValid:l}=s.phone("+"+String(n));return l?[!0,""]:[!1,"Enter a valid phonenumber"]}else return n?.trim().length>0?[!0,""]:[!1,"Enter a valid data"]};exports.isFunction=o;exports.sanitizeUnsafeInput=m;exports.shouldSanitizeForType=f;exports.validateInput=d;
|
|
2
2
|
//# sourceMappingURL=Input-helper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input-helper.js","sources":["../../../../src/components/input/Input-helper.ts"],"sourcesContent":["import { phone } from 'phone';\nimport { InputTypeI } from './Input.model';\n\nexport const isFunction = (fn): boolean => {\n\treturn fn && typeof fn === 'function';\n};\n\
|
|
1
|
+
{"version":3,"file":"Input-helper.js","sources":["../../../../src/components/input/Input-helper.ts"],"sourcesContent":["import { phone } from 'phone';\nimport { stripHtmlTags } from '../../helpers/sanitize';\nimport { InputTypeI } from './Input.model';\n\nexport const isFunction = (fn): boolean => {\n\treturn fn && typeof fn === 'function';\n};\n\n/**\n * Strip any HTML markup from a plain-text input value. Backed by DOMPurify\n * (parser-based, immune to the malformed-tag bypasses a regex misses); on the\n * server DOMPurify is unavailable so a regex tag-strip is used as a fallback.\n * Text characters like `<` / `>` in ordinary content are preserved because\n * DOMPurify keeps text content and only removes recognised tags.\n */\nexport const sanitizeUnsafeInput = (input: string): string => {\n\tif (!input) {\n\t\treturn input;\n\t}\n\treturn stripHtmlTags(input);\n};\n\nconst SANITIZED_INPUT_TYPES: InputTypeI[] = [\n\t'text',\n\t'multiline',\n\t'email',\n\t'url',\n\t'password',\n];\n\nexport const shouldSanitizeForType = (type: InputTypeI): boolean =>\n\tSANITIZED_INPUT_TYPES.includes(type);\n\nexport const validateInput = (\n\tinputText: string | number,\n\ttype: InputTypeI,\n\trangeValidation: { min?: number; max?: number } = {},\n): [boolean, string] => {\n\tlet regex;\n\n\tconst NUMBER_TYPE = ['phonenumber', 'zip', 'number'].includes(type);\n\n\tconst input = NUMBER_TYPE\n\t\t? inputText\n\t\t\t? Number(inputText)\n\t\t\t: null\n\t\t: inputText;\n\n\tif (input === null || input === undefined || input === '') {\n\t\treturn [true, ''];\n\t}\n\n\tif (\n\t\tNUMBER_TYPE &&\n\t\t!!String(input).length &&\n\t\t((!!rangeValidation.min &&\n\t\t\t(input as unknown as number) < rangeValidation.min) ||\n\t\t\t(!!rangeValidation.max &&\n\t\t\t\t(input as unknown as number) > rangeValidation.max))\n\t) {\n\t\treturn [\n\t\t\tfalse,\n\t\t\t`Enter valid number between ${rangeValidation.min} and ${rangeValidation.max}`,\n\t\t];\n\t}\n\n\tif (type === 'email') {\n\t\tregex = /(.+)@(.+){2,}\\.(.+){2,}/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid email id'];\n\t} else if (type === 'url') {\n\t\tregex =\n\t\t\t/^https?:\\/\\/(?:www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&\\/=]*)$/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid url'];\n\t} else if (type === 'number') {\n\t\treturn input >= 0 ? [true, ''] : [false, 'Enter a valid number'];\n\t} else if (type === 'zip') {\n\t\treturn String(input).trim().length === 6\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid zip code'];\n\t} else if (type === 'phonenumber') {\n\t\tconst { isValid } = phone('+' + String(input));\n\t\treturn isValid ? [true, ''] : [false, 'Enter a valid phonenumber'];\n\t} else {\n\t\treturn (input as string)?.trim().length > 0\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid data'];\n\t}\n\treturn [false, 'Enter a valid data'];\n};\n"],"names":["isFunction","fn","sanitizeUnsafeInput","input","stripHtmlTags","SANITIZED_INPUT_TYPES","shouldSanitizeForType","type","validateInput","inputText","rangeValidation","regex","NUMBER_TYPE","isValid","phone"],"mappings":"gJAIaA,EAAcC,GACnBA,GAAM,OAAOA,GAAO,WAUfC,EAAuBC,GAC9BA,GAGEC,EAAAA,cAAcD,CAAK,EAGrBE,EAAsC,CAC3C,OACA,YACA,QACA,MACA,UACD,EAEaC,EAAyBC,GACrCF,EAAsB,SAASE,CAAI,EAEvBC,EAAgB,CAC5BC,EACAF,EACAG,EAAkD,CAAA,IAC3B,CACvB,IAAIC,EAEJ,MAAMC,EAAc,CAAC,cAAe,MAAO,QAAQ,EAAE,SAASL,CAAI,EAE5DJ,EAAQS,EACXH,EACC,OAAOA,CAAS,EAChB,KACDA,EAEH,GAAIN,GAAU,MAA+BA,IAAU,GACtD,MAAO,CAAC,GAAM,EAAE,EAGjB,GACCS,GACE,OAAOT,CAAK,EAAE,SACZO,EAAgB,KAClBP,EAA8BO,EAAgB,KAC5CA,EAAgB,KACjBP,EAA8BO,EAAgB,KAEjD,MAAO,CACN,GACA,8BAA8BA,EAAgB,GAAG,QAAQA,EAAgB,GAAG,EAAA,EAI9E,GAAIH,IAAS,QACZ,OAAAI,EAAQ,0BACAR,EAAiB,MAAMQ,CAAK,EACjC,CAAC,GAAM,EAAE,EACT,CAAC,GAAO,wBAAwB,EACpC,GAAWJ,IAAS,MACnB,OAAAI,EACC,8GACOR,EAAiB,MAAMQ,CAAK,EACjC,CAAC,GAAM,EAAE,EACT,CAAC,GAAO,mBAAmB,EAC/B,GAAWJ,IAAS,SACnB,OAAOJ,GAAS,EAAI,CAAC,GAAM,EAAE,EAAI,CAAC,GAAO,sBAAsB,EAChE,GAAWI,IAAS,MACnB,OAAO,OAAOJ,CAAK,EAAE,KAAA,EAAO,SAAW,EACpC,CAAC,GAAM,EAAE,EACT,CAAC,GAAO,wBAAwB,EACpC,GAAWI,IAAS,cAAe,CAClC,KAAM,CAAE,QAAAM,CAAA,EAAYC,EAAAA,MAAM,IAAM,OAAOX,CAAK,CAAC,EAC7C,OAAOU,EAAU,CAAC,GAAM,EAAE,EAAI,CAAC,GAAO,2BAA2B,CAClE,KACC,QAAQV,GAAkB,OAAO,OAAS,EACvC,CAAC,GAAM,EAAE,EACT,CAAC,GAAO,oBAAoB,CAGjC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Ee=require("../../assets/icons/info.svg.js"),Le=require("../../helpers/sanitize.js"),r=require("react"),I=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),we=require("../../assets/icons/errorInfo.svg.js"),He=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),pe=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,le)=>{const{placeholder:H,leftIcon:p,rightIcon:v,labelText:T,maxCharLimit:a,isRequired:R,hintText:_,type:c,state:j,validate:se,variant:o,button:h,suffixText:F,prefixText:k,onChangeText:A,value:x,noErrorHint:ae,reset:O,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:q,labelElement:B,autoGrow:b,minHeight:S,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:xe,onKeyDownEvent:z,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:Ie,minCharsToTrigger:K,maxCharAlignment:ye,isDisabled:N=!1,allowUnsafeInput:Ce,preventFormulaInjection:ve,leftIconStyle:Te}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},V=p?.icon,W=v?.icon,[M,y]=r.useState(!1),[je,E]=r.useState(!1),[d,X]=r.useState(),U=o==="x-small"?"12px":o==="small"?"18px":"22px",C=r.useContext(He.InputStyleContext),[G,L]=r.useState(""),be=r.useRef(null),s=le??be;r.useEffect(()=>{L(x||""),!x&&b&&(s.current.style.height=S||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{O&&L("")},[O]),r.useEffect(()=>{E(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{y(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&y(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{y(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{I.isFunction(t)&&t(...i)},Y=()=>c==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ce&&(!u.length||u.length>=m)&&A(x||"",t),!q&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const g=a!==0?a+1:Y(),m=K;if(!Ce&&I.shouldSanitizeForType(c)&&(i=I.sanitizeUnsafeInput(i)),ve&&(i=Le.escapeFormulaInjection(i)),!q&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||L(i||""),m&&i&&i.length<m)return;A(i,t),b&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=S||"48px"));const u=se||I.validateInput;if(!u||!I.isFunction(u))return;const[Se,Me]=u(i,c,oe);y(!Se),X(e.errorMessage?e.errorMessage:Me)},Z=t=>{e.skipFocus||E(!0),f(e.onFocus?.(t))},ee=t=>{e.skipFocus||E(!1),f(e.onBlur?.(t))},w=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:H||"Enter here",onChange:Q,onClick:t=>f(e.onClick),onKeyDown:t=>$(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:G,ref:s,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>f(e.onClick),disabled:N,placeholder:H||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:j,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!_||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(we.default,{width:16,height:16}),d||_]}),a>0&&D==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:o,state:j,width:e.width,isActive:j==="active"||je,isInvalid:M,style:C?.InputWrapper??Ie??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!V&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(p?.callback),isLeft:!0,style:{...C?.IconHolder??{},...Te},children:n.jsx(V,{})}),!!k&&n.jsx(l.PrefixHolder,{variant:o,children:k}),o==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:S,maxHeight:he,autoGrow:b,children:w()}),o==="small"&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:w()}),o==="x-small"&&n.jsx(l.InputContainerXSmall,{height:e.height,type:e.type,children:w()}),!!W&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(v?.callback),isLeft:!1,"data-test":v?.["data-test"],children:n.jsx(W,{})}),!!F&&n.jsx(l.SuffixHolder,{variant:o,children:F}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!T||!!a)&&n.jsxs(l.InputHeader,{invalid:M,maxCharAlignment:ye,children:[B&&B,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[T,R?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[T,R?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(pe.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Ee.default,{style:{marginTop:-3},width:18,height:18,color:M?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(l.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t\tdata-test={rightIcon?.['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { escapeFormulaInjection } from '@src/helpers/sanitize';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tpreventFormulaInjection,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (preventFormulaInjection) {\n\t\t\t\tinputText = escapeFormulaInjection(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t\tdata-test={rightIcon?.['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","preventFormulaInjection","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","escapeFormulaInjection","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),h=require("../../assets/icons/check.svg.js"),m=require("../../assets/icons/info.svg.js"),g=require("../../assets/icons/phone.svg.js"),b=require("../../helpers/sanitize.js"),y=require("styled-components"),f=require("./SubscriptionPlan.js"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),j=require("../modals/styledModal.js"),C=require("../tabs/Tabs.js"),v=require("../button/Button.js"),w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=w(y),O=s.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
column-gap: 22px;
|
|
4
4
|
align-items: stretch;
|
|
5
5
|
padding: 24px;
|
|
6
|
-
`,
|
|
6
|
+
`,P=s.default.div`
|
|
7
7
|
color: ${n.COLORS.content.negative};
|
|
8
8
|
padding: 0px 24px;
|
|
9
|
-
`,
|
|
9
|
+
`,c=s.default.div`
|
|
10
10
|
padding: 24px 24px 0px 24px;
|
|
11
11
|
display: flex;
|
|
12
12
|
align-items: center;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
margin-top: 8px;
|
|
16
16
|
color: ${n.COLORS.content.secondary} !important;
|
|
17
17
|
}
|
|
18
|
-
`,
|
|
18
|
+
`,l=s.default.div`
|
|
19
19
|
padding: 0px 24px 24px 24px;
|
|
20
20
|
display: flex;
|
|
21
21
|
align-items: center;
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
justify-content: flex-start;
|
|
99
99
|
gap: 8px;
|
|
100
100
|
}
|
|
101
|
-
`,
|
|
101
|
+
`,u=[{key:"Monthly",title:"Monthly"},{key:"yearly",title:"Yearly"}],S=e=>{const[p,r]=d.useState(e.discountInputProperties?.defaultValue),x=e.staticWidthMultiplier?e.staticWidthMultiplier:275;return t.jsxs(j.StyledModal,{centralContainerStyles:{width:e.plans.length*x},open:!0,closeOnOutsideClick:!0,onClose:e.onClose,children:[t.jsxs(c,{children:[t.jsxs("div",{children:[t.jsx(i.TitleMedium,{children:e.header||"Select a plan to proceed"}),t.jsx(i.BodyPrimary,{className:"sub--header",children:e.subHeader||""})]}),e.showMonthlyTabs?t.jsx(C.Tabs,{tabs:e.tabProperties&&e.tabProperties.tabs?e.tabProperties.tabs:u,onTabSelected:o=>e.tabProperties?.onTabSelected?e.tabProperties?.onTabSelected(o):"",isSquared:!0}):t.jsx(t.Fragment,{})]}),e.warningDescription&&t.jsx(P,{children:e.warningDescription}),t.jsx(O,{children:e.plans.map(o=>d.createElement(f.SubscriptionPlan,{...o,showMonthly:!0,showMonthlyOptions:e.showMonthlyOptions||!1,showTrialOptions:e.showTrialOptions||!1,onPlanSelect:e.onPlanSelect,key:o.planName}))}),(e.showCouponApplicationCode||e.showBookAdemo)&&t.jsxs(l,{children:[t.jsx("div",{children:e.showCouponApplicationCode&&t.jsxs("div",{className:"coupon-code",children:[t.jsxs("div",{className:"coupon-input",children:[t.jsx(i.BodyPrimary,{style:{color:e.discountInputProperties?.errorMessage?n.COLORS.content.negative:""},children:"Apply coupon code"}),t.jsxs("div",{className:"button--wrapper",children:[t.jsxs("div",{className:e.discountInputProperties?.errorMessage?"error--border dotted--border":"dotted--border",children:[t.jsx("input",{className:"input--class",onChange:o=>{const a=b.stripHtmlTags(o.target.value);r(a),e.discountInputProperties?.onChangeText(a)},value:p,placeholder:"eg:PLAN20",disabled:e.discountInputProperties?.isLoading}),e.discountInputProperties?.successText&&t.jsxs("div",{className:"success--inside--chip",children:[t.jsx(h.default,{height:16,width:16,color:n.COLORS.content.primaryInverse}),t.jsx(i.BodyCaption,{style:{color:n.COLORS.content.primaryInverse},children:"Coupon applied"})]})]}),!e.discountInputProperties?.successText&&t.jsx(v.Button,{buttonText:"Apply",buttonType:"primary",onClick:e?.discountInputProperties?.onCouponApply,isLoading:e.discountInputProperties?.isLoading})]}),e.discountInputProperties?.errorMessage&&t.jsxs("div",{className:"d-flex",style:{gap:8},children:[t.jsx(m.default,{height:16,width:16,color:n.COLORS.content.negative}),t.jsx(i.BodyCaption,{style:{color:n.COLORS.content.negative},children:e.discountInputProperties?.errorMessage??"Enter a valid code"})]}),e.discountInputProperties?.showRemoveCoupon&&t.jsx("div",{className:"demo--input",onClick:()=>{r(""),e.discountInputProperties?.removeCoupon&&e.discountInputProperties?.removeCoupon()},children:"Remove coupon"})]}),e.discountInputProperties?.successText&&t.jsx("div",{className:"coupon--success--chip",children:t.jsx(i.BodyCaption,{style:{color:"#00580E",maxWidth:180},children:e.discountInputProperties?.successText})})]})}),e.showBookAdemo&&t.jsxs("div",{className:"demo--wrapper",children:[t.jsx("div",{className:"demo--phone",children:t.jsx(g.default,{height:16,width:16,color:n.COLORS.background.brand})}),t.jsx(i.BodyPrimary,{className:"demo--input",onClick:()=>e.demoLink?window.open(e.demoLink,"_blank"):e.onClickingBookADemo?e.onClickingBookADemo():"",children:"Book a demo with the team"})]})]})]})};exports.BottomWrapper=l;exports.HeaderWrapper=c;exports.SubscriptionPlanSelector=S;exports.defaultTabs=u;
|
|
102
102
|
//# sourceMappingURL=SubscriptionPlanSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header || 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader || ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/*<DurationSelector*/}\n\t\t\t{/*\tisMonthlySelected={monthly}*/}\n\t\t\t{/*\tyearlyDiscount={\"20\"}*/}\n\t\t\t{/*\tonToggle={setIsMonthly}*/}\n\t\t\t{/*/>*/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions || false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions || false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode || props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext.target.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { stripHtmlTags } from '@src/helpers/sanitize';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header || 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader || ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/*<DurationSelector*/}\n\t\t\t{/*\tisMonthlySelected={monthly}*/}\n\t\t\t{/*\tyearlyDiscount={\"20\"}*/}\n\t\t\t{/*\tonToggle={setIsMonthly}*/}\n\t\t\t{/*/>*/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions || false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions || false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode || props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst sanitized = stripHtmlTags(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(sanitized);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsanitized,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","sanitized","stripHtmlTags","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Ce=require("../node_modules/@tiptap/core/dist/index.js"),b=require("@tiptap/react"),a=require("react"),G=require("../components/TypographyStyle.js"),S=require("./BikEditor.styles.js"),K=require("./BikEditor.types.js"),s=require("./BikEditor.utils.js"),Se=require("./extensions/buildExtensions.js"),ke=require("./floating/LinkBubbleMenu.js"),xe=require("../icons/BIK AI specific/WandSparkles.js"),ye=require("../icons/Actions/Formatting/Copy.js"),Be=require("../icons/Actions/Common actions/Code.js"),Te=require("../icons/Informational/General/Info.js");function be(p){return Object.entries(p).map(([x,g])=>`${x.replace(/([A-Z])/g,C=>`-${C.toLowerCase()}`)}:${g}`).join(";")}const Ee=(p,x)=>{const{initialContent:g,sections:C,features:k,disabled:Y,maxCharacters:E,characterLimit:ee,characterLimitHard:te,shortcuts:ne,sendShortcut:oe,mentions:d,slashCommands:h,link:se,onPaste:re,onReady:R,onChange:j,onSend:y,onFocus:v,onBlur:z,onSelectionChange:A,minHeight:ie,maxHeight:ce,style:ae,className:le,editorClassName:H,editorStyle:J,renderJsonError:I}=p,u=!!k?.jsonMode,[m,M]=a.useState(null),[de,L]=a.useState(!1),[B,F]=a.useState(u&&!(g??"").trim()),[ue,O]=a.useState(!1),me=u?s.buildJsonCodeBlockHtml(g??""):C?.length?s.buildSectionedContent(s.normalizeHtml(g??""),C.map(e=>({...e,content:s.normalizeHtml(e.content)}))):s.normalizeHtml(g??""),T=a.useRef([]),q=a.useRef(!1),N=a.useRef(R);N.current=R;const w=a.useRef(j);w.current=j;const P=a.useRef(A);P.current=A;const D=a.useRef(K.DEFAULT_FORMAT_STATE),U=a.useRef(v);U.current=v;const _=a.useRef(z);_.current=z;const $=a.useRef(y);$.current=y;const W=a.useRef(d?.agents??[]);W.current=d?.agents??[];const V=a.useRef(d?.teams??[]);V.current=d?.teams??[];const Q=a.useRef(h?.items??[]);Q.current=h?.items??[];const n=b.useEditor({extensions:Se.buildExtensions({features:k,placeholder:p.placeholder,maxCharacters:E,characterLimit:ee,characterLimitHard:te,hasSections:(C?.length??0)>0,mentions:{agents:d?W:void 0,teams:d?V:void 0},slashCommands:h?Q:void 0,onPaste:re,onSend:y?e=>$.current?.(e):void 0,sendShortcut:oe,shortcuts:ne,onMentionSelected:d?.onSelect,onSlashCommandSelected:h?.onSelect,renderMentionItem:d?.renderItem,renderMentionDropdown:d?.renderDropdown,removeMentionTriggerOnDismiss:d?.removeTriggerOnDismiss,renderMentionChipIcon:d?.renderChipIcon,renderSlashCommandItem:h?.renderItem,renderSlashCommandDropdown:h?.renderDropdown}),content:me,editable:!Y,immediatelyRender:!1,editorProps:{attributes:{...H?{class:H}:{},...J?{style:be(J)}:{}}},onUpdate:({editor:e})=>{if(w.current?.(s.extractContent(e)),u){const t=s.getCodeBlockText(e),o=s.parseJson(t);M(o.valid?null:o),F(!t.trim())}},onTransaction:({editor:e})=>{const t=s.extractActiveFormats(e),o=D.current;(o.bold!==t.bold||o.italic!==t.italic||o.underline!==t.underline||o.strike!==t.strike||o.bulletList!==t.bulletList||o.orderedList!==t.orderedList||o.blockquote!==t.blockquote||o.codeBlock!==t.codeBlock||o.superscript!==t.superscript||o.subscript!==t.subscript||o.textAlign!==t.textAlign||o.fontFamily!==t.fontFamily||o.fontSize!==t.fontSize||o.color!==t.color||o.highlight!==t.highlight||o.link?.href!==t.link?.href)&&(D.current=t,P.current?.(t))},onFocus:()=>{O(!0),U.current?.()},onBlur:()=>{O(!1),_.current?.()}});function i(e){n?e(n):T.current.push(e)}a.useEffect(()=>{if(n&&(T.current.length>0&&T.current.splice(0).forEach(t=>t(n)),q.current||(q.current=!0,N.current?.()),u)){const e=s.getCodeBlockText(n),t=s.parseJson(e);M(t.valid?null:t),F(!e.trim())}},[n,u]),a.useImperativeHandle(x,()=>({focus:e=>i(t=>t.commands.focus(e)),blur:()=>i(e=>e.commands.blur()),clearContent:()=>i(e=>e.commands.clearContent(!0)),setContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.setContent(t,{emitUpdate:!0}))},insertContent:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContent(t))},insertInlineContent:e=>{i(t=>s.insertInlineHtml(t,e))},insertAtStart:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(1,t))},insertBlock:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size,t))},appendInline:e=>{const t=s.normalizeHtml(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size-1,t))},insertAtEnd(e){this.insertBlock(e)},appendContent(e){this.appendInline(e)},getContent:()=>n?s.extractContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},getJSON:()=>n?.getJSON()??null,getMentions:()=>{const e=new Set,t=new Set;return n?(n.state.doc.descendants(o=>{o.type.name==="mentionAgent"&&o.attrs.id!=null?e.add(String(o.attrs.id)):o.type.name==="mentionTeam"&&o.attrs.id!=null&&t.add(String(o.attrs.id))}),{agentIds:Array.from(e),teamIds:Array.from(t)}):{agentIds:[],teamIds:[]}},getCursorPosition:()=>{if(!n)return{from:0,to:0};const{from:e,to:t}=n.state.selection;return{from:e,to:t}},insertAtPosition:(e,t)=>{const o=s.normalizeHtml(t);i(r=>r.commands.insertContentAt(e,o))},getSelectedText:()=>{if(!n)return"";const{state:e}=n,{from:t,to:o,empty:r}=e.selection;if(!r)return e.doc.textBetween(t,o," ");const l=e.schema.marks.link;if(l){const f=Ce.getMarkRange(e.doc.resolve(t),l);if(f)return e.doc.textBetween(f.from,f.to," ")}return""},getCharacterCount:()=>({count:n?.storage.characterCount?.characters?.()??n?.getText().length??0,limit:E??null}),getSectionContent:e=>n?s.extractSectionContent(n,e):{html:"",text:"",isEmpty:!0,characterCount:0},setSectionContent:(e,t)=>{const o=s.normalizeHtml(t);i(r=>s.setSectionContentInEditor(r,e,o))},focusSection:e=>{i(t=>{if(e==="body"){let r=t.state.doc.content.size-1;t.state.doc.descendants((l,f)=>(l.type.name==="sectionDivider"&&r===t.state.doc.content.size-1&&(r=f-1),r===t.state.doc.content.size-1)),r<1&&(r=1),t.chain().focus().setTextSelection(r).run();return}let o=-1;t.state.doc.descendants((r,l)=>{if(o!==-1)return!1;r.type.name==="sectionDivider"&&r.attrs.sectionId===e&&(o=l+r.nodeSize+1)}),o!==-1&&t.chain().focus().setTextSelection(o).run()})},clearSection:e=>{i(t=>s.setSectionContentInEditor(t,e,"<p></p>"))},getBodyContent:()=>n?s.extractBodyContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},setBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>s.setSectionContentInEditor(o,"body",t))},setBodyAndSections:(e,t)=>{const o=s.buildSectionedContent(s.normalizeHtml(e),t.map(r=>({id:r.id,content:s.normalizeHtml(r.content)})));i(r=>r.commands.setContent(o,{emitUpdate:!0}))},appendBodyContent:e=>{const t=s.normalizeHtml(e);i(o=>{const r=s.findSectionEndPos(o,"body");o.commands.insertContentAt(r-1,t,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionStart:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionStartPos(r,e);l!==-1&&r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionEnd:(e,t)=>{const o=s.normalizeHtml(t);i(r=>{const l=s.findSectionEndPos(r,e);r.commands.insertContentAt(l,o,{parseOptions:{preserveWhitespace:!0}})})},getActiveFormats:()=>n?s.extractActiveFormats(n):K.DEFAULT_FORMAT_STATE,actions:{toggleBold:()=>n?.chain().focus().toggleBold().run(),toggleItalic:()=>n?.chain().focus().toggleItalic().run(),toggleUnderline:()=>n?.chain().focus().toggleUnderline().run(),toggleStrike:()=>n?.chain().focus().toggleStrike().run(),toggleBulletList:()=>n?.chain().focus().toggleBulletList().run(),toggleOrderedList:()=>n?.chain().focus().toggleOrderedList().run(),toggleBlockquote:()=>n?.chain().focus().toggleBlockquote().run(),toggleCodeBlock:()=>n?.chain().focus().toggleCodeBlock().run(),setTextAlign:e=>n?.chain().focus().setTextAlign(e).run(),setFontFamily:e=>n?.chain().focus().setFontFamily(e).run(),setFontSize:e=>n?.chain().focus().setFontSize(e).run(),setColor:e=>n?.chain().focus().setColor(e).run(),setHighlight:e=>n?.chain().focus().toggleHighlight({color:e}).run(),unsetColor:()=>n?.chain().focus().unsetColor().run(),unsetHighlight:()=>n?.chain().focus().unsetHighlight().run(),setLink:(e,t)=>{n&&(t!==void 0?n.chain().focus().extendMarkRange("link").command(({tr:o,state:r})=>{const{from:l,to:f}=o.selection,Z=r.schema.marks.link;if(!Z)return!1;const he=r.schema.text(t,[Z.create({href:e})]),pe=r.schema.text(" ");return o.replaceWith(l,f,[he,pe]),!0}).run():n.chain().focus().extendMarkRange("link").setLink({href:e}).insertContent(" ").run())},updateLink:e=>n?.chain().focus().extendMarkRange("link").setLink({href:e}).run(),removeLink:()=>n?.chain().focus().extendMarkRange("link").unsetLink().run(),insertEmoji:e=>n?.chain().focus().insertContent(e).run(),insertVariable:e=>n?.chain().focus().insertContent(`{{${e}}}`).run(),insertHtml:e=>n?.commands.insertContent(s.normalizeHtml(e)),openMentionMenu:(e="@")=>{if(!n)return;const{to:t}=n.state.selection,o=t>1?n.state.doc.textBetween(t-1,t):"",r=o!==""&&!/\s/.test(o);n.chain().focus().setTextSelection(t).insertContent(r?` ${e}`:e).run()},undo:()=>n?.chain().focus().undo().run(),redo:()=>n?.chain().focus().redo().run(),canUndo:()=>n?.can().undo()??!1,canRedo:()=>n?.can().redo()??!1,toggleSuperscript:()=>n?.chain().focus().toggleSuperscript().run(),toggleSubscript:()=>n?.chain().focus().toggleSubscript().run(),insertImage:e=>n?.chain().focus().setImage({src:e}).run()},json:k?.jsonMode?{getText:()=>n?s.getCodeBlockText(n):"",setText:e=>i(t=>s.setCodeBlockText(t,e)),parse:()=>s.parseJson(n?s.getCodeBlockText(n):""),isValid:()=>s.parseJson(n?s.getCodeBlockText(n):"").valid,format:(e=2)=>i(t=>{const{valid:o,value:r}=s.parseJson(s.getCodeBlockText(t));!o||r===null||s.setCodeBlockText(t,JSON.stringify(r,null,e))}),minify:()=>i(e=>{const{valid:t,value:o}=s.parseJson(s.getCodeBlockText(e));!t||o===null||s.setCodeBlockText(e,JSON.stringify(o))})}:void 0}),[n]);const fe=()=>{if(!n)return;const{valid:e,value:t}=s.parseJson(s.getCodeBlockText(n));!e||t===null||s.setCodeBlockText(n,JSON.stringify(t,null,2))},ge=()=>{n&&(navigator.clipboard?.writeText(s.getCodeBlockText(n)),L(!0),setTimeout(()=>L(!1),1500))};return n?c.jsxs(S.BikEditorShell,{minHeight:ie,maxHeight:ce,tightParagraphs:!k?.richPaste,jsonMode:u,style:ae,className:le,children:[u&&c.jsxs(S.BikJsonHeader,{children:[c.jsx("span",{className:"bik-json-header-label",children:"JSON"}),c.jsxs("div",{className:"bik-json-header-actions",children:[c.jsxs("button",{type:"button",onClick:fe,disabled:!!m||B,title:"Format JSON",children:[c.jsx(xe.default,{size:16}),c.jsx(G.BodyCaption,{children:"Beautify"})]}),c.jsxs("button",{type:"button",onClick:ge,disabled:B,title:"Copy JSON",children:[c.jsx(ye.default,{size:16}),de&&c.jsx(G.BodyCaption,{children:"Copied"})]})]})]}),u?c.jsxs(S.BikJsonBody,{$error:!!m,children:[c.jsx(b.EditorContent,{editor:n}),B&&!ue&&c.jsxs(S.BikJsonEmptyState,{"aria-hidden":!0,children:[c.jsx(Be.default,{size:20}),c.jsx("span",{children:p.placeholder??"Type or paste JSON here"})]})]}):c.jsx(b.EditorContent,{editor:n}),c.jsx(ke.LinkBubbleMenu,{editor:n,renderLinkTooltip:se?.renderTooltip}),u&&m?I?I(m):c.jsxs(S.BikJsonError,{children:[c.jsx(Te.default,{size:16}),c.jsxs("span",{children:[m.line!=null&&c.jsxs("strong",{children:["Line ",m.line,m.column!=null?`, column ${m.column}`:"",":"," "]}),m.error]})]}):null]}):null},X=a.forwardRef(Ee);X.displayName="BikEditor";exports.BikEditor=X;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),xe=require("../node_modules/@tiptap/core/dist/index.js"),E=require("@tiptap/react"),a=require("react"),X=require("../components/TypographyStyle.js"),Y=require("../helpers/sanitize.js"),x=require("./BikEditor.styles.js"),ee=require("./BikEditor.types.js"),r=require("./BikEditor.utils.js"),ye=require("./extensions/buildExtensions.js"),Be=require("./floating/LinkBubbleMenu.js"),Te=require("../icons/BIK AI specific/WandSparkles.js"),be=require("../icons/Actions/Formatting/Copy.js"),Ee=require("../icons/Actions/Common actions/Code.js"),Re=require("../icons/Informational/General/Info.js");function je(C){return Object.entries(C).map(([y,h])=>`${y.replace(/([A-Z])/g,k=>`-${k.toLowerCase()}`)}:${h}`).join(";")}const ve=(C,y)=>{const{initialContent:h,sections:k,features:S,disabled:ne,maxCharacters:R,characterLimit:oe,characterLimitHard:se,shortcuts:re,sendShortcut:ie,mentions:u,slashCommands:p,link:ce,onPaste:ae,onReady:j,onChange:v,onSend:B,onFocus:A,onBlur:J,onSelectionChange:I,minHeight:le,maxHeight:de,style:ue,className:me,editorClassName:M,editorStyle:L,renderJsonError:q}=C,m=!!S?.jsonMode,F=!!S?.richPaste?Y.sanitizeEmailHtml:Y.sanitizeBasicHtml,l=a.useCallback(e=>r.normalizeHtml(e,F),[F]),[f,O]=a.useState(null),[fe,z]=a.useState(!1),[T,H]=a.useState(m&&!(h??"").trim()),[ge,N]=a.useState(!1),he=m?r.buildJsonCodeBlockHtml(h??""):k?.length?r.buildSectionedContent(l(h??""),k.map(e=>({...e,content:l(e.content)}))):l(h??""),b=a.useRef([]),P=a.useRef(!1),w=a.useRef(j);w.current=j;const D=a.useRef(v);D.current=v;const U=a.useRef(I);U.current=I;const _=a.useRef(ee.DEFAULT_FORMAT_STATE),$=a.useRef(A);$.current=A;const W=a.useRef(J);W.current=J;const V=a.useRef(B);V.current=B;const Q=a.useRef(u?.agents??[]);Q.current=u?.agents??[];const Z=a.useRef(u?.teams??[]);Z.current=u?.teams??[];const G=a.useRef(p?.items??[]);G.current=p?.items??[];const n=E.useEditor({extensions:ye.buildExtensions({features:S,placeholder:C.placeholder,maxCharacters:R,characterLimit:oe,characterLimitHard:se,hasSections:(k?.length??0)>0,mentions:{agents:u?Q:void 0,teams:u?Z:void 0},slashCommands:p?G:void 0,onPaste:ae,onSend:B?e=>V.current?.(e):void 0,sendShortcut:ie,shortcuts:re,onMentionSelected:u?.onSelect,onSlashCommandSelected:p?.onSelect,renderMentionItem:u?.renderItem,renderMentionDropdown:u?.renderDropdown,removeMentionTriggerOnDismiss:u?.removeTriggerOnDismiss,renderMentionChipIcon:u?.renderChipIcon,renderSlashCommandItem:p?.renderItem,renderSlashCommandDropdown:p?.renderDropdown}),content:he,editable:!ne,immediatelyRender:!1,editorProps:{attributes:{...M?{class:M}:{},...L?{style:je(L)}:{}}},onUpdate:({editor:e})=>{if(D.current?.(r.extractContent(e)),m){const t=r.getCodeBlockText(e),o=r.parseJson(t);O(o.valid?null:o),H(!t.trim())}},onTransaction:({editor:e})=>{const t=r.extractActiveFormats(e),o=_.current;(o.bold!==t.bold||o.italic!==t.italic||o.underline!==t.underline||o.strike!==t.strike||o.bulletList!==t.bulletList||o.orderedList!==t.orderedList||o.blockquote!==t.blockquote||o.codeBlock!==t.codeBlock||o.superscript!==t.superscript||o.subscript!==t.subscript||o.textAlign!==t.textAlign||o.fontFamily!==t.fontFamily||o.fontSize!==t.fontSize||o.color!==t.color||o.highlight!==t.highlight||o.link?.href!==t.link?.href)&&(_.current=t,U.current?.(t))},onFocus:()=>{N(!0),$.current?.()},onBlur:()=>{N(!1),W.current?.()}});function i(e){n?e(n):b.current.push(e)}a.useEffect(()=>{if(n&&(b.current.length>0&&b.current.splice(0).forEach(t=>t(n)),P.current||(P.current=!0,w.current?.()),m)){const e=r.getCodeBlockText(n),t=r.parseJson(e);O(t.valid?null:t),H(!e.trim())}},[n,m]),a.useImperativeHandle(y,()=>({focus:e=>i(t=>t.commands.focus(e)),blur:()=>i(e=>e.commands.blur()),clearContent:()=>i(e=>e.commands.clearContent(!0)),setContent:e=>{const t=l(e);i(o=>o.commands.setContent(t,{emitUpdate:!0}))},insertContent:e=>{const t=l(e);i(o=>o.commands.insertContent(t))},insertInlineContent:e=>{i(t=>r.insertInlineHtml(t,e))},insertAtStart:e=>{const t=l(e);i(o=>o.commands.insertContentAt(1,t))},insertBlock:e=>{const t=l(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size,t))},appendInline:e=>{const t=l(e);i(o=>o.commands.insertContentAt(o.state.doc.content.size-1,t))},insertAtEnd(e){this.insertBlock(e)},appendContent(e){this.appendInline(e)},getContent:()=>n?r.extractContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},getJSON:()=>n?.getJSON()??null,getMentions:()=>{const e=new Set,t=new Set;return n?(n.state.doc.descendants(o=>{o.type.name==="mentionAgent"&&o.attrs.id!=null?e.add(String(o.attrs.id)):o.type.name==="mentionTeam"&&o.attrs.id!=null&&t.add(String(o.attrs.id))}),{agentIds:Array.from(e),teamIds:Array.from(t)}):{agentIds:[],teamIds:[]}},getCursorPosition:()=>{if(!n)return{from:0,to:0};const{from:e,to:t}=n.state.selection;return{from:e,to:t}},insertAtPosition:(e,t)=>{const o=l(t);i(s=>s.commands.insertContentAt(e,o))},getSelectedText:()=>{if(!n)return"";const{state:e}=n,{from:t,to:o,empty:s}=e.selection;if(!s)return e.doc.textBetween(t,o," ");const d=e.schema.marks.link;if(d){const g=xe.getMarkRange(e.doc.resolve(t),d);if(g)return e.doc.textBetween(g.from,g.to," ")}return""},getCharacterCount:()=>({count:n?.storage.characterCount?.characters?.()??n?.getText().length??0,limit:R??null}),getSectionContent:e=>n?r.extractSectionContent(n,e):{html:"",text:"",isEmpty:!0,characterCount:0},setSectionContent:(e,t)=>{const o=l(t);i(s=>r.setSectionContentInEditor(s,e,o))},focusSection:e=>{i(t=>{if(e==="body"){let s=t.state.doc.content.size-1;t.state.doc.descendants((d,g)=>(d.type.name==="sectionDivider"&&s===t.state.doc.content.size-1&&(s=g-1),s===t.state.doc.content.size-1)),s<1&&(s=1),t.chain().focus().setTextSelection(s).run();return}let o=-1;t.state.doc.descendants((s,d)=>{if(o!==-1)return!1;s.type.name==="sectionDivider"&&s.attrs.sectionId===e&&(o=d+s.nodeSize+1)}),o!==-1&&t.chain().focus().setTextSelection(o).run()})},clearSection:e=>{i(t=>r.setSectionContentInEditor(t,e,"<p></p>"))},getBodyContent:()=>n?r.extractBodyContent(n):{html:"",text:"",isEmpty:!0,characterCount:0},setBodyContent:e=>{const t=l(e);i(o=>r.setSectionContentInEditor(o,"body",t))},setBodyAndSections:(e,t)=>{const o=r.buildSectionedContent(l(e),t.map(s=>({id:s.id,content:l(s.content)})));i(s=>s.commands.setContent(o,{emitUpdate:!0}))},appendBodyContent:e=>{const t=l(e);i(o=>{const s=r.findSectionEndPos(o,"body");o.commands.insertContentAt(s-1,t,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionStart:(e,t)=>{const o=l(t);i(s=>{const d=r.findSectionStartPos(s,e);d!==-1&&s.commands.insertContentAt(d,o,{parseOptions:{preserveWhitespace:!0}})})},insertAtSectionEnd:(e,t)=>{const o=l(t);i(s=>{const d=r.findSectionEndPos(s,e);s.commands.insertContentAt(d,o,{parseOptions:{preserveWhitespace:!0}})})},getActiveFormats:()=>n?r.extractActiveFormats(n):ee.DEFAULT_FORMAT_STATE,actions:{toggleBold:()=>n?.chain().focus().toggleBold().run(),toggleItalic:()=>n?.chain().focus().toggleItalic().run(),toggleUnderline:()=>n?.chain().focus().toggleUnderline().run(),toggleStrike:()=>n?.chain().focus().toggleStrike().run(),toggleBulletList:()=>n?.chain().focus().toggleBulletList().run(),toggleOrderedList:()=>n?.chain().focus().toggleOrderedList().run(),toggleBlockquote:()=>n?.chain().focus().toggleBlockquote().run(),toggleCodeBlock:()=>n?.chain().focus().toggleCodeBlock().run(),setTextAlign:e=>n?.chain().focus().setTextAlign(e).run(),setFontFamily:e=>n?.chain().focus().setFontFamily(e).run(),setFontSize:e=>n?.chain().focus().setFontSize(e).run(),setColor:e=>n?.chain().focus().setColor(e).run(),setHighlight:e=>n?.chain().focus().toggleHighlight({color:e}).run(),unsetColor:()=>n?.chain().focus().unsetColor().run(),unsetHighlight:()=>n?.chain().focus().unsetHighlight().run(),setLink:(e,t)=>{n&&(t!==void 0?n.chain().focus().extendMarkRange("link").command(({tr:o,state:s})=>{const{from:d,to:g}=o.selection,K=s.schema.marks.link;if(!K)return!1;const ke=s.schema.text(t,[K.create({href:e})]),Se=s.schema.text(" ");return o.replaceWith(d,g,[ke,Se]),!0}).run():n.chain().focus().extendMarkRange("link").setLink({href:e}).insertContent(" ").run())},updateLink:e=>n?.chain().focus().extendMarkRange("link").setLink({href:e}).run(),removeLink:()=>n?.chain().focus().extendMarkRange("link").unsetLink().run(),insertEmoji:e=>n?.chain().focus().insertContent(e).run(),insertVariable:e=>n?.chain().focus().insertContent(`{{${e}}}`).run(),insertHtml:e=>n?.commands.insertContent(l(e)),openMentionMenu:(e="@")=>{if(!n)return;const{to:t}=n.state.selection,o=t>1?n.state.doc.textBetween(t-1,t):"",s=o!==""&&!/\s/.test(o);n.chain().focus().setTextSelection(t).insertContent(s?` ${e}`:e).run()},undo:()=>n?.chain().focus().undo().run(),redo:()=>n?.chain().focus().redo().run(),canUndo:()=>n?.can().undo()??!1,canRedo:()=>n?.can().redo()??!1,toggleSuperscript:()=>n?.chain().focus().toggleSuperscript().run(),toggleSubscript:()=>n?.chain().focus().toggleSubscript().run(),insertImage:e=>n?.chain().focus().setImage({src:e}).run()},json:S?.jsonMode?{getText:()=>n?r.getCodeBlockText(n):"",setText:e=>i(t=>r.setCodeBlockText(t,e)),parse:()=>r.parseJson(n?r.getCodeBlockText(n):""),isValid:()=>r.parseJson(n?r.getCodeBlockText(n):"").valid,format:(e=2)=>i(t=>{const{valid:o,value:s}=r.parseJson(r.getCodeBlockText(t));!o||s===null||r.setCodeBlockText(t,JSON.stringify(s,null,e))}),minify:()=>i(e=>{const{valid:t,value:o}=r.parseJson(r.getCodeBlockText(e));!t||o===null||r.setCodeBlockText(e,JSON.stringify(o))})}:void 0}),[n]);const pe=()=>{if(!n)return;const{valid:e,value:t}=r.parseJson(r.getCodeBlockText(n));!e||t===null||r.setCodeBlockText(n,JSON.stringify(t,null,2))},Ce=()=>{n&&(navigator.clipboard?.writeText(r.getCodeBlockText(n)),z(!0),setTimeout(()=>z(!1),1500))};return n?c.jsxs(x.BikEditorShell,{minHeight:le,maxHeight:de,tightParagraphs:!S?.richPaste,jsonMode:m,style:ue,className:me,children:[m&&c.jsxs(x.BikJsonHeader,{children:[c.jsx("span",{className:"bik-json-header-label",children:"JSON"}),c.jsxs("div",{className:"bik-json-header-actions",children:[c.jsxs("button",{type:"button",onClick:pe,disabled:!!f||T,title:"Format JSON",children:[c.jsx(Te.default,{size:16}),c.jsx(X.BodyCaption,{children:"Beautify"})]}),c.jsxs("button",{type:"button",onClick:Ce,disabled:T,title:"Copy JSON",children:[c.jsx(be.default,{size:16}),fe&&c.jsx(X.BodyCaption,{children:"Copied"})]})]})]}),m?c.jsxs(x.BikJsonBody,{$error:!!f,children:[c.jsx(E.EditorContent,{editor:n}),T&&!ge&&c.jsxs(x.BikJsonEmptyState,{"aria-hidden":!0,children:[c.jsx(Ee.default,{size:20}),c.jsx("span",{children:C.placeholder??"Type or paste JSON here"})]})]}):c.jsx(E.EditorContent,{editor:n}),c.jsx(Be.LinkBubbleMenu,{editor:n,renderLinkTooltip:ce?.renderTooltip}),m&&f?q?q(f):c.jsxs(x.BikJsonError,{children:[c.jsx(Re.default,{size:16}),c.jsxs("span",{children:[f.line!=null&&c.jsxs("strong",{children:["Line ",f.line,f.column!=null?`, column ${f.column}`:"",":"," "]}),f.error]})]}):null]}):null},te=a.forwardRef(ve);te.displayName="BikEditor";exports.BikEditor=te;
|
|
2
2
|
//# sourceMappingURL=BikEditor.js.map
|