Sub-components

• Coral.Component
• Coral.Keys

Namespaces

commons

i18n

mixin

property

transform

validate

Static Properties

Coral.keys {Coral.keys}

A key listener for global hotkeys.

Methods

Coral.register

Register a Coral component, setting up inheritance, mixins, properties, and the associated custom element.

Parameters:

Name	Type	Description
options	Object	Component options. Name Type Optional Default Description options.name String No Name of the constructor (i.e. 'Accordion.Item'). The constructor will be available under 'Coral' at the path specified by the name. options.tagName String No Name of the new element (i.e 'coral-component'). options.baseTagName String Yes (none) Name of the tag to extend (i.e. 'button'). This is only required when extending an existing HTML element such that the <button is="custom-element"> style will be used. options.extend Object Yes Coral.Component Base class of the component. When extending an existing HTML element, this should match the interface implemented by the tag -- that is, for baseTagName: 'button' you should pass extend: HTMLButtonElement. options.mixins Array.<(Object|Coral~mixin)> Yes Mixin or {Array} of mixins to add. Mixins can be an {Object} or a {Coral~mixin}. options.properties Object.<String, Coral~PropertyDescriptor> Yes A map of property names to their corresponding descriptors. options.events Object Yes Map of the events and their handler. options._elements Object Yes Map of elements and their locations used for caching.

instance.defaultGet

Gets the corresponding underscore prefixed "private" property by the same name.

Returns:

The prefixed property

instance.defaultSet

Sets the corresponding underscore prefixed "private" property by the same name.

Parameters:

Name	Type	Description
value	*	The value to set

Type Definitions

instance.mixin

A functional mixin.

Parameters:

Name	Type	Description
target	Object	The target prototype or instance to apply the mixin to.
options	Object	Options for this mixin. Name Type Description options.properties Coral~PropertyDescriptor.properties The properties object as passed to Coral.register. This can be modified in place.

PropertyDescriptor

A property descriptor.

Properties:

Name	Type	Argument	Default	Description
transform	function	<optional>		The value transformation function. Values passed to setters will be ran through this function first.
attributeTransform	function	<optional>	transform	The value transformation function for attribute. The value given by attributeChangedCallback will be ran through this function first before passed to setters.
validate	Coral.validate~validationFunction	<optional>	Coral.validate.valueMustChange	The value validation function. A validation function that takes two arguments, newValue and oldValue, returning true if the setter should run or false if not.
trigger	String|function	<optional>		The name of the event to trigger after this property changes, or a {Function} to call that will trigger the event. The function is passed the newValue and oldValue.
triggerBefore	String|function	<optional>		The name of the event to trigger before this property changes, a {Function} to call that will trigger the event, or true to set the name automatically. The function is passed the newValue and oldValue and must return the Event object for preventDefault() to work within handlers. If set to true, Coral~PropertyDescriptor must be a string with a colon in it, such as coral-component:change, which results in coral-component:beforechange. If set to false, no event will be triggered before the setter is ran.
attribute	String	<optional>	propName	The name of the attribute corresponding to this property. If not provided, the property name itself will be used. If null is provided, the property will not be set by a corresponding attribute.
reflectAttribute	Boolean	<optional>		Whether this property should be reflected as an attribute when changed. This is useful when you want to style CSS according to the property's existence or value.
sync	function	<optional>		The method to be called when this property's value should be synced to the DOM.
alsoSync	String|Array.<String>	<optional>		A property or list of properties that should be synced after this property is synced.
set	function	<optional>	Coral~defaultSet	The setter for this property.
get	function	<optional>	Coral~defaultGet	The getter for this property.
override	Boolean	<optional>		Whether this property descriptor should completely override. If false, this descriptor will augment the existing descriptor. See Coral.register.augmentProperties for details.
contentZone	Boolean	<optional>		Whether this property represents a content zone. Content zones are treated differently when set() is invoked such that the provided value is passed to the content zone's set() method.