@bikdotai/bik-component-library 0.0.777-beta.0 → 0.0.777-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/TablePagination/TablePagination.d.ts +1 -0
- package/dist/cjs/components/TablePagination/TablePagination.js +1 -1
- package/dist/cjs/components/alerts/Alert.styled.js +0 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.d.ts +0 -4
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.d.ts +0 -3
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.d.ts +0 -4
- package/dist/cjs/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/type.d.ts +0 -3
- package/dist/cjs/components/radioButton/RadioButton.d.ts +0 -1
- package/dist/cjs/components/radioButton/RadioButton.js +1 -1
- 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 +0 -3
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/model.d.ts +0 -15
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/TablePagination/TablePagination.d.ts +1 -0
- package/dist/esm/components/TablePagination/TablePagination.js +1 -1
- package/dist/esm/components/alerts/Alert.styled.js +8 -9
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts +0 -4
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts +0 -3
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.d.ts +0 -4
- package/dist/esm/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/type.d.ts +0 -3
- package/dist/esm/components/radioButton/RadioButton.d.ts +0 -1
- package/dist/esm/components/radioButton/RadioButton.js +1 -1
- 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 +0 -3
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/model.d.ts +0 -15
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ export type TablePaginationProps = {
|
|
|
8
8
|
updatePageNumber: (pageNumber: number) => void;
|
|
9
9
|
updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
|
|
10
10
|
showTotalText?: boolean;
|
|
11
|
+
showTotalTextLeftAligned?: boolean;
|
|
11
12
|
removeBorder?: boolean;
|
|
12
13
|
containerStyle?: React.CSSProperties;
|
|
13
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js");require("../dropdown/DropdownPopover/index.js");var t=require("../dropdown/Dropdown.js");require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("lodash/debounce");var r=require("../TypographyStyle.js"),s=require("../../constants/Theme.js");require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var i=require("./TablePagination.styled.js");const a=o=>{let{pageStart:n,pageEnd:t,totalRows:i,shouldShow:a}=o;if(!a)return null;const d=s.DEFAULT_THEME.colorsV2;return e.jsxs(r.BodySecondary,Object.assign({style:{color:d.content.placeholder}},{children:["Showing ",n,"-",t>i?i:t," of"," ",i," results"]}))};exports.TablePagination=d=>{let{pageNumber:l,pageSize:c,totalRows:p,updatePageNumber:u,updatePageSize:j,hidePageSizeOptions:g,showTotalText:h,showTotalTextLeftAligned:w,containerStyle:y={}}=d;const m=s.DEFAULT_THEME.colorsV2,x=(l-1)*c+1,q=(l-1)*c+c,b=Math.ceil(p/c),S=1==b;let v=[];v=b>=5?l===b?[l-4,l-3,l-2,l-1,l]:1===l?[l,l+1,l+2,l+3,l+4]:2===l?[l-1,l,l+1,l+2,l+3]:l===b-1?[l-3,l-2,l-1,l,l+1]:[l-2,l-1,l,l+1,l+2]:Array.from({length:b},((e,o)=>o+1));const O=[{label:"5 rows per page",value:"5",selected:5===c},{label:"10 rows per page",value:"10",selected:10===c},{label:"20 rows per page",value:"20",selected:20===c}];return e.jsxs(i.StyledTablePaginationContainer,Object.assign({style:y},{children:[!g&&e.jsx("div",{children:e.jsx(t.Dropdown,{size:"small",options:O,onSelect:j,width:"162px"})}),e.jsxs("div",Object.assign({className:"paging__container"},{children:[e.jsx(a,{pageStart:x,pageEnd:q,totalRows:p,shouldShow:!!(!g&&p>0||g&&p>0&&h&&w)}),e.jsxs("div",Object.assign({className:"pages__buttons-container"},{children:[!S&&e.jsx(i.StyledPagingContainer,Object.assign({active:!1,onClick:()=>{1!==l&&u(Math.max(l-1,1))},disabled:1===l},{children:e.jsx(o.default,{color:m.content.secondary,height:14,width:14})})),v.map((o=>e.jsx(i.StyledPagingContainer,Object.assign({active:o==l,onClick:()=>u(o),style:{display:1==o&&p<=c?"none":"flex"}},{children:e.jsx(r.BodySecondary,Object.assign({style:{color:o==l?m.content.primaryInverse:m.content.secondary}},{children:o}))}),o))),!S&&e.jsx(i.StyledPagingContainer,Object.assign({isLast:!0,active:!1,onClick:()=>{l!==b&&u(Math.min(l+1,b))},disabled:l===b},{children:e.jsx(n.default,{color:m.content.secondary,height:14,width:14})}))]})),e.jsx(a,{pageStart:x,pageEnd:q,totalRows:p,shouldShow:!(!(g&&p>0&&h)||w)})]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),n=require("../../assets/icons/chevronRight2.svg.js"),s=require("../../assets/icons/play.svg.js"),r=require("./constants/index.js"),o=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var a=require("./utils/htmlHelpers.js"),i=require("./utils/animationHelpers.js"),l=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:u,currentIndex:d,totalFeatures:p,onSkip:g,onExplore:y,onPrevious:v,onNext:b,setIsClosing:j,onSecondaryAction:h,ratio:f="16:9",padding:x}=c;var O,B,m,T,M;const[k,E]=e.useState(!1),[P,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),n=require("../../assets/icons/chevronRight2.svg.js"),s=require("../../assets/icons/play.svg.js"),r=require("./constants/index.js"),o=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var a=require("./utils/htmlHelpers.js"),i=require("./utils/animationHelpers.js"),l=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:u,currentIndex:d,totalFeatures:p,onSkip:g,onExplore:y,onPrevious:v,onNext:b,setIsClosing:j,onSecondaryAction:h,ratio:f="16:9",padding:x}=c;var O,B,m,T,M;const[k,E]=e.useState(!1),[P,C]=e.useState(!1),[w,L]=e.useState(""),W=e.useRef(null),[S,_]=e.useState(!1),[q,U]=e.useState(!0),A=e.useRef(null),[I,D]=e.useState(f),H=e.useRef(null);e.useEffect((()=>{k&&C(!0)}),[k]);const R=t=>{var e,n;t.preventDefault(),t.stopPropagation();const s=null===(e=u.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===s){const t=null===(n=u.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==s&&""!==s||h&&h();i.hideJoyrideArrow(W.current);const r=l.findWhatsNewButton();if(r&&W.current){const t=i.calculateCloseTransform(W.current,r);L(t)}else L("scale(0)");null==j||j(!0),E(!0)},N=o.getMajorPopupStyles(P,w,I,x||u.padding,null===(O=u.primaryButton)||void 0===O?void 0:O.style,null===(B=u.secondaryButton)||void 0===B?void 0:B.style);return t.jsx("div",Object.assign({style:N.outerWrapper},{children:t.jsxs("div",Object.assign({ref:W,style:Object.assign(Object.assign({},N.container),{opacity:P?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{children:[t.jsx("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),t.jsxs("div",Object.assign({style:N.contentWrapper},{children:[t.jsx("div",Object.assign({style:N.imageContainer},{children:u.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:A,src:u.productVideo,style:N.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${u.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,s=e.videoHeight;if(n&&s){const t=n/s;Math.abs(t-16/9)<.1?D("16:9"):Math.abs(t-1)<.1?D("1:1"):Math.abs(t-4/3)<.1?D("4:3"):D(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(S||q)&&t.jsx("div",Object.assign({style:N.videoOverlay,onClick:t=>{t.stopPropagation(),A.current&&(A.current.paused?(A.current.play(),_(!1),U(!1)):(A.current.pause(),_(!0),U(!0)))},role:"button",tabIndex:0,"aria-label":S?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),A.current&&(A.current.paused?(A.current.play(),_(!1),U(!1)):(A.current.pause(),_(!0),U(!0))))}},{children:t.jsx(s.default,{width:20,height:20})}))]}):u.displayImage?t.jsx("img",{ref:H,src:u.displayImage,alt:u.title,style:N.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,s=e.naturalHeight;if(n&&s){const t=n/s;Math.abs(t-16/9)<.1?D("16:9"):Math.abs(t-1)<.1?D("1:1"):Math.abs(t-4/3)<.1?D("4:3"):D(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{u.image&&(t.target.src=u.image)}}):t.jsx("div",Object.assign({style:N.imagePlaceholder},{children:r.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:N.contentContainer},{children:[t.jsx("div",Object.assign({style:N.skipButtonContainer},{children:t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{i.hideJoyrideArrow(W.current);const e=l.findWhatsNewButton();if(e&&W.current){const t=i.calculateCloseTransform(W.current,e);L(t)}else L("scale(0)");null==j||j(!0),E(!0),i.executeAfterAnimation(t)})(g)},style:N.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,N.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,N.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t.jsx("h3",Object.assign({style:N.title},{children:u.title})),t.jsx("div",{"data-popup-content":!0,style:N.content,dangerouslySetInnerHTML:{__html:a.decodeHTMLEntities(u.content||u.body||"")}}),t.jsxs("div",Object.assign({style:N.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:N.buttonsGroup},{children:[t.jsx("button",Object.assign({onClick:()=>{var t,e;const n=null===(t=u.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)y();else if("Open link"===n){const t=(null===(e=u.primaryButton)||void 0===e?void 0:e.redirectionUrl)||u.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else y();i.hideJoyrideArrow(W.current);const s=l.findWhatsNewButton();if(s&&W.current){const t=i.calculateCloseTransform(W.current,s);L(t)}else L("scale(0)");null==j||j(!0),E(!0)},style:N.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,N.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,N.exploreButton.base)},{children:(null===(m=u.primaryButton)||void 0===m?void 0:m.text)||u.buttonText||r.TEXT.DEFAULT_BUTTON_TEXT})),(null===(T=u.secondaryButton)||void 0===T?void 0:T.text)&&((null===(M=u.secondaryButton)||void 0===M?void 0:M.redirectionUrl)?t.jsx("a",Object.assign({href:u.secondaryButton.redirectionUrl,target:u.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:u.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:R,style:N.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,N.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,N.secondaryButton.base)},{children:u.secondaryButton.text})):t.jsx("button",Object.assign({onClick:R,style:N.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,N.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,N.secondaryButton.base)},{children:u.secondaryButton.text})))]})),p>1&&t.jsxs("div",Object.assign({style:N.navigationContainer},{children:[t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),v()},disabled:0===d,style:N.navigationButton(0===d).base,onMouseEnter:t=>{0!==d&&Object.assign(t.currentTarget.style,N.navigationButton(!1).hover)},onMouseLeave:t=>{0!==d&&Object.assign(t.currentTarget.style,N.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t.jsx(n.default,{style:{transform:"rotate(180deg)"}})})),t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),b()},disabled:d===p-1,style:N.navigationButton(d===p-1).base,onMouseEnter:t=>{d!==p-1&&Object.assign(t.currentTarget.style,N.navigationButton(!1).hover)},onMouseLeave:t=>{d!==p-1&&Object.assign(t.currentTarget.style,N.navigationButton(d===p-1).base)},"aria-label":"Next feature"},{children:t.jsx(n.default,{})}))]}))]}))]}))]}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./constants/index.js");require("../../constants/Theme.js"),require("./constants/animations.js");var n=require("./styles/minorPopup.styles.js"),s=require("./utils/htmlHelpers.js"),i=require("./utils/animationHelpers.js"),o=require("./utils/elementHelpers.js");exports.default=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./constants/index.js");require("../../constants/Theme.js"),require("./constants/animations.js");var n=require("./styles/minorPopup.styles.js"),s=require("./utils/htmlHelpers.js"),i=require("./utils/animationHelpers.js"),o=require("./utils/elementHelpers.js");exports.default=l=>{let{feature:a,currentIndex:c,totalFeatures:u,onSkip:d,onExplore:p,onPrevious:f,onNext:g,setIsClosing:y}=l;var j,v;const[h,T]=t.useState(!1),[x,m]=t.useState(!1),[b,E]=t.useState(""),O=t.useRef(null);t.useEffect((()=>{h&&m(!0)}),[h]);const q=n.getMinorPopupStyles(x,b);return e.jsxs("div",Object.assign({ref:O,style:q.container},{children:[e.jsx("div",Object.assign({style:q.imageContainer},{children:a.displayImage?e.jsx("div",Object.assign({style:q.imageWrapper},{children:e.jsx("img",{src:a.displayImage,alt:a.title,style:q.image,onError:e=>{a.image&&(e.target.src=a.image)}})})):e.jsx("div",Object.assign({style:q.imagePlaceholder},{children:r.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),e.jsxs("div",Object.assign({style:q.contentContainer},{children:[e.jsxs("div",{children:[e.jsx("h3",Object.assign({style:q.title},{children:a.title})),e.jsx("div",{style:q.content,dangerouslySetInnerHTML:{__html:s.decodeHTMLEntities(a.content||a.body||"")}})]}),e.jsxs("div",Object.assign({style:q.actionsContainer},{children:[(null===(j=a.secondaryButton)||void 0===j?void 0:j.text)&&e.jsx("span",Object.assign({onClick:()=>{var e,t,r;const n=null===(e=a.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===n){const e=null===(t=a.secondaryButton)||void 0===t?void 0:t.redirectionUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else"Close popup"!==n&&""!==n||null===(r=a.secondaryButton)||void 0===r||r.action;if(i.hideJoyrideArrow(O.current),O.current&&a.featureTag){const e=o.findFeatureTagElement(a.featureTag);if(e){const t=i.calculateCloseTransform(O.current,e);E(t)}else E("scale(0)")}else E("scale(0)");null==y||y(!0),T(!0)},style:q.understoodText},{children:a.secondaryButton.text})),e.jsx("button",Object.assign({onClick:()=>{var e,t;const r=null===(e=a.primaryButton)||void 0===e?void 0:e.action;if("Play Video"===r)p();else if("Open link"===r){const e=(null===(t=a.primaryButton)||void 0===t?void 0:t.redirectionUrl)||a.redirectUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else p();if(i.hideJoyrideArrow(O.current),O.current&&a.featureTag){const e=a.featureTag.startsWith("#")||a.featureTag.startsWith(".")||a.featureTag.startsWith("[")?a.featureTag:`#${a.featureTag}`,t=document.querySelector(e);if(t){const e=i.calculateCloseTransform(O.current,t);E(e)}else E("scale(0)")}else E("scale(0)");null==y||y(!0),T(!0)},style:q.exploreButton},{children:(null===(v=a.primaryButton)||void 0===v?void 0:v.text)||a.buttonText||r.TEXT.DEFAULT_BUTTON_TEXT}))]}))]}))]}))};
|
|
@@ -5,8 +5,4 @@ export declare const GroupedMenuList: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: GroupedOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
|
-
currentLevel: number;
|
|
12
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),o=require("./MenuItem.js"),n=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:u,parents:l}=s;return e.jsxs(n.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(o.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:l},t)))]})};
|
|
@@ -5,7 +5,4 @@ export declare const MenuItem: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: SingleOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
currentLevel: number;
|
|
11
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronRight2.svg.js"),t=require("react"),i=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronRight2.svg.js"),t=require("react"),i=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(t);const d=l.default.lazy((()=>Promise.resolve().then((function(){return require("./MenuList.js")})).then((e=>({default:e.MenuList})))));exports.MenuItem=r=>{let{width:a,onDropdownItemClick:c,option:u,parents:p}=r;var h,j,g,v,O,b,C;const[x,f]=l.default.useState(!1),[S,m]=l.default.useState(!1),[L,y]=l.default.useState({top:0,left:0}),M=t.useRef({top:0,left:0});return e.jsxs(s.MenuItemWrapper,Object.assign({onMouseEnter:e=>{f(!0),(e=>{const n=e.currentTarget.getBoundingClientRect();y({top:n.top,left:n.right}),M.current={top:n.top,left:n.right}})(e)},onMouseLeave:()=>{f(!1)},onClick:()=>{var e,n;!c||null!==(e=u.disabled)&&void 0!==e&&e||(null===(n=u.children)||void 0===n?void 0:n.length)||c(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(j=u.disabled)&&void 0!==j&&j?i.COLORS.surface.standard:"transparent"}},{children:[u.customComponent?u.customComponent:e.jsxs(s.MenuItemContainer,Object.assign({isSelected:u.selected,isSubMenuOpen:x,isHovered:S,isDisabled:null!==(g=u.disabled)&&void 0!==g&&g},{children:[e.jsxs(s.ContentContainer,{children:[u.leadingIcon&&e.jsx(s.LeadingIconContainer,{children:u.leadingIcon}),e.jsxs("div",{children:[e.jsx(o.BodyCaption,Object.assign({style:{color:null!==(v=u.disabled)&&void 0!==v&&v?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.primary}},{children:u.label})),u.subText&&e.jsx(o.BodyTiny,Object.assign({style:{color:null!==(O=u.disabled)&&void 0!==O&&O?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:u.subText}))]})]}),u.children&&u.children.length>0?e.jsx(s.TrailingIconContainer,{children:e.jsx(n.default,{width:16,height:16,color:null!==(b=u.disabled)&&void 0!==b&&b?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.primary})}):u.trailingIcon?e.jsx(s.TrailingIconContainer,{children:u.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(C=u.disabled)&&void 0!==C&&C)&&u.children&&u.children.length>0&&x&&e.jsx(s.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1)},{children:e.jsx(s.StyledSubMenuWrapper,Object.assign({width:a,top:L.top,left:L.left},{children:e.jsx(s.SubMenuListContainer,{children:e.jsx(t.Suspense,Object.assign({fallback:e.jsx("div",{children:"Loading..."})},{children:e.jsx(d,{width:a,onDropdownItemClick:c,options:u.children,parents:[...p,u]})}))})}))}))]}))};
|
|
@@ -5,8 +5,4 @@ export declare const MenuList: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
options: MultiLevelDropdownOption[];
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
|
-
currentLevel: number;
|
|
12
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./GroupedMenuList.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./GroupedMenuList.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.MenuList=r=>{let{width:i,onDropdownItemClick:s,options:u,parents:p}=r;return e.jsx(o.StyledMenuList,{children:u.map(((o,r)=>"value"in o?e.jsx(n.MenuItem,{width:i,onDropdownItemClick:s,option:o,parents:p},r):"options"in o&&o.options.length>0?e.jsx(t.GroupedMenuList,{width:i,onDropdownItemClick:s,option:o,parents:p},r):void 0))})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t);exports.MultiLevelDropdown=u=>{let{options:a,width:d,isSearchable:f,onDropdownItemClick:p,refElement:h,topOffset:j,leftOffset:w,isDropdownOpen:x,onDropdownOutsideClick:O}=u;const b=c.default.useRef(null),[g,m]=t.useState(a),v=e=>{const t=Array.isArray(a)?[...a]:[],n=[];for(;t.length>0;){const r=t.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&n.push(r),r&&"children"in r&&r.children?t.push(...r.children):r&&"options"in r&&r.options&&t.push(...r.options)}const r=e=>e.map((e=>{if(n.includes(e))return e;if("children"in e&&e.children){const t=r(e.children);if(t.length>0)return Object.assign(Object.assign({},e),{children:t})}if("options"in e&&e.options){const t=r(e.options);if(t.length>0)return Object.assign(Object.assign({},e),{options:t})}return null})).filter((e=>null!==e));m(r(a))},y=e=>{b.current&&!b.current.contains(e.target)?O&&O(!0):O&&O(!1)};return t.useEffect((()=>{x&&v("")}),[x]),t.useEffect((()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)})),[]),t.useEffect((()=>{m(a)}),[a]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:w},{children:x&&e.jsx("div",Object.assign({ref:b,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d},{children:[f&&e.jsx("div",Object.assign({style:{padding:"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:v,version:"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d},{children:(null!=g?g:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:p,options:g,parents:[]})})),0===(null!=g?g:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"}},{children:e.jsx(n.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
|
|
@@ -5,9 +5,6 @@ export interface MultiLevelDropdownProps extends FloaterProps {
|
|
|
5
5
|
width?: string;
|
|
6
6
|
isSearchable?: boolean;
|
|
7
7
|
isDropdownOpen?: boolean;
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
8
|
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
12
9
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
13
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=s=>{const t=i.useMemo((()=>(null==s?void 0:s.activeColor)||l.COLORS.background.positive.vibrant),[s.activeColor]),a=i.useMemo((()=>s.isDisabled?l.COLORS.content.inactive:s.isActive?t:l.COLORS.content.primary),[s.isDisabled,s.isActive,t]);return e.jsxs("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:a,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e.jsx("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?l.COLORS.content.inactive:t})]}))};exports.RadioButton=o=>{const[
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=s=>{const t=i.useMemo((()=>(null==s?void 0:s.activeColor)||l.COLORS.background.positive.vibrant),[s.activeColor]),a=i.useMemo((()=>s.isDisabled?l.COLORS.content.inactive:s.isActive?t:l.COLORS.content.primary),[s.isDisabled,s.isActive,t]);return e.jsxs("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:a,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e.jsx("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?l.COLORS.content.inactive:t})]}))};exports.RadioButton=o=>{const[r,c]=i.useState(o.isActive||!1),[n,d]=i.useState(!1),[O,S]=i.useState(!1);i.useEffect((()=>{c(o.isActive)}),[o.isActive]);return e.jsxs(s.RadioButtonContainer,Object.assign({onClick:()=>{var e;if(!o.skipSelectingOff&&!o.isDisabled){const i=!r;c(i),null===(e=o.onValueChange)||void 0===e||e.call(o,i,o.value)}},onMouseEnter:()=>d(!o.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>S(!o.skipHoverState),onMouseUp:()=>S(!1),style:o.caption?{alignItems:"flex-start"}:{}},{children:[e.jsx(s.RadioButtonIcon,Object.assign({checked:r,hovered:n,clicked:O,isDisabled:o.isDisabled||!1,size:o.size,style:o.caption?{margin:"2px 0"}:{}},{children:e.jsx(a,{isSmall:"SMALL"===o.size,isActive:r,isDisabled:o.isDisabled||!1,activeColor:o.activeColor})})),e.jsxs("div",{children:[o.label?o.boldOnChecked&&r||o.alwaysBold?e.jsx(t.TitleSmall,Object.assign({color:o.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:o.label})):"SMALL"===o.size?e.jsx(t.BodyCaption,Object.assign({color:o.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:o.label})):"MEDIUM"===o.labelSize?e.jsx(t.BodySecondary,Object.assign({color:o.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:o.label})):e.jsx(t.BodyPrimary,Object.assign({color:o.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:o.label})):e.jsx(e.Fragment,{}),o.caption&&e.jsx(t.BodyCaption,Object.assign({color:o.isDisabled?l.COLORS.text.disabled:l.COLORS.text.secondary},{children:o.caption}))]})]}))};
|
|
@@ -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,
|
|
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;
|
|
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"),t=require("../TypographyStyle.js"),a=require("./model.js"),r=require("./Tag.styled.js"),s=require("./themes.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=c(i);const l=i=>{let{tagText:c,LeadingIcon:l,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:p,trailingIconId:j,onTrailingIconClicked:u,theme:b="light",type:m="neutral",variant:O="regular",version:h,cursor:x,alignIcon:y,noBorder:T,tagHtmlText:f,contentPadding:I,leadingIconTooltip:C,trailingIconTooltip:w,tagColor:v,numberOfLines:N}=i,k=c;const q=b;let L=m;a.ValidTagTypeMap[O][m]||(L="neutral"),"circle"===O&&"number"==typeof k&&k>99&&(k="99+");const B={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:s.getTagIconColor(b,L),style:{display:"block"}};return e.jsx(r.Tag,Object.assign({cursor:x,theme:q,type:m,variant:O,version:h,alignIcon:y,noBorder:T,contentPadding:I},{children:e.jsxs("div",Object.assign({className:"container"},{children:[l&&(C?e.jsx(n.Tooltip,Object.assign({},C,{children:e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:o.default.createElement(l,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:o.default.createElement(l,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))),f&&("ai"===m&&"light"===b?e.jsx(t.AiBodyCaption,Object.assign({numberOfLines:N},{children:f})):e.jsx(t.BodyCaption,Object.assign({className:"text",numberOfLines:N},{children:f}))),!f&&""!==k&&("ai"===m&&"light"===b?e.jsx(t.AiBodyCaption,Object.assign({numberOfLines:N},{children:k})):e.jsx(t.BodyCaption,Object.assign({className:"text",color:v,numberOfLines:N},{children:k}))),d&&(w?e.jsx(n.Tooltip,Object.assign({},w,{children:e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:o.default.createElement(d,Object.assign(Object.assign({},B),{id:j||"trailing-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:o.default.createElement(d,Object.assign(Object.assign({},B),{id:j||"trailing-icon"}))})))]}))}))};l.displayName="Tag",exports.Tag=l;
|
|
@@ -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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -12,7 +12,4 @@ 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;
|
|
18
15
|
}, 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"),l=require("./themes.js");function e(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const d=e(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var l;return null!==(l=c.cursor)&&void 0!==l?l:"default"}),";",(c=>"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;padding:",(c=>l.getPadding(c.variant)),";padding:",(c=>c.contentPadding?c.contentPadding:l.getPadding(c.variant)),"px;background:",(c=>l.getBackgroundColor(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${l.generateBorder(c.type,c.theme)};`)," .text{color:",(c=>l.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+IHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJ1xyXG4gICAgPyBgZGlzcGxheTogYmxvY2s7XG5cdFx0ICAgICBtaW4taGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YH1cblx0LmNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogJHsocHJvcHMpID0+IChwcm9wcy5hbGlnbkljb24gPyBwcm9wcy5hbGlnbkljb24gOiAnY2VudGVyJyl9O1xuXHRcdGdhcDogNnB4O1xuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgIDogZ2V0UGFkZGluZyhwcm9wcy52YXJpYW50KX1weDtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4gZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJyA/ICc0cHgnIDogJzEycHgnKX07XG5cblx0XHQkeyhwcm9wcykgPT4gIXByb3BzLm5vQm9yZGVyICYmXHJcbiAgICBwcm9wcy50aGVtZSA9PT0gJ2xpZ2h0JyAmJlxyXG4gICAgYGJvcmRlcjogJHtwcm9wcy52ZXJzaW9uID09PSAnMi4wJyA/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlLCBwcm9wcy50aGVtZSl9O2B9XG5cblx0XHQudGV4dCB7XG5cdFx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldFRleHRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXHRcdH1cblxuXHRcdC5pY29uLXRyYWlsaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblxuXHRcdC5pY29uLWxlYWRpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWcuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.Tag=d;
|
|
@@ -100,19 +100,4 @@ 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';
|
|
118
103
|
}
|
|
@@ -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:0,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,{})};
|
|
@@ -8,6 +8,7 @@ export type TablePaginationProps = {
|
|
|
8
8
|
updatePageNumber: (pageNumber: number) => void;
|
|
9
9
|
updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
|
|
10
10
|
showTotalText?: boolean;
|
|
11
|
+
showTotalTextLeftAligned?: boolean;
|
|
11
12
|
removeBorder?: boolean;
|
|
12
13
|
containerStyle?: React.CSSProperties;
|
|
13
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import n from"../../assets/icons/chevronRight.svg.js";import"../dropdown/DropdownPopover/index.js";import{Dropdown as s}from"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"lodash/debounce";import{BodySecondary as r}from"../TypographyStyle.js";import{DEFAULT_THEME as i}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{StyledTablePaginationContainer as p,StyledPagingContainer as d}from"./TablePagination.styled.js";const
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import n from"../../assets/icons/chevronRight.svg.js";import"../dropdown/DropdownPopover/index.js";import{Dropdown as s}from"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"lodash/debounce";import{BodySecondary as r}from"../TypographyStyle.js";import{DEFAULT_THEME as i}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{StyledTablePaginationContainer as p,StyledPagingContainer as d}from"./TablePagination.styled.js";const a=o=>{let{pageStart:t,pageEnd:n,totalRows:s,shouldShow:p}=o;if(!p)return null;const d=i.colorsV2;return e(r,Object.assign({style:{color:d.content.placeholder}},{children:["Showing ",t,"-",n>s?s:n," of"," ",s," results"]}))},l=l=>{let{pageNumber:c,pageSize:m,totalRows:h,updatePageNumber:w,updatePageSize:g,hidePageSizeOptions:u,showTotalText:j,showTotalTextLeftAligned:y,containerStyle:b={}}=l;const S=i.colorsV2,O=(c-1)*m+1,v=(c-1)*m+m,f=Math.ceil(h/m),D=1==f;let x=[];x=f>=5?c===f?[c-4,c-3,c-2,c-1,c]:1===c?[c,c+1,c+2,c+3,c+4]:2===c?[c-1,c,c+1,c+2,c+3]:c===f-1?[c-3,c-2,c-1,c,c+1]:[c-2,c-1,c,c+1,c+2]:Array.from({length:f},((e,o)=>o+1));const M=[{label:"5 rows per page",value:"5",selected:5===m},{label:"10 rows per page",value:"10",selected:10===m},{label:"20 rows per page",value:"20",selected:20===m}];return e(p,Object.assign({style:b},{children:[!u&&o("div",{children:o(s,{size:"small",options:M,onSelect:g,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[o(a,{pageStart:O,pageEnd:v,totalRows:h,shouldShow:!!(!u&&h>0||u&&h>0&&j&&y)}),e("div",Object.assign({className:"pages__buttons-container"},{children:[!D&&o(d,Object.assign({active:!1,onClick:()=>{1!==c&&w(Math.max(c-1,1))},disabled:1===c},{children:o(t,{color:S.content.secondary,height:14,width:14})})),x.map((e=>o(d,Object.assign({active:e==c,onClick:()=>w(e),style:{display:1==e&&h<=m?"none":"flex"}},{children:o(r,Object.assign({style:{color:e==c?S.content.primaryInverse:S.content.secondary}},{children:e}))}),e))),!D&&o(d,Object.assign({isLast:!0,active:!1,onClick:()=>{c!==f&&w(Math.min(c+1,f))},disabled:c===f},{children:o(n,{color:S.content.secondary,height:14,width:14})}))]})),o(a,{pageStart:O,pageEnd:v,totalRows:h,shouldShow:!(!(u&&h>0&&j)||y)})]}))]}))};export{l as TablePagination};
|
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o from"styled-components";import{CONTENT_POSITION as e,COLOR_CONFIG_MAP as t}from"./AlertHelper.js";const i=o.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
|
-
justify-content: ${
|
|
4
|
+
justify-content: ${o=>o.contentPosition||e.CENTER};
|
|
5
5
|
padding: 8px 16px;
|
|
6
|
-
background-color: ${
|
|
6
|
+
background-color: ${o=>t[o.type].backgroundColor};
|
|
7
7
|
border-radius: 4px;
|
|
8
|
-
border: 1px solid ${
|
|
9
|
-
`,
|
|
8
|
+
border: 1px solid ${o=>t[o.type].borderColor};
|
|
9
|
+
`,r=o.div`
|
|
10
10
|
flex: 1;
|
|
11
11
|
display: flex;
|
|
12
|
-
justify-content: ${
|
|
13
|
-
|
|
14
|
-
`,r=e.div`
|
|
12
|
+
justify-content: ${o=>o.contentPosition||e.CENTER};
|
|
13
|
+
`,n=o.div`
|
|
15
14
|
margin-left: 16px;
|
|
16
15
|
display: flex;
|
|
17
16
|
align-items: center;
|
|
18
|
-
`;export{
|
|
17
|
+
`;export{r as AlertContentWrapper,i as AlertStyle,n as CloseIconWrapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,jsxs as e,Fragment as n}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as s}from"react";import a from"../../assets/icons/chevronRight2.svg.js";import i from"../../assets/icons/play.svg.js";import{TEXT as l}from"./constants/index.js";import{getMajorPopupStyles as c}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as u}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as d,calculateCloseTransform as p,executeAfterAnimation as g}from"./utils/animationHelpers.js";import{findWhatsNewButton as y}from"./utils/elementHelpers.js";const b=b=>{let{feature:v,currentIndex:h,totalFeatures:m,onSkip:f,onExplore:j,onPrevious:O,onNext:B,setIsClosing:T,onSecondaryAction:k,ratio:x="16:9",padding:M}=b;var E,P,C,L,w;const[U,W]=o(!1),[_,I]=o(!1),[D,H]=o(""),S=r(null),[A,R]=o(!1),[V,F]=o(!0),N=r(null),[z,G]=o(x),K=r(null);s((()=>{U&&I(!0)}),[U]);const X=t=>{var e,n;t.preventDefault(),t.stopPropagation();const o=null===(e=v.secondaryButton)||void 0===e?void 0:e.action
|
|
1
|
+
import{jsx as t,jsxs as e,Fragment as n}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as s}from"react";import a from"../../assets/icons/chevronRight2.svg.js";import i from"../../assets/icons/play.svg.js";import{TEXT as l}from"./constants/index.js";import{getMajorPopupStyles as c}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as u}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as d,calculateCloseTransform as p,executeAfterAnimation as g}from"./utils/animationHelpers.js";import{findWhatsNewButton as y}from"./utils/elementHelpers.js";const b=b=>{let{feature:v,currentIndex:h,totalFeatures:m,onSkip:f,onExplore:j,onPrevious:O,onNext:B,setIsClosing:T,onSecondaryAction:k,ratio:x="16:9",padding:M}=b;var E,P,C,L,w;const[U,W]=o(!1),[_,I]=o(!1),[D,H]=o(""),S=r(null),[A,R]=o(!1),[V,F]=o(!0),N=r(null),[z,G]=o(x),K=r(null);s((()=>{U&&I(!0)}),[U]);const X=t=>{var e,n;t.preventDefault(),t.stopPropagation();const o=null===(e=v.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===o){const t=null===(n=v.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==o&&""!==o||k&&k();d(S.current);const r=y();if(r&&S.current){const t=p(S.current,r);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},$=c(_,D,z,M||v.padding,null===(E=v.primaryButton)||void 0===E?void 0:E.style,null===(P=v.secondaryButton)||void 0===P?void 0:P.style);return t("div",Object.assign({style:$.outerWrapper},{children:e("div",Object.assign({ref:S,style:Object.assign(Object.assign({},$.container),{opacity:_?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{children:[t("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),e("div",Object.assign({style:$.contentWrapper},{children:[t("div",Object.assign({style:$.imageContainer},{children:v.productVideo?e(n,{children:[t("video",{ref:N,src:v.productVideo,style:$.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${v.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,o=e.videoHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(A||V)&&t("div",Object.assign({style:$.videoOverlay,onClick:t=>{t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0)))},role:"button",tabIndex:0,"aria-label":A?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0))))}},{children:t(i,{width:20,height:20})}))]}):v.displayImage?t("img",{ref:K,src:v.displayImage,alt:v.title,style:$.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,o=e.naturalHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{v.image&&(t.target.src=v.image)}}):t("div",Object.assign({style:$.imagePlaceholder},{children:l.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:$.contentContainer},{children:[t("div",Object.assign({style:$.skipButtonContainer},{children:t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{d(S.current);const e=y();if(e&&S.current){const t=p(S.current,e);H(t)}else H("scale(0)");null==T||T(!0),W(!0),g(t)})(f)},style:$.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t("h3",Object.assign({style:$.title},{children:v.title})),t("div",{"data-popup-content":!0,style:$.content,dangerouslySetInnerHTML:{__html:u(v.content||v.body||"")}}),e("div",Object.assign({style:$.actionsWrapper},{children:[e("div",Object.assign({style:$.buttonsGroup},{children:[t("button",Object.assign({onClick:()=>{var t,e;const n=null===(t=v.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)j();else if("Open link"===n){const t=(null===(e=v.primaryButton)||void 0===e?void 0:e.redirectionUrl)||v.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else j();d(S.current);const o=y();if(o&&S.current){const t=p(S.current,o);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},style:$.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.exploreButton.base)},{children:(null===(C=v.primaryButton)||void 0===C?void 0:C.text)||v.buttonText||l.DEFAULT_BUTTON_TEXT})),(null===(L=v.secondaryButton)||void 0===L?void 0:L.text)&&((null===(w=v.secondaryButton)||void 0===w?void 0:w.redirectionUrl)?t("a",Object.assign({href:v.secondaryButton.redirectionUrl,target:v.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:v.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})):t("button",Object.assign({onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})))]})),m>1&&e("div",Object.assign({style:$.navigationContainer},{children:[t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===h,style:$.navigationButton(0===h).base,onMouseEnter:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t(a,{style:{transform:"rotate(180deg)"}})})),t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),B()},disabled:h===m-1,style:$.navigationButton(h===m-1).base,onMouseEnter:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(h===m-1).base)},"aria-label":"Next feature"},{children:t(a,{})}))]}))]}))]}))]}))]}))}))};export{b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as o}from"react";import{TEXT as i}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as s}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as a,calculateCloseTransform as c
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as o}from"react";import{TEXT as i}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as s}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as a,calculateCloseTransform as c}from"./utils/animationHelpers.js";import{findFeatureTagElement as d}from"./utils/elementHelpers.js";const u=u=>{let{feature:m,currentIndex:p,totalFeatures:f,onSkip:g,onExplore:y,onPrevious:v,onNext:h,setIsClosing:T}=u;var j,b;const[O,x]=n(!1),[B,E]=n(!1),[w,C]=n(""),_=r(null);o((()=>{O&&E(!0)}),[O]);const k=s(B,w);return e("div",Object.assign({ref:_,style:k.container},{children:[t("div",Object.assign({style:k.imageContainer},{children:m.displayImage?t("div",Object.assign({style:k.imageWrapper},{children:t("img",{src:m.displayImage,alt:m.title,style:k.image,onError:e=>{m.image&&(e.target.src=m.image)}})})):t("div",Object.assign({style:k.imagePlaceholder},{children:i.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:k.contentContainer},{children:[e("div",{children:[t("h3",Object.assign({style:k.title},{children:m.title})),t("div",{style:k.content,dangerouslySetInnerHTML:{__html:l(m.content||m.body||"")}})]}),e("div",Object.assign({style:k.actionsContainer},{children:[(null===(j=m.secondaryButton)||void 0===j?void 0:j.text)&&t("span",Object.assign({onClick:()=>{var e,t,n;const r=null===(e=m.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===r){const e=null===(t=m.secondaryButton)||void 0===t?void 0:t.redirectionUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else"Close popup"!==r&&""!==r||null===(n=m.secondaryButton)||void 0===n||n.action;if(a(_.current),_.current&&m.featureTag){const e=d(m.featureTag);if(e){const t=c(_.current,e);C(t)}else C("scale(0)")}else C("scale(0)");null==T||T(!0),x(!0)},style:k.understoodText},{children:m.secondaryButton.text})),t("button",Object.assign({onClick:()=>{var e,t;const n=null===(e=m.primaryButton)||void 0===e?void 0:e.action;if("Play Video"===n)y();else if("Open link"===n){const e=(null===(t=m.primaryButton)||void 0===t?void 0:t.redirectionUrl)||m.redirectUrl;if(e){e.startsWith("http")?window.open(e,"_blank","noopener,noreferrer"):window.location.href=e}}else y();if(a(_.current),_.current&&m.featureTag){const e=m.featureTag.startsWith("#")||m.featureTag.startsWith(".")||m.featureTag.startsWith("[")?m.featureTag:`#${m.featureTag}`,t=document.querySelector(e);if(t){const e=c(_.current,t);C(e)}else C("scale(0)")}else C("scale(0)");null==T||T(!0),x(!0)},style:k.exploreButton},{children:(null===(b=m.primaryButton)||void 0===b?void 0:b.text)||m.buttonText||i.DEFAULT_BUTTON_TEXT}))]}))]}))]}))};export{u as default};
|
|
@@ -5,8 +5,4 @@ export declare const GroupedMenuList: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: GroupedOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
|
-
currentLevel: number;
|
|
12
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as e}from"../TypographyStyle.js";import{MenuItem as p}from"./MenuItem.js";import{GroupedMenuListContainer as n}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:l,onDropdownItemClick:m,option:s,parents:c}=i;return o(n,{children:[t(e,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:s.label})),s.options.map(((o,r)=>t(p,{width:l,onDropdownItemClick:m,option:o,parents:c},r)))]})};export{i as GroupedMenuList};
|
|
@@ -5,7 +5,4 @@ export declare const MenuItem: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: SingleOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
currentLevel: number;
|
|
11
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as l,Suspense as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as d,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as h,LeadingIconContainer as u,TrailingIconContainer as m,SubMenuContainer as g,StyledSubMenuWrapper as v,SubMenuListContainer as b}from"./MultiLevelDropdown.styled.js";const f=o.lazy((()=>import("./MenuList.js").then((e=>({default:e.MenuList}))))),j=j=>{let{width:y,onDropdownItemClick:w,option:M,parents:O}=j;var C,I,L,S,T,k,x;const[D,E]=o.useState(!1),[R,z]=o.useState(!1),[B,H]=o.useState({top:0,left:0}),N=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{E(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();H({top:t.top,left:t.right}),N.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{E(!1)},onClick:()=>{var e,t;!w||null!==(e=M.disabled)&&void 0!==e&&e||(null===(t=M.children)||void 0===t?void 0:t.length)||w(M,O)},id:"menuItemWrapper",style:{cursor:null!==(C=M.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=M.disabled)&&void 0!==I&&I?s.surface.standard:"transparent"}},{children:[M.customComponent?M.customComponent:e(p,Object.assign({isSelected:M.selected,isSubMenuOpen:D,isHovered:R,isDisabled:null!==(L=M.disabled)&&void 0!==L&&L},{children:[e(h,{children:[M.leadingIcon&&t(u,{children:M.leadingIcon}),e("div",{children:[t(d,Object.assign({style:{color:null!==(S=M.disabled)&&void 0!==S&&S?s.content.inactive:M.selected||R?s.content.positive:s.content.primary}},{children:M.label})),M.subText&&t(c,Object.assign({style:{color:null!==(T=M.disabled)&&void 0!==T&&T?s.content.inactive:M.selected||R?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:M.subText}))]})]}),M.children&&M.children.length>0?t(m,{children:t(i,{width:16,height:16,color:null!==(k=M.disabled)&&void 0!==k&&k?s.content.inactive:M.selected||R?s.content.positive:s.content.primary})}):M.trailingIcon?t(m,{children:M.trailingIcon}):t(n,{})]})),!(null!==(x=M.disabled)&&void 0!==x&&x)&&M.children&&M.children.length>0&&D&&t(g,Object.assign({width:y,className:"submenu",onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1)},{children:t(v,Object.assign({width:y,top:B.top,left:B.left},{children:t(b,{children:t(r,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(f,{width:y,onDropdownItemClick:w,options:M.children,parents:[...O,M]})}))})}))}))]}))};export{j as MenuItem};
|
|
@@ -5,8 +5,4 @@ export declare const MenuList: React.FC<{
|
|
|
5
5
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
options: MultiLevelDropdownOption[];
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
|
-
currentLevel: number;
|
|
12
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{GroupedMenuList as t}from"./GroupedMenuList.js";import{MenuItem as n}from"./MenuItem.js";import{StyledMenuList as i}from"./MultiLevelDropdown.styled.js";const r=r=>{let{width:e,onDropdownItemClick:p,options:m,parents:s}=r;return o(i,{children:m.map(((i,r)=>"value"in i?o(n,{width:e,onDropdownItemClick:p,option:i,parents:s},r):"options"in i&&i.options.length>0?o(t,{width:e,onDropdownItemClick:p,option:i,parents:s},r):void 0))})};export{r as MenuList};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as d}from"./MenuList.js";import{DropdownContainer as a,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const f=f=>{let{options:h,width:m,isSearchable:w,onDropdownItemClick:g,refElement:b,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:y}=f;const v=t.useRef(null),[S,C]=o(h),D=e=>{const n=Array.isArray(h)?[...h]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));C(o(h))},L=e=>{v.current&&!v.current.contains(e.target)?y&&y(!0):y&&y(!1)};return r((()=>{x&&D("")}),[x]),r((()=>(document.addEventListener("mousedown",L),()=>{document.removeEventListener("mousedown",L)})),[]),r((()=>{C(h)}),[h]),e(c,Object.assign({refElement:b,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:v,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"}},{children:n(a,Object.assign({width:m},{children:[w&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:D,version:"2.0"})})),e(p,Object.assign({width:m},{children:(null!=S?S:[]).length>0&&e(d,{width:null!=m?m:"200px",onDropdownItemClick:g,options:S,parents:[]})})),0===(null!=S?S:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{f as MultiLevelDropdown};
|
|
@@ -5,9 +5,6 @@ export interface MultiLevelDropdownProps extends FloaterProps {
|
|
|
5
5
|
width?: string;
|
|
6
6
|
isSearchable?: boolean;
|
|
7
7
|
isDropdownOpen?: boolean;
|
|
8
|
-
allowParentSelection?: boolean;
|
|
9
|
-
maxLevels?: number;
|
|
10
|
-
hideGroupLabel?: boolean;
|
|
11
8
|
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
12
9
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
13
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as i,jsx as e,Fragment as s}from"react/jsx-runtime";import{useState as l,useEffect as t,useMemo as a}from"react";import{RadioButtonContainer as o,RadioButtonIcon as c}from"./RadioButton.styled.js";import{BodyCaption as
|
|
1
|
+
import{jsxs as i,jsx as e,Fragment as s}from"react/jsx-runtime";import{useState as l,useEffect as t,useMemo as a}from"react";import{RadioButtonContainer as o,RadioButtonIcon as c}from"./RadioButton.styled.js";import{BodyCaption as r,TitleSmall as n,BodySecondary as d,BodyPrimary as b}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const v=s=>{const l=a((()=>(null==s?void 0:s.activeColor)||m.background.positive.vibrant),[s.activeColor]),t=a((()=>s.isDisabled?m.content.inactive:s.isActive?l:m.content.primary),[s.isDisabled,s.isActive,l]);return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:t,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?m.content.inactive:l})]}))},p=a=>{const[p,h]=l(a.isActive||!1),[g,x]=l(!1),[S,y]=l(!1);t((()=>{h(a.isActive)}),[a.isActive]);return i(o,Object.assign({onClick:()=>{var i;if(!a.skipSelectingOff&&!a.isDisabled){const e=!p;h(e),null===(i=a.onValueChange)||void 0===i||i.call(a,e,a.value)}},onMouseEnter:()=>x(!a.skipHoverState),onMouseLeave:()=>x(!1),onMouseDown:()=>y(!a.skipHoverState),onMouseUp:()=>y(!1),style:a.caption?{alignItems:"flex-start"}:{}},{children:[e(c,Object.assign({checked:p,hovered:g,clicked:S,isDisabled:a.isDisabled||!1,size:a.size,style:a.caption?{margin:"2px 0"}:{}},{children:e(v,{isSmall:"SMALL"===a.size,isActive:p,isDisabled:a.isDisabled||!1,activeColor:a.activeColor})})),i("div",{children:[a.label?a.boldOnChecked&&p||a.alwaysBold?e(n,Object.assign({color:a.isDisabled?m.text.disabled:m.text.primary},{children:a.label})):"SMALL"===a.size?e(r,Object.assign({color:a.isDisabled?m.text.disabled:m.text.primary},{children:a.label})):"MEDIUM"===a.labelSize?e(d,Object.assign({color:a.isDisabled?m.text.disabled:m.text.primary},{children:a.label})):e(b,Object.assign({color:a.isDisabled?m.text.disabled:m.text.primary},{children:a.label})):e(s,{}),a.caption&&e(r,Object.assign({color:a.isDisabled?m.text.disabled:m.text.secondary},{children:a.caption}))]})]}))};export{p as RadioButton};
|
|
@@ -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,
|
|
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;
|
|
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 t}from"../tooltips/Tooltip.js";import{AiBodyCaption as a,BodyCaption as r}from"../TypographyStyle.js";import{ValidTagTypeMap as c}from"./model.js";import{Tag as s}from"./Tag.styled.js";import{getTagIconColor as o}from"./themes.js";const l=l=>{let{tagText:g,LeadingIcon:d,TrailingIcon:m,onLeadingIconClicked:p,leadingIconId:b,trailingIconId:j,onTrailingIconClicked:O,theme:h="light",type:u="neutral",variant:f="regular",version:I,cursor:T,alignIcon:y,noBorder:w,tagHtmlText:N,contentPadding:k,leadingIconTooltip:C,trailingIconTooltip:L,tagColor:x,numberOfLines:v}=l,E=g;const $=h;let B=u;c[f][u]||(B="neutral"),"circle"===f&&"number"==typeof E&&E>99&&(E="99+");const P={height:"compressed"===f?12:16,width:"compressed"===f?12:16,color:o(h,B),style:{display:"block"}};return e(s,Object.assign({cursor:T,theme:$,type:u,variant:f,version:I,alignIcon:y,noBorder:w,contentPadding:k},{children:i("div",Object.assign({className:"container"},{children:[d&&(C?e(t,Object.assign({},C,{children:e("button",Object.assign({className:"icon-leading",onClick:p,id:`${b}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(d,Object.assign(Object.assign({},P),{id:b||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:p,id:`${b}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(d,Object.assign(Object.assign({},P),{id:b||"leading-icon"}))}))),N&&("ai"===u&&"light"===h?e(a,Object.assign({numberOfLines:v},{children:N})):e(r,Object.assign({className:"text",numberOfLines:v},{children:N}))),!N&&""!==E&&("ai"===u&&"light"===h?e(a,Object.assign({numberOfLines:v},{children:E})):e(r,Object.assign({className:"text",color:x,numberOfLines:v},{children:E}))),m&&(L?e(t,Object.assign({},L,{children:e("button",Object.assign({className:"icon-trailing",onClick:O,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(m,Object.assign(Object.assign({},P),{id:j||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:O,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(m,Object.assign(Object.assign({},P),{id:j||"trailing-icon"}))})))]}))}))};l.displayName="Tag";export{l 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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -12,7 +12,4 @@ 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;
|
|
18
15
|
}, 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 l,getBackgroundColor as b,generateBorder as d,getTextColor as g}from"./themes.js";const n=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var l;return null!==(l=c.cursor)&&void 0!==l?l:"default"}),";",(c=>"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;padding:",(c=>l(c.variant)),";padding:",(c=>c.contentPadding?c.contentPadding:l(c.variant)),"px;background:",(c=>b(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${d(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+IHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJ1xyXG4gICAgPyBgZGlzcGxheTogYmxvY2s7XG5cdFx0ICAgICBtaW4taGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YH1cblx0LmNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogJHsocHJvcHMpID0+IChwcm9wcy5hbGlnbkljb24gPyBwcm9wcy5hbGlnbkljb24gOiAnY2VudGVyJyl9O1xuXHRcdGdhcDogNnB4O1xuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgIDogZ2V0UGFkZGluZyhwcm9wcy52YXJpYW50KX1weDtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4gZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJyA/ICc0cHgnIDogJzEycHgnKX07XG5cblx0XHQkeyhwcm9wcykgPT4gIXByb3BzLm5vQm9yZGVyICYmXHJcbiAgICBwcm9wcy50aGVtZSA9PT0gJ2xpZ2h0JyAmJlxyXG4gICAgYGJvcmRlcjogJHtwcm9wcy52ZXJzaW9uID09PSAnMi4wJyA/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlLCBwcm9wcy50aGVtZSl9O2B9XG5cblx0XHQudGV4dCB7XG5cdFx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldFRleHRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXHRcdH1cblxuXHRcdC5pY29uLXRyYWlsaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblxuXHRcdC5pY29uLWxlYWRpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWcuc3R5bGVkLmpzLm1hcCJdfQ== */"));export{n as Tag};
|
|
@@ -100,19 +100,4 @@ 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';
|
|
118
103
|
}
|
|
@@ -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:0,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};
|