dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
72 lines (71 loc) • 3.62 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
declare const AvatarGroupBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type AvatarGroupLayout = 'stack' | 'grid';
/**
* `dap-ds-avatar-group`
* @summary Avatar group component displays multiple avatars in an organized layout with overflow management.
* @element dap-ds-avatar-group
* @title - Avatar Group
* @group avatar
*
* @slot - The avatars to display in the group.
*
* @event dds-overflow-click - Fired when the overflow indicator is clicked.
*
* @csspart base - The main container of the avatar group.
* @csspart avatars - The container for the visible avatars.
* @csspart overflow - The overflow indicator element.
*
* @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout (default: 0)
* @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout (default: -8px)
* @cssproperty --dds-avatar-group-border-width - Border width for avatars (default: var(--dds-border-width-base))
* @cssproperty --dds-avatar-group-border-color - Border color for avatars (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator (default: var(--dds-neutral-300))
* @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator (default: var(--dds-neutral-700))
* @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color))
* @cssproperty --dds-avatar-group-size-lg - Size for large avatars (default: var(--dds-spacing-2000))
* @cssproperty --dds-avatar-group-size-md - Size for medium avatars (default: var(--dds-spacing-1600))
* @cssproperty --dds-avatar-group-size-sm - Size for small avatars (default: var(--dds-spacing-1200))
* @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars (default: var(--dds-spacing-800))
* @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars (default: var(--dds-spacing-400))
*
* @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of avatars in the group. Default is `md`. See SizedMixin.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
*/
export default class DapDSAvatarGroup extends AvatarGroupBaseWithSized {
static tagName: string;
private avatars;
constructor();
/** Layout type for the avatar group
* @default stack
* @type { 'stack' | 'grid' }
* @example
* ```html
* <dap-ds-avatar-group layout="stack">
* <dap-ds-avatar-group layout="grid">
* ```
*/
layout: AvatarGroupLayout;
/** Maximum number of avatars to show before showing overflow */
max: number;
/** Whether to show the total count in overflow indicator */
showTotal: boolean;
/** Interactive overflow indicator */
interactiveOverflow: boolean;
/** Accessible label for the avatar group */
label: string;
/** Accessible label for the overflow indicator */
overflowLabel: string;
static readonly styles: import('lit').CSSResult;
connectedCallback(): void;
firstUpdated(): void;
updated(changedProperties: Map<string | number | symbol, unknown>): void;
private handleOverflowClick;
private renderOverflowIndicator;
private styleSlottedAvatars;
render(): import('lit-html').TemplateResult;
}
export {};