@desynova-digital/components 9.1.41 → 9.1.42

package/_helpers/utils.js

@@ -126,10 +126,10 @@ var cleanHtml = exports.cleanHtml = function cleanHtml(htmlStr) {
   .replace(/\s\s+/g, "").replace(/\t/g, "").replace(/\\"/g, '"').replace(/\n/g, " ");
 };
 
-/**
- *
- * @param {*} htmlStr
- * @returns
+/**
+ *
+ * @param {*} htmlStr
+ * @returns
  */
 var htmlToText = exports.htmlToText = function htmlToText(htmlStr) {
   var res = htmlStr === null || htmlStr === void 0 ? void 0 : htmlStr.replace(/<\/?[^>]+>/gi, "");

package/atoms/cardV2/cardV2.js

@@ -46,11 +46,11 @@ var CardV2 = function CardV2(props) {
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props) || null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props));
   }, [props]);
 
-  /**
-   * based on width will render the card
-   * if width === sm then flex based card
-   * else normal
-   * @function
+  /**
+   * based on width will render the card
+   * if width === sm then flex based card
+   * else normal
+   * @function
    */
   var renderBasedOnWidth = (0, _react.useCallback)(function () {
     if (width === 'sm') {

package/atoms/cardV2/content.js

@@ -71,9 +71,9 @@ var Content = function Content(props) {
     tooltipVisibleSection = _useState2[0],
     setTooltipVisibleSection = _useState2[1];
 
-  /**
-   * toogle tooltip -> true / false
-   * @function
+  /**
+   * toogle tooltip -> true / false
+   * @function
    */
   var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
     return function () {
@@ -83,9 +83,9 @@ var Content = function Content(props) {
     };
   }, []);
 
-  /**
-   * returns filtered list removing undefined from input array
-   * @function
+  /**
+   * returns filtered list removing undefined from input array
+   * @function
    */
   var getTooltipData = function getTooltipData() {
     for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {

package/atoms/cardV2/thumbnail.js

@@ -22,38 +22,38 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
-  "folder": {
-    backgroundColor: '#121D29',
-    backgroundSize: 'inherit'
+  folder: {
+    backgroundColor: "#121D29",
+    backgroundSize: "inherit"
   },
-  "asset": {
-    backgroundColor: 'inherit',
-    backgroundSize: 'cover'
+  asset: {
+    backgroundColor: "inherit",
+    backgroundSize: "cover"
   }
 };
-var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color:", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n"])), function (_ref) {
+var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n"])), function (_ref) {
   var thumbnail = _ref.thumbnail;
   return "url(".concat(thumbnail, ") no-repeat 50%");
 }, function (_ref2) {
   var data_type = _ref2.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
 }, function (_ref3) {
   var data_type = _ref3.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
 }, function (_ref4) {
   var width = _ref4.width;
-  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
+  return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
 }, function (_ref5) {
   var width = _ref5.width;
-  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
+  return width === "sm" ? "50px" : width === "md" ? "70px" : "126px";
 }, function (_ref6) {
   var isClickPrevented = _ref6.isClickPrevented;
-  return !isClickPrevented ? 'pointer' : 'default';
+  return !isClickPrevented ? "pointer" : "default";
 });
-var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: 'SFUIText-Regular';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
-  return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
+var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \"SFUIText-Regular\";\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
+  return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
 }, function (props) {
-  return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
+  return props.upload_type === "rc" ? "#FFFFFF" : "#0C141D";
 });
 var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
   var hex = _ref7.hex;
@@ -61,7 +61,7 @@ var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_tem
 });
 var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: 'SFUIText-Regular';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: 'SFUIText-Light';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
+})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \"SFUIText-Regular\";\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \"SFUIText-Light\";\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
 var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
@@ -91,22 +91,22 @@ var Thumbnail = function Thumbnail(props) {
   var hoverPointerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (actions && actions.length > 0 && actions.some(function (item) {
-      return item.field === 'upload' || item.field === 'phupload_ingest';
+      return item.field === "upload" || item.field === "phupload_ingest";
     }) // can add multiple condition in future to prevent click
     ) {
       setClickPreventation(true);
     }
   }, [actions && JSON.stringify(actions).length > 0]);
   (0, _react.useEffect)(function () {
-    /**
-     * will return the hex based status passed
-     * eg. status = In Progress -> will format to "in_progress"
-     * then it will find its index in CARD_ASSET_STATUS which will
-     * return hex
-     * @const
+    /**
+     * will return the hex based status passed
+     * eg. status = In Progress -> will format to "in_progress"
+     * then it will find its index in CARD_ASSET_STATUS which will
+     * return hex
+     * @const
      */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
-      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
+      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
     });
     setStatusIndex(index);
   }, [upload_status, card_status]);
@@ -121,24 +121,24 @@ var Thumbnail = function Thumbnail(props) {
       var iframeOffsetHeight = offsetHeight / iframeCount;
       var imageChangePoint = offsetWidth / iframeCount;
       var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
-      hoverPointerRef.current.style.left = event.offsetX + 'px';
+      hoverPointerRef.current.style.left = event.offsetX + "px";
       var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
       var imageTop = iframeOffsetHeight * imageNum + offsetTop;
       if (imageTop > offsetHeight) {
         imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
       }
-      iframeImageRef.current.style.top = '-' + imageTop + 'px';
+      iframeImageRef.current.style.top = "-" + imageTop + "px";
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
 
-  /**
-   * will decide thumbnail click based on its condition
-   * eg. if task_type === upload then prevent click
-   * @function
+  /**
+   * will decide thumbnail click based on its condition
+   * eg. if task_type === upload then prevent click
+   * @function
    */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {
-      actionClick(e, 'play', ingest_db_id);
+      actionClick(e, "play", ingest_db_id);
     } else {
       e.preventDefault();
     }
@@ -166,10 +166,10 @@ var Thumbnail = function Thumbnail(props) {
     position: "relative",
     zIndex: "2",
     marginLeft: "auto"
-  }, (card_status || upload_status) && statusIndex > -1 && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
+  }, (card_status || upload_status) && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
     theme: props.theme,
     hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : {
-      background: '#AFB2BA'
+      background: "#AFB2BA"
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "status-color"
@@ -192,7 +192,7 @@ var Thumbnail = function Thumbnail(props) {
       height: "26px",
       padding: "0px",
       width: "26px",
-      margin: actions.length === i + 1 ? '0' : '0 5px 0px 0px',
+      margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
       onClick: function onClick(e) {
         e.stopPropagation();
         actionClick(e, item.field);
@@ -227,7 +227,7 @@ var Thumbnail = function Thumbnail(props) {
   })) || null);
 };
 Thumbnail.propTypes = {
-  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
   width: _propTypes["default"].string,
   thumbnail: _propTypes["default"].string,
   file_type: _propTypes["default"].string,
@@ -239,9 +239,9 @@ Thumbnail.propTypes = {
   actionClick: _propTypes["default"].func
 };
 Thumbnail.defaultProps = {
-  theme: 'dark',
-  width: 'lg',
-  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
-  iframeurl: ''
+  theme: "dark",
+  width: "lg",
+  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  iframeurl: ""
 };
 var _default = exports["default"] = Thumbnail;

package/atoms/draftInputText/draftInputText.js

@@ -75,11 +75,11 @@ var DraftInputText = function DraftInputText(_ref) {
     var passwordButton = props.passwordButton;
   }
 
-  /**
-   *
-   * @param {string} command string representing the keyboard command being invoked
-   * @param {object} editorState represents the current state of the editor, including the content, selection, and various editor properties.
-   * @returns new Editor State with applied styling
+  /**
+   *
+   * @param {string} command string representing the keyboard command being invoked
+   * @param {object} editorState represents the current state of the editor, including the content, selection, and various editor properties.
+   * @returns new Editor State with applied styling
    */
   var handleKeyCommand = function handleKeyCommand(command, editorState) {
     var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
@@ -90,9 +90,9 @@ var DraftInputText = function DraftInputText(_ref) {
     return 'not-handled';
   };
 
-  /**
-   *
-   * @returns Return the length of text in editor in a synchronous way
+  /**
+   *
+   * @returns Return the length of text in editor in a synchronous way
    */
   var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
     var currentSelection = editorState.getSelection();
@@ -127,11 +127,11 @@ var DraftInputText = function DraftInputText(_ref) {
     return length;
   };
 
-  /**
-   *
-   * @param {string} text The  text that is pasted in the editor
-   * @param {string} position tells whether we have to check for inserted text or pasted text
-   * @returns whether pasting or inserting text is feasible
+  /**
+   *
+   * @param {string} text The  text that is pasted in the editor
+   * @param {string} position tells whether we have to check for inserted text or pasted text
+   * @returns whether pasting or inserting text is feasible
    */
   var _handleInput = function _handleInput(text, position) {
     var currentContent = editorState.getCurrentContent();
@@ -150,27 +150,27 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   };
 
-  /**
-   *
-   * @returns calls the function to check before typing the text does not exceed maximum length
+  /**
+   *
+   * @returns calls the function to check before typing the text does not exceed maximum length
    */
   var _handleBeforeInput = function _handleBeforeInput() {
     return _handleInput('', 'before');
   };
 
-  /**
-   *
-   * @param {string} pastedText the text that is copy pasted in our editor
-   * @returns calls the function to check  copying  the text does not exceed maximum length
+  /**
+   *
+   * @param {string} pastedText the text that is copy pasted in our editor
+   * @returns calls the function to check  copying  the text does not exceed maximum length
    */
   var _handlePastedText = function _handlePastedText(pastedText) {
     return _handleInput(pastedText, 'after');
   };
 
-  /**
-   *
-   * @param {object} newEditorState the newstate of editor when we type any text in our editor
-   * @returns the new state of editor
+  /**
+   *
+   * @param {object} newEditorState the newstate of editor when we type any text in our editor
+   * @returns the new state of editor
    */
   var _handleChange = function _handleChange(newEditorState) {
     var contentState = newEditorState.getCurrentContent();
@@ -182,10 +182,10 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   };
 
-  /**
-   *
-   * @param {string} htmlString the string that is passed to the parent
-   * @returns removes the default <p> tag of draftjs
+  /**
+   *
+   * @param {string} htmlString the string that is passed to the parent
+   * @returns removes the default <p> tag of draftjs
    */
   var removeOuterPTag = function removeOuterPTag(htmlString) {
     var regex = /^<p>(.*?)<\/p>$/;
@@ -198,10 +198,10 @@ var DraftInputText = function DraftInputText(_ref) {
     });
   };
 
-  /**
-   *
-   * @param {string} html the string that is passed to the parent
-   * @returns removes the symbols of special character like commas and convert them back to character
+  /**
+   *
+   * @param {string} html the string that is passed to the parent
+   * @returns removes the symbols of special character like commas and convert them back to character
    */
 
   function decodeHtml(html) {
@@ -210,8 +210,8 @@ var DraftInputText = function DraftInputText(_ref) {
     return txt.value;
   }
 
-  /**
-   *  this useEffect is used to send value to parent component as soon as editor state gets updated
+  /**
+   *  this useEffect is used to send value to parent component as soon as editor state gets updated
    */
   (0, _react.useEffect)(function () {
     var html = (0, _draftConvert.convertToHTML)(editorState.getCurrentContent());
@@ -227,8 +227,8 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [editorState]);
 
-  /**
-   * This useEffect handles our focus condition and also updates state when the props value changes
+  /**
+   * This useEffect handles our focus condition and also updates state when the props value changes
    */
   (0, _react.useEffect)(function () {
     if (diff && value !== '' && value !== undefined) {
@@ -248,8 +248,8 @@ var DraftInputText = function DraftInputText(_ref) {
       }
     }
   }, [value]);
-  /**
-   * This useEffect is used to chnage our value when timeline is changed
+  /**
+   * This useEffect is used to chnage our value when timeline is changed
    */
   (0, _react.useEffect)(function () {
     if (listScrollTop !== null) {
@@ -263,8 +263,8 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [listScrollTop]);
 
-  /**
-   * This useEffect is used to focus on Line1 when a new segment is created
+  /**
+   * This useEffect is used to focus on Line1 when a new segment is created
    */
   (0, _react.useEffect)(function () {
     if (autoFocus) {