@mailstep/design-system 0.6.85 → 0.6.86-beta-jja.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.85",
+  "version": "0.6.86-beta-jja.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -40,7 +40,7 @@ import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 import { Settings2 } from '../../Elements/Icon/icons/Settings2';
 var StyledCommonGrid = function (props) {
-    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _b = useState(false), displayManageColumnButton = _b[0], setDisplayManageColumnButton = _b[1];
     var _c = useGetGridHeight(), gridHeight = _c.gridHeight, gridRef = _c.gridRef, paginationRef = _c.paginationRef;
@@ -62,6 +62,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _e.columnsConfigValues, setColumnsConfigOptions = _e.setColumnsConfigOptions, onConfirmForm = _e.onConfirmForm, resetColumnConfig = _e.resetColumnConfig, handleDragEnd = _e.handleDragEnd, onCloseForm = _e.onCloseForm, displayColumnsDefinitions = _e.displayColumnsDefinitions, manageColumnsFormDefinitions = _e.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton })), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton })), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts

@@ -1,9 +1,8 @@
-import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
 import { Dispatch } from 'react';
+import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
 export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
-    eshopSelect: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     quickFilter?: CommonGridProps['quickFilter'];
@@ -11,5 +10,5 @@ type Props = {
     filters?: FiltersConfig;
     setDisplayManageColumnButton: Dispatch<React.SetStateAction<boolean>>;
 };
-declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, setDisplayManageColumnButton, }: Props) => JSX.Element;
+declare const ControlButtons: ({ extraControlButtons, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, setDisplayManageColumnButton }: Props) => JSX.Element;
 export default ControlButtons;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -3,34 +3,34 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { x } from '@xstyled/styled-components';
-import { Trans } from '@lingui/react';
-import ExtraControlButtons from '../ExtraControlButtons';
-import { ExtraControlButtonPosition, } from '../../types';
+import { useEffect } from 'react';
 import Button from '../../../../Elements/Button/Button';
-import { i18n } from '@lingui/core';
-import QuickFilter from '../QuickFilter';
 import useQuickFilter from '../../hooks/useQuickFilter';
-import { useEffect } from 'react';
-export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
+import { ExtraControlButtonPosition } from '../../types';
+import ExtraControlButtons from '../ExtraControlButtons';
+import QuickFilter from '../QuickFilter';
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
+import styled, { x } from '@xstyled/styled-components';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
 var ControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
     var _c = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         quickFilter: quickFilter,
         displayColumnsDefinitions: displayColumnsDefinitions,
-        filters: filters,
+        filters: filters
     }), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onResetFilters = _c.onResetFilters, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
     useEffect(function () {
         setDisplayManageColumnButton(!isMobileInputView);
     }, [isMobileInputView, setDisplayManageColumnButton]);
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(Row, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
-                    id: 'controlButtons.searchPlaceholder',
-                    message: "Search ".concat(translatedValue, " ..."),
-                    values: { translatedValue: translatedValue },
-                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+    return (_jsxs(Row, { children: [_jsxs("div", { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+                            id: 'controlButtons.searchPlaceholder',
+                            message: "Search ".concat(translatedValue, " ..."),
+                            values: { translatedValue: translatedValue }
+                        }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight })] }));
 };
 export default ControlButtons;
 var templateObject_1;

package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions, extraControlButtons } from '../utils/utils';
 import { onRowAction } from '../utils/actions';
 import { columnDefinitions } from '../utils/columnDefinition';
 import withTheme from '../utils/withTheme';
@@ -11,5 +11,5 @@ export default {
     decorators: [withTheme, withRouter, withRedux]
 };
 export var Styled = function () {
-    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }) }));
+    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors, extraControlButtons: extraControlButtons }) }) }));
 };

package/ui/Blocks/CommonGrid/storybook/utils/utils.d.ts

@@ -1,4 +1,4 @@
-import { GridActionsType, rowClassSymbol } from '../../types';
+import { GridActionsType, rowClassSymbol, ExtraControlButton } from '../../types';
 export declare const enumValues: string[];
 export declare const oversizedArrayColumns = 25;
 export declare const gridSelectors: {};
@@ -15,3 +15,4 @@ export declare const createRandomData: (count: number) => {
 export declare const gridDummyActions: Required<GridActionsType>;
 export declare const createOversizedRandomData: (count: number) => any[];
 export declare const ReduxGrid: (props: any) => JSX.Element;
+export declare const extraControlButtons: ExtraControlButton[];

package/ui/Blocks/CommonGrid/storybook/utils/utils.js

@@ -12,9 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import faker from 'faker';
-import { rowClassSymbol } from '../../types';
-import withReduxActions from '../../HoC/withReduxActions';
 import CommonGrid from '../../CommonGridContainer';
+import withReduxActions from '../../HoC/withReduxActions';
+import { rowClassSymbol, ExtraControlButtonPosition } from '../../types';
 export var enumValues = ['option A', 'option B', 'option C'];
 export var oversizedArrayColumns = 25;
 export var gridSelectors = {};
@@ -47,12 +47,12 @@ export var gridDummyActions = {
     setRowsPerPage: function (number) { return console.log('setRowsPerPage', number); },
     addFilter: function (column, value, filterProps) {
         return console.log('setRowsPerPage', column, value, filterProps);
-    },
+    }
 };
 export var createOversizedRandomData = function (count) {
     return new Array(count).fill(null).map(function () {
         var newData = {
-            id: "".concat(faker.random.uuid()),
+            id: "".concat(faker.random.uuid())
         };
         for (var index = 0; index < oversizedArrayColumns; index++) {
             newData["column_".concat(index)] = faker.name.lastName();
@@ -64,3 +64,7 @@ export var ReduxGrid = function (props) {
     var WithActions = React.useMemo(function () { return withReduxActions('storybookGrid')(CommonGrid); }, []);
     return _jsx(WithActions, __assign({}, props));
 };
+export var extraControlButtons = [
+    { label: 'Reload', position: ExtraControlButtonPosition.TopLeft },
+    { label: 'Export all', position: ExtraControlButtonPosition.TopRight }
+];

package/ui/Blocks/CommonGrid/types.d.ts

@@ -296,7 +296,6 @@ export type Group = {
 };
 export type GridProps = Omit<CommonGridProps, 'filters'> & {
     optimizeFilters?: boolean;
-    eshopSelect?: CommonGridProps['extraControlButtons'];
     processCheckedValues?: () => void;
     processCheckedValuesTitle?: string;
     hideControlButtons?: boolean;

package/ui/Elements/BarChartSymbol/BarChartSymbol.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type BarChartSymbolProps = {
+    selected?: number;
+    total?: number;
+    height?: number;
+};
+export declare const BarChartSymbol: FC<BarChartSymbolProps>;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+import { Bar } from './styles';
+export var BarChartSymbol = function (_a) {
+    var _b = _a.total, total = _b === void 0 ? 3 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.selected, selected = _d === void 0 ? 3 : _d;
+    return (_jsx(x.div, { display: "flex", alignItems: "flex-end", gap: "2px", children: Array.from({ length: total }).map(function (_, index) { return (_jsx(Bar, { total: total, index: index + 1, height: height, selected: selected }, index)); }) }));
+};

package/ui/Elements/BarChartSymbol/index.d.ts

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/index.js

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../BarChartSymbol").BarChartSymbolProps>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.js

@@ -0,0 +1,11 @@
+import { BarChartSymbol } from '../';
+var meta = {
+    title: 'Elements/BarChartSymbol',
+    component: BarChartSymbol,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {}
+};

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    height: number;
+    index: number;
+    total: number;
+    selected: number;
+}, never>;

package/ui/Elements/BarChartSymbol/styles.js

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled, th } from '@xstyled/styled-components';
+var minHeight = 7;
+export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 3px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"], ["\n  width: 3px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"])), function (_a) {
+    var index = _a.index, height = _a.height, total = _a.total;
+    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
+}, function (_a) {
+    var selected = _a.selected, index = _a.index;
+    return (selected >= index ? th.color('red1') : th.color('lightGray6'));
+});
+var templateObject_1;