oolib 2.64.5 → 2.64.7

package/dist/components/TextInputs/index.js

@@ -226,7 +226,7 @@ var PhoneInput = function (_a) {
         if (passValidationErrorToFormValidation)
             passValidationErrorToFormValidation("success");
     };
-    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 10 }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 11 }, props)));
 };
 exports.PhoneInput = PhoneInput;
 var URLInput = function (_a) {

package/dist/components/cards/CardEmbed/index.js

@@ -63,8 +63,8 @@ var CardEmbed = function (_a) {
                 title && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 1, noOfLines_D: 2, title: title },
                     react_1.default.createElement(styled_1.StyledTitle, { disabled: disabled, as: Typo_1.SERIF_3_4, capitalize: true, className: "StyledTitle" },
                         react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title)))),
-                (metaBlockData || (externalUrl && to)) && (react_1.default.createElement("div", { style: { paddingTop: "1.7rem" } }, metaBlockData ? (react_1.default.createElement(CardMetaBlock_1.default, { disabled: disabled, value: metaBlockData })) : (externalUrl &&
-                    to && react_1.default.createElement(styled_2.StyledCardEmbedLink, null, to))))),
+                (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement("div", { style: { paddingTop: "1.7rem" } },
+                    react_1.default.createElement(CardMetaBlock_1.default, { disabled: disabled, value: metaBlockData })))),
             mediaConfigExists && (react_1.default.createElement(styled_2.StyledContentModule2, { disabled: disabled },
                 !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledCardEmbedPlaceholderWrapper, null,
                     react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: {

package/dist/components/cards/CardEmbed/styled.js

@@ -35,7 +35,7 @@ var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
 var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
 exports.ErrorCardEmbedWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n"], ["\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n"])));
-exports.StyledEmbedCardWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  min-height: 10rem;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"], ["\n  display: flex;\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  min-height: 10rem;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"])), white, function (_a) {
+exports.StyledEmbedCardWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* display: flex; */\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  /* min-height: 10rem; */\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"], ["\n  /* display: flex; */\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  /* min-height: 10rem; */\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"])), white, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? themes_1.colors.greyColor3 : greyColor5);
 }, function (_a) {
@@ -45,14 +45,11 @@ exports.StyledEmbedCardWrapper = styled_components_1.default.div(templateObject_
     var disabled = _a.disabled;
     return !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", ";\n          #CardPlaceholder {\n            opacity: 1;\n          }\n        "], ["\n          ", ";\n          #CardPlaceholder {\n            opacity: 1;\n          }\n        "])), styled_1.CSSTitleAnimationOnHover);
 });
-exports.StyledContentModule1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  max-width: 80%;\n  /* border-right: ", " */\n"], ["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  max-width: 80%;\n  /* border-right: ", " */\n"])), function (_a) {
-    var error = _a.error;
-    return !error ? "2px solid  ".concat(greyColor10) : "none";
-});
-exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 0; // IMP: hack to get this div to not bleed out of parent flex container\n  width: 10rem;\n  opacity: ", ";\n"], ["\n  min-width: 0; // IMP: hack to get this div to not bleed out of parent flex container\n  width: 10rem;\n  opacity: ", ";\n"])), function (_a) {
+exports.StyledContentModule1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  padding-right: 8rem;\n  ", "{\n    padding-right: 10rem;\n  }\n"], ["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  padding-right: 8rem;\n  ", "{\n    padding-right: 10rem;\n  }\n"])), (0, mixins_1.mediaQuery)('sm'));
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 100%;\n  opacity: ", ";\n  width: 8rem;\n  ", "{\n    width: 10rem\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 100%;\n  opacity: ", ";\n  width: 8rem;\n  ", "{\n    width: 10rem\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 0.4 : 1);
-});
+}, (0, mixins_1.mediaQuery)('sm'));
 exports.StyledCardEmbedAction = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 exports.StyledCardEmbedLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-bottom: 0.5rem;\n"], ["\n  padding-bottom: 0.5rem;\n"])));
 exports.StyledMetaBlock = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));

package/dist/components/cards/comps/CardMetaBlock/index.d.ts

@@ -1,6 +1,8 @@
 export default CardMetaBlock;
-declare function CardMetaBlock({ value, disabled }: {
-    value: any;
+declare function CardMetaBlock({ value, disabled, align, invert }: {
+    value?: any[];
     disabled: any;
+    align?: string;
+    invert: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/cards/comps/CardMetaBlock/index.js

@@ -26,32 +26,36 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var Typo_1 = require("../../../Typo");
 var mixins_1 = require("../../../../themes/mixins");
+var DisplayIcon_1 = require("../../../../utils/comps/DisplayIcon");
 var greyColor100 = themes_1.colors.greyColor100;
-var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n"])));
-var StyledMetaWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex; \n  align-items: center;\n  max-width: 50%;\n"], ["\n  display: flex; \n  align-items: center;\n  max-width: 50%;\n"])));
-var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n"], ["\n  ", "\n  color: ", ";\n"])), mixins_1.ellipsis, function (_a) {
+var StyledContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"])), function (_a) {
+    var align = _a.align;
+    return align === "center" && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+});
+var StyledMetaWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"])));
+var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n"], ["\n  ", "\n  color: ", ";\n"])), mixins_1.ellipsis, function (_a) {
     var disabled = _a.disabled;
     return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 });
-var StyledSeparator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+var StyledSeparator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 });
 var CardMetaBlock = function (_a) {
-    var value = _a.value, disabled = _a.disabled;
-    return (react_1.default.createElement(StyledContainer, null, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(StyledMetaWrapper, { key: i },
-            react_1.default.createElement(STYLED_SANS_2, { disabled: disabled, capitalize: true }, v)),
-        i + 1 === value.length ? null : react_1.default.createElement(StyledSeparator, { disabled: disabled }))); })));
+    var _b = _a.value, value = _b === void 0 ? [] : _b, disabled = _a.disabled, _c = _a.align, align = _c === void 0 ? "left" : _c, invert = _a.invert;
+    if (value.length === 0)
+        return null;
+    return (react_1.default.createElement(StyledContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
+        react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: (100 / value.length) + '%' } },
+            v.icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: v.icon, size: 15, color: invert ? themes_1.colors.white : themes_1.colors.greyColor100 })),
+            react_1.default.createElement(STYLED_SANS_2, { disabled: disabled, capitalize: true }, v.display)),
+        i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { disabled: disabled })))); })));
 };
 exports.default = CardMetaBlock;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/cards/styled.d.ts

@@ -1,6 +1,6 @@
-/** -- this bit is common for ListContent and CardEmbed */
+/** -- this bit is common for CardContent, ListContent and CardEmbed */
 export const StyledLabel: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
-/** -- END this bit is common for ListContent and CardEmbed */
+/** -- END this bit is common for CardContent, ListContent and CardEmbed */
 /** --- this bit handles the entire title underline hover animation --- */
 export const StyledTitle: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 export const StyledTitleSpan: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/cards/styled.js

@@ -33,15 +33,15 @@ var mixins_1 = require("../../themes/mixins");
 var Typo_1 = require("../Typo");
 var utilsOolib_1 = require("../../utilsOolib");
 var themes_1 = require("../../themes");
-/** -- this bit is common for ListContent and CardEmbed */
+/** -- this bit is common for CardContent, ListContent and CardEmbed */
 exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n  \n  ", " \n"], ["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n  \n  ", " \n"
-    /** -- END this bit is common for ListContent and CardEmbed */
+    /** -- END this bit is common for CardContent, ListContent and CardEmbed */
     /** --- this bit handles the entire title underline hover animation --- */
 ])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"), function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  "], ["\n  color: ", ";\n  "])), themes_1.colors.greyColor40);
 });
-/** -- END this bit is common for ListContent and CardEmbed */
+/** -- END this bit is common for CardContent, ListContent and CardEmbed */
 /** --- this bit handles the entire title underline hover animation --- */
 exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n"], ["\n  ", ";\n  color: ", ";\n"])), (0, mixins_1.transition)("color"), function (_a) {
     var disabled = _a.disabled;

package/dist/components/cards/utils/parseCardConfig.js

@@ -16,11 +16,30 @@ var parseCardConfig = function (_a) {
     var video = config.video && (0, getVal_1.getVal)(data, config.video);
     var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
     var image = config.image && (0, getVal_1.getVal)(data, config.image);
-    //metablock data doesnt accept more than 2 configs
-    var metaBlockData = (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.slice(0, 2).map(function (d) {
+    //metablock in cards doesnt accept more than 2 configs
+    var metaBlockData = parseMetaBlockConfig({ config: (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.slice(0, 2), localize: localize, data: data });
+    return {
+        title: title,
+        titleOptional: titleOptional,
+        desc: desc,
+        cardLabel: cardLabel,
+        video: video,
+        image: image,
+        metaBlockData: metaBlockData,
+        tagDisplay: tagDisplay,
+    };
+};
+exports.parseCardConfig = parseCardConfig;
+var parseMetaBlockConfig = function (_a) {
+    var config = _a.config, localize = _a.localize, data = _a.data;
+    if (!config)
+        return [];
+    //else
+    return config.map(function (d) {
         var key = d.key;
         var valuePath = d.valuePath;
         var prefix = d.prefix;
+        var icon = d.icon;
         var returnValue;
         switch (key) {
             case "name":
@@ -43,17 +62,11 @@ var parseCardConfig = function (_a) {
         if (prefix) {
             return "".concat(localize(prefix), " : ").concat(returnValue);
         }
-        return returnValue;
-    }).filter(function (d) { return d !== undefined; });
-    return {
-        title: title,
-        titleOptional: titleOptional,
-        desc: desc,
-        cardLabel: cardLabel,
-        video: video,
-        image: image,
-        metaBlockData: metaBlockData,
-        tagDisplay: tagDisplay,
-    };
+        var toReturn = ({ display: returnValue });
+        //now to incorporate things like icons, imgs, links
+        if (icon) {
+            toReturn.icon = icon;
+        }
+        return toReturn;
+    }).filter(function (d) { return d.display !== undefined; });
 };
-exports.parseCardConfig = parseCardConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.64.5",
+  "version": "2.64.7",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",