@bikdotai/bik-component-library 0.0.774-beta.9 → 0.0.775
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/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/button/Button.styled.d.ts +1 -1
- package/dist/cjs/components/datePicker/DatePicker.styled.d.ts +4 -4
- package/dist/cjs/components/dropdown/Dropdown.d.ts +0 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +1 -0
- package/dist/cjs/components/input/Input.styled.d.ts +4 -4
- package/dist/cjs/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/cjs/components/modals/modal.styled.d.ts +4 -4
- package/dist/cjs/components/pagination/Pagination.styled.d.ts +1 -1
- package/dist/cjs/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts +2 -2
- package/dist/cjs/components/switch/Switch.d.ts +3 -3
- package/dist/cjs/components/tag/Tag.d.ts +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.stories.d.ts +5 -5
- package/dist/cjs/components/tag/Tag.styled.d.ts +4 -1
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/model.d.ts +15 -0
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/toaster/Toaster.styled.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/button/Button.styled.d.ts +1 -1
- package/dist/esm/components/datePicker/DatePicker.styled.d.ts +4 -4
- package/dist/esm/components/dropdown/Dropdown.d.ts +0 -1
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/feature-announcements/types/feature.types.d.ts +1 -0
- package/dist/esm/components/input/Input.styled.d.ts +4 -4
- package/dist/esm/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/esm/components/modals/modal.styled.d.ts +4 -4
- package/dist/esm/components/pagination/Pagination.styled.d.ts +1 -1
- package/dist/esm/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts +2 -2
- package/dist/esm/components/switch/Switch.d.ts +3 -3
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.stories.d.ts +5 -5
- package/dist/esm/components/tag/Tag.styled.d.ts +4 -1
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/model.d.ts +15 -0
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/toaster/Toaster.styled.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Size, Type } from './model';
|
|
3
3
|
export declare const Button: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
size: Size;
|
|
8
8
|
buttonType: Type;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
selectRange: boolean;
|
|
7
7
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
8
|
export declare const TimePickerContainer: import("@emotion/styled").StyledComponent<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
11
11
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
12
12
|
export declare const TimeInputWrapper: import("@emotion/styled").StyledComponent<{
|
|
13
13
|
theme?: import("@emotion/react").Theme | undefined;
|
|
14
|
-
as?: import("react").ElementType<any> | undefined;
|
|
14
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
15
15
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
16
|
export declare const TimeLabel: import("@emotion/styled").StyledComponent<{
|
|
17
17
|
theme?: import("@emotion/react").Theme | undefined;
|
|
18
|
-
as?: import("react").ElementType<any> | undefined;
|
|
18
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
19
19
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),o=require("react"),t=require("../../constants/Theme.js"),r=require("../../assets/icons/chevronDown.svg.js"),l=require("../input/Input.js"),i=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),a=require("./DropdownPopover/index.js"),d=require("./OpenedDropdown/utils/iterationOnOptions.js");function c(){}const u=u=>{var p,h,v,g,x,{placeHolder:j,size:f,onSelect:b,defaultOptions:w,disabled:O,noErrorHint:I,placeHolderHeight:S,showPlaceholderWhenSelected:m=!1,inputStyle:y={},inputType:E="default",onDeleteChip:H,truncatedText:C,showLeadingIconInPlaceholder:D=!1,showTrailingIconPlaceholder:P=!1,showLabelsOnMoreHover:T=!1,value:q}=u,M=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[L,W]=o.useState(!1),[_,z]=o.useState(!1),k=null!=f?f:"default",A=o.useRef(),[F,R]=o.useState(null!=w?w:[]);o.useEffect((()=>{var e;const n=[];null===(e=null==M?void 0:M.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&n.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&n.push(e)})),R([...n])}),[M.options]),o.useEffect((()=>{w&&R([...w])}),[w]);const N=d.getSelectedOptionsAsText(F),U=m?j:null!==(p=null!=N?N:j)&&void 0!==p?p:"Select an option",V=null!==(h=M.width)&&void 0!==h?h:M.buttonWidth,B=null!=V?V:"100%",G=null!==(v=M.dropdownWidth)&&void 0!==v?v:B;return n.jsx(n.Fragment,{children:n.jsx(i.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:S||("x-small"===k?24:"small"===k?32:48),width:B},V?{maxWidth:V}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===k?"4px 8px":"6px 8px",backgroundColor:void 0!==q?"#C3E4C4":_?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),y),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==q?"#00580E":"inherit"}}},{children:n.jsx("div",Object.assign({onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1)},{children:n.jsxs(a.DropdownPopover,Object.assign({"data-test":M["data-test"],ref:A,onSelect:function(e){Array.isArray(e)?R([...e]):R([e]),null==b||b(e)},disabled:O,onDropdownVisbilityChange:e=>W(e)},M,{width:G},{children:["default"==E&&n.jsx(l.Input,{version:M.version,noErrorHint:I,state:O?"disabled":"none",value:void 0===q?U:q,errorMessage:M.error,variant:k,placeholder:null!=j?j:"Select an option",onChangeText:c,leftIcon:D&&(null===(g=F[0])||void 0===g?void 0:g.leadingIcon)?{icon:()=>{var e;return n.jsx(n.Fragment,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return n.jsxs("div",Object.assign({style:{display:"flex"}},{children:[P&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),n.jsx(r.default,{style:{transform:L?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"x-small"===k?16:"small"===k?20:24,height:"x-small"===k?16:"small"===k?20:24,color:t.COLORS.content.primary})]}))}},truncateText:null==C||C}),"chip"==E&&n.jsx(s.default,{placeholder:null!=j?j:"Select options",chips:F,onDeleteChip:e=>{null==H||H(e)},errorMessage:M.error,isDropdownOpened:L,sizeToUse:k,containerStyle:{width:null!==(x=M.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]}))}))}))})};u.displayName="Dropdown",exports.Dropdown=u;
|
|
@@ -53,6 +53,7 @@ export interface FeatureAnnouncement {
|
|
|
53
53
|
archived?: boolean;
|
|
54
54
|
createdAt: FirestoreTimestamp;
|
|
55
55
|
expirationDate?: FirestoreTimestamp | string | Date;
|
|
56
|
+
showInFeed?: boolean;
|
|
56
57
|
primaryButton?: ButtonConfig;
|
|
57
58
|
secondaryButton?: SecondaryButtonConfig;
|
|
58
59
|
padding?: string;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { InputStateI, InputTypeI, InputVariant } from "./Input";
|
|
3
3
|
export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
width?: string | undefined;
|
|
8
8
|
height?: string | undefined;
|
|
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
|
|
|
16
16
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
17
|
export declare const IconHolder: import("@emotion/styled").StyledComponent<{
|
|
18
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?: import("react").ElementType<any> | undefined;
|
|
19
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
20
20
|
} & {
|
|
21
21
|
isLeft?: boolean | undefined;
|
|
22
22
|
iconSize?: string | undefined;
|
|
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
|
|
|
57
57
|
}, {}, {}>;
|
|
58
58
|
export declare const InputHeader: import("@emotion/styled").StyledComponent<{
|
|
59
59
|
theme?: import("@emotion/react").Theme | undefined;
|
|
60
|
-
as?: import("react").ElementType<any> | undefined;
|
|
60
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
61
61
|
} & {
|
|
62
62
|
invalid?: boolean | undefined;
|
|
63
63
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
|
|
|
91
91
|
}, {}, {}>;
|
|
92
92
|
export declare const RootContainer: import("@emotion/styled").StyledComponent<{
|
|
93
93
|
theme?: import("@emotion/react").Theme | undefined;
|
|
94
|
-
as?: import("react").ElementType<any> | undefined;
|
|
94
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
95
95
|
} & {
|
|
96
96
|
width?: string | undefined;
|
|
97
97
|
height?: string | undefined;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { Variant } from './ListItem';
|
|
3
3
|
export declare const ListItem: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
variant: Variant;
|
|
8
8
|
borderBottom?: string | undefined;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const RootContainer: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
zIndex?: number | undefined;
|
|
7
7
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
8
|
export declare const CentralContainer: import("@emotion/styled").StyledComponent<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
11
11
|
} & {
|
|
12
12
|
width?: string | undefined;
|
|
13
13
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
14
14
|
export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
|
|
15
15
|
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
-
as?: import("react").ElementType<any> | undefined;
|
|
16
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
17
17
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
18
18
|
export declare const CloseButtonWithTimer: import("@emotion/styled").StyledComponent<{
|
|
19
19
|
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
-
as?: import("react").ElementType<any> | undefined;
|
|
20
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
21
21
|
} & {
|
|
22
22
|
timerExists?: boolean | undefined;
|
|
23
23
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Pagination: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
isBrand?: boolean | undefined;
|
|
7
7
|
direction?: "row" | "column" | undefined;
|
|
@@ -9,7 +9,7 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
|
|
|
9
9
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
10
|
export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
|
|
11
11
|
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
-
as?: import("react").ElementType<any> | undefined;
|
|
12
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
13
13
|
} & {
|
|
14
14
|
isBrand?: boolean | undefined;
|
|
15
15
|
height: number;
|
|
@@ -3,7 +3,7 @@ import { SwitchColorProps, SwitchProps } from './Switch.d';
|
|
|
3
3
|
export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
|
|
5
5
|
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
-
as?: import("react").ElementType<any> | undefined;
|
|
6
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
7
7
|
} & {
|
|
8
8
|
trackLength: number;
|
|
9
9
|
trackHeight: number;
|
|
@@ -16,7 +16,7 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
|
|
|
16
16
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
17
|
export declare const Thumb: import("@emotion/styled").StyledComponent<{
|
|
18
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?: import("react").ElementType<any> | undefined;
|
|
19
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
20
20
|
} & {
|
|
21
21
|
value: boolean;
|
|
22
22
|
duration: number;
|
|
@@ -24,7 +24,7 @@ export declare const Thumb: import("@emotion/styled").StyledComponent<{
|
|
|
24
24
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
25
25
|
export declare const Loader: import("@emotion/styled").StyledComponent<{
|
|
26
26
|
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
-
as?: import("react").ElementType<any> | undefined;
|
|
27
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
28
28
|
} & {
|
|
29
29
|
value: boolean;
|
|
30
30
|
trackColor: SwitchColorProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TagProps } from './model';
|
|
2
2
|
export declare const Tag: {
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),n=require("../tooltips/Tooltip.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),n=require("../tooltips/Tooltip.js"),s=require("../TypographyStyle.js"),a=require("./model.js"),t=require("./Tag.styled.js"),r=require("./themes.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(i);const o=i=>{let{tagText:c,LeadingIcon:o,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:j,trailingIconId:b,onTrailingIconClicked:u,theme:p="light",type:m="neutral",variant:O="regular",version:h,cursor:x,alignIcon:y,noBorder:T,tagHtmlText:f,contentPadding:C,leadingIconTooltip:I,trailingIconTooltip:L,tagColor:B,numberOfLines:N,backgroundColor:k,borderRadius:w,size:v="regular"}=i,q=c;const A=p;let E=m;a.ValidTagTypeMap[O][m]||(E="neutral"),"circle"===O&&"number"==typeof q&&q>99&&(q="99+");const $={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:r.getTagIconColor(p,E),style:{display:"block"}};return e.jsx(t.Tag,Object.assign({cursor:x,theme:A,type:E,variant:O,version:h,alignIcon:y,noBorder:T,contentPadding:C,backgroundColor:k,borderRadius:w,size:v},{children:e.jsxs("div",Object.assign({className:"container"},{children:[o&&(I?e.jsx(n.Tooltip,Object.assign({},I,{children:e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:l.default.createElement(o,Object.assign(Object.assign({},$),{id:j||"leading-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:l.default.createElement(o,Object.assign(Object.assign({},$),{id:j||"leading-icon"}))}))),f&&("ai"===m&&"light"===p?"small"===v?e.jsx(s.AiBodyTiny,Object.assign({numberOfLines:N},{children:f})):e.jsx(s.AiBodyCaption,Object.assign({numberOfLines:N},{children:f})):"small"===v?e.jsx(s.BodyTiny,Object.assign({className:"text",numberOfLines:N},{children:f})):e.jsx(s.BodyCaption,Object.assign({className:"text",numberOfLines:N},{children:f}))),!f&&""!==q&&("ai"===m&&"light"===p?"small"===v?e.jsx(s.AiBodyTiny,Object.assign({numberOfLines:N},{children:q})):e.jsx(s.AiBodyCaption,Object.assign({numberOfLines:N},{children:q})):"small"===v?e.jsx(s.BodyTiny,Object.assign({className:"text",color:B,numberOfLines:N},{children:q})):e.jsx(s.BodyCaption,Object.assign({className:"text",color:B,numberOfLines:N},{children:q}))),d&&(L?e.jsx(n.Tooltip,Object.assign({},L,{children:e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper"},{children:l.default.createElement(d,Object.assign(Object.assign({},$),{id:b||"trailing-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper"},{children:l.default.createElement(d,Object.assign(Object.assign({},$),{id:b||"trailing-icon"}))})))]}))}))};o.displayName="Tag",exports.Tag=o;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
2
|
declare const _default: ComponentMeta<{
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
}>;
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const Default: ComponentStory<{
|
|
8
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
}>;
|
|
11
11
|
export declare const WithIcons: ComponentStory<{
|
|
12
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
}>;
|
|
15
15
|
export declare const WithIconTooltips: ComponentStory<{
|
|
16
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
}>;
|
|
19
19
|
export declare const DarkTheme: ComponentStory<{
|
|
20
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { TagTheme, TagType, TagVariant } from './model';
|
|
3
3
|
export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
theme: TagTheme;
|
|
8
8
|
type: TagType;
|
|
@@ -12,4 +12,7 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
12
12
|
alignIcon?: string | undefined;
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
|
+
backgroundColor?: string | undefined;
|
|
16
|
+
borderRadius?: string | number | undefined;
|
|
17
|
+
size?: "small" | "regular" | undefined;
|
|
15
18
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),I=require("./themes.js");function l(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const g=l(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var I;return null!==(I=c.cursor)&&void 0!==I?I:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>"small"===c.size?"2px 6px":c.contentPadding?c.contentPadding:I.getPadding(c.variant)),";background:",(c=>{var l;return null!==(l=c.backgroundColor)&&void 0!==l?l:I.getBackgroundColor(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${I.generateBorder(c.type,c.theme)};`)," .text{color:",(c=>I.getTextColor(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJyA/ICdoZWlnaHQ6IDE2cHg7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7JyA6ICcnfVxuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnc21hbGwnXHJcbiAgICA/ICcycHggNnB4J1xyXG4gICAgOiBwcm9wcy5jb250ZW50UGFkZGluZ1xyXG4gICAgICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICA6IGdldFBhZGRpbmcocHJvcHMudmFyaWFudCl9O1xuXHRcdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmJhY2tncm91bmRDb2xvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKTsgfX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gcHJvcHMuYm9yZGVyUmFkaXVzICE9PSB1bmRlZmluZWRcclxuICAgID8gdHlwZW9mIHByb3BzLmJvcmRlclJhZGl1cyA9PT0gJ251bWJlcidcclxuICAgICAgICA/IGAke3Byb3BzLmJvcmRlclJhZGl1c31weGBcclxuICAgICAgICA6IHByb3BzLmJvcmRlclJhZGl1c1xyXG4gICAgOiBwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/ICc0cHgnXHJcbiAgICAgICAgOiAnMTJweCd9O1xuXG5cdFx0JHsocHJvcHMpID0+ICFwcm9wcy5ub0JvcmRlciAmJlxyXG4gICAgcHJvcHMudGhlbWUgPT09ICdsaWdodCcgJiZcclxuICAgIGBib3JkZXI6ICR7cHJvcHMudmVyc2lvbiA9PT0gJzIuMCcgPyAwLjUgOiAxfXB4IHNvbGlkICR7Z2VuZXJhdGVCb3JkZXIocHJvcHMudHlwZSwgcHJvcHMudGhlbWUpfTtgfVxuXG5cdFx0LnRleHQge1xuXHRcdFx0Y29sb3I6ICR7KHByb3BzKSA9PiBnZXRUZXh0Q29sb3IocHJvcHMudGhlbWUsIHByb3BzLnR5cGUpfTtcblx0XHR9XG5cblx0XHQuaWNvbi10cmFpbGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cblx0XHQuaWNvbi1sZWFkaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VGFnLnN0eWxlZC5qcy5tYXAiXX0= */"));exports.Tag=g;
|
|
@@ -100,4 +100,19 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
100
100
|
contentPadding?: number;
|
|
101
101
|
tagColor?: string;
|
|
102
102
|
numberOfLines?: number;
|
|
103
|
+
/**
|
|
104
|
+
* Override the computed background color of the tag container.
|
|
105
|
+
* @default undefined (uses theme/type color)
|
|
106
|
+
*/
|
|
107
|
+
backgroundColor?: string;
|
|
108
|
+
/**
|
|
109
|
+
* Override the border-radius of the tag container.
|
|
110
|
+
* @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)
|
|
111
|
+
*/
|
|
112
|
+
borderRadius?: string | number;
|
|
113
|
+
/**
|
|
114
|
+
* Controls the size of the tag. 'small' sets height to 16px and uses tiny font.
|
|
115
|
+
* @default 'regular'
|
|
116
|
+
*/
|
|
117
|
+
size?: 'regular' | 'small';
|
|
103
118
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),i=require("../../utils/StringUtils.js"),l=require("../../constants/Theme.js"),a=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),s=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:l.COLORS.surface.standard,borderRadius:4,border:`1px solid ${l.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=c=>{let{template:m,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:C,size:g,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,applyBorderBottom:P,webPushSpecificMeta:f,hidePointerEvents:E}=c;var H,A;const{setSelectedCarouselIndex:q}=t.useTemplateModalContext();return v===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${l.COLORS.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(o.default,{template:m,hideHeader:C,onlyTemplateContent:b,size:null!=g?g:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(s.default,{template:m,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:C,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:P,hidePointerEvents:E})})):v===r.CHANNEL_TYPE.WHATSAPP||v===r.CHANNEL_TYPE.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(q&&w){if(-1===T&&!(null===(t=null===(e=null==m?void 0:m.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;q(null!=T?T:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(n.TitleRegular,{children:i.default.convertToTitleCase(null!==(H=null==m?void 0:m.label)&&void 0!==H?H:"")})})):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:m,size:j?"small":null!=g?g:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(A=null==h?void 0:h.containerStyle)&&void 0!==A?A:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,channel:v}),(!!(null==m?void 0:m.aiContentConfigId)||!!(null==m?void 0:m.isAiGenerated))&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),i=require("../../utils/StringUtils.js"),l=require("../../constants/Theme.js"),a=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),s=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:l.COLORS.surface.standard,borderRadius:4,border:`1px solid ${l.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=c=>{let{template:m,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:C,size:g,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,applyBorderBottom:P,webPushSpecificMeta:f,hidePointerEvents:E}=c;var H,A;const{setSelectedCarouselIndex:q}=t.useTemplateModalContext();return v===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${l.COLORS.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(o.default,{template:m,hideHeader:C,onlyTemplateContent:b,size:null!=g?g:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(s.default,{template:m,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:C,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:P,hidePointerEvents:E})})):v===r.CHANNEL_TYPE.WHATSAPP||v===r.CHANNEL_TYPE.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(q&&w){if(-1===T&&!(null===(t=null===(e=null==m?void 0:m.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;q(null!=T?T:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(n.TitleRegular,{children:i.default.convertToTitleCase(null!==(H=null==m?void 0:m.label)&&void 0!==H?H:"")})})):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:m,size:j?"small":null!=g?g:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(A=null==h?void 0:h.containerStyle)&&void 0!==A?A:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,channel:v}),(!!(null==m?void 0:m.aiContentConfigId)||!!(null==m?void 0:m.isAiGenerated))&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:30,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:4}},{children:e.jsx(a.default,{width:48,height:48})}))]})):v==r.CHANNEL_TYPE.WEBPUSH?e.jsx("div",Object.assign({style:Object.assign({},null==f?void 0:f.containerStyle)},{children:e.jsx(d.default,{template:m,extraContainerCss:null==f?void 0:f.extraContainerCss})})):e.jsx(e.Fragment,{})};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { TypeOptions } from 'react-toastify';
|
|
3
3
|
export declare const ToasterStyled: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
width?: string | undefined;
|
|
8
8
|
height?: string | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Size, Type } from './model';
|
|
3
3
|
export declare const Button: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
size: Size;
|
|
8
8
|
buttonType: Type;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
selectRange: boolean;
|
|
7
7
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
8
|
export declare const TimePickerContainer: import("@emotion/styled").StyledComponent<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
11
11
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
12
12
|
export declare const TimeInputWrapper: import("@emotion/styled").StyledComponent<{
|
|
13
13
|
theme?: import("@emotion/react").Theme | undefined;
|
|
14
|
-
as?: import("react").ElementType<any> | undefined;
|
|
14
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
15
15
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
16
|
export declare const TimeLabel: import("@emotion/styled").StyledComponent<{
|
|
17
17
|
theme?: import("@emotion/react").Theme | undefined;
|
|
18
|
-
as?: import("react").ElementType<any> | undefined;
|
|
18
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
19
19
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,b,w,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:H,noErrorHint:S,placeHolderHeight:E,showPlaceholderWhenSelected:C=!1,inputStyle:T={},inputType:D="default",onDeleteChip:P,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:z=!1,value:k}=m,A=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[_,N]=i(!1),[U,V]=i(!1),q=null!=O?O:"default",B=l(),[F,G]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),G([...o])}),[A.options]),r((()=>{y&&G([...y])}),[y]);const J=u(F),K=C?j:null!==(g=null!=J?J:j)&&void 0!==g?g:"Select an option",Q=null!==(f=A.width)&&void 0!==f?f:A.buttonWidth,R=null!=Q?Q:"100%",X=null!==(b=A.dropdownWidth)&&void 0!==b?b:R;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:E||("x-small"===q?24:"small"===q?32:48),width:R},Q?{maxWidth:Q}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===q?"4px 8px":"6px 8px",backgroundColor:void 0!==k?"#C3E4C4":U?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),T),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==k?"#00580E":"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:t(h,Object.assign({"data-test":A["data-test"],ref:B,onSelect:function(e){Array.isArray(e)?G([...e]):G([e]),null==I||I(e)},disabled:H,onDropdownVisbilityChange:e=>N(e)},A,{width:X},{children:["default"==D&&o(d,{version:A.version,noErrorHint:S,state:H?"disabled":"none",value:void 0===k?K:k,errorMessage:A.error,variant:q,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(w=F[0])||void 0===w?void 0:w.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===q?16:"small"===q?20:24,height:"x-small"===q?16:"small"===q?20:24,color:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==D&&o(p,{placeholder:null!=j?j:"Select options",chips:F,onDeleteChip:e=>{null==P||P(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:q,containerStyle:{width:null!==(x=A.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
|
|
@@ -53,6 +53,7 @@ export interface FeatureAnnouncement {
|
|
|
53
53
|
archived?: boolean;
|
|
54
54
|
createdAt: FirestoreTimestamp;
|
|
55
55
|
expirationDate?: FirestoreTimestamp | string | Date;
|
|
56
|
+
showInFeed?: boolean;
|
|
56
57
|
primaryButton?: ButtonConfig;
|
|
57
58
|
secondaryButton?: SecondaryButtonConfig;
|
|
58
59
|
padding?: string;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { InputStateI, InputTypeI, InputVariant } from "./Input";
|
|
3
3
|
export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
width?: string | undefined;
|
|
8
8
|
height?: string | undefined;
|
|
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
|
|
|
16
16
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
17
|
export declare const IconHolder: import("@emotion/styled").StyledComponent<{
|
|
18
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?: import("react").ElementType<any> | undefined;
|
|
19
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
20
20
|
} & {
|
|
21
21
|
isLeft?: boolean | undefined;
|
|
22
22
|
iconSize?: string | undefined;
|
|
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
|
|
|
57
57
|
}, {}, {}>;
|
|
58
58
|
export declare const InputHeader: import("@emotion/styled").StyledComponent<{
|
|
59
59
|
theme?: import("@emotion/react").Theme | undefined;
|
|
60
|
-
as?: import("react").ElementType<any> | undefined;
|
|
60
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
61
61
|
} & {
|
|
62
62
|
invalid?: boolean | undefined;
|
|
63
63
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
|
|
|
91
91
|
}, {}, {}>;
|
|
92
92
|
export declare const RootContainer: import("@emotion/styled").StyledComponent<{
|
|
93
93
|
theme?: import("@emotion/react").Theme | undefined;
|
|
94
|
-
as?: import("react").ElementType<any> | undefined;
|
|
94
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
95
95
|
} & {
|
|
96
96
|
width?: string | undefined;
|
|
97
97
|
height?: string | undefined;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { Variant } from './ListItem';
|
|
3
3
|
export declare const ListItem: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
variant: Variant;
|
|
8
8
|
borderBottom?: string | undefined;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const RootContainer: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
zIndex?: number | undefined;
|
|
7
7
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
8
|
export declare const CentralContainer: import("@emotion/styled").StyledComponent<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
11
11
|
} & {
|
|
12
12
|
width?: string | undefined;
|
|
13
13
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
14
14
|
export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
|
|
15
15
|
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
-
as?: import("react").ElementType<any> | undefined;
|
|
16
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
17
17
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
18
18
|
export declare const CloseButtonWithTimer: import("@emotion/styled").StyledComponent<{
|
|
19
19
|
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
-
as?: import("react").ElementType<any> | undefined;
|
|
20
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
21
21
|
} & {
|
|
22
22
|
timerExists?: boolean | undefined;
|
|
23
23
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Pagination: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?: import("react").ElementType<any> | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
isBrand?: boolean | undefined;
|
|
7
7
|
direction?: "row" | "column" | undefined;
|
|
@@ -9,7 +9,7 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
|
|
|
9
9
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
10
|
export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
|
|
11
11
|
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
-
as?: import("react").ElementType<any> | undefined;
|
|
12
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
13
13
|
} & {
|
|
14
14
|
isBrand?: boolean | undefined;
|
|
15
15
|
height: number;
|
|
@@ -3,7 +3,7 @@ import { SwitchColorProps, SwitchProps } from './Switch.d';
|
|
|
3
3
|
export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
|
|
5
5
|
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
-
as?: import("react").ElementType<any> | undefined;
|
|
6
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
7
7
|
} & {
|
|
8
8
|
trackLength: number;
|
|
9
9
|
trackHeight: number;
|
|
@@ -16,7 +16,7 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
|
|
|
16
16
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
17
|
export declare const Thumb: import("@emotion/styled").StyledComponent<{
|
|
18
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?: import("react").ElementType<any> | undefined;
|
|
19
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
20
20
|
} & {
|
|
21
21
|
value: boolean;
|
|
22
22
|
duration: number;
|
|
@@ -24,7 +24,7 @@ export declare const Thumb: import("@emotion/styled").StyledComponent<{
|
|
|
24
24
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
25
25
|
export declare const Loader: import("@emotion/styled").StyledComponent<{
|
|
26
26
|
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
-
as?: import("react").ElementType<any> | undefined;
|
|
27
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
28
28
|
} & {
|
|
29
29
|
value: boolean;
|
|
30
30
|
trackColor: SwitchColorProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TagProps } from './model';
|
|
2
2
|
export declare const Tag: {
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:j,leadingIconId:O,trailingIconId:h,onTrailingIconClicked:u,theme:f="light",type:I="neutral",variant:T="regular",version:y,cursor:k,alignIcon:w,noBorder:C,tagHtmlText:N,contentPadding:L,leadingIconTooltip:x,trailingIconTooltip:v,tagColor:E,numberOfLines:$,backgroundColor:z,borderRadius:B,size:P="regular"}=d,R=m;const H=f;let S=I;o[T][I]||(S="neutral"),"circle"===T&&"number"==typeof R&&R>99&&(R="99+");const q={height:"compressed"===T?12:16,width:"compressed"===T?12:16,color:g(f,S),style:{display:"block"}};return e(l,Object.assign({cursor:k,theme:H,type:S,variant:T,version:y,alignIcon:w,noBorder:C,contentPadding:L,backgroundColor:z,borderRadius:B,size:P},{children:i("div",Object.assign({className:"container"},{children:[p&&(x?e(a,Object.assign({},x,{children:e("button",Object.assign({className:"icon-leading",onClick:j,id:`${O}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},q),{id:O||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:j,id:`${O}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},q),{id:O||"leading-icon"}))}))),N&&("ai"===I&&"light"===f?e("small"===P?r:t,Object.assign({numberOfLines:$},{children:N})):e("small"===P?s:c,Object.assign({className:"text",numberOfLines:$},{children:N}))),!N&&""!==R&&("ai"===I&&"light"===f?e("small"===P?r:t,Object.assign({numberOfLines:$},{children:R})):e("small"===P?s:c,Object.assign({className:"text",color:E,numberOfLines:$},{children:R}))),b&&(v?e(a,Object.assign({},v,{children:e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${h}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},q),{id:h||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${h}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},q),{id:h||"trailing-icon"}))})))]}))}))};d.displayName="Tag";export{d as Tag};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
2
|
declare const _default: ComponentMeta<{
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
}>;
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const Default: ComponentStory<{
|
|
8
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
}>;
|
|
11
11
|
export declare const WithIcons: ComponentStory<{
|
|
12
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
}>;
|
|
15
15
|
export declare const WithIconTooltips: ComponentStory<{
|
|
16
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
}>;
|
|
19
19
|
export declare const DarkTheme: ComponentStory<{
|
|
20
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { TagTheme, TagType, TagVariant } from './model';
|
|
3
3
|
export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
theme: TagTheme;
|
|
8
8
|
type: TagType;
|
|
@@ -12,4 +12,7 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
12
12
|
alignIcon?: string | undefined;
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
|
+
backgroundColor?: string | undefined;
|
|
16
|
+
borderRadius?: string | number | undefined;
|
|
17
|
+
size?: "small" | "regular" | undefined;
|
|
15
18
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import c from"@emotion/styled/base";import{getPadding as
|
|
1
|
+
import c from"@emotion/styled/base";import{getPadding as I,getBackgroundColor as l,generateBorder as b,getTextColor as g}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var I;return null!==(I=c.cursor)&&void 0!==I?I:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>"small"===c.size?"2px 6px":c.contentPadding?c.contentPadding:I(c.variant)),";background:",(c=>{var I;return null!==(I=c.backgroundColor)&&void 0!==I?I:l(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${b(c.type,c.theme)};`)," .text{color:",(c=>g(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJyA/ICdoZWlnaHQ6IDE2cHg7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7JyA6ICcnfVxuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnc21hbGwnXHJcbiAgICA/ICcycHggNnB4J1xyXG4gICAgOiBwcm9wcy5jb250ZW50UGFkZGluZ1xyXG4gICAgICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICA6IGdldFBhZGRpbmcocHJvcHMudmFyaWFudCl9O1xuXHRcdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmJhY2tncm91bmRDb2xvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKTsgfX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gcHJvcHMuYm9yZGVyUmFkaXVzICE9PSB1bmRlZmluZWRcclxuICAgID8gdHlwZW9mIHByb3BzLmJvcmRlclJhZGl1cyA9PT0gJ251bWJlcidcclxuICAgICAgICA/IGAke3Byb3BzLmJvcmRlclJhZGl1c31weGBcclxuICAgICAgICA6IHByb3BzLmJvcmRlclJhZGl1c1xyXG4gICAgOiBwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/ICc0cHgnXHJcbiAgICAgICAgOiAnMTJweCd9O1xuXG5cdFx0JHsocHJvcHMpID0+ICFwcm9wcy5ub0JvcmRlciAmJlxyXG4gICAgcHJvcHMudGhlbWUgPT09ICdsaWdodCcgJiZcclxuICAgIGBib3JkZXI6ICR7cHJvcHMudmVyc2lvbiA9PT0gJzIuMCcgPyAwLjUgOiAxfXB4IHNvbGlkICR7Z2VuZXJhdGVCb3JkZXIocHJvcHMudHlwZSwgcHJvcHMudGhlbWUpfTtgfVxuXG5cdFx0LnRleHQge1xuXHRcdFx0Y29sb3I6ICR7KHByb3BzKSA9PiBnZXRUZXh0Q29sb3IocHJvcHMudGhlbWUsIHByb3BzLnR5cGUpfTtcblx0XHR9XG5cblx0XHQuaWNvbi10cmFpbGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cblx0XHQuaWNvbi1sZWFkaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VGFnLnN0eWxlZC5qcy5tYXAiXX0= */"));export{i as Tag};
|
|
@@ -100,4 +100,19 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
100
100
|
contentPadding?: number;
|
|
101
101
|
tagColor?: string;
|
|
102
102
|
numberOfLines?: number;
|
|
103
|
+
/**
|
|
104
|
+
* Override the computed background color of the tag container.
|
|
105
|
+
* @default undefined (uses theme/type color)
|
|
106
|
+
*/
|
|
107
|
+
backgroundColor?: string;
|
|
108
|
+
/**
|
|
109
|
+
* Override the border-radius of the tag container.
|
|
110
|
+
* @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)
|
|
111
|
+
*/
|
|
112
|
+
borderRadius?: string | number;
|
|
113
|
+
/**
|
|
114
|
+
* Controls the size of the tag. 'small' sets height to 16px and uses tiny font.
|
|
115
|
+
* @default 'regular'
|
|
116
|
+
*/
|
|
117
|
+
size?: 'regular' | 'small';
|
|
103
118
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as s}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import u from"./WhatsAppTemplatePreview.js";const c=c=>{let{template:h,channel:g,whatsAppSpecificMeta:C,templateCreationsInfo:b,hideHeader:y,size:S,onlyTemplateContent:j,emailSpecificMeta:f,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,applyBorderBottom:I,webPushSpecificMeta:W,hidePointerEvents:H}=c;var A,B;const{setSelectedCarouselIndex:E}=l();return g===d.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles)},{children:e(p,{template:h,hideHeader:y,onlyTemplateContent:j,size:null!=S?S:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})})):g===d.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:b?16:0},null==f?void 0:f.templateContainerStyles)},{children:e(r,{template:h,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:y,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:I,hidePointerEvents:H})})):g===d.WHATSAPP||g===d.RCS?t("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),b?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&O){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(s,{children:n.convertToTitleCase(null!==(A=null==h?void 0:h.label)&&void 0!==A?A:"")})})):e(i,{}),e(u,{showSampleValues:T,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:h,size:b?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?0:1,borderTopWidth:1},null!==(B=null==C?void 0:C.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,channel:g}),(!!(null==h?void 0:h.aiContentConfigId)||!!(null==h?void 0:h.isAiGenerated))&&e("div",Object.assign({style:{position:"absolute",top:0,right:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as s}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import u from"./WhatsAppTemplatePreview.js";const c=c=>{let{template:h,channel:g,whatsAppSpecificMeta:C,templateCreationsInfo:b,hideHeader:y,size:S,onlyTemplateContent:j,emailSpecificMeta:f,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,applyBorderBottom:I,webPushSpecificMeta:W,hidePointerEvents:H}=c;var A,B;const{setSelectedCarouselIndex:E}=l();return g===d.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles)},{children:e(p,{template:h,hideHeader:y,onlyTemplateContent:j,size:null!=S?S:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})})):g===d.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:b?16:0},null==f?void 0:f.templateContainerStyles)},{children:e(r,{template:h,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:y,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:I,hidePointerEvents:H})})):g===d.WHATSAPP||g===d.RCS?t("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),b?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&O){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(s,{children:n.convertToTitleCase(null!==(A=null==h?void 0:h.label)&&void 0!==A?A:"")})})):e(i,{}),e(u,{showSampleValues:T,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:h,size:b?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?0:1,borderTopWidth:1},null!==(B=null==C?void 0:C.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,channel:g}),(!!(null==h?void 0:h.aiContentConfigId)||!!(null==h?void 0:h.isAiGenerated))&&e("div",Object.assign({style:{position:"absolute",top:0,right:30,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:4}},{children:e(a,{width:48,height:48})}))]})):g==d.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==W?void 0:W.containerStyle)},{children:e(m,{template:h,extraContainerCss:null==W?void 0:W.extraContainerCss})})):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{c as TemplatePreview};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { TypeOptions } from 'react-toastify';
|
|
3
3
|
export declare const ToasterStyled: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
width?: string | undefined;
|
|
8
8
|
height?: string | undefined;
|