superdesk-ui-framework 3.1.14 → 3.1.16

package/react/components/Loader.js

@@ -47,10 +47,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;

package/react/components/avatar/avatar-group.js

@@ -110,7 +110,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                         isAvatar(item)
                             && item.displayName,
                         isAvatar(item)
-                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
+                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot }))
                             : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
                     : React.createElement("div", null,
                         React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
@@ -124,7 +124,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                 }
             }),
             itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
-                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size },
                     React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
     };
     return AvatarGroup;

package/react/components/avatar/avatar-image.js

@@ -65,7 +65,7 @@ var AvatarContentImage = /** @class */ (function (_super) {
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0" }),
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }
         else {

package/react/components/avatar/avatar-placeholder.js

@@ -50,7 +50,7 @@ var AvatarPlaceholder = /** @class */ (function (_super) {
     }
     AvatarPlaceholder.prototype.render = function () {
         var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, icon: icon }, (function () {
             if (kind === 'plus-button') {
                 return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
             }

package/react/components/avatar/avatar-wrapper.d.ts

@@ -11,11 +11,14 @@ interface IPropsAvatarWrapper {
     };
     children: React.ReactNode;
     'data-test-id'?: string;
-    isEmpty?: boolean;
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';
     icon?: {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
 }
 /**
  * @deprecated use AvatarV2

package/react/components/avatar/avatar-wrapper.js

@@ -56,6 +56,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     AvatarWrapper.prototype.render = function () {
         var _a, _b, _c;
         var icon = this.props.icon;
+        var statusDot = this.props.statusDot;
         return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--x-small': this.props.size === 'x-small',
                 'sd-avatar--small': this.props.size === 'small',
@@ -65,14 +66,15 @@ var AvatarWrapper = /** @class */ (function (_super) {
                 'sd-avatar--xx-large': this.props.size === 'xx-large',
                 'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
                 'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.status) === 'offline',
-                'sd-avatar--empty-light': this.props.isEmpty,
+                'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
             }), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : "" },
             this.props.children,
             ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
                 ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
                 : null,
             icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
-                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color })))));
+                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color }))),
+            statusDot != null && (React.createElement("span", { style: { backgroundColor: statusDot.color }, className: "sd-avatar__coverage-state" }))));
     };
     return AvatarWrapper;
 }(React.PureComponent));

package/react/components/avatar/avatar.d.ts

@@ -11,6 +11,10 @@ export interface IPropsAvatar {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';
     /**
      * displayName is shown as tooltip by default
      * use this if you need to add additional information (it will be added on a new line)

package/react/components/avatar/avatar.js

@@ -49,10 +49,10 @@ var Avatar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Avatar.prototype.render = function () {
-        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName, customContent = _a.customContent;
+        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, noAvatarPlaceholderColor = _a.noAvatarPlaceholderColor, displayName = _a.displayName, customContent = _a.customContent, statusDot = _a.statusDot;
         var tooltipCombined = [displayName, this.props.tooltip]
             .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, statusDot: statusDot, noAvatarPlaceholderColor: noAvatarPlaceholderColor }, (function () {
             if (customContent != null) {
                 return customContent;
             }