import { FASTElement } from "@microsoft/fast-element"; import type { TagAppearance, TagShape, TagSize, TagTextSize } from "./tag.options.js"; /** * Tag * @summary A Tag component that displays one or two lines of text, is dismissable via a dismiss button, and can contain a preceding picture or icon before the text. * * @example * ```html * * Tag image * Icon * Primary Text * Secondary Text * Dismiss * * ``` * * @attr {boolean} dismiss-button - Whether the tag has a dismiss button. * @attr {TagSize} size - The size of the tag. * @attr {TagShape} shape - The shape of the tag. * @attr {TagAppearance} appearance - The appearance of the tag. * @attr {boolean} disabled - Controls whether the tag is disabled. * * @prop {string} textPrimaryContent - The content of the text primary slot. * @prop {HTMLElement[]} textPrimarySlotted - The primary text of the tag that has been slotted. * @prop {HTMLElement[]} textSecondarySlotted - The secondary text of the tag. * @prop {TagTextSize} textSizePrimary - The text size of the tag. * @prop {HTMLElement[]} leadingIconSlotted - The leading icon of the tag. * * @slot image - The image of the tag. * @slot leadingIcon - The leading icon of the tag. * @slot text - The text of the tag. * @slot textSecondary - The secondary text of the tag. * @slot dismissIcon - The dismiss icon of the tag. * @slot - The default slot for additional tag content. * * @csspart container - The container of the tag. * @csspart content - The content of the tag. * @csspart dismissButton - The dismiss button of the tag. * @csspart image - Part wrapping the image slot for sizing and layout. * @csspart textContent - Part wrapping the text slots for layout and truncation. * * @method sizeChanged - Called when the size property changes. * @method textPrimarySlottedChanged - Called when the textPrimarySlotted property changes. * @method textSecondarySlottedChanged - Called when the textSecondarySlotted property changes. * @method handleTextSize - Handles the text size of the tag, which changes depending on the size of the tag. * @method compensateSVGSize - Sets the size of the SVG icon to match the size of the tag. * @method leadingIconSlottedChanged - Called when the leadingIconSlotted property changes. * @method emitDismissEvent - Emits the dismiss event for the tag. * * @fires dismiss - Emits when the tag is dismissed. * * @extends FASTElement * @tagname fabric-tag * @public */ export declare class Tag extends FASTElement { /** AbortController used to manage dismiss button event listeners. */ private events?; /** Reference to the dismiss button element. */ dismissButtonRef?: HTMLElement; /** * attachEventListeners * * Reattaches dismiss button listeners when the reference changes. * @public */ dismissButtonRefChanged(): void; /** * dismissButton * * Controls whether the dismiss button is shown * @public * @type {boolean} * @defaultValue false * @attr dismiss-button */ dismissButton: boolean; /** * disabled * * Controls whether the tag is disabled * @public * @type {boolean} */ disabled: boolean; /** * size * * The size of the tag * @public * @type {TagSize} * @defaultValue "medium" */ size: TagSize; sizeChanged(): void; /** * shape * * The shape of the tag container * @public * @type {TagShape} * @defaultValue "rounded" */ shape: TagShape; /** * appearance * * The appearance style of the tag * @public * @type {TagAppearance} * @defaultValue "filled" */ appearance: TagAppearance; /** * textPrimaryContent * * The content of the text primary slot * @public * @type {string} * @defaultValue undefined */ textPrimaryContent?: string; /** * textPrimarySlotted * * The primary text of the tag that has been slotted * @public * @type {HTMLElement[]} * @defaultValue [] */ textPrimarySlotted: HTMLElement[]; /** * @summary This method is called when the textPrimarySlotted property changes. * @public */ textPrimarySlottedChanged(): void; /** * The secondary text of the tag * @type {HTMLElement[]} * @defaultValue [] * @public */ textSecondarySlotted: HTMLElement[]; /** * textSecondarySlottedChanged * * Updates derived text size when secondary text slot content changes. * @public */ textSecondarySlottedChanged(): void; /** * textSizePrimary * * The text size of the tag * @type {TagTextSize} * @defaultValue "body1" * @public */ textSizePrimary: TagTextSize; /** * handleTextSize * handles the text size of the tag, which changes depending on the size of the tag * @public */ handleTextSize(): void; /** * Sets the size of the SVG icon to match the size of the tag. This is necessary because otherwise the developer has to set the size of the SVG icon manually. * @public */ compensateSVGSize(): void; /** * The leading icon of the tag * @type {HTMLElement[]} * @defaultValue [] * @public */ leadingIconSlotted: HTMLElement[]; /** * leadingIconSlottedChanged * * Applies state for leading icon presence and updates icon sizing. * @public */ leadingIconSlottedChanged(): void; /** * emitDismissEvent * * @public * * emits the dismiss event for the tag */ emitDismissEvent(): void; /** * attachEventListeners * * Ensures the dismiss button listener is attached and kept in sync. * @private */ private attachEventListeners; /** * emitDismiss * * Emits the dismiss event. * @private */ private emitDismiss; /** * connectedCallback * connectedCallback for the tag * @public */ connectedCallback(): void; /** * disconnectedCallback * * Cleans up event listeners when the element disconnects. * @public */ disconnectedCallback(): void; } //# sourceMappingURL=tag.d.ts.map