@bikdotai/bik-component-library 0.0.773-beta.4 → 0.0.773-temp

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.
@@ -32,8 +32,6 @@ export interface SingleChecklistItemType {
32
32
  buttonDisabled?: boolean;
33
33
  hideRedirectButton?: boolean;
34
34
  hideSetupButton?: boolean;
35
- /** Custom node to render in place of the default setup button. */
36
- customSetupButton?: React.ReactNode;
37
35
  }
38
36
  export interface MultiChecklistItemType {
39
37
  id: string;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),u=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),g=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=v;const[k,A]=n.useState(m);n.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(u.ProgressBarV2,{progress:Math.round(B),type:u.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((n=>{var u,j,v,y,b,m,T,S;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(u=n.completedIcon)&&void 0!==u?u:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(g.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&(n.customSetupButton?n.customSetupButton:e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})}))]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(S=n.alertType)&&void 0!==S?S:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),g=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:f,showProgressBar:S=!0,noBorder:O=!1}=v;const[k,A]=n.useState(m);n.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),f&&e.jsx("div",{children:f})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:b}))]}),S&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(g.ProgressBarV2,{progress:Math.round(B),type:g.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((n=>{var g,j,v,y,b,m,T,f;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(g=n.completedIcon)&&void 0!==g?g:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(u.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})})]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(f=n.alertType)&&void 0!==f?f:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};
