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

@vaadin/vaadin-avatar

Package Overview
Dependencies
Maintainers
16
Versions
246
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-avatar - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0-alpha1

src/interfaces.d.ts

86

package.json
{
"name": "@vaadin/vaadin-avatar",
"version": "2.0.0-alpha1",
"description": "vaadin-avatar",
"main": "vaadin-avatar-group.js",
"module": "vaadin-avatar-group.js",
"repository": "vaadin/vaadin-avatar",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-avatar",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-avatar",
"version": "1.0.3",
"main": "vaadin-avatar-group.js",
"author": "Vaadin Ltd",

@@ -21,17 +21,37 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"resolutions": {
"es-abstract": "1.17.6",
"@types/doctrine": "0.0.3",
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {

@@ -42,20 +62,36 @@ "@polymer/polymer": "^3.0.0",

"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-element-mixin": "^2.3.2",
"@vaadin/vaadin-list-box": "^1.3.0",
"@vaadin/vaadin-item": "^2.2.0",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-element-mixin": "^2.4.2",
"@vaadin/vaadin-list-box": "^2.0.0-alpha1",
"@vaadin/vaadin-item": "^3.0.0-alpha1",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-overlay": "^3.4.1"
"@vaadin/vaadin-overlay": "^3.5.1"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.0.0",
"@vaadin/vaadin-checkbox": "^2.3.0"
"@web/dev-server": "^0.1.3",
"@web/test-runner": "^0.11.7",
"@web/test-runner-saucelabs": "^0.3.3",
"eslint": "^7.15.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.10"
}
}

73

README.md

@@ -10,20 +10,8 @@ # <vaadin-avatar>

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-avatar)](https://www.npmjs.com/package/@vaadin/vaadin-avatar)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-avatar)](https://github.com/vaadin/vaadin-avatar/releases)
[![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)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-avatar/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-avatar?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![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)
<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-avatar.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -48,28 +36,5 @@ <vaadin-avatar></vaadin-avatar>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
The converted ES Modules are only published on npm, not pushed to GitHub repositories.
### Bower (HTML Imports compatible version)
Install `vaadin-avatar`:
```sh
bower i vaadin/vaadin-avatar --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-avatar/vaadin-avatar.html">
<link rel="import" href="bower_components/vaadin-avatar/vaadin-avatar-group.html">
```
### npm (ES Modules compatible version)
Install `vaadin-avatar`:
```sh
npm i @vaadin/vaadin-avatar --save

@@ -95,32 +60,31 @@ ```

`theme/lumo/vaadin-avatar.html`
`theme/lumo/vaadin-avatar-group.html`
`theme/lumo/vaadin-avatar.js`
`theme/lumo/vaadin-avatar-group.js`
- The components with the Material theme:
`theme/material/vaadin-avatar.html`
`theme/material/vaadin-avatar-group.html`
`theme/material/vaadin-avatar.js`
`theme/material/vaadin-avatar-group.js`
- Alias for `theme/lumo/vaadin-avatar.html` `theme/lumo/vaadin-avatar-group.html`:
- Alias for `theme/lumo/vaadin-avatar.js` `theme/lumo/vaadin-avatar-group.js`:
`vaadin-avatar.html`
`vaadin-avatar-group.html`
`vaadin-avatar.js`
`vaadin-avatar-group.js`
## Running demos and tests in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-avatar` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-avatar` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
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 demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-avatar/demo
- http://127.0.0.1:3000/components/vaadin-avatar/test
- http://127.0.0.1:3000/test/visual/default.html

@@ -132,6 +96,9 @@

## 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 as well as JavaScript snippets inside `.html` files.
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.

@@ -146,3 +113,3 @@

To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.

@@ -149,0 +116,0 @@

8

src/vaadin-avatar-group-list-box.js

@@ -0,6 +1,12 @@

/**
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { ListBoxElement } from '@vaadin/vaadin-list-box/src/vaadin-list-box.js';
/**
* The vaadin-avatar-group-list-box element.
*
* @extends PolymerElement
* @extends HTMLElement
*/

@@ -7,0 +13,0 @@ class AvatarGroupListBoxElement extends ListBoxElement {

37

src/vaadin-avatar-group-overlay.js

@@ -1,21 +0,24 @@

import '@polymer/polymer/lib/elements/dom-module.js';
/**
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
const $_documentContainer = document.createElement('template');
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
$_documentContainer.innerHTML = `<dom-module id="vaadin-avatar-group-overlay-styles" theme-for="vaadin-avatar-group-overlay">
<template>
<style>
:host {
align-items: flex-start;
justify-content: flex-start;
}
registerStyles(
'vaadin-avatar-group-overlay',
css`
:host {
align-items: flex-start;
justify-content: flex-start;
}
:host([bottom-aligned]) {
justify-content: flex-end;
}
</style>
</template>
</dom-module>`;
:host([bottom-aligned]) {
justify-content: flex-end;
}
`,
{ moduleId: 'vaadin-avatar-group-overlay-styles' }
);
document.head.appendChild($_documentContainer.content);
/**

@@ -31,3 +34,3 @@ * The overlay element.

*
* @extends PolymerElement
* @extends HTMLElement
*/

@@ -34,0 +37,0 @@ class AvatarGroupOverlayElement extends OverlayElement {

57

src/vaadin-avatar-group.d.ts

@@ -1,38 +0,7 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-avatar-group.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { AvatarGroupItem, AvatarGroupI18n } from './interfaces';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {timeOut} from '@polymer/polymer/lib/utils/async.js';
import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js';
import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {IronA11yAnnouncer as IronA11yAnnouncer$0} from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import {calculateSplices} from '@polymer/polymer/lib/utils/array-splice.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
/**

@@ -67,6 +36,3 @@ * `<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.

*/
declare class AvatarGroupElement extends
ElementMixin(
ThemableMixin(
PolymerElement)) {
declare class AvatarGroupElement extends ElementMixin(ThemableMixin(HTMLElement)) {
readonly _avatars: HTMLElement[];

@@ -97,3 +63,3 @@

*/
items: AvatarGroupItem[]|undefined;
items: AvatarGroupItem[] | undefined;

@@ -105,3 +71,3 @@ /**

*/
maxItemsVisible: number|null|undefined;
maxItemsVisible: number | null | undefined;

@@ -136,17 +102,10 @@ /**

i18n: AvatarGroupI18n;
ready(): void;
attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-avatar-group": AvatarGroupElement;
'vaadin-avatar-group': AvatarGroupElement;
}
}
export {AvatarGroupElement};
import {AvatarGroupItem} from '../@types/interfaces';
import {AvatarGroupI18n} from '../@types/interfaces';
export { AvatarGroupElement };

205

src/vaadin-avatar-group.js
/**
@license
Copyright (c) 2020 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { timeOut } from '@polymer/polymer/lib/utils/async.js';

@@ -12,3 +14,2 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { IronA11yAnnouncer as IronA11yAnnouncer$0 } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

@@ -20,6 +21,2 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';

import './vaadin-avatar.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';

@@ -57,75 +54,102 @@ const MINIMUM_DISPLAYED_AVATARS = 2;

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @demo demo/index.html
*/
class AvatarGroupElement extends
ElementMixin(
ThemableMixin(
mixinBehaviors([IronResizableBehavior], PolymerElement))) {
class AvatarGroupElement extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement))) {
static get template() {
return html`
<style>
:host {
display: block;
width: 100%; /* prevent collapsing inside non-stretching column flex */
--vaadin-avatar-group-overlap: 8px;
--vaadin-avatar-group-overlap-border: 2px;
--vaadin-avatar-size: 64px;
}
<style>
:host {
display: block;
width: 100%; /* prevent collapsing inside non-stretching column flex */
--vaadin-avatar-group-overlap: 8px;
--vaadin-avatar-group-overlap-border: 2px;
--vaadin-avatar-size: 64px;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
[part="container"] {
display: flex;
position: relative;
width: 100%;
flex-wrap: nowrap;
}
[part='container'] {
display: flex;
position: relative;
width: 100%;
flex-wrap: nowrap;
}
[part="avatar"] {
flex-shrink: 0;
}
[part='avatar']:not(:first-child) {
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
-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
);
}
[part="avatar"]:not(:first-child) {
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
-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);
}
[part='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));
}
[part="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));
}
[part="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));
}
</style>
<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]]"></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-avatar>
</div>
<vaadin-avatar-group-overlay id="overlay" opened="{{_opened}}" 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>
`;
[part='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)
);
}
</style>
<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]]"
></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-avatar>
</div>
<vaadin-avatar-group-overlay id="overlay" opened="{{_opened}}" 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>
`;
}

@@ -138,3 +162,3 @@

static get version() {
return '1.0.3';
return '2.0.0-alpha1';
}

@@ -259,3 +283,3 @@

IronA11yAnnouncer$0.requestAvailability();
IronA11yAnnouncer.requestAvailability();

@@ -341,10 +365,6 @@ this.__boundSetPosition = this.__setPosition.bind(this);

_onResize() {
this.__debounceResize = Debouncer.debounce(
this.__debounceResize,
timeOut.after(0),
() => {
this.__setItemsInView();
this.__setPosition();
}
);
this.__debounceResize = Debouncer.debounce(this.__debounceResize, timeOut.after(0), () => {
this.__setItemsInView();
this.__setPosition();
});
}

@@ -446,3 +466,3 @@

__announceItemsChange(items, mutation) {
const {addedCount, index, removed} = mutation;
const { addedCount, index, removed } = mutation;
let addedMsg = [];

@@ -468,3 +488,3 @@ let removedMsg = [];

__i18nItemsChanged(i18n, items) {
const {base} = i18n;
const { base } = i18n;
if (base && base.activeUsers) {

@@ -489,3 +509,3 @@ const field = items === 1 ? 'one' : 'many';

const avatars = this._menuElement.querySelectorAll('vaadin-avatar');
avatars.forEach(avatar => avatar.removeAttribute('title'));
avatars.forEach((avatar) => avatar.removeAttribute('title'));

@@ -545,7 +565,8 @@ this._menuElement.focus();

// take negative margin into account
const {marginLeft, marginRight} = getComputedStyle(avatars[1]);
const { marginLeft, marginRight } = getComputedStyle(avatars[1]);
const offset = this.getAttribute('dir') == 'rtl' ?
parseInt(marginRight, 0) - parseInt(marginLeft, 0) :
parseInt(marginLeft, 0) - parseInt(marginRight, 0);
const offset =
this.getAttribute('dir') == 'rtl'
? parseInt(marginRight, 0) - parseInt(marginLeft, 0)
: parseInt(marginLeft, 0) - parseInt(marginRight, 0);

@@ -575,3 +596,3 @@ return Math.floor((this.$.container.offsetWidth - avatarWidth) / (avatarWidth + offset));

this._overlayElement.style.removeProperty('top');
this._overlayElement.style.bottom = (viewportHeight - btnRect.top) + 'px';
this._overlayElement.style.bottom = viewportHeight - btnRect.top + 'px';
} else {

@@ -578,0 +599,0 @@ this._overlayElement.removeAttribute('bottom-aligned');

18

src/vaadin-avatar-icons.js

@@ -1,5 +0,9 @@

import '@polymer/polymer/lib/elements/custom-style.js';
/**
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
$_documentContainer.innerHTML = `
<style>

@@ -13,12 +17,4 @@ @font-face {

</style>
</custom-style>`;
`;
document.head.appendChild($_documentContainer.content);
/* NOTE: Auto generated with 'gulp icons', do not edit */
/*
FIXME(polymer-modulizer): the above comments were extracted
from HTML and may be out of place here. Review them and
then delete this comment!
*/
;

43

src/vaadin-avatar.d.ts

@@ -1,22 +0,7 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-avatar.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { AvatarI18n } from './interfaces';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -46,11 +31,7 @@ * `<vaadin-avatar>` is a Web Component providing avatar displaying functionality.

*/
declare class AvatarElement extends
ElementMixin(
ThemableMixin(
PolymerElement)) {
declare class AvatarElement extends ElementMixin(ThemableMixin(HTMLElement)) {
/**
* The path to the image
*/
img: string|null|undefined;
img: string | null | undefined;

@@ -61,3 +42,3 @@ /**

*/
abbr: string|null|undefined;
abbr: string | null | undefined;

@@ -68,3 +49,3 @@ /**

*/
name: string|null|undefined;
name: string | null | undefined;

@@ -74,3 +55,3 @@ /**

*/
colorIndex: number|null|undefined;
colorIndex: number | null | undefined;

@@ -89,14 +70,10 @@ /**

i18n: AvatarI18n;
ready(): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-avatar": AvatarElement;
'vaadin-avatar': AvatarElement;
}
}
export {AvatarElement};
import {AvatarI18n} from '../@types/interfaces';
export { AvatarElement };

170

src/vaadin-avatar.js
/**
@license
Copyright (c) 2020 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import './vaadin-avatar-icons.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';

@@ -59,6 +57,5 @@ // We consider the keyboard to be active if the window has received a keydown

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @demo demo/index.html
*/

@@ -68,66 +65,81 @@ class AvatarElement extends ElementMixin(ThemableMixin(PolymerElement)) {

return html`
<style>
:host {
display: inline-block;
border-radius: 50%;
overflow: hidden;
height: var(--vaadin-avatar-size);
width: var(--vaadin-avatar-size);
border: var(--vaadin-avatar-outline-width) solid transparent;
margin: calc(var(--vaadin-avatar-outline-width) * -1);
background-clip: content-box;
--vaadin-avatar-outline-width: 2px;
--vaadin-avatar-size: 64px;
}
<style>
:host {
display: inline-block;
flex: none;
border-radius: 50%;
overflow: hidden;
height: var(--vaadin-avatar-size);
width: var(--vaadin-avatar-size);
border: var(--vaadin-avatar-outline-width) solid transparent;
margin: calc(var(--vaadin-avatar-outline-width) * -1);
background-clip: content-box;
--vaadin-avatar-outline-width: 2px;
--vaadin-avatar-size: 64px;
}
img {
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
}
[part="icon"] {
font-size: 5.6em;
}
[part='icon'] {
font-size: 5.6em;
}
[part="abbr"] {
font-size: 2.2em;
}
[part='abbr'] {
font-size: 2.2em;
}
[part="icon"] > text {
font-family: 'vaadin-avatar-icons';
}
[part='icon'] > text {
font-family: 'vaadin-avatar-icons';
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
svg[hidden] {
display: none !important;
}
svg[hidden] {
display: none !important;
}
:host([has-color-index]) {
position: relative;
background-color: var(--vaadin-avatar-user-color);
}
:host([has-color-index]) {
position: relative;
background-color: var(--vaadin-avatar-user-color);
}
:host([has-color-index])::before {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
}
</style>
<img hidden\$="[[!__imgVisible]]" src\$="[[img]]" aria-hidden="true">
<svg part="icon" hidden\$="[[!__iconVisible]]" id="avatar-icon" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<text dy=".35em" text-anchor="middle"></text>
</svg>
<svg part="abbr" hidden\$="[[!__abbrVisible]]" id="avatar-abbr" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<text dy=".35em" text-anchor="middle">[[abbr]]</text>
</svg>
`;
:host([has-color-index])::before {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
}
</style>
<img hidden$="[[!__imgVisible]]" src$="[[img]]" aria-hidden="true" />
<svg
part="icon"
hidden$="[[!__iconVisible]]"
id="avatar-icon"
viewBox="-50 -50 100 100"
preserveAspectRatio="xMidYMid meet"
aria-hidden="true"
>
<text dy=".35em" text-anchor="middle"></text>
</svg>
<svg
part="abbr"
hidden$="[[!__abbrVisible]]"
id="avatar-abbr"
viewBox="-50 -50 100 100"
preserveAspectRatio="xMidYMid meet"
aria-hidden="true"
>
<text dy=".35em" text-anchor="middle">[[abbr]]</text>
</svg>
`;
}

@@ -140,3 +152,3 @@

static get version() {
return '1.0.3';
return '2.0.0-alpha1';
}

@@ -214,6 +226,3 @@

static get observers() {
return [
'__imgOrAbbrOrNameChanged(img, abbr, name)',
'__i18nChanged(i18n.*)'
];
return ['__imgOrAbbrOrNameChanged(img, abbr, name)', '__i18nChanged(i18n.*)'];
}

@@ -265,21 +274,9 @@

const prop = `--vaadin-user-color-${index}`;
const isShady = window.ShadyCSS && !window.ShadyCSS.nativeCss;
// check if custom CSS property is defined
const isValid = Boolean(
isShady ?
window.ShadyCSS.getComputedStyleValue(document.documentElement, prop) :
getComputedStyle(document.documentElement).getPropertyValue(prop)
);
const isValid = Boolean(getComputedStyle(document.documentElement).getPropertyValue(prop));
if (isValid) {
const color = `var(${prop})`;
this.setAttribute('has-color-index', '');
if (isShady) {
window.ShadyCSS.styleSubtree(this, {
'--vaadin-avatar-user-color': color
});
} else {
this.style.setProperty('--vaadin-avatar-user-color', color);
}
this.style.setProperty('--vaadin-avatar-user-color', `var(${prop})`);
} else {

@@ -304,3 +301,6 @@ this.removeAttribute('has-color-index');

if (name) {
this.abbr = this.__generatedAbbr = name.split(' ').map(word => word.charAt(0)).join('');
this.abbr = this.__generatedAbbr = name
.split(' ')
.map((word) => word.charAt(0))
.join('');
} else {

@@ -307,0 +307,0 @@ this.abbr = undefined;

216

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

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';

@@ -5,143 +6,104 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';

import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-avatar-group" theme-for="vaadin-avatar-group">
<template>
<style>
[part="avatar"]:not([dir="rtl"]):not(:first-child) {
-webkit-mask-position: calc(50% - var(--lumo-size-m) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--lumo-size-m) + var(--vaadin-avatar-group-overlap));
}
registerStyles(
'vaadin-avatar-group',
css`
:host {
--_lumo-avatar-group-offset: var(--lumo-size-m);
}
[part="avatar"][dir="rtl"]:not(:first-child) {
-webkit-mask-position: calc(50% + var(--lumo-size-m) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
mask-position: calc(50% + var(--lumo-size-m) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
}
[part='avatar']:not([dir='rtl']):not(:first-child) {
-webkit-mask-position: calc(50% - var(--_lumo-avatar-group-offset) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--_lumo-avatar-group-offset) + var(--vaadin-avatar-group-overlap));
}
:host([theme~="xlarge"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
-webkit-mask-position: calc(50% - var(--lumo-size-xl) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--lumo-size-xl) + var(--vaadin-avatar-group-overlap));
}
[part='avatar'][dir='rtl']:not(:first-child) {
-webkit-mask-position: calc(
50% + var(--_lumo-avatar-group-offset) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
);
mask-position: calc(
50% + var(--_lumo-avatar-group-offset) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
);
}
:host([theme~="xlarge"]) [part="avatar"][dir="rtl"]:not(:first-child) {
-webkit-mask-position: calc(50% + var(--lumo-size-xl) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
mask-position: calc(50% + var(--lumo-size-xl) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
}
:host([theme~='xlarge']) {
--vaadin-avatar-group-overlap: 12px;
--vaadin-avatar-group-overlap-border: 3px;
--_lumo-avatar-group-offset: var(--lumo-size-xl);
}
:host([theme~="large"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
-webkit-mask-position: calc(50% - var(--lumo-size-l) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--lumo-size-l) + var(--vaadin-avatar-group-overlap));
}
:host([theme~='large']) {
--vaadin-avatar-group-overlap: 10px;
--vaadin-avatar-group-overlap-border: 3px;
--_lumo-avatar-group-offset: var(--lumo-size-l);
}
:host([theme~="large"]) [part="avatar"][dir="rtl"]:not(:first-child) {
-webkit-mask-position: calc(50% + var(--lumo-size-l) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
mask-position: calc(50% + var(--lumo-size-l) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
}
:host([theme~='small']) {
--vaadin-avatar-group-overlap: 6px;
--vaadin-avatar-group-overlap-border: 2px;
--_lumo-avatar-group-offset: var(--lumo-size-s);
}
:host([theme~="small"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
-webkit-mask-position: calc(50% - var(--lumo-size-s) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--lumo-size-s) + var(--vaadin-avatar-group-overlap));
}
:host([theme~='xsmall']) {
--vaadin-avatar-group-overlap: 4px;
--vaadin-avatar-group-overlap-border: 2px;
--_lumo-avatar-group-offset: var(--lumo-size-xs);
}
`,
{ moduleId: 'lumo-avatar-group' }
);
:host([theme~="small"]) [part="avatar"][dir="rtl"]:not(:first-child) {
-webkit-mask-position: calc(50% + var(--lumo-size-s) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
mask-position: calc(50% + var(--lumo-size-s) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
}
registerStyles(
'vaadin-avatar-group-overlay',
css`
:host {
--_lumo-list-box-item-selected-icon-display: none;
--_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius) / 4);
}
:host([theme~="xsmall"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
-webkit-mask-position: calc(50% - var(--lumo-size-xs) + var(--vaadin-avatar-group-overlap));
mask-position: calc(50% - var(--lumo-size-xs) + var(--vaadin-avatar-group-overlap));
}
[part='overlay'] {
outline: none;
}
`,
{ include: ['lumo-overlay', 'lumo-menu-overlay-core'], moduleId: 'lumo-avatar-group-overlay' }
);
:host([theme~="xsmall"]) [part="avatar"][dir="rtl"]:not(:first-child) {
-webkit-mask-position: calc(50% + var(--lumo-size-xs) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
mask-position: calc(50% + var(--lumo-size-xs) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width));
}
</style>
</template>
</dom-module><dom-module id="lumo-avatar-group-overlay" theme-for="vaadin-avatar-group-overlay">
<template>
<style include="lumo-overlay lumo-menu-overlay-core">
:host {
--_lumo-list-box-item-selected-icon-display: none;
--_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius) / 4);
}
registerStyles(
'vaadin-avatar-group-list-box',
css`
[part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
padding: var(--lumo-space-xs);
padding-right: var(--lumo-space-m);
}
[part="overlay"] {
outline: none;
}
</style>
</template>
</dom-module><dom-module id="lumo-avatar-group-list-box" theme-for="vaadin-avatar-group-list-box">
<template>
<style>
[part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
padding: var(--lumo-space-xs);
padding-right: 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' }
);
:host([dir="rtl"]) [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
padding: var(--lumo-space-xs);
padding-left: var(--lumo-space-m);
}
</style>
</template>
</dom-module><dom-module id="lumo-avatar-group-item" theme-for="vaadin-item">
<template>
<style>
:host([theme="avatar-group-item"]) [part="content"] {
display: flex;
align-items: center;
}
registerStyles(
'vaadin-item',
css`
:host([theme='avatar-group-item']) [part='content'] {
display: flex;
align-items: center;
}
:host([theme="avatar-group-item"]) ::slotted(vaadin-avatar) {
width: var(--lumo-size-xs);
height: var(--lumo-size-xs);
}
:host([theme='avatar-group-item']) ::slotted(vaadin-avatar) {
width: var(--lumo-size-xs);
height: var(--lumo-size-xs);
}
:host([theme="avatar-group-item"]:not([dir="rtl"])) ::slotted(vaadin-avatar) {
margin-right: var(--lumo-space-s);
}
:host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
margin-right: var(--lumo-space-s);
}
:host([theme="avatar-group-item"][dir="rtl"]) ::slotted(vaadin-avatar) {
margin-left: var(--lumo-space-s);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
const isIE = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
// NOTE(web-padawan): re-declaring same custom CSS property crashes IE11
if (!isIE) {
const AvatarGroupStyles = document.createElement('dom-module');
AvatarGroupStyles.setAttribute('theme-for', 'vaadin-avatar-group');
const tpl = document.createElement('template');
tpl.innerHTML = `
<style>
:host([theme~="xlarge"]) {
--vaadin-avatar-group-overlap: 12px;
--vaadin-avatar-group-overlap-border: 3px;
}
:host([theme~="large"]) {
--vaadin-avatar-group-overlap: 10px;
--vaadin-avatar-group-overlap-border: 3px;
}
:host([theme~="small"]) {
--vaadin-avatar-group-overlap: 6px;
--vaadin-avatar-group-overlap-border: 2px;
}
:host([theme~="xsmall"]) {
--vaadin-avatar-group-overlap: 4px;
--vaadin-avatar-group-overlap-border: 2px;
}
</style>
`;
AvatarGroupStyles.appendChild(tpl);
AvatarGroupStyles.register('lumo-avatar-group-variants');
}
:host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
margin-left: var(--lumo-space-s);
}
`,
{ moduleId: 'lumo-avatar-group-item' }
);

128

theme/lumo/vaadin-avatar-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';

@@ -6,79 +7,76 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';

import '@vaadin/vaadin-lumo-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-avatar" theme-for="vaadin-avatar">
<template>
<style>
:host {
width: var(--lumo-size-m);
height: var(--lumo-size-m);
color: var(--lumo-secondary-text-color);
background-color: var(--lumo-contrast-10pct);
border-radius: 50%;
outline: none;
cursor: default;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
registerStyles(
'vaadin-avatar',
css`
:host {
width: var(--lumo-size-m);
height: var(--lumo-size-m);
color: var(--lumo-secondary-text-color);
background-color: var(--lumo-contrast-10pct);
border-radius: 50%;
outline: none;
cursor: default;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:host([has-color-index]) {
color: var(--lumo-base-color);
}
:host([has-color-index]) {
color: var(--lumo-base-color);
}
:host([focus-ring]) {
border-color: var(--lumo-primary-color-50pct);
}
:host([focus-ring]) {
border-color: var(--lumo-primary-color-50pct);
}
[part="icon"],
[part="abbr"] {
fill: currentColor;
}
[part='icon'],
[part='abbr'] {
fill: currentColor;
}
[part="abbr"] {
font-family: var(--lumo-font-family);
font-size: 2.4375em;
font-weight: 500;
}
[part='abbr'] {
font-family: var(--lumo-font-family);
font-size: 2.4375em;
font-weight: 500;
}
:host([theme~="xlarge"]) [part="abbr"] {
font-size: 2.5em;
}
:host([theme~='xlarge']) [part='abbr'] {
font-size: 2.5em;
}
:host([theme~="large"]) [part="abbr"] {
font-size: 2.375em;
}
:host([theme~='large']) [part='abbr'] {
font-size: 2.375em;
}
:host([theme~="small"]) [part="abbr"] {
font-size: 2.75em;
}
:host([theme~='small']) [part='abbr'] {
font-size: 2.75em;
}
:host([theme~="xsmall"]) [part="abbr"] {
font-size: 3em;
}
:host([theme~='xsmall']) [part='abbr'] {
font-size: 3em;
}
:host([theme~="xlarge"]) {
width: var(--lumo-size-xl);
height: var(--lumo-size-xl);
}
:host([theme~='xlarge']) {
width: var(--lumo-size-xl);
height: var(--lumo-size-xl);
}
:host([theme~="large"]) {
width: var(--lumo-size-l);
height: var(--lumo-size-l);
}
:host([theme~='large']) {
width: var(--lumo-size-l);
height: var(--lumo-size-l);
}
:host([theme~="small"]) {
width: var(--lumo-size-s);
height: var(--lumo-size-s);
}
:host([theme~='small']) {
width: var(--lumo-size-s);
height: var(--lumo-size-s);
}
:host([theme~="xsmall"]) {
width: var(--lumo-size-xs);
height: var(--lumo-size-xs);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
:host([theme~='xsmall']) {
width: var(--lumo-size-xs);
height: var(--lumo-size-xs);
}
`,
{ moduleId: 'lumo-avatar' }
);

86

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

@@ -0,50 +1,52 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-avatar-group-overlay" theme-for="vaadin-avatar-group-overlay">
<template>
<style include="material-menu-overlay">
[part="overlay"] {
outline: none;
}
</style>
</template>
</dom-module><dom-module id="material-avatar-group-list-box" theme-for="vaadin-avatar-group-list-box">
<template>
<style>
[part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
padding: 8px;
padding-right: 24px;
}
registerStyles(
'vaadin-avatar-group-overlay',
css`
[part='overlay'] {
outline: none;
}
`,
{ include: ['material-menu-overlay'], moduleId: 'material-avatar-group-overlay' }
);
:host([dir="rtl"]) [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
padding: 8px;
padding-left: 24px;
}
registerStyles(
'vaadin-avatar-group-list-box',
css`
[part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
padding: 8px;
padding-right: 24px;
}
[part="items"] ::slotted(vaadin-item[theme="avatar-group-item"])::before {
display: none;
}
</style>
</template>
</dom-module><dom-module id="material-avatar-group-item" theme-for="vaadin-item">
<template>
<style>
:host([theme="avatar-group-item"]) [part="content"] {
display: flex;
align-items: center;
}
:host([dir='rtl']) [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
padding: 8px;
padding-left: 24px;
}
:host([theme="avatar-group-item"]:not([dir="rtl"])) ::slotted(vaadin-avatar) {
margin-right: 8px;
}
[part='items'] ::slotted(vaadin-item[theme='avatar-group-item'])::before {
display: none;
}
`,
{ moduleId: 'material-avatar-group-list-box' }
);
:host([theme="avatar-group-item"][dir="rtl"]) ::slotted(vaadin-avatar) {
margin-left: 8px;
}
</style>
</template>
</dom-module>`;
registerStyles(
'vaadin-item',
css`
:host([theme='avatar-group-item']) [part='content'] {
display: flex;
align-items: center;
}
document.head.appendChild($_documentContainer.content);
:host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
margin-right: 8px;
}
:host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
margin-left: 8px;
}
`,
{ moduleId: 'material-avatar-group-item' }
);

70

theme/material/vaadin-avatar-styles.js

@@ -0,43 +1,41 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-avatar" theme-for="vaadin-avatar">
<template>
<style>
:host {
--vaadin-avatar-size: 2.25rem;
color: var(--material-secondary-text-color);
background-color: var(--material-secondary-background-color);
border-radius: 50%;
cursor: default;
outline: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
registerStyles(
'vaadin-avatar',
css`
:host {
--vaadin-avatar-size: 2.25rem;
color: var(--material-secondary-text-color);
background-color: var(--material-secondary-background-color);
border-radius: 50%;
cursor: default;
outline: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:host([has-color-index]) {
color: var(--material-primary-contrast-color);
}
:host([has-color-index]) {
color: var(--material-primary-contrast-color);
}
:host([focus-ring]) {
border-color: var(--material-primary-color);
}
:host([focus-ring]) {
border-color: var(--material-primary-color);
}
[part="icon"],
[part="abbr"] {
fill: currentColor;
}
[part='icon'],
[part='abbr'] {
fill: currentColor;
}
[part="abbr"] {
font-family: var(--material-font-family);
font-size: 3em;
font-weight: 500;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
[part='abbr'] {
font-family: var(--material-font-family);
font-size: 3em;
font-weight: 500;
}
`,
{ moduleId: 'material-avatar' }
);

13

vaadin-avatar-group.d.ts

@@ -1,15 +0,2 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-avatar-group.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-avatar-group.js';
export * from './@types/interfaces';

13

vaadin-avatar.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-avatar.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-avatar.js';
./@types/interfaces.d.ts
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