oolib 2.64.6 → 2.64.8

package/dist/components/cards/CardEmbed/index.d.ts

@@ -1,4 +1,4 @@
-export function CardEmbed({ id, data, config, to, onClick, openInNewTab, disabled, }: {
+export function CardEmbed({ id, data, config, to, onClick, openInNewTab, disabled, urlInsteadOfMetaBlock }: {
     id: any;
     data: any;
     config: any;
@@ -6,5 +6,6 @@ export function CardEmbed({ id, data, config, to, onClick, openInNewTab, disable
     onClick: any;
     openInNewTab: any;
     disabled: any;
+    urlInsteadOfMetaBlock: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -36,7 +36,9 @@ var CardPlaceholder_1 = require("../comps/CardPlaceholder");
 var CardEmbed = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, 
     // status, //i dont think this should exist in this manner
-    disabled = _a.disabled;
+    disabled = _a.disabled, //usecase: rte embed link modal if link is invalid
+    urlInsteadOfMetaBlock = _a.urlInsteadOfMetaBlock //this is a anomaly. only used for CardLinkInput wherein we need to show an 'external link' instead of the metablock
+    ;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
@@ -63,8 +65,9 @@ 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))))),
+                urlInsteadOfMetaBlock
+                    ? react_1.default.createElement(styled_2.StyledCardEmbedLink, null, urlInsteadOfMetaBlock)
+                    : (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && 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,7 +1,8 @@
 export default CardMetaBlock;
-declare function CardMetaBlock({ value, disabled, align }: {
-    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

@@ -32,12 +32,13 @@ 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_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([" justify-content: center;"], [" justify-content: center;"])));
+    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  max-width: 50%;\n"], ["\n  display: flex; \n  align-items: center;\n  max-width: 50%;\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;
@@ -47,11 +48,14 @@ var StyledSeparator = styled_components_1.default.div(templateObject_5 || (templ
     return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 });
 var CardMetaBlock = function (_a) {
-    var value = _a.value, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? 'left' : _b;
-    return (react_1.default.createElement(StyledContainer, { align: align }, 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, templateObject_5;

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.6",
+  "version": "2.64.8",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",