@@ -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"),n=require("../../assets/icons/chevronLeft.svg.js"),o=require("../../assets/icons/chevronRight.svg.js");require("../dropdown/DropdownPopover/index.js");var r=require("../dropdown/Dropdown.js");require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("lodash/debounce");var t=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");exports.TablePagination=d=>{let{pageNumber:a,pageSize:l,totalRows:c,updatePageNumber:p,updatePageSize:u,hidePageSizeOptions:j,showTotalText:g,containerStyle:h={}}=d;const y=s.DEFAULT_THEME.colorsV2,w=(a-1)*l+1,m=(a-1)*l+l,b=Math.ceil(c/l),q=1==b;let x=[];x=b>=5?a===b?[a-4,a-3,a-2,a-1,a]:1===a?[a,a+1,a+2,a+3,a+4]:2===a?[a-1,a,a+1,a+2,a+3]:a===b-1?[a-3,a-2,a-1,a,a+1]:[a-2,a-1,a,a+1,a+2]:Array.from({length:b},((e,n)=>n+1));const v=[{label:"5 rows per page",value:"5",selected:5===l},{label:"10 rows per page",value:"10",selected:10===l},{label:"20 rows per page",value:"20",selected:20===l}];return e.jsxs(i.StyledTablePaginationContainer,Object.assign({style:h},{children:[!j&&e.jsx("div",{children:e.jsx(r.Dropdown,{size:"small",options:v,onSelect:u,width:"162px"})}),e.jsxs("div",Object.assign({className:"paging__container"},{children:[!j&&c&&e.jsxs(t.BodySecondary,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",w,"-",m>c?c:m," of"," ",c," results"]})),e.jsxs("div",Object.assign({className:"pages__buttons-container"},{children:[!q&&e.jsx(i.StyledPagingContainer,Object.assign({active:!1,onClick:()=>{1!==a&&p(Math.max(a-1,1))},disabled:1===a},{children:e.jsx(n.default,{color:y.content.secondary,height:14,width:14})})),x.map((n=>e.jsx(i.StyledPagingContainer,Object.assign({active:n==a,onClick:()=>p(n),style:{display:1==n&&c<=l?"none":"flex"}},{children:e.jsx(t.BodySecondary,Object.assign({style:{color:n==a?y.content.primaryInverse:y.content.secondary}},{children:n}))}),n))),!q&&e.jsx(i.StyledPagingContainer,Object.assign({isLast:!0,active:!1,onClick:()=>{a!==b&&p(Math.min(a+1,b))},disabled:a===b},{children:e.jsx(o.default,{color:y.content.secondary,height:14,width:14})}))]})),j&&c&&g&&e.jsxs(t.BodySecondary,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",w,"-",m>c?c:m," of"," ",c," results"]}))]}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),o=require("../../assets/icons/chevronRight.svg.js");require("../dropdown/DropdownPopover/index.js");var r=require("../dropdown/Dropdown.js");require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("lodash/debounce");var t=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");exports.TablePagination=d=>{let{pageNumber:a,pageSize:l,totalRows:c,updatePageNumber:p,updatePageSize:u,hidePageSizeOptions:j,showTotalText:g,showTotalTextLeftAligned:h,containerStyle:w={}}=d;const y=s.DEFAULT_THEME.colorsV2,m=(a-1)*l+1,b=(a-1)*l+l,q=Math.ceil(c/l),x=1==q;let v=[];v=q>=5?a===q?[a-4,a-3,a-2,a-1,a]:1===a?[a,a+1,a+2,a+3,a+4]:2===a?[a-1,a,a+1,a+2,a+3]:a===q-1?[a-3,a-2,a-1,a,a+1]:[a-2,a-1,a,a+1,a+2]:Array.from({length:q},((e,n)=>n+1));const S=[{label:"5 rows per page",value:"5",selected:5===l},{label:"10 rows per page",value:"10",selected:10===l},{label:"20 rows per page",value:"20",selected:20===l}];return e.jsxs(i.StyledTablePaginationContainer,Object.assign({style:w},{children:[!j&&e.jsx("div",{children:e.jsx(r.Dropdown,{size:"small",options:S,onSelect:u,width:"162px"})}),e.jsxs("div",Object.assign({className:"paging__container"},{children:[(!j&&c||j&&c&&g&&h)&&e.jsxs(t.BodySecondary,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",m,"-",b>c?c:b," of"," ",c," results"]})),e.jsxs("div",Object.assign({className:"pages__buttons-container"},{children:[!x&&e.jsx(i.StyledPagingContainer,Object.assign({active:!1,onClick:()=>{1!==a&&p(Math.max(a-1,1))},disabled:1===a},{children:e.jsx(n.default,{color:y.content.secondary,height:14,width:14})})),v.map((n=>e.jsx(i.StyledPagingContainer,Object.assign({active:n==a,onClick:()=>p(n),style:{display:1==n&&c<=l?"none":"flex"}},{children:e.jsx(t.BodySecondary,Object.assign({style:{color:n==a?y.content.primaryInverse:y.content.secondary}},{children:n}))}),n))),!x&&e.jsx(i.StyledPagingContainer,Object.assign({isLast:!0,active:!1,onClick:()=>{a!==q&&p(Math.min(a+1,q))},disabled:a===q},{children:e.jsx(o.default,{color:y.content.secondary,height:14,width:14})}))]})),j&&c&&g&&!h&&e.jsxs(t.BodySecondary,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",m,"-",b>c?c:b," of"," ",c," results"]}))]}))]}))};
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),o=require("../../constants/zindex.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const d=r.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),o=require("../../constants/zindex.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const d=i.default.div`
2
2
  position: fixed;
3
3
  top: 0;
4
4
  left: 0;
@@ -9,14 +9,14 @@
9
9
  display: flex;
10
10
  align-items: center;
11
11
  justify-content: flex-end;
12
- `,n=r.default.div`
12
+ `,n=i.default.div`
13
13
  height: 100%;
14
14
  width: ${e=>e.width||"566px"};
15
15
  background: ${t.COLORS.surface.standard};
16
16
  position: relative;
17
17
  display: flex;
18
18
  flex-direction: column;
19
- `,a=r.default.div`
19
+ `,a=i.default.div`
20
20
  width: 100%;
21
21
  height: 60px;
22
22
  position: sticky;
@@ -34,16 +34,16 @@
34
34
  border-radius: 4px;
35
35
  }
36
36
  ${t=>{let{headerStyle:o}=t;return e.css`
37
- ${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
37
+ ${Object.keys(o).map((e=>`${e.replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`))}: ${o[e]};`)).join("\n")}
38
38
  `}}
