@dxc-technology/halstack-react 0.0.0-4d89cae → 0.0.0-4e5859a

package/paginator/Paginator.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,15 +11,11 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
@@ -27,97 +23,13 @@ var _Select = _interopRequireDefault(require("../select/Select"));
 
 var _Icons = require("./Icons");
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
-
-function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n  margin: 0 ", " 0 ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  margin-left: ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 10px;\n  margin-left: 10px;\n"]);
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-  return data;
-}
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 15px;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-transform: ", ";\n  background-color: ", ";\n  color: ", ";\n\n  button {\n    &:disabled {\n      background-color: transparent !important;\n      opacity: 0.3 !important;\n    }\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcPaginator = function DxcPaginator(_ref) {
   var _ref$currentPage = _ref.currentPage,
@@ -137,13 +49,13 @@ var DxcPaginator = function DxcPaginator(_ref) {
   var minItemsPerPage = currentPageInternal === 1 || currentPageInternal === 0 ? currentPageInternal : (currentPageInternal - 1) * itemsPerPage + 1;
   var maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage;
   var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.paginator
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.paginator.backgroundColor
-  }, _react["default"].createElement(DxcPaginatorContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(DxcPaginatorContainer, {
     disabled: currentPageInternal === 1
-  }, _react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && _react["default"].createElement(ItemsPageContainer, null, _react["default"].createElement(ItemsLabel, null, "Items per page "), _react["default"].createElement(SelectContainer, null, _react["default"].createElement(_Select["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && /*#__PURE__*/_react["default"].createElement(ItemsPageContainer, null, /*#__PURE__*/_react["default"].createElement(ItemsLabel, null, "Items per page "), /*#__PURE__*/_react["default"].createElement(SelectContainer, null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
     options: itemsPerPageOptions.map(function (num) {
       return {
         label: num.toString(),
@@ -155,11 +67,8 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: itemsPerPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
-  }))), _react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && _react["default"].createElement(_Button["default"], {
+  }))), /*#__PURE__*/_react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
     mode: "secondary",
     disabled: currentPageInternal === 1 || currentPageInternal === 0,
@@ -172,7 +81,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
     onClick: function onClick() {
       onPageChange(1);
     }
-  }), onPageChange && _react["default"].createElement(_Button["default"], {
+  }), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
     mode: "secondary",
     disabled: currentPageInternal === 1 || currentPageInternal === 0,
@@ -185,8 +94,8 @@ var DxcPaginator = function DxcPaginator(_ref) {
     onClick: function onClick() {
       onPageChange(currentPage - 1);
     }
-  }), showGoToPage && _react["default"].createElement(PageToSelectContainer, null, _react["default"].createElement(GoToLabel, null, "Go to page: "), _react["default"].createElement(SelectContainer, null, _react["default"].createElement(_Select["default"], {
-    options: (0, _toConsumableArray2["default"])(Array(totalPages).keys()).map(function (num) {
+  }), showGoToPage && /*#__PURE__*/_react["default"].createElement(PageToSelectContainer, null, /*#__PURE__*/_react["default"].createElement(GoToLabel, null, "Go to page: "), /*#__PURE__*/_react["default"].createElement(SelectContainer, null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    options: Array.from(Array(totalPages), function (e, num) {
       return {
         label: (num + 1).toString(),
         value: (num + 1).toString()
@@ -197,11 +106,8 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: currentPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
-  }))) || _react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && _react["default"].createElement(_Button["default"], {
+  }))) || /*#__PURE__*/_react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
     mode: "secondary",
     disabled: currentPageInternal === totalPages,
@@ -214,7 +120,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
     onClick: function onClick() {
       onPageChange(currentPage + 1);
     }
-  }), onPageChange && _react["default"].createElement(_Button["default"], {
+  }), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
     mode: "secondary",
     disabled: currentPageInternal === totalPages,
@@ -230,7 +136,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
   })))));
 };
 
-var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-transform: ", ";\n  background-color: ", ";\n  color: ", ";\n\n  button {\n    &:disabled {\n      background-color: transparent !important;\n      opacity: 0.3 !important;\n    }\n  }\n"])), function (props) {
   return props.theme.height;
 }, function (props) {
   return props.theme.width;
@@ -250,56 +156,37 @@ var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(),
   return props.theme.fontColor;
 });
 
