@bikdotai/bik-component-library 0.0.509-beta.carousel-10 → 0.0.509-beta.carousel-11

package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts

@@ -13,4 +13,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
     showSampleValues?: boolean | undefined;
     isPreview?: boolean | undefined;
     removeBottomBorder?: boolean | undefined;
+    borderRadius?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/carousel-preview/CarouselPreview.js

@@ -1,7 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),s=require("react-slick"),r=require("styled-components"),i=require("./CarouselPreview.style.js"),o=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js"),d=require("../template-context-mapper/context/templateModalContext.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(l),x=c(s),p=c(r);const v=u.default.forwardRef(((t,n)=>{let{channel:l,template:s,showSampleValues:r,isPreview:a,removeBottomBorder:c}=t;var u,p,v;const g=null===(u=null==s?void 0:s.components)||void 0===u?void 0:u[1].cards,{sliderRef:w,selectedCarouselIndex:j,cardCount:C,setIsCarouselHovered:b}=d.useTemplateModalContext();return e.jsxs(i.Container,Object.assign({removeBottomBorder:c},{children:[e.jsx(o.default,{channel:l,currentTemplate:s,carouselCardIndex:-1,isPreview:a,width:"77%"}),!!(null==g?void 0:g.length)&&e.jsx(f,Object.assign({cardCount:null!=C?C:0,selectedCarouselIndex:null!=j?j:-1,onMouseEnter:()=>null==b?void 0:b(!0),onMouseLeave:()=>null==b?void 0:b(!1)},{children:e.jsx(x.default,Object.assign({ref:w,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!a,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(h,{isPreview:null!=a&&a}),prevArrow:e.jsx(m,{isPreview:null!=a&&a})},{children:null===(v=null===(p=null==s?void 0:s.components)||void 0===p?void 0:p[1].cards)||void 0===v?void 0:v.map(((t,n)=>{var r,i;const d={components:t.components,mapping:null===(i=null===(r=null==s?void 0:s.mapping)||void 0===r?void 0:r.cards)||void 0===i?void 0:i[n]};return e.jsx(o.default,{channel:l,currentTemplate:d,carouselCardIndex:n,isPreview:a,width:"100%"},n)}))}))}))]}))})),h=t=>{const{className:l,style:s,onClick:r,isPreview:i}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:c,cardCount:u}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",o,u),null==r||r(e),(null!=o?o:-1)>=(null!=u?u:-1)-1||i||null==c||c((null!=o?o:-1)+1)}},{children:e.jsx(n.default,{height:10,width:10,color:a.COLORS.content.primary})}))},m=n=>{const{className:l,style:s,onClick:r,isPreview:i}=n,{selectedCarouselIndex:o,setSelectedCarouselIndex:c}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=o?o:-1)<1||i||null==c||c((null!=o?o:-1)-1)}},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})}))},f=p.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),t=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),r=require("react-slick"),s=require("styled-components"),i=require("./CarouselPreview.style.js"),o=require("./CarouselPreviewCard.js"),d=require("../../constants/Theme.js"),a=require("../template-context-mapper/context/templateModalContext.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(l),x=c(r),p=c(s);const v=u.default.forwardRef((n=>{let{channel:t,template:l,isPreview:r,removeBottomBorder:s,borderRadius:d}=n;var c,u,p;const v=null===(c=null==l?void 0:l.components)||void 0===c?void 0:c[1].cards,{sliderRef:m,selectedCarouselIndex:j,cardCount:w,setIsCarouselHovered:C}=a.useTemplateModalContext();return e.jsxs(i.Container,Object.assign({removeBottomBorder:s,borderRadius:d},{children:[e.jsx(o.default,{channel:t,currentTemplate:l,carouselCardIndex:-1,isPreview:r,width:"77%"}),!!(null==v?void 0:v.length)&&e.jsx(g,Object.assign({cardCount:null!=w?w:0,selectedCarouselIndex:null!=j?j:-1,onMouseEnter:()=>null==C?void 0:C(!0),onMouseLeave:()=>null==C?void 0:C(!1)},{children:e.jsx(x.default,Object.assign({ref:m,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!r,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(h,{isPreview:null!=r&&r}),prevArrow:e.jsx(f,{isPreview:null!=r&&r})},{children:null===(p=null===(u=null==l?void 0:l.components)||void 0===u?void 0:u[1].cards)||void 0===p?void 0:p.map(((n,s)=>{var i,d;const a={components:n.components,mapping:null===(d=null===(i=null==l?void 0:l.mapping)||void 0===i?void 0:i.cards)||void 0===d?void 0:d[s]};return e.jsx(o.default,{channel:t,currentTemplate:a,carouselCardIndex:s,isPreview:r,width:"100%"},s)}))}))}))]}))})),h=n=>{const{className:l,style:r,onClick:s,isPreview:i}=n,{selectedCarouselIndex:o,setSelectedCarouselIndex:c,cardCount:u}=a.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},r),{display:s&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",o,u),null==s||s(e),(null!=o?o:-1)>=(null!=u?u:-1)-1||i||null==c||c((null!=o?o:-1)+1)}},{children:e.jsx(t.default,{height:10,width:10,color:d.COLORS.content.primary})}))},f=t=>{const{className:l,style:r,onClick:s,isPreview:i}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:c}=a.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},r),{display:s&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{null==s||s(e),(null!=o?o:-1)<1||i||null==c||c((null!=o?o:-1)-1)}},{children:e.jsx(n.default,{height:10,width:10,color:d.COLORS.content.primary})}))},g=p.default.div`
 	width: 100%;
-	/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
-	/* margin: auto; */
 
 	.slick-next:before {
 		content: none;

package/dist/cjs/components/carousel-preview/CarouselPreview.style.d.ts

@@ -1,6 +1,7 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     showHeader?: boolean | undefined;
     removeBottomBorder?: boolean | undefined;
+    borderRadius?: string | undefined;
 }, never>;
 export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
     height: string;

package/dist/cjs/components/carousel-preview/CarouselPreview.style.js

@@ -11,6 +11,7 @@
 	position: relative;
 	height: 500px;
 	overflow-y: auto;
+	border-radius: ${e=>{var t;return null!==(t=e.borderRadius)&&void 0!==t?t:"0px"}};
 `;r.default.div`
 	flex-direction: row;
 	display: flex;

package/dist/esm/components/carousel-preview/CarouselPreview.d.ts

@@ -13,4 +13,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
     showSampleValues?: boolean | undefined;
     isPreview?: boolean | undefined;
     removeBottomBorder?: boolean | undefined;
+    borderRadius?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1,7 +1,5 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import t from"../../assets/icons/chevronRight.svg.js";import l from"react";import i from"react-slick";import r from"styled-components";import{Container as s}from"./CarouselPreview.style.js";import c from"./CarouselPreviewCard.js";import{COLORS as d}from"../../constants/Theme.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";const u=l.forwardRef(((o,t)=>{let{channel:l,template:r,showSampleValues:d,isPreview:u,removeBottomBorder:x}=o;var v,g,f;const w=null===(v=null==r?void 0:r.components)||void 0===v?void 0:v[1].cards,{sliderRef:C,selectedCarouselIndex:b,cardCount:k,setIsCarouselHovered:j}=a();return e(s,Object.assign({removeBottomBorder:x},{children:[n(c,{channel:l,currentTemplate:r,carouselCardIndex:-1,isPreview:u,width:"77%"}),!!(null==w?void 0:w.length)&&n(h,Object.assign({cardCount:null!=k?k:0,selectedCarouselIndex:null!=b?b:-1,onMouseEnter:()=>null==j?void 0:j(!0),onMouseLeave:()=>null==j?void 0:j(!1)},{children:n(i,Object.assign({ref:C,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!u,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(p,{isPreview:null!=u&&u}),prevArrow:n(m,{isPreview:null!=u&&u})},{children:null===(f=null===(g=null==r?void 0:r.components)||void 0===g?void 0:g[1].cards)||void 0===f?void 0:f.map(((e,o)=>{var t,i;const s={components:e.components,mapping:null===(i=null===(t=null==r?void 0:r.mapping)||void 0===t?void 0:t.cards)||void 0===i?void 0:i[o]};return n(c,{channel:l,currentTemplate:s,carouselCardIndex:o,isPreview:u,width:"100%"},o)}))}))}))]}))})),p=e=>{const{className:o,style:l,onClick:i,isPreview:r}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c,cardCount:u}=a();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:i&&(null!=s?s:-1)>-1||r?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",s,u),null==i||i(e),(null!=s?s:-1)>=(null!=u?u:-1)-1||r||null==c||c((null!=s?s:-1)+1)}},{children:n(t,{height:10,width:10,color:d.content.primary})}))},m=e=>{const{className:t,style:l,onClick:i,isPreview:r}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c}=a();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:i&&(null!=s?s:-1)>-1||r?"flex":"none",content:"none"}),onClick:e=>{null==i||i(e),(null!=s?s:-1)<1||r||null==c||c((null!=s?s:-1)-1)}},{children:n(o,{height:10,width:10,color:d.content.primary})}))},h=r.div`
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import t from"../../assets/icons/chevronRight.svg.js";import l from"react";import r from"react-slick";import i from"styled-components";import{Container as s}from"./CarouselPreview.style.js";import c from"./CarouselPreviewCard.js";import{COLORS as d}from"../../constants/Theme.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";const u=l.forwardRef((o=>{let{channel:t,template:l,isPreview:i,removeBottomBorder:d,borderRadius:u}=o;var h,x,g;const f=null===(h=null==l?void 0:l.components)||void 0===h?void 0:h[1].cards,{sliderRef:w,selectedCarouselIndex:b,cardCount:C,setIsCarouselHovered:k}=a();return e(s,Object.assign({removeBottomBorder:d,borderRadius:u},{children:[n(c,{channel:t,currentTemplate:l,carouselCardIndex:-1,isPreview:i,width:"77%"}),!!(null==f?void 0:f.length)&&n(v,Object.assign({cardCount:null!=C?C:0,selectedCarouselIndex:null!=b?b:-1,onMouseEnter:()=>null==k?void 0:k(!0),onMouseLeave:()=>null==k?void 0:k(!1)},{children:n(r,Object.assign({ref:w,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!i,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(p,{isPreview:null!=i&&i}),prevArrow:n(m,{isPreview:null!=i&&i})},{children:null===(g=null===(x=null==l?void 0:l.components)||void 0===x?void 0:x[1].cards)||void 0===g?void 0:g.map(((e,o)=>{var r,s;const d={components:e.components,mapping:null===(s=null===(r=null==l?void 0:l.mapping)||void 0===r?void 0:r.cards)||void 0===s?void 0:s[o]};return n(c,{channel:t,currentTemplate:d,carouselCardIndex:o,isPreview:i,width:"100%"},o)}))}))}))]}))})),p=e=>{const{className:o,style:l,onClick:r,isPreview:i}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c,cardCount:u}=a();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",s,u),null==r||r(e),(null!=s?s:-1)>=(null!=u?u:-1)-1||i||null==c||c((null!=s?s:-1)+1)}},{children:n(t,{height:10,width:10,color:d.content.primary})}))},m=e=>{const{className:t,style:l,onClick:r,isPreview:i}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c}=a();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=s?s:-1)<1||i||null==c||c((null!=s?s:-1)-1)}},{children:n(o,{height:10,width:10,color:d.content.primary})}))},v=i.div`
 	width: 100%;
-	/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
-	/* margin: auto; */
 
 	.slick-next:before {
 		content: none;

package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts

@@ -1,6 +1,7 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     showHeader?: boolean | undefined;
     removeBottomBorder?: boolean | undefined;
+    borderRadius?: string | undefined;
 }, never>;
 export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
     height: string;

package/dist/esm/components/carousel-preview/CarouselPreview.style.js

@@ -11,6 +11,7 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
 	position: relative;
 	height: 500px;
 	overflow-y: auto;
+	border-radius: ${e=>{var o;return null!==(o=e.borderRadius)&&void 0!==o?o:"0px"}};
 `;e.div`
 	flex-direction: row;
 	display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.509-beta.carousel-10",
+	"version": "0.0.509-beta.carousel-11",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",