superdesk-ui-framework 3.0.1-beta.17 → 3.0.1-beta.19

package/app-typescript/dist/index.d.ts

@@ -0,0 +1,56 @@
+export { HelloWorld } from './components/HelloWorld';
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Select, Option } from './components/Select';
+export { SelectWithTemplate } from './components/SelectWithTemplate';
+export { Popover } from './components/Popover';
+export { Label } from './components/Label';
+export { Badge } from './components/Badge';
+export { Alert } from './components/Alert';
+export { AvatarWrapper } from './components/Avatar';
+export { AvatarContentText } from './components/Avatar';
+export { AvatarContentImage } from './components/Avatar';
+export { IconButton } from './components/IconButton';
+export { IconLabel } from './components/IconLabel';
+export { Tooltip } from './components/Tooltip';
+export { DatePicker } from './components/DatePicker';
+export { DatePickerISO } from './components/DatePicker';
+export { DatePickerLocaleSettings } from './components/DatePicker';
+export { TimePicker } from './components/TimePicker';
+export { FormLabel } from './components/FormLabel';
+export { Switch } from './components/Switch';
+export { ButtonGroup } from './components/ButtonGroup';
+export { Loader } from './components/Loader';
+export { Radio } from './components/Radio';
+export { Checkbox } from './components/Checkbox';
+export { RadioButton } from './components/RadioButton';
+export { CheckboxButton } from './components/CheckboxButton';
+export { CheckGroup } from './components/CheckGroup';
+export { CheckButtonGroup } from './components/CheckButtonGroup';
+export { NavButton } from './components/NavButton';
+export { Tab, TabList } from './components/TabList';
+export { LeftMenu } from './components/LeftMenu';
+export { SubNav } from './components/SubNav';
+export { SlidingToolbar } from './components/SlidingToolbar';
+export { StrechBar } from './components/StrechBar';
+export { PropsList, Prop } from './components/PropsList';
+export { Icon } from './components/Icon';
+export { Divider } from './components/Divider';
+export { HeadingText } from './components/HeadingText';
+export { DropdownFirst } from './components/DropdownFirst';
+export { DropdownItem } from './components/DropdownFirst';
+export { DropdownLabel } from './components/DropdownFirst';
+export { DropdownDivider } from './components/DropdownFirst';
+export { Dropdown } from './components/Dropdown';
+export { Tag } from './components/Tag';
+export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
+export { EmptyState } from './components/EmptyState';
+export { Autocomplete } from './components/Autocomplete';
+export { DonutChart } from './components/DonutChart';
+export { TagInput } from './components/TagInput';
+export { TagInputTest } from './components/TagInputTest';
+export { Genie } from './components/Genie';
+export { GridList } from './components/GridList';
+export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
+export declare const ToggleBoxNext: any;
+export declare const reactToAngular1: any;

package/dist/examples.bundle.js

@@ -40627,14 +40627,18 @@ var DurationInput = /** @class */ (function (_super) {
                 }, 500);
             }
         }
