venice-ui 2.0.28 → 2.0.30

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -31,7 +31,9 @@ const DropdownElements_1 = require("./DropdownElements");
 const Input_1 = require("../Input");
 const common_1 = require("../common");
 const react_dom_1 = require("react-dom");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
+const Icons_1 = require("../Icons");
+const Theme_1 = require("../../Theme");
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -80,6 +82,8 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
+            react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
+                react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),

package/dist/cjs/components/Input/Input.js

@@ -30,7 +30,7 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -92,7 +92,8 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
                 react_1.default.createElement(react_1.default.Fragment, null, readOnly ? (react_1.default.createElement(Input_styles_1.InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    prefix && react_1.default.createElement(Input_styles_1.Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
                         react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,

package/dist/cjs/components/Input/Input.styles.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
+exports.Prefix = exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
 const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
 const Typography_1 = require("../Typography");
+const Theme_1 = require("../../Theme");
 exports.InputTextElement = styled_components_1.default.input `
   position: relative;
   box-sizing: border-box;
@@ -20,7 +20,7 @@ exports.InputTextElement = styled_components_1.default.input `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  ${(p) => (p.prefix ? (0, common_1.setSizeWithPrefix)(p.inputSize) : (0, common_1.setSize)(p.inputSize))}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
   ${(p) => p.type === 'password' && `padding-right:32px;`}
@@ -63,8 +63,8 @@ exports.InputReadOnlyElement = styled_components_1.default.div `
   ${(p) => (0, common_1.setHeight)(p.inputSize)}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left:0;
-  border-bottom:1px solid #dddddd;
+  padding-left: 0;
+  border-bottom: 1px solid #dddddd;
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
@@ -90,3 +90,13 @@ exports.IconsWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
 `;
+exports.Prefix = styled_components_1.default.div `
+  position: absolute;
+  dispaly: flex;
+  left: 0px;
+  top: 1px;
+  width: 24px;
+  align-items: center;
+  color: ${Theme_1.Theme.colors.gray_1};
+  ${(p) => (0, common_1.setSize)(p.inputSize)}
+`;

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSizeWithPrefix = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPaddingWithPrefix = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -64,6 +64,20 @@ exports.inputPadding = {
   padding: ${Theme_1.Theme.padding.m};
   `,
 };
+exports.inputPaddingWithPrefix = {
+    small: `
+  padding: ${Theme_1.Theme.padding.s};
+  padding-left: calc(2* ${Theme_1.Theme.padding.s} + 24px);
+  `,
+    medium: `
+  padding: ${Theme_1.Theme.padding.m};
+  padding-left: calc(2* ${Theme_1.Theme.padding.m} + 24px);
+  `,
+    large: `
+  padding: ${Theme_1.Theme.padding.m};
+  padding-left: calc(2* ${Theme_1.Theme.padding.m} + 24px);
+  `,
+};
 //TODO refactor this
 exports.buttonPadding = {
     small: `
@@ -102,6 +116,10 @@ const setSize = (size) => {
     return exports.sizes[size] + exports.inputPadding[size];
 };
 exports.setSize = setSize;
+const setSizeWithPrefix = (size) => {
+    return exports.sizes[size] + exports.inputPaddingWithPrefix[size];
+};
+exports.setSizeWithPrefix = setSizeWithPrefix;
 const setHeight = (size) => {
     return exports.height[size];
 };

package/dist/esm/components/Dropdown/Dropdown.js

@@ -2,10 +2,12 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Aligment } from '../Aligment';
 import { DropdownElement } from './Dropdown.styles';
 import { Field } from './DropdownElements';
-import { InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
+import { EyeIconWrapper, InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
 import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
+import { Icon } from '../Icons';
+import { mainTheme } from '../../Theme';
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -54,6 +56,8 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
+            React.createElement(EyeIconWrapper, { size: size },
+                React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),

package/dist/esm/components/Input/Input.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
-import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, } from './Input.styles';
+import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, }) => {
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -66,7 +66,8 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
                 React.createElement(React.Fragment, null, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (React.createElement(React.Fragment, null,
-                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    prefix && React.createElement(Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
                         React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (React.createElement(IconsWrapper, null,

package/dist/esm/components/Input/Input.styles.js

@@ -1,7 +1,7 @@
-import { setSize, setEyeTopPosition, setHeight } from '../common';
+import { setSize, setEyeTopPosition, setHeight, setSizeWithPrefix, } from '../common';
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
 import { TextLabel } from '../Typography';
+import { Theme } from '../../Theme';
 export const InputTextElement = styled.input `
   position: relative;
   box-sizing: border-box;
@@ -14,7 +14,7 @@ export const InputTextElement = styled.input `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  ${(p) => setSize(p.inputSize)}
+  ${(p) => (p.prefix ? setSizeWithPrefix(p.inputSize) : setSize(p.inputSize))}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
   ${(p) => p.type === 'password' && `padding-right:32px;`}
@@ -57,8 +57,8 @@ export const InputReadOnlyElement = styled.div `
   ${(p) => setHeight(p.inputSize)}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left:0;
-  border-bottom:1px solid #dddddd;
+  padding-left: 0;
+  border-bottom: 1px solid #dddddd;
 `;
 export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
@@ -84,3 +84,13 @@ export const IconsWrapper = styled.div `
   display: flex;
   align-items: center;
 `;
+export const Prefix = styled.div `
+  position: absolute;
+  dispaly: flex;
+  left: 0px;
+  top: 1px;
+  width: 24px;
+  align-items: center;
+  color: ${Theme.colors.gray_1};
+  ${(p) => setSize(p.inputSize)}
+`;

package/dist/esm/components/common/inputStyles.js

@@ -61,6 +61,20 @@ export const inputPadding = {
   padding: ${Theme.padding.m};
   `,
 };
+export const inputPaddingWithPrefix = {
+    small: `
+  padding: ${Theme.padding.s};
+  padding-left: calc(2* ${Theme.padding.s} + 24px);
+  `,
+    medium: `
+  padding: ${Theme.padding.m};
+  padding-left: calc(2* ${Theme.padding.m} + 24px);
+  `,
+    large: `
+  padding: ${Theme.padding.m};
+  padding-left: calc(2* ${Theme.padding.m} + 24px);
+  `,
+};
 //TODO refactor this
 export const buttonPadding = {
     small: `
@@ -98,6 +112,9 @@ export const eyeTopPosition = {
 export const setSize = (size) => {
     return sizes[size] + inputPadding[size];
 };
+export const setSizeWithPrefix = (size) => {
+    return sizes[size] + inputPaddingWithPrefix[size];
+};
 export const setHeight = (size) => {
     return height[size];
 };

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -5,6 +5,7 @@ export interface IDropdownProps extends IFormElement {
     handleSelect: (name: string, value: string | number) => void;
     position?: string;
     zIndex?: number;
+    theme?: any;
 }
 export interface IPositionStyle {
     top: number;

package/dist/types/components/Input/Input.d.ts

@@ -10,5 +10,6 @@ export interface IInputProps extends IFormElement {
     autoFocus?: boolean;
     theme?: any;
     handleSubmit?: () => void;
+    prefix?: string;
 }
 export declare const Input: FC<IInputProps>;

package/dist/types/components/Input/Input.styles.d.ts

@@ -28,4 +28,8 @@ interface IEyeIconWrapperProps {
 }
 export declare const EyeIconWrapper: import("styled-components").StyledComponent<"div", any, IEyeIconWrapperProps, never>;
 export declare const IconsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IPrefixProps {
+    inputSize: InputSize;
+}
+export declare const Prefix: import("styled-components").StyledComponent<"div", any, IPrefixProps, never>;
 export {};

package/dist/types/components/common/inputStyles.d.ts

@@ -20,6 +20,11 @@ export declare const inputPadding: {
     medium: string;
     large: string;
 };
+export declare const inputPaddingWithPrefix: {
+    small: string;
+    medium: string;
+    large: string;
+};
 export declare const buttonPadding: {
     small: string;
     medium: string;
@@ -41,6 +46,7 @@ export declare const eyeTopPosition: {
     large: string;
 };
 export declare const setSize: (size: InputSize) => string;
+export declare const setSizeWithPrefix: (size: InputSize) => string;
 export declare const setHeight: (size: InputSize) => string;
 export declare const setButtonSize: (size: InputSize, loader: boolean) => string;
 export declare const setToogleSize: (size: InputSize) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",