@bikdotai/bik-component-library 0.0.875 → 0.0.876-beta.1
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/cjs/components/WhatsAppTextEditor/AIRephraseButton.js +2 -2
- package/dist/cjs/components/WhatsAppTextEditor/AIRephraseButton.js.map +1 -1
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js +4 -4
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js +2 -2
- package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js.map +1 -1
- package/dist/cjs/components/accordion/Accordion.style.js +1 -1
- package/dist/cjs/components/accordion/Accordion.style.js.map +1 -1
- package/dist/cjs/components/action-button/ActionButton.styled.js +1 -1
- package/dist/cjs/components/action-button/ActionButton.styled.js.map +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js.map +1 -1
- package/dist/cjs/components/bik-layout/SidebarStyles.js +1 -1
- package/dist/cjs/components/bik-layout/SidebarStyles.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +3 -3
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js +1 -1
- package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js.map +1 -1
- package/dist/cjs/components/card-selector/CardSelector.styled.js +1 -1
- package/dist/cjs/components/card-selector/CardSelector.styled.js.map +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +2 -2
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.styled.js +1 -1
- package/dist/cjs/components/checkBox/CheckBox.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/MenuItem/MenuItem.js +1 -1
- package/dist/cjs/components/dropdown/MenuItem/MenuItem.js.map +1 -1
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js +2 -2
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js.map +1 -1
- package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js +1 -1
- package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js.map +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.js +4 -4
- package/dist/cjs/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/cjs/components/plans/SubscriptionPlanSelector.js +1 -1
- package/dist/cjs/components/plans/SubscriptionPlanSelector.js.map +1 -1
- package/dist/cjs/components/product-picker-v2/style.js +2 -2
- package/dist/cjs/components/product-picker-v2/style.js.map +1 -1
- package/dist/cjs/components/switch/Switch.js +2 -2
- package/dist/cjs/components/switch/Switch.js.map +1 -1
- package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js +1 -1
- package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js.map +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js.map +1 -1
- package/dist/esm/components/WhatsAppTextEditor/AIRephraseButton.js +2 -2
- package/dist/esm/components/WhatsAppTextEditor/AIRephraseButton.js.map +1 -1
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js +4 -4
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js +2 -2
- package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js.map +1 -1
- package/dist/esm/components/accordion/Accordion.style.js +1 -1
- package/dist/esm/components/accordion/Accordion.style.js.map +1 -1
- package/dist/esm/components/action-button/ActionButton.styled.js +1 -1
- package/dist/esm/components/action-button/ActionButton.styled.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/CommonStyles.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/CommonStyles.js.map +1 -1
- package/dist/esm/components/bik-layout/SidebarStyles.js +1 -1
- package/dist/esm/components/bik-layout/SidebarStyles.js.map +1 -1
- package/dist/esm/components/button/Button.styled.js +3 -3
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/buttonGroup/ButtonGroupStyle.js +1 -1
- package/dist/esm/components/buttonGroup/ButtonGroupStyle.js.map +1 -1
- package/dist/esm/components/card-selector/CardSelector.styled.js +1 -1
- package/dist/esm/components/card-selector/CardSelector.styled.js.map +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +2 -2
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.styled.js +1 -1
- package/dist/esm/components/checkBox/CheckBox.styled.js.map +1 -1
- package/dist/esm/components/dropdown/MenuItem/MenuItem.js +1 -1
- package/dist/esm/components/dropdown/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js +2 -2
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map +1 -1
- package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js +1 -1
- package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js.map +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js +4 -4
- package/dist/esm/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/esm/components/plans/SubscriptionPlanSelector.js +1 -1
- package/dist/esm/components/plans/SubscriptionPlanSelector.js.map +1 -1
- package/dist/esm/components/product-picker-v2/style.js +2 -2
- package/dist/esm/components/product-picker-v2/style.js.map +1 -1
- package/dist/esm/components/switch/Switch.js +2 -2
- package/dist/esm/components/switch/Switch.js.map +1 -1
- package/dist/esm/components/template-preview/RCS/RCSPreview.styled.js +1 -1
- package/dist/esm/components/template-preview/RCS/RCSPreview.styled.js.map +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/product-picker-v2/style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny, TitleSmall } from '../TypographyStyle';\nimport { ScreenName } from './type';\n\nexport const ContainerStyle = styled.div<{ renderWithoutModal?: boolean }>`\n\tdisplay: flex;\n\tbackground-color: white;\n\theight: ${(props) => (props.renderWithoutModal ? '90%' : '75vh')};\n\tflex-direction: column;\n`;\n\nexport const ScrollContainerStyle = styled.div<{ screenName: string }>`\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.screenName !== ScreenName.RearrangeProducts ? '#888' : '#fff'};\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const CollectionCardStyle = styled.div<{\n\tisDisabled: boolean;\n\tisActive: boolean;\n\tusedInSearch: boolean;\n}>`\n\theight: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDisabled\n\t\t\t? '#F0F0F0'\n\t\t\t: props.isActive\n\t\t\t? COLORS.background.positive.light\n\t\t\t: 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: ${(props) => (props.usedInSearch ? '12px 16px' : '12px 24px')};\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: space-between;\n\talign-items: center;\n\t
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/product-picker-v2/style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny, TitleSmall } from '../TypographyStyle';\nimport { ScreenName } from './type';\n\nexport const ContainerStyle = styled.div<{ renderWithoutModal?: boolean }>`\n\tdisplay: flex;\n\tbackground-color: white;\n\theight: ${(props) => (props.renderWithoutModal ? '90%' : '75vh')};\n\tflex-direction: column;\n`;\n\nexport const ScrollContainerStyle = styled.div<{ screenName: string }>`\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.screenName !== ScreenName.RearrangeProducts ? '#888' : '#fff'};\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const CollectionCardStyle = styled.div<{\n\tisDisabled: boolean;\n\tisActive: boolean;\n\tusedInSearch: boolean;\n}>`\n\theight: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDisabled\n\t\t\t? '#F0F0F0'\n\t\t\t: props.isActive\n\t\t\t? COLORS.background.positive.light\n\t\t\t: 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: ${(props) => (props.usedInSearch ? '12px 16px' : '12px 24px')};\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: space-between;\n\talign-items: center;\n\t&:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const CollectionCardInfoStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tcolumn-gap: 18px;\n`;\n\nexport const CollectionCardDetailStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n`;\n\nexport const ProductScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tmargin-top: 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const ProductScreenCollectionCardStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid #e0e0e0;\n\talign-items: center;\n`;\n\nexport const ProductCardStyle = styled.div<{\n\tisVariant: boolean;\n\tisActive: boolean;\n}>`\n\tmin-height: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isActive ? COLORS.background.positive.light : 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding-left: ${(props) => (props.isVariant ? '42px' : '16px')};\n\t&:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const SelectedScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const CollectionNameHolder = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const VariantCardListStyle = styled.div`\n\tmin-height: 72px;\n\tbackground: white;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t.text-container {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tflex: 1;\n\t}\n\n\t.tooltip-title-tag {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\twidth: 100%;\n\t\tgap: 16px;\n\t}\n\t.info-container {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1;\n\t}\n`;\n\nexport const VariantCardGridStyle = styled.div`\n\theight: 72px;\n\twidth: 72px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 16px;\n`;\n\nexport const StyledHeaderRightIcon = styled.div`\n\tdisplay: flex;\n\twidth: 32px;\n\theight: 32px;\n\tpadding: 6px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const StyledFooterForNonModal = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nexport const SKUIDBadge = styled.div`\n\twidth: fit-content;\n\tbackground: ${COLORS.background.brandLight};\n\tpadding: 2px 6px;\n\tborder-radius: 14px;\n`;\n\nexport const EllipsedBodyTiny = styled(BodyTiny)`\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmax-width: 196px;\n\tdisplay: block;\n\tcolor: ${COLORS.background.inverseLight};\n`;\n\nexport const ProductSubTitle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 5px;\n`;\nexport const ProductInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n`;\n\nexport const StyledTitleSmall = styled(TitleSmall)`\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: block;\n`;\n"],"names":["ContainerStyle","styled","props","ScrollContainerStyle","ScreenName","CollectionCardStyle","COLORS","CollectionCardInfoStyle","CollectionCardDetailStyle","ProductScreenHeader","ProductScreenCollectionCardStyle","ProductCardStyle","SelectedScreenHeader","CollectionNameHolder","VariantCardListStyle","VariantCardGridStyle","StyledFooterForNonModal","SKUIDBadge","EllipsedBodyTiny","BodyTiny","ProductSubTitle","ProductInfo","TitleSmall"],"mappings":";;;;AAKO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA,WAG1B,CAACC,MAAWA,EAAM,qBAAqB,QAAQ,MAAO;AAAA;AAAA,GAIpDC,IAAuBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUrB,CAACC,MACpBA,EAAM,eAAeE,EAAW,oBAAoB,SAAS,MAAM;AAAA;AAAA;AAAA,GAKzDC,IAAsBJ,EAAO;AAAA;AAAA,qBAMrB,CAACC,MACpBA,EAAM,aACH,YACAA,EAAM,WACNI,EAAO,WAAW,SAAS,QAC3B,OAAO;AAAA;AAAA,YAEA,CAACJ,MAAWA,EAAM,eAAe,cAAc,WAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQjDI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BC,IAA0BN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCO,IAA4BP,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BI,IAAmCT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1CU,IAAmBV,EAAO;AAAA;AAAA,qBAKlB,CAACC,MACpBA,EAAM,WAAWI,EAAO,WAAW,SAAS,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ5C,CAACJ,MAAWA,EAAM,YAAY,SAAS,MAAO;AAAA;AAAA;AAAA,sBAGzCI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BM,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BO,IAAuBZ,EAAO;AAAA;AAAA;AAAA,GAK9Ba,IAAuBb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8B9Bc,IAAuBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASNA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOvBK,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMU,IAA0Bf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjCgB,IAAahB,EAAO;AAAA;AAAA,eAElBK,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA,GAK9BY,IAAmBjB,EAAOkB,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrCb,EAAO,WAAW,YAAY;AAAA,GAG3Bc,IAAkBnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMzBoB,IAAcpB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQFA,EAAOqB,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -94,13 +94,13 @@ const R = c.div`
|
|
|
94
94
|
transition: ${(e) => `${e.duration / 1e3}s ease all`};
|
|
95
95
|
align-items: center;
|
|
96
96
|
cursor: ${(e) => e.disabled ? "default" : "pointer"};
|
|
97
|
-
|
|
97
|
+
&:focus {
|
|
98
98
|
outline: ${(e) => e.value ? e.outlineColor.true : e.outlineColor.false};
|
|
99
99
|
outline-style: solid;
|
|
100
100
|
outline-offset: 2px;
|
|
101
101
|
outline-width: 2px;
|
|
102
102
|
}
|
|
103
|
-
|
|
103
|
+
&:active {
|
|
104
104
|
outline: ${(e) => e.value ? e.outlineColor.true : e.outlineColor.false};
|
|
105
105
|
outline-style: solid;
|
|
106
106
|
outline-offset: 2px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.type';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.type';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t&:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t&:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}
|
|
@@ -30,7 +30,7 @@ const o = t.div`
|
|
|
30
30
|
|
|
31
31
|
${(e) => e.needBorder ? e.showDashedBorder ? `border: 2px dashed ${r.content.brand};` : e.hasError ? `border: 2px solid ${r.content.negative};` : e.showBorder ? `border: 2px solid ${r.stroke.brand};` : `border: 2px solid ${r.stroke.primary};` : "border: none;"}
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
&:hover {
|
|
34
34
|
${(e) => e.isPreview || !e.needBorder ? "" : `
|
|
35
35
|
border: 2px ${e.isWhatsappCarousel ? e.hasError ? "dashed" : e.showBorder ? "solid" : "dashed" : "solid"} ${r.stroke.brand};
|
|
36
36
|
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t
|
|
1
|
+
{"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t&:hover {\n\t\t${(props) => {\n\t\t\tif (props.isPreview || !props.needBorder) return '';\n\n\t\t\tconst borderStyle = props.isWhatsappCarousel\n\t\t\t\t? props.hasError\n\t\t\t\t\t? 'dashed'\n\t\t\t\t\t: props.showBorder\n\t\t\t\t\t? 'solid'\n\t\t\t\t\t: 'dashed'\n\t\t\t\t: 'solid';\n\n\t\t\treturn `\n\t\t\t\tborder: 2px ${borderStyle} ${COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`;\n\t\t}}\n\t}\n\n\t.text--template {\n\t\tborder: 2px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 12px;\n\t\tflex: 1;\n\t}\n`;\n\nexport const RCSChatBtnContainer = styled.div`\n\tpadding: 12px 0px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\nexport const RCSMediaContainer = styled.div<{ isHorizontal: boolean }>`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: ${(props) => (props.isHorizontal ? '' : '4px')};\n\twidth: ${(props) => (props.isHorizontal ? '50%' : 'auto')};\n`;\nexport const RCSPdfContainer = styled.div`\n\tborder-radius: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 4px;\n\tbackground-color: #ede7e8;\n\tmargin: 4px;\n\tmax-width: 200px;\n`;\nexport const PdfComineText = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tmargin-left: 4px;\n\tmax-width: 180px;\n`;\nexport const PdfText = styled.p`\n\twhite-space: nowrap;\n\tcolor: #4c5567;\n\tmax-width: 100px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: 0px;\n\tmargin: 0px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tline-width: 20px;\n`;\n\nexport const RCSCarousalContainer = styled.div<{ borderRadius?: string }>`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tposition: relative;\n\theight: 500px;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '8px'};\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\tbackground-color: white;\n`;\n\n/* header */\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: ${COLORS.background.inactive};\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-bottom: 0px;\n`;\n"],"names":["styled","props","RcsHtmlContainer","COLORS","HeaderTextContainer","TitleTextContainer","RCSPreviewContainer","RCSChatBtnContainer","RCSMediaContainer","RCSPdfContainer","PdfComineText","PdfText","RCSCarousalContainer","HeaderContainer","LeftContainer","IconContainer","TitleContainer","SubTitle"],"mappings":";;AAI4BA,EAAO;AAAA,qBAId,CAACC,MAAWA,EAAM,aAAa,YAAY,OAAQ;AAAA;AAAA;AAAA,WAG7D,CAACA,MAAWA,EAAM,aAAa,SAAS,MAAO;AAAA;AAGnD,MAAMC,IAAmBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBC,IAAsBJ,EAAOE,CAAgB;AAAA;AAAA;AAAA,GAK7CG,IAAqBL,EAAOE,CAAgB;AAAA;AAAA,GAG5CI,IAAsBN,EAAO;AAAA,eAU3BG,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKnB,CAACF,MAClBA,EAAM,0BAA0B,QAAQ,QAAQ;AAAA;AAAA,GAE/C,CAACA,MACGA,EAAM,aACPA,EAAM,mBACF,sBAAsBE,EAAO,QAAQ,KAAK,MAC9CF,EAAM,WAAiB,qBAAqBE,EAAO,QAAQ,QAAQ,MACnEF,EAAM,aAAmB,qBAAqBE,EAAO,OAAO,KAAK,MAC9D,qBAAqBA,EAAO,OAAO,OAAO,MALnB,eAM9B;AAAA;AAAA;AAAA,IAGE,CAACF,MACEA,EAAM,aAAa,CAACA,EAAM,aAAmB,KAU1C;AAAA,kBARaA,EAAM,qBACvBA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OAGuB,IAAIE,EAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAM9BI,IAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU7BQ,IAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOtB,CAACC,MAAWA,EAAM,eAAe,KAAK,KAAM;AAAA,UACpD,CAACA,MAAWA,EAAM,eAAe,QAAQ,MAAO;AAAA,GAE7CQ,IAAkBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBU,IAAgBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBW,IAAUX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBY,IAAuBZ,EAAO;AAAA,qBACtBG,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIxB,CAACF,MAAUA,EAAM,gBAAgB,KAAK;AAAA;AAAA;AAAA,GAM3CY,IAAkBb,EAAO;AAAA;AAAA,qBAEjBG,EAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWlCW,IAAgBd,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBe,IAAgBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBgB,IAAiBhB,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAWjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAO,QAAQ,SAAS;AAAA;AAAA;"}
|
|
@@ -15,7 +15,7 @@ const s = r.div`
|
|
|
15
15
|
height: ${(e) => e.isWhatsappCarousel ? "100%" : "auto"};
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
|
-
|
|
18
|
+
&:hover {
|
|
19
19
|
border: 2px
|
|
20
20
|
${(e) => e.isPreview ? "unset" : e.isWhatsappCarousel ? e.hasError ? "dashed" : e.showBorder ? "solid" : "dashed" : "solid"}
|
|
21
21
|
${t.stroke.brand};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t
|
|
1
|
+
{"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t&:hover {\n\t\tborder: 2px\n\t\t\t${(props) =>\n\t\t\t\t!props.isPreview\n\t\t\t\t\t? props.isWhatsappCarousel\n\t\t\t\t\t\t? props.hasError\n\t\t\t\t\t\t\t? 'dashed'\n\t\t\t\t\t\t\t: props.showBorder\n\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t: 'dashed'\n\t\t\t\t\t\t: 'solid'\n\t\t\t\t\t: 'unset'}\n\t\t\t${COLORS.stroke.brand};\n\t\tbox-shadow: ${(props) =>\n\t\t\t!props.isPreview && '4px 4px 12px rgba(0, 0, 0, 0.25)'};\n\t}\n`;\n\nexport const TimeStamp = styled(Caption)`\n\tcolor: ${COLORS.content.secondary};\n\tmax-width: 80px;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-wrap: wrap;\n`;\n\nexport const FooterText = styled(TimeStamp)`\n\tmax-width: 200px;\n`;\n\nexport const MediaContainer = styled.div`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: 4px;\n\tmargin: 0px 8px;\n`;\n\nexport const ChatBtnContainer = styled.div`\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const FooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin: 8px 12px;\n`;\n\nexport const MediaNameAbsWrapper = styled.div`\n\tposition: absolute;\n\tbottom: -1px;\n\tleft: 0;\n\ttext-align: center;\n\twidth: 100%;\n\tpadding: 10px;\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: start;\n\tbackground: ${COLORS.surface.hovered};\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n`;\n\nexport const DownloadMediaIconHolder = styled.div`\n\tposition: absolute;\n\ttop: 16px;\n\tright: 16px;\n`;\n"],"names":["Container","styled","COLORS","props","TimeStamp","Caption","FooterText","MediaContainer","ChatBtnContainer","FooterWrapper"],"mappings":";;;AAIO,MAAMA,IAAYC,EAAO;AAAA,eAQjBC,EAAO,QAAQ,QAAQ;AAAA,2BACX,CAACC,MAAWA,EAAM,iBAAiB,SAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzE,CAACA,MACFA,EAAM,WACH,GAAGD,EAAO,QAAQ,QAAQ,KAC1BC,EAAM,aACN,GAAGD,EAAO,OAAO,KAAK,KACtB,GAAGA,EAAO,OAAO,OAAO,EAAE;AAAA,WACrB,CAACC,MACVA,EAAM,oBAAoB,cAAcD,EAAO,QAAQ,KAAK,EAAE;AAAA,WACrD,CAACC,MAAWA,EAAM,qBAAqB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK7D,CAACA,MACDA,EAAM,YAQJ,UAPAA,EAAM,qBACLA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OACM;AAAA,KACTD,EAAO,OAAO,KAAK;AAAA,gBACR,CAACC,MACd,CAACA,EAAM,aAAa,kCAAkC;AAAA;AAAA,GAI5CC,IAAYH,EAAOI,CAAO;AAAA,UAC7BH,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBI,IAAaL,EAAOG,CAAS;AAAA;AAAA,GAI7BG,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWxBO,IAAmBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAO,OAAO,OAAO;AAAA,GAGjCO,IAAgBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAODA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKED,EAAO;AAAA;AAAA;AAAA;AAAA;"}
|