Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/avatar-group

Package Overview
Dependencies
Maintainers
12
Versions
406
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/avatar-group - npm Package Compare versions

Comparing version 23.3.0-alpha3 to 24.0.0-alpha1

20

package.json
{
"name": "@vaadin/avatar-group",
"version": "23.3.0-alpha3",
"version": "24.0.0-alpha1",
"publishConfig": {

@@ -40,10 +40,10 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/avatar": "23.3.0-alpha3",
"@vaadin/component-base": "23.3.0-alpha3",
"@vaadin/item": "23.3.0-alpha3",
"@vaadin/list-box": "23.3.0-alpha3",
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
"@vaadin/vaadin-material-styles": "23.3.0-alpha3",
"@vaadin/vaadin-overlay": "23.3.0-alpha3",
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
"@vaadin/avatar": "24.0.0-alpha1",
"@vaadin/component-base": "24.0.0-alpha1",
"@vaadin/item": "24.0.0-alpha1",
"@vaadin/list-box": "24.0.0-alpha1",
"@vaadin/overlay": "24.0.0-alpha1",
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
"@vaadin/vaadin-material-styles": "24.0.0-alpha1",
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
},

@@ -59,3 +59,3 @@ "devDependencies": {

],
"gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
"gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
}

8

src/vaadin-avatar-group-overlay.js

@@ -6,4 +6,4 @@ /**

*/
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';

@@ -13,6 +13,6 @@ /**

*
* @extends OverlayElement
* @extends Overlay
* @private
*/
class AvatarGroupOverlay extends PositionMixin(OverlayElement) {
class AvatarGroupOverlay extends PositionMixin(Overlay) {
static get is() {

@@ -19,0 +19,0 @@ return 'vaadin-avatar-group-overlay';

8

src/vaadin-avatar-group.d.ts

@@ -7,2 +7,3 @@ /**

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';

@@ -55,4 +56,6 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';

* `container` | The container element
* `avatar` | Individual avatars
*
* See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
* state attributes and stylable shadow parts of avatar elements.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.

@@ -65,6 +68,5 @@ *

*
* - `<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).
*/
declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLElement))) {
declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
readonly _avatars: HTMLElement[];

@@ -71,0 +73,0 @@

308

src/vaadin-avatar-group.js

@@ -6,6 +6,5 @@ /**

*/
import '@polymer/polymer/lib/elements/dom-repeat.js';
import '@vaadin/avatar/src/vaadin-avatar.js';
import '@vaadin/item/src/vaadin-item.js';
import './vaadin-avatar-group-list-box.js';
import '@vaadin/list-box/src/vaadin-list-box.js';
import './vaadin-avatar-group-overlay.js';

@@ -16,4 +15,6 @@ import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';

import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

@@ -48,4 +49,6 @@

* `container` | The container element
* `avatar` | Individual avatars
*
* See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
* state attributes and stylable shadow parts of avatar elements.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.

@@ -58,6 +61,6 @@ *

*
* - `<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).
*
* @extends HTMLElement
* @mixes ControllerMixin
* @mixes ElementMixin

@@ -67,3 +70,3 @@ * @mixes ThemableMixin

*/
class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
static get template() {

@@ -90,3 +93,3 @@ return html`

[part='avatar']:not(:first-child) {
::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>');

@@ -102,3 +105,3 @@ 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>');

[part='avatar']:not([dir='rtl']):not(:first-child) {
::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));

@@ -109,3 +112,3 @@ -webkit-mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));

[part='avatar'][dir='rtl']:not(:first-child) {
::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);

@@ -121,26 +124,4 @@ -webkit-mask-position: calc(

<div id="container" part="container">
<template id="items" is="dom-repeat" items="[[__computeItems(items.*, __itemsInView, maxItemsVisible)]]">
<vaadin-avatar
name="[[item.name]]"
abbr="[[item.abbr]]"
img="[[item.img]]"
part="avatar"
theme$="[[_theme]]"
i18n="[[i18n]]"
color-index="[[item.colorIndex]]"
with-tooltip
></vaadin-avatar>
</template>
<vaadin-avatar
id="overflow"
part="avatar"
hidden$="[[__computeMoreHidden(items.length, __itemsInView, __maxReached)]]"
abbr="[[__computeMore(items.length, __itemsInView, maxItemsVisible)]]"
theme$="[[_theme]]"
on-click="_onOverflowClick"
on-keydown="_onOverflowKeyDown"
aria-haspopup="listbox"
>
<vaadin-tooltip slot="tooltip" generator="[[__overflowTextGenerator]]"></vaadin-tooltip>
</vaadin-avatar>
<slot></slot>
<slot name="overflow"></slot>
</div>

@@ -150,26 +131,6 @@ <vaadin-avatar-group-overlay

opened="{{_opened}}"
position-target="[[_overflow]]"
no-vertical-overlap
on-vaadin-overlay-close="_onVaadinOverlayClose"
>
<template>
<vaadin-avatar-group-list-box on-keydown="_onListKeyDown">
<template is="dom-repeat" items="[[__computeExtraItems(items.*, __itemsInView, maxItemsVisible)]]">
<vaadin-item theme="avatar-group-item" role="option">
<vaadin-avatar
name="[[item.name]]"
abbr="[[item.abbr]]"
img="[[item.img]]"
i18n="[[i18n]]"
part="avatar"
theme$="[[_theme]]"
color-index="[[item.colorIndex]]"
tabindex="-1"
aria-hidden="true"
></vaadin-avatar>
[[item.name]]
</vaadin-item>
</template>
</vaadin-avatar-group-list-box>
</template>
</vaadin-avatar-group-overlay>
></vaadin-avatar-group-overlay>
`;

@@ -268,2 +229,8 @@ }

/** @private */
_avatars: {
type: Array,
value: () => [],
},
/** @private */
__maxReached: {

@@ -275,2 +242,7 @@ type: Boolean,

/** @private */
__items: {
type: Array,
},
/** @private */
__itemsInView: {

@@ -282,10 +254,23 @@ type: Number,

/** @private */
_overflow: {
type: Object,
},
/** @private */
_overflowItems: {
type: Array,
observer: '__overflowItemsChanged',
computed: '__computeOverflowItems(items.*, __itemsInView, maxItemsVisible)',
},
/** @private */
_overflowTooltip: {
type: Object,
},
/** @private */
_opened: {
type: Boolean,
observer: '__openedChanged',
value: false,
},
/** @private */
__overflowTextGenerator: Object,
};

@@ -296,5 +281,9 @@ }

return [
'__computeMoreTooltip(items.length, __itemsInView, maxItemsVisible)',
'__itemsChanged(items.splices, items.*)',
'__i18nItemsChanged(i18n.*, items.length)',
'__updateAvatarsTheme(_overflow, _avatars, _theme)',
'__updateAvatars(items.*, __itemsInView, maxItemsVisible)',
'__updateOverflowAbbr(_overflow, items.length, __itemsInView, maxItemsVisible)',
'__updateOverflowHidden(_overflow, items.length, __itemsInView, __maxReached)',
'__updateOverflowTooltip(_overflowTooltip, items.length, __itemsInView, maxItemsVisible)',
];

@@ -307,5 +296,24 @@ }

this._overlayElement = this.shadowRoot.querySelector('vaadin-avatar-group-overlay');
this._overlayElement.positionTarget = this.$.overflow;
this._overflowController = new SlotController(
this,
'overflow',
() => document.createElement('vaadin-avatar'),
(_, overflow) => {
overflow.setAttribute('aria-haspopup', 'listbox');
overflow.setAttribute('aria-expanded', 'false');
overflow.addEventListener('click', (e) => this._onOverflowClick(e));
overflow.addEventListener('keydown', (e) => this._onOverflowKeyDown(e));
const tooltip = document.createElement('vaadin-tooltip');
tooltip.setAttribute('slot', 'tooltip');
overflow.appendChild(tooltip);
this._overflow = overflow;
this._overflowTooltip = tooltip;
},
);
this.addController(this._overflowController);
this.$.overlay.renderer = this.__overlayRenderer.bind(this);
afterNextRender(this, () => {

@@ -316,8 +324,7 @@ this.__setItemsInView();

/**
* @return {!Array<!HTMLElement>}
* @protected
*/
get _avatars() {
return this.shadowRoot.querySelectorAll('vaadin-avatar');
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
this._opened = false;
}

@@ -330,3 +337,73 @@

/**
* Renders items when they are provided by the `items` property and clears the content otherwise.
* @param {!HTMLElement} root
* @param {!Select} _select
* @private
*/
__overlayRenderer(root) {
let listBox = root.firstElementChild;
if (!listBox) {
listBox = document.createElement('vaadin-list-box');
listBox.addEventListener('keydown', (event) => this._onListKeyDown(event));
root.appendChild(listBox);
}
listBox.textContent = '';
if (!this._overflowItems) {
return;
}
this._overflowItems.forEach((item) => {
listBox.appendChild(this.__createItemElement(item));
});
}
/** @private */
__createAvatar(item) {
const avatar = document.createElement('vaadin-avatar');
avatar.name = item.name;
avatar.abbr = item.abbr;
avatar.img = item.img;
avatar.colorIndex = item.colorIndex;
avatar.withTooltip = true;
avatar.i18n = this.i18n;
avatar._item = item;
return avatar;
}
/** @private */
__createItemElement(item) {
const itemElement = document.createElement('vaadin-item');
itemElement.setAttribute('theme', 'avatar-group-item');
itemElement.setAttribute('role', 'option');
const avatar = document.createElement('vaadin-avatar');
itemElement.appendChild(avatar);
avatar.setAttribute('aria-hidden', 'true');
avatar.setAttribute('tabindex', '-1');
avatar.i18n = this.i18n;
if (this._theme) {
avatar.setAttribute('theme', this._theme);
}
avatar.name = item.name;
avatar.abbr = item.abbr;
avatar.img = item.img;
avatar.colorIndex = item.colorIndex;
if (item.name) {
const text = document.createTextNode(item.name);
itemElement.appendChild(text);
}
return itemElement;
}
/** @private */
_onOverflowClick(e) {

@@ -374,13 +451,44 @@ e.stopPropagation();

/** @private */
__computeItems(arr, itemsInView, maxItemsVisible) {
__updateAvatars(arr, itemsInView, maxItemsVisible) {
const items = arr.base || [];
const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
return limit ? items.slice(0, limit) : items;
const newItems = limit ? items.slice(0, limit) : items;
const oldItems = this.__oldAvatarItems || [];
if (newItems.length || oldItems.length) {
const removed = oldItems.filter((item) => !newItems.includes(item));
const added = [...newItems];
this._avatars.forEach((avatar) => {
const item = avatar._item;
if (removed.includes(item)) {
avatar.remove();
} else if (added.includes(item)) {
added.splice(added.indexOf(item), 1);
}
});
this.__addAvatars(added, newItems);
}
this._avatars = [...this.querySelectorAll('vaadin-avatar')];
this.__oldAvatarItems = newItems;
}
/** @private */
__computeExtraItems(arr, itemsInView, maxItemsVisible) {
__addAvatars(itemsToAdd, allItems) {
itemsToAdd.forEach((item) => {
const avatar = this.__createAvatar(item);
const nextItem = allItems[allItems.indexOf(item) + 1];
const nextAvatar = this._avatars.find((el) => el._item === nextItem);
this.insertBefore(avatar, nextAvatar || this._overflow);
});
}
/** @private */
__computeOverflowItems(arr, itemsInView, maxItemsVisible) {
const items = arr.base || [];
const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
return limit ? items.slice(limit) : items;
return limit ? items.slice(limit) : [];
}

@@ -394,13 +502,34 @@

/** @private */
__computeMore(items, itemsInView, maxItemsVisible) {
return `+${items - this.__getLimit(items, itemsInView, maxItemsVisible)}`;
__updateOverflowAbbr(overflow, items, itemsInView, maxItemsVisible) {
if (overflow) {
overflow.abbr = `+${items - this.__getLimit(items, itemsInView, maxItemsVisible)}`;
}
}
/** @private */
__computeMoreHidden(items, itemsInView, maxReached) {
return !maxReached && !(itemsInView && itemsInView < items);
__updateOverflowHidden(overflow, items, itemsInView, maxReached) {
if (overflow) {
overflow.toggleAttribute('hidden', !maxReached && !(itemsInView && itemsInView < items));
}
}
/** @private */
__computeMoreTooltip(items, itemsInView, maxItemsVisible) {
__updateAvatarsTheme(overflow, avatars, theme) {
if (overflow) {
[overflow, ...avatars].forEach((avatar) => {
if (theme) {
avatar.setAttribute('theme', theme);
} else {
avatar.removeAttribute('theme');
}
});
}
}
/** @private */
__updateOverflowTooltip(tooltip, items, itemsInView, maxItemsVisible) {
if (!tooltip) {
return;
}
const limit = this.__getLimit(items, itemsInView, maxItemsVisible);

@@ -410,2 +539,3 @@ if (limit == null) {

}
const result = [];

@@ -418,4 +548,4 @@ for (let i = limit; i < items; i++) {

}
// Override generated tooltip text
this.__overflowTextGenerator = () => result.join('\n');
tooltip.text = result.join('\n');
}

@@ -445,3 +575,2 @@

const items = itemsChange.base;
this.$.items.render();
this.__setItemsInView();

@@ -494,2 +623,6 @@

}
this._avatars.forEach((avatar) => {
avatar.i18n = base;
});
}

@@ -502,19 +635,26 @@ }

if (!this._menuElement) {
this._menuElement = this._overlayElement.content.querySelector('vaadin-avatar-group-list-box');
this._menuElement = this.$.overlay.querySelector('vaadin-list-box');
this._menuElement.setAttribute('role', 'listbox');
}
this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
this._menuElement.focus();
} else if (wasOpened) {
this.$.overflow.focus();
this._overflow.focus();
if (this._openedWithFocusRing) {
this.$.overflow.setAttribute('focus-ring', '');
this._overflow.setAttribute('focus-ring', '');
}
}
this.$.overflow.setAttribute('aria-expanded', opened === true);
this._overflow.setAttribute('aria-expanded', opened === true);
}
/** @private */
__overflowItemsChanged(items, oldItems) {
if (items || oldItems) {
this.$.overlay.requestContentUpdate();
}
}
/** @private */
__setItemsInView() {

@@ -521,0 +661,0 @@ const avatars = this._avatars;

17

theme/lumo/vaadin-avatar-group-styles.js

@@ -58,20 +58,9 @@ import '@vaadin/vaadin-lumo-styles/color.js';

registerStyles(
'vaadin-avatar-group-list-box',
'vaadin-item',
css`
[part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
:host([theme='avatar-group-item']) {
padding: var(--lumo-space-xs);
padding-right: var(--lumo-space-m);
padding-inline-end: var(--lumo-space-m);
}
:host([dir='rtl']) [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
padding: var(--lumo-space-xs);
padding-left: var(--lumo-space-m);
}
`,
{ moduleId: 'lumo-avatar-group-list-box' },
);
registerStyles(
'vaadin-item',
css`
:host([theme='avatar-group-item']) [part='content'] {

@@ -78,0 +67,0 @@ display: flex;

2

theme/lumo/vaadin-avatar-group.js
import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
import '@vaadin/item/theme/lumo/vaadin-item.js';
import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
import './vaadin-avatar-group-styles.js';
import '../../src/vaadin-avatar-group.js';

17

theme/material/vaadin-avatar-group-styles.js

@@ -50,20 +50,9 @@ import '@vaadin/vaadin-material-styles/color.js';

registerStyles(
'vaadin-avatar-group-list-box',
'vaadin-item',
css`
[part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
:host([theme='avatar-group-item']) {
padding: 8px;
padding-right: 24px;
padding-inline-end: 24px;
}
:host([dir='rtl']) [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
padding: 8px;
padding-left: 24px;
}
`,
{ moduleId: 'material-avatar-group-list-box' },
);
registerStyles(
'vaadin-item',
css`
:host([theme='avatar-group-item']) [part='content'] {

@@ -70,0 +59,0 @@ display: flex;

2

theme/material/vaadin-avatar-group.js
import '@vaadin/avatar/theme/material/vaadin-avatar.js';
import '@vaadin/item/theme/material/vaadin-item.js';
import '@vaadin/list-box/theme/material/vaadin-list-box.js';
import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
import '@vaadin/overlay/theme/material/vaadin-overlay.js';
import './vaadin-avatar-group-styles.js';
import '../../src/vaadin-avatar-group.js';

6

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/avatar-group",
"version": "23.3.0-alpha3",
"version": "24.0.0-alpha1",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-avatar-group",
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n`avatar` | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-overlay).",
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
"attributes": [

@@ -41,3 +41,3 @@ {

"name": "items",
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
"value": {

@@ -44,0 +44,0 @@ "type": [

6

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/avatar-group",
"version": "23.3.0-alpha3",
"version": "24.0.0-alpha1",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-avatar-group",
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n`avatar` | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-overlay).",
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
"extension": true,

@@ -25,3 +25,3 @@ "attributes": [

"name": ".items",
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
"value": {

@@ -28,0 +28,0 @@ "kind": "expression"

src/vaadin-avatar-group-list-box.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc