brd-ui-kit 0.1.69 → 0.1.70
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/dist/components/input-contact/input-contact.d.ts +2 -0
- package/dist/components-input-contact-input-contact.cjs +6 -6
- package/dist/components-input-contact-input-contact.cjs.map +1 -1
- package/dist/components-input-contact-input-contact.js +49 -47
- package/dist/components-input-contact-input-contact.js.map +1 -1
- package/dist/components-input-phone-input-phone.cjs +6 -6
- package/dist/components-input-phone-input-phone.cjs.map +1 -1
- package/dist/components-input-phone-input-phone.js +17 -24
- package/dist/components-input-phone-input-phone.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./brd-ui-kit.css');const t=require("react/jsx-runtime");;/* empty css */const c=require("./lib-utils.cjs");require("class-variance-authority");const p=require("react");require("./components-ui-badge-badge.styles.cjs");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./brd-ui-kit.css');const t=require("react/jsx-runtime");;/* empty css */const c=require("./lib-utils.cjs");require("class-variance-authority");const p=require("react");require("./components-ui-badge-badge.styles.cjs");const f=require("./components-ui-button-button.cjs");require("./components-ui-button-button.styles.cjs");require("./components-ui-card-card.cjs");require("./components-ui-checkbox-checkbox.cjs");const s=require("./components-ui-icon-icon.cjs");require("./components-ui-combobox-combobox.cjs");require("./components-ui-dialog-dialog.cjs");require("./components-ui-label-label.cjs");require("./components-ui-separator-separator.cjs");require("./components-ui-field-field.styles.cjs");require("./components-ui-input-input.styles.cjs");require("./components-ui-textarea-textarea.cjs");require("./components-ui-input-group-input-group.styles.cjs");require("./components-ui-navigation-item-navigation-item.styles.cjs");require("./components-ui-navigation-menu-navigation-menu.styles.cjs");require("./components-ui-pagination-pagination.cjs");require("./components-ui-progress-progress.cjs");require("./components-ui-radio-group-radio-group.cjs");require("./components-ui-switch-switch.cjs");require("./components-ui-table-table.cjs");require("./components-ui-tabs-tabs.cjs");require("./components-ui-tooltip-tooltip.cjs");require("./components-ui-typography-typography.styles.cjs");const j=require("./hooks-usePopupControls.cjs");require("lucide-react");require("./components-app-pagination-app-pagination.styles.cjs");require("./components-app-sidebar-app-sidebar.styles.cjs");const _=require("./components-input-field-input-field.cjs");require("./components-select-field-select-field.cjs");require("./lodash-kqhtUJfz.cjs");require("./chart-CgVfpT_X.cjs");require("./index-DGxwh2Ms.cjs");require("./index-fTTv8YY8.cjs");const P=require("./components-input-phone-input-phone.cjs"),B=[{label:"Мобильный",icon:"phone"},{label:"Telegram",icon:"telegram"},{label:"WhatsApp",icon:"whats-app"},{label:"Max",icon:"max"},{label:"E-mail",icon:"mail"}],n=u=>{switch(u){case"max":return{viewBox:"0 0 16 16",bgColor:"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]"};case"telegram":return{viewBox:"0 0 17 17",bgColor:"bg-[#289AD2]"};case"whats-app":return{viewBox:"0 0 18 18",bgColor:"bg-[#00C202]",textColor:"text-[#00C202]"};default:return{viewBox:"0 0 24 24"}}},I=u=>{const{inputProps:q,inputPhoneProps:h,onTypeChange:v,...m}=u,[e,b]=p.useState("phone"),{isOpened:o,openPopup:x,closePopup:a}=j.usePopupControls(),l=p.useRef(null);p.useEffect(()=>{const r=i=>{l.current&&!l.current.contains(i.target)&&a()};return o&&document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[o,a]);const d=r=>{switch(r){case"phone":return"+7 (999) 999-99-99";case"telegram":return"@username";case"whats-app":return"+7 (999) 999-99-99";case"max":return"ID пользователя Max";case"mail":return"example@mail.com";default:return"Введите значение"}},g=r=>()=>{b(r),v?.(r),a()};return t.jsxs("div",{className:c.cn("relative",u.classes?.container),children:[["telegram","max","mail"].includes(e)?t.jsx(_.InputField,{...q,...m,date:[{id:"0",position:"inline-start",component:t.jsx(s.Icon,{type:e,classes:{wrapper:c.cn(`flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]
|
|
2
2
|
${n(e).bgColor??"bg-primary-inverse-hover-bg"}
|
|
3
|
-
${n(e).textColor??"text-primary-inverse-text"}`)},viewBox:n(e).viewBox})},{id:"1",position:"inline-end",component:t.jsx(
|
|
3
|
+
${n(e).textColor??"text-primary-inverse-text"}`)},viewBox:n(e).viewBox})},{id:"1",position:"inline-end",component:t.jsx(s.Icon,{type:o?"chevron-up":"chevron",className:"cursor-pointer",onClick:x})}],placeholder:d(e)}):t.jsx(P.InputPhone,{...h,...m,date:[{id:"0",position:"inline-start",component:t.jsx(s.Icon,{type:e,classes:{wrapper:c.cn(`flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]
|
|
4
4
|
${n(e).bgColor??"bg-primary-inverse-hover-bg"}
|
|
5
|
-
${n(e).textColor??"text-primary-inverse-text"}`)},viewBox:n(e).viewBox})},{id:"1",position:"inline-end",component:t.jsx(
|
|
6
|
-
flex-col rounded-xl border`,ref:l,children:
|
|
7
|
-
${
|
|
8
|
-
${
|
|
5
|
+
${n(e).textColor??"text-primary-inverse-text"}`)},viewBox:n(e).viewBox})},{id:"1",position:"inline-end",component:t.jsx(s.Icon,{type:o?"chevron-up":"chevron",className:"cursor-pointer",onClick:x})}],placeholder:d(e)}),o&&t.jsx("div",{className:`border-inp-hover-border bg-primary-bg absolute my-2 flex w-full
|
|
6
|
+
flex-col rounded-xl border`,ref:l,children:B.map(({label:r,icon:i})=>{const{bgColor:w,textColor:C,viewBox:y}=n(i);return t.jsxs(f.Button,{variant:"ghost",className:"flex w-full justify-start",type:"button",onClick:g(i),children:[t.jsx(s.Icon,{type:i,className:"text-primary-inverse-text",classes:{wrapper:c.cn(`flex h-5.5 w-5.5 items-center justify-center rounded-sm
|
|
7
|
+
${w??"bg-primary-inverse-hover-bg"}
|
|
8
|
+
${C??"text-primary-inverse-text"}`)},viewBox:y}),r]},r)})})]})};exports.InputContact=I;
|
|
9
9
|
//# sourceMappingURL=components-input-contact-input-contact.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-input-contact-input-contact.cjs","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app\",\n },\n {\n label: \"Max\",\n icon: \"max\",\n },\n {\n label: \"E-mail\",\n icon: \"mail\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport {\n Button,\n Icon,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type IconTypes,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n IconTypes,\n \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n switch (icon) {\n case \"max\":\n return {\n viewBox: \"0 0 16 16\",\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram\":\n return {\n viewBox: \"0 0 17 17\",\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app\":\n return {\n viewBox: \"0 0 18 18\",\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {\n viewBox: \"0 0 24 24\",\n };\n }\n};\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram\":\n return \"@username\";\n case \"whats-app\":\n return \"+7 (999) 999-99-99\";\n case \"max\":\n return \"ID пользователя Max\";\n case \"mail\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n props.onTypeChange?.(type);\n closePopup();\n };\n };\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram\", \"max\", \"mail\"].includes(type) ? (\n <InputField\n {...inputProps}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <Icon\n type={icon}\n className=\"text-primary-inverse-text\"\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={viewBox}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","InputContact","props","inputProps","inputPhoneProps","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","InputPhone","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-input-contact-input-contact.cjs","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app\",\n },\n {\n label: \"Max\",\n icon: \"max\",\n },\n {\n label: \"E-mail\",\n icon: \"mail\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport {\n Button,\n Icon,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type IconTypes,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n IconTypes,\n \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n switch (icon) {\n case \"max\":\n return {\n viewBox: \"0 0 16 16\",\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram\":\n return {\n viewBox: \"0 0 17 17\",\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app\":\n return {\n viewBox: \"0 0 18 18\",\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {\n viewBox: \"0 0 24 24\",\n };\n }\n};\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram\":\n return \"@username\";\n case \"whats-app\":\n return \"+7 (999) 999-99-99\";\n case \"max\":\n return \"ID пользователя Max\";\n case \"mail\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram\", \"max\", \"mail\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <Icon\n type={icon}\n className=\"text-primary-inverse-text\"\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={viewBox}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","InputPhone","label","bgColor","textColor","viewBox","Button"],"mappings":"o7DAEaA,EAAqB,CAChC,CACE,MAAO,YACP,KAAM,OAAA,EAER,CACE,MAAO,WACP,KAAM,UAAA,EAER,CACE,MAAO,WACP,KAAM,WAAA,EAER,CACE,MAAO,MACP,KAAM,KAAA,EAER,CACE,MAAO,SACP,KAAM,MAAA,CAEV,ECkBMC,EAAcC,GAAoB,CACtC,OAAQA,EAAA,CACN,IAAK,MACH,MAAO,CACL,QAAS,YACT,QAAS,kEAAA,EAGb,IAAK,WACH,MAAO,CACL,QAAS,YACT,QAAS,cAAA,EAGb,IAAK,YACH,MAAO,CACL,QAAS,YACT,QAAS,eACT,UAAW,gBAAA,EAGf,QACE,MAAO,CACL,QAAS,WAAA,CACX,CAEN,EAEaC,EAAgBC,GAAiB,CAC5C,KAAM,CAAE,WAAAC,EAAY,gBAAAC,EAAiB,aAAAC,EAAc,GAAGC,GAASJ,EAEzD,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAsB,OAAO,EAC/C,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,CAAA,EAAeC,EAAAA,iBAAA,EACtCC,EAAaC,EAAAA,OAAuB,IAAI,EAE9CC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAsBC,GAAsB,CAC5CJ,EAAW,SAAW,CAACA,EAAW,QAAQ,SAASI,EAAM,MAAc,GACzEN,EAAA,CAEJ,EAEA,OAAIF,GACF,SAAS,iBAAiB,YAAaO,CAAkB,EAGpD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACP,EAAUE,CAAU,CAAC,EAEzB,MAAMO,EAAkBZ,GAA8B,CACpD,OAAQA,EAAAA,CACN,IAAK,QACH,MAAO,qBACT,IAAK,WACH,MAAO,YACT,IAAK,YACH,MAAO,qBACT,IAAK,MACH,MAAO,sBACT,IAAK,OACH,MAAO,mBACT,QACE,MAAO,kBAAA,CAEb,EAEMa,EAAoBb,GACjB,IAAM,CACXC,EAAQD,CAAI,EACZF,IAAeE,CAAI,EACnBK,EAAA,CACF,EAGF,OACES,OAAC,OAAI,UAAWC,EAAAA,GAAG,WAAYpB,EAAM,SAAS,SAAS,EACpD,SAAA,CAAA,CAAC,WAAY,MAAO,MAAM,EAAE,SAASK,CAAI,EACxCgB,EAAAA,IAACC,EAAAA,WAAA,CACE,GAAGrB,EACH,GAAGG,EACJ,KAAM,CACJ,CACE,GAAI,IACJ,SAAU,eACV,UACEiB,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAAlB,EACA,QAAS,CACP,QAASe,EAAAA,GACP;AAAA,0BACIvB,EAAWQ,CAAI,EAAE,SAAW,6BAA6B;AAAA,0BACzDR,EAAWQ,CAAI,EAAE,WAAa,2BAA2B,EAAA,CAC/D,EAEF,QAASR,EAAWQ,CAAI,EAAE,OAAA,CAAA,CAC5B,EAGJ,CACE,GAAI,IACJ,SAAU,aACV,UACEgB,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAMf,EAAW,aAAe,UAChC,UAAU,iBACV,QAASC,CAAA,CAAA,CACX,CAEJ,EAEF,YAAaQ,EAAeZ,CAAI,CAAA,CAAA,EAGlCgB,EAAAA,IAACG,EAAAA,WAAA,CACE,GAAGtB,EACH,GAAGE,EACJ,KAAM,CACJ,CACE,GAAI,IACJ,SAAU,eACV,UACEiB,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAAlB,EACA,QAAS,CACP,QAASe,EAAAA,GACP;AAAA,0BACIvB,EAAWQ,CAAI,EAAE,SAAW,6BAA6B;AAAA,0BACzDR,EAAWQ,CAAI,EAAE,WAAa,2BAA2B,EAAA,CAC/D,EAEF,QAASR,EAAWQ,CAAI,EAAE,OAAA,CAAA,CAC5B,EAGJ,CACE,GAAI,IACJ,SAAU,aACV,UACEgB,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAMf,EAAW,aAAe,UAChC,UAAU,iBACV,QAASC,CAAA,CAAA,CACX,CAEJ,EAEF,YAAaQ,EAAeZ,CAAI,CAAA,CAAA,EAInCG,GACCa,EAAAA,IAAC,MAAA,CACC,UAAU;AAAA,wCAEV,IAAKT,EAEJ,WAAQ,IAAI,CAAC,CAAE,MAAAa,EAAO,KAAA3B,KAAW,CAChC,KAAM,CAAE,QAAA4B,EAAS,UAAAC,EAAW,QAAAC,CAAA,EAAY/B,EAAWC,CAAI,EAEvD,OACEqB,EAAAA,KAACU,EAAAA,OAAA,CAEC,QAAQ,QACR,UAAU,4BACV,KAAK,SACL,QAASX,EAAiBpB,CAAI,EAE9B,SAAA,CAAAuB,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAMzB,EACN,UAAU,4BACV,QAAS,CACP,QAASsB,EAAAA,GACP;AAAA,wBACEM,GAAW,6BAA6B;AAAA,wBACxCC,GAAa,2BAA2B,EAAA,CAC5C,EAEF,QAAAC,CAAA,CAAA,EAGDH,CAAA,CAAA,EAnBIA,CAAA,CAsBX,CAAC,CAAA,CAAA,CACH,EAEJ,CAEJ"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as x, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import './brd-ui-kit.css';/* empty css */
|
|
3
3
|
import { cn as m } from "./lib-utils.js";
|
|
4
4
|
import "class-variance-authority";
|
|
5
|
-
import { useState as
|
|
5
|
+
import { useState as B, useRef as P, useEffect as N } from "react";
|
|
6
6
|
import "./components-ui-badge-badge.styles.js";
|
|
7
|
-
import { Button as
|
|
7
|
+
import { Button as j } from "./components-ui-button-button.js";
|
|
8
8
|
import "./components-ui-button-button.styles.js";
|
|
9
9
|
import "./components-ui-card-card.js";
|
|
10
10
|
import "./components-ui-checkbox-checkbox.js";
|
|
11
|
-
import { Icon as
|
|
11
|
+
import { Icon as p } from "./components-ui-icon-icon.js";
|
|
12
12
|
import "./components-ui-combobox-combobox.js";
|
|
13
13
|
import "./components-ui-dialog-dialog.js";
|
|
14
14
|
import "./components-ui-label-label.js";
|
|
@@ -27,18 +27,18 @@ import "./components-ui-table-table.js";
|
|
|
27
27
|
import "./components-ui-tabs-tabs.js";
|
|
28
28
|
import "./components-ui-tooltip-tooltip.js";
|
|
29
29
|
import "./components-ui-typography-typography.styles.js";
|
|
30
|
-
import { usePopupControls as
|
|
30
|
+
import { usePopupControls as I } from "./hooks-usePopupControls.js";
|
|
31
31
|
import "lucide-react";
|
|
32
32
|
import "./components-app-pagination-app-pagination.styles.js";
|
|
33
33
|
import "./components-app-sidebar-app-sidebar.styles.js";
|
|
34
|
-
import { InputField as
|
|
34
|
+
import { InputField as $ } from "./components-input-field-input-field.js";
|
|
35
35
|
import "./components-select-field-select-field.js";
|
|
36
36
|
import "./lodash-FemA_LCk.js";
|
|
37
37
|
import "./chart-D15EtNmb.js";
|
|
38
38
|
import "./index-C4iHL8Gs.js";
|
|
39
39
|
import "./index-C6N9aMq_.js";
|
|
40
|
-
import { InputPhone as
|
|
41
|
-
const
|
|
40
|
+
import { InputPhone as T } from "./components-input-phone-input-phone.js";
|
|
41
|
+
const k = [
|
|
42
42
|
{
|
|
43
43
|
label: "Мобильный",
|
|
44
44
|
icon: "phone"
|
|
@@ -59,8 +59,8 @@ const $ = [
|
|
|
59
59
|
label: "E-mail",
|
|
60
60
|
icon: "mail"
|
|
61
61
|
}
|
|
62
|
-
], o = (
|
|
63
|
-
switch (
|
|
62
|
+
], o = (s) => {
|
|
63
|
+
switch (s) {
|
|
64
64
|
case "max":
|
|
65
65
|
return {
|
|
66
66
|
viewBox: "0 0 16 16",
|
|
@@ -82,17 +82,17 @@ const $ = [
|
|
|
82
82
|
viewBox: "0 0 24 24"
|
|
83
83
|
};
|
|
84
84
|
}
|
|
85
|
-
},
|
|
86
|
-
const { inputProps:
|
|
87
|
-
|
|
88
|
-
const r = (
|
|
89
|
-
l.current && !l.current.contains(
|
|
85
|
+
}, fe = (s) => {
|
|
86
|
+
const { inputProps: h, inputPhoneProps: v, onTypeChange: f, ...c } = s, [e, g] = B("phone"), { isOpened: i, openPopup: u, closePopup: a } = I(), l = P(null);
|
|
87
|
+
N(() => {
|
|
88
|
+
const r = (n) => {
|
|
89
|
+
l.current && !l.current.contains(n.target) && a();
|
|
90
90
|
};
|
|
91
|
-
return
|
|
91
|
+
return i && document.addEventListener("mousedown", r), () => {
|
|
92
92
|
document.removeEventListener("mousedown", r);
|
|
93
93
|
};
|
|
94
|
-
}, [
|
|
95
|
-
const
|
|
94
|
+
}, [i, a]);
|
|
95
|
+
const d = (r) => {
|
|
96
96
|
switch (r) {
|
|
97
97
|
case "phone":
|
|
98
98
|
return "+7 (999) 999-99-99";
|
|
@@ -107,20 +107,21 @@ const $ = [
|
|
|
107
107
|
default:
|
|
108
108
|
return "Введите значение";
|
|
109
109
|
}
|
|
110
|
-
},
|
|
111
|
-
|
|
110
|
+
}, b = (r) => () => {
|
|
111
|
+
g(r), f?.(r), a();
|
|
112
112
|
};
|
|
113
|
-
return /* @__PURE__ */
|
|
113
|
+
return /* @__PURE__ */ x("div", { className: m("relative", s.classes?.container), children: [
|
|
114
114
|
["telegram", "max", "mail"].includes(e) ? /* @__PURE__ */ t(
|
|
115
|
-
|
|
115
|
+
$,
|
|
116
116
|
{
|
|
117
|
-
...
|
|
117
|
+
...h,
|
|
118
|
+
...c,
|
|
118
119
|
date: [
|
|
119
120
|
{
|
|
120
121
|
id: "0",
|
|
121
122
|
position: "inline-start",
|
|
122
123
|
component: /* @__PURE__ */ t(
|
|
123
|
-
|
|
124
|
+
p,
|
|
124
125
|
{
|
|
125
126
|
type: e,
|
|
126
127
|
classes: {
|
|
@@ -138,27 +139,28 @@ const $ = [
|
|
|
138
139
|
id: "1",
|
|
139
140
|
position: "inline-end",
|
|
140
141
|
component: /* @__PURE__ */ t(
|
|
141
|
-
|
|
142
|
+
p,
|
|
142
143
|
{
|
|
143
|
-
type:
|
|
144
|
+
type: i ? "chevron-up" : "chevron",
|
|
144
145
|
className: "cursor-pointer",
|
|
145
|
-
onClick:
|
|
146
|
+
onClick: u
|
|
146
147
|
}
|
|
147
148
|
)
|
|
148
149
|
}
|
|
149
150
|
],
|
|
150
|
-
placeholder:
|
|
151
|
+
placeholder: d(e)
|
|
151
152
|
}
|
|
152
153
|
) : /* @__PURE__ */ t(
|
|
153
|
-
|
|
154
|
+
T,
|
|
154
155
|
{
|
|
155
|
-
...
|
|
156
|
+
...v,
|
|
157
|
+
...c,
|
|
156
158
|
date: [
|
|
157
159
|
{
|
|
158
160
|
id: "0",
|
|
159
161
|
position: "inline-start",
|
|
160
162
|
component: /* @__PURE__ */ t(
|
|
161
|
-
|
|
163
|
+
p,
|
|
162
164
|
{
|
|
163
165
|
type: e,
|
|
164
166
|
classes: {
|
|
@@ -176,47 +178,47 @@ const $ = [
|
|
|
176
178
|
id: "1",
|
|
177
179
|
position: "inline-end",
|
|
178
180
|
component: /* @__PURE__ */ t(
|
|
179
|
-
|
|
181
|
+
p,
|
|
180
182
|
{
|
|
181
|
-
type:
|
|
183
|
+
type: i ? "chevron-up" : "chevron",
|
|
182
184
|
className: "cursor-pointer",
|
|
183
|
-
onClick:
|
|
185
|
+
onClick: u
|
|
184
186
|
}
|
|
185
187
|
)
|
|
186
188
|
}
|
|
187
189
|
],
|
|
188
|
-
placeholder:
|
|
190
|
+
placeholder: d(e)
|
|
189
191
|
}
|
|
190
192
|
),
|
|
191
|
-
|
|
193
|
+
i && /* @__PURE__ */ t(
|
|
192
194
|
"div",
|
|
193
195
|
{
|
|
194
196
|
className: `border-inp-hover-border bg-primary-bg absolute my-2 flex w-full
|
|
195
197
|
flex-col rounded-xl border`,
|
|
196
198
|
ref: l,
|
|
197
|
-
children:
|
|
198
|
-
const { bgColor:
|
|
199
|
-
return /* @__PURE__ */
|
|
200
|
-
|
|
199
|
+
children: k.map(({ label: r, icon: n }) => {
|
|
200
|
+
const { bgColor: w, textColor: C, viewBox: y } = o(n);
|
|
201
|
+
return /* @__PURE__ */ x(
|
|
202
|
+
j,
|
|
201
203
|
{
|
|
202
204
|
variant: "ghost",
|
|
203
205
|
className: "flex w-full justify-start",
|
|
204
206
|
type: "button",
|
|
205
|
-
onClick:
|
|
207
|
+
onClick: b(n),
|
|
206
208
|
children: [
|
|
207
209
|
/* @__PURE__ */ t(
|
|
208
|
-
|
|
210
|
+
p,
|
|
209
211
|
{
|
|
210
|
-
type:
|
|
212
|
+
type: n,
|
|
211
213
|
className: "text-primary-inverse-text",
|
|
212
214
|
classes: {
|
|
213
215
|
wrapper: m(
|
|
214
216
|
`flex h-5.5 w-5.5 items-center justify-center rounded-sm
|
|
215
|
-
${
|
|
216
|
-
${
|
|
217
|
+
${w ?? "bg-primary-inverse-hover-bg"}
|
|
218
|
+
${C ?? "text-primary-inverse-text"}`
|
|
217
219
|
)
|
|
218
220
|
},
|
|
219
|
-
viewBox:
|
|
221
|
+
viewBox: y
|
|
220
222
|
}
|
|
221
223
|
),
|
|
222
224
|
r
|
|
@@ -230,6 +232,6 @@ const $ = [
|
|
|
230
232
|
] });
|
|
231
233
|
};
|
|
232
234
|
export {
|
|
233
|
-
|
|
235
|
+
fe as InputContact
|
|
234
236
|
};
|
|
235
237
|
//# sourceMappingURL=components-input-contact-input-contact.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app\",\n },\n {\n label: \"Max\",\n icon: \"max\",\n },\n {\n label: \"E-mail\",\n icon: \"mail\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport {\n Button,\n Icon,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type IconTypes,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n IconTypes,\n \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n switch (icon) {\n case \"max\":\n return {\n viewBox: \"0 0 16 16\",\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram\":\n return {\n viewBox: \"0 0 17 17\",\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app\":\n return {\n viewBox: \"0 0 18 18\",\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {\n viewBox: \"0 0 24 24\",\n };\n }\n};\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram\":\n return \"@username\";\n case \"whats-app\":\n return \"+7 (999) 999-99-99\";\n case \"max\":\n return \"ID пользователя Max\";\n case \"mail\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n props.onTypeChange?.(type);\n closePopup();\n };\n };\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram\", \"max\", \"mail\"].includes(type) ? (\n <InputField\n {...inputProps}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <Icon\n type={icon}\n className=\"text-primary-inverse-text\"\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={viewBox}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","InputContact","props","inputProps","inputPhoneProps","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","InputPhone","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app\",\n },\n {\n label: \"Max\",\n icon: \"max\",\n },\n {\n label: \"E-mail\",\n icon: \"mail\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport {\n Button,\n Icon,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type IconTypes,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange = Extract<\n IconTypes,\n \"telegram\" | \"whats-app\" | \"max\" | \"phone\" | \"mail\"\n>;\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: IconTypes) => {\n switch (icon) {\n case \"max\":\n return {\n viewBox: \"0 0 16 16\",\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram\":\n return {\n viewBox: \"0 0 17 17\",\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app\":\n return {\n viewBox: \"0 0 18 18\",\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {\n viewBox: \"0 0 24 24\",\n };\n }\n};\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram\":\n return \"@username\";\n case \"whats-app\":\n return \"+7 (999) 999-99-99\";\n case \"max\":\n return \"ID пользователя Max\";\n case \"mail\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram\", \"max\", \"mail\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <Icon\n type={type}\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm p-[3.5px]\n ${iconStyles(type).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(type).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={iconStyles(type).viewBox}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <Icon\n type={isOpened ? \"chevron-up\" : \"chevron\"}\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const { bgColor, textColor, viewBox } = iconStyles(icon);\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <Icon\n type={icon}\n className=\"text-primary-inverse-text\"\n classes={{\n wrapper: cn(\n `flex h-5.5 w-5.5 items-center justify-center rounded-sm\n ${bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${textColor ?? \"text-primary-inverse-text\"}`,\n ),\n }}\n viewBox={viewBox}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","iconStyles","icon","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","jsxs","cn","jsx","InputField","Icon","InputPhone","label","bgColor","textColor","viewBox","Button"],"mappings":"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"}
|