-var SelectContainer = _styledComponents["default"].div(_templateObject2());
+var SelectContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100px;\n"])));
 
-var ItemsPageContainer = _styledComponents["default"].span(_templateObject3(), function (props) {
+var ItemsPageContainer = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"])), function (props) {
   return props.theme.itemsPerPageSelectorMarginRight;
 }, function (props) {
   return props.theme.itemsPerPageSelectorMarginLeft;
 });
 
-var ItemsLabel = _styledComponents["default"].span(_templateObject4());
+var ItemsLabel = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 15px;\n"])));
 
-var GoToLabel = _styledComponents["default"].span(_templateObject5());
+var GoToLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 10px;\n  margin-left: 10px;\n"])));
 
-var TotalItemsContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
+var TotalItemsContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.theme.totalItemsContainerMarginRight;
 }, function (props) {
   return props.theme.totalItemsContainerMarginLeft;
 });
 
-var LabelsContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+var LabelsContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n  margin: 0 ", " 0 ", ";\n"])), function (props) {
   return props.theme.marginRight;
 }, function (props) {
   return props.theme.marginLeft;
 });
 
-var PageToSelectContainer = _styledComponents["default"].span(_templateObject8(), function (props) {
+var PageToSelectContainer = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  margin-left: ", ";\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"])), function (props) {
   return props.theme.pageSelectorMarginRight;
 }, function (props) {
   return props.theme.pageSelectorMarginLeft;
 });
 
-var TextContainer = _styledComponents["default"].span(_templateObject9());
+var TextContainer = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-DxcPaginator.propTypes = {
-  currentPage: _propTypes["default"].number,
-  itemsPerPage: _propTypes["default"].number,
-  itemsPerPageOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
-  totalItems: _propTypes["default"].number.isRequired,
-  showGoToPage: _propTypes["default"].bool,
-  onPageChange: _propTypes["default"].func,
-  itemsPerPageFunction: _propTypes["default"].func,
-  tabIndex: _propTypes["default"].number
-};
-DxcPaginator.defaultProps = {
-  currentPage: 1,
-  itemsPerPage: 5,
-  itemsPerPageOptions: null,
-  showGoToPage: false,
-  onPageChange: null,
-  itemsPerPageFunction: null,
-  tabIndex: 0
-};
 var _default = DxcPaginator;
 exports["default"] = _default;

package/paginator/Paginator.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import DxcPaginator from "./Paginator";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Paginator",
+  component: DxcPaginator,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcPaginator />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Default with items per page options" theme="light" level={4} />
+      <DxcPaginator itemsPerPageOptions={[5, 10, 15]} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Default with show go to page selector" theme="light" level={4} />
+      <DxcPaginator showGoToPage />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change in first page" theme="light" level={4} />
+      <DxcPaginator currentPage={1} itemsPerPage={10} totalItems={27} onPageChange={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change in middle page" theme="light" level={4} />
+      <DxcPaginator currentPage={2} itemsPerPage={10} totalItems={27} onPageChange={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change in last page" theme="light" level={4} />
+      <DxcPaginator currentPage={3} itemsPerPage={10} totalItems={27} onPageChange={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change and items per page options" theme="light" level={4} />
+      <DxcPaginator
+        currentPage={1}
+        itemsPerPage={10}
+        totalItems={27}
+        onPageChange={() => {}}
+        itemsPerPageOptions={[5, 10, 15]}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change and show go to page selector" theme="light" level={4} />
+      <DxcPaginator currentPage={1} itemsPerPage={10} totalItems={27} onPageChange={() => {}} showGoToPage />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Page change, show go to page and items per page selectors" theme="light" level={4} />
+      <DxcPaginator
+        currentPage={1}
+        itemsPerPage={10}
+        totalItems={27}
+        onPageChange={() => {}}
+        itemsPerPageOptions={[5, 10, 15]}
+        showGoToPage
+      />
+    </ExampleContainer>
+  </>
+);

package/paginator/types.d.ts

@@ -0,0 +1,38 @@
+declare type Props = {
+    /**
+     * Number of the current selected page.
+     */
+    currentPage?: number;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Array of numbers representing the items per page options.
+     * If undefined, the select with items per page options will not be displayed.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page option.
+     * The number will be passed as a parameter to this function.
+     */
+    itemsPerPageFunction?: (val: number) => void;
+    /**
+     * Total number of items in the pages.
+     */
+    totalItems?: number;
+    /**
+     * If true, a select will be displayed with the page numbers to move through them.
+     */
+    showGoToPage?: boolean;
+    /**
+     * This function will be called when the user clicks on any of the button to change pages.
+     * The page number will be passed as a parameter to this function.
+     */
+    onPageChange?: (val: number) => void;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/paginator/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/password-input/PasswordInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import PasswordInputPropsType from "./types";
+declare const DxcPasswordInput: React.ForwardRefExoticComponent<PasswordInputPropsType & React.RefAttributes<HTMLDivElement>>;
+export default DxcPasswordInput;

package/password-input/PasswordInput.js

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,38 +17,28 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
-var _variables = require("../common/variables.js");
+var _templateObject;
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & ::-ms-reveal {\n    display: none;\n  }\n"]);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$clearable = _ref.clearable,
       clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       pattern = _ref.pattern,
-      length = _ref.length,
+      minLength = _ref.minLength,
+      maxLength = _ref.maxLength,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -69,25 +57,27 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
   var setInputType = function setInputType(type) {
     var _inputRef$current, _inputRef$current$chi;
 
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[2]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[label && helperText ? 2 : label || helperText ? 1 : 0]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
   };
 
   var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
+    var inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
+
     if (error && clearable && value) {
       var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[2]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[2]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[inputIndex]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[inputIndex]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
     } else if (error || clearable && !value) {
       var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[2]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[2]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[inputIndex]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[inputIndex]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
     } else {
       var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[2]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[2]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[inputIndex]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[inputIndex]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
     }
   };
 
@@ -96,14 +86,14 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
   };
 
   (0, _react.useEffect)(function () {
-    setAriaAttributes(false, "Show");
+    setAriaAttributes(false, "Show password");
 
     if (isPasswordVisible) {
       setInputType("text");
-      setAriaAttributes(true, "Hide");
+      setAriaAttributes(true, "Hide password");
     } else {
       setInputType("password");
-      setAriaAttributes(false, "Show");
+      setAriaAttributes(false, "Show password");
     }
   }, [isPasswordVisible]);
 
@@ -119,34 +109,34 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
 
   var action = {
     onClick: isPasswordVisible ? hidePassword : viewPassword,
-    icon: isPasswordVisible ? _react["default"].createElement("svg", {
+    icon: isPasswordVisible ? /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 0 24 24",
       width: "24px",
-      fill: "#000000"
-    }, _react["default"].createElement("path", {
+      fill: "currentColor"
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z",
       fill: "none"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"
-    })) : _react["default"].createElement("svg", {
+    })) : /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 0 24 24",
       width: "24px",
-      fill: "#000000"
-    }, _react["default"].createElement("path", {
+      fill: "currentColor"
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0V0z",
       fill: "none"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
     })),
     title: getIconTitle()
   };
-  return _react["default"].createElement(PasswordInput, {
+  return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
     ref: ref
-  }, _react["default"].createElement(_TextInput["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     ref: inputRef,
     label: label,
     name: name,
@@ -160,44 +150,14 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
     margin: margin,
     size: size,
     pattern: pattern,
-    length: length,
+    minLength: minLength,
+    maxLength: maxLength,
     autocomplete: autocomplete,
     tabIndex: tabIndex
   }));
 });
 
-var sizes = {
-  small: "240px",
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var PasswordInput = _styledComponents["default"].div(_templateObject());
-
-DxcPasswordInput.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  error: _propTypes["default"].string,
-  clearable: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  autocomplete: _propTypes["default"].string,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  pattern: _propTypes["default"].string,
-  length: _propTypes["default"].shape({
-    min: _propTypes["default"].number,
-    max: _propTypes["default"].number
-  }),
-  tabIndex: _propTypes["default"].number
-};
+var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  & ::-ms-reveal {\n    display: none;\n  }\n"])));
+
 var _default = DxcPasswordInput;
 exports["default"] = _default;