dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
92 lines (91 loc) • 4.8 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as DapDSStack } from '../stack/stack.component';
declare const ChipBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type ChipSize = 'sm' | 'lg';
/**
* `dap-ds-chip`
* @summary A chip is a small status descriptor for UI elements.
* @element dap-ds-chip
* @title - Chip
*
* @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @event {{ value: string }} dds-remove - Fired when the chip is removed
* @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected
*
* @csspart base - The base part
* @csspart content-container - The container for the content
* @csspart remove-button - The remove button
* @csspart remove-icon - The icon of the remove icon
* @csspart remove-icon-base - The base of the remove icon
* @csspart remove-icon-base-base - The base of the remove icon base
*
* @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))
* @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))
* @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))
* @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)
* @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)
* @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))
* @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))
* @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))
* @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))
* @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))
* @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))
* @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))
* @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))
* @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))
* @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))
* @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))
*
*/
export default class DapDSChip extends ChipBaseWithSized {
static tagName: string;
static dependencies: {
'dap-ds-stack': typeof DapDSStack;
'dap-ds-icon-button': typeof DapDSIconButton;
};
/** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */
private get chipSize();
/** Whether the chip is removeable */
removeable: boolean;
/** Whether the chip is selectable */
selectable: boolean;
/** Whether the chip is selected */
selected: boolean;
/** Whether the chip is disabled */
disabled: boolean;
/** The value of the chip */
value?: string;
/** The aria label for the delete button */
deleteAriaLabel?: string;
/** `data-testid` for the remove button. */
removeButtonTestId: string;
private _slotNodes;
private _slotTextContent;
static readonly styles: import('lit').CSSResult;
/**
* Gets the text content from the slot nodes
*/
private extractSlotTextContent;
/**
* Handles slot content changes
*/
private handleSlotChange;
/**
* Gets the aria-label for the chip when removable
*/
private getRemovableAriaLabel;
updated(changedProperties: Map<string, unknown>): void;
private handleClick;
private handleRemove;
private handleKeyDown;
render(): import('lit-html').TemplateResult;
}
export {};