superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

package/dist/examples.bundle.js

@@ -39281,7 +39281,15 @@ function getDurationString(seconds) {
     var hour = zeroPad(Math.floor(seconds / 3600));
     var minute = zeroPad(Math.floor((seconds % 3600) / 60));
     var second = zeroPad(Math.floor(seconds % 60));
-    return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    if (Number(hour) === 0 && Number(minute) > 0) {
+        return "".concat(minute, "m ").concat(second, "s");
+    }
+    else if (Number(hour) === 0 && Number(minute) === 0) {
+        return "".concat(second, "s");
+    }
+    else {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
 }
 exports.getDurationString = getDurationString;
 
@@ -41087,16 +41095,21 @@ var TableList = /** @class */ (function (_super) {
             items: [],
         };
         _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.dropDown = _this.dropDown.bind(_this);
         return _this;
     }
     TableList.prototype.componentDidMount = function () {
-        this.setState({ items: this.props.array });
+        if (this.props.array) {
+            this.setState({ items: this.props.array });
+        }
     };
     TableList.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.array !== this.props.array) {
-            this.setState({
-                items: this.props.array,
-            });
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     };
     TableList.prototype.onDragEnd = function (result) {
@@ -41110,24 +41123,47 @@ var TableList = /** @class */ (function (_super) {
         return this.props.onDrag ?
             this.props.onDrag(result.source.index, result.destination.index) : null;
     };
+    TableList.prototype.dropDown = function () {
+        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+            React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
+    };
     TableList.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = (0, classnames_1.default)((_a = {
-                'table-list': !this.props.addItem
+        var classes = (0, classnames_1.default)('', (_a = {
+                'table-list': !this.props.addItem,
+                'table-list--read-only': this.props.readOnly
             },
             _a["".concat(this.props.className)] = this.props.className,
             _a));
-        return (this.props.array ?
-            this.props.dragAndDrop ?
-                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+        return (this.state.items.length > 0
+            ? this.props.dragAndDrop
+                ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
                     React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
                         _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
-                        provided.placeholder)); }))
-                : React.createElement("ul", { className: classes }, this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
-            : this.props.children &&
-                React.createElement("ul", { className: classes }, this.props.children));
+                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                                    ? item.onDoubleClick
+                                    : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                                    && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
+                        provided.placeholder,
+                        (_this.props.addItem && !_this.props.readOnly) &&
+                            React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
+                : React.createElement("ul", { className: classes },
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                            ? item.onDoubleClick
+                            : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            && _this.props.onAddItem(index, item); } })); }),
+                    (this.props.addItem && !this.props.readOnly) &&
+                        React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+            : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
+                React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                    React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+                : null);
     };
     return TableList;
 }(React.PureComponent));
