@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.60

package/layout/Loader/LoaderView.scss

@@ -1,27 +1,72 @@
+:root {
+  --gradient-color-primary-first: #651FFF;
+  --gradient-color-primary-second: #BA9BFF;
+}
+
+html[data-theme="dark"] { 
+  --gradient-color-primary-first: #9362FF;
+  --gradient-color-primary-second: #B898FF;
+}
+
+$gradient-color-primary-first: var(--gradient-color-primary-first);
+$gradient-color-primary-second: var(--gradient-color-primary-second);
+
 .LoaderView {
-  position: relative;
-  width: 100%;
-
-  &__loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -27px 0 0 -27px;
-    z-index: 20;
-    font-size: 10px;
-    text-indent: -9999em;
-    border-top: .9em solid rgba(246, 168, 33, 0.2);
-    border-right: .9em solid rgba(246, 168, 33, 0.2);
-    border-bottom: .9em solid rgba(246, 168, 33, 0.2);
-    border-left: .9em solid #db001f;
-    transform: translateZ(0);
+  $root: &;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &_size {
+    &_sm {
+      svg {
+        height: 33px;
+        width: 33px;
+        path {
+          stroke-width: 4px;
+        }
+      }
+    }
+    &_md {
+      svg {
+        height: 44px;
+        width: 44px;
+        path {
+          stroke-width: 6px;
+        }
+      }
+    }
+    &_lg {
+      svg {
+        height: 55px;
+        width: 55px;
+        path {
+          stroke-width: 7px;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: Loader-spin 1.1s infinite linear;
-    opacity: 1 !important;
+  }
+
+  &_color_gradient {
+    svg stop:first-child {
+      stop-color: $gradient-color-primary-first;
+    }
+    svg stop:last-child {
+      stop-color: $gradient-color-primary-second;
+    }
+  }
 
-    &, &::after {
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
+  @each $colorName, $colorMap in $color-themes {
+    &_color_#{$colorName} {
+        @include loader-color($colorMap, $colorName, $root);
     }
   }
 }
@@ -35,4 +80,4 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-}
+}

package/layout/Notifications/NotificationsItemView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsItemViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsItemView(props: INotificationsItemViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsItemView(props: INotificationsItemViewProps): JSX.Element;

package/layout/Notifications/NotificationsView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsView(props: INotificationsViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsView(props: INotificationsViewProps): JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function CircleProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function CircleProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function LineProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function LineProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/Tooltip/TooltipView.d.ts

@@ -1,3 +1,2 @@
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function TooltipView(props: ITooltipViewProps & IBemHocOutput): JSX.Element;
+export default function TooltipView(props: ITooltipViewProps): JSX.Element;

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/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
-export default function CheckboxColumnView(props: ICheckboxColumnViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxColumnView(props: ICheckboxColumnViewProps): JSX.Element;

package/list/CheckboxColumn/CheckboxColumnView.js

@@ -40,10 +40,11 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var CheckboxField_1 = __importDefault(require("@steroidsjs/core/ui/form/CheckboxField"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var get_1 = __importDefault(require("lodash-es/get"));
 function CheckboxColumnView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxColumnView');
     var CheckboxFieldInternal = CheckboxField_1["default"].WrappedComponent;
     return (React.createElement("div", { className: bem.block() },
-        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input }))));
+        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input, size: props.size, label: (0, get_1["default"])(props.item, props.attribute) }))));
 }
 exports["default"] = CheckboxColumnView;

package/list/ControlsColumnView/ControlsColumnView.d.ts

@@ -1,3 +1,2 @@
 import { IControlsColumnViewProps } from '@steroidsjs/core/ui/list/ControlsColumn/ControlsColumn';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ControlsColumnView(props: IControlsColumnViewProps & IBemHocOutput): JSX.Element;
+export default function ControlsColumnView(props: IControlsColumnViewProps): JSX.Element;

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) {
@@ -73,10 +73,14 @@ function GridView(props) {
             } }));
     }, [bem, props]);
     var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
-    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading) }), props.className) },
+    return props.renderList(React.createElement("div", { className: bem(bem.block({
+            loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading),
+            size: props.size,
+            alternatingColors: props.hasAlternatingColors
+        }), props.className) },
         props.renderSearchForm(),
         props.renderPaginationSize(),
-        React.createElement("table", { className: 'table table-striped' },
+        React.createElement("table", { className: bem.element('table') },
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
@@ -86,7 +90,7 @@ function GridView(props) {
                         renderSortButton(column.attribute, 'desc'))))); })),
                 renderInsideSearchForm()),
             React.createElement("tbody", null,
-                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: column.className, "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
+                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: bem(bem.element('column'), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
                 emptyContent && (React.createElement("tr", null,
                     React.createElement("td", { colSpan: props.columns.length }, emptyContent))))),
         props.renderPagination()));

package/list/Grid/GridView.scss

@@ -1,53 +1,164 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
+:root {
+    --grid-header-background-color: #f1f5f7;
+    --grid-border-color: #e6e6e6;
+    --grid-alternating-color: #F8F8F8;
+    --grid-td-background-color: #FFFFFF;
+}
+
+html[data-theme="dark"] {
+    --grid-header-background-color: #414141;
+    --grid-border-color: #595959;
+    --grid-alternating-color: #4A4B53;
+    --grid-td-background-color: #4E4F57;
+}
+
+$grid-header-background-color: var(--grid-header-background-color);
+$grid-border-color: var(--grid-border-color);
+$grid-alternating-color: var(--grid-alternating-color);
+$grid-td-background-color: var(--grid-td-background-color);
 
 .GridView {
-  opacity: 1;
-  transition: opacity .2s;
+    $root: &;
 
-  &_loading {
-    opacity: .4;
-  }
+    text-align: left;
 
-  //adaptive styles
-  @include media-breakpoint-down(sm) {
-    thead, tbody, th, tr {
-      display: block;
-    }
+    width: 100%;
 
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
+    &__table {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        border-collapse: separate;
+        border: 1px solid $grid-border-color;
+        border-radius: $radius-large;
+        margin: 24px 0;
 
-    td {
-      position: relative;
-      width: 100% !important;
-      text-align: left !important;
+        th,
+        td {
+            color: $text-color;
+            background-color: $grid-td-background-color;
+        }
+        th {
+            font-weight: $font-weight-lg;
+            background-color: $grid-header-background-color;
+        }
 
-      display: flex;
-      align-items: center;
-      white-space: pre-wrap;
+        th:not(:last-child),
+        td:not(:last-child) {
+            border-right: 1px solid $grid-border-color;
+        }
+
+        thead > tr > th,
+        tbody > tr:not(:last-child) > td,
+        tr:not(:last-child) > td,
+        thead:not(:last-child),
+        tbody:not(:last-child) {
+            border-bottom: 1px solid $grid-border-color;
+        }
+
+        thead > tr > th {
+            &:first-child {
+                border-top-left-radius: $radius-large;
+            }
+            &:last-child {
+                border-top-right-radius: $radius-large;
+            }
+        }
+
+        tbody > tr:last-child > td {
+            &:first-child {
+                border-bottom-left-radius: $radius-large;
+            }
+
+            &:last-child {
+                border-bottom-right-radius: $radius-large;
+            }
+        }
     }
 
-    td:before {
-      padding-right: 1rem;
-      width: 50%;
-      flex-shrink: 0;
-      content: attr(data-label);
+    &_alternatingColors{
+        #{$root}__table tbody tr:nth-child(even) td { 
+            background-color: $grid-alternating-color;
+        }
     }
-  }
 
-  &__sort-button {
-    opacity: 0.5;
+    &_size {
+        &_lg {
+            #{$root}__table {
+                font-size: $font-size-lg;
+                line-height: $line-height-lg;
+            }
+
+            th,
+            td {
+                padding: 24px 16px;
+            }
+        }
 
-    &_is-active {
-      opacity: 1;
+        &_md {
+            #{$root}__table {
+                font-size: $font-size-base;
+                line-height: $line-height-base;
+            }
+
+            th,
+            td {
+                padding: 21px 12px;
+            }
+        }
+
+        &_sm {
+            #{$root}__table {
+                font-size: $font-size-sm;
+                line-height: $line-height-sm;
+            }
+
+            th,
+            td {
+                padding: 16px 8px;
+            }
+        }
     }
 
-    .IconView svg {
-      width: 10px;
-      height: 16px;
+
+    &__column {
+
+        .IconView { 
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &_hasIcon { 
+            display: flex;    
+            flex-flow: row nowrap;
+            align-items: center;
+
+            .IconView { 
+                margin-left: 8px;           
+            }
+
+            &-left { 
+                span {
+                    &:nth-child(1) {
+                        order: 2;
+                    }
+
+                    &:nth-child(2) {
+                        order: 1;
+                    }
+                }
+
+                .IconView { 
+                    margin-left: 0;
+                    margin-right: 8px;
+                }
+            }
+        }
     }
-  }
 }

package/list/Grid/views/ContentColumnView/ContentColumnView.d.ts

@@ -0,0 +1,3 @@
+import { IContentColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
+import './ContentColumnView.scss';
+export default function ContentColumnView(props: IContentColumnViewProps): JSX.Element;

package/list/Grid/views/ContentColumnView/ContentColumnView.js

@@ -0,0 +1,51 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
+require("./ContentColumnView.scss");
+function ContentColumnView(props) {
+    var _a, _b, _c, _d, _e;
+    var bem = (0, useBem_1["default"])('ContentColumnView');
+    var hasLink = !!((_a = props.link) === null || _a === void 0 ? void 0 : _a.attribute);
+    var hasPicture = !!((_b = props.picture) === null || _b === void 0 ? void 0 : _b.attribute);
+    var hasIcon = !!((_c = props.icon) === null || _c === void 0 ? void 0 : _c.attribute);
+    var hasSubtitle = !!props.subtitleAttribute;
+    var hasTextData = !!props.attribute || !!props.subtitleAttribute || hasLink;
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: hasLink ? props.link.attribute : props.attribute }))); };
+    var renderValue = function () {
+        var _a;
+        if (hasLink) {
+            return (react_1["default"].createElement(nav_1.Link, __assign({}, props.link.linkProps, { url: (0, get_1["default"])(props.item, (_a = props.link) === null || _a === void 0 ? void 0 : _a.urlAttribute), className: bem.element('link') }), renderFormat()));
+        }
+        return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat()));
+    };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            isLeft: ((_d = props.picture) === null || _d === void 0 ? void 0 : _d.isLeft) || ((_e = props.icon) === null || _e === void 0 ? void 0 : _e.isLeft)
+        })) },
+        hasTextData && (react_1["default"].createElement("div", { className: bem.element('data') },
+            renderValue(),
+            hasSubtitle && react_1["default"].createElement("span", { className: bem.element('subtitle') }, (0, get_1["default"])(props.item, props.subtitleAttribute)))),
+        hasPicture && (react_1["default"].createElement("span", { className: bem.element('picture') },
+            react_1["default"].createElement("img", { src: (0, get_1["default"])(props.item, props.picture.attribute), alt: "cell element" }))),
+        hasIcon && (react_1["default"].createElement(content_1.Icon, { name: (0, get_1["default"])(props.item, props.icon.attribute), className: bem.element('icon') }))));
+}
+exports["default"] = ContentColumnView;