superdesk-ui-framework 3.0.1-beta.4 → 3.0.1-beta.5

package/dist/examples.bundle.js

@@ -6014,8 +6014,8 @@ var SearchBar_1 = __webpack_require__(418);
 Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
 var WithSizeObserver_1 = __webpack_require__(250);
 Object.defineProperty(exports, "WithSizeObserver", { enumerable: true, get: function () { return WithSizeObserver_1.WithSizeObserver; } });
-__exportStar(__webpack_require__(15), exports);
 __exportStar(__webpack_require__(16), exports);
+__exportStar(__webpack_require__(15), exports);
 __exportStar(__webpack_require__(72), exports);
 __exportStar(__webpack_require__(239), exports);
 var Skeleton_1 = __webpack_require__(240);
@@ -7716,6 +7716,32 @@ function toDate(argument) {
 
 "use strict";
 
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
+var FormRow_1 = __webpack_require__(263);
+Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
+var FormGroup_1 = __webpack_require__(264);
+Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
+var FormItem_1 = __webpack_require__(265);
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
+var FormText_1 = __webpack_require__(266);
+Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
+var FormLabel_1 = __webpack_require__(51);
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
+var InputWrapper_1 = __webpack_require__(267);
+Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
+var InputBase_1 = __webpack_require__(268);
+Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
+var InputNew_1 = __webpack_require__(269);
+Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
+
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationPanel = exports.MainMenu = exports.BottomBarAction = exports.HamburgerButton = exports.CoreLayoutOverlay = exports.CoreLayoutFooter = exports.CoreLayoutSlideInMenu = exports.CoreLayoutMain = exports.CoreLayoutTopMenu = exports.CoreLayoutContainer = exports.CoreLayout = exports.AuthorinInnerSideBar = exports.AuthoringInnerBody = exports.AuthoringInnerHeader = exports.AuthoringMainContent = exports.AuthoringMainToolBar = exports.AuthoringMainContainer = exports.AuthoringMain = exports.AuthoringFrame = exports.AuthoringFrameOverlay = exports.AuthoringFrameSidePanelOverlay = exports.AuthoringFrameSidePanel = exports.AuthoringFrameRightBar = exports.AuthoringFrameLeftBar = exports.AuthoringFrameNavBar = exports.AuthoringFrameMain = exports.AuthoringFrameContainer = exports.Container = exports.PageLayout = exports.ContentSplitter = exports.AuthoringContainer = exports.OverlayPanel = exports.RightPanel = exports.LeftPanel = exports.IMainPanelProps = exports.MainPanel = exports.HeaderPanel = exports.LayoutContainer = exports.Layout = exports.PanelHeaderSlidingToolbar = exports.PanelFooter = exports.PanelContentBlock = exports.PanelContent = exports.PanelHeader = exports.Panel = void 0;
 var Panel_1 = __webpack_require__(238);
@@ -7804,32 +7830,6 @@ var NotificationPanel_1 = __webpack_require__(456);
 Object.defineProperty(exports, "NotificationPanel", { enumerable: true, get: function () { return NotificationPanel_1.NotificationPanel; } });
 
 
-/***/ }),
-/* 16 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
-var FormRow_1 = __webpack_require__(263);
-Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
-var FormGroup_1 = __webpack_require__(264);
-Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
-var FormItem_1 = __webpack_require__(265);
-Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
-var FormText_1 = __webpack_require__(266);
-Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(51);
-Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
-var InputWrapper_1 = __webpack_require__(267);
-Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
-var InputBase_1 = __webpack_require__(268);
-Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
-var InputNew_1 = __webpack_require__(269);
-Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
-
-
 /***/ }),
 /* 17 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -38893,7 +38893,7 @@ var calendar_1 = __webpack_require__(316);
 var lodash_1 = __webpack_require__(33);
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -40711,59 +40711,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DurationInput = void 0;
+exports.getDurationString = exports.DurationInput = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var moment_1 = __importDefault(__webpack_require__(1));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
+var Form_1 = __webpack_require__(15);
 var DurationInput = /** @class */ (function (_super) {
     __extends(DurationInput, _super);
     function DurationInput(props) {
-        var _a;
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            hours: _this.props.hours ? _this.zerPad(_this.props.hours) : _this.zerPad(0),
-            minutes: _this.props.minutes ? _this.zerPad(_this.props.minutes) : _this.zerPad(0),
-            seconds: _this.props.seconds ? _this.zerPad(_this.props.seconds) : _this.zerPad(0),
-            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
+            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),
         };
         _this.hourRef = React.createRef();
         _this.minuteRef = React.createRef();
         _this.secondRef = React.createRef();
         _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        _this.zerPad = _this.zerPad.bind(_this);
+        _this.zeroPad = _this.zeroPad.bind(_this);
         _this.handleChange = _this.handleChange.bind(_this);
         _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
         _this.handleKeyValue = _this.handleKeyValue.bind(_this);
+        _this.valueUpdate = _this.valueUpdate.bind(_this);
+        _this.stateUpdate = _this.stateUpdate.bind(_this);
         return _this;
     }
