oolib 2.64.8 → 2.64.10

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.
Files changed (18) hide show
  1. package/dist/components/MetaBlock/index.d.ts +9 -0
  2. package/dist/components/{cards/comps/CardMetaBlock → MetaBlock}/index.js +27 -10
  3. package/dist/components/MetaBlock/utils/parseMetaBlockConfig.d.ts +5 -0
  4. package/dist/components/MetaBlock/utils/parseMetaBlockConfig.js +47 -0
  5. package/dist/components/cards/CardContent/index.js +4 -6
  6. package/dist/components/cards/CardEmbed/index.js +13 -10
  7. package/dist/components/cards/CardEmbed/styled.js +12 -9
  8. package/dist/components/cards/ListContent/index.js +4 -6
  9. package/dist/components/cards/utils/parseCardConfig.d.ts +3 -3
  10. package/dist/components/cards/utils/parseCardConfig.js +7 -46
  11. package/dist/index.d.ts +1 -0
  12. package/dist/index.js +4 -1
  13. package/dist/utils/_EXPORTS/index.d.ts +1 -0
  14. package/dist/utils/_EXPORTS/index.js +3 -1
  15. package/dist/utils/stitchLink.d.ts +4 -0
  16. package/dist/utils/stitchLink.js +49 -0
  17. package/package.json +1 -1
  18. package/dist/components/cards/comps/CardMetaBlock/index.d.ts +0 -8
package/dist/components/MetaBlock/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export default MetaBlock;
2
+ declare function MetaBlock({ data, config, disabled, align, invert }: {
3
+ data: any;
4
+ config: any;
5
+ disabled: any;
6
+ align?: string;
7
+ invert: any;
8
+ }): React.JSX.Element;
9
+ import React from "react";
package/dist/components/{cards/comps/CardMetaBlock → MetaBlock}/index.js RENAMED
@@ -29,10 +29,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  var react_1 = __importStar(require("react"));
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
- var themes_1 = require("../../../../themes");
33
- var Typo_1 = require("../../../Typo");
34
- var mixins_1 = require("../../../../themes/mixins");
35
- var DisplayIcon_1 = require("../../../../utils/comps/DisplayIcon");
32
+ var themes_1 = require("../../themes");
33
+ var Typo_1 = require("../Typo");
34
+ var mixins_1 = require("../../themes/mixins");
35
+ var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
36
+ var OKELink_1 = require("../OKELink");
37
+ var parseMetaBlockConfig_1 = require("./utils/parseMetaBlockConfig");
38
+ var utilsOolib_1 = require("../../utilsOolib");
36
39
  var greyColor100 = themes_1.colors.greyColor100;
37
40
  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) {
38
41
  var align = _a.align;
@@ -47,15 +50,29 @@ var StyledSeparator = styled_components_1.default.div(templateObject_5 || (templ
47
50
  var disabled = _a.disabled;
48
51
  return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
49
52
  });
50
- var CardMetaBlock = function (_a) {
51
- var _b = _a.value, value = _b === void 0 ? [] : _b, disabled = _a.disabled, _c = _a.align, align = _c === void 0 ? "left" : _c, invert = _a.invert;
53
+ var MetaBlock = function (_a) {
54
+ var data = _a.data, config = _a.config, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? "left" : _b, invert = _a.invert;
55
+ var localize = (0, utilsOolib_1.useLocale)();
56
+ var value = (0, parseMetaBlockConfig_1.parseMetaBlockConfig)({ config: config, data: data, localize: localize });
52
57
  if (value.length === 0)
53
58
  return null;
59
+ var genText = function (_a) {
60
+ var icon = _a.icon, display = _a.display;
61
+ return (react_1.default.createElement(react_1.default.Fragment, null,
62
+ icon && react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, size: 15, color: invert ? themes_1.colors.white : themes_1.colors.greyColor100 }),
63
+ react_1.default.createElement(STYLED_SANS_2, { disabled: disabled, capitalize: true }, display)));
64
+ };
65
+ var genLink = function (_a) {
66
+ var icon = _a.icon, display = _a.display, to = _a.to;
67
+ return (react_1.default.createElement(Typo_1.SANS_2, { style: icon ? { marginBottom: '-3.3px' } : {} },
68
+ " ",
69
+ react_1.default.createElement(OKELink_1.OKELink, { to: to, text: display, invert: invert, icon: icon })));
70
+ };
54
71
  return (react_1.default.createElement(StyledContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
55
- react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: (100 / value.length) + '%' } },
56
- v.icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: v.icon, size: 15, color: invert ? themes_1.colors.white : themes_1.colors.greyColor100 })),
57
- react_1.default.createElement(STYLED_SANS_2, { disabled: disabled, capitalize: true }, v.display)),
72
+ react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: 100 / value.length + "%" } }, v.to
73
+ ? genLink({ display: v.display, to: v.to, icon: v.icon })
74
+ : genText({ icon: v.icon, display: v.display })),
58
75
  i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { disabled: disabled })))); })));
