superdesk-ui-framework 3.1.15 → 3.1.17

package/dist/superdesk-ui.bundle.css

@@ -45613,6 +45613,18 @@ textarea.sd-media-carousel__media-title {
   background-color: var(--sd-colour-interactive);
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
 
+.sd-loader--inline, .sd-loader {
+  display: inline-flex;
+  width: 100%;
+  min-width: 90px;
+  height: 100%;
+  min-height: 30px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTIwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3YjdiN2IiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYwIiBjeT0iMTUiIHI9IjkiIGZpbGwtb3BhY2l0eT0iMC4zIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSI5IiB0bz0iOSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjAuNSIgdG89IjAuNSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvc3ZnPg==");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 60px;
+  background-color: var(--sd-colour-overlay-actioning); }
+
 .sd-loader {
   content: '';
   display: block;
@@ -45621,12 +45633,7 @@ textarea.sd-media-carousel__media-title {
   inset-inline-end: 0;
   inset-block-end: 0;
   inset-inline-start: 0;
-  z-index: 99999;
-  background-image: url(three-dots.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 60px;
-  background-color: var(--sd-colour-overlay-actioning); }
+  z-index: 99999; }
 
 .red--100 {
   background-color: #fde4e2; }

package/dist/superdesk-ui.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 974);
+/******/ 	return __webpack_require__(__webpack_require__.s = 975);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -42134,10 +42134,14 @@ var Loader = /** @class */ (function (_super) {
     }
     Loader.prototype.render = function () {
         if (this.props.overlay) {
-            return (React.createElement("div", { className: 'sd-loader' }));
+            return (React.createElement("div", { className: "sd-loader", style: { backgroundColor: this.props.backgroundColor } }));
         }
         else {
-            return null;
+            return (React.createElement("div", { className: "sd-loader--inline", style: {
+                    width: this.props.width,
+                    height: this.props.height,
+                    backgroundColor: this.props.backgroundColor,
+                } }));
         }
     };
     return Loader;
@@ -64605,7 +64609,7 @@ var PanelHeader = /** @class */ (function (_super) {
                         this.props.iconButtons != null
                             && this.props.iconButtons,
                         this.props.onClose != null
-                            && React.createElement(IconButton_1.IconButton, { icon: 'close-small', ariaValue: 'Close', onClick: this.props.onClose })))),
+                            && (React.createElement(IconButton_1.IconButton, { icon: 'close-small', ariaValue: 'Close', onClick: this.props.onClose }))))),
             this.props.children));
     };
     return PanelHeader;
@@ -150708,7 +150712,8 @@ var SideBarTabs = /** @class */ (function (_super) {
                 }
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
-                        React.createElement("a", { role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab }), onClick: function () { return _this.handleClick(item); } },
+                        React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
+                            }), onClick: function () { return _this.handleClick(item); } },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
@@ -157922,7 +157927,8 @@ angular.module('superdesk-ui.positioner', []).component('sdPositioner', (0, _rea
 /* 971 */,
 /* 972 */,
 /* 973 */,
-/* 974 */
+/* 974 */,
+/* 975 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -158209,53 +158215,53 @@ Object.defineProperty(exports, 'ContentDivider', {
     }
 });
 
-__webpack_require__(975);
+__webpack_require__(976);
 
-__webpack_require__(1010);
+__webpack_require__(1011);
 
 exports.default = angular.module('superdesk-ui', ['superdesk-ui.helper', 'superdesk-ui.carousel', 'superdesk-ui.wizard', 'superdesk-ui.dropdown', 'superdesk-ui.positioner', 'superdesk-ui.modals', 'superdesk-ui.switch', 'superdesk-ui.check', 'superdesk-ui.circularProgress', 'superdesk-ui.toggleBox', 'superdesk-ui.toggleBoxNext', 'superdesk-ui.tags', 'superdesk-ui.lineInput', 'superdesk-ui.searchHandler', 'superdesk-ui.splitter', 'superdesk-ui.mediaQuery']);
 
 /***/ }),
-/* 975 */
+/* 976 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(976);
-
-__webpack_require__(990);
+__webpack_require__(977);
 
-__webpack_require__(992);
+__webpack_require__(991);
 
 __webpack_require__(993);
 
-__webpack_require__(800);
-
 __webpack_require__(994);
 
+__webpack_require__(800);
+
 __webpack_require__(995);
 
 __webpack_require__(996);
 
-__webpack_require__(799);
-
 __webpack_require__(997);
 
-__webpack_require__(1000);
+__webpack_require__(799);
 
-__webpack_require__(1002);
+__webpack_require__(998);
 
-__webpack_require__(1004);
+__webpack_require__(1001);
 
-__webpack_require__(1006);
+__webpack_require__(1003);
 
-__webpack_require__(1008);
+__webpack_require__(1005);
+
+__webpack_require__(1007);
 
 __webpack_require__(1009);
 
+__webpack_require__(1010);
+
 /***/ }),
