superdesk-ui-framework 4.0.37 → 4.0.38

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 = 978);
+/******/ 	return __webpack_require__(__webpack_require__.s = 980);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -158987,7 +158987,9 @@ angular.module('superdesk-ui.positioner', []).component('sdPositioner', (0, _rea
 /* 975 */,
 /* 976 */,
 /* 977 */,
-/* 978 */
+/* 978 */,
+/* 979 */,
+/* 980 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159280,40 +159282,38 @@ Object.defineProperty(exports, 'CalendarWeekDayItem', {
     }
 });
 
-__webpack_require__(979);
+__webpack_require__(981);
 
-__webpack_require__(1014);
+__webpack_require__(1016);
 
 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']);
 
 /***/ }),
-/* 979 */
+/* 981 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(980);
-
-__webpack_require__(994);
+__webpack_require__(982);
 
 __webpack_require__(996);
 
-__webpack_require__(997);
-
-__webpack_require__(802);
-
 __webpack_require__(998);
 
 __webpack_require__(999);
 
-__webpack_require__(1000);
+__webpack_require__(802);
 
-__webpack_require__(801);
+__webpack_require__(1000);
 
 __webpack_require__(1001);
 
-__webpack_require__(1004);
+__webpack_require__(1002);
+
+__webpack_require__(801);
+
+__webpack_require__(1003);
 
 __webpack_require__(1006);
 
@@ -159323,10 +159323,12 @@ __webpack_require__(1010);
 
 __webpack_require__(1012);
 
-__webpack_require__(1013);
+__webpack_require__(1014);
+
+__webpack_require__(1015);
 
 /***/ }),
-/* 980 */
+/* 982 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159336,22 +159338,22 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-__webpack_require__(981);
+__webpack_require__(983);
 
-__webpack_require__(982);
+__webpack_require__(984);
 
-__webpack_require__(988);
+__webpack_require__(990);
 
-__webpack_require__(989);
+__webpack_require__(991);
 
-__webpack_require__(992);
+__webpack_require__(994);
 
-__webpack_require__(993);
+__webpack_require__(995);
 
 exports.default = angular.module('superdesk-ui.helper', ['superdesk-ui.helper.dropdown', 'superdesk-ui.helper.modal', 'superdesk-ui.helper.datepicker', 'superdesk-ui.helper.ngTagsInput']);
 
 /***/ }),
-/* 981 */
+/* 983 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159568,7 +159570,7 @@ angular.module('superdesk-ui.helper.dateparser', []).service('dateParser', ['$lo
 }]);
 
 /***/ }),
-/* 982 */
+/* 984 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -159787,7 +159789,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(983),
+        template: __webpack_require__(985),
         scope: {
             datepickerMode: '=?',
             dateDisabled: '&',
@@ -159809,7 +159811,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(984),
+        template: __webpack_require__(986),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             scope.showWeeks = ctrl.showWeeks;
@@ -159928,7 +159930,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(985),
+        template: __webpack_require__(987),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             ctrl.step = { years: 1 };
@@ -159985,7 +159987,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(986),
+        template: __webpack_require__(988),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             var range = ctrl.yearRange;
@@ -160352,42 +160354,42 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
         restrict: 'EA',
         replace: true,
         transclude: true,
-        template: __webpack_require__(987)
+        template: __webpack_require__(989)
     };
 });
 
 /***/ }),
-/* 983 */
+/* 985 */
 /***/ (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>";
 
 /***/ }),
-/* 984 */
+/* 986 */
 /***/ (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";
 
 /***/ }),
-/* 985 */
+/* 987 */
 /***/ (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";
 
 /***/ }),
-/* 986 */
+/* 988 */
 /***/ (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";
 
 /***/ }),
-/* 987 */
+/* 989 */
 /***/ (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";
 
 /***/ }),
-/* 988 */
+/* 990 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -160730,7 +160732,7 @@ angular.module('superdesk-ui.helper.dropdown', ['superdesk-ui.helper.position'])
 });
 
 /***/ }),
