@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/Filters/Filters.styled.js

@@ -1,235 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled, { css } from 'styled-components';
-import { Folder, InfoOutline } from '@scaleflex/icons';
-import { Skeleton as SfxSkeleton, Button as SfxButton, Search as SfxSearch, Label, TooltipV2 as SfxTooltipV2 } from '@scaleflex/ui/core';
-import { PC, FormGroup as _FormGroup, FV, PSH } from '@scaleflex/widget-common';
-import MetaDataFieldNumericType from '@scaleflex/widget-common/lib/MetaData/MetaDataFieldTypes/MetaDataFieldNumericType';
-var TooltipV2 = styled(SfxTooltipV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: auto;\n\n  svg {\n    flex-shrink: 0;\n  }\n"])));
-var FiltersWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 12px;\n  padding: 0 24px 8px;\n  flex-wrap: wrap;\n  row-gap: 8px;\n"])));
-var SelectedItemsWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (_ref) {
-  var withoutBottomMargin = _ref.withoutBottomMargin;
-  return withoutBottomMargin ? '0' : '24px';
-});
-var FilterOption = styled.div(function (_ref2) {
-  var _ref2$theme = _ref2.theme,
-    palette = _ref2$theme.palette,
-    typography = _ref2$theme.typography,
-    isSelected = _ref2.isSelected,
-    hidden = _ref2.hidden,
-    _ref2$$width = _ref2.$width,
-    $width = _ref2$$width === void 0 ? '100%' : _ref2$$width,
-    disabled = _ref2.disabled;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  display: ", ";\n  width: ", ";\n  align-items: flex-start;\n  cursor: pointer;\n  height: 40px;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  padding: 12px 16px;\n  column-gap: 12px;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n\n  }\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n    color: ", ";\n  }\n"])), typography.font[FV.LabelMedium], hidden ? 'none' : 'flex', Number.isNaN($width) ? $width : "".concat($width, "px"), palette[PC.BordersSecondary], disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    opacity: 0.3;\n  "]))), palette[PC.BackgroundHover], palette[PC.BordersSecondary], isSelected && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-color: ", ";\n    ", "\n  "])), palette[PC.BackgroundActive], palette[PC.BordersItem], disabled && 'opacity: 0.7;'), palette[PC.IconsPrimary]);
-});
-var FilterOptionLabel = styled.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref3) {
-  var palette = _ref3.theme.palette;
-  return palette[PC.TextPrimary];
-}, function (_ref4) {
-  var typography = _ref4.theme.typography;
-  return typography.font[FV.LabelMedium];
-});
-var MetadataPrefixLabel = styled(Label)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 52px;\n  height: 32px;\n"])));
-var SkeletonRowWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var SkeletonItem = styled(SfxSkeleton)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 83px;\n  height: 32px;\n  border-radius: 4px;\n"])));
-var FilterWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
-  var maxWidth = _ref5.maxWidth;
-  return maxWidth && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-width: ", "px;"])), maxWidth);
-});
-var FilterFooter = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-bottom: 0;\n  justify-content: flex-end;\n  padding: ", ";\n  column-gap: 12px;\n  background-color: ", ";\n  ", ";\n\n  ", "\n\n  div:empty {\n    display: none;\n  }\n"])), function (_ref6) {
-  var withoutPadding = _ref6.withoutPadding;
-  return withoutPadding ? '0' : '16px';
-}, function (_ref7) {
-  var palette = _ref7.theme.palette;
-  return palette[PC.BackgroundStateless];
-}, function (_ref8) {
-  var hasInfoText = _ref8.hasInfoText;
-  return hasInfoText && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["justify-content: space-between;"])));
-}, function (_ref9) {
-  var withTopBorder = _ref9.withTopBorder;
-  return withTopBorder && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    border-top: 1px solid ", ";\n  "])), function (_ref10) {
-    var palette = _ref10.theme.palette;
-    return palette[PC.BordersSecondary];
-  });
-});
-var FilterFooterInfoWrapper = styled.div(function (_ref11) {
-  var _ref11$theme = _ref11.theme,
-    palette = _ref11$theme.palette,
-    typography = _ref11$theme.typography;
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: ", ";\n\n  > svg {\n    color: ", ";\n  }\n\n  .SfxButton-Label {\n    ", "\n    color:  ", ";\n    font-size: 13px;\n    line-height: inherit;\n    margin-left: 3px;\n    text-decoration: underline;\n  }\n"])), typography.font[FV.TextSmall], palette[PC.TextInfo], palette[PC.Info], typography.font[FV.LinkSmallUpEmphasis], palette[PC.TextInfo]);
-});
-var Button = styled(SfxButton)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 100ms ease-out;\n  width: ", ";\n  ", ";\n"])), function (_ref12) {
-  var _ref12$width = _ref12.width,
-    width = _ref12$width === void 0 ? 100 : _ref12$width;
-  return "".concat(width, "px");
-}, function (_ref13) {
-  var disabled = _ref13.disabled;
-  return disabled && 'pointer-events: none';
-});
-var NumberInput = styled(MetaDataFieldNumericType)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  width: 120px;\n"])));
-var FiltersLabel = styled.p(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  ", ";\n"])), function (_ref14) {
-  var typography = _ref14.theme.typography;
-  return typography.font[FV.LabelMedium];
-});
-var LabelWrapper = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  flex: 1;\n"])));
-var FormGroup = styled(_FormGroup)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 8px;\n"])));
-var Filter = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: min(500px, 60vh);\n  padding: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (_ref15) {
-  var withPadding = _ref15.withPadding;
-  return withPadding ? '16px' : '0';
-}, function (_ref16) {
-  var maxHeight = _ref16.maxHeight;
-  return maxHeight && "max-height: min(".concat(maxHeight, "px, 60vh);");
-}, function (_ref17) {
-  var $width = _ref17.$width;
-  return $width && "width: ".concat($width, "px;");
-}, function (_ref18) {
-  var minHeight = _ref18.minHeight;
-  return minHeight && "min-height: ".concat(minHeight, "px;");
-});
-var FilterHeader = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  column-gap: 12px;\n  padding: 16px;\n"])));
-var FilterBody = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n  flex-grow: 1;\n  display: ", ";\n  padding: 16px;\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  &:has([data-placeholder]) {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), function (_ref19) {
-  var _ref19$display = _ref19.display,
-    display = _ref19$display === void 0 ? 'block' : _ref19$display;
-  return display;
-}, function (_ref20) {
-  var withoutTopPadding = _ref20.withoutTopPadding;
-  return withoutTopPadding ? 0 : '16px';
-}, function (_ref21) {
-  var withoutBottomPadding = _ref21.withoutBottomPadding;
-  return withoutBottomPadding ? 0 : '16px';
-});
-var ImageFilterBody = styled(FilterBody)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  gap: 24px;\n"])));
-var ColorsWrapper = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  row-gap: 56px;\n  max-width: 240px;\n"])));
-var FilterLabel = styled.div(function (_ref22) {
-  var _ref22$theme = _ref22.theme,
-    palette = _ref22$theme.palette,
-    typography = _ref22$theme.typography,
-    hidden = _ref22.hidden,
-    _ref22$marginBottom = _ref22.marginBottom,
-    marginBottom = _ref22$marginBottom === void 0 ? 8 : _ref22$marginBottom;
-  return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  ", ";\n  display: ", ";\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  margin-bottom: ", ";\n"])), typography.font[FV.LabelMediumEmphasis], hidden ? 'none' : 'flex', palette[PC.TextPrimary], "".concat(marginBottom, "px"));
-});
-var InfoIcon = styled(InfoOutline)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: 6px;\n"])), function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.palette[PC.IconsSecondary];
-});
-var FilterOptions = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: ", ";\n  grid-template-columns: ", ";\n  grid-auto-rows: max-content;\n  gap: ", ";\n  max-height: ", ";\n  width: 100%;\n  transition: all 100ms ease-out;\n  user-select: none;\n  margin-bottom:  ", ";\n"])), function (_ref24) {
-  var hidden = _ref24.hidden;
-  return hidden ? 'none' : 'grid';
-}, function (_ref25) {
-  var _ref25$col = _ref25.col,
-    col = _ref25$col === void 0 ? 2 : _ref25$col;
-  return "repeat(".concat(col, ", 1fr)");
-}, function (_ref26) {
-  var _ref26$gap = _ref26.gap,
-    gap = _ref26$gap === void 0 ? 8 : _ref26$gap;
-  return "".concat(gap, "px");
-}, function (_ref27) {
-  var maxHeight = _ref27.maxHeight;
-  return Number.isFinite(maxHeight) ? "".concat(maxHeight, "px") : 'initial';
-}, function (_ref28) {
-  var _ref28$marginBottom = _ref28.marginBottom,
-    marginBottom = _ref28$marginBottom === void 0 ? 0 : _ref28$marginBottom;
-  return "".concat(marginBottom, "px");
-});
-
-// Folder filter
-var FolderInfoWrapper = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var FolderIcon = styled(Folder)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  color: ", " !important;\n"])), function (_ref29) {
-  var theme = _ref29.theme;
-  return theme.palette[PC.IconsSecondary];
-});
-var FolderName = styled.p(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  max-width: 320px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", ";\n"])), function (_ref30) {
-  var theme = _ref30.theme;
-  return theme.palette[PC.TextPrimary];
-}, function (_ref31) {
-  var typography = _ref31.theme.typography;
-  return typography.font[FV.LabelMediumEmphasis];
-});
-var FolderPath = styled.p(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", ";\n"])), function (_ref32) {
-  var theme = _ref32.theme;
-  return theme.palette[PC.TextSecondary];
-}, function (_ref33) {
-  var typography = _ref33.theme.typography;
-  return typography.font[FV.LabelSmall];
-});
-
-// Placeholder styles
-var PlaceholderWrapper = styled.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  height: calc(100% - 16px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  ", ";\n  flex-grow: 1;\n"])), function (_ref34) {
-  var theme = _ref34.theme;
-  return theme.palette[PC.TextSecondary];
-}, function (_ref35) {
-  var paddingBottom = _ref35.paddingBottom;
-  return paddingBottom && "padding-bottom: ".concat(paddingBottom, "px");
-});
-var PlaceholderIconWrapper = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  svg {\n    width: 150px;\n    height: 60px;\n  }\n"])), function (_ref36) {
-  var theme = _ref36.theme;
-  return theme.palette[PC.IconsPlaceholder];
-});
-var PlaceholderTitle = styled.p(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin: 16px 0 4px 0;\n  ", ";\n"])), function (_ref37) {
-  var typography = _ref37.theme.typography,
-    hasDesciption = _ref37.hasDesciption;
-  return hasDesciption ? typography.font[FV.LabelLargeEmphasis] : typography.font[FV.LabelLarge];
-});
-var PlaceholderDesc = styled.p(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n"])), function (_ref38) {
-  var typography = _ref38.theme.typography;
-  return typography.font[FV.TextLarge];
-});
-var ImageMainOperationsWrapper = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n"])));
-var LabelChipItem = styled.span(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var LabelChipItemName = styled.span(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-var CustomDateFieldsWrapper = styled.div(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n  display: grid;\n  grid-template-columns: repeat(2, calc(50% - 8px / 2)); // 12px for gap\n  grid-template-rows: auto;\n\n  .SfxCrossButton-root {\n    display: none !important;\n  }\n\n  .SfxDate-picker-placeholder,\n  .SfxDate-picker-input,\n  .SfxDate-picker-root {\n    width: 100%;\n\n    .SfxInput-Base {\n      font-size: 12px;\n      line-height: 12px;\n    }\n\n    .SfxInput-ClearIcon {\n      display: none;\n    }\n\n    .SfxInputGroup-root {\n      position: relative;\n    }\n  }\n\n  .SfxIconButton-root {\n    width: auto;\n  }\n\n  .SfxDate-picker-placeholder {\n    top: 50%;\n    left: 12px;\n    transform: translateY(-50%);\n    width: calc(100% - (2 * 24px)); // 18px gap, 24px input width\n    height: fit-content;\n    font-size: 14px;\n  }\n"])));
-var OptionsPopupWrapper = styled(Filter)(function (_ref39) {
-  var _ref39$theme = _ref39.theme,
-    palette = _ref39$theme.palette,
-    shadows = _ref39$theme.shadows;
-  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: ", ";\n  max-height: 350px;\n  border-radius: 4px;\n  padding: 16px 0;\n"])), palette[PC.BackgroundStateless], shadows[PSH.ShadowLg]);
-});
-var OptionsGroupWrapper = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  display: grid;\n  grid-template-columns: ", ";\n  grid-auto-rows: auto;\n  gap: 8px;\n  flex: 1;\n  overflow: hidden auto;\n"])), function (_ref40) {
-  var _ref40$col = _ref40.col,
-    col = _ref40$col === void 0 ? 2 : _ref40$col;
-  return "repeat(".concat(col, ", ").concat(100 / col, "%)");
-});
-var Search = styled(SfxSearch)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n  z-index: 1;\n"])));
-var Styled = {
-  FiltersWrapper: FiltersWrapper,
-  Filter: Filter,
-  FilterHeader: FilterHeader,
-  FilterOption: FilterOption,
-  FolderInfoWrapper: FolderInfoWrapper,
-  FolderName: FolderName,
-  FolderPath: FolderPath,
-  FilterOptionLabel: FilterOptionLabel,
-  SkeletonRowWrapper: SkeletonRowWrapper,
-  MetadataPrefixLabel: MetadataPrefixLabel,
-  SkeletonItem: SkeletonItem,
-  FilterWrapper: FilterWrapper,
-  FilterFooter: FilterFooter,
-  Button: Button,
-  NumberInput: NumberInput,
-  FiltersLabel: FiltersLabel,
-  LabelWrapper: LabelWrapper,
-  FormGroup: FormGroup,
-  FilterBody: FilterBody,
-  FilterLabel: FilterLabel,
-  FilterFooterInfoWrapper: FilterFooterInfoWrapper,
-  TooltipV2: TooltipV2,
-  InfoIcon: InfoIcon,
-  FilterOptions: FilterOptions,
-  FolderIcon: FolderIcon,
-  PlaceholderWrapper: PlaceholderWrapper,
-  PlaceholderIconWrapper: PlaceholderIconWrapper,
-  PlaceholderTitle: PlaceholderTitle,
-  PlaceholderDesc: PlaceholderDesc,
-  ImageMainOperationsWrapper: ImageMainOperationsWrapper,
-  LabelChipItem: LabelChipItem,
-  LabelChipItemName: LabelChipItemName,
-  CustomDateFieldsWrapper: CustomDateFieldsWrapper,
-  SelectedItemsWrapper: SelectedItemsWrapper,
-  ColorsWrapper: ColorsWrapper,
-  ImageFilterBody: ImageFilterBody,
-  OptionsPopupWrapper: OptionsPopupWrapper,
-  OptionsGroupWrapper: OptionsGroupWrapper,
-  Search: Search
-};
-export default Styled;