-/* 976 */
+/* 977 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -158265,22 +158271,22 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-__webpack_require__(977);
-
 __webpack_require__(978);
 
-__webpack_require__(984);
+__webpack_require__(979);
 
 __webpack_require__(985);
 
-__webpack_require__(988);
+__webpack_require__(986);
 
 __webpack_require__(989);
 
+__webpack_require__(990);
+
 exports.default = angular.module('superdesk-ui.helper', ['superdesk-ui.helper.dropdown', 'superdesk-ui.helper.modal', 'superdesk-ui.helper.datepicker', 'superdesk-ui.helper.ngTagsInput']);
 
 /***/ }),
-/* 977 */
+/* 978 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -158497,7 +158503,7 @@ angular.module('superdesk-ui.helper.dateparser', []).service('dateParser', ['$lo
 }]);
 
 /***/ }),
-/* 978 */
+/* 979 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -158716,7 +158722,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(979),
+        template: __webpack_require__(980),
         scope: {
             datepickerMode: '=?',
             dateDisabled: '&',
@@ -158738,7 +158744,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(980),
+        template: __webpack_require__(981),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             scope.showWeeks = ctrl.showWeeks;
@@ -158857,7 +158863,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(981),
+        template: __webpack_require__(982),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             ctrl.step = { years: 1 };
@@ -158914,7 +158920,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(982),
+        template: __webpack_require__(983),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             var range = ctrl.yearRange;
@@ -159281,42 +159287,42 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
         restrict: 'EA',
         replace: true,
         transclude: true,
-        template: __webpack_require__(983)
+        template: __webpack_require__(984)
     };
 });
 
 /***/ }),
-/* 979 */
+/* 980 */
 /***/ (function(module, exports) {
 
 module.exports = "<div ng-switch=\"datepickerMode\" role=\"application\" ng-keydown=\"keydown($event)\">\n  <daypicker ng-switch-when=\"day\" tabindex=\"0\"></daypicker>\n  <monthpicker ng-switch-when=\"month\" tabindex=\"0\"></monthpicker>\n  <yearpicker ng-switch-when=\"year\" tabindex=\"0\"></yearpicker>\n</div>";
 
 /***/ }),
-/* 980 */
+/* 981 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th colspan=\"{{::5 + showWeeks}}\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n    <tr>\n      <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n      <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{::label.abbr}}</small></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\" ng-class=\"::dt.customClass\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 981 */
+/* 982 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\" ng-class=\"::dt.customClass\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 982 */
+/* 983 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th colspan=\"3\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 983 */
+/* 984 */
 /***/ (function(module, exports) {
 
 module.exports = "<ul class=\"dropdown-menu\" ng-if=\"isOpen\" style=\"display: block\" ng-style=\"{top: position.top+'px', left: position.left+'px'}\" ng-keydown=\"keydown($event)\" ng-click=\"$event.stopPropagation()\">\n\t<li ng-transclude></li>\n\t<li ng-if=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n\t\t<span class=\"btn-group pull-left\">\n\t\t\t<button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\">{{ getText('current') }}</button>\n\t\t\t<button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n\t\t</span>\n\t\t<button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n\t</li>\n</ul>\n";
 
 /***/ }),
-/* 984 */
+/* 985 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159659,7 +159665,7 @@ angular.module('superdesk-ui.helper.dropdown', ['superdesk-ui.helper.position'])
 });
 
 /***/ }),
-/* 985 */
+/* 986 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159726,7 +159732,7 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(986),
+        template: __webpack_require__(987),
         compile: function compile(tElement, tAttrs) {
             tElement.addClass(tAttrs.backdropClass);
             return linkFn;
@@ -159753,7 +159759,7 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
         //            templateUrl: function templateUrl(tElement, tAttrs) {
         //                return tAttrs.templateUrl || '../app/template/window.html';
         //            },
-        template: __webpack_require__(987),
+        template: __webpack_require__(988),
         link: function link(scope, element, attrs) {
             element.addClass(attrs.windowClass || '');
             scope.size = attrs.size;
@@ -160130,19 +160136,19 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
 });
 
 /***/ }),
-/* 986 */
+/* 987 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"modal__backdrop fade in\"></div>";
 
 /***/ }),
-/* 987 */
+/* 988 */
 /***/ (function(module, exports) {
 
 module.exports = "<div modal-render=\"{{$isRendered}}\" tabindex=\"-1\" role=\"dialog\" class=\"modal\"\n     modal-animation-class=\"fade\"\n     modal-in-class=\"in\"\n     ng-style=\"{'z-index': 1050 + index * 10, display: 'block'}\"\n     ng-class=\"size ? 'modal--' + size : ''\">\n    <div class=\"modal__dialog\">\n        <div class=\"modal__content\" modal-transclude></div>\n    </div>\n</div>\n";
 
 /***/ }),
-/* 988 */
+/* 989 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -160305,7 +160311,7 @@ angular.module('superdesk-ui.helper.position', [])
 }]);
 
 /***/ }),
-/* 989 */
+/* 990 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -161531,7 +161537,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 })();
 
 /***/ }),
-/* 990 */
+/* 991 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -161548,7 +161554,7 @@ function CarouselDirective() {
             finish: '&',
             model: '='
         },
-        template: __webpack_require__(991),
+        template: __webpack_require__(992),
         transclude: true,
         controllerAs: 'ctrl',
         controller: ['$scope', '$document', function ($scope, $document) {
@@ -161670,13 +161676,13 @@ function CarouselStepDirective() {
 angular.module('superdesk-ui.carousel', []).directive('sdCarousel', CarouselDirective).directive('sdCarouselStep', CarouselStepDirective);
 
 /***/ }),
-/* 991 */
+/* 992 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"sd-carousel__backdrop\"></div>\n<div class=\"sd-carousel\">\n    <div class=\"sd-carousel__dialog\">\n        <div class=\"sd-carousel__content\" ng-transclude></div>\n        <a class=\"sd-carousel__nav-button sd-carousel__nav-button--prev\" ng-click=\"ctrl.previous()\" ng-hide=\"pageIndex === 0\"></a>\n        <a class=\"sd-carousel__nav-button\" ng-click=\"pageIndex === steps.length-1 ? ctrl.finish() : ctrl.next()\" ng-class=\"pageIndex === steps.length-1 ? 'sd-carousel__nav-button--end' : 'sd-carousel__nav-button--next'\"></a>\n        <div class=\"sd-carousel__page-indication-bar\">\n            <span ng-repeat=\"step in steps\" \n                  class=\"sd-carousel__page-indicator\" \n                  ng-class=\"{'sd-carousel__page-indicator--selected': step.selected}\"\n                  ng-click=\"goTo(step)\">\n            </span>\n        </div>\n    </div>\n</div>";
 
 /***/ }),
-/* 992 */
+/* 993 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -161779,7 +161785,7 @@ function sdCheck($parse) {
 angular.module('superdesk-ui.check', []).directive('sdCheck', sdCheck);
 
 /***/ }),
-/* 993 */
+/* 994 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -161959,7 +161965,7 @@ angular.module("superdesk-ui.dropdown", []).directive("dropdown", sdDropdown).di
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(57)))
 
 /***/ }),
-/* 994 */
+/* 995 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162047,7 +162053,7 @@ function sdModal($document, $rootScope) {
 angular.module('superdesk-ui.modals', []).directive('sdModal', sdModal);
 
 /***/ }),
-/* 995 */
+/* 996 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162132,7 +162138,7 @@ function sdSwitch() {
 angular.module('superdesk-ui.switch', []).directive('sdSwitch', sdSwitch);
 
 /***/ }),
-/* 996 */
+/* 997 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162170,7 +162176,7 @@ function ToggleBoxDirective() {
 angular.module('superdesk-ui.toggleBox', []).directive('sdToggleBox', ToggleBoxDirective);
 
 /***/ }),
-/* 997 */
+/* 998 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162205,7 +162211,7 @@ function WizardHandlerFactory() {
 WizardDirective.$inject = [];
 function WizardDirective() {
     return {
-        template: __webpack_require__(998),
+        template: __webpack_require__(999),
         scope: {
             currentStep: '=',
             finish: '&',
@@ -162309,7 +162315,7 @@ function WizardDirective() {
 WizardStepDirective.$inject = [];
 function WizardStepDirective() {
     return {
-        template: __webpack_require__(999),
+        template: __webpack_require__(1000),
         scope: {
             title: '@',
             code: '@',
@@ -162327,19 +162333,19 @@ function WizardStepDirective() {
 angular.module('superdesk-ui.wizard', []).factory('WizardHandler', WizardHandlerFactory).directive('sdWizard', WizardDirective).directive('sdWizardStep', WizardStepDirective);
 
 /***/ }),
-/* 998 */
+/* 999 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"modal__body-header\">\n    <ul class=\"nav-tabs\">\n        <li ng-repeat=\"step in steps\" ng-class=\"{'nav-tabs__tab--active': step.selected}\" class=\"nav-tabs__tab\">\n            <button\n                ng-click=\"goTo(step)\"\n                ng-disabled=\"step.disabled\"\n                ng-hide=\"step.hide\"\n                class=\"nav-tabs__link\"\n                data-test-id=\"wizard--{{step.title}}\"\n            >\n                {{ step.title}}\n            </button>\n        </li>\n    </ul>\n</div>\n<div class=\"modal__body-content\" ng-transclude></div>";
 
 /***/ }),
-/* 999 */
+/* 1000 */
 /***/ (function(module, exports) {
 
 module.exports = "<div ng-show=\"selected\" class=\"modal-screen\" ng-transclude></div>\r\n";
 
 /***/ }),
-/* 1000 */
+/* 1001 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162368,7 +162374,7 @@ function TagInputDirective($q) {
             maxResultsToShow: '='
         },
         require: '?ngModel',
-        template: __webpack_require__(1001),
+        template: __webpack_require__(1002),
         link: function link(scope) {
             scope.loadTags = function (query) {
                 return $q(function (resolve, reject) {
@@ -162386,13 +162392,13 @@ function TagInputDirective($q) {
 angular.module('superdesk-ui.tags', []).directive('sdTagInput', TagInputDirective);
 
 /***/ }),
-/* 1001 */
+/* 1002 */
 /***/ (function(module, exports) {
 
 module.exports = "<label class=\"tags-input__label\" ng-if=\"label\">{{label}}</label>\n<tags-input ng-model=\"model\"\n    add-from-autocomplete-only=\"{{items ? !freetext : false}}\"\n    show-button=\"{{!!items}}\"\n    display-property=\"{{field}}\"\n    key-property=\"{{keyProperty}}\"\n    use-strings=\"{{!field}}\"\n    ng-required=\"required\"\n    on-tag-added=\"onChange($tag)\"\n    on-tag-removed=\"onChange($tag)\"\n    replace-spaces-with-dashes=\"{{replaceSpacesWithDashes}}\"\n    min-length=\"{{minLength}}\"\n    max-length=\"{{maxLength}}\"\n    max-tags=\"{{maxTags}}\"\n    max-items=\"{{maxItems}}\"\n    boxed={{boxed}}\n    placeholder=\"{{placeholder}}\">\n\n    <auto-complete ng-if=\"items\"\n        source=\"loadTags($query)\"\n        load-on-empty=\"true\"\n        min-length=\"{{minLength}}\"\n        display-property=\"{{field}}\"\n        key-property=\"{{keyProperty}}\"\n        max-results-to-show=\"{{maxResultsToShow}}\">\n    </auto-complete>\n</tags-input>\n";
 
 /***/ }),
-/* 1002 */
+/* 1003 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162409,7 +162415,7 @@ module.exports = "<label class=\"tags-input__label\" ng-if=\"label\">{{label}}</
  */
 function LineInputDirective() {
     return {
-        template: __webpack_require__(1003),
+        template: __webpack_require__(1004),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -162451,13 +162457,13 @@ function LineInputDirective() {
 angular.module('superdesk-ui.lineInput', []).directive('sdLineInput', LineInputDirective);
 
 /***/ }),
-/* 1003 */
+/* 1004 */
 /***/ (function(module, exports) {
 
 module.exports = " <div class=\"sd-line-input\" ng-class=\"{'sd-line-input--dark-ui': dark, 'sd-line-input--boxed': boxed, 'sd-line-input--required': required}\">\n    <label class=\"sd-line-input__label\" translate>{{label}}</label>\n\n    <input class=\"sd-line-input__input\" type=\"text\" ng-model=\"modelFixed.value\" ng-change=\"update(modelFixed.value)\" ng-blur=\"onblur()\" ng-disabled=\"disabled\" placeholder=\"{{placeholder}}\" ng-if=\"!transclude && !textarea\">\n\n    <textarea class=\"sd-line-input__input\"\n        ng-model=\"modelFixed.value\"\n        ng-change=\"update(modelFixed.value)\"\n        ng-blur=\"onblur()\"\n        ng-disabled=\"disabled\"\n        placeholder=\"{{placeholder}}\"\n        ng-if=\"textarea\"\n        sd-auto-height>\n    </textarea>\n\n    <ng-transclude></ng-transclude>\n    <div class=\"sd-line-input__char-count\" ng-if=\"maxlength\" sd-character-count data-item=\"modelFixed.value\" data-limit=\"maxlength\" data-html=\"true\"></div>\n</div>\n";
 
 /***/ }),
-/* 1004 */
+/* 1005 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162477,7 +162483,7 @@ module.exports = " <div class=\"sd-line-input\" ng-class=\"{'sd-line-input--dark
  */
 function SearchHandlerDirective() {
     return {
-        template: __webpack_require__(1005),
+        template: __webpack_require__(1006),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -162503,13 +162509,13 @@ function SearchHandlerDirective() {
 angular.module('superdesk-ui.searchHandler', []).directive('sdSearchHandler', SearchHandlerDirective);
 
 /***/ }),
-/* 1005 */
+/* 1006 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"flat-searchbar extended\">\n    <div class=\"search-handler\" ng-class=\"{'search-handler--left-border': borderleft}\">\n        <label for=\"search-input\" class=\"trigger-icon\"><i class=\"icon-search\"></i></label>\n        <input id=\"search-input\" type=\"text\" placeholder=\"{{ :: label || 'Search' }}\" ng-model=\"model\" ng-model-options=\"{debounce: debounce}\">\n        <button class=\"search-close\" ng-if=\"model.length\" ng-click=\"clearInput()\" ng-class=\"{visible: model.length}\"><i class=\"icon-remove-sign\"></i></button>\n\n        <button class=\"search-close\" ng-if=\"button && model.length\" ng-click=\"\" ng-class=\"{visible: button && model.length}\">\n            <i class=\"big-icon--chevron-right\"></i>\n        </button>\n    </div>\n</div>\n";
 
 /***/ }),
-/* 1006 */
+/* 1007 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162525,7 +162531,7 @@ function sdCircularProgress() {
             error: '=',
             counter: '='
         },
-        template: __webpack_require__(1007),
+        template: __webpack_require__(1008),
         link: function link(scope, element) {
             var elem = $(element).find('.progress-svg');
 
@@ -162571,13 +162577,13 @@ angular.module('superdesk-ui.circularProgress', []).directive('sdCircularProgres
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(57)))
 
 /***/ }),
-/* 1007 */
+/* 1008 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"progress-bar-container\">\n    <div  class=\"progress-done\" ng-class=\"{'progress-done--completed': status === 'completed', 'progress-done--error': status === 'error'}\">\n        <i class=\"icon-ok\" ng-hide=\"status === 'error'\"></i>\n        <i class=\"icon-close-small\" ng-hide=\"status === 'completed'\"></i>\n    </div>\n    <span class=\"progress-text\" ng-if=\"counter\">{{value}}<em>%</em></span>\n    <svg class=\"progress-svg\">\n        <circle ng-attr-r=\"{{radius}}\" ng-attr-cx=\"50%\" ng-attr-cy=\"50%\"></circle>\n        <circle class=\"progressbar\" ng-attr-r=\"{{radius}}\" ng-attr-cx=\"50%\" ng-attr-cy=\"50%\" ng-style=\"{'stroke-dashoffset': dashOffset, 'stroke-dasharray': circumference}\"></circle>\n    </svg>\n</div>";
 
 /***/ }),
-/* 1008 */
+/* 1009 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162622,7 +162628,7 @@ function SplitterDirective($window) {
 angular.module('superdesk-ui.splitter', []).directive('sdSplitter', SplitterDirective);
 
 /***/ }),
-/* 1009 */
+/* 1010 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162663,16 +162669,16 @@ function MediaQuery($window) {
 angular.module('superdesk-ui.mediaQuery', []).directive('sdMediaQuery', MediaQuery);
 
 /***/ }),
-/* 1010 */
+/* 1011 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(1011);
+__webpack_require__(1012);
 
 /***/ }),
-/* 1011 */
+/* 1012 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin

package/examples/pages/components/Index.tsx

@@ -84,6 +84,7 @@ import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
 import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
+import LoaderDoc from './Loader';
 
 
 interface IPages {
@@ -181,7 +182,11 @@ const pages: IPages = {
             "illustration-button": {
                 name: 'Illustration Button',
                 component: IllustrationButtonDoc,
-            }
+            },
+            "loader": {
+                name: 'Loader',
+                component: LoaderDoc,
+            },
         }
     },
     navigationComponents: {

package/examples/pages/components/Loader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {Loader} from '../../../app-typescript';
+
+export default class LoaderDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Loader</h2>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <Loader />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <Loader />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",