@vaadin/avatar-group 24.0.0-alpha9 → 24.0.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-avatar-group-menu-item.d.ts +21 -0
  3. package/src/vaadin-avatar-group-menu-item.js +53 -0
  4. package/src/vaadin-avatar-group-menu.d.ts +22 -0
  5. package/src/vaadin-avatar-group-menu.js +81 -0
  6. package/src/vaadin-avatar-group.d.ts +6 -1
  7. package/src/vaadin-avatar-group.js +20 -17
  8. package/theme/lumo/vaadin-avatar-group-styles.js +24 -24
  9. package/theme/lumo/vaadin-avatar-group.js +0 -2
  10. package/theme/material/vaadin-avatar-group-styles.js +25 -22
  11. package/theme/material/vaadin-avatar-group.js +0 -2
  12. package/web-types.json +25 -3
  13. package/web-types.lit.json +10 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/avatar-group",
3
- "version": "24.0.0-alpha9",
3
+ "version": "24.0.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,24 +37,24 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@polymer/polymer": "^3.0.0",
40
- "@vaadin/avatar": "24.0.0-alpha9",
41
- "@vaadin/component-base": "24.0.0-alpha9",
42
- "@vaadin/item": "24.0.0-alpha9",
43
- "@vaadin/list-box": "24.0.0-alpha9",
44
- "@vaadin/overlay": "24.0.0-alpha9",
45
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
46
- "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
47
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9",
40
+ "@vaadin/avatar": "24.0.0-beta2",
41
+ "@vaadin/component-base": "24.0.0-beta2",
42
+ "@vaadin/item": "24.0.0-beta2",
43
+ "@vaadin/list-box": "24.0.0-beta2",
44
+ "@vaadin/overlay": "24.0.0-beta2",
45
+ "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
46
+ "@vaadin/vaadin-material-styles": "24.0.0-beta2",
47
+ "@vaadin/vaadin-themable-mixin": "24.0.0-beta2",
48
48
  "lit": "^2.0.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@esm-bundle/chai": "^4.3.4",
52
- "@vaadin/testing-helpers": "^0.3.2",
52
+ "@vaadin/testing-helpers": "^0.4.0",
53
53
  "sinon": "^13.0.2"
54
54
  },
55
55
  "web-types": [
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
59
+ "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
60
60
  }
package/src/vaadin-avatar-group-menu-item.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
7
+ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
8
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
+
10
+ /**
11
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
12
+ */
13
+ declare class AvatarGroupMenuItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
14
+
15
+ declare global {
16
+ interface HTMLElementTagNameMap {
17
+ 'vaadin-avatar-group-menu-item': AvatarGroupMenuItem;
18
+ }
19
+ }
20
+
21
+ export { AvatarGroupMenuItem };
package/src/vaadin-avatar-group-menu-item.js ADDED
@@ -0,0 +1,53 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
9
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
+
11
+ /**
12
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
13
+ *
14
+ * @extends HTMLElement
15
+ * @mixes DirMixin
16
+ * @mixes ItemMixin
17
+ * @mixes ThemableMixin
18
+ * @protected
19
+ */
20
+ class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
21
+ static get is() {
22
+ return 'vaadin-avatar-group-menu-item';
23
+ }
24
+
25
+ static get template() {
26
+ return html`
27
+ <style>
28
+ :host {
29
+ display: inline-block;
30
+ }
31
+
32
+ :host([hidden]) {
33
+ display: none !important;
34
+ }
35
+ </style>
36
+ <span part="checkmark" aria-hidden="true"></span>
37
+ <div part="content">
38
+ <slot></slot>
39
+ </div>
40
+ `;
41
+ }
42
+
43
+ /** @protected */
44
+ ready() {
45
+ super.ready();
46
+
47
+ this.setAttribute('role', 'menuitem');
48
+ }
49
+ }
50
+
51
+ customElements.define(AvatarGroupMenuItem.is, AvatarGroupMenuItem);
52
+
53
+ export { AvatarGroupMenuItem };
package/src/vaadin-avatar-group-menu.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
9
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
+
11
+ /**
12
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
13
+ */
14
+ declare class AvatarGroupMenu extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
15
+
16
+ declare global {
17
+ interface HTMLElementTagNameMap {
18
+ 'vaadin-avatar-group-menu': AvatarGroupMenu;
19
+ }
20
+ }
21
+
22
+ export { AvatarGroupMenu };
package/src/vaadin-avatar-group-menu.js ADDED
@@ -0,0 +1,81 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
+ import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
10
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
+
12
+ /**
13
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
14
+ *
15
+ * @extends HTMLElement
16
+ * @mixes ControllerMixin
17
+ * @mixes DirMixin
18
+ * @mixes ListMixin
19
+ * @mixes ThemableMixin
20
+ * @protected
21
+ */
22
+ class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
23
+ static get is() {
24
+ return 'vaadin-avatar-group-menu';
25
+ }
26
+
27
+ static get template() {
28
+ return html`
29
+ <style>
30
+ :host {
31
+ display: flex;
32
+ }
33
+
34
+ :host([hidden]) {
35
+ display: none !important;
36
+ }
37
+
38
+ [part='items'] {
39
+ height: 100%;
40
+ width: 100%;
41
+ overflow-y: auto;
42
+ -webkit-overflow-scrolling: touch;
43
+ }
44
+ </style>
45
+ <div part="items">
46
+ <slot></slot>
47
+ </div>
48
+ `;
49
+ }
50
+
51
+ static get properties() {
52
+ return {
53
+ // We don't need to define this property since super default is vertical,
54
+ // but we don't want it to be modified, or be shown in the API docs.
55
+ /** @private */
56
+ orientation: {
57
+ readOnly: true,
58
+ },
59
+ };
60
+ }
61
+
62
+ /**
63
+ * @return {!HTMLElement}
64
+ * @protected
65
+ * @override
66
+ */
67
+ get _scrollerElement() {
68
+ return this.shadowRoot.querySelector('[part="items"]');
69
+ }
70
+
71
+ /** @protected */
72
+ ready() {
73
+ super.ready();
74
+
75
+ this.setAttribute('role', 'menu');
76
+ }
77
+ }
78
+
79
+ customElements.define(AvatarGroupMenu.is, AvatarGroupMenu);
80
+
81
+ export { AvatarGroupMenu };
package/src/vaadin-avatar-group.d.ts CHANGED
@@ -6,6 +6,7 @@
6
6
  import { AvatarI18n } from '@vaadin/avatar/src/vaadin-avatar.js';
7
7
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
+ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
9
10
  import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
10
11
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
12
 
@@ -64,8 +65,12 @@ export interface AvatarGroupItem {
64
65
  * components are themable:
65
66
  *
66
67
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
68
+ * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
69
+ * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
67
70
  */
68
- declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
71
+ declare class AvatarGroup extends ResizeMixin(
72
+ OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))),
73
+ ) {
69
74
  readonly _avatars: HTMLElement[];
70
75
 
71
76
  /**
package/src/vaadin-avatar-group.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/avatar/src/vaadin-avatar.js';
7
- import '@vaadin/item/src/vaadin-item.js';
8
- import '@vaadin/list-box/src/vaadin-list-box.js';
7
+ import './vaadin-avatar-group-menu.js';
8
+ import './vaadin-avatar-group-menu-item.js';
9
9
  import './vaadin-avatar-group-overlay.js';
10
10
  import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
11
11
  import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -14,6 +14,7 @@ import { html, render } from 'lit';
14
14
  import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
15
15
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
16
16
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
17
+ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
17
18
  import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
18
19
  import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
19
20
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -57,14 +58,17 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
57
58
  * components are themable:
58
59
  *
59
60
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
61
+ * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
62
+ * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
60
63
  *
61
64
  * @extends HTMLElement
62
65
  * @mixes ControllerMixin
63
66
  * @mixes ElementMixin
67
+ * @mixes OverlayClassMixin
64
68
  * @mixes ThemableMixin
65
69
  * @mixes ResizeMixin
66
70
  */
67
- class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
71
+ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))) {
68
72
  static get template() {
69
73
  return legacyHtml`
70
74
  <style>
@@ -282,7 +286,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
282
286
 
283
287
  this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
284
288
  initializer: (overflow) => {
285
- overflow.setAttribute('aria-haspopup', 'listbox');
289
+ overflow.setAttribute('aria-haspopup', 'menu');
286
290
  overflow.setAttribute('aria-expanded', 'false');
287
291
  overflow.addEventListener('click', (e) => this._onOverflowClick(e));
288
292
  overflow.addEventListener('keydown', (e) => this._onOverflowKeyDown(e));
@@ -297,7 +301,9 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
297
301
  });
298
302
  this.addController(this._overflowController);
299
303
 
300
- this.$.overlay.renderer = this.__overlayRenderer.bind(this);
304
+ const overlay = this.$.overlay;
305
+ overlay.renderer = this.__overlayRenderer.bind(this);
306
+ this._overlayElement = overlay;
301
307
 
302
308
  afterNextRender(this, () => {
303
309
  this.__setItemsInView();
@@ -323,29 +329,27 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
323
329
  * @private
324
330
  */
325
331
  __overlayRenderer(root) {
326
- let listBox = root.firstElementChild;
327
- if (!listBox) {
328
- listBox = document.createElement('vaadin-list-box');
329
- listBox.addEventListener('keydown', (event) => this._onListKeyDown(event));
330
- root.appendChild(listBox);
332
+ let menu = root.firstElementChild;
333
+ if (!menu) {
334
+ menu = document.createElement('vaadin-avatar-group-menu');
335
+ menu.addEventListener('keydown', (event) => this._onListKeyDown(event));
336
+ root.appendChild(menu);
331
337
  }
332
338
 
333
- listBox.textContent = '';
339
+ menu.textContent = '';
334
340
 
335
341
  if (!this._overflowItems) {
336
342
  return;
337
343
  }
338
344
 
339
345
  this._overflowItems.forEach((item) => {
340
- listBox.appendChild(this.__createItemElement(item));
346
+ menu.appendChild(this.__createItemElement(item));
341
347
  });
342
348
  }
343
349
 
344
350
  /** @private */
345
351
  __createItemElement(item) {
346
- const itemElement = document.createElement('vaadin-item');
347
- itemElement.setAttribute('theme', 'avatar-group-item');
348
- itemElement.setAttribute('role', 'option');
352
+ const itemElement = document.createElement('vaadin-avatar-group-menu-item');
349
353
 
350
354
  const avatar = document.createElement('vaadin-avatar');
351
355
  itemElement.appendChild(avatar);
@@ -591,8 +595,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
591
595
  __openedChanged(opened, wasOpened) {
592
596
  if (opened) {
593
597
  if (!this._menuElement) {
594
- this._menuElement = this.$.overlay.querySelector('vaadin-list-box');
595
- this._menuElement.setAttribute('role', 'listbox');
598
+ this._menuElement = this.$.overlay.querySelector('vaadin-avatar-group-menu');
596
599
  }
597
600
 
598
601
  this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
package/theme/lumo/vaadin-avatar-group-styles.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import '@vaadin/vaadin-lumo-styles/color.js';
2
2
  import '@vaadin/vaadin-lumo-styles/sizing.js';
3
3
  import '@vaadin/vaadin-lumo-styles/spacing.js';
4
+ import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
5
+ import { listBox } from '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
4
6
  import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
5
7
  import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
6
8
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -54,31 +56,29 @@ registerStyles('vaadin-avatar-group-overlay', [overlay, menuOverlayCore, avatarG
54
56
  moduleId: 'lumo-avatar-group-overlay',
55
57
  });
56
58
 
57
- registerStyles(
58
- 'vaadin-item',
59
- css`
60
- :host([theme='avatar-group-item']) {
61
- padding: var(--lumo-space-xs);
62
- padding-inline-end: var(--lumo-space-m);
63
- }
64
-
65
- :host([theme='avatar-group-item']) [part='content'] {
66
- display: flex;
67
- align-items: center;
68
- }
59
+ registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'lumo-avatar-group-menu' });
69
60
 