-        if ((this.props.hours !== prevProps.hours)
-            || (this.props.minutes !== prevProps.minutes)
-            || (this.props.seconds !== prevProps.seconds)) {
-            this.setState({
-                hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
-                minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
-                seconds: this.stateUpdate('seconds', this.props.seconds),
-            });
+        if (this.hourRef.current.value.length === 2
+            && this.minuteRef.current.value.length === 2
+            && this.secondRef.current.value.length === 2) {
+            if ((this.props.hours !== prevProps.hours)
+                || (this.props.minutes !== prevProps.minutes)
+                || (this.props.seconds !== prevProps.seconds)) {
+                this.setState({
+                    hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
+                    minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
+                    seconds: this.stateUpdate('seconds', this.props.seconds),
+                });
+            }
         }
     };
     DurationInput.prototype.valueUpdate = function () {
@@ -40738,12 +40742,15 @@ var DurationInput = /** @class */ (function (_super) {
     };
     DurationInput.prototype.handleChange = function (event, state) {
         var stateClone = {};
-        if (event.target.value.length >= 2) {
-            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
-                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+        if (event.target.value.length > 2) {
+            if (event.target.selectionStart === 1) {
+                stateClone[state] = event.target.value.slice(0, 1);
+            }
+            else if (event.target.selectionStart === 2) {
+                stateClone[state] = event.target.value.slice(1, 2);
             }
             else {
-                stateClone[state] = event.target.value.slice(0, 2);
+                stateClone[state] = event.target.value.slice(2, 3);
             }
         }
         else {
@@ -40779,19 +40786,19 @@ var DurationInput = /** @class */ (function (_super) {
         var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("div", { className: InputClasses },
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
                 React.createElement("span", { className: 'sd-input__suffix' }, "h"),
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', autoComplete: "off", ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
                 React.createElement("span", { className: 'sd-input__suffix' }, "m"),
-                React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', autoComplete: "off", ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
@@ -40801,7 +40808,7 @@ var DurationInput = /** @class */ (function (_super) {
     return DurationInput;
 }(React.PureComponent));
 exports.DurationInput = DurationInput;
-function getDurationString(seconds, zero) {
+function getDurationString(seconds, minSections) {
     function zeroPad(value) {
         if (value.toString().length === 1 || value === 0) {
             return "0".concat(value);
@@ -40816,16 +40823,24 @@ function getDurationString(seconds, zero) {
     var hour = zeroPad(Math.floor(seconds / 3600));
     var minute = zeroPad(Math.floor((seconds % 3600) / 60));
     var second = zeroPad(Math.floor(seconds % 60));
-    if (zero) {
+    if (minSections === 3) {
         return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
     }
-    else {
-        if (Number(hour) === 0 && Number(minute) > 0) {
+    else if (minSections === 2) {
+        if (Number(hour) > 0) {
+            return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+        }
+        else {
             return "".concat(minute, "m ").concat(second, "s");
         }
-        else if (Number(hour) === 0 && Number(minute) === 0) {
+    }
+    else {
+        if (Number(hour) === 0 && Number(minute) === 0) {
             return "".concat(second, "s");
         }
+        else if (Number(hour) === 0 && Number(minute) > 0) {
+            return "".concat(minute, "m ").concat(second, "s");
+        }
         else {
             return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
         }
@@ -57582,7 +57597,9 @@ var DropdownItem = function (_a) {
     var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
     return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
         React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
-                onSelect();
+                setTimeout(function () {
+                    onSelect();
+                });
                 if (onChange) {
                     onChange();
                 }
@@ -57617,7 +57634,9 @@ var DropdownItemWithSubmenu = function (_a) {
         React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
             React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
                     if (item.onSelect) {
-                        item.onSelect();
+                        setTimeout(function () {
+                            item.onSelect();
+                        });
                     }
                     if (onChange) {
                         onChange();
@@ -77108,6 +77127,8 @@ var ContentDivider = /** @class */ (function (_super) {
             _a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
             _a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
             _a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
+            _a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
+            _a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
             _a));
         if (this.props.children) {
             return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },
@@ -131066,9 +131087,10 @@ var ContentDividerDoc = /** @class */ (function (_super) {
                         React.createElement("p", null, "Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
                         React.createElement(app_typescript_1.ContentDivider, { type: "dashed" }),
                         React.createElement("p", null, "Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue."),
-                        React.createElement(app_typescript_1.ContentDivider, { type: "dotted" }),
-                        React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam."))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <p>Maecenas sed diam eget risus varius...</p>\n\n                        <ContentDivider />\n\n                        <p>Vestibulum id ligula porta felis euismod...</p>\n\n                        <ContentDivider type=\"dashed\" />\n\n                        <p>Donec ullamcorper nulla non metus auctor fringilla...</p>\n\n                        <ContentDivider type=\"dotted\" />\n\n                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>\n                    ")),
+                        React.createElement(app_typescript_1.ContentDivider, { type: "dotted", margin: 'x-small' }),
+                        React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam."),
+                        React.createElement(app_typescript_1.ContentDivider, { type: "dotted", margin: 'x-small' }))),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <p>Maecenas sed diam eget risus varius...</p>\n\n                        <ContentDivider />\n\n                        <p>Vestibulum id ligula porta felis euismod...</p>\n\n                        <ContentDivider type=\"dashed\" />\n\n                        <p>Donec ullamcorper nulla non metus auctor fringilla...</p>\n\n                        <ContentDivider type=\"dotted\" margin='x-small' />\n\n                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>\n\n                        <ContentDivider type=\"dotted\" margin='x-small' />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "With text"),
             React.createElement("p", { className: "docs-page__paragraph" }),
             React.createElement(Markup.ReactMarkup, null,
@@ -131076,11 +131098,11 @@ var ContentDividerDoc = /** @class */ (function (_super) {
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement(app_typescript_1.ContentDivider, null, "Centered (default)"),
                         React.createElement("p", null, "Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."),
-                        React.createElement(app_typescript_1.ContentDivider, { align: "left" }, "Left aligned"),
+                        React.createElement(app_typescript_1.ContentDivider, { margin: 'small', align: "left" }, "Left aligned, small margin"),
                         React.createElement("p", null, "Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum."),
-                        React.createElement(app_typescript_1.ContentDivider, { align: "right", type: "dotted" }, "Right aligned"),
+                        React.createElement(app_typescript_1.ContentDivider, { align: "right", type: "dotted" }, "Right aligned, dotted"),
                         React.createElement("p", null, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <ContentDivider>\n                            Centered (default)\n                        </ContentDivider>\n\n                        <p>Maecenas sed diam eget...</p>\n\n                        <ContentDivider align=\"left\">\n                            Left aligned\n                        </ContentDivider>\n\n                        <p>Maecenas sed diam eget risus...</p>\n\n                        <ContentDivider align=\"right\" type=\"dotted\">\n                            Right aligned\n                        </ContentDivider>\n\n                        <p>Praesent commodo cursus magna...</p>\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <ContentDivider>\n                            Centered (default)\n                        </ContentDivider>\n\n                        <p>Maecenas sed diam eget...</p>\n\n                        <ContentDivider margin='small' align=\"left\">\n                            Left aligned, small margin\n                        </ContentDivider>\n\n                        <p>Maecenas sed diam eget risus...</p>\n\n                        <ContentDivider align=\"right\" type=\"dotted\">\n                            Right aligned, dotted\n                        </ContentDivider>\n\n                        <p>Praesent commodo cursus magna...</p>\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Vertical"),
             React.createElement("p", { className: "docs-page__paragraph" }),
             React.createElement(Markup.ReactMarkup, null,
@@ -131088,23 +131110,24 @@ var ContentDividerDoc = /** @class */ (function (_super) {
                     React.createElement("p", { className: "docs-page__paragraph" }, "// Basic"),
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement("span", null, "Option one"),
-                        React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", type: "dotted" }),
+                        React.createElement(app_typescript_1.ContentDivider, { margin: 'small', orientation: "vertical", type: "dotted" }),
                         React.createElement("span", null, "Option two"),
-                        React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", type: "dotted" }),
+                        React.createElement(app_typescript_1.ContentDivider, { margin: 'small', orientation: "vertical", type: "dotted" }),
                         React.createElement("span", null, "Option three")),
                     React.createElement("p", { className: "docs-page__paragraph " }, "// With text"),
                     React.createElement("p", { className: "docs-page__paragraph--small sd-margin-b--3" }, "Inside a flex container (flex-direction: column;)."),
                     React.createElement("div", { className: 'docs-page__content-row sd-display--flex' },
                         React.createElement("div", { style: { width: '100%' } }, "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue."),
-                        React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical" }, "or"),
+                        React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", margin: 'large' }, "or"),
                         React.createElement("div", { style: { width: '100%' } }, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue."))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Basic\n\n                        <span>Option one</span>\n                        <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option two</span>\n                        <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option three</span>\n\n                        // With text\n\n                        <div>\n                            Cras justo odio, dapibus ac facilisis in, egestas eget quam...\n                        </div>\n\n                        <ContentDivider orientation=\"vertical\">\n                            or\n                        </ContentDivider>\n\n                        <div>\n                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...\n                        </div>\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Basic\n\n                        <span>Option one</span>\n                        <ContentDivider margin='small' orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option two</span>\n                        <ContentDivider margin='small' orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option three</span>\n\n                        // With text\n\n                        <div>\n                            Cras justo odio, dapibus ac facilisis in, egestas eget quam...\n                        </div>\n\n                        <ContentDivider orientation=\"vertical\" margin='large'>\n                            or\n                        </ContentDivider>\n\n                        <div>\n                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...\n                        </div>\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'type', isRequired: false, type: 'dashed | dotted | solid', default: 'solid', description: 'Border style of the divider.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequired: false, type: 'horizontal | vertical', default: 'horizontal', description: 'Defines if the divider is horizontal or vertical. Default is horizontal.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'align', isRequired: false, type: 'center | left | right', default: 'right', description: 'Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' }))));
+                React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'margin', isRequired: false, type: 'x-small | small | medium | large | none', default: 'medium', description: 'Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.' }))));
     };
     return ContentDividerDoc;
 }(React.Component));
@@ -131896,7 +131919,12 @@ var TableListDoc = /** @class */ (function (_super) {
     TableListDoc.prototype.render = function () {
         return (React.createElement("section", { className: 'docs-page__container' },
             React.createElement("h2", { className: 'docs-page__h2' }, "TableList"),
-            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <TableList\n                    dragAndDrop\n                    addItem\n                    array={this.state.array}\n                    itemsDropdown={(index) => [\n                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },\n                        { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },\n                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },\n                    ]} />\n                "),
+            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <TableList\n                    dragAndDrop\n                    addItem\n                    array={this.state.array}\n                    itemsDropdown={(index) => [\n                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },\n                        { label: <Label style='translucent' text='prlg' />, onSelect: () => false },\n                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },\n                    ]} />\n                "),
+            React.createElement("p", { className: "docs-page__paragraph" }, "Simple list without drag and drop functionality and without functionality for adding item in list:"),
+            React.createElement(Markup.ReactMarkup, null,
+                React.createElement(Markup.ReactMarkupPreview, null,
+                    React.createElement(TableList_1.TableList, { array: this.state.array })),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TableList\n                        array={this.state.array}\n                        />\n                    ")),
             React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
@@ -131924,7 +131952,9 @@ var TableListDoc = /** @class */ (function (_super) {
                 React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'hexColor', isRequired: false, type: 'string', default: 'false', description: '' }),
+                React.createElement(app_typescript_1.Prop, { name: 'hexColor', isRequired: false, type: 'string', default: 'false', description: 'Color of left border for item status.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'locked', isRequired: false, type: 'function', default: 'false', description: 'If is true, the individual item of list change state and change style (border).' }),
+                React.createElement(app_typescript_1.Prop, { name: 'positionLocked', isRequired: false, type: 'function', default: 'false', description: 'Work in progress...' }),
                 React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: 'false', description: 'onDoubleClick functionality.' }))));
     };
@@ -132022,7 +132052,6 @@ var ContentListDoc = /** @class */ (function (_super) {
                                     }
                                 ],
                                 action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
-                                loading: true,
                             },
                             {
                                 itemColum: [
@@ -132053,8 +132082,6 @@ var ContentListDoc = /** @class */ (function (_super) {
                                         fullwidth: true,
                                     }
                                 ],
-                                //locked: true,
-                                selected: true,
                                 action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
                             },
                             {
@@ -132089,7 +132116,115 @@ var ContentListDoc = /** @class */ (function (_super) {
                                 action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
                             },
                         ] })),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <ContentList\n                        items={[\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}],   \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content: \n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content: \n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}], \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content: \n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content: \n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                locked: true,\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}], \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content:\n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content:\n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                        ]} />\n                    ")),
+                React.createElement(Markup.ReactMarkupPreview, null,
+                    React.createElement("p", { className: "docs-page__paragraph" }, "// loading"),
+                    React.createElement(ContentList_1.ContentList, { items: [
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{ content: React.createElement(React.Fragment, null,
+                                                    React.createElement("i", { className: "icon-rundown" })) }],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
+                                                    React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
+                                            },
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
+                                                    React.createElement("span", { className: 'sd-list-item__compound-text' },
+                                                        React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
+                                                        React.createElement("span", null, "Marker Daily")),
+                                                    React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
+                                                    React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
+                                loading: true
+                            },
+                        ] })),
+                React.createElement(Markup.ReactMarkupPreview, null,
+                    React.createElement("p", { className: "docs-page__paragraph" }, "// selected"),
+                    React.createElement(ContentList_1.ContentList, { items: [
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{ content: React.createElement(React.Fragment, null,
+                                                    React.createElement("i", { className: "icon-rundown" })) }],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
+                                                    React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
+                                            },
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
+                                                    React.createElement("span", { className: 'sd-list-item__compound-text' },
+                                                        React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
+                                                        React.createElement("span", null, "Marker Daily")),
+                                                    React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
+                                                    React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
+                                selected: true,
+                            },
+                        ] })),
+                React.createElement(Markup.ReactMarkupPreview, null,
+                    React.createElement("p", { className: "docs-page__paragraph" }, "// locked"),
+                    React.createElement(ContentList_1.ContentList, { items: [
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{ content: React.createElement(React.Fragment, null,
+                                                    React.createElement("i", { className: "icon-rundown" })) }],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
+                                                    React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
+                                                    React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
+                                            },
+                                            {
+                                                content: React.createElement(React.Fragment, null,
+                                                    React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
+                                                    React.createElement("span", { className: 'sd-list-item__compound-text' },
+                                                        React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
+                                                        React.createElement("span", null, "Marker Daily")),
+                                                    React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
+                                                    React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
+                                locked: true,
+                            },
+                        ] })),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <ContentList\n                        items={[\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}],   \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content: \n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content: \n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}], \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content: \n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content: \n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                locked: true,\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                            <i className=\"icon-rundown\"></i>\n                                                        </>}], \n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content:\n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content:\n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                            },\n                        ]} />\n\n                        // loading, slected & locked\n\n                        <ContentList\n                        items={[\n                            {\n                                itemColum: [\n                                    {\n                                        itemRow: [{content:<>\n                                                    <i className=\"icon-rundown\"></i>\n                                                </>}],\n                                        border: true\n                                    },\n                                    {\n                                        itemRow: [\n                                            {\n                                                content:\n                                                <>\n                                                    <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n                                                    <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n                                                </>\n                                            },\n                                            {\n                                                content:\n                                                <>\n                                                    <Label text='Marker' color='blue--800'/>\n                                                        <span className='sd-list-item__compound-text'>\n                                                            <span className='sd-list-item__text-label'>Template:</span>\n                                                            <span>Marker Daily</span>\n                                                        </span>\n                                                        <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span>    \n                                                    <Label style='translucent' text='In Progress' type='warning' />\n                                                </>\n                                            },\n                                        ],\n                                        fullwidth: true,\n                                    }\n                                ],\n                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n                                loading: true,\n                                selected: true,\n                                locked: true,\n                            },\n                        ]} />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement("p", { className: "docs-page__paragraph" }, "ContentList"),
             React.createElement(app_typescript_1.PropsList, null,
@@ -132104,7 +132239,12 @@ var ContentListDoc = /** @class */ (function (_super) {
                 React.createElement(app_typescript_1.Prop, { name: 'archived', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change state and change style.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'loading', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change state and change style.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: '/', description: 'onClick functionality.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: '/', description: 'onDoubleClick functionality.' }))));
+                React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: '/', description: 'onDoubleClick functionality.' })),
+            React.createElement("p", { className: "docs-page__paragraph" }, "itemColum:"),
+            React.createElement(app_typescript_1.PropsList, null,
+                React.createElement(app_typescript_1.Prop, { name: 'itemRow', isRequired: true, type: 'Array<{content: any}>', default: 'ture', description: 'An array of objects for defining rows of individual items.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change style.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'fullwidth', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change style.' }))));
     };
     return ContentListDoc;
 }(React.Component));