39
- `,s=r.default.div`
39
+ `,s=i.default.div`
40
40
  overflow-y: auto;
41
41
  padding: 24px;
42
42
  height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
43
43
  ${t=>{let{bodyStyle:o}=t;return e.css`
44
44
  ${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
45
45
  `}}
46
- `,p=r.default.div`
46
+ `,p=i.default.div`
47
47
  height: 60px;
48
48
  width: 100%;
49
49
  position: sticky;
@@ -58,7 +58,7 @@
58
58
  ${t=>{let{footerStyle:o}=t;return e.css`
59
59
  ${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
60
60
  `}}
61
- `,l=r.default.div`
61
+ `,l=i.default.div`
62
62
  display: flex;
63
63
  flex-direction: ${e=>e.footerDirection||"row"};
64
64
  gap: 8px;
@@ -32,8 +32,6 @@ export interface SingleChecklistItemType {
32
32
  buttonDisabled?: boolean;
33
33
  hideRedirectButton?: boolean;
34
34
  hideSetupButton?: boolean;
35
- /** Custom node to render in place of the default setup button. */
36
- customSetupButton?: React.ReactNode;
37
35
  }
38
36
  export interface MultiChecklistItemType {
39
37
  id: string;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as o}from"../../assets/icons/InactiveChecklistIcon.js";import"../../_virtual/_tslib.js";import r from"../../assets/icons/chevronRight.svg.js";import n from"../../assets/icons/info.svg.js";import{useState as l,useEffect as c}from"react";import{COLORS as a}from"../../constants/Theme.js";import{Alert as d}from"../alerts/Alert.js";import{ALERT_TYPES as p,CONTENT_POSITION as m}from"../alerts/AlertHelper.js";import{Button as g}from"../button/Button.js";import{ProgressBarV2 as h,ProgressBarType as u}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as v}from"../tag/Tag.js";import{Tooltip as f}from"../tooltips/Tooltip.js";import{TitleMedium as y,BodySecondary as b,TitleSmall as j}from"../TypographyStyle.js";import x from"./MultiChecklistItem.js";import{ProgressChecklistContainer as C,HeaderSection as T,ProgressBarSection as A,SingleChecklistItem as O,SingleChecklistMainRow as B,SingleChecklistIconWrapper as I,SingleChecklistContent as k,SingleChecklistHeader as S,SingleChecklistSubheader as P,SingleChecklistActionWrapper as w,SingleChecklistAlertRow as R}from"./ProgressChecklist.style.js";import $ from"./ProgressStepper.js";const D=D=>{let{header:N,subheader:V,items:W=[],progressBarColor:L,headerAction:M,showProgressBar:_=!0,noBorder:E=!1}=D;const[G,H]=l(W);c((()=>{H(W)}),[W]);const q=G.filter((e=>e.isCompleted)).length,z=G.length,F=z>0?q/z*100:0;return e(C,Object.assign({noBorder:E},{children:[e(T,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(y,{children:N}),M&&t("div",{children:M})]})),t(b,Object.assign({color:a.content.secondary},{children:V}))]}),_&&e(A,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[t("div",Object.assign({style:{flex:1}},{children:t(h,{progress:Math.round(F),type:u.LINE,matchParentWidth:!0,showProgress:!1,color:null!=L?L:a.background.positive.vibrant,progressBarThickness:12})})),t("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e(j,Object.assign({style:{color:a.content.secondary,textAlign:"right"}},{children:[q," / ",z]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:G.map((l=>{var c,h,u,y,b,j,C,T;if("single"===l.type)return e(O,Object.assign({isActive:l.isActive||!1},{children:[e(B,{children:[t(I,{children:l.isCompleted?null!==(c=l.completedIcon)&&void 0!==c?c:t(s,{}):l.isActive?null!==(h=l.activeIcon)&&void 0!==h?h:t(i,{}):null!==(u=l.icon)&&void 0!==u?u:t(o,{})}),e(k,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(S,Object.assign({completed:!!l.isCompleted,isActive:!!l.isActive},{children:l.header})),(null===(y=l.tag)||void 0===y?void 0:y.tagText)&&(l.tag.tooltip?t(f,Object.assign({},l.tag.tooltip,{children:t("span",Object.assign({style:{display:"inline-flex"}},{children:t(v,{tagText:l.tag.tagText,variant:l.tag.variant,type:l.tag.type,theme:l.tag.theme})}))})):t(v,{tagText:l.tag.tagText,variant:l.tag.variant,type:l.tag.type,theme:l.tag.theme}))]})),t(P,{children:l.subheader})]}),l.isCompleted&&!l.hideRedirectButton&&t("div",Object.assign({onClick:l.onSetup,style:{cursor:"pointer"}},{children:t(r,{style:{marginLeft:"12px"},width:12,height:12,color:a.content.secondary})})),!l.isCompleted&&l.isActive&&!l.hideSetupButton&&(l.customSetupButton?l.customSetupButton:t(w,{children:t(g,{buttonText:null!==(b=l.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(j=l.buttonType)&&void 0!==j?j:"primary",onClick:l.onSetup,disabled:null!==(C=l.buttonDisabled)&&void 0!==C&&C})}))]}),l.alertText&&t(R,{children:t(d,{text:l.alertText,type:null!==(T=l.alertType)&&void 0!==T?T:p.WARNING,contentPosition:m.START,textColor:l.alertType===p.BRAND?"#4B1583":"",icon:e=>t(n,Object.assign({},e))})})]}),l.id);if("multiple"===l.type){const e=l.steps&&l.steps.length>0?l.steps.map(((e,t)=>{var i;return{id:null!==(i=e.id)&&void 0!==i?i:`${l.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${l.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${l.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${l.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return t(x,Object.assign({item:l},{children:t($,{steps:e,isStepperActive:l.isActive})}),l.id)}}))}))]}))};export{D as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as r}from"../../assets/icons/InactiveChecklistIcon.js";import"../../_virtual/_tslib.js";import o from"../../assets/icons/chevronRight.svg.js";import n from"../../assets/icons/info.svg.js";import{useState as l,useEffect as c}from"react";import{COLORS as a}from"../../constants/Theme.js";import{Alert as d}from"../alerts/Alert.js";import{ALERT_TYPES as p,CONTENT_POSITION as m}from"../alerts/AlertHelper.js";import{Button as g}from"../button/Button.js";import{ProgressBarV2 as h,ProgressBarType as u}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as v}from"../tag/Tag.js";import{Tooltip as f}from"../tooltips/Tooltip.js";import{TitleMedium as y,BodySecondary as b,TitleSmall as j}from"../TypographyStyle.js";import x from"./MultiChecklistItem.js";import{ProgressChecklistContainer as C,HeaderSection as T,ProgressBarSection as A,SingleChecklistItem as O,SingleChecklistMainRow as I,SingleChecklistIconWrapper as k,SingleChecklistContent as B,SingleChecklistHeader as S,SingleChecklistSubheader as P,SingleChecklistActionWrapper as w,SingleChecklistAlertRow as R}from"./ProgressChecklist.style.js";import $ from"./ProgressStepper.js";const D=D=>{let{header:N,subheader:V,items:W=[],progressBarColor:L,headerAction:M,showProgressBar:_=!0,noBorder:E=!1}=D;const[G,H]=l(W);c((()=>{H(W)}),[W]);const q=G.filter((e=>e.isCompleted)).length,z=G.length,F=z>0?q/z*100:0;return e(C,Object.assign({noBorder:E},{children:[e(T,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(y,{children:N}),M&&t("div",{children:M})]})),t(b,Object.assign({color:a.content.secondary},{children:V}))]}),_&&e(A,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[t("div",Object.assign({style:{flex:1}},{children:t(h,{progress:Math.round(F),type:u.LINE,matchParentWidth:!0,showProgress:!1,color:null!=L?L:a.background.positive.vibrant,progressBarThickness:12})})),t("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e(j,Object.assign({style:{color:a.content.secondary,textAlign:"right"}},{children:[q," / ",z]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:G.map((l=>{var c,h,u,y,b,j,C,T;if("single"===l.type)return e(O,Object.assign({isActive:l.isActive||!1},{children:[e(I,{children:[t(k,{children:l.isCompleted?null!==(c=l.completedIcon)&&void 0!==c?c:t(s,{}):l.isActive?null!==(h=l.activeIcon)&&void 0!==h?h:t(i,{}):null!==(u=l.icon)&&void 0!==u?u:t(r,{})}),e(B,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(S,Object.assign({completed:!!l.isCompleted,isActive:!!l.isActive},{children:l.header})),(null===(y=l.tag)||void 0===y?void 0:y.tagText)&&(l.tag.tooltip?t(f,Object.assign({},l.tag.tooltip,{children:t("span",Object.assign({style:{display:"inline-flex"}},{children:t(v,{tagText:l.tag.tagText,variant:l.tag.variant,type:l.tag.type,theme:l.tag.theme})}))})):t(v,{tagText:l.tag.tagText,variant:l.tag.variant,type:l.tag.type,theme:l.tag.theme}))]})),t(P,{children:l.subheader})]}),l.isCompleted&&!l.hideRedirectButton&&t("div",Object.assign({onClick:l.onSetup,style:{cursor:"pointer"}},{children:t(o,{style:{marginLeft:"12px"},width:12,height:12,color:a.content.secondary})})),!l.isCompleted&&l.isActive&&!l.hideSetupButton&&t(w,{children:t(g,{buttonText:null!==(b=l.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(j=l.buttonType)&&void 0!==j?j:"primary",onClick:l.onSetup,disabled:null!==(C=l.buttonDisabled)&&void 0!==C&&C})})]}),l.alertText&&t(R,{children:t(d,{text:l.alertText,type:null!==(T=l.alertType)&&void 0!==T?T:p.WARNING,contentPosition:m.START,textColor:l.alertType===p.BRAND?"#4B1583":"",icon:e=>t(n,Object.assign({},e))})})]}),l.id);if("multiple"===l.type){const e=l.steps&&l.steps.length>0?l.steps.map(((e,t)=>{var i;return{id:null!==(i=e.id)&&void 0!==i?i:`${l.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${l.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${l.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${l.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return t(x,Object.assign({item:l},{children:t($,{steps:e,isStepperActive:l.isActive})}),l.id)}}))}))]}))};export{D as default};
@@ -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 c=c=>{let{pageNumber:l,pageSize:a,totalRows:m,updatePageNumber:h,updatePageSize:j,hidePageSizeOptions:w,showTotalText:g,containerStyle:u={}}=c;const y=i.colorsV2,b=(l-1)*a+1,O=(l-1)*a+a,v=Math.ceil(m/a),f=1==v;let D=[];D=v>=5?l===v?[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===v-1?[l-3,l-2,l-1,l,l+1]:[l-2,l-1,l,l+1,l+2]:Array.from({length:v},((e,o)=>o+1));const S=[{label:"5 rows per page",value:"5",selected:5===a},{label:"10 rows per page",value:"10",selected:10===a},{label:"20 rows per page",value:"20",selected:20===a}];return e(p,Object.assign({style:u},{children:[!w&&o("div",{children:o(s,{size:"small",options:S,onSelect:j,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[!w&&m&&e(r,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",b,"-",O>m?m:O," of"," ",m," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!f&&o(d,Object.assign({active:!1,onClick:()=>{1!==l&&h(Math.max(l-1,1))},disabled:1===l},{children:o(t,{color:y.content.secondary,height:14,width:14})})),D.map((e=>o(d,Object.assign({active:e==l,onClick:()=>h(e),style:{display:1==e&&m<=a?"none":"flex"}},{children:o(r,Object.assign({style:{color:e==l?y.content.primaryInverse:y.content.secondary}},{children:e}))}),e))),!f&&o(d,Object.assign({isLast:!0,active:!1,onClick:()=>{l!==v&&h(Math.min(l+1,v))},disabled:l===v},{children:o(n,{color:y.content.secondary,height:14,width:14})}))]})),w&&m&&g&&e(r,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",b,"-",O>m?m:O," of"," ",m," results"]}))]}))]}))};export{c as TablePagination};
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 c=c=>{let{pageNumber:l,pageSize:a,totalRows:m,updatePageNumber:h,updatePageSize:w,hidePageSizeOptions:g,showTotalText:j,showTotalTextLeftAligned:u,containerStyle:y={}}=c;const b=i.colorsV2,O=(l-1)*a+1,v=(l-1)*a+a,f=Math.ceil(m/a),D=1==f;let S=[];S=f>=5?l===f?[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===f-1?[l-3,l-2,l-1,l,l+1]:[l-2,l-1,l,l+1,l+2]:Array.from({length:f},((e,o)=>o+1));const x=[{label:"5 rows per page",value:"5",selected:5===a},{label:"10 rows per page",value:"10",selected:10===a},{label:"20 rows per page",value:"20",selected:20===a}];return e(p,Object.assign({style:y},{children:[!g&&o("div",{children:o(s,{size:"small",options:x,onSelect:w,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[(!g&&m||g&&m&&j&&u)&&e(r,Object.assign({style:{color:b.content.placeholder}},{children:["Showing ",O,"-",v>m?m:v," of"," ",m," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!D&&o(d,Object.assign({active:!1,onClick:()=>{1!==l&&h(Math.max(l-1,1))},disabled:1===l},{children:o(t,{color:b.content.secondary,height:14,width:14})})),S.map((e=>o(d,Object.assign({active:e==l,onClick:()=>h(e),style:{display:1==e&&m<=a?"none":"flex"}},{children:o(r,Object.assign({style:{color:e==l?b.content.primaryInverse:b.content.secondary}},{children:e}))}),e))),!D&&o(d,Object.assign({isLast:!0,active:!1,onClick:()=>{l!==f&&h(Math.min(l+1,f))},disabled:l===f},{children:o(n,{color:b.content.secondary,height:14,width:14})}))]})),g&&m&&j&&!u&&e(r,Object.assign({style:{color:b.content.placeholder}},{children:["Showing ",O,"-",v>m?m:v," of"," ",m," results"]}))]}))]}))};export{c as TablePagination};
@@ -34,16 +34,16 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
34
34
  border-radius: 4px;
35
35
  }
36
36
  ${e=>{let{headerStyle:o}=e;return t`
37
- ${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
37
+ ${Object.keys(o).map((e=>`${e.replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`))}: ${o[e]};`)).join("\n")}
38
38
  `}}
39
- `,s=e.div`
39
+ `,a=e.div`
40
40
  overflow-y: auto;
41
41
  padding: 24px;
42
42
  height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
43
43
  ${e=>{let{bodyStyle:o}=e;return t`
44
44
  ${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
45
45
  `}}
46
- `,a=e.div`
46
+ `,s=e.div`
47
47
  height: 60px;
48
48
  width: 100%;
49
49
  position: sticky;
@@ -62,4 +62,4 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
62
62
  display: flex;
63
63
  flex-direction: ${e=>e.footerDirection||"row"};
64
64
  gap: 8px;
65
- `;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
65
+ `;export{p as FooterButtonWrapper,a as SideModalBody,n as SideModalContainer,s as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.773-beta.4",
3
+ "version": "0.0.773-temp",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",