ColorInput is a form field that allows users to select from a list of color options (or freeform).

Vertical Layout

Required Information
Error Message
Show Markup

                      

Aligned Layout

Required Information
Error Message
Show Markup

            

Coral.ColorInput API

Constructor

JavaScript:

new Coral.ColorInput() or document.createElement('coral-colorinput')

HTML Tag:

<coral-colorinput>

Extends

Mixes In

Sub-components

Static Properties

Coral.ColorInput.autoGenerateColors {String}

Enumeration for auto generated colors state.

Properties:

Name Type Value Description
OFF String off Disable auto generation
SHADES String shades Automatically generate shades (darker colors) of all colors
TINTS String tints Automatically generate tints (lighter colors) of all colors

Coral.ColorInput.showDefaultColors {String}

Whether default colors should be displayed.

Properties:

Name Type Value Description
ON String on Display default colors (default).
OFF String off Hide default colors.

Coral.ColorInput.showProperties {String}

Whether color properties view should be displayed.

Properties:

Name Type Value Description
ON String on Display color properties view (default).
OFF String off Hide color properties view.

Coral.ColorInput.showSwatches {String}

Whether swatches view should be displayed.

Properties:

Name Type Value Description
ON String on Display swatches view (default).
OFF String off Hide swatches view.

Coral.ColorInput.variant {String}

Enumeration for colorinput variant.

Properties:

Name Type Value Description
DEFAULT String default Use ColorInput as a formfield (default)
SWATCH String swatch Use a simple swatch as ColorInput

Instance Properties

instance.autoGenerateColors {Coral.ColorInput.autoGenerateColors}

Should shades (darker colors) or tints (lighter colors) automatically be generated.
Default Value:
  • Coral.ColorInput.autoGenerateColors.OFF
HTML Attribute:
  • autogeneratecolors

instance.disabled {Boolean}

Reflected
Whether this field is disabled or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • disabled

instance.invalid {Boolean}

Reflected
Whether the current value of this field is invalid or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • invalid

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.labelledBy {String}

Reference to a space delimited set of ids for the HTML elements that provide a label for the formField. Implementers should override this method to ensure that the appropriate descendant elements are labelled using the aria-labelledby attribute. This will ensure that the component is properly identified for accessibility purposes. It reflects the aria-labelledby attribute to the DOM.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

instance.name {String}

Reflected
Name used to submit the data in a form.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • name

instance.placeholder {String}

Reflected
Short hint that describes the expected value of the ColorInput. It is displayed when the ColorInput is empty and the variant is Coral.ColorInput.variant.DEFAULT
Default Value:
  • ""
HTML Attribute:
  • placeholder

instance.readOnly {Boolean}

Reflected
Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control. This is ignored for checkbox, radio or fileupload.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • readonly

instance.required {Boolean}

Reflected
Whether this field is required or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • required

instance.selectedItem {HTMLElement}

Readonly
Returns the first selected item in the selectionList. The value null is returned if no element is selected.

instance.showDefaultColors

Whether default colors should be displayed.
Default Value:
  • Coral.ColorInput.showDefaultColors.ON
HTML Attribute:
  • showdefaultcolors

instance.showProperties {Coral.ColorInput.colorProperties}

Whether properties view should be displayed.
Default Value:
  • Coral.ColorInput.showProperties.ON
HTML Attribute:
  • showproperties

instance.showSwatches {Coral.ColorInput.swatches}

Whether swatches view should be displayed.
Default Value:
  • Coral.ColorInput.showSwatches.ON
HTML Attribute:
  • showswatches

instance.value {String}

The value of the color. This value can be set in 5 different formats (HEX, RGB, RGBA, HSB and CMYK). Corrects a hex value, if it is represented by 3 or 6 characters with or without '#' e.g: HEX: #FFFFFF RGB: rgb(16,16,16) RGBA: rgba(215,40,40,0.9) RGBA: hsb(360,100,100) CMYK: cmyk(0,100,50,0)
Default Value:
  • ""
HTML Attribute:
  • value

instance.valueAsColor {Coral.Color}

Convenient property to get/set the the current color. If the value is no valid color it will return null (The getter will return a copy of the current selected color).

instance.variant {Coral.ColorInput.variant}

Variant how the colorinput should be displayed.
Default Value:
  • Coral.ColorInput.variant.DEFAULT
HTML Attribute:
  • variant

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:

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:

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
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

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. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

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
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-collection:add

Triggered when an item is added to the Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was added.
Inherited From:

coral-collection:remove

Triggered when an item is removed from a Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was removed.
Inherited From:

change