59
76
  };
60
- exports.default = CardMetaBlock;
77
+ exports.default = MetaBlock;
61
78
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/MetaBlock/utils/parseMetaBlockConfig.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export function parseMetaBlockConfig({ config, localize, data }: {
2
+ config: any;
3
+ localize: any;
4
+ data: any;
5
+ }): any;
package/dist/components/MetaBlock/utils/parseMetaBlockConfig.js ADDED
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.parseMetaBlockConfig = void 0;
4
+ var stitchLink_1 = require("../../../utils/stitchLink");
5
+ var createFormattedDate_1 = require("../../../utils/momentjs/createFormattedDate");
6
+ var getVal_1 = require("../../../utils/getterSetterDeleter/getVal");
7
+ var parseMetaBlockConfig = function (_a) {
8
+ var config = _a.config, localize = _a.localize, data = _a.data;
9
+ if (!config)
10
+ return [];
11
+ //else
12
+ return config
13
+ .map(function (d) {
14
+ var key = d.key, valuePath = d.valuePath, prefix = d.prefix, icon = d.icon, linkConfig = d.linkConfig;
15
+ var display;
16
+ switch (key) {
17
+ case "name":
18
+ display = (0, getVal_1.getVal)(data, valuePath);
19
+ if (display) {
20
+ //reduce surname down to initials
21
+ var split = display.split(" ");
22
+ var name_1 = split[0];
23
+ var surname = split[1];
24
+ display = "".concat(name_1).concat(surname ? " ".concat(surname[0], ".") : "");
25
+ }
26
+ break;
27
+ case "date":
28
+ display = (0, createFormattedDate_1.createFormattedDate)((0, getVal_1.getVal)(data, valuePath));
29
+ break;
30
+ case "text":
31
+ default:
32
+ display = (0, getVal_1.getVal)(data, valuePath);
33
+ }
34
+ if (prefix) {
35
+ display = "".concat(localize(prefix)).concat(display);
36
+ }
37
+ var toReturn = { display: display };
38
+ //now to incorporate things like icons, imgs, links
39
+ if (icon)
40
+ toReturn.icon = icon;
41
+ if (linkConfig)
42
+ toReturn.to = (0, stitchLink_1.stitchLink)({ data: data, config: linkConfig });
43
+ return toReturn;
44
+ })
45
+ .filter(function (d) { return d.display !== undefined; });
46
+ };
47
+ exports.parseMetaBlockConfig = parseMetaBlockConfig;
package/dist/components/cards/CardContent/index.js CHANGED
@@ -11,7 +11,7 @@ var utilsOolib_1 = require("../../../utilsOolib");
11
11
  var ActionMenu_1 = require("../../ActionMenu");
12
12
  var Typo_1 = require("../../Typo");
13
13
  var VideoInput_1 = __importDefault(require("../../VideoInput"));
14
- var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
14
+ var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
15
15
  var LineClampWrapper_1 = require("../comps/LineClampWrapper");
16
16
  var styled_1 = require("../styled");
