@vaadin/avatar-group 24.6.0-alpha8 → 24.6.0-beta1

package/src/vaadin-avatar-group-styles.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const avatarGroupStyles = css`
+  :host {
+    display: block;
+    width: 100%; /* prevent collapsing inside non-stretching column flex */
+    --vaadin-avatar-group-overlap: 8px;
+    --vaadin-avatar-group-overlap-border: 2px;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='container'] {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-wrap: nowrap;
+  }
+
+  ::slotted(vaadin-avatar:not(:first-child)) {
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+    -webkit-mask-size: calc(
+      300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6
+    );
+    mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
+  }
+
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+    margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
+    -webkit-mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
+    mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
+  }
+
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+    margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
+    -webkit-mask-position: calc(
+      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
+    );
+    mask-position: calc(
+      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
+    );
+  }
+`;

package/src/vaadin-avatar-group.d.ts

@@ -6,28 +6,10 @@
 import { AvatarI18n } from '@vaadin/avatar/src/vaadin-avatar.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AvatarGroupI18n, AvatarGroupItem, AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
 
-export { AvatarI18n };
-
-export interface AvatarGroupI18n extends AvatarI18n {
-  activeUsers: {
-    one: string;
-    many: string;
-  };
-  joined: string;
-  left: string;
-}
-
-export interface AvatarGroupItem {
-  name?: string;
-  abbr?: string;
-  img?: string;
-  colorIndex?: number;
-  className?: string;
-}
+export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
 
 /**
  * `<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.
@@ -69,73 +51,7 @@ export interface AvatarGroupItem {
  * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  */
-declare class AvatarGroup extends ResizeMixin(
-  OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))),
-) {
-  /**
-   * An array containing the items which will be stamped as avatars.
-   *
-   * The items objects allow to configure [`name`](#/elements/vaadin-avatar#property-name),
-   * [`abbr`](#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)
-   * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
-   * stamped avatars, and set `className` to provide CSS class names.
-   *
-   * #### Example
-   *
-   * ```js
-   * group.items = [
-   *   {
-   *     name: 'User name',
-   *     img: 'url-to-image.png',
-   *     className: 'even'
-   *   },
-   *   {
-   *     abbr: 'JD',
-   *     colorIndex: 1,
-   *     className: 'odd'
-   *   },
-   * ];
-   * ```
-   */
-  items: AvatarGroupItem[] | undefined;
-
-  /**
-   * The maximum number of avatars to display. By default, all the avatars are displayed.
-   * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
-   * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
-   * @attr {number} max-items-visible
-   */
-  maxItemsVisible: number | null | undefined;
-
-  /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * _i18n_ object or just the property you want to modify.
-   *
-   * The object has the following JSON structure and default values:
-   * ```
-   * {
-   *   // Translation of the anonymous user avatar tooltip.
-   *   anonymous: 'anonymous',
-   *   // Translation of the avatar group accessible label.
-   *   // {count} is replaced with the actual count of users.
-   *   activeUsers: {
-   *     one: 'Currently one active user',
-   *     many: 'Currently {count} active users'
-   *   },
-   *   // Screen reader announcement when user joins group.
-   *   // {user} is replaced with the name or abbreviation.
-   *   // When neither is set, "anonymous" is used instead.
-   *   joined: '{user} joined',
-   *   // Screen reader announcement when user leaves group.
-   *   // {user} is replaced with the name or abbreviation.
-   *   // When neither is set, "anonymous" is used instead.
-   *   left: '{user} left'
-   * }
-   * ```
-   */
-  i18n: AvatarGroupI18n;
-}
+declare class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {