oolib 2.153.0 → 2.154.0

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

@@ -1,11 +0,0 @@
-export function CardContent({ id, data, config, to, onClick, openInNewTab, actions, highlight }: {
-    id: any;
-    data: any;
-    config: any;
-    to: any;
-    onClick: any;
-    openInNewTab: any;
-    actions: any;
-    highlight: any;
-}): React.JSX.Element;
-import React from "react";

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

@@ -1,76 +1,144 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardContent = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("styled-components");
-var injectHttps_1 = require("../../../utils/injectHttps");
-var utilsOolib_1 = require("../../../utilsOolib");
-var ActionMenu_1 = require("../../ActionMenu");
-var Typo_1 = require("../../Typo");
-var VideoInput_1 = __importDefault(require("../../VideoInput"));
-var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
-var LineClampWrapper_1 = require("../comps/LineClampWrapper");
-var styled_1 = require("../styled");
-var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
-var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
-var parseCardConfig_1 = require("../utils/parseCardConfig");
-var mediaDataExists_1 = require("../utils/mediaDataExists");
-var styled_2 = require("./styled");
-var CardPlaceholder_1 = require("../comps/CardPlaceholder");
-var ImageInput_1 = require("../../ImageInput");
-var icons_1 = require("../../../icons");
-var Tags_1 = require("../../Tags");
-var CrownSimple = icons_1.icons.CrownSimple;
-var CardContent = function (_a) {
-    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, highlight = _a.highlight;
-    var theme = (0, styled_components_1.useTheme)();
-    var localize = (0, utilsOolib_1.useLocale)();
-    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
-    var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
-    var _b = (0, parseCardConfig_1.parseCardConfig)({
-        config: config,
-        data: data,
-        parseSpecialSyntax: parseSpecialSyntax
-    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
-    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
-    if (dontRenderRes)
-        return dontRenderRes;
-    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
-    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
-        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
-            highlight && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
-                react_1.default.createElement(styled_2.StyledCrown, null,
-                    react_1.default.createElement(CrownSimple, { size: 24 }))),
-            react_1.default.createElement(styled_2.StyledUpperSection, { highlight: highlight },
-                react_1.default.createElement(styled_2.StyledContainer1, null,
-                    cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
-                            display: "flex",
-                            gap: "2rem",
-                            justifyContent: "space-between",
-                        } },
-                        react_1.default.createElement(Typo_1.LABEL, { style: {
-                                textOverflow: "ellipsis",
-                                overflow: "hidden",
-                                whiteSpace: "nowrap",
-                            }, color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel),
-                        react_1.default.createElement("div", { style: { marginTop: "-1rem", marginRight: "-1rem" } }, actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions })))) : null,
-                    title ? (react_1.default.createElement("div", { style: { display: "flex", alignItems: "end", gap: ".5rem" } },
-                        " ",
-                        react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
-                            react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
-                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
-                tagDisplay && react_1.default.createElement(Tags_1.TagDisplay, { display: tagDisplay, color: "green" }),
-                (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
-                ) : null),
-            showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
-                !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
-                    react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
-                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))),
-                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
-                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
-                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : null)))));
-};
-exports.CardContent = CardContent;
+// import React from "react";
+// import { useTheme } from "styled-components";
+// import { injectHttps } from "../../../utils/injectHttps";
+// import { getPrimaryColorText, useLocale } from "../../../utilsOolib";
+// import { ActionMenu } from "../../ActionMenu";
+// import { LABEL } from "../../Typo";
+// import VideoInput from "../../VideoInput";
+// import MetaBlock from "../../MetaBlock";
+// import { LineClampWrapper } from "../comps/LineClampWrapper";
+// import { StyledTitle, StyledTitleSpan } from "../styled";
+// import { decideLinkCompAndTarget } from "../utils/decideLinkCompAndTarget";
+// import { dontRenderIfBothOnClickAndTo } from "../utils/dontRenderIfBothOnClickAndTo";
+// import { parseCardConfig } from "../utils/parseCardConfig";
+// import {imageDataExists, videoDataExists} from '../utils/mediaDataExists'
+// import {
+//   StyledCardWrapper,
+//   StyledContainer1,
+//   StyledCrown,
+//   StyledCrownWrapper,
+//   StyledEmbedSection,
+//   StyledUpperSection,
+// } from "./styled";
+// import {CardPlaceholder} from '../comps/CardPlaceholder'
+// import { ImageInput } from "../../ImageInput";
+// import { icons } from "../../../icons"
+// import { TagDisplay, TagLink } from "../../Tags";
+// const { CrownSimple } = icons;
+// export const CardContent = ({
+//   id,
+//   data,
+//   config,
+//   to,
+//   onClick,
+//   openInNewTab,
+//   actions,
+//   highlight
+// }) => {
+//   const theme = useTheme();
+//   const localize = useLocale();
+//   const { parseSpecialSyntax } = theme || {};
+//   const showEmbedSection = !!(config?.image || config?.video);
+//   const { cardLabel, title, video, image, metaBlock, tagDisplay } =
+//     parseCardConfig({
+//       config,
+//       data,
+//       parseSpecialSyntax
+//     });
+//     let dontRenderRes = dontRenderIfBothOnClickAndTo({onClick, to});
+//     if(dontRenderRes) return dontRenderRes
+//   const {LinkComp, target, externalUrl } = decideLinkCompAndTarget({to, openInNewTab})
+//   return (
+//     <LinkComp
+//       target={target}
+//       href={injectHttps(to)}
+//       to={to}
+//     >
+//       <StyledCardWrapper 
+//         id={id} 
+//         highlight={highlight}
+//         onClick={onClick ? e => onClick(e,data) : undefined} 
+//         /** imp to pass data cuz its used by some on okf eg. LinkOrEmbedModal*/
+//         >
+//           {highlight && <StyledCrownWrapper>
+//             <StyledCrown>
+//               <CrownSimple size={24}/>
+//             </StyledCrown>
+//           </StyledCrownWrapper>}
+//         <StyledUpperSection highlight={highlight}>
+//           <StyledContainer1>
+//             {cardLabel ? (
+//               <div
+//                 title={cardLabel}
+//                 style={{
+//                   display: "flex",
+//                   gap: "2rem",
+//                   justifyContent: "space-between",
+//                 }}
+//               >
+//                 <LABEL
+//                   style={{
+//                     textOverflow: "ellipsis",
+//                     overflow: "hidden",
+//                     whiteSpace: "nowrap",
+//                   }}
+//                   color={getPrimaryColorText(theme?.colors)}
+//                 >
+//                   {cardLabel}
+//                 </LABEL>
+//                 <div style={{ marginTop: "-1rem", marginRight: "-1rem" }}>
+//                   {actions && <ActionMenu actions={actions} />}
+//                 </div>
+//               </div>
+//             ) : null}
+//             {title ? (
+//               <div style={{ display: "flex", alignItems: "end", gap: ".5rem" }}>
+//                 {" "}
+//                 <LineClampWrapper noOfLines_M={6} title={title}>
+//                   <StyledTitle capitalize className="StyledTitle">
+//                       <StyledTitleSpan className="StyledTitleSpan">
+//                         {localize(title)}
+//                       </StyledTitleSpan>
+//                   </StyledTitle>
+//                 </LineClampWrapper>
+//               </div>
+//             ) : null}
+//           </StyledContainer1>
+//           {/* {((Array.isArray(tagDisplay?.data) && tagDisplay?.data?.length > 0) || typeof tagDisplay ===  "string") && <TagDisplay display={Array.isArray(tagDisplay?.data) ? tagDisplay?.data[0]?.display : tagDisplay} to={tagDisplay?.collectionId ? `/published-page/${tagDisplay?.collectionId}?id=${tagDisplay?.data[0]?._id}` : "#"} color="green"/>} */}
+//           {tagDisplay && <TagDisplay display={tagDisplay} color="green"/>} 
+//           {metaBlock?.length > 0 ? (
+//             <MetaBlock data={data} config={metaBlock} /> //show only two meta for cardContent
+//           ) : null}
+//         </StyledUpperSection>
+//         {showEmbedSection && (
+//           <StyledEmbedSection>
+//             {!imageDataExists(image) && !videoDataExists(video) &&
+//               <CardPlaceholder/>
+//             }
+//             {imageDataExists(image) && (
+//               <div style={{ width: "100%" }}>
+//                 {
+//                   <ImageInput
+//                     value={image}
+//                     aspectRatio={"5/3"}
+//                     readOnly={true}
+//                     defaultImageSpread={"cover"} //meaning if a spread is not defined in image data, it will fallback to this.
+//                     enableCaptions={false}
+//                     disableImageBorder={true}
+//                   />
+//                 }
+//               </div>
+//             )}
+//             {videoDataExists(video) && !imageDataExists(image) ? (
+//               <div style={{ width: "100%", position: 'relative' }}>
+//                 <VideoInput value={video} readOnly={true} light={true} />
+//                 {/**below div ensures the video is not clickable */}
+//                 <div style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}/>
+//               </div>
+//             ) : null}
+//           </StyledEmbedSection>
+//         )}
+//       </StyledCardWrapper>
+//     </LinkComp>
+//   );
+// };

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

