@vaadin/avatar-group - npm Package Compare versions

Comparing version 24.3.0-alpha1 to 24.3.0-alpha10

package.json

 {
   "name": "@vaadin/avatar-group",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
@@ -40,16 +40,16 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha1",
-    "@vaadin/avatar": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/item": "24.3.0-alpha1",
-    "@vaadin/list-box": "24.3.0-alpha1",
-    "@vaadin/overlay": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1",
-    "lit": "^2.0.0"
+    "@vaadin/a11y-base": "24.3.0-alpha10",
+    "@vaadin/avatar": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/item": "24.3.0-alpha10",
+    "@vaadin/list-box": "24.3.0-alpha10",
+    "@vaadin/overlay": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
@@ -61,3 +61,3 @@ },
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

src/vaadin-avatar-group.d.ts

@@ -29,2 +29,3 @@ /**
   colorIndex?: number;
+  className?: string;
 }
@@ -83,3 +84,3 @@
    * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
-   * stamped avatars.
+   * stamped avatars, and set `className` to provide CSS class names.
    *
@@ -92,7 +93,9 @@ * #### Example
    *     name: 'User name',
-   *     img: 'url-to-image.png'
+   *     img: 'url-to-image.png',
+   *     className: 'even'
    *   },
    *   {
    *     abbr: 'JD',
-   *     colorIndex: 1
+   *     colorIndex: 1,
+   *     className: 'odd'
    *   },
@@ -99,0 +102,0 @@ * ];

src/vaadin-avatar-group.js

@@ -14,2 +14,3 @@ /**
 import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
@@ -149,3 +150,3 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
        * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
-       * stamped avatars.
+       * stamped avatars, and set `className` to provide CSS class names.
        *
@@ -158,7 +159,9 @@ * #### Example
        *     name: 'User name',
-       *     img: 'url-to-image.png'
+       *     img: 'url-to-image.png',
+       *     className: 'even'
        *   },
        *   {
        *     abbr: 'JD',
-       *     colorIndex: 1
+       *     colorIndex: 1,
+       *     className: 'odd'
        *   },
@@ -374,2 +377,5 @@ * ];
     avatar.colorIndex = item.colorIndex;
+    if (item.className) {
+      avatar.className = item.className;
+    }
 
@@ -439,2 +445,3 @@ if (item.name) {
                 .i18n="${this.i18n}"
+                class="${ifDefined(item.className)}"
                 with-tooltip
@@ -441,0 +448,0 @@ ></vaadin-avatar>

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "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/24.3.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.3.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/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.3.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-item).",
+          "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.3.0-alpha10/#/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.3.0-alpha10/#/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/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.3.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-item).",
           "attributes": [
@@ -63,3 +63,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/24.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.3.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```",
+                "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.3.0-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
                 "value": {
@@ -66,0 +66,0 @@ "type": [

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "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/24.3.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.3.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/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.3.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-item).",
+          "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.3.0-alpha10/#/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.3.0-alpha10/#/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/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.3.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-item).",
           "extension": true,
@@ -32,3 +32,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/24.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.3.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```",
+              "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.3.0-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
               "value": {
@@ -35,0 +35,0 @@ "kind": "expression"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63853

increased by1.01%

Lines of code

1254

increased by0.8%

Dependency changes

• + Added@lit/reactive-element@2.0.4(transitive)

• + Added@vaadin/a11y-base@24.3.0-alpha10(transitive)

• + Added@vaadin/avatar@24.3.0-alpha10(transitive)

• + Added@vaadin/component-base@24.3.0-alpha10(transitive)

• + Added@vaadin/icon@24.3.0-alpha10(transitive)

• + Added@vaadin/item@24.3.0-alpha10(transitive)

• + Added@vaadin/list-box@24.3.0-alpha10(transitive)

• + Added@vaadin/overlay@24.3.0-alpha10(transitive)

• + Added@vaadin/tooltip@24.3.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.3.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.3.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.3.0-alpha10(transitive)

• + Addedlit@3.2.1(transitive)

• + Addedlit-element@4.1.1(transitive)

• + Addedlit-html@3.2.1(transitive)

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removed@vaadin/a11y-base@24.3.0-alpha1(transitive)

• - Removed@vaadin/avatar@24.3.0-alpha1(transitive)

• - Removed@vaadin/component-base@24.3.0-alpha1(transitive)

• - Removed@vaadin/icon@24.3.0-alpha1(transitive)

• - Removed@vaadin/item@24.3.0-alpha1(transitive)

• - Removed@vaadin/list-box@24.3.0-alpha1(transitive)

• - Removed@vaadin/overlay@24.3.0-alpha1(transitive)

• - Removed@vaadin/tooltip@24.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.3.0-alpha1(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)

• Updated@vaadin/a11y-base@24.3.0-alpha10

• Updated@vaadin/avatar@24.3.0-alpha10

• Updated@vaadin/component-base@24.3.0-alpha10

• Updated@vaadin/item@24.3.0-alpha10

• Updated@vaadin/list-box@24.3.0-alpha10

• Updated@vaadin/overlay@24.3.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.3.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.3.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@24.3.0-alpha10

• Updatedlit@^3.0.0