@@ -41135,12 +41171,42 @@ exports.TableList = TableList;
 var TableListItem = /** @class */ (function (_super) {
     __extends(TableListItem, _super);
     function TableListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.delay = 200;
+        _this.prevent = false;
+        _this.onSingleClick = function () {
+            _this.timer = setTimeout(function () {
+                if (!_this.prevent) {
+                    if (_this.props.onClick) {
+                        _this.props.onClick();
+                    }
+                }
+            }, _this.delay);
+        };
+        _this.onDoubleClick = function () {
+            clearTimeout(_this.timer);
+            _this.prevent = true;
+            if (_this.props.onDoubleClick) {
+                _this.props.onDoubleClick();
+            }
+            setTimeout(function () {
+                _this.prevent = false;
+            }, _this.delay);
+        };
+        return _this;
     }
     TableListItem.prototype.render = function () {
+        var _this = this;
+        var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
         return (this.props.addItem ?
             React.createElement("li", { className: 'table-list__item-container' },
-                React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
+                React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
+                    React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                     React.createElement("div", { className: 'table-list__item-content' },
                         React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                         React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -41149,9 +41215,10 @@ var TableListItem = /** @class */ (function (_super) {
                 React.createElement("div", { className: 'table-list__add-bar-container' },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-bar' },
-                            React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
+                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
-            : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
+            : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
+                React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                 React.createElement("div", { className: 'table-list__item-content' },
                     React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                     React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -57318,15 +57385,13 @@ var ReactDOM = __importStar(__webpack_require__(9));
 var core_1 = __webpack_require__(61);
 var react_id_generator_1 = __webpack_require__(8);
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
     var DROPDOWN_ID = "react-placeholder";
     var ref = React.useRef(null);
-    var refSubMenu = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var refButtonSubMenu = React.useRef(null);
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
@@ -57445,20 +57510,7 @@ var Dropdown = function (_a) {
             item['items'].forEach(function (el, key) {
                 submenuItems_1.push(each(el, key));
             });
-            return (React.createElement("li", { key: index },
-                React.createElement("div", { className: 'dropdown' },
-                    React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
-                            var subMenuRef = refSubMenu.current;
-                            var subToggleRef = refButtonSubMenu.current;
-                            if (subMenuRef && subToggleRef) {
-                                (0, core_1.createPopper)(subToggleRef, subMenuRef, {
-                                    placement: 'right-start',
-                                });
-                            }
-                        }, onClick: item['onSelect'] },
-                        item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
-                        item['label']),
-                    React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
         }
         else if (item['type'] === 'group') {
             var groupItems_1 = [];
@@ -57474,7 +57526,7 @@ var Dropdown = function (_a) {
             return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
         }
         else {
-            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
+            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
     return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -57516,12 +57568,46 @@ var Dropdown = function (_a) {
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
+    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: onSelect },
+        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+                onSelect();
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };
+var DropdownItemWithSubmenu = function (_a) {
+    var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
+    var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
+    var refButtonSubMenu = React.useRef(null);
+    var refSubMenu = React.useRef(null);
+    React.useEffect(function () {
+        var subMenuRef = refSubMenu.current;
+        var subToggleRef = refButtonSubMenu.current;
+        if (open === true) {
+            document.body.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        }
+        else if (open === false) {
+            document.body.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+        if (subMenuRef && subToggleRef) {
+            (0, core_1.createPopper)(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
+    return (React.createElement("li", { key: index, ref: refButtonSubMenu },
+        React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
+            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
+                item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
+                item['label']),
+            React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
+};
 
 
 /***/ }),
@@ -62851,22 +62937,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(__webpack_require__(0));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var Form_1 = __webpack_require__(14);
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker(props) {
-        var _this = _super.call(this, props) || this;
+    function TimePicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            invalid: _this.props.invalid ? _this.props.invalid : false,
-        };
         return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));
@@ -99957,14 +100039,22 @@ var SearchBar = /** @class */ (function (_super) {
                     }
                 }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
             this.state.inputValue &&
-                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
+                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
+                        _this.setState({ inputValue: '' });
+                        setTimeout(function () {
+                            if (_this.props.onSubmit) {
+                                _this.props.onSubmit(_this.state.inputValue);
+                            }
+                        });
+                    } },
                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
-                    if (_this.props.onSubmit) {
-                        _this.props.onSubmit(_this.state.inputValue);
-                    }
-                } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+            this.state.inputValue &&
+                React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                    } },
+                    React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
     };
     return SearchBar;
 }(React.PureComponent));
@@ -101651,7 +101741,7 @@ var CoreLayout = /** @class */ (function (_super) {
         return (React.createElement(_1.CoreLayoutContainer, null,
             this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
             this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
-            React.createElement(_1.CoreLayoutMain, null, this.props.children),
+            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
             this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
             this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
     };
@@ -101817,16 +101907,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayoutMain = void 0;
 var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
 var CoreLayoutMain = /** @class */ (function (_super) {
     __extends(CoreLayoutMain, _super);
     function CoreLayoutMain() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     CoreLayoutMain.prototype.render = function () {
-        return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
+        var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
+            'sd-content-wrapper--editor-full': this.props.editorFullWidth,
+        });
+        return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
     };
     return CoreLayoutMain;
 }(React.PureComponent));
@@ -129194,23 +129291,95 @@ var DropdownDoc = /** @class */ (function (_super) {
                 " to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden."),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement(app_typescript_1.Dropdown, { append: true, items: [
+                    React.createElement(app_typescript_1.Dropdown, { header: [
                             {
-                                type: 'group', label: 'actions', items: [
-                                    'divider',
-                                    { label: 'Edit', icon: 'pencil', onSelect: function () { return 1; } },
-                                    { label: 'Copy', icon: 'copy', onSelect: function () { return 1; } },
-                                    { label: 'Delete', icon: 'trash', onSelect: function () { return 1; } },
-                                    'divider',
-                                ]
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                        ],
+                                    },
+                                ],
                             },
+                        ], items: [
                             {
-                                type: 'group', label: 'actions 2', items: [
-                                    { label: 'Download', icon: 'download', onSelect: function () { return 1; } },
-                                    { label: 'Print', icon: 'print', onSelect: function () { return 1; } },
-                                ]
-                            }
-                        ] }, "Drop append to body")),
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ], footer: [
+                            {
+                                type: 'group',
+                                items: [
+                                    {
+                                        icon: 'rundown',
+                                        label: 'Create new Show',
+                                        onSelect: function () { return false; },
+                                    },
+                                ],
+                            },
+                            {
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ] })),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <Dropdown\n                            items={[\n                                { label: 'Action 1', onSelect: () => 1 },\n                                { label: 'Action 2', onSelect: () => 1 },\n                                { label: 'Action 3', onSelect: () => 1 },\n                                { label: 'Action 4', onSelect: () => 1 },\n                                { label: 'Action 5', onSelect: () => 1 },\n                                { label: 'Action 6', onSelect: () => 1 },\n                            ]}>\n                            Drop append to body\n                        </Dropdown>\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Multilevel dropdown"),
             React.createElement("p", { className: 'docs-page__paragraph' },
@@ -129266,7 +129435,11 @@ var DropdownDoc = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
                         React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
-                        React.createElement(app_typescript_1.Dropdown, { align: 'right', items: [
+                        React.createElement(app_typescript_1.Dropdown
+                        //align='right'
+                        , { 
+                            //align='right'
+                            header: [
                                 {
                                     type: 'group', label: 'actions', items: [
                                         'divider',
@@ -129284,6 +129457,33 @@ var DropdownDoc = /** @class */ (function (_super) {
                                         { label: 'Action 4', onSelect: function () { return 1; } },
                                     ]
                                 }
+                            ], items: [
+                            // {
+                            //     type: 'group', label: 'actions', items: [
+                            //         'divider',
+                            //         { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                            //         { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                            //         { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                            //         'divider',
+                            //     ]
+                            // },
+                            // {
+                            //     type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                            //         { label: 'Action 1', onSelect: () => 1 },
+                            //         { label: 'Action 2', onSelect: () => 1 },
+                            //         { label: 'Action 3', onSelect: () => 1 },
+                            //         { label: 'Action 4', onSelect: () => 1 },
+                            //     ]
+                            // }
+                            ], footer: [
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: function () { return 1; } },
+                                        { label: 'Action 2', onSelect: function () { return 1; } },
+                                        { label: 'Action 3', onSelect: function () { return 1; } },
+                                        { label: 'Action 4', onSelect: function () { return 1; } },
+                                    ]
+                                }
                             ] },
                             React.createElement("button", { className: 'sd-navbtn' },
                                 React.createElement("i", { className: "icon-dots-vertical" }))))),
@@ -129294,37 +129494,87 @@ var DropdownDoc = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
                         React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
-                        React.createElement(app_typescript_1.Dropdown, { align: 'right', header: [
+                        React.createElement(app_typescript_1.Dropdown, { append: true, header: [
                                 {
-                                    type: 'group', label: 'header actions', items: [
-                                        { label: 'Header action one', icon: 'download', onSelect: function () { return 1; } },
-                                        { label: 'Header action two', icon: 'trash', onSelect: function () { return 1; } },
-                                    ]
+                                    type: 'group',
+                                    label: 'Create new',
+                                    items: [
+                                        {
+                                            type: 'submenu',
+                                            label: 'Rundown',
+                                            icon: 'plus-sign',
+                                            items: [
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 1',
+                                                    icon: 'plus-sign',
+                                                    items: [],
+                                                },
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 2',
+                                                    icon: 'plus-sign',
+                                                    items: [],
+                                                },
+                                            ],
+                                        },
+                                    ],
                                 },
                             ], items: [
                                 {
                                     type: 'group', label: 'body actions', items: [
-                                        { label: 'Edit', icon: 'pencil', onSelect: function () { return 1; } },
-                                        { label: 'Copy', icon: 'copy', onSelect: function () { return 1; } },
-                                        { label: 'Action 2', icon: 'envelope', onSelect: function () { return 1; } },
-                                        { label: 'Action 3', icon: 'heart', onSelect: function () { return 1; } },
-                                        { label: 'Action 4', icon: 'print', onSelect: function () { return 1; } },
-                                        { label: 'Action 5', icon: 'plus-sign', onSelect: function () { return 1; } },
-                                        { label: 'Action 6', icon: 'minus-sign', onSelect: function () { return 1; } },
-                                        { label: 'Action 7', icon: 'refresh', onSelect: function () { return 1; } },
-                                        { label: 'Action 8', icon: 'pick', onSelect: function () { return 1; } },
-                                        { label: 'Action 9', icon: 'bell', onSelect: function () { return 1; } },
-                                        { label: 'Action 10', icon: 'kill', onSelect: function () { return 1; } },
-                                        { label: 'Action 11', icon: 'settings', onSelect: function () { return 1; } },
-                                        { label: 'Action 12', icon: 'cut', onSelect: function () { return 1; } },
+                                        {
+                                            type: 'group',
+                                            label: 'Create new',
+                                            items: [
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Rundown',
+                                                    icon: 'plus-sign',
+                                                    items: [
+                                                        {
+                                                            type: 'submenu',
+                                                            label: 'Show 1',
+                                                            icon: 'plus-sign',
+                                                            items: [],
+                                                        },
+                                                        {
+                                                            type: 'submenu',
+                                                            label: 'Show 2',
+                                                            icon: 'plus-sign',
+                                                            items: [],
+                                                        },
+                                                    ],
+                                                },
+                                            ],
+                                        },
                                     ]
                                 },
                             ], footer: [
                                 {
-                                    type: 'group', label: 'footer actions', items: [
-                                        { label: 'Create gallery', icon: 'slideshow', onSelect: function () { return 1; } },
-                                        { label: 'Create package', icon: 'composite', onSelect: function () { return 1; } },
-                                    ]
+                                    type: 'group',
+                                    label: 'Create new',
+                                    items: [
+                                        {
+                                            type: 'submenu',
+                                            label: 'Rundown',
+                                            icon: 'plus-sign',
+                                            items: [
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 1',
+                                                    icon: 'plus-sign',
+                                                    items: [],
+                                                },
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 2',
+                                                    icon: 'plus-sign',
+                                                    items: [],
+                                                },
+                                            ],
+                                        },
+                                    ],
                                 },
                             ] },
                             React.createElement("button", { className: 'sd-navbtn' },
@@ -131279,10 +131529,15 @@ var TableListDoc = /** @class */ (function (_super) {
                         React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
                     center: React.createElement("span", null, "Item 1"),
                     end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }),
-                    action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
-                    onClick: function () {
-                        return false;
-                    }
+                    action: React.createElement(app_typescript_1.Dropdown, { append: true, items: [
+                            { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
+                            { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
+                            { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
+                        ] },
+                        React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function (e) { return e.stopPropagation(); } })),
+                    onClick: function () { return console.log('single'); },
+                    onDoubleClick: function () { return console.log('double'); },
+                    hexColor: '#ccff00'
                 },
                 {
                     start: React.createElement(React.Fragment, null,
@@ -131314,28 +131569,14 @@ var TableListDoc = /** @class */ (function (_super) {
         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={[\n                        { label: 'Action 1', onSelect: () => 1 },\n                        { label: 'Action 2', onSelect: () => 1 },\n                        { label: 'Action 3', onSelect: () => 1 },\n                    ]} />\n                "),
-            React.createElement("p", { className: "docs-page__paragraph" }, "Basic:"),
-            React.createElement(Markup.ReactMarkup, null,
-                React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement(TableList_1.TableList, null,
-                        React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
-                                React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
-                                React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }),
-                        React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
-                                React.createElement(app_typescript_1.Label, { style: 'hollow', text: 'aacc' }),
-                                React.createElement(app_typescript_1.Label, { style: 'filled', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }) }),
-                        React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
-                                React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
-                                React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TableList>\n                            <TableListItem\n                            start={\n                                <>\n                                    <Label style='translucent' text='aacc' />\n                                    <Label style='translucent' type='primary' text='prlg' />\n                                </>\n                            }\n                            center={\n                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n                            }\n                            end={\n                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n                            }\n                            action={\n                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n                            } />\n                            <TableListItem\n                            start={\n                                <>\n                                    <Label style='hollow' text='aacc' />\n                                    <Label style='filled' type='primary' text='prlg' />\n                                </>\n                            }\n                            center={\n                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>\n                            }\n                            end={\n                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n                            } />\n                            <TableListItem\n                            start={\n                                <>\n                                    <Label style='translucent' text='aacc' />\n                                    <Label style='translucent' type='primary' text='prlg' />\n                                </>\n                            }\n                            center={\n                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n                            }\n                            end={\n                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n                            }\n                            action={\n                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n                            } />\n                        </TableList>\n                    ")),
             React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: [
+                    React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, onAddItem: function (index, item) { return console.log(index, item); }, array: this.state.array, itemsDropdown: [
                             { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
                             { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
                             { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
-                        ], onClick: function () { return false; }, onDrag: function (start, end) { return console.log(start, end); } })),
+                        ], onDrag: function (start, end) { return console.log(start, end); } })),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <TableList\n                        dragAndDrop\n                        addItem\n                        array={this.state.array}\n                        itemsDropdown={[\n                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },\n                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },\n                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },\n                        ]}\n                        onClick={() => false}\n                        />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement("p", { className: "docs-page__paragraph" }, "TableList"),
@@ -131346,21 +131587,18 @@ var TableListDoc = /** @class */ (function (_super) {
                 React.createElement(app_typescript_1.Prop, { name: 'dragAndDrop', isRequired: false, type: 'boolean', default: 'false', description: 'Drag&Drop functionality.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'itemsDropdown', isRequired: false, type: 'React.ReactNode | any', default: 'false', description: 'Dropdown for functionality to add items to the list.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'className', isRequired: false, type: 'string', default: 'false', description: 'Add class on TableList container.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'showDragHandle', isRequired: false, type: 'string', default: 'always', description: '' }),
                 React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' })),
+                React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' }),
+                React.createElement(app_typescript_1.Prop, { name: 'onAddItem', isRequired: false, type: 'function', default: 'false', description: 'Returns index of draggable item.' })),
             React.createElement("p", { className: "docs-page__paragraph" }, "array:"),
-            React.createElement(app_typescript_1.PropsList, null,
-                React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
-                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("p", { className: "docs-page__paragraph" }, "TableListItem"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
                 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: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }))));
+                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.' }))));
     };
     return TableListDoc;
 }(React.Component));
@@ -134429,7 +134667,7 @@ var CoreLayout = /** @class */ (function (_super) {
         });
     };
     CoreLayout.prototype.render = function () {
-        return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
+        return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: true, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
                 React.createElement(index_1.LeftMenu, { style: 'blanc', reverseItemBorder: true, size: 'large', ariaLabel: 'Left navigation', activeItemId: '1', groups: [
                         { label: 'MAIN SECTIONS', items: [
                                 { id: '1', label: 'Section 1', ref: 'section1' },
@@ -137093,7 +137331,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 649 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.11","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.13","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 */