17
17
  var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
@@ -24,15 +24,13 @@ var ImageInput_1 = require("../../ImageInput");
24
24
  var CardContent = function (_a) {
25
25
  var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
26
26
  var theme = (0, styled_components_1.useTheme)();
27
- var localize = (0, utilsOolib_1.useLocale)();
28
27
  var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
29
28
  var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
30
29
  var _b = (0, parseCardConfig_1.parseCardConfig)({
31
30
  config: config,
32
31
  data: data,
33
- parseSpecialSyntax: parseSpecialSyntax,
34
- localize: localize,
35
- }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
32
+ parseSpecialSyntax: parseSpecialSyntax
33
+ }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock;
36
34
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
37
35
  if (dontRenderRes)
38
36
  return dontRenderRes;
@@ -57,7 +55,7 @@ var CardContent = function (_a) {
57
55
  react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
58
56
  react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
59
57
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null),
60
- (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 ? (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData }) //show only two meta for cardContent
58
+ (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
61
59
  ) : null),
62
60
  showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
63
61
  !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
package/dist/components/cards/CardEmbed/index.js CHANGED
@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
8
8
  var injectHttps_1 = require("../../../utils/injectHttps");
9
9
  var ImageInput_1 = require("../../ImageInput");
10
10
  var styled_components_1 = require("styled-components");
11
- var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
11
+ var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
12
12
  var styled_1 = require("../styled");
13
13
  var styled_2 = require("./styled");
14
14
  var utilsOolib_1 = require("../../../utilsOolib");
@@ -40,34 +40,37 @@ var CardEmbed = function (_a) {
40
40
  urlInsteadOfMetaBlock = _a.urlInsteadOfMetaBlock //this is a anomaly. only used for CardLinkInput wherein we need to show an 'external link' instead of the metablock
41
41
  ;
42
42
  var theme = (0, styled_components_1.useTheme)();
43
- var localize = (0, utilsOolib_1.useLocale)();
44
43
  var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
44
+ /**
45
+ * why do we have imageAspectRatio?
46
+ * because, ideally the og imageInput comp's aspect ratio should be supplied to this component
47
+ * so that the image is appropriately positioned within the image container mask of this comp
48
+ */
45
49
  var _b = (0, parseCardConfig_1.parseCardConfig)({
46
50
  config: config,
47
51
  data: data,
48
52
  parseSpecialSyntax: parseSpecialSyntax,
49
- localize: localize,
50
- }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
53
+ }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, _c = _b.imageAspectRatio, imageAspectRatio = _c === void 0 ? '5/3' : _c, metaBlock = _b.metaBlock;
51
54
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
52
55
  if (dontRenderRes)
53
56
  return dontRenderRes;
54
- var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
57
+ var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
55
58
  to: to,
56
59
  openInNewTab: openInNewTab,
57
- }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
60
+ }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
58
61
  var mediaConfigExists = config.video || config.image;
59
62
  // if (status === "error") return <ErrorEmbedComp to={to} />;
60
63
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
61
64
  react_1.default.createElement(styled_2.StyledEmbedCardWrapper, { id: id, disabled: disabled, onClick: onClick },
62
- react_1.default.createElement(styled_2.StyledContentModule1, null,
65
+ react_1.default.createElement(styled_2.StyledContentModule1, { mediaConfigExists: mediaConfigExists },
63
66
  cardLabel && (react_1.default.createElement("div", { style: { paddingBottom: "0.7rem" }, title: cardLabel },
64
67
  react_1.default.createElement(styled_1.StyledLabel, { disabled: disabled, color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
65
68
  title && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 1, noOfLines_D: 2, title: title },
66
69
  react_1.default.createElement(styled_1.StyledTitle, { disabled: disabled, as: Typo_1.SERIF_3_4, capitalize: true, className: "StyledTitle" },
67
70
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title)))),
68
- urlInsteadOfMetaBlock
71
+ (urlInsteadOfMetaBlock || (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0) && react_1.default.createElement("div", { style: { paddingTop: "1.7rem" } }, urlInsteadOfMetaBlock
69
72
  ? react_1.default.createElement(styled_2.StyledCardEmbedLink, null, urlInsteadOfMetaBlock)
70
- : (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && react_1.default.createElement(CardMetaBlock_1.default, { disabled: disabled, value: metaBlockData })),
73
+ : (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && react_1.default.createElement(MetaBlock_1.default, { disabled: disabled, config: metaBlock, data: data }))),
71
74
  mediaConfigExists && (react_1.default.createElement(styled_2.StyledContentModule2, { disabled: disabled },
72
75
  !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledCardEmbedPlaceholderWrapper, null,
73
76
  react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: {
@@ -92,6 +95,6 @@ var CardEmbed = function (_a) {
92
95
  height: "100%",
93
96
  } })))),
94
97
  (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
95
- react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))))));
98
+ react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: imageAspectRatio, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))))));
96
99
  };
97
100
  exports.CardEmbed = CardEmbed;
package/dist/components/cards/CardEmbed/styled.js CHANGED
@@ -45,15 +45,18 @@ exports.StyledEmbedCardWrapper = styled_components_1.default.div(templateObject_
45
45
  var disabled = _a.disabled;
46
46
  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);
47
47
  });
48
- 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'));
49
- 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) {
48
+ exports.StyledContentModule1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n /* align-items: center; */\n flex-direction: column;\n padding: 2rem;\n ", "\n \n"], ["\n display: flex;\n /* align-items: center; */\n flex-direction: column;\n padding: 2rem;\n ", "\n \n"])), function (_a) {
49
+ var mediaConfigExists = _a.mediaConfigExists;
50
+ return mediaConfigExists && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-right: 8rem;\n ", "{\n padding-right: 10rem;\n }\n "], ["\n padding-right: 8rem;\n ", "{\n padding-right: 10rem;\n }\n "])), (0, mixins_1.mediaQuery)('sm'));
51
+ });
52
+ exports.StyledContentModule2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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) {
50
53
  var disabled = _a.disabled;
51
54
  return (disabled ? 0.4 : 1);
52
55
  }, (0, mixins_1.mediaQuery)('sm'));
53
- 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"])));
54
- exports.StyledCardEmbedLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-bottom: 0.5rem;\n"], ["\n padding-bottom: 0.5rem;\n"])));
55
- exports.StyledMetaBlock = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
56
- exports.StyledCardEmbedLink = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 100%;\n align-self: flex-start;\n ", "\n color: ", ";\n"], ["\n width: 100%;\n align-self: flex-start;\n ", "\n color: ", ";\n"])), (0, mixins_1.clampText)(1), themes_1.colors.greyColor80);
57
- exports.StyledCardEmbedPlaceholderWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"], ["\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"])));
58
- exports.StyledMediaContainer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-align: center;\n background-color: ", ";\n"], ["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-align: center;\n background-color: ", ";\n"])), greyColor5);
59
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
56
+ exports.StyledCardEmbedAction = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
57
+ exports.StyledCardEmbedLabel = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-bottom: 0.5rem;\n"], ["\n padding-bottom: 0.5rem;\n"])));
58
+ exports.StyledMetaBlock = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
59
+ exports.StyledCardEmbedLink = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100%;\n align-self: flex-start;\n ", "\n color: ", ";\n"], ["\n width: 100%;\n align-self: flex-start;\n ", "\n color: ", ";\n"])), (0, mixins_1.clampText)(1), themes_1.colors.greyColor80);
60
+ exports.StyledCardEmbedPlaceholderWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"], ["\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"])));
61
+ exports.StyledMediaContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-align: center;\n background-color: ", ";\n"], ["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-align: center;\n background-color: ", ";\n"])), greyColor5);
62
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
package/dist/components/cards/ListContent/index.js CHANGED
@@ -12,7 +12,7 @@ var ActionMenu_1 = require("../../ActionMenu");
12
12
  var ImageInput_1 = require("../../ImageInput");