-    DurationInput.prototype.componentDidUpdate = function (_, prevState) {
-        if (this.props.onChange) {
-            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
-                .asSeconds());
+    DurationInput.prototype.stateUpdate = function (state, parametar1, parametar2, parametar3) {
+        var value;
+        if (state === 'hours') {
+            value = parametar1
+                ? parametar1 + Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600)
+                : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
+        }
+        else if (state === 'minutes') {
+            value = parametar1
+                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
+                : Math.floor((parametar2 || 0) % 3600 / 60);
         }
+        else {
+            value = parametar1 ? parametar1 % 60 : 0;
+        }
+        return this.zeroPad(value);
+    };
+    DurationInput.prototype.componentDidUpdate = function (_, prevState) {
         if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
             return;
         }
         if (this.state.hours !== prevState.hours) {
             if (Number(this.hourRef.current.value) > 99) {
                 this.setState({
-                    hours: this.zerPad(99),
+                    hours: this.zeroPad(99),
                 });
             }
         }
         if (this.state.minutes !== prevState.minutes) {
             if (Number(this.minuteRef.current.value) > 59) {
                 this.setState({
-                    hours: this.zerPad(Number(this.state.hours) + 1),
-                    minutes: this.zerPad(0),
+                    hours: this.zeroPad(Number(this.state.hours) + 1),
+                    minutes: this.zeroPad(this.state.minutes % 60),
                 });
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
-                    hours: this.zerPad(Number(this.state.hours)) > 0
-                        ? this.zerPad(Number(this.state.hours) - 1)
-                        : this.zerPad(Number(this.state.hours)),
+                    hours: this.zeroPad(Number(this.state.hours)) > 0
+                        ? this.zeroPad(Number(this.state.hours) - 1)
+                        : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,
                 });
             }