@@ -1,7 +0,0 @@
-export const StyledContainer1: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMetaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEmbedSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledUpperSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCrownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCrown: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,53 +1,60 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCrown = exports.StyledCrownWrapper = exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../../themes/colors");
-var transitions_1 = require("../../../themes/mixins/transitions");
-var styled_1 = require("../styled");
-var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white, invertGreen = colors_1.colors.invertGreen;
-var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
-exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
-exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
-exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, function (_a) {
-    var highlight = _a.highlight;
-    return highlight ? colors_1.colors.lightGreen : greyColor5;
-}, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
-exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"])), flexColumn, function (_a) {
-    var highlight = _a.highlight;
-    return highlight ? '2rem' : '3rem';
-}, function (_a) {
-    var highlight = _a.highlight;
-    return highlight ? "1rem" : "2rem";
-});
-exports.StyledCrownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"], ["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"])));
-exports.StyledCrown = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"], ["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"])), invertGreen);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+// import styled, { css } from "styled-components";
+// import { colors } from "../../../themes/colors";
+// import { transition } from "../../../themes/mixins/transitions";
+// import { CSSTitleAnimationOnHover } from "../styled";
+// const { greyColor5, white, invertGreen } = colors;
+// const flexColumn = css`
+//   display: flex;
+//   flex-direction: column;
+// `;
+// export const StyledContainer1 = styled.div`
+//   ${flexColumn}
+//   gap: 1rem;
+// `;
+// export const StyledMetaBlock = styled.div`
+//   display: flex;
+//   gap: 0.5em;
+// `;
+// export const StyledEmbedSection = styled.div`
+//   height: 100px;
+//   display: flex;
+//   align-items: center;
+//   overflow: hidden;
+//   width: 100%;
+// `;
+// export const StyledCardWrapper = styled.div`
+//   height: 100%;
+//   border: 2px solid ${greyColor5};
+//   background-color: ${({ highlight }) => highlight ? colors.lightGreen : greyColor5 }; 
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: space-between;
+//   ${transition("background-color")}
+//   cursor: pointer;
+//   &:hover {
+//     background-color: ${white};
+//     ${CSSTitleAnimationOnHover};
+//      #CardPlaceholder {
+//       opacity: 1;
+//     }
+//   }
+// `;
+// export const StyledUpperSection = styled.div`
+//   /* height: 100%; */
+//   flex-grow: 1;
+//   justify-content: space-between;
+//   padding: 2rem;
+//   ${flexColumn}
+//   gap: ${({ highlight }) => highlight ? '2rem' : '3rem'};
+//   padding-top: ${({ highlight }) => highlight ? "1rem" : "2rem"};
+// `;
+// export const StyledCrownWrapper = styled.div`
+//   width: 100%;
+//   display: flex; 
+//   justify-content: flex-end
+// `;
+// export const StyledCrown = styled.div`
+//   width: max-content;
+//   background-color: ${invertGreen};
+//   padding: 1rem;
+// `

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

@@ -1,12 +0,0 @@
-export function ListContent({ id, data, config, to, onClick, openInNewTab, actions, statusTag, variant, }: {
-    id: any;
-    data: any;
-    config: any;
-    to: any;
-    onClick: any;
-    openInNewTab: any;
-    actions: any;
-    statusTag: any;
-    variant?: string;
-}): React.JSX.Element;
-import React from "react";