@steroidsjs/bootstrap 3.0.0-beta.4 → 3.0.0-beta.40

package/icons/svgs/info.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1063)">
+<circle cx="12.7461" cy="12" r="12" fill="#A7EFFF"/>
+<circle cx="12.7461" cy="7.25" r="0.75" transform="rotate(-180 12.7461 7.25)" fill="white"/>
+<line x1="12.7461" y1="16.75" x2="12.7461" y2="10.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1063">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/loader.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.07051 1.00041C5.8839 0.986525 4.71983 1.32482 3.72548 1.97252C2.73114 2.62022 1.9512 3.54823 1.48427 4.63919C1.01735 5.73016 0.884422 6.93509 1.1023 8.1016C1.32018 9.26812 1.87907 10.3438 2.70831 11.1927C3.53755 12.0416 4.59989 12.6255 5.76098 12.8706C6.92208 13.1157 8.12979 13.011 9.23139 12.5698C10.333 12.1285 11.279 11.3705 11.9498 10.3916C12.6206 9.41265 12.986 8.25681 12.9999 7.07021" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/search.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.3535" cy="11.7225" r="6" stroke="#323232" stroke-width="1.5"/>
+<path d="M20.3535 20.7225L17.3535 17.7225" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/icons/svgs/success.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#2BC945"/>
+<path d="M16.5 9L10.3125 15L7.5 12.2727" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/user.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="8" r="3.25" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.24684 15.9465C7.45154 14.1154 9.25931 13.5 11.4511 13.5H12.4823C14.6828 13.5 16.5143 14.1468 17.7295 15.9814V15.9814C18.8016 17.6 17.9261 19.5 15.9847 19.5H8.00741C6.07032 19.5 5.18216 17.5648 6.24684 15.9465V15.9465Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/icons/svgs/visible-eye.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.4879" r="3.25" stroke="#323232" stroke-width="1.5"/>
+<path d="M20.188 11.4222C20.5762 11.8935 20.7703 12.1291 20.7703 12.4879C20.7703 12.8467 20.5762 13.0824 20.188 13.5536C18.7679 15.2778 15.6357 18.4879 12 18.4879C8.36427 18.4879 5.23206 15.2778 3.81197 13.5536C3.42381 13.0824 3.22973 12.8467 3.22973 12.4879C3.22973 12.1291 3.42381 11.8935 3.81197 11.4222C5.23206 9.69805 8.36427 6.48792 12 6.48792C15.6357 6.48792 18.7679 9.69805 20.188 11.4222Z" stroke="#323232" stroke-width="1.5"/>
+</svg>

package/icons/svgs/warning.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1068)">
+<path d="M10.148 3C11.3027 0.999997 14.1895 1 15.3442 3L24.0044 18C25.1591 20 23.7157 22.5 21.4063 22.5H4.08584C1.77644 22.5 0.333063 20 1.48776 18L10.148 3Z" fill="#FFE457"/>
+<circle cx="12.7461" cy="16.75" r="0.75" fill="white"/>
+<line x1="12.7461" y1="7.25" x2="12.7461" y2="13.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1068">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/index.d.ts