13
13
  var Tags_1 = require("../../Tags");
14
14
  var VideoInput_1 = __importDefault(require("../../VideoInput"));
15
- var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
15
+ var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
16
16
  var CardPlaceholder_1 = require("../comps/CardPlaceholder");
17
17
  var LineClampWrapper_1 = require("../comps/LineClampWrapper");
18
18
  var styled_1 = require("../styled");
@@ -24,14 +24,12 @@ var styled_js_1 = require("./styled.js");
24
24
  var ListContent = function (_a) {
25
25
  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;
26
26
  var theme = (0, styled_components_1.useTheme)();
27
- var localize = (0, utilsOolib_1.useLocale)();
28
27
  var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
29
28
  var _b = (0, parseCardConfig_1.parseCardConfig)({
30
29
  config: config,
31
30
  data: data,
32
31
  parseSpecialSyntax: parseSpecialSyntax,
33
- localize: localize,
34
- }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
32
+ }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock;
35
33
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
36
34
  if (dontRenderRes)
37
35
  return dontRenderRes;
@@ -55,8 +53,8 @@ var ListContent = function (_a) {
55
53
  react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
56
54
  react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
57
55
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
58
- (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem", } },
59
- react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData })))),
56
+ (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem", } },
57
+ react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
60
58
  mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
61
59
  !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
62
60
  react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
package/dist/components/cards/utils/parseCardConfig.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- export function parseCardConfig({ config, data, localize, parseSpecialSyntax, }: {
1
+ export function parseCardConfig({ config, data, parseSpecialSyntax, }: {
2
2
  config: any;
3
3
  data: any;
4
- localize: any;
5
4
  parseSpecialSyntax?: () => any;
6
5
  }): {
7
6
  title: string;
@@ -10,6 +9,7 @@ export function parseCardConfig({ config, data, localize, parseSpecialSyntax, }:
10
9
  cardLabel: any;
11
10
  video: any;
12
11
  image: any;
13
- metaBlockData: any;
12
+ imageAspectRatio: any;
13
+ metaBlock: any;
14
14
  tagDisplay: any;
15
15
  };
package/dist/components/cards/utils/parseCardConfig.js CHANGED
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.parseCardConfig = void 0;
4
4
  var getText_1 = require("../../../utils/getText");
5
5
  var getVal_1 = require("../../../utils/getterSetterDeleter/getVal");
6
+ var stitchLink_1 = require("../../../utils/stitchLink");
6
7
  var createFormattedDate_1 = require("../../../utils/momentjs/createFormattedDate");
7
8
  var parseCardConfig = function (_a) {
8
- var _b;
9
- var config = _a.config, data = _a.data, localize = _a.localize, _c = _a.parseSpecialSyntax, parseSpecialSyntax = _c === void 0 ? function () { return undefined; } : _c;
9
+ var _b, _c, _d;
10
+ var config = _a.config, data = _a.data, _e = _a.parseSpecialSyntax, parseSpecialSyntax = _e === void 0 ? function () { return undefined; } : _e;
10
11
  var title = config.title && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.title)); //getText converts richtext into plain. and leaves plain text unchanged
11
12
  var titleOptional = config.titleOptional && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.titleOptional));
12
13
  var desc = config.desc && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.desc));
@@ -15,9 +16,8 @@ var parseCardConfig = function (_a) {
15
16
  (0, getVal_1.getVal)(data, config.cardLabel));
16
17
  var video = config.video && (0, getVal_1.getVal)(data, config.video);
17
18
  var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