@@ -137432,6 +137572,7 @@ var DurationInputDoc = /** @class */ (function (_super) {
             required: true,
             disabled: false,
             invalid: false,
+            value: 3661,
         };
         return _this;
     }
@@ -137451,7 +137592,8 @@ var DurationInputDoc = /** @class */ (function (_super) {
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(DurationInput_1.DurationInput, { label: 'Label', info: 'info message', disabled: this.state.disabled, required: this.state.required, invalid: this.state.invalid, inlineLabel: this.state.inlineLabel, onChange: function (e) {
+                            React.createElement(DurationInput_1.DurationInput, { label: 'Label', info: 'info message', disabled: this.state.disabled, required: this.state.required, invalid: this.state.invalid, inlineLabel: this.state.inlineLabel, seconds: this.state.value, onChange: function (e) {
+                                    _this.setState({ value: e });
                                     console.log(e);
                                 } })))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <DurationInput\n                        label='Label'\n                        info='info message'\n                        disabled={this.state.disabled}\n                        required={this.state.required}\n                        invalid={this.state.invalid}\n                        inlineLabel={this.state.inlineLabel}\n                        onChange={(e) => {\n                            console.log(e)\n                        }}\n                        />\n                    ")),
@@ -137768,7 +137910,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 649 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.17","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.19","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 650 */