@cakemail-org/ui-components-v2 2.1.78 → 2.1.80

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.
@@ -1,10 +1,13 @@
1
1
  import React from "react";
2
2
  import "./styles.scss";
3
- export declare function LoadingContainer({ loading, children, variant, width, keepChildren }: {
3
+ export declare function LoadingContainer({ loading, children, variant, width, className, keepChildren, // Works with contenet not in iframes
4
+ showChildren }: {
4
5
  loading?: boolean;
5
6
  children?: any;
6
7
  variant?: "circular" | "linear";
7
8
  width?: number;
9
+ className?: string;
8
10
  keepChildren?: boolean;
11
+ showChildren?: boolean;
9
12
  }): React.JSX.Element;
10
13
  export default LoadingContainer;
package/dist/cjs/index.js CHANGED
@@ -1531,7 +1531,9 @@ var css_248z$w = ".loadingContainer-component-v2.keepChildren {\n position: rel
1531
1531
  styleInject(css_248z$w);
1532
1532
 
1533
1533
  function LoadingContainer(_a) {
1534
- var _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "circular" : _c, width = _a.width, keepChildren = _a.keepChildren;
1534
+ var _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "circular" : _c, width = _a.width, _d = _a.className, className = _d === void 0 ? "" : _d, keepChildren = _a.keepChildren, // Works with contenet not in iframes
1535
+ showChildren = _a.showChildren // To use in tendem with keepChildren to show children when loading is true
1536
+ ;
1535
1537
  var linearStyle = width ? { height: width } : undefined;
1536
1538
  var loader = variant === "circular" ? React.createElement(CircularProgress, { thickness: width }) : React.createElement(LinearProgress, { sx: linearStyle });
1537
1539
  return React.createElement(React.Fragment, null,
@@ -1540,13 +1542,13 @@ function LoadingContainer(_a) {
1540
1542
  loading &&
1541
1543
  React.createElement(React.Fragment, null,
1542
1544
  children &&
1543
- React.createElement(Container, { className: "loadingContainer-component-v2 ".concat(keepChildren ? "keepChildren" : ""), sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "inherit", width: "100%", flex: 1 } },
1544
- keepChildren && React.createElement(material.Box, { className: "hiddenChildren" },
1545
+ React.createElement(Container, { className: "loadingContainer-component-v2 ".concat(keepChildren ? "keepChildren" : "", " ").concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "inherit", width: "100%", flex: 1 } },
1546
+ keepChildren && React.createElement(material.Box, { className: showChildren ? "showChildren loading" : "hiddenChildren" },
1545
1547
  " ",
1546
1548
  children),
1547
1549
  loader),
1548
1550
  !children &&
1549
- React.createElement(Container, { className: "loadingContainer-component-v2", sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
1551
+ React.createElement(Container, { className: "loadingContainer-component-v2 ".concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
1550
1552
  }
1551
1553
 
1552
1554
  var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
@@ -1,10 +1,13 @@
1
1
  import React from "react";
2
2
  import "./styles.scss";
3
- export declare function LoadingContainer({ loading, children, variant, width, keepChildren }: {
3
+ export declare function LoadingContainer({ loading, children, variant, width, className, keepChildren, // Works with contenet not in iframes
4
+ showChildren }: {
4
5
  loading?: boolean;
5
6
  children?: any;
6
7
  variant?: "circular" | "linear";
7
8
  width?: number;
9
+ className?: string;
8
10
  keepChildren?: boolean;
11
+ showChildren?: boolean;
9
12
  }): React.JSX.Element;
10
13
  export default LoadingContainer;
package/dist/esm/index.js CHANGED
@@ -1511,7 +1511,9 @@ var css_248z$w = ".loadingContainer-component-v2.keepChildren {\n position: rel
1511
1511
  styleInject(css_248z$w);
1512
1512
 
1513
1513
  function LoadingContainer(_a) {
1514
- var _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "circular" : _c, width = _a.width, keepChildren = _a.keepChildren;
1514
+ var _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "circular" : _c, width = _a.width, _d = _a.className, className = _d === void 0 ? "" : _d, keepChildren = _a.keepChildren, // Works with contenet not in iframes
1515
+ showChildren = _a.showChildren // To use in tendem with keepChildren to show children when loading is true
1516
+ ;
1515
1517
  var linearStyle = width ? { height: width } : undefined;
1516
1518
  var loader = variant === "circular" ? React__default.createElement(CircularProgress, { thickness: width }) : React__default.createElement(LinearProgress, { sx: linearStyle });
1517
1519
  return React__default.createElement(React__default.Fragment, null,
@@ -1520,13 +1522,13 @@ function LoadingContainer(_a) {
1520
1522
  loading &&
1521
1523
  React__default.createElement(React__default.Fragment, null,
1522
1524
  children &&
1523
- React__default.createElement(Container, { className: "loadingContainer-component-v2 ".concat(keepChildren ? "keepChildren" : ""), sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "inherit", width: "100%", flex: 1 } },
1524
- keepChildren && React__default.createElement(Box, { className: "hiddenChildren" },
1525
+ React__default.createElement(Container, { className: "loadingContainer-component-v2 ".concat(keepChildren ? "keepChildren" : "", " ").concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "inherit", width: "100%", flex: 1 } },
1526
+ keepChildren && React__default.createElement(Box, { className: showChildren ? "showChildren loading" : "hiddenChildren" },
1525
1527
  " ",
1526
1528
  children),
1527
1529
  loader),
1528
1530
  !children &&
1529
- React__default.createElement(Container, { className: "loadingContainer-component-v2", sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
1531
+ React__default.createElement(Container, { className: "loadingContainer-component-v2 ".concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
1530
1532
  }
1531
1533
 
1532
1534
  var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cakemail-org/ui-components-v2",
3
- "version": "2.1.78",
3
+ "version": "2.1.80",
4
4
  "description": "ui library kit made with material UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",