18
- var image = config.image && (0, getVal_1.getVal)(data, config.image);
19
- //metablock in cards doesnt accept more than 2 configs
20
- var metaBlockData = parseMetaBlockConfig({ config: (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.slice(0, 2), localize: localize, data: data });
19
+ var image = config.image && (0, getVal_1.getVal)(data, ((_b = config.image) === null || _b === void 0 ? void 0 : _b.valuePath) || config.image); // cuz image config could be either `image: <valuePath>` or `image: { valuePath: <valuePath>, aspectRatio: <aspectRatio> }`
20
+ var imageAspectRatio = (_c = config.image) === null || _c === void 0 ? void 0 : _c.aspectRatio;
21
21
  return {
22
22
  title: title,
23
23
  titleOptional: titleOptional,
@@ -25,48 +25,9 @@ var parseCardConfig = function (_a) {
25
25
  cardLabel: cardLabel,
26
26
  video: video,
27
27
  image: image,
28
- metaBlockData: metaBlockData,
28
+ imageAspectRatio: imageAspectRatio,
29
+ metaBlock: (_d = config.metaBlock) === null || _d === void 0 ? void 0 : _d.slice(0, 2),
29
30
  tagDisplay: tagDisplay,
30
31
  };
31
32
  };
32
33
  exports.parseCardConfig = parseCardConfig;
33
- var parseMetaBlockConfig = function (_a) {
34
- var config = _a.config, localize = _a.localize, data = _a.data;
35
- if (!config)
36
- return [];
37
- //else
38
- return config.map(function (d) {
39
- var key = d.key;
40
- var valuePath = d.valuePath;
41
- var prefix = d.prefix;
42
- var icon = d.icon;
43
- var returnValue;
44
- switch (key) {
45
- case "name":
46
- returnValue = (0, getVal_1.getVal)(data, valuePath);
47
- if (returnValue) {
48
- //reduce surname down to initials
49
- var split = returnValue.split(" ");
50
- var name_1 = split[0];
51
- var surname = split[1];
52
- returnValue = "".concat(name_1).concat(surname ? " ".concat(surname[0], ".") : "");
53
- }
54
- break;
55
- case "date":
56
- returnValue = (0, createFormattedDate_1.createFormattedDate)((0, getVal_1.getVal)(data, valuePath));
57
- break;
58
- case "text":
59
- default:
60
- returnValue = (0, getVal_1.getVal)(data, valuePath);
61
- }
62
- if (prefix) {
63
- return "".concat(localize(prefix), " : ").concat(returnValue);
64
- }
65
- var toReturn = ({ display: returnValue });
66
- //now to incorporate things like icons, imgs, links
67
- if (icon) {
68
- toReturn.icon = icon;
69
- }
70
- return toReturn;
71
- }).filter(function (d) { return d.display !== undefined; });
72
- };
package/dist/index.d.ts CHANGED
@@ -46,6 +46,7 @@ export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
46
46
  export { generateOptions } from "./components/Dropdowns/utils/generateOptions";
47
47
  export { genTagComp } from "./components/Dropdowns/utils/genTagComp";
48
48
  export { HintsProvider } from "./components/Hints/contextApi";
49
+ export { default as MetaBlock } from "./components/MetaBlock";
49
50
  export { ImageInput } from "./components/ImageInput";
50
51
  export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
51
52
  export { default as VideoInput } from "./components/VideoInput";
package/dist/index.js CHANGED
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
20
+ exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
21
  //css and styling related ( styled-components )
22
22
  var globalStyles_1 = require("./globalStyles");
23
23
  Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -111,6 +111,9 @@ Object.defineProperty(exports, "genTagComp", { enumerable: true, get: function (
111
111
  var contextApi_1 = require("./components/Hints/contextApi");
112
112
  Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
113
113
  // export this
114
+ //meta components
115
+ var MetaBlock_1 = require("./components/MetaBlock");
116
+ Object.defineProperty(exports, "MetaBlock", { enumerable: true, get: function () { return __importDefault(MetaBlock_1).default; } });
114
117
  //utility functions
115
118
  __exportStar(require("./utils/_EXPORTS"), exports);
116
119
  //template blocks
package/dist/utils/_EXPORTS/index.d.ts CHANGED
@@ -17,3 +17,4 @@ export { useHandleClickOutside } from "../customHooks/useHandleClickOutside";
17
17
  export { testJSON } from "../testJSON";
18
18
  export { useScreenWidth } from "../customHooks/useScreenWidth";
19
19
  export { getDaysDiff } from "../momentjs/getDaysDiff";
20
+ export { stitchLink } from "../stitchLink";
package/dist/utils/_EXPORTS/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getDaysDiff = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
3
+ exports.stitchLink = exports.getDaysDiff = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
4
4
  //the holy setter, getter & deleter
5
5
  var getVal_1 = require("../getterSetterDeleter/getVal");
6
6
  Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -44,3 +44,5 @@ Object.defineProperty(exports, "useScreenWidth", { enumerable: true, get: functi
44
44
  //moment js
45
45
  var getDaysDiff_1 = require("../momentjs/getDaysDiff");
46
46
  Object.defineProperty(exports, "getDaysDiff", { enumerable: true, get: function () { return getDaysDiff_1.getDaysDiff; } });
47
+ var stitchLink_1 = require("../stitchLink");
48
+ Object.defineProperty(exports, "stitchLink", { enumerable: true, get: function () { return stitchLink_1.stitchLink; } });
package/dist/utils/stitchLink.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export function stitchLink({ data, config }: {
2
+ data: any;
3
+ config: any;
4
+ }): string;
package/dist/utils/stitchLink.js ADDED
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.stitchLink = void 0;
4
+ var getVal_1 = require("./getterSetterDeleter/getVal");
5
+ var stitchLink = function (_a) {
6
+ /**
7
+ * idPath: ['a','b']
8
+ * desc -> here array means that both the items will be stitched one after the other as per config
9
+ * now imagine a config like this -> idPath: ['a,c', b]
10
+ * desc -> in this case, the a,c will be parsed such that the first truthy value found for
11
+ * either of the paths, will be considered for ary index 0
12
+ *
13
+ * config.target = '_blank' : this will prepare the full url including hostname & port so that on the outside we can open in new tab
14
+ */
15
+ var data = _a.data, config = _a.config;
16
+ var idPath = config.idPath, _b = config.idAs, idAs = _b === void 0 ? 'query' : _b, idName = config.idName, urlString = config.urlString, suffix = config.suffix, target = config.target;
17
+ var isArray = Array.isArray(idPath);
18
+ var idString = "";
19
+ var splitTrim = function (str) { return str.split(",").map(function (d) { return d.trim(); }); };
20
+ if (isArray) {
21
+ var ids_1 = idPath.map(function (p) { return (0, getVal_1.getVal)(data, splitTrim(p)); });
22
+ //if any of the paths gives falsy value then return undefined
23
+ if (ids_1.some(function (id) { return !!id === false; }))
24
+ return undefined;
25
+ idAs.map(function (as, i) {
26
+ if (as === "param") {
27
+ ids_1[i] = "/" + ids_1[i];
28
+ }
29
+ else if (as === "query") {
30
+ ids_1[i] = "?".concat(idName ? idName[i] : "id", "=").concat(ids_1[i]);
31
+ }
32
+ });
33
+ idString = ids_1.join("");
34
+ }
35
+ else {
36
+ var id = (0, getVal_1.getVal)(data, splitTrim(idPath));
37
+ if (!id)
38
+ return undefined;
39
+ idString =
40
+ idAs === "query"
41
+ ? "?".concat(idName || "id", "=").concat(id)
42
+ : idAs === "param"
43
+ ? "/".concat(id)
44
+ : id;
45
+ }
46
+ var hostAndPort = target === "_blank" ? window.location.origin : "";
47
+ return "".concat(hostAndPort).concat(urlString).concat(idString).concat(suffix || "");
48
+ };
49
+ exports.stitchLink = stitchLink;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.64.8",
3
+ "version": "2.64.10",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/dist/components/cards/comps/CardMetaBlock/index.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export default CardMetaBlock;
2
- declare function CardMetaBlock({ value, disabled, align, invert }: {
3
- value?: any[];
4
- disabled: any;
5
- align?: string;
6
- invert: any;
7
- }): React.JSX.Element;
8
- import React from "react";