@vaadin/vaadin-avatar 22.0.0-alpha1 → 22.0.0-alpha10

package/README.md

@@ -7,10 +7,7 @@
 [API documentation ↗](https://vaadin.com/components/vaadin-avatar/html-api)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-avatar)](https://www.npmjs.com/package/@vaadin/vaadin-avatar)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-avatar)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-avatar.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-avatar)
 [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-avatar)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-avatar-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-avatar)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -20,16 +17,15 @@
 <vaadin-avatar-group max="2"></vaadin-avatar-group>
 <script>
   document.querySelector('vaadin-avatar-group').items = [
-    {name: 'Foo Bar', colorIndex: 1},
-    {colorIndex: 2},
-    {name: 'Foo Bar', colorIndex: 3}
+    { name: 'Foo Bar', colorIndex: 1 },
+    { colorIndex: 2 },
+    { name: 'Foo Bar', colorIndex: 3 }
   ];
 </script>
 ```
 
 [<img src="https://raw.githubusercontent.com/vaadin/vaadin-avatar/master/screenshot.png" width="200" alt="Screenshot of vaadin-avatar">](https://vaadin.com/components/vaadin-avatar)
 
-
 ## Installation
 
 Install `vaadin-avatar`:
@@ -68,46 +64,9 @@ To use the Material theme, import the correspondent file from the `theme/materia
   `vaadin-avatar.js`
   `vaadin-avatar-group.js`
 
-
-## Running API docs and tests in a browser
-
-1. Fork the `vaadin-avatar` repository and clone it locally.
-
-1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
-
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
-
-1. When in the `vaadin-avatar` directory, run `npm install` to install dependencies.
-
-1. Run `npm start`, browser will automatically open the component API documentation.
-
-1. You can also open visual tests, for example:
-
-  - http://127.0.0.1:3000/test/visual/default.html
-
-
-## Running tests from the command line
-
-1. When in the `vaadin-avatar` directory, run `npm test`
-
-## Debugging tests in the browser
-
-1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
-
-## Following the coding style
-
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
-
-
-## Big Thanks
-
-Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
-
-
 ## Contributing
 
-To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
-
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-avatar",
-  "version": "22.0.0-alpha1",
+  "version": "22.0.0-alpha10",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-avatar",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-avatar"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-avatar/issues"
+  },
   "main": "vaadin-avatar-group.js",
   "module": "vaadin-avatar-group.js",
-  "repository": "vaadin/vaadin-avatar",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-avatar",
@@ -12,37 +31,14 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-avatar/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
-    "@vaadin/vaadin-item": "^22.0.0-alpha1",
-    "@vaadin/vaadin-list-box": "^22.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha1",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
+    "@vaadin/avatar": "22.0.0-alpha10",
+    "@vaadin/avatar-group": "22.0.0-alpha10"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.1.5",
-    "@vaadin/testing-helpers": "^0.2.1",
+    "@esm-bundle/chai": "^4.3.4",
+    "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

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

@@ -1,115 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { AvatarGroupItem, AvatarGroupI18n } from './interfaces';
-
 /**
- * `<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.
- *
- * To create the avatar group, first add the component to the page:
- *
- * ```
- * <vaadin-avatar-group></vaadin-avatar-group>
- * ```
- *
- * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
- *
- * ```
- * document.querySelector('vaadin-avatar-group').items = [
- *   {name: 'John Doe'},
- *   {abbr: 'AB'}
- * ];
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are exposed for styling:
- *
- * Part name   | Description
- * ----------- | ---------------
- * `container` | The container element
- * `avatar`    | Individual avatars
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * ### Internal components
- *
- * In addition to `<vaadin-avatar-group>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
- * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class AvatarGroupElement extends ElementMixin(ThemableMixin(HTMLElement)) {
-  readonly _avatars: 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.
-   *
-   * #### Example
-   *
-   * ```js
-   * group.items = [
-   *   {
-   *     name: 'User name',
-   *     img: 'url-to-image.png'
-   *   },
-   *   {
-   *     abbr: 'JD',
-   *     colorIndex: 1
-   *   },
-   * ];
-   * ```
-   */
-  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.
-   */
-  maxItemsVisible: number | null | undefined;
+import { AvatarGroup } from '@vaadin/avatar-group/src/vaadin-avatar-group.js';
 
-  /**
-   * 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 title.
-   *   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;
-}
+/**
+ * @deprecated Import `AvatarGroup` from `@vaadin/avatar-group` instead.
+ */
+export type AvatarGroupElement = AvatarGroup;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-avatar-group': AvatarGroupElement;
-  }
-}
+/**
+ * @deprecated Import `AvatarGroup` from `@vaadin/avatar-group` instead.
+ */
+export const AvatarGroupElement: typeof AvatarGroup;
 
-export { AvatarGroupElement };
+export * from '@vaadin/avatar-group/src/vaadin-avatar-group.js';