@@ -23,6 +23,9 @@ declare const _default: {
     'content.IconView': {
         lazy: () => any;
     };
+    'content.BadgeView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -32,10 +35,10 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
-    'content.CollapseView': {
+    'content.AccordionView': {
         lazy: () => any;
     };
-    'content.CollapseItemView': {
+    'content.AccordionItemView': {
         lazy: () => any;
     };
     'form.CheckboxFieldView': {
@@ -215,5 +218,11 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'typography.TextView': {
+        lazy: () => any;
+    };
+    'typography.TitleView': {
+        lazy: () => any;
+    };
 };
 export default _default;

package/index.js

@@ -26,6 +26,9 @@ exports["default"] = {
     'content.IconView': {
         lazy: function () { return require('./content/Icon/IconView')["default"]; }
     },
+    'content.BadgeView': {
+        lazy: function () { return require('./content/Badge/BadgeView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -35,11 +38,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
@@ -217,5 +220,11 @@ exports["default"] = {
     },
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    },
+    'typography.TextView': {
+        lazy: function () { return require('./typography/Text/TextView')["default"]; }
+    },
+    'typography.TitleView': {
+        lazy: function () { return require('./typography/Title/TitleView')["default"]; }
     }
 };

package/index.scss

@@ -1,15 +1,17 @@
 @import './scss/mixins';
 @import './scss/variables';
+@import './scss/fonts';
 
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
 @import './content/Avatar/AvatarGroupView';
+@import './content/Badge/BadgeView';
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
@@ -19,6 +21,7 @@
 @import './form/DateRangeField/DateRangeFieldView';
 @import './form/DateTimeField/DateTimeFieldView';
 @import './form/DateTimeRangeField/DateTimeRangeFieldView';
+@import './form/DropDownFieldItem/DropDownFieldItemView';
 @import './form/DropDownField/DropDownFieldView';
 @import './form/FieldLayout/FieldLayoutView';
 @import './form/FieldList/FieldListView';
@@ -31,6 +34,7 @@
 @import './form/NumberField/NumberFieldView';
 @import './form/PasswordField/PasswordFieldView';
 @import './form/RateField/RateFieldView';
+@import './form/RadioField/RadioFieldView';
 @import './form/RadioListField/RadioListFieldView';
 @import './form/ReCaptchaField/ReCaptchaFieldView';
 @import './form/SliderField/SliderFieldView';
@@ -38,7 +42,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './content/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';
@@ -67,3 +70,5 @@
 @import './nav/Nav/NavListView';
 @import './nav/Nav/NavTabsView';
 @import './nav/Tree/TreeView';
+@import './typography/Text/TextView';
+@import './typography/Title/TitleView';

package/layout/Header/HeaderView.scss

@@ -1,9 +1,9 @@
+$body-bg: transparent;
+
 .HeaderView {
   box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
   background-color: $body-bg;
-  &, a {
-    color: $body-color;
-  }
+
   a:hover {
     opacity: .7;
   }

package/layout/Tooltip/TooltipView.js

@@ -27,18 +27,18 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+            show: props.isTooltipVisible,
+            position: props.position
+        }), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;

package/layout/Tooltip/TooltipView.scss

@@ -1,8 +1,7 @@
 @use 'sass:math';
 
-$tooltip-arrow-color: #000;
-$tooltip-arrow-width: 8px;
-$tooltip-arrow-height: 8px;
+$tooltip-arrow-width: 10px;
+$tooltip-arrow-height: 10px;
 $tooltip-arrow-border: math.div($tooltip-arrow-width, 2);
 $tooltip-gap: 12px;
 
@@ -10,10 +9,18 @@ $tooltip-arrow-offset-horizontal: 20px;
 $tooltip-arrow-offset-vertical-top: 15px;
 $tooltip-arrow-offset-vertical-bottom: 7px;
 
+$tooltip-background-color: rgba(65, 65, 65, 0.95);
+
 .TooltipView {
   position: absolute;
   top: 0;
   left: 0;
+  max-width: 300px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: $tooltip-background-color;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
@@ -22,99 +29,100 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   &_show {
     opacity: 1;
   }
-  &_show.tooltip-position-top, &_show.tooltip-position-topLeft,  &_show.tooltip-position-topRight{
+
+  &_position{
+    &_top, &_topLeft, &_topRight {
       transform: translateY(-$tooltip-gap);
-  }
-  &_show.tooltip-position-bottom, &_show.tooltip-position-bottomLeft,  &_show.tooltip-position-bottomRight{
-    transform: translateY($tooltip-gap);
-  }
-  &_show.tooltip-position-left, &_show.tooltip-position-leftTop,  &_show.tooltip-position-leftBottom{
-    transform: translateX(-$tooltip-gap);
-  }
-  &_show.tooltip-position-right, &_show.tooltip-position-rightTop,  &_show.tooltip-position-rightBottom{
-    transform: translateX($tooltip-gap);
-  }
+    }
+
+    &_bottom, &_bottomLeft, &_bottomRight {
+      transform: translateY($tooltip-gap);
+    }
+
+    &_left, &_leftTop, &_leftBottom {
+      transform: translateX(-$tooltip-gap);
+    }
 
+    &_right, &_rightTop, &_rightBottom {
+      transform: translateX($tooltip-gap);
+    }
+  }
 
   &__arrow{
     position: absolute;
-
+    
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
     border-style: solid;
     border-width: math.div($tooltip-arrow-height, 2);
+    border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-
-    &_position-top, &_position-topLeft, &_position-topRight{
+    &_position_top, &_position_topLeft, &_position_topRight{
       bottom: -$tooltip-arrow-border;
       left: 50%;
-
       border-top-color: transparent;
       border-left-color: transparent;
-      border-right-color:  $tooltip-arrow-color;
-      border-bottom-color:  $tooltip-arrow-color;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-topLeft{
+    &_position_topLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-topRight{
+    &_position_topRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-bottom, &_position-bottomLeft, &_position-bottomRight{
+    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
       top: -$tooltip-arrow-border;
       left: 50%;
-      border-top-color: $tooltip-arrow-color;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-bottomLeft{
+    &_position_bottomLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-bottomRight{
+    &_position_bottomRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-left, &_position-leftTop, &_position-leftBottom{
+    &_position_left, &_position_leftTop, &_position_leftBottom{
       right: -$tooltip-arrow-border;
       top: 50%;
-      border-top-color: $tooltip-arrow-color;
       border-left-color: transparent;
-      border-right-color: $tooltip-arrow-color;
       border-bottom-color: transparent;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-leftTop{
+    &_position_leftTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-leftBottom{
+    &_position_leftBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
 
-    &_position-right, &_position-rightTop, &_position-rightBottom{
+    &_position_right, &_position_rightTop, &_position_rightBottom{
       left: -$tooltip-arrow-border;
       top: 50%;
       border-top-color: transparent;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
-      border-bottom-color: $tooltip-arrow-color;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-rightTop{
+    &_position_rightTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-rightBottom{
+    &_position_rightBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
   }
 
+  &__content{
+    color: $white;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }

package/list/Grid/GridView.js

@@ -58,7 +58,7 @@ function GridView(props) {
         var fields = (0, keyBy_1["default"])(props.searchForm.fields.map(function (column) { return (0, isString_1["default"])(column) ? { attribute: column } : column; }), 'attribute');
         return (React.createElement("tr", null, props.columns.map(function (column, columnIndex) {
             var _a;
-            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ layout: 'inline', size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
+            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {

package/list/Grid/GridView.scss

@@ -1,5 +1,3 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
-
 .GridView {
   opacity: 1;
   transition: opacity .2s;
@@ -9,34 +7,34 @@
   }
 
   //adaptive styles
-  @include media-breakpoint-down(sm) {
-    thead, tbody, th, tr {
-      display: block;
-    }
-
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
-
-    td {
-      position: relative;
-      width: 100% !important;
-      text-align: left !important;
-
-      display: flex;
-      align-items: center;
-      white-space: pre-wrap;
-    }
-
-    td:before {
-      padding-right: 1rem;
-      width: 50%;
-      flex-shrink: 0;
-      content: attr(data-label);
-    }
-  }
+  // @include media-breakpoint-down(sm) {
+  //   thead, tbody, th, tr {
+  //     display: block;
+  //   }
+
+  //   thead tr {
+  //     position: absolute;
+  //     top: -9999px;
+  //     left: -9999px;
+  //   }
+
+  //   td {
+  //     position: relative;
+  //     width: 100% !important;
+  //     text-align: left !important;
+
+  //     display: flex;
+  //     align-items: center;
+  //     white-space: pre-wrap;
+  //   }
+
+  //   td:before {
+  //     padding-right: 1rem;
+  //     width: 50%;
+  //     flex-shrink: 0;
+  //     content: attr(data-label);
+  //   }
+  // }
 
   &__sort-button {
     opacity: 0.5;

package/list/List/ListView.d.ts

@@ -1,2 +1,3 @@
 import { IListViewProps } from '@steroidsjs/core/ui/list/List/List';
+import './ListView.scss';
 export default function ListView(props: IListViewProps): any;

package/list/List/ListView.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+require("./ListView.scss");
 function ListView(props) {
     var bem = (0, hooks_1.useBem)('ListView');
     if (!props.list) {
@@ -34,17 +35,16 @@ function ListView(props) {
         if (!pagination && !paginationSize && !layout) {
             return null;
         }
-        return (React.createElement("div", { className: bem('row mb-3', bem.element('pagination')) },
-            React.createElement("div", { className: 'col-4' }, "\u00A0"),
-            React.createElement("div", { className: 'col-4' }, pagination),
-            React.createElement("div", { className: 'col-4 d-flex justify-content-end' },
+        return (React.createElement("div", { className: bem.element('pagination') },
+            React.createElement("div", null, pagination),
+            React.createElement("div", null,
                 layout,
                 paginationSize)));
     };
     return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || props.list.isLoading }), props.className) },
         props.renderSearchForm(),
         renderPagination(['top', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['top', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['top', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
-        React.createElement("div", { className: bem('mb-3', bem.element('content'), props.contentClassName) }, props.content),
+        React.createElement("div", { className: bem(bem.element('content'), props.contentClassName) }, props.content),
         renderPagination(['bottom', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['bottom', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['bottom', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
         props.renderEmpty()));
 }

package/list/List/ListView.scss

@@ -1,3 +1,12 @@
 .ListView {
 
+    &__pagination { 
+        display: flex;
+        flex-flow: row nowrap;
+        margin-bottom: 3px;
+        background: red;
+    }
+
+
+
 }

package/list/Pagination/PaginationButtonView.js

@@ -25,12 +25,41 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderArrowStep = function (bem, onClick, iconName, rotate, rounding, disabled) {
+    if (rotate === void 0) { rotate = false; }
+    return (React.createElement("li", { className: bem.element('page', {
+            'rounding-left': rounding.left,
+            'rounding-right': rounding.right,
+            hasIcon: true,
+            disabled: disabled
+        }) },
+        React.createElement("button", { className: bem.element('page-button', {
+                hasIcon: true
+            }), onClick: function () { return onClick(); }, disabled: disabled },
+            React.createElement(content_1.Icon, { tabIndex: -1, className: bem.element('page-icon', {
+                    rotate: rotate
+                }), name: iconName }))));
+};
 function PaginationButtonView(props) {
     var bem = (0, hooks_1.useBem)('PaginationButtonView');
-    return (React.createElement("ul", { className: bem(props.className, bem.block(), 'flex-row', 'pagination', "pagination-".concat(props.size)) }, props.pages.map(function (item, index) { return (React.createElement("li", { key: index, className: bem(bem.element('page', { hidden: !item.page }), 'page-item', item.isActive ? 'active' : '') },
-        React.createElement("button", { className: bem(bem.element('page-link', { hidden: !item.page }), 'page-link'), onClick: function (e) {
-                e.preventDefault();
-                props.onSelect(item.page);
-            } }, item.label))); })));
+    return (React.createElement("ul", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        props.showEdgeSteps
+            && renderArrowStep(bem, props.onSelectFirst, 'double-arrow-left', false, { left: true }, props.isFirstPage),
+        props.showSteps
+            && renderArrowStep(bem, props.onSelectPrev, 'arrow-left', false, {}, props.isFirstPage),
+        props.pages.map(function (item, index) { return (React.createElement("li", { key: index, className: bem.element('page', {
+                hidden: !item.page,
+                active: item.isActive
+            }) },
+            React.createElement("button", { className: bem.element('page-button', {
+                    hidden: !item.page
+                }), onClick: function () { return props.onSelect(item.page); } }, item.label))); }),
+        props.showSteps
+            && renderArrowStep(bem, props.onSelectNext, 'arrow-left', true, {}, props.isLastPage),
+        props.showEdgeSteps
+            && renderArrowStep(bem, props.onSelectLast, 'double-arrow-left', true, { right: true }, props.isLastPage)));
 }
 exports["default"] = PaginationButtonView;