scorer-ui-kit 1.7.26 → 1.7.28

package/dist/Form/atoms/SliderInput.d.ts

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from 'react';
 import { IFeedbackColor } from '../../index';
-export declare type IMartAlignment = 'left' | 'center' | 'right';
+export declare type IMarkAlignment = 'left' | 'center' | 'right';
 export interface ISliderMark {
     value: number;
     label?: string;
@@ -14,8 +14,10 @@ interface ISliderOwnProps {
     value?: number;
     thumbColor?: IFeedbackColor;
     onlyMarkSelect?: boolean;
+    showValue?: boolean;
     inputCallback?: (value: number) => void;
     onChangeCallback?: (value: number) => void;
+    allMarkCentered?: boolean;
 }
 export declare type ISlider = ISliderOwnProps & InputHTMLAttributes<HTMLInputElement>;
 declare const SliderInput: React.FC<ISlider>;

package/dist/Form/molecules/PercentageSlider.d.ts

@@ -6,9 +6,11 @@ interface IPercentageSliderProps {
     marks?: ISliderMark[];
     defaultValue?: number;
     value?: number;
+    showValue?: boolean;
     inputCallback?: (value: number) => void;
     updateThumbColor?: (value: number) => IFeedbackColor;
     updateTitle?: (value: number) => string;
+    allMarkCentered?: boolean;
 }
 declare type IPercentageSlider = IPercentageSliderProps & InputHTMLAttributes<HTMLInputElement>;
 declare const PercentageSlider: React.FC<IPercentageSlider>;

package/dist/index.js

@@ -2991,7 +2991,7 @@ var getFormattedTime = function getFormattedTime(value) {
   }
 };
 
-var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback"];
+var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
 
 var _templateObject$i, _templateObject2$h, _templateObject3$f, _templateObject4$e, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$9, _templateObject9$9, _templateObject10$8, _templateObject11$5, _templateObject12$2;
 var ThumbDiameter = 16;
@@ -3090,7 +3090,7 @@ var getMarkAlignment = function getMarkAlignment(value, min, max) {
   return 'center';
 };
 
-var renderMarks = function renderMarks(markList, min, max, listTag) {
+var renderMarks = function renderMarks(markList, min, max, listTag, allMarkCentered) {
   var listOptions = [];
   var marksElements = markList.map(function (_ref11, index) {
     var value = _ref11.value,
@@ -3106,7 +3106,7 @@ var renderMarks = function renderMarks(markList, min, max, listTag) {
       leftValue: left
     }), React__default.createElement(MarkLabel, {
       leftValue: left,
-      alignment: getMarkAlignment(value, min, max)
+      alignment: allMarkCentered ? 'center' : getMarkAlignment(value, min, max)
     }, label));
   });
   return React__default.createElement(React.Fragment, null, marksElements, React__default.createElement("datalist", {
@@ -3131,6 +3131,8 @@ var SliderInput = function SliderInput(_ref12) {
       inputCallback = _ref12$inputCallback === void 0 ? function () {} : _ref12$inputCallback,
       _ref12$onChangeCallba = _ref12.onChangeCallback,
       onChangeCallback = _ref12$onChangeCallba === void 0 ? function () {} : _ref12$onChangeCallba,
+      _ref12$allMarkCentere = _ref12.allMarkCentered,
+      allMarkCentered = _ref12$allMarkCentere === void 0 ? false : _ref12$allMarkCentere,
       props = _objectWithoutPropertiesLoose(_ref12, _excluded$9);
 
   var maxValid = getValidMax(max, min);
@@ -3204,7 +3206,7 @@ var SliderInput = function SliderInput(_ref12) {
   }, [defaultValue, maxValid, minValid]);
   return React__default.createElement(SliderWrapper, {
     disabled: disabled
-  }, React__default.createElement(Rail, null), React__default.createElement(ThumbWrapper, null, marks && renderMarks(marks, minValid, maxValid, "sliderList-" + minValid + "-" + maxValid), isGhostActive && onlyMarkSelect ? React__default.createElement(GhostThumb, {
+  }, React__default.createElement(Rail, null), React__default.createElement(ThumbWrapper, null, marks && renderMarks(marks, minValid, maxValid, "sliderList-" + minValid + "-" + maxValid, allMarkCentered), isGhostActive && onlyMarkSelect ? React__default.createElement(GhostThumb, {
     "data-value": selectedValue,
     leftValue: ghostThumbValue,
     "data-percentage": ghostThumbValue,
@@ -3339,13 +3341,16 @@ var DurationSlider = function DurationSlider(_ref3) {
   })));
 };
 
-var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle"];
+var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
 
 var _templateObject$l, _templateObject2$k, _templateObject3$i;
 var Container$b = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
-var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  padding: 0 6px;\n"])));
-var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
+var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  ", ";\n"])), function (_ref) {
+  var allMarkCentered = _ref.allMarkCentered;
+  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
+});
+var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.fontFamily.data;
 });
 
@@ -3373,13 +3378,15 @@ var getTitleLevel = function getTitleLevel(value) {
   return 'Safe Level';
 };
 
-var PercentageSlider = function PercentageSlider(_ref2) {
-  var _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? 0 : _ref2$defaultValue,
-      inputCallback = _ref2.inputCallback,
-      updateThumbColor = _ref2.updateThumbColor,
-      updateTitle = _ref2.updateTitle,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+var PercentageSlider = function PercentageSlider(_ref3) {
+  var _ref3$defaultValue = _ref3.defaultValue,
+      defaultValue = _ref3$defaultValue === void 0 ? 0 : _ref3$defaultValue,
+      inputCallback = _ref3.inputCallback,
+      updateThumbColor = _ref3.updateThumbColor,
+      updateTitle = _ref3.updateTitle,
+      showValue = _ref3.showValue,
+      allMarkCentered = _ref3.allMarkCentered,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$c);
 
   var _useState = React.useState(defaultValue),
       selectedValue = _useState[0],
@@ -3392,10 +3399,12 @@ var PercentageSlider = function PercentageSlider(_ref2) {
 
     setSelectedValue(value);
   }, [inputCallback]);
-  return React__default.createElement(Container$b, null, React__default.createElement(Headers$1, null, React__default.createElement(Label, {
+  return React__default.createElement(Container$b, null, React__default.createElement(Headers$1, {
+    allMarkCentered: allMarkCentered
+  }, React__default.createElement(Label, {
     htmlFor: 'percentage-slider',
     labelText: updateTitle ? updateTitle(selectedValue) : getTitleLevel(selectedValue)
-  }), React__default.createElement(ValueTitle$1, {
+  }), showValue && React__default.createElement(ValueTitle$1, {
     htmlFor: 'percentage-slider',
     labelText: selectedValue + "%"
   })), React__default.createElement(SliderInput, Object.assign({}, props, {
@@ -3403,8 +3412,10 @@ var PercentageSlider = function PercentageSlider(_ref2) {
     max: 100,
     min: 0,
     defaultValue: defaultValue,
+    showValue: showValue,
     onChangeCallback: handleSelectedValue,
-    thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue)
+    thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue),
+    allMarkCentered: allMarkCentered
   })));
 };
 
@@ -5470,7 +5481,7 @@ var TopLine$1 = styled__default.div(_templateObject2$A || (_templateObject2$A =
 });
 var InnerBox = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n  border-right: solid 1px hsl(207, 16%, 86%);\n  border-bottom: solid 1px hsl(207, 16%, 86%);\n  border-left: solid 1px hsl(207, 16%, 86%);\n  background-color: hsl(200, 23%, 97%);\n"])));
 var StyledFilterOption = styled__default(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
-var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  min-height: 40px;\n  position: relative;\n  overflow-y: auto;\n  margin-right: 2px;\n  \n  /* Firefox supports the scrollbar-width property */\n  scrollbar-width: thin;\n\n  /* Customize the scrollbar width for Chrome and Safari */\n  ::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background: #44444499;\n  }\n\n  ", " {\n    height: 35px;\n    padding-left: 10px;\n  }\n"])), function (_ref2) {
+var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  min-height: 40px;\n  position: relative;\n  overflow-y: auto;\n  margin-right: 2px;\n\n  ", " {\n    height: 35px;\n    padding-left: 10px;\n  }\n"])), function (_ref2) {
   var moreItem = _ref2.moreItem;
   return moreItem ? '168px' : '175px';
 }, StyledFilterOption);
@@ -12878,7 +12889,7 @@ var LabelNotes = styled__default.div(_templateObject4$_ || (_templateObject4$_ =
 var TitleContainer = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap:6px;\n  flex-direction: row;\n  align-items: center;\n  margin-left: 10px;\n  margin: 3px 0 5px 10px;\n"])));
 var Container$U = styled__default.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 var TitleBox = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var IconBox = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n  padding: 1px 5px 0 0;\n"])));
+var IconBox = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n  padding: 1px 5px 0 0;\n  opacity: 0;\n  ", ":hover & {\n    opacity: 1;\n    cursor: pointer;\n  }\n"])), Container$U);
 var CopyTextBox = styled__default.pre(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n  padding: 5px;\n  font-size: 10px;\n  line-height: 1.2;\n  box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n  border: 1px solid hsl(195deg 5% 60% / 72%);\n  background-color: #f8f9fa;\n  border-radius: 5px;\n  opacity: 0.76;\n  font-weight: 500;\n  color: #575757;\n  position: absolute; \n  max-width: 170px;\n  white-space: pre-wrap;\n  font-family: ", ";\n  right:10px;\n  margin-top: -23px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.fontFamily.data;