@@ -40771,18 +40786,24 @@ var DurationInput = /** @class */ (function (_super) {
         if (this.state.seconds !== prevState.seconds) {
             if (Number(this.secondRef.current.value) > 59) {
                 this.setState({
-                    minutes: this.zerPad(Number(this.state.minutes) + 1),
-                    seconds: this.zerPad(0),
+                    minutes: this.zeroPad(Number(this.state.minutes) + 1),
+                    seconds: this.zeroPad(this.state.seconds % 60),
                 });
             }
             if (Number(this.secondRef.current.value) < 0) {
                 this.setState({
-                    minutes: this.zerPad(Number(this.state.minutes) - 1),
+                    minutes: this.zeroPad(Number(this.state.minutes) - 1),
                     seconds: 59,
                 });
             }
         }
     };
+    DurationInput.prototype.valueUpdate = function () {
+        if (this.props.onChange) {
+            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
+                .asSeconds());
+        }
+    };
     DurationInput.prototype.handleKeyDown = function (event) {
         if (!(event.target instanceof HTMLInputElement)) {
             return;
@@ -40825,6 +40846,12 @@ var DurationInput = /** @class */ (function (_super) {
         }
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
             this.handleKeyValue(event, event.target.id);
+            setTimeout(this.valueUpdate);
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            if (!this.state.hours || !this.state.minutes || !this.state.seconds) {
+                setTimeout(this.valueUpdate);
+            }
         }
     };
     DurationInput.prototype.handleKeyValue = function (event, state) {
@@ -40840,24 +40867,26 @@ var DurationInput = /** @class */ (function (_super) {
         if (event.key === 'ArrowUp') {
             if (event.target.id === 'hours') {
                 stateClone[state] = this.state[state] < 99
-                    ? this.zerPad(Number(this.state[state]) + 1)
-                    : this.zerPad(99);
+                    ? this.zeroPad(Number(this.state[state]) + 1)
+                    : this.zeroPad(99);
             }
             else {
-                stateClone[state] = this.zerPad(Number(this.state[state]) + 1);
+                stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
             }
         }
         else if (event.key === 'ArrowDown') {
             if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] > 0 ? this.zerPad(Number(this.state[state]) - 1) : this.zerPad(0);
+                stateClone[state] = this.state[state] > 0
+                    ? this.zeroPad(Number(this.state[state]) - 1)
+                    : this.zeroPad(0);
             }
             else {
-                stateClone[state] = this.zerPad(Number(this.state[state]) - 1);
+                stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
             }
         }
         this.setState(stateClone);
     };
-    DurationInput.prototype.zerPad = function (value) {
+    DurationInput.prototype.zeroPad = function (value) {
         if (value.toString().length === 1 || value === 0) {
             return "0".concat(value);
         }
@@ -40877,6 +40906,7 @@ var DurationInput = /** @class */ (function (_super) {
             stateClone[state] = event.target.value;
         }
         this.setState(stateClone);
+        setTimeout(this.valueUpdate);
     };
     DurationInput.prototype.handleFocus = function (ref, state) {
         ref === null || ref === void 0 ? void 0 : ref.focus();
@@ -40884,65 +40914,53 @@ var DurationInput = /** @class */ (function (_super) {
             ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
         });
         var stateClone = {};
-        stateClone[state] = this.zerPad(this.state[state]);
+        stateClone[state] = this.zeroPad(this.state[state]);
         this.setState(stateClone);
     };
     DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
         if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
-            var target = event.target;
-            if (target.value.length >= 2) {
-                ref === null || ref === void 0 ? void 0 : ref.focus();
-                setTimeout(function () {
-                    ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
-                });
+            if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
+                var target = event.target;
+                if (target.value.length >= 2) {
+                    ref === null || ref === void 0 ? void 0 : ref.focus();
+                    setTimeout(function () {
+                        ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
+                    });
+                }
             }
         }
     };
     DurationInput.prototype.render = function () {
         var _this = this;
         var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
-        var classes = (0, classnames_1.default)('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        var htmlId = (0, react_id_generator_1.default)();
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: htmlId, id: htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+        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', 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.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: 'duration-input', 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) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
                 React.createElement("span", { className: 'sd-input__suffix' }, "h"),
-                React.createElement("input", { className: 'duration-input', 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.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: 'duration-input', 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) {
                         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.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                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) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "s")),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
     };
     return DurationInput;
 }(React.PureComponent));
 exports.DurationInput = DurationInput;
+function getDurationString(seconds) {
+    return moment_1.default.utc(seconds * 1000).format("HH:mm:ss");
+}
+exports.getDurationString = getDurationString;
 
 
 /***/ }),
@@ -61377,7 +61395,7 @@ 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__(16);
+var Form_1 = __webpack_require__(15);
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
@@ -63883,7 +63901,7 @@ exports.Input = 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__(16);
+var Form_1 = __webpack_require__(15);
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
@@ -64408,7 +64426,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputNew = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var _1 = __webpack_require__(16);
+var _1 = __webpack_require__(15);
 var InputNew = /** @class */ (function (_super) {
     __extends(InputNew, _super);
     function InputNew(props) {
@@ -64432,7 +64450,9 @@ var InputNew = /** @class */ (function (_super) {
         return (React.createElement(_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.state.invalid, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement(_1.InputBase, { type: "text", onChange: function (value) {
                     _this.setState({ value: value });
-                    _this.setState({ invalid: _this.props.maxLength ? value.length > _this.props.maxLength : false });
+                    _this.setState({ invalid: _this.props.maxLength
+                            ? value.length > _this.props.maxLength
+                            : false });
                     _this.props.onChange(value);
                 }, disabled: this.props.disabled, htmlId: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, placeholder: this.props.placeholder })));
     };
@@ -64489,7 +64509,7 @@ exports.Option = exports.Select = 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__(16);
+var Form_1 = __webpack_require__(15);
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
@@ -64576,7 +64596,7 @@ var React = __importStar(__webpack_require__(0));
 var dropdown_1 = __webpack_require__(272);
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var labelKey = 'label';
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
@@ -95623,7 +95643,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           maskVisible: true
         }, function () {
-          _this5.mask.style.zIndex = String(_this5.zIndex);
+          _this5.mask.style.zIndex = String(this.zIndex);
         });
       }
 
@@ -99270,7 +99290,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 // External Modules
 var React = __importStar(__webpack_require__(0));
-var Layouts_1 = __webpack_require__(15);
+var Layouts_1 = __webpack_require__(16);
 var PageLayout = /** @class */ (function (_super) {
     __extends(PageLayout, _super);
     function PageLayout() {
@@ -99867,7 +99887,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringFrame = void 0;
 // External Modules
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var AuthoringFrame = /** @class */ (function (_super) {
     __extends(AuthoringFrame, _super);
     function AuthoringFrame() {
@@ -99931,7 +99951,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringMain = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var AuthoringMain = /** @class */ (function (_super) {
     __extends(AuthoringMain, _super);
     function AuthoringMain() {
@@ -100355,7 +100375,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayout = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var CoreLayout = /** @class */ (function (_super) {
     __extends(CoreLayout, _super);
     function CoreLayout() {
@@ -100473,8 +100493,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayoutTopMenu = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
-var _2 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
+var _2 = __webpack_require__(16);
 var CoreLayoutTopMenu = /** @class */ (function (_super) {
     __extends(CoreLayoutTopMenu, _super);
     function CoreLayoutTopMenu() {
@@ -104902,8 +104922,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RundownEditor = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
-var Layout = __importStar(__webpack_require__(15));
-var Form = __importStar(__webpack_require__(16));
+var Layout = __importStar(__webpack_require__(16));
+var Form = __importStar(__webpack_require__(15));
 var Nav = __importStar(__webpack_require__(72));
 var TableList_1 = __webpack_require__(466);
 var RundownEditor = /** @class */ (function (_super) {
@@ -132327,7 +132347,7 @@ exports.PageLayoutTest = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
 var GridElements = __importStar(__webpack_require__(68));
-var Layout = __importStar(__webpack_require__(15));
+var Layout = __importStar(__webpack_require__(16));
 var items_1 = __importDefault(__webpack_require__(469));
 var PageLayoutTest = /** @class */ (function (_super) {
     __extends(PageLayoutTest, _super);
@@ -132460,8 +132480,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorTest = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
-var Layout = __importStar(__webpack_require__(15));
-var Form = __importStar(__webpack_require__(16));
+var Layout = __importStar(__webpack_require__(16));
+var Form = __importStar(__webpack_require__(15));
 var Nav = __importStar(__webpack_require__(72));
 var Lists_1 = __webpack_require__(239);
 var Lists_2 = __webpack_require__(239);
@@ -132710,8 +132730,8 @@ exports.PersonalProfile = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(46));
 var index_1 = __webpack_require__(3);
-var Layout = __importStar(__webpack_require__(15));
-var Form = __importStar(__webpack_require__(16));
+var Layout = __importStar(__webpack_require__(16));
+var Form = __importStar(__webpack_require__(15));
 var PersonalProfile = /** @class */ (function (_super) {
     __extends(PersonalProfile, _super);
     function PersonalProfile(props) {
@@ -133062,8 +133082,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rundowns = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
-var Layout = __importStar(__webpack_require__(15));
-var Form = __importStar(__webpack_require__(16));
+var Layout = __importStar(__webpack_require__(16));
+var Form = __importStar(__webpack_require__(15));
 var RundownEditor_1 = __webpack_require__(482);
 var Nav = __importStar(__webpack_require__(72));
 var ContentList_1 = __webpack_require__(241);
@@ -133601,7 +133621,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayout = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
-var Layout = __importStar(__webpack_require__(15));
+var Layout = __importStar(__webpack_require__(16));
 var BottomNav_1 = __webpack_require__(251);
 var lodash_1 = __webpack_require__(33);
 var CoreLayout = /** @class */ (function (_super) {
@@ -133969,7 +133989,7 @@ var React = __importStar(__webpack_require__(0));
 var multiselect_1 = __webpack_require__(622);
 var classnames_1 = __importDefault(__webpack_require__(2));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var MultiSelect = /** @class */ (function (_super) {
     __extends(MultiSelect, _super);
     function MultiSelect(props) {
@@ -136343,7 +136363,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 633 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.4","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","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@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","patch-package":"6.2.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-4","@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.5","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","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@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","patch-package":"6.2.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-4","@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"}}
 
 /***/ }),
 /* 634 */