oolib 2.64.13 → 2.64.14

package/dist/components/MetaBlock/index.js

@@ -76,8 +76,24 @@ var MetaBlock = function (_a) {
             " ",
             react_1.default.createElement(OKELink_1.OKELink, { to: to, text: display, invert: invert, icon: icon })));
     };
+    /**
+     * basically we need a max width on each meta item
+     * only then the ellipsis would work. So the logic we
+     * use for now is, the max width is equally divided between
+     * the total number of meta items. However to calc this,
+     * we need to minus out the separator/s and flex gap/s
+     *
+     * Hence this semi complex calculation
+     */
+    var calcMaxWidthForEachMetaItem_HOR = function (value) {
+        var percent = (100 / value.length) + '%';
+        var pixelsToMinus = ((value.length - 1) * (2 + 0.3)) + 'rem'; // 2 = flex gap on the 2 sides of the separator, 0.3 = separator width
+        var toReturn = "calc(".concat(percent, " - ").concat(pixelsToMinus, ")");
+        console.log({ toReturn: toReturn });
+        return toReturn;
+    };
     return orientation === "horizontal" ? (react_1.default.createElement(StyledHorOrientContainer, { 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.to
+        react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: calcMaxWidthForEachMetaItem_HOR(value) /*100 / value.length + "%"*/ } }, v.to
             ? genLink({ display: v.display, to: v.to, icon: v.icon })
             : genText({ icon: v.icon, display: v.display })),
         i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { invert: invert, disabled: disabled })))); }))) : (react_1.default.createElement(StyledVerOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement("div", { style: { maxWidth: "100%" } }, v.to

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

@@ -22,9 +22,12 @@ var mediaDataExists_1 = require("../utils/mediaDataExists");
 var parseCardConfig_1 = require("../utils/parseCardConfig");
 var styled_js_1 = require("./styled.js");
 var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var mixins_1 = require("../../../themes/mixins");
 var ListContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
     var theme = (0, styled_components_1.useTheme)();
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
     var _c = (0, parseCardConfig_1.parseCardConfig)({
         config: config,
@@ -41,44 +44,43 @@ var ListContent = function (_a) {
     var mediaConfigExists = config.video || config.image;
     return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
         react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
-            react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */ },
+            react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */, actions: actions },
                 react_1.default.createElement(styled_js_1.StyledHeader, null,
-                    react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, null,
-                        cardLabel && (react_1.default.createElement("div", { title: cardLabel },
-                            react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
-                        statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
-                    title ? (react_1.default.createElement("div", { style: {
-                            display: "flex",
-                            alignItems: "end",
-                        } },
+                    (cardLabel || statusTag) &&
+                        react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, { style: { maxWidth: '100%', paddingBottom: '0.7rem' } },
+                            cardLabel && (react_1.default.createElement("div", { title: cardLabel, style: { maxWidth: '100%' } },
+                                react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
+                            statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
+                    title ? (react_1.default.createElement("div", { style: { flexGrow: 1 } },
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
                                 react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
                     (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
                         react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
-                variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
-                    !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
-                        react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
-                    (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
-                        react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
-                            react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
-                            react_1.default.createElement("div", { style: {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    width: "100%",
-                                    height: "100%",
-                                } })))),
-                    (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
-                    // <div
-                    //   // style={{
-                    //   //   width: "14rem",
-                    //   // }}
-                    // >
-                    react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
-                    // </div>
-                    )),
+                variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, null,
+                        !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                            react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
+                        (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                            react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
+                                react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
+                                react_1.default.createElement("div", { style: {
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        width: "100%",
+                                        height: "100%",
+                                    } })))),
+                        (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
+                        // <div
+                        //   // style={{
+                        //   //   width: "14rem",
+                        //   // }}
+                        // >
+                        react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
+                        // </div>
+                        ))),
                     actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" })))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
-                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: 60, imageTitle: title })))))));
+                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title })))))));
 };
 exports.ListContent = ListContent;

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

@@ -15,19 +15,12 @@ var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
 exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
 exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
-exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"])));
+exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  \n  min-width: 0;\n  flex-grow: 1;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  \n  min-width: 0;\n  flex-grow: 1;\n"])));
 /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
-var mediaPadding = 20;
 var mediaContainerWidth = 70;
 var mediaContainerWidth_SM = 60;
-exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"], ["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"])), function (_a) {
-    var mediaConfigExists = _a.mediaConfigExists;
-    return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth, "px");
-}, (0, mixins_1.mediaQuery)("sm"), function (_a) {
-    var mediaConfigExists = _a.mediaConfigExists;
-    return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth_SM, "px");
-});
-exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: center;\n  align-items: flex-end;\n  position: absolute;\n  row-gap: 1rem;\n  column-gap: 0;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  padding: 0 ", "px;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: center;\n  align-items: flex-end;\n  position: absolute;\n  row-gap: 1rem;\n  column-gap: 0;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  padding: 0 ", "px;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: auto;\n  display: flex;\n  gap:2rem;\n  position: relative;\n  \n"], ["\n  width: auto;\n  display: flex;\n  gap:2rem;\n  position: relative;\n  \n"])));
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledMediaMask = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  height: 84px;\n  width: ", "px;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  height: 84px;\n  width: ", "px;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
 exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"], ["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/cards/styled.js

@@ -34,10 +34,10 @@ var Typo_1 = require("../Typo");
 var utilsOolib_1 = require("../../utilsOolib");
 var themes_1 = require("../../themes");
 /** -- 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"
+exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  ", " \n"], ["\n  ", ";\n  ", " \n"
     /** -- 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) {
+])), mixins_1.ellipsis, 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);
 });

package/package.json

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