@desynova-digital/components 9.3.3 → 9.3.4

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 (3) hide show
  1. package/atoms/pageSearchCard/pageSearchCard.js +39 -40
  2. package/molecules/filter/filter.js +12 -5
  3. package/package.json +2 -2
package/atoms/pageSearchCard/pageSearchCard.js CHANGED
@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _styledComponents = _interopRequireDefault(require("styled-components"));
14
14
  var _tokens = require("@desynova-digital/tokens");
15
15
  var _icon = _interopRequireDefault(require("../icon"));
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  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; }
19
19
  var getSearchAccent = function getSearchAccent(theme) {
@@ -25,7 +25,7 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(value) {
25
25
  if (typeof value !== 'string' || !value) return value;
26
26
  return "".concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
27
27
  };
28
- var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: 10px;\n overflow: visible;\n cursor: ", ";\n background: #0c141d;\n flex-shrink: 0;\n box-sizing: border-box;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\n transform: scale(1);\n transform-origin: center;\n z-index: 0;\n isolation: isolate;\n transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform;\n\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover .show-movie-open-page,\n &:focus-within .show-movie-open-page {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n"])), function (_ref) {
28
+ var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: 10px;\n overflow: visible;\n cursor: ", ";\n background: #0c141d;\n flex-shrink: 0;\n box-sizing: border-box;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\n transform: scale(1);\n transform-origin: center;\n z-index: 0;\n isolation: isolate;\n transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform;\n\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover .show-movie-open-page,\n &:focus-within .show-movie-open-page {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transform: translateY(-50%) scale(1);\n }\n"])), function (_ref) {
29
29
  var width = _ref.width;
30
30
  return width || '178px';
31
31
  }, function (_ref2) {
@@ -42,34 +42,41 @@ var Badge = _styledComponents["default"].div(_templateObject4 || (_templateObjec
42
42
  return getSearchAccent(theme);
43
43
  });
44
44
  var Content = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n left: 16px;\n right: 16px;\n bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n z-index: 2;\n"])));
45
- var TextContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n min-width: 0;\n flex: 1;\n"])));
46
- var Title = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n color: #fff;\n background: transparent;\n font-family: 'SFUIText-Medium';\n font-size: 13px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n cursor: pointer;\n\n &:hover {\n color: ", ";\n }\n"])), function (_ref5) {
45
+ var TextContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n min-width: 0;\n flex: 1;\n padding-right: 48px;\n"])));
46
+ var Title = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: -webkit-box;\n width: 100%;\n max-width: 100%;\n max-height: 36px;\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n color: #fff;\n background: transparent;\n font-family: 'SFUIText-Medium';\n font-size: 13px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: normal;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-align: left;\n cursor: pointer;\n\n &:hover {\n color: ", ";\n }\n"])), function (_ref5) {
47
47
  var theme = _ref5.theme;
48
48
  return getSearchAccent(theme);
49
49
  });
50
- var OpenPageButton = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 3px;\n border: 0;\n background: transparent;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 160ms ease;\n"])));
51
- var Subtitle = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 2px 0 0;\n color: #5b7088;\n font-family: 'SFUIText-Medium';\n font-size: 10px;\n font-style: normal;\n font-weight: 400;\n line-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
52
- var PageSearchCard = function PageSearchCard(_ref6) {
53
- var thumbnail = _ref6.thumbnail,
54
- show_name = _ref6.show_name,
55
- asset_language = _ref6.asset_language,
56
- asset_type = _ref6.asset_type,
57
- content_type = _ref6.content_type,
58
- channel_name = _ref6.channel_name,
59
- _ref6$title = _ref6.title,
60
- title = _ref6$title === void 0 ? 'Ghazi Attack' : _ref6$title,
61
- _ref6$subtitle = _ref6.subtitle,
62
- subtitle = _ref6$subtitle === void 0 ? 'Star Plus' : _ref6$subtitle,
63
- _ref6$tag = _ref6.tag,
64
- tag = _ref6$tag === void 0 ? 'MOVIE' : _ref6$tag,
65
- _ref6$theme = _ref6.theme,
66
- theme = _ref6$theme === void 0 ? 'dark' : _ref6$theme,
67
- _ref6$width = _ref6.width,
68
- width = _ref6$width === void 0 ? '220px' : _ref6$width,
69
- _ref6$height = _ref6.height,
70
- height = _ref6$height === void 0 ? '292px' : _ref6$height,
71
- onClick = _ref6.onClick,
72
- onCardClick = _ref6.onCardClick;
50
+ var OpenPageButton = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 50%;\n right: 0;\n z-index: 3;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n width: 36px;\n height: 36px;\n padding: 0 10px;\n overflow: hidden;\n border: 0;\n border-radius: 999px;\n background: ", ";\n color: #0c141d;\n font-family: 'SFUIText-Medium';\n font-size: 13px;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transform: translateY(-50%) scale(0.88);\n transform-origin: right center;\n transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1),\n opacity 180ms ease,\n transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease;\n\n &:hover,\n &:focus-visible {\n width: 128px;\n box-shadow: 0 6px 18px\n ", ";\n outline: none;\n }\n\n &:hover .open-page-label,\n &:focus-visible .open-page-label {\n max-width: 76px;\n opacity: 1;\n transform: translateX(0);\n }\n"])), function (_ref6) {
51
+ var theme = _ref6.theme;
52
+ return getSearchAccent(theme);
53
+ }, function (_ref7) {
54
+ var theme = _ref7.theme;
55
+ return "".concat(getSearchAccent(theme), "4d");
56
+ });
57
+ var OpenPageLabel = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n max-width: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateX(8px);\n transition: max-width 260ms cubic-bezier(0.16, 1, 0.3, 1),\n opacity 160ms ease 50ms,\n transform 220ms cubic-bezier(0.16, 1, 0.3, 1);\n"])));
58
+ var Subtitle = _styledComponents["default"].p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 2px 0 0;\n color: #5b7088;\n font-family: 'SFUIText-Medium';\n font-size: 10px;\n font-style: normal;\n font-weight: 400;\n line-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
59
+ var PageSearchCard = function PageSearchCard(_ref8) {
60
+ var thumbnail = _ref8.thumbnail,
61
+ show_name = _ref8.show_name,
62
+ asset_language = _ref8.asset_language,
63
+ asset_type = _ref8.asset_type,
64
+ content_type = _ref8.content_type,
65
+ channel_name = _ref8.channel_name,
66
+ _ref8$title = _ref8.title,
67
+ title = _ref8$title === void 0 ? 'Ghazi Attack' : _ref8$title,
68
+ _ref8$subtitle = _ref8.subtitle,
69
+ subtitle = _ref8$subtitle === void 0 ? 'Star Plus' : _ref8$subtitle,
70
+ _ref8$tag = _ref8.tag,
71
+ tag = _ref8$tag === void 0 ? 'MOVIE' : _ref8$tag,
72
+ _ref8$theme = _ref8.theme,
73
+ theme = _ref8$theme === void 0 ? 'dark' : _ref8$theme,
74
+ _ref8$width = _ref8.width,
75
+ width = _ref8$width === void 0 ? '220px' : _ref8$width,
76
+ _ref8$height = _ref8.height,
77
+ height = _ref8$height === void 0 ? '292px' : _ref8$height,
78
+ onClick = _ref8.onClick,
79
+ onCardClick = _ref8.onCardClick;
73
80
  var effectiveTitle = show_name || title;
74
81
  var effectiveTag = content_type || asset_type || tag;
75
82
  var normalizedAssetType = String(effectiveTag).toLowerCase();
@@ -83,15 +90,10 @@ var PageSearchCard = function PageSearchCard(_ref6) {
83
90
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
84
91
  hasImageError = _useState2[0],
85
92
  setHasImageError = _useState2[1];
86
- var _useState3 = (0, _react.useState)(false),
87
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
88
- isOpenIconHovered = _useState4[0],
89
- setIsOpenIconHovered = _useState4[1];
90
93
  (0, _react.useEffect)(function () {
91
94
  setHasImageError(!thumbnail);
92
95
  }, [thumbnail]);
93
96
  var imageSource = hasImageError ? FALLBACK_IMAGE : thumbnail;
94
- var accentColor = getSearchAccent(theme);
95
97
  var handleNavigate = function handleNavigate(event) {
96
98
  event.stopPropagation();
97
99
  if (onClick) onClick(event);
@@ -136,21 +138,18 @@ var PageSearchCard = function PageSearchCard(_ref6) {
136
138
  onClick: handleNavigate
137
139
  }, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null), onClick ? /*#__PURE__*/_react["default"].createElement(OpenPageButton, {
138
140
  className: "show-movie-open-page",
141
+ theme: theme,
139
142
  type: "button",
140
143
  title: "Open Page",
141
144
  "aria-label": "Open ".concat(effectiveTitle, " page"),
142
- onMouseEnter: function onMouseEnter() {
143
- return setIsOpenIconHovered(true);
144
- },
145
- onMouseLeave: function onMouseLeave() {
146
- return setIsOpenIconHovered(false);
147
- },
148
145
  onClick: handleNavigate
149
- }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
146
+ }, /*#__PURE__*/_react["default"].createElement(OpenPageLabel, {
147
+ className: "open-page-label"
148
+ }, "Open Page"), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
150
149
  name: "files-associated",
151
150
  width: 16,
152
151
  height: 16,
153
- color: isOpenIconHovered ? accentColor : '#AFB2BA'
152
+ color: "#0C141D"
154
153
  })) : null));
155
154
  };
156
155
  PageSearchCard.propTypes = {
package/molecules/filter/filter.js CHANGED
@@ -31,7 +31,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
31
31
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
32
32
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
33
33
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
34
- var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ", ";\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ", ";\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: 'SFUIText-Medium';\n justify-content: flex-end;\n width: ", ";\n }\n\n .filter-message {\n font-size: 12px;\n font-family: 'SFUIText-Regular';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ", ";\n }\n &.checked {\n background: ", ";\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ", ";\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: 'SFUIText-Medium';\n padding: 15px;\n right: 0;\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ", ";\n }\n }\n\n .calendar {\n right: -7px;\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ", ";\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n"])), function (_ref) {
34
+ var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ", ";\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ", ";\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: 'SFUIText-Medium';\n justify-content: flex-end;\n width: ", ";\n }\n\n .filter-message {\n font-size: 12px;\n font-family: 'SFUIText-Regular';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ", ";\n }\n &.checked {\n background: ", ";\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ", ";\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: 'SFUIText-Medium';\n padding: 15px;\n right: 0;\n ", "\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ", ";\n }\n }\n\n .calendar {\n right: -7px;\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ", ";\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n"])), function (_ref) {
35
35
  var isMenuOpen = _ref.isMenuOpen;
36
36
  return isMenuOpen ? "95" : "1";
37
37
  }, function (props) {
@@ -49,6 +49,9 @@ var StyledFilterCompoment = _styledComponents["default"].div(_templateObject ||
49
49
  return _tokens.colors[props.theme].filter.lightthemeColor;
50
50
  }, function (props) {
51
51
  return _tokens.colors[props.theme].filter.lightthemeColor;
52
+ }, function (_ref3) {
53
+ var dashboardLayout = _ref3.dashboardLayout;
54
+ return dashboardLayout ? "\n height: 80vh;\n max-height: 80vh;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n > .filter-group {\n flex-shrink: 0;\n }\n\n > .filter-action-footer {\n position: sticky;\n bottom: -15px;\n z-index: 3;\n flex-shrink: 0;\n margin: auto -15px -15px !important;\n padding: 12px 15px 15px;\n justify-content: center;\n background: #182738;\n border-top: 1px solid #303f51;\n }\n " : "";
52
55
  }, function (props) {
53
56
  return _tokens.colors[props.theme].filter.lightthemeColor;
54
57
  }, function (props) {
@@ -62,8 +65,8 @@ var ResetBtn = (0, _styledComponents["default"])(_button["default"])(_templateOb
62
65
  }, function (props) {
63
66
  return _tokens.colors[props.theme].filter.themeColor;
64
67
  });
65
- var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ", ";\n display: block;\n"])), function (_ref3) {
66
- var isMenuOpen = _ref3.isMenuOpen;
68
+ var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ", ";\n display: block;\n"])), function (_ref4) {
69
+ var isMenuOpen = _ref4.isMenuOpen;
67
70
  return isMenuOpen ? "94" : "0";
68
71
  });
69
72
  var UserIdDropdown = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border-bottom: 1px solid #999999;\n\n .tags {\n padding-bottom: 2px;\n }\n input:focus {\n outline: none;\n }\n\n .input-filter {\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n border: none;\n color: #999999;\n }\n .user-dropdown {\n background-color: rgb(18, 29, 41);\n margin-top: 5px;\n border: 1px solid rgb(153, 153, 153);\n max-height: 200px;\n overflow: auto;\n position: absolute;\n width: 92%;\n z-index: 2;\n cursor: pointer;\n }\n\n .dropdown-options {\n font-family: SFUIText-Regular;\n font-size: 13px;\n line-height: normal;\n color: rgb(204, 204, 204);\n padding: 7px;\n :hover {\n background-color: ", ";\n color: rgb(255, 255, 255);\n }\n &.active {\n background-color: ", ";\n color: rgb(255, 255, 255);\n :hover {\n background-color: rgb(18, 29, 41);\n color: rgb(204, 204, 204);\n }\n }\n }\n"])), function (props) {
@@ -422,6 +425,7 @@ var Filter = /*#__PURE__*/function (_Component) {
422
425
  }), /*#__PURE__*/_react["default"].createElement(StyledFilterCompoment, {
423
426
  theme: _this.props.theme,
424
427
  isMenuOpen: isMenuOpen,
428
+ dashboardLayout: _this.props.dashboardLayout,
425
429
  showSelectedFiltersAsChip: showSelectedFiltersAsChip
426
430
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
427
431
  role: "presentation",
@@ -617,6 +621,7 @@ var Filter = /*#__PURE__*/function (_Component) {
617
621
  }
618
622
  })));
619
623
  }) : null, /*#__PURE__*/_react["default"].createElement("div", {
624
+ className: "filter-action-footer",
620
625
  style: {
621
626
  margin: "15px 0px 0px",
622
627
  textAlign: "center",
@@ -722,12 +727,14 @@ Filter.propTypes = {
722
727
  width: _propTypes["default"].string,
723
728
  showSelectedFiltersAsChip: _propTypes["default"].bool,
724
729
  prevDateRequired: _propTypes["default"].bool,
725
- hideFutureDates: _propTypes["default"].bool
730
+ hideFutureDates: _propTypes["default"].bool,
731
+ dashboardLayout: _propTypes["default"].bool
726
732
  };
727
733
  Filter.defaultProps = {
728
734
  width: "360px",
729
735
  theme: "dark",
730
736
  prevDateRequired: false,
731
- hideFutureDates: false
737
+ hideFutureDates: false,
738
+ dashboardLayout: false
732
739
  };
733
740
  var _default = exports["default"] = Filter;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.3.3",
3
+ "version": "9.3.4",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.3.3",
10
+ "@desynova-digital/tokens": "9.3.4",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },