@vaadin/vaadin-avatar - npm Package Compare versions

Comparing version 1.0.0-alpha3 to 1.0.0-alpha4

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-avatar",
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "main": "vaadin-avatar-group.js",
@@ -22,3 +22,5 @@ "author": "Vaadin Ltd",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
+    "@types",
     "src",
@@ -45,5 +47,5 @@ "theme"
   "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+  },
+  "devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
@@ -50,0 +52,0 @@ "@polymer/iron-test-helpers": "^3.0.0",

src/vaadin-avatar-group.js

@@ -51,3 +51,2 @@ /**
       [part="avatar"]:not(:first-child) {
-        margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width) * 1);
         -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
@@ -57,5 +56,15 @@ mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMCAwSDBWMzAwSDMwMFYwWk0xNTAgMjAwQzE3Ny42MTQgMjAwIDIwMCAxNzcuNjE0IDIwMCAxNTBDMjAwIDEyMi4zODYgMTc3LjYxNCAxMDAgMTUwIDEwMEMxMjIuMzg2IDEwMCAxMDAgMTIyLjM4NiAxMDAgMTUwQzEwMCAxNzcuNjE0IDEyMi4zODYgMjAwIDE1MCAyMDBaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==);
         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"][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>
@@ -66,3 +75,3 @@ <div id="container">
       </template>
-      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[!__maxReached]]" abbr="[[__computeMore(items.length, max)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown"></vaadin-avatar>
+      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[!__maxReached]]" abbr="[[__computeMore(items.length, max)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown" role="button" aria-haspopup="listbox"></vaadin-avatar>
     </div>
@@ -73,4 +82,4 @@ <vaadin-avatar-group-overlay id="overlay" opened="{{_opened}}" on-vaadin-overlay-close="_onVaadinOverlayClose">
           <template is="dom-repeat" items="[[__computeExtraItems(items.*, max)]]">
-            <vaadin-item theme="avatar-group-item">
-              <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" tabindex="-1"></vaadin-avatar>
+            <vaadin-item theme="avatar-group-item" role="option">
+              <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" color-index="[[item.colorIndex]]" tabindex="-1" aria-hidden="true"></vaadin-avatar>
               [[item.name]]
@@ -90,3 +99,3 @@ </vaadin-item>
   static get version() {
-    return '1.0.0-alpha3';
+    return '1.0.0-alpha4';
   }
@@ -98,2 +107,3 @@
        * An array containing the items which will be stamped as avatars
+       * @type {!Array<!AvatarGroupItem> | undefined}
        */
@@ -113,2 +123,3 @@ items: {
 
+      /** @private */
       __maxReached: {
@@ -119,2 +130,3 @@ type: Boolean,
 
+      /** @private */
       _opened: {
@@ -132,2 +144,3 @@ type: Boolean,
 
+  /** @protected */
   ready() {
@@ -143,2 +156,16 @@ super.ready();
 
+  /**
+   * @param {string} name
+   * @param {?string} oldValue
+   * @param {?string} newValue
+   * @protected
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'dir') {
+      this.__setPosition();
+    }
+  }
+
+  /** @private */
   _onOverflowClick(e) {
@@ -153,2 +180,3 @@ e.stopPropagation();
 
+  /** @private */
   _onOverflowKeyDown(e) {
@@ -163,2 +191,3 @@ if (!this._opened) {
 
+  /** @private */
   _onListKeyDown(event) {
@@ -170,2 +199,3 @@ if (event.key === 'Escape' || event.key === 'Esc' || /^(Tab)$/.test(event.key)) {
 
+  /** @private */
   _onResize() {
@@ -175,2 +205,3 @@ this.__setPosition();
 
+  /** @private */
   _onVaadinOverlayClose(e) {
@@ -182,2 +213,3 @@ if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().indexOf(this) !== -1) {
 
+  /** @private */
   __computeItems(arr, max) {
@@ -188,2 +220,3 @@ const items = arr.base || [];
 
+  /** @private */
   __computeExtraItems(arr, max) {
@@ -194,2 +227,3 @@ const items = arr.base || [];
 
+  /** @private */
   __computeMaxReached(items, max) {
@@ -199,2 +233,3 @@ return max != null && items > max;
 
+  /** @private */
   __computeMore(items, max) {
@@ -204,2 +239,3 @@ return `+${items - max}`;
 
+  /** @private */
   __computeMoreTitle(items, max) {
@@ -218,6 +254,3 @@ if (max == null) {
 
-  __itemsChanged(items) {
-    this.__updateOffset();
-  }
-
+  /** @private */
   __openedChanged(opened, wasOpened) {
@@ -227,4 +260,10 @@ if (opened) {
         this._menuElement = this._overlayElement.content.querySelector('vaadin-avatar-group-list-box');
+        this._menuElement.setAttribute('role', 'listbox');
       }
 
+      this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
+
+      const avatars = this._menuElement.querySelectorAll('vaadin-avatar');
+      avatars.forEach(avatar => avatar.removeAttribute('title'));
+
       this._menuElement.focus();
@@ -235,7 +274,11 @@ this.__setPosition();
       this.$.overflow.focus();
-      this.$.overflow.setAttribute('focus-ring', '');
+      if (this._openedWithFocusRing) {
+        this.$.overflow.setAttribute('focus-ring', '');
+      }
       window.removeEventListener('scroll', this.__boundSetPosition, true);
     }
+    this.$.overflow.setAttribute('aria-expanded', opened === true);
   }
 
+  /** @private */
   __setPosition() {
@@ -242,0 +285,0 @@ if (!this._opened) {

src/vaadin-avatar.js

@@ -17,8 +17,8 @@ /**
 
-// Listen for top-level keydown and mousedown events.
+// Listen for top-level Tab keydown and mousedown events.
 // Use capture phase so we detect events even if they're handled.
 window.addEventListener(
   'keydown',
-  () => {
-    keyboardActive = true;
+  (e) => {
+    keyboardActive = e.keyCode === 9;
   },
@@ -121,3 +121,3 @@ true
   static get version() {
-    return '1.0.0-alpha3';
+    return '1.0.0-alpha4';
   }
@@ -178,2 +178,3 @@
 
+  /** @protected */
   ready() {
@@ -189,2 +190,6 @@ super.ready();
 
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'img');
+    }
+
     if (!this.hasAttribute('tabindex')) {
@@ -195,11 +200,12 @@ this.setAttribute('tabindex', '0');
     this.addEventListener('focusin', () => {
-      this._setFocused(true);
+      this.__setFocused(true);
     });
 
     this.addEventListener('focusout', () => {
-      this._setFocused(false);
+      this.__setFocused(false);
     });
   }
 
-  _setFocused(focused) {
+  /** @private */
+  __setFocused(focused) {
     if (focused) {
@@ -217,11 +223,13 @@ this.setAttribute('focused', '');
 
+  /** @private */
   __colorIndexChanged(index) {
     if (index != null) {
       this.setAttribute('has-color-index', '');
+      const color = `var(--vaadin-user-color-${index})`;
       if (window.ShadyCSS && !window.ShadyCSS.nativeCss) {
         window.ShadyCSS.styleSubtree(this, {
-          '--vaadin-avatar-border-color': `var(--user-color-${index})`
+          '--vaadin-avatar-border-color': color
         });
       } else {
-        this.style.setProperty('--vaadin-avatar-border-color', `var(--user-color-${index})`);
+        this.style.setProperty('--vaadin-avatar-border-color', color);
       }
@@ -233,2 +241,3 @@ } else {
 
+  /** @private */
   __imgOrAbbrOrNameChanged(img, abbr, name) {
@@ -253,2 +262,3 @@ this.__updateVisibility();
 
+  /** @private */
   __updateVisibility() {
@@ -260,2 +270,3 @@ this.__imgVisible = !!this.img;
 
+  /** @private */
   __setTitle(title) {
@@ -262,0 +273,0 @@ if (title) {

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

@@ -10,3 +10,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style>
-      [part="avatar"]:not(:first-child) {
+      [part="avatar"]:not([dir="rtl"]):not(:first-child) {
         -webkit-mask-position: calc(50% - var(--lumo-size-m) + var(--vaadin-avatar-group-overlap));
@@ -16,3 +16,8 @@ mask-position: calc(50% - var(--lumo-size-m) + var(--vaadin-avatar-group-overlap));
 
-      :host([theme~="xlarge"]) [part="avatar"]:not(:first-child) {
+      [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));
+      }
+
+      :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));
@@ -22,3 +27,8 @@ mask-position: calc(50% - var(--lumo-size-xl) + var(--vaadin-avatar-group-overlap));
 
-      :host([theme~="large"]) [part="avatar"]:not(:first-child) {
+      :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~="large"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
         -webkit-mask-position: calc(50% - var(--lumo-size-l) + var(--vaadin-avatar-group-overlap));
@@ -28,3 +38,8 @@ mask-position: calc(50% - var(--lumo-size-l) + var(--vaadin-avatar-group-overlap));
 
-      :host([theme~="small"]) [part="avatar"]:not(:first-child) {
+      :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"]) [part="avatar"]:not([dir="rtl"]):not(:first-child) {
         -webkit-mask-position: calc(50% - var(--lumo-size-s) + var(--vaadin-avatar-group-overlap));
@@ -34,6 +49,16 @@ mask-position: calc(50% - var(--lumo-size-s) + var(--vaadin-avatar-group-overlap));
 
-      :host([theme~="xsmall"]) [part="avatar"]:not(:first-child) {
+      :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));
+      }
+
+      :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));
       }
+
+      :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>
@@ -61,2 +86,7 @@ </template>
       }
+
+      :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
+        padding: var(--lumo-space-xs);
+        padding-left: var(--lumo-space-m);
+      }
     </style>
@@ -63,0 +93,0 @@ </template>

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

@@ -17,5 +17,11 @@ import '@vaadin/vaadin-material-styles/color.js';
       [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
-        padding: 0.5rem;
+        padding: 8px;
+        padding-right: 24px;
       }
 
+      :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"]) {
+        padding: 8px;
+        padding-left: 24px;
+      }
+
       [part="items"] ::slotted(vaadin-item[theme="avatar-group-item"])::before {
@@ -35,7 +41,7 @@ display: none;
       :host([theme="avatar-group-item"]:not([dir="rtl"])) ::slotted(vaadin-avatar) {
-        margin-right: 0.5rem;
+        margin-right: 8px;
       }
 
       :host([theme="avatar-group-item"][dir="rtl"]) ::slotted(vaadin-avatar) {
-        margin-left: 0.5rem;
+        margin-left: 8px;
       }
@@ -42,0 +48,0 @@ </style>

vaadin-avatar-group.js

 import './theme/lumo/vaadin-avatar-group.js';
+export * from './src/vaadin-avatar-group.js';

vaadin-avatar.js

 import './theme/lumo/vaadin-avatar.js';
+export * from './src/vaadin-avatar.js';

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51981

increased by18.84%

Number of package files

23

increased by27.78%

Lines of code

949

increased by28.59%

No dependency changes