@mjhls/mjh-framework 1.0.1064 → 1.0.1065-pdfGating

package/dist/esm/PublicationLanding.js

@@ -1,18 +1,28 @@
+import { _ as _extends } from './extends-1559c147.js';
+import { _ as _defineProperty } from './defineProperty-8c30428f.js';
+import { b as _anInstance, c as _forOf, d as _redefineAll, e as _setSpecies, _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-958ef5fc.js';
+import { _ as _JSON$stringify } from './stringify-2b084bee.js';
 import { _ as _slicedToArray } from './slicedToArray-6ebcbfea.js';
 import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelpers-0c4b6f40.js';
 import { b as _isObject, c as _objectDp, d as _objectCreate, e as _ctx, f as _descriptors, g as _iterDefine, h as _wks, i as _toObject, j as _iobject, k as _toLength, l as _global, m as _fails, n as _hide, o as _setToStringTag, _ as _export, p as _classof, q as _aFunction, a as _core } from './core.get-iterator-method-ea258bb1.js';
 import { _ as _iterStep } from './web.dom.iterable-ab4dea5c.js';
-import { _ as _anInstance, a as _forOf, b as _redefineAll, c as _setSpecies } from './_set-species-2cd9340f.js';
 import { _ as _meta, a as _isArray } from './_is-array-8d21b9e3.js';
 import { _ as _toConsumableArray } from './toConsumableArray-f7074d7c.js';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Dropdown from 'react-bootstrap/Dropdown';
 import Card from 'react-bootstrap/Card';
 import { useRouter } from 'next/router';
 import { L as LazyLoad } from './index-755f2cc2.js';
-import { u as urlForFile } from './urlForFile-f6485737.js';
+import { u as urlForFile } from './urlForFile-dc111d7f.js';
+import Overlay from 'react-bootstrap/Overlay';
+import Popover from 'react-bootstrap/Popover';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import './main-754d4992.js';
+import './define-property-5f1bda73.js';
+import './_library-528f1934.js';
 import './_iter-detect-98db3b07.js';
 import 'react-dom';
 import 'prop-types';
@@ -373,6 +383,8 @@ module.exports = { "default": set$1, __esModule: true };
 
 var _Set = unwrapExports(set);
 
+var _this = undefined;
+
 /* usage & query
 const Publication = (props) => {
   const { cache, pub, year } = props
@@ -455,6 +467,54 @@ var PublicationLanding = function PublicationLanding(props) {
 
   var baseUrl = client ? client.config().baseUrl : '';
 
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      email = _useState10[0],
+      setEmail = _useState10[1];
+
+  var _useState11 = useState(''),
+      _useState12 = _slicedToArray(_useState11, 2),
+      firstName = _useState12[0],
+      setFirstName = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      lastName = _useState14[0],
+      setLastName = _useState14[1];
+
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      checkBox = _useState16[0],
+      setCheckBox = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isValidated = _useState18[0],
+      SetIsValidated = _useState18[1];
+
+  var DL_PDF = useRef();
+  var overLayRef = useRef([]);
+
+  var _useState19 = useState(true),
+      _useState20 = _slicedToArray(_useState19, 2),
+      sendingData = _useState20[0],
+      setSendingData = _useState20[1];
+
+  var _useState21 = useState(''),
+      _useState22 = _slicedToArray(_useState21, 2),
+      errorMsg = _useState22[0],
+      setErrorMsg = _useState22[1];
+
+  var _useState23 = useState({}),
+      _useState24 = _slicedToArray(_useState23, 2),
+      show = _useState24[0],
+      setShow = _useState24[1];
+
+  var _useState25 = useState(null),
+      _useState26 = _slicedToArray(_useState25, 2),
+      overlayTarget = _useState26[0],
+      setOverlayTarget = _useState26[1];
+
   // useEffect(() => {
   //   ;(async function() {
   //     if (issueData && issueData.length > 0 && client) {
@@ -483,6 +543,8 @@ var PublicationLanding = function PublicationLanding(props) {
   //   })()
   // }, [])
   // function for filtering by year
+
+
   var filterByYear = function filterByYear(year) {
     return issueData.filter(function (issue) {
       return issue.year === year;
@@ -585,12 +647,196 @@ var PublicationLanding = function PublicationLanding(props) {
     }
   }, [activeYear, activeContentPlacement, issueData]);
 
+  var handleFormInput = function handleFormInput(e) {
+    //console.dir(e.currentTarget)
+    e.preventDefault();
+    e.stopPropagation();
+
+    switch (e.currentTarget.name) {
+      case 'firstName':
+        setFirstName(e.currentTarget.value);
+        break;
+      case 'lastName':
+        setLastName(e.currentTarget.value);
+        break;
+      case 'email':
+        setEmail(e.currentTarget.value);
+        break;
+      case 'checkbox':
+        setCheckBox(e.currentTarget.checked);
+        break;
+    }
+  };
+
+  useEffect(function () {
+    if (firstName.length > 3 && lastName.length > 3 && email.includes('@') && checkBox) {
+      setSendingData(false);
+    }
+  }, [firstName, lastName, email, checkBox]);
+
+  var isGatedFormHandler = function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(e) {
+      var form, body, res;
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              e.stopPropagation();
+              setSendingData(true);
+              form = e.currentTarget;
+
+              if (!(form.checkValidity() === false)) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt('return');
+
+            case 6:
+              console.dir(overLayRef);
+              body = {};
+
+              body['firstName'] = firstName;
+              body['lastName'] = lastName;
+              body['email'] = email;
+              body['downloadedPDF'] = DL_PDF.current.dataset.pdfname;
+              body['publication'] = router.query.publication ? router.query.publication : null;
+              body['site'] = window.location.hostname;
+              body['Source'] = 'Gated Form';
+              SetIsValidated(true);
+
+              _context.prev = 16;
+              _context.next = 19;
+              return fetch('/api/pdfGating/check', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: _JSON$stringify(body)
+              });
+
+            case 19:
+              res = _context.sent;
+
+              console.dir(res);
+
+              if (!(res.status === 202)) {
+                _context.next = 26;
+                break;
+              }
+
+              window.open(DL_PDF.current.dataset.pdf, '_blank');
+              closeAllOverlays();
+              _context.next = 31;
+              break;
+
+            case 26:
+              _context.t0 = Error;
+              _context.next = 29;
+              return res.text();
+
+            case 29:
+              _context.t1 = _context.sent;
+              throw new _context.t0(_context.t1);
+
+            case 31:
+              _context.next = 37;
+              break;
+
+            case 33:
+              _context.prev = 33;
+              _context.t2 = _context['catch'](16);
+
+              setErrorMsg(_context.t2.message);
+              window.setTimeout(function () {
+                closeAllOverlays();
+              }, 500);
+
+            case 37:
+              setSendingData(false);
+              SetIsValidated(false);
+
+            case 39:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, _this, [[16, 33]]);
+    }));
+
+    return function isGatedFormHandler(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var _useState27 = useState(null),
+      _useState28 = _slicedToArray(_useState27, 2),
+      currentKey = _useState28[0],
+      setCurrentKey = _useState28[1];
+
+  var _useState29 = useState(false),
+      _useState30 = _slicedToArray(_useState29, 2),
+      overLaysClosed = _useState30[0],
+      setOverLaysClosed = _useState30[1];
+
+  var closeAllOverlays = function closeAllOverlays(targetKey) {
+    for (var key in show) {
+      if (key !== targetKey) {
+        closeOverLay(key);
+      }
+    }
+    if (targetKey) {
+      setCurrentKey(targetKey);
+      setOverLaysClosed(true);
+    }
+  };
+
+  useEffect(function () {
+    console.log(currentKey);
+    console.log(overLaysClosed);
+    if (overLaysClosed) {
+      window.setTimeout(function () {
+        console.dir(show[currentKey]);
+        var updatedValue = _defineProperty({}, currentKey, true);
+        setShow(function (show) {
+          return _extends({}, show, updatedValue);
+        });
+        setOverLaysClosed(false);
+        if (show[currentKey] !== true) {
+          try {
+            document.getElementById('download_' + currentKey).disabled = true;
+          } catch (e) {
+            console.log(e.message);
+          }
+        }
+      }, 250);
+    }
+  }, [currentKey, overLaysClosed, show]);
+
+  var handleOverLayOpen = function handleOverLayOpen(event) {
+    closeAllOverlays(event.target.dataset.key);
+    setOverlayTarget(event.target);
+  };
+
+  function closeOverLay(key) {
+    var updatedValue = {};
+    updatedValue = show[key] === true ? _defineProperty({}, key, false) : _defineProperty({}, key, true);
+    document.getElementById('download_' + key).disabled = false;
+    setShow(function (show) {
+      return _extends({}, show, updatedValue);
+    });
+  }
+
+  useEffect(function () {
+    console.dir(overlayTarget);
+    console.dir(show);
+  }, [overlayTarget, show]);
+
   return React__default.createElement(
     'div',
     { id: 'publicationLanding' },
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n          #pubYearFilter .dropdown-menu.show,\n          #contentPlacementFilter .dropdown-menu.show {\n            max-height: 25vh;\n            overflow: auto;\n          }\n          #publicationLanding {\n            margin-bottom: 6rem;\n          }\n        '
     ),
     React__default.createElement(
@@ -707,16 +953,177 @@ var PublicationLanding = function PublicationLanding(props) {
             React__default.createElement(
               Card.Footer,
               null,
-              issue && issue.articles && issue.articles.length > 0 ? React__default.createElement(
+              issue && issue.articles && issue.articles.length > 1 ? React__default.createElement(
                 'a',
                 { href: publication.identifier.current + '/' + issue.identifier.current, className: 'btn btn-primary' },
                 'View Issue'
               ) : null,
-              issue.pdf && issue.pdf.asset && issue.pdf.asset.url && React__default.createElement(
+              issue && issue.articles && issue.articles.length === 1 ? React__default.createElement(
+                'a',
+                { href: '/view/' + issue.articles[0].url.current, className: 'btn btn-primary' },
+                'View Issue'
+              ) : null,
+              issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
+                'div',
+                { className: 'overLayWrapper', ref: function ref(el) {
+                    return overLayRef.current[key] = el;
+                  } },
+                React__default.createElement(
+                  Overlay,
+                  { show: show[key], container: overLayRef.current[key], key: key, target: overlayTarget, placement: 'top', onHide: function onHide() {
+                      return closeAllOverlays();
+                    } },
+                  React__default.createElement(
+                    Popover,
+                    { id: 'popover-basic-' + key },
+                    React__default.createElement(
+                      Popover.Content,
+                      null,
+                      React__default.createElement(
+                        Row,
+                        null,
+                        React__default.createElement(
+                          'div',
+                          {
+                            onClick: function onClick(e) {
+                              return closeOverLay(key);
+                            },
+                            style: { cursor: 'pointer', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', width: '100%', marginBottom: '-15px' } },
+                          React__default.createElement(
+                            'div',
+                            { style: { width: '25px', height: '25px' } },
+                            'X'
+                          )
+                        )
+                      ),
+                      React__default.createElement(
+                        Form,
+                        { validated: isValidated, onSubmit: isGatedFormHandler },
+                        React__default.createElement(
+                          Row,
+                          { className: 'gatedPdfForm' },
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3 mt-3', controlId: 'pdfFormFirstName' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'First Name'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: firstName, name: 'firstName', required: true, type: 'text', min: '1', placeholder: 'First Name' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your first name.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { required: true, className: 'mb-3', controlId: 'pdfFormLastName' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'Last Name'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: lastName, name: 'lastName', required: true, type: 'text', min: '1', placeholder: 'Last Name' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your last name.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3', controlId: 'pdfFormEmail' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'Email'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: email, name: 'email', required: true, type: 'email', placeholder: 'Email' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your email.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3', controlId: 'pdfPrivacyCheck' },
+                            React__default.createElement(
+                              Form.Check,
+                              null,
+                              React__default.createElement(Form.Check.Input, { required: true, onChange: function onChange(e) {
+                                  return handleFormInput(e);
+                                }, type: 'checkbox', name: 'checkbox' }),
+                              React__default.createElement(
+                                Form.Check.Label,
+                                null,
+                                'By clicking on \'Submit\', you accept our ',
+                                React__default.createElement(
+                                  'a',
+                                  { href: 'https://www.dentalproductsreport.com/privacy', target: '_blank' },
+                                  'Privacy Policy'
+                                )
+                              )
+                            )
+                          ),
+                          React__default.createElement(
+                            Button,
+                            { disabled: sendingData, className: 'btn btn-primary mb-3', type: 'submit' },
+                            'Submit'
+                          ),
+                          errorMsg ? React__default.createElement(
+                            'div',
+                            { style: { color: 'red' } },
+                            errorMsg
+                          ) : null
+                        )
+                      )
+                    )
+                  )
+                ),
+                React__default.createElement(
+                  'button',
+                  {
+                    id: 'download_' + key,
+                    rel: 'noopener',
+                    onClick: function onClick(e) {
+                      return handleOverLayOpen(e);
+                    },
+                    ref: DL_PDF,
+                    'data-key': key,
+                    'data-pdfname': issue.name,
+                    'data-pdf': urlForFile(issue.pdf, baseUrl),
+                    className: 'btn btn-primary ml-3' },
+                  'Download Issue'
+                )
+              ) : null : issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
                 'a',
                 { rel: 'noopener', href: urlForFile(issue.pdf, baseUrl), target: '_blank', className: 'btn btn-primary' },
                 'Download Issue'
-              )
+              ) : null
             )
           )
         )
@@ -770,16 +1177,177 @@ var PublicationLanding = function PublicationLanding(props) {
             React__default.createElement(
               Card.Footer,
               null,
-              issue && issue.articles && issue.articles.length > 0 ? React__default.createElement(
+              issue && issue.articles && issue.articles.length > 1 ? React__default.createElement(
                 'a',
                 { href: publication.identifier.current + '/' + issue.identifier.current, className: 'btn btn-primary' },
                 'View Issue'
               ) : null,
-              issue.pdf && issue.pdf.asset && issue.pdf.asset.url && React__default.createElement(
+              issue && issue.articles && issue.articles.length === 1 ? React__default.createElement(
+                'a',
+                { href: '/view/' + issue.articles[0].url.current, className: 'btn btn-primary' },
+                'View Issue'
+              ) : null,
+              issue.isGatedPDF ? issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
+                'div',
+                { className: 'overLayWrapper', ref: function ref(el) {
+                    return overLayRef.current[key] = el;
+                  } },
+                React__default.createElement(
+                  Overlay,
+                  { show: show[key], container: overLayRef.current[key], key: key, target: overlayTarget, placement: 'top', onHide: function onHide() {
+                      return closeAllOverlays();
+                    } },
+                  React__default.createElement(
+                    Popover,
+                    { id: 'popover-basic-' + key },
+                    React__default.createElement(
+                      Popover.Content,
+                      null,
+                      React__default.createElement(
+                        Row,
+                        null,
+                        React__default.createElement(
+                          'div',
+                          {
+                            onClick: function onClick(e) {
+                              return closeOverLay(key);
+                            },
+                            style: { cursor: 'pointer', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', width: '100%', marginBottom: '-15px' } },
+                          React__default.createElement(
+                            'div',
+                            { style: { width: '25px', height: '25px' } },
+                            'X'
+                          )
+                        )
+                      ),
+                      React__default.createElement(
+                        Form,
+                        { validated: isValidated, onSubmit: isGatedFormHandler },
+                        React__default.createElement(
+                          Row,
+                          { className: 'gatedPdfForm' },
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3 mt-3', controlId: 'pdfFormFirstName' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'First Name'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: firstName, name: 'firstName', required: true, type: 'text', min: '1', placeholder: 'First Name' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your first name.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { required: true, className: 'mb-3', controlId: 'pdfFormLastName' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'Last Name'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: lastName, name: 'lastName', required: true, type: 'text', min: '1', placeholder: 'Last Name' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your last name.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3', controlId: 'pdfFormEmail' },
+                            React__default.createElement(
+                              Form.Label,
+                              null,
+                              React__default.createElement(
+                                'span',
+                                { style: { color: 'red' } },
+                                '*'
+                              ),
+                              'Email'
+                            ),
+                            React__default.createElement(Form.Control, { onChange: function onChange(e) {
+                                return handleFormInput(e);
+                              }, value: email, name: 'email', required: true, type: 'email', placeholder: 'Email' }),
+                            React__default.createElement(
+                              Form.Control.Feedback,
+                              { type: 'invalid' },
+                              'Please provide your email.'
+                            )
+                          ),
+                          React__default.createElement(
+                            Form.Group,
+                            { className: 'mb-3', controlId: 'pdfPrivacyCheck' },
+                            React__default.createElement(
+                              Form.Check,
+                              null,
+                              React__default.createElement(Form.Check.Input, { required: true, onChange: function onChange(e) {
+                                  return handleFormInput(e);
+                                }, type: 'checkbox', name: 'checkbox' }),
+                              React__default.createElement(
+                                Form.Check.Label,
+                                null,
+                                'By clicking on \'Submit\', you accept our ',
+                                React__default.createElement(
+                                  'a',
+                                  { href: 'https://www.dentalproductsreport.com/privacy', target: '_blank' },
+                                  'Privacy Policy'
+                                )
+                              )
+                            )
+                          ),
+                          React__default.createElement(
+                            Button,
+                            { disabled: sendingData, className: 'btn btn-primary mb-3', type: 'submit' },
+                            'Submit'
+                          ),
+                          errorMsg ? React__default.createElement(
+                            'div',
+                            { style: { color: 'red' } },
+                            errorMsg
+                          ) : null
+                        )
+                      )
+                    )
+                  )
+                ),
+                React__default.createElement(
+                  'button',
+                  {
+                    id: 'download_' + key,
+                    rel: 'noopener',
+                    onClick: function onClick(e) {
+                      return handleOverLayOpen(e);
+                    },
+                    ref: DL_PDF,
+                    'data-key': key,
+                    'data-pdfname': issue.name,
+                    'data-pdf': urlForFile(issue.pdf, baseUrl),
+                    className: 'btn btn-primary ml-3' },
+                  'Download Issue'
+                )
+              ) : null : issue.pdf && issue.pdf.asset && issue.pdf.asset.url ? React__default.createElement(
                 'a',
                 { rel: 'noopener', href: urlForFile(issue.pdf, baseUrl), target: '_blank', className: 'btn btn-primary' },
                 'Download Issue'
-              )
+              ) : null
             )
           )
         )
@@ -792,7 +1360,7 @@ var PublicationLanding = function PublicationLanding(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
+      '\n        .gatedPdfForm {\n          justify-content: center;\n          flex-direction: column;\n          padding: 0 1.5rem;\n        }\n        .popoverClose {\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n        }\n        .popoverClose button {\n          border: none;\n          background: transparent;\n          color: #2780e3;\n        }\n        .card-footer {\n          display: flex;\n        }\n        .card-footer button:not(:first-child) {\n          color: #fff;\n          margin-left: 1rem;\n        }\n        .issueCard.card:hover {\n          cursor: default;\n        }\n        .content-category-label {\n          margin: 0.5rem 0;\n          display: block;\n        }\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          display: inline;\n          width: 100%;\n          padding: 5px;\n          color: #484848;\n          border-radius: 2px;\n        }\n        .dropdown-toggle {\n          min-width: 5rem;\n        }\n        .dropdown-toggle:empty:after {\n          margin-left: 4rem;\n        }\n        .card-footer {\n          background-color: transparent;\n          border-top: 0;\n        }\n        .card-footer a:not(:first-child) {\n          margin-left: 1rem;\n        }\n      '
     )
   );
 };