-/* 989 */
+/* 991 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -160797,7 +160799,7 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(990),
+        template: __webpack_require__(992),
         compile: function compile(tElement, tAttrs) {
             tElement.addClass(tAttrs.backdropClass);
             return linkFn;
@@ -160824,7 +160826,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__(991),
+        template: __webpack_require__(993),
         link: function link(scope, element, attrs) {
             element.addClass(attrs.windowClass || '');
             scope.size = attrs.size;
@@ -161201,19 +161203,19 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
 });
 
 /***/ }),
-/* 990 */
+/* 992 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"modal__backdrop fade in\"></div>";
 
 /***/ }),
-/* 991 */
+/* 993 */
 /***/ (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";
 
 /***/ }),
-/* 992 */
+/* 994 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -161376,7 +161378,7 @@ angular.module('superdesk-ui.helper.position', [])
 }]);
 
 /***/ }),
-/* 993 */
+/* 995 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162602,7 +162604,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 })();
 
 /***/ }),
-/* 994 */
+/* 996 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162619,7 +162621,7 @@ function CarouselDirective() {
             finish: '&',
             model: '='
         },
-        template: __webpack_require__(995),
+        template: __webpack_require__(997),
         transclude: true,
         controllerAs: 'ctrl',
         controller: ['$scope', '$document', function ($scope, $document) {
@@ -162741,13 +162743,13 @@ function CarouselStepDirective() {
 angular.module('superdesk-ui.carousel', []).directive('sdCarousel', CarouselDirective).directive('sdCarouselStep', CarouselStepDirective);
 
 /***/ }),
-/* 995 */
+/* 997 */
 /***/ (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>";
 
 /***/ }),
-/* 996 */
+/* 998 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -162850,7 +162852,7 @@ function sdCheck($parse) {
 angular.module('superdesk-ui.check', []).directive('sdCheck', sdCheck);
 
 /***/ }),
-/* 997 */
+/* 999 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163030,7 +163032,7 @@ angular.module("superdesk-ui.dropdown", []).directive("dropdown", sdDropdown).di
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(75)))
 
 /***/ }),
-/* 998 */
+/* 1000 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163118,7 +163120,7 @@ function sdModal($document, $rootScope) {
 angular.module('superdesk-ui.modals', []).directive('sdModal', sdModal);
 
 /***/ }),
-/* 999 */
+/* 1001 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163203,7 +163205,7 @@ function sdSwitch() {
 angular.module('superdesk-ui.switch', []).directive('sdSwitch', sdSwitch);
 
 /***/ }),
-/* 1000 */
+/* 1002 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163241,7 +163243,7 @@ function ToggleBoxDirective() {
 angular.module('superdesk-ui.toggleBox', []).directive('sdToggleBox', ToggleBoxDirective);
 
 /***/ }),
-/* 1001 */
+/* 1003 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163276,7 +163278,7 @@ function WizardHandlerFactory() {
 WizardDirective.$inject = [];
 function WizardDirective() {
     return {
-        template: __webpack_require__(1002),
+        template: __webpack_require__(1004),
         scope: {
             currentStep: '=',
             finish: '&',
@@ -163380,7 +163382,7 @@ function WizardDirective() {
 WizardStepDirective.$inject = [];
 function WizardStepDirective() {
     return {
-        template: __webpack_require__(1003),
+        template: __webpack_require__(1005),
         scope: {
             title: '@',
             code: '@',
@@ -163398,19 +163400,19 @@ function WizardStepDirective() {
 angular.module('superdesk-ui.wizard', []).factory('WizardHandler', WizardHandlerFactory).directive('sdWizard', WizardDirective).directive('sdWizardStep', WizardStepDirective);
 
 /***/ }),
-/* 1002 */
+/* 1004 */
 /***/ (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>";
 
 /***/ }),
-/* 1003 */
+/* 1005 */
 /***/ (function(module, exports) {
 
 module.exports = "<div ng-show=\"selected\" class=\"modal-screen\" ng-transclude></div>\r\n";
 
 /***/ }),
-/* 1004 */
+/* 1006 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163439,7 +163441,7 @@ function TagInputDirective($q) {
             maxResultsToShow: '='
         },
         require: '?ngModel',
-        template: __webpack_require__(1005),
+        template: __webpack_require__(1007),
         link: function link(scope) {
             scope.loadTags = function (query) {
                 return $q(function (resolve, reject) {
@@ -163457,13 +163459,13 @@ function TagInputDirective($q) {
 angular.module('superdesk-ui.tags', []).directive('sdTagInput', TagInputDirective);
 
 /***/ }),
-/* 1005 */
+/* 1007 */
 /***/ (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";
 
 /***/ }),
-/* 1006 */
+/* 1008 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163480,7 +163482,7 @@ module.exports = "<label class=\"tags-input__label\" ng-if=\"label\">{{label}}</
  */
 function LineInputDirective() {
     return {
-        template: __webpack_require__(1007),
+        template: __webpack_require__(1009),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -163522,13 +163524,13 @@ function LineInputDirective() {
 angular.module('superdesk-ui.lineInput', []).directive('sdLineInput', LineInputDirective);
 
 /***/ }),
-/* 1007 */
+/* 1009 */
 /***/ (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";
 
 /***/ }),
-/* 1008 */
+/* 1010 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163548,7 +163550,7 @@ module.exports = " <div class=\"sd-line-input\" ng-class=\"{'sd-line-input--dark
  */
 function SearchHandlerDirective() {
     return {
-        template: __webpack_require__(1009),
+        template: __webpack_require__(1011),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -163574,13 +163576,13 @@ function SearchHandlerDirective() {
 angular.module('superdesk-ui.searchHandler', []).directive('sdSearchHandler', SearchHandlerDirective);
 
 /***/ }),
-/* 1009 */
+/* 1011 */
 /***/ (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";
 
 /***/ }),
-/* 1010 */
+/* 1012 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163596,7 +163598,7 @@ function sdCircularProgress() {
             error: '=',
             counter: '='
         },
-        template: __webpack_require__(1011),
+        template: __webpack_require__(1013),
         link: function link(scope, element) {
             var elem = $(element).find('.progress-svg');
 
@@ -163642,13 +163644,13 @@ angular.module('superdesk-ui.circularProgress', []).directive('sdCircularProgres
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(75)))
 
 /***/ }),
-/* 1011 */
+/* 1013 */
 /***/ (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>";
 
 /***/ }),
-/* 1012 */
+/* 1014 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163693,7 +163695,7 @@ function SplitterDirective($window) {
 angular.module('superdesk-ui.splitter', []).directive('sdSplitter', SplitterDirective);
 
 /***/ }),
-/* 1013 */
+/* 1015 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -163734,16 +163736,16 @@ function MediaQuery($window) {
 angular.module('superdesk-ui.mediaQuery', []).directive('sdMediaQuery', MediaQuery);
 
 /***/ }),
-/* 1014 */
+/* 1016 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(1015);
+__webpack_require__(1017);
 
 /***/ }),
-/* 1015 */
+/* 1017 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin

package/examples/pages/components/Card.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import {Card} from '../../../app-typescript/components/card';
+
+export default class CardDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Card</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <Card paddingBase="1">
+                        card content
+                    </Card>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Card paddingBase="1">
+                    card content
+                </Card>
+            </section>
+        )
+    }
+}

package/examples/pages/components/Index.tsx

@@ -86,6 +86,7 @@ import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 import LoaderDoc from './Loader';
+import CardDoc from './Card';
 
 
 interface IPages {
@@ -104,6 +105,10 @@ const pages: IPages = {
     basicComponents: {
         name: 'Basic Components',
         items: {
+            'card': {
+                name: 'Card',
+                component: CardDoc,
+            },
             'buttons': {
                 name: 'Buttons',
                 component: ButtonsDoc,

package/package.json

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