Info

<esp-info>

Used to show an informational message.

Slots

<esp-info> has the following slots:

Default

The default slot is for the text to display.

icon-slot

icon-slot is for an SVG icon to display to the left of the icon.

Attributes

<esp-info> has the following attributes:

destroyable

destroyable has a default value of false.

If an info box is destroyable, it has a button that will fire the destroy event when clicked.

Methods

<esp-info> has the following methods:

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

Events

<esp-info> emits the following events:

destroy

destroy is of type CustomEvent<DestroyEspalierInfo>.

Fired when the user clicks the destroy button.

CSS Properties

<esp-info> has the following CSS properties:

--esp-info-color-border

The border color of the info box.

--esp-info-color-background

The background color of the info box.

--esp-info-color-text

The text color of the info box

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).