70
- :host([theme='avatar-group-item']) ::slotted(vaadin-avatar) {
71
- width: var(--lumo-size-xs);
72
- height: var(--lumo-size-xs);
73
- }
61
+ registerStyles(
62
+ 'vaadin-avatar-group-menu-item',
63
+ [
64
+ item,
65
+ css`
66
+ :host {
67
+ padding: var(--lumo-space-xs);
68
+ padding-inline-end: var(--lumo-space-m);
69
+ }
74
70
 
75
- :host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
76
- margin-right: var(--lumo-space-s);
77
- }
71
+ [part='content'] {
72
+ display: flex;
73
+ align-items: center;
74
+ }
78
75
 
79
- :host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
80
- margin-left: var(--lumo-space-s);
81
- }
82
- `,
83
- { moduleId: 'lumo-avatar-group-item' },
76
+ [part='content'] ::slotted(vaadin-avatar) {
77
+ width: var(--lumo-size-xs);
78
+ height: var(--lumo-size-xs);
79
+ margin-inline-end: var(--lumo-space-s);
80
+ }
81
+ `,
82
+ ],
83
+ { moduleId: 'lumo-avatar-group-menu-item' },
84
84
  );
package/theme/lumo/vaadin-avatar-group.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
2
- import '@vaadin/item/theme/lumo/vaadin-item.js';
3
- import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
4
2
  import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
5
3
  import './vaadin-avatar-group-styles.js';
6
4
  import '../../src/vaadin-avatar-group.js';
package/theme/material/vaadin-avatar-group-styles.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import '@vaadin/vaadin-material-styles/color.js';
2
+ import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
3
+ import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
2
4
  import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
3
5
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
6
 
@@ -46,30 +48,31 @@ registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay],
46
48
  moduleId: 'material-avatar-group-overlay',
47
49
  });
48
50
 
51
+ registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'material-avatar-group-menu' });
52
+
49
53
  registerStyles(
50
- 'vaadin-item',
51
- css`
52
- :host([theme='avatar-group-item']) {
53
- padding: 8px;
54
- padding-inline-end: 24px;
55
- }
54
+ 'vaadin-avatar-group-menu-item',
55
+ [
56
+ item,
57
+ css`
58
+ :host {
59
+ padding: 8px;
60
+ padding-inline-end: 24px;
61
+ }
56
62
 
57
- :host([theme='avatar-group-item']) [part='content'] {
58
- display: flex;
59
- align-items: center;
60
- }
63
+ [part='content'] {
64
+ display: flex;
65
+ align-items: center;
66
+ }
61
67
 
62
- :host([theme='avatar-group-item']) [part='checkmark']::before {
63
- display: none;
64
- }
68
+ [part='checkmark']::before {
69
+ display: none;
70
+ }
65
71
 
66
- :host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
67
- margin-right: 8px;
68
- }
69
-
70
- :host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
71
- margin-left: 8px;
72
- }
73
- `,
74
- { moduleId: 'material-avatar-group-item' },
72
+ [part='content'] ::slotted(vaadin-avatar) {
73
+ margin-inline-end: 8px;
74
+ }
75
+ `,
76
+ ],
77
+ { moduleId: 'material-avatar-group-menu-item' },
75
78
  );
package/theme/material/vaadin-avatar-group.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import '@vaadin/avatar/theme/material/vaadin-avatar.js';
2
- import '@vaadin/item/theme/material/vaadin-item.js';
3
- import '@vaadin/list-box/theme/material/vaadin-list-box.js';
4
2
  import '@vaadin/overlay/theme/material/vaadin-overlay.js';
5
3
  import './vaadin-avatar-group-styles.js';
6
4
  import '../../src/vaadin-avatar-group.js';
package/web-types.json CHANGED
@@ -1,15 +1,26 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/avatar-group",
4
- "version": "24.0.0-alpha9",
4
+ "version": "24.0.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-avatar-group",
11
- "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-alpha9/#/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-alpha9/#/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-alpha9/#/elements/vaadin-overlay).",
11
+ "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-beta2/#/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-beta2/#/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-beta2/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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.0.0-beta2/#/elements/vaadin-item).",
12
12
  "attributes": [
13
+ {
14
+ "name": "overlay-class",
15
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
16
+ "value": {
17
+ "type": [
18
+ "string",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
13
24
  {
14
25
  "name": "max-items-visible",
15
26
  "description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
@@ -35,9 +46,20 @@
35
46
  ],
36
47
  "js": {
37
48
  "properties": [
49
+ {
50
+ "name": "overlayClass",
51
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
52
+ "value": {
53
+ "type": [
54
+ "string",
55
+ "null",
56
+ "undefined"
57
+ ]
58
+ }
59
+ },
38
60
  {
39
61
  "name": "items",
40
- "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-alpha9/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/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```",
62
+ "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-beta2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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```",
41
63
  "value": {
42
64
  "type": [
43
65
  "Array.<AvatarGroupItem>",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/avatar-group",
4
- "version": "24.0.0-alpha9",
4
+ "version": "24.0.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,12 +16,19 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-avatar-group",
19
- "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-alpha9/#/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-alpha9/#/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-alpha9/#/elements/vaadin-overlay).",
19
+ "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-beta2/#/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-beta2/#/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-beta2/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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.0.0-beta2/#/elements/vaadin-item).",
20
20
  "extension": true,
21
21
  "attributes": [
22
+ {
23
+ "name": ".overlayClass",
24
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": ".items",
24
- "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-alpha9/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/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```",
31
+ "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-beta2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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```",
25
32
  "value": {
26
33
  "kind": "expression"
27
34
  }