dap-design-system

import { PropertyValueMap } from 'lit'; import { Size } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; import { default as DapDSIcon } from '../icon/icon.component'; declare const IconButtonBaseWithSized: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; export type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'; export type HtmlButtonType = 'button' | 'submit' | 'reset'; export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>; /** * `dap-ds-icon-button` * @summary An icon button is a button with an icon. * @element dap-ds-icon-button * @title - Icon button * * @property {string} ariaLabel - The aria label of the button. * * @slot - The icon of the button. * * @csspart base - The main button container. * @csspart content - The icon of the button. * @csspart icon - The icon of the icon. * @csspart icon-base - The base of the icon. * * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base)) * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded)) * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large)) * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge)) * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all)) * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer) * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed) * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100)) * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0)) * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100)) * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50)) * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25)) * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800)) * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600)) * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400)) * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300)) * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base)) * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled)) * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent) */ export default class DapDSIconButton extends IconButtonBaseWithSized { static tagName: string; static dependencies: { 'dap-ds-icon': typeof DapDSIcon; }; /** The type of the button. * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'} */ variant?: ButtonVariant; /** Adds a transparent background to the button */ clean?: boolean | undefined; /** * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon. */ iconSize: number; constructor(); /** The disabled state of the button. */ disabled: boolean; /** * The type of the button. * @type {'button' | 'submit' | 'reset'} */ htmlType: HtmlButtonType; /** The icon of the button. You can use the icon names from the icon component */ icon: string; /** The name of the button */ name: string; static readonly styles: import('lit').CSSResult; /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */ private _ariaLabelForButton; /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */ private get effectiveAriaLabel(); /** * Recursively finds all icon elements in slots and nested slots */ private findIconElementsInSlot; /** * Applies size props to all icon elements in the slot */ private applySizeToSlotIcons; /** * Handles slot change events to update icon sizes */ private handleSlotChange; /** * Sets up slotchange listeners for the main slot and any nested slots */ private setupSlotListeners; protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void; focus(): void; render(): import('lit-html').TemplateResult; } export {};