@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/index-06fa8444.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var React = require('react');
+var styled = require('@emotion/styled');
+var theme = require('./theme-e4f7f487.js');
+var index = require('./index-05f106c2.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledAvatar = styled__default["default"].div `
+  background-color: var(--background-color, transparent);
+  color: white;
+  cursor: pointer;
+  img {
+    --width: var(--width-prop, 40px);
+    --height: var(--height-prop, 40px);
+    width: var(--width);
+    height: var(--height);
+  }
+  &[data-has-max='true'] {
+    img {
+      max-width: var(--width);
+      max-height: var(--height);
+    }
+  }
+
+  &[data-avatar-type='square'] {
+    img {
+      --width: var(--width-prop, 72px);
+      --height: var(--height-prop, 72px);
+      border-radius: ${theme.theme.borderRadius};
+    }
+  }
+
+  &[data-avatar-type='rounded'] {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &[data-custom-size='true'] {
+    display: flex;
+    overflow: hidden;
+    overflow: hidden;
+    width: var(--size);
+    height: var(--size);
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    font-size: calc(var(--size) / 2);
+    font-weight: bold;
+    &[data-avatar-type='square'] {
+      border-radius: ${theme.theme.borderRadius};
+    }
+    &[data-avatar-type='rounded'] {
+      border-radius: 50%;
+      img {
+        --width: 100%;
+        --height: 100%;
+      }
+    }
+    img {
+      object-fit: cover;
+    }
+  }
+`;
+
+const pxBySize = {
+    xs: 28,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 64,
+    xxl: 80,
+    xxxl: 96,
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
+    const sizePx = size ? pxBySize[size] : undefined;
+    const [isImageLoadingError, setIsImageLoadingError] = React.useState(false);
+    React.useEffect(() => {
+        if (avatarUrl) {
+            const img = document.createElement('img');
+            img.setAttribute('src', avatarUrl);
+            img.addEventListener('error', () => {
+                setIsImageLoadingError(true);
+            });
+        }
+    }, [avatarUrl, setIsImageLoadingError]);
+    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
+    return (React__default["default"].createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
+        avatarImg,
+        avatarUrl && !isImageLoadingError && (React__default["default"].createElement(index.ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
+        shouldRenderLetter && firstLetter));
+};
+
+exports.Avatar = Avatar;

package/build/{index-e932125b.js → index-1efa7d84.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-517f6538.js');
-var isProduction = require('./isProduction-7f7f09ad.js');
+var index = require('./index-a86ea1b6.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';