Triggered when the value has changed. This event is only triggered by user interaction.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

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:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

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.ColorInput.Item API

Constructor

JavaScript:

new Coral.ColorInput.Item() or document.createElement('coral-colorinput-item')

HTML Tag:

<coral-colorinput-item>

Extends

Instance Properties

instance.value {String}

Reflected
The value of the color. This value can be set in different formats (HEX, RGB, RGBA, HSB, HSL, HSLA and CMYK). Corrects a hex value, if it is represented by 3 or 6 characters with or without '#'. e.g: HEX: #FFFFFF RGB: rgb(16,16,16) RGBA: rgba(215,40,40,0.9) HSB: hsb(360,100,100) HSL: hsl(360,100,100) HSLA: hsla(360,100%,100%, 0.9) CMYK: cmyk(0,100,50,0)
Default Value:
  • ""
HTML Attribute:
  • value

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:

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:

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
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

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. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

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
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

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:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

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.Color API

Constructor

Coral.Color is used to get a color in different color spaces, calculate tints and shades ...

JavaScript:

new Coral.Color()

Instance Properties

instance.alpha {Number}

The alpha value of the color (value between 0-1).
Default Value:
  • 1

instance.cmyk {Object}

The cmyk values of the color (all values between 0-100). e.g: {c:0, m:100, y:0, k:100}
Default Value:
  • null

instance.cmykValue {String}

The serialized cmyk values of the color (all values between 0-100). e.g: 'cmyk(100,100,100,100)'
Default Value:
  • ""

instance.hex {Number}

The hex value of the color.
Default Value:
  • null

instance.hexValue {String}

The serialized hex value of the color. e.g: '#94CD4B'
Default Value:
  • ""

instance.hsb {Object}

The hsb values of the color. h (hue has value between 0-360 degree) s (saturation has a value between 0-100 percent) b (brightness has a value between 0-100 percent)
Default Value:
  • null

instance.hsbValue {String}

The serialized hsb values of the color (s and b values between 0-100, h between 0-360). e.g: 'hsb(360,100,100)'
Default Value:
  • ""

instance.hsla {Object}

The hsla values of the color. h (hue has value between 0-360 degree) s (saturation has a value between 0-100 percent) l (lightness has a value between 0-100 percent) a (alpha has a value between 0-1)
Default Value:
  • null

instance.hslaValue {String}

The serialized hsla values of the color. h (hue has value between 0-360 degree) s (saturation has a value between 0-100 percent) l (lightness has a value between 0-100 percent) a (alpha has a value between 0-1) e.g: 'hsla(360,50%,50%,0.9)'
Default Value:
  • ""

instance.hslValue {String}

The serialized hsl values of the color (s and l values between 0-100 in percent, h between 0-360). e.g: 'hsl(360,100%,100%)'
Default Value:
  • ""

instance.rgb {Object}

The rgb values of the color (value between 0-255). e.g.: {r:0, g:0, b:0}
Default Value:
  • null

instance.rgba {Object}

The rgba values of the color (r,g,b values between 0-255 and a between 0-1). e.g: {r:0, g:0, b:0, a:1}
Default Value:
  • null

instance.rgbaValue {String}

The serialized rgba values of the color (r,g,b values between 0-255 and alpha between 0-1). e.g: 'rgba(0,0,0,1)'
Default Value:
  • ""

instance.rgbValue {String}

The serialized rgb values of the color (r,g,b values between 0-255). e.g: 'rgb(0,0,0)'
Default Value:
  • ""

instance.value {String}

The value of the color. This value can be set in different formats (HEX, RGB, RGBA, HSB, HSL, HSLA and CMYK). Corrects a hex value, if it is represented by 3 or 6 characters with or without '#'. e.g: HEX: #FFFFFF RGB: rgb(16,16,16) RGBA: rgba(215,40,40,0.9) HSB: hsb(360,100,100) HSL: hsl(360,100%,100%) HSLA: hsla(360,100%,100%,0.9) CMYK: cmyk(0,100,50,0)
Default Value:
  • ""

Methods

instance.calculateShadeColors

Calculates an array of darker colors.
Parameters:
Name Type Description
amount Number Amount of shade colors to generate.

instance.calculateTintColors

Calculates an array of lighter colors.
Parameters:
Name Type Description
amount Number Amount of tint colors to generate.

instance.clone

Clone this color.

instance.isSimilarTo

Test if this Color is similar to another color.
Parameters:
Name Type Optional Default Description
compareColor Coral.Color No
The color to compare this color too.
allowSlightColorDifference Boolean Yes
true While converting between color spaces slight loses might happen => we should normally consider colors equal, even if they are minimally different.