@vaadin/avatar-group 24.8.4 → 25.0.0-alpha10

package/src/vaadin-lit-avatar-group-menu-item.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes DirMixin
- * @mixes ItemMixin
- * @mixes ThemableMixin
- * @protected
- */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-avatar-group-menu-item';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'menuitem');
-  }
-}
-
-defineCustomElement(AvatarGroupMenuItem);
-
-export { AvatarGroupMenuItem };

package/src/vaadin-lit-avatar-group-menu.js

@@ -1,87 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, html, LitElement } from 'lit';
-import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes DirMixin
- * @mixes ListMixin
- * @mixes ThemableMixin
- * @protected
- */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-avatar-group-menu';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part='items'] {
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      // We don't need to define this property since super default is vertical,
-      // but we don't want it to be modified, or be shown in the API docs.
-      /** @private */
-      orientation: {
-        readOnly: true,
-      },
-    };
-  }
-
-  /**
-   * @return {!HTMLElement}
-   * @protected
-   * @override
-   */
-  get _scrollerElement() {
-    return this.shadowRoot.querySelector('[part="items"]');
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="items">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'menu');
-  }
-}
-
-defineCustomElement(AvatarGroupMenu);
-
-export { AvatarGroupMenu };

package/src/vaadin-lit-avatar-group-overlay.js

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes PositionMixin
- * @mixes OverlayMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
- * @private
- */
-class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
-  static get is() {
-    return 'vaadin-avatar-group-overlay';
-  }
-
-  static get styles() {
-    return overlayStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(AvatarGroupOverlay);

package/src/vaadin-lit-avatar-group.js

@@ -1,65 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/avatar/src/vaadin-lit-avatar.js';
-import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
-import './vaadin-lit-avatar-group-menu.js';
-import './vaadin-lit-avatar-group-menu-item.js';
-import './vaadin-lit-avatar-group-overlay.js';
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
-import { avatarGroupStyles } from './vaadin-avatar-group-styles.js';
-
-/**
- * LitElement based version of `<vaadin-avatar-group>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-avatar-group';
-  }
-
-  static get styles() {
-    return avatarGroupStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="container" part="container">
-        <slot></slot>
-        <slot name="overflow"></slot>
-      </div>
-
-      <vaadin-avatar-group-overlay
-        id="overlay"
-        .opened="${this._opened}"
-        .positionTarget="${this._overflow}"
-        no-vertical-overlap
-        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
-        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
-        @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-avatar-group-overlay>
-    `;
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this._opened = event.detail.value;
-  }
-}
-
-defineCustomElement(AvatarGroup);
-
-export { AvatarGroup };

package/theme/lumo/vaadin-lit-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/lumo/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

package/theme/lumo/vaadin-lit-avatar-group.js

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/lumo/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

package/theme/material/vaadin-avatar-group-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

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

@@ -1,78 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
-import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
-import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-avatar-group',
-  css`
-    :host {
-      --vaadin-avatar-size: 2.25rem;
-    }
-
-    :host([theme~='xlarge']) {
-      --vaadin-avatar-group-overlap: 12px;
-      --vaadin-avatar-group-overlap-border: 3px;
-      --vaadin-avatar-size: 3.5rem;
-    }
-
-    :host([theme~='large']) {
-      --vaadin-avatar-group-overlap: 10px;
-      --vaadin-avatar-group-overlap-border: 3px;
-      --vaadin-avatar-size: 2.75rem;
-    }
-
-    :host([theme~='small']) {
-      --vaadin-avatar-group-overlap: 6px;
-      --vaadin-avatar-group-overlap-border: 2px;
-      --vaadin-avatar-size: 1.875rem;
-    }
-
-    :host([theme~='xsmall']) {
-      --vaadin-avatar-group-overlap: 4px;
-      --vaadin-avatar-group-overlap-border: 2px;
-      --vaadin-avatar-size: 1.625rem;
-    }
-  `,
-  { moduleId: 'material-avatar-group' },
-);
-
-const avatarGroupOverlay = css`
-  [part='overlay'] {
-    outline: none;
-  }
-`;
-
-registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay], {
-  moduleId: 'material-avatar-group-overlay',
-});
-
-registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'material-avatar-group-menu' });
-
-registerStyles(
-  'vaadin-avatar-group-menu-item',
-  [
-    item,
-    css`
-      :host {
-        padding: 8px;
-        padding-inline-end: 24px;
-      }
-
-      [part='content'] {
-        display: flex;
-        align-items: center;
-      }
-
-      [part='checkmark']::before {
-        display: none;
-      }
-
-      [part='content'] ::slotted(vaadin-avatar) {
-        margin-inline-end: 8px;
-      }
-    `,
-  ],
-  { moduleId: 'material-avatar-group-menu-item' },
-);

package/theme/material/vaadin-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-avatar-group.js';

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

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-avatar-group.js';

package/theme/material/vaadin-lit-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

package/theme/material/vaadin-lit-avatar-group.js

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

package/vaadin-lit-avatar-group.d.ts

@@ -1 +0,0 @@
-export * from './src/vaadin-avatar-group.js';

package/vaadin-lit-avatar-group.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-avatar-group.js';
-export * from './src/vaadin-lit-avatar-group.js';