Static Properties

Coral.Icon.size {String}

Icons can be rendered in different sizes. It follows the shirt sizing naming convention to help you remember them easily.

Properties:

Name	Type	Value	Description
EXTRA_EXTRA_SMALL	String	XXS	Extra extra small size icon, typically 9px size.
EXTRA_SMALL	String	XS	Extra small size icon, typically 12px size.
SMALL	String	S	Small size icon, typically 18px size. This is the default size.
MEDIUM	String	M	Medium size icon, typically 24px size.
LARGE	String	L	Large icon, typically 36px size.
EXTRA_LARGE	String	XL	Extra large icon, typically 48px size.
EXTRA_EXTRA_LARGE	String	XXL	Extra extra large icon, typically 72px size.

Instance Properties

instance.alt {String}

Reflected

Alternative text to identify the icon for accessibility.

When no alt attribute is provided, the icon will fallback to using either the title attribute or icon name as alternative text for accessibility. However, by explicitly setting the alt attribute to an empty string in markup or by using the setAttribute method, one can override the default behavior to avoid redundancy or to indicate that the icon is purely decorative in elements like labelled icon buttons.

HTML Attribute:

• alt

instance.hidden {Boolean}

Reflected

Whether this component is hidden or not.

Inherited From:

• Coral.Component#hidden

Default Value:

• false

HTML Attribute:

• hidden

instance.icon {String}

Reflected

Icon name accordion to the CloudUI Icon sheet.

Default Value:

• ""

HTML Attribute:

• icon

instance.size {Coral.Icon.size}

Reflected

Size of the icon. It accepts both lower and upper case sizes.

Default Value:

• Coral.Icon.size.SMALL

HTML Attribute:

• size

instance.tracking {Coral.Component.tracking}

Tracking of events. This provides insight on the usage of the components. It accepts "ON" and "OFF". In order to successfully track the events, {Coral.tracking} needs to be configured.

Inherited From:

• Coral.Component#tracking

Default Value:

• Coral.Component.tracking.ON

HTML Attribute:

• tracking

instance.trackingElement {String}

The string representing the element name being tracked. This providex additional context to the trackers about the element that was interacted with.

Inherited From:

• Coral.Component#trackingElement

Default Value:

• ""

HTML Attribute:

• trackingelement

instance.trackingFeature {String}

The string representing the feature being tracked. This provides additional context to the analytics trackers about the feature that the element enables.

Inherited From:

• Coral.Component#trackingFeature

Default Value:

• ""

HTML Attribute:

• trackingfeature

Methods

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

• Coral.Component#get

instance.hide

Hide this component.

Returns:

this, chainable {Coral.Component}

Inherited From:

• Coral.Component#hide

instance.off

Remove an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to stop listening for.
selector	String	Yes	The selector that was used for event delegation.
func	function	No	The function that was passed to on().
useCapture	Boolean	Yes	Only remove listeners with useCapture set to the value passed in.

Returns:

this, chainable. {Coral.Component}

Inherited From:

• Coral.Component#off

instance.on

Add an event listener.

Parameters:

Name	Type	Optional	Default	Description
eventName	String	No		The event name to listen for.
selector	String	Yes		The selector to use for event delegation.
func	function	No		The function that will be called when the event is triggered.
useCapture	Boolean	Yes		Whether or not to listen during the capturing or bubbling phase.

Returns:

this, chainable. {Coral.Component}

Inherited From:

• Coral.Component#on

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.

Inherited From:

• Coral.Component#remove

instance.set

Set a single property.

Parameters:

Name	Type	Description
property	String	The name of the property to set.
value	*	The value to set the property to.
silent	Boolean	If true, events should not be triggered as a result of this set.

Returns:

this, chainable. {Coral.Component}

Inherited From:

• Coral.Component#set

instance.show

Show this component.

Returns:

this, chainable {Coral.Component}

Inherited From:

• Coral.Component#show

instance.trigger

Trigger an event.

Parameters:

Name	Type	Optional	Default	Description
eventName	String	No		The event name to trigger.
props	Object	Yes		Additional properties to make available to handlers as event.detail.
bubbles	Boolean	Yes		Set to false to prevent the event from bubbling.
cancelable	Boolean	Yes		Set to false to prevent the event from being cancelable.

Returns:

CustomEvent object {CustomEvent}

Inherited From:

• Coral.Component#trigger

Events

coral-component:attached

Triggered when the component is attached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:attached

Deprecated:

• since 1.14.0, use MutationObserver instead.

coral-component:detached

Triggered when the component is detached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:detached

Deprecated:

• since 1.14.0, use MutationObserver instead.

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:ready

Deprecated:

• since 1.9.0, use Coral.commons.ready() instead.