Namespace: cq-swatch

WebComponents. cq-swatch

Swatch web component <cq-swatch>.

An interactive color swatch. Relies on the existence of a CIQ.UI.ColorPicker component. Interactivity can be disabled by adding cq-static attribute

When a color is selected, setColor(color) will get called for any parent component with that method

Example

<cq-section>
	<cq-placeholder>
		Candle Color
		<cq-theme-piece cq-piece="cu">
			<cq-swatch cq-overrides="Hollow"></cq-swatch>
		</cq-theme-piece>
		<cq-theme-piece cq-piece="cd">
			<cq-swatch cq-overrides="Hollow"></cq-swatch>
		</cq-theme-piece>
	</cq-placeholder>
	<cq-placeholder>
		Candle Wick
		<cq-theme-piece cq-piece="wu">
			<cq-swatch></cq-swatch>
		</cq-theme-piece>
		<cq-theme-piece cq-piece="wd">
			<cq-swatch></cq-swatch>
		</cq-theme-piece>
	</cq-placeholder>
	<cq-placeholder>
		Candle Border
		<cq-theme-piece cq-piece="bu">
			<cq-swatch cq-overrides="No Border"></cq-swatch>
		</cq-theme-piece>
		<cq-theme-piece cq-piece="bd">
			<cq-swatch cq-overrides="No Border"></cq-swatch>
		</cq-theme-piece>
	</cq-placeholder>
	<cq-separator></cq-separator>
	<cq-placeholder>
		Line/Bar Chart
		<cq-theme-piece cq-piece="lc">
			<cq-swatch></cq-swatch>
		</cq-theme-piece>
	</cq-placeholder>
	<cq-separator></cq-separator>
	<cq-placeholder>
		Mountain Color
		<cq-theme-piece cq-piece="mb">
			<cq-swatch></cq-swatch>
		</cq-theme-piece>
		<cq-theme-piece cq-piece="mc">
			<cq-swatch></cq-swatch>
		</cq-theme-piece>
	</cq-placeholder>
</cq-section>;

Members


<static> this.defaultColor :string

Optionally set the default color for the swatch.

Type:
  • string

Methods


launchColorPicker()


setColor()

Since:
  • 6.2.0 Colors strip out the opacity so they are the rgb representation


<static> Swatch#getDefaultColor()

Attempts to identify the default color for the associated chart. It does so by traversing up the parent stack and looking for any component that has a context. Or you can set the default color manually by setting member variable defaultColor;