@scaleflex/widget-explorer 0.0.1

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

@@ -0,0 +1,235 @@
+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;