Box

End Next

<cwc-capture-box>

Custom Web Component, box select from options, alternative to radios.

Example

Events

• event change Change event fired when new selection happens.

Methods

• method render() Force a render of options.
• method Boolean validate(Array value) Validate value against component, or omit to validate internal value.

Attributes

• attribute label String The controls label.
• attribute value String/Number The initial value, if set.
• attribute disabled flag Disabled control when present.
• attribute invalid flag Invalid control when present.
• attribute required flag Required control when present.
• attribute validate-on-load flag Validate control on load when present.

Style Variables

• css style variable --cwc-capture-box--border Border for main container.
• css style variable --cwc-capture-box--border-radius Border-radius for main container.
• css style variable --cwc-capture-box--label--color Label text colour.
• css style variable --cwc-capture-box--label--font-weight Label font weight.
• css style variable --cwc-capture-box--label--text-align label text alignment.
• css style variable --cwc-capture-box--option--background Option box background colour.
• css style variable --cwc-capture-box--option--color Option box text colour.
• css style variable --cwc-capture-box--option--font-size Option box text font-size.
• css style variable --cwc-capture-box--option--font-family Option box text font-family.
• css style variable --cwc-capture-box--option--cursor Option box cursor type on hover.
• css style variable --cwc-capture-box--option--border-radius Option box border-radius.
• css style variable --cwc-capture-box--option--background--selected Option box background when selected.
• css style variable --cwc-capture-box--option--color--selected Option box text colour when selected.
• css style variable --cwc-capture-box--disabled--opacity Opacity when the control is disabled.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.example-xxx {
		--cwc-capture-box--border: 1px solid blue;
		--cwc-capture-box--border-radius: 6px;
		--cwc-capture-box--label--color: blue;
		--cwc-capture-box--option--color: blue;
		--cwc-capture-box--option--border-radius: 6px;
		--cwc-capture-box--option--background--selected: blue;
		--cwc-capture-box--option--cursor: pointer;
	}
</style>

<cwc-capture-box class="example-xxx" label="Example One" value="1">
	<option value="1">One</option>
	<option value="2">Two</option>
	<option value="3">Three</option>
</cwc-capture-box>
					

Checkbox

Prev Next

<cwc-capture-checkbox>

Custom Web Component, checkbox for forms.

Example

Events

• event change The value is updated.

Methods

• method Boolean validate(Boolean value) Validate value against component, or omit to validate internal value.

Properties

• property String value The initial value (overrides attribute value)

Attributes

• attribute label string The checkbox label.
• attribute checked-message string The message to show when checked.
• attribute unchecked-message string The message to show when not checked.
• attribute invalid-message string The message to show when control is invalid.
• attribute help string The help text to display with a little hover icon.
• attribute value string The initial value, if set.
• attribute detail string Add extra text detail above the checkbox.
• attribute disabled flag To disable the control.
• attribute invalid flag The control is invalid (uses danger context styling if invalid styling not set).
• attribute boxed flag Wrap a box round the checkbox.
• attribute required flag The control is required.
• attribute validate-on-load flag Validate the control when it loads in the dom.

Style Variables

• css style variable --cwc-capture-checkbox--border The border of the check box (only with 'boxed' attribute).
• css style variable --cwc-capture-checkbox--border-radius The border radius of the check box (only with 'boxed' attribute).
• css style variable --cwc-capture-checkbox--color The text colour of the check box text.
• css style variable --cwc-capture-checkbox--color--hover hover The colour of the check box text on hover.
• css style variable --cwc-capture-checkbox--float The float position of the check box.
• css style variable --cwc-capture-checkbox--fill The icon colour of the check box.
• css style variable --cwc-capture-checkbox--fill--hover hover The icon colour of the check box.
• css style variable --cwc-capture-checkbox--font-size The font size of the check box text.
• css style variable --cwc-capture-checkbox--font-weight The font weight of the check box text.
• css style variable --cwc-capture-checkbox--font-style The font style of the check box text.
• css style variable --cwc-capture-checkbox--font-family The font family of the check box text.
• css style variable --cwc-capture-checkbox--text-align The alignment of the check box text.
• css style variable --cwc-capture-checkbox--invalid--fill The invalid icon colour of the check box.
• css style variable --cwc-capture-checkbox--invalid--fill--hover hover The invalid icon colour of the check box on hover.
• css style variable --cwc-capture-checkbox--invalid--border The invalid border of the check box.
• css style variable --cwc-capture-checkbox--invalid--color The invalid text colour of the check box.
• css style variable --cwc-capture-checkbox--invalid--color--hover hover The invalid text colour of the check box on hover.
• css style variable --cwc-capture-checkbox--label--text-align The alignment of the check box label.
• css style variable --cwc-capture-checkbox--label--color The text colour of the check box label.
• css style variable --cwc-capture-checkbox--label--font-size The font size of the check box label.
• css style variable --cwc-capture-checkbox--label--font-weight The font weight of the check box label.
• css style variable --cwc-capture-checkbox--label--font-style The font style of the check box label.
• css style variable --cwc-capture-checkbox--label--font-family The font family of the check box label.
• css style variable --cwc-capture-checkbox--disabled--opacity The disabled opacity of the check box.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.colour-me {
		--cwc-capture-checkbox--border: 1px solid red;
		--cwc-capture-checkbox--fill: red;
		--cwc-capture-checkbox--fill--hover: red;
		--cwc-capture-checkbox--color: red;
		--cwc-capture-checkbox--label--color: red;
	}
</style>

<cwc-capture-checkbox
	class="colour-me"
	label="Another Checkbox"
	checked-message="I am checked"
	unchecked-message="I am not checked"
	detail="This can be something like terms and or conditions to make someone read before they check the box below"
	boxed
></cwc-capture-checkbox>
					

Date

Prev Next

<cwc-capture-date>

Custom Web Component, date input with overlay picker letting you pick a date.

Example

Events

• event show The date picker has been shown.
• event hide The date picker has been hidden.
• event change The the value has changed, with event detail as the value.

Methods

• method show() Show the date picker manually.
• method hide() Hide the date picker manually.
• method validate(String value) Validate the value from the component.

Properties

• property String format The date format to use.
• property String label The label to use for the input box.
• property String value The selected date formatted.
• property Boolean required The label to use for the input box.
• property Boolean disabled The label to use for the input box.
• property Boolean invalid The label to use for the input box.
• property Date selected The current selected date from the picker.
• property String value The actual selected date as a string, the end result.

Attributes

• attribute format string The date format to use.
• attribute label string The label to use for the input box.
• attribute placeholder string The placeholder text in the input box.
• attribute required flag The label to use for the input box.
• attribute disabled flag The label to use for the input box.
• attribute invalid flag The label to use for the input box.
• attribute validate-on-load flag The current selected date from the picker.

Style Variables

• css style variable All cwc-capture-button variables inherited.
• css style variable All cwc-capture-input variables inherited.
• css style variable All cwc-overlay-modal variables inherited.
• css style variable --cwc-capture-date--icon--margin The date picker icon margin.
• css style variable --cwc-capture-date--input--padding The date picker input box padding.
• css style variable --cwc-capture-date--selectable--border-radius The date picker selectable border radius.
• css style variable --cwc-capture-date--selected-day--border The date picker selected day border.
• css style variable --cwc-capture-date--selected-day--background The date picker selected day background.
• css style variable --cwc-capture-date--selected-day--color The date picker selected day text colour.
• css style variable --cwc-capture-date--selected-month--border The date picker selected month border.
• css style variable --cwc-capture-date--selected-month--background The date picker selected month background.
• css style variable --cwc-capture-date--selected-month--color The date picker selected moneth text colour.
• css style variable --cwc-capture-date--selected-year--border The date picker selected year border.
• css style variable --cwc-capture-date--selected-year--background The date picker selected year background.
• css style variable --cwc-capture-date--selected-year--color The date picker selected year text colour.
• css style variable --cwc-capture-date--button-open--background The date picker open calendar button background.
• css style variable --cwc-capture-date--button-open--color The date picker open calendar button text/fill color.
• css style variable --cwc-capture-date--button-open--border The date picker open calendar button border.
• css style variable --cwc-capture-date--button-open--height The date picker open calendar button box height.
• css style variable --cwc-capture-date--button-open--background--hover The date picker open calendar button background on hover.
• css style variable --cwc-capture-date--button-open--background--focus The date picker open calendar button background on focus.
• css style variable --cwc-capture-date--button-open--background--active The date picker open calendar button background on active.
• css style variable --cwc-capture-date--button-open--box-shadow--hover The date picker open calendar button box shadow on hover.
• css style variable --cwc-capture-date--button-open--box-shadow--focus The date picker open calendar button box shadow on focus.
• css style variable --cwc-capture-date--button-open--box-shadow--active The date picker open calendar button box shadow on active.
• css style variable --cwc-capture-date--button-today--background The date picker move to today button background.
• css style variable --cwc-capture-date--button-today--color The date picker move to today button text colour.
• css style variable --cwc-capture-date--button-today--border The date picker move to today button border.
• css style variable --cwc-capture-date--button-today--outline The date picker move to today button outline.
• css style variable --cwc-capture-date--button-today--background--hover The date picker move to today button background on hover.
• css style variable --cwc-capture-date--button-today--background--focus The date picker move to today button background on focus.
• css style variable --cwc-capture-date--button-today--background--active The date picker move to today button background on active.
• css style variable --cwc-capture-date--button-today--box-shadow--hover The date picker move to today button box shadow on hover.
• css style variable --cwc-capture-date--button-today--box-shadow--focus The date picker move to today button box shadow on focus.
• css style variable --cwc-capture-date--button-today--box-shadow--active The date picker move to today button box shadow on active.
• css style variable --cwc-capture-date--button-close--background The date picker close picker button background.
• css style variable --cwc-capture-date--button-close--color The date picker close picker button text colour.
• css style variable --cwc-capture-date--button-close--border The date picker close picker button boder.
• css style variable --cwc-capture-date--button-close--outline The date picker close picker button outline.
• css style variable --cwc-capture-date--button-close--background--hover The date picker close picker button background on hover.
• css style variable --cwc-capture-date--button-close--background--focus The date picker close picker button background on focus.
• css style variable --cwc-capture-date--button-close--background--active The date picker close picker button background on active.
• css style variable --cwc-capture-date--button-close--box-shadow--hover The date picker close picker button box shadow on hover.
• css style variable --cwc-capture-date--button-close--box-shadow--focus The date picker close picker button box shadow on focus.
• css style variable --cwc-capture-date--button-close--box-shadow--active The date picker close picker button box shadow on active.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	#picker-date2 {
		--cwc-overlay-modal--border-radius: 10px;
		--cwc-overlay-modal--background: green;
		
		--cwc-capture-input--border-radius: 5px;
		--cwc-capture-button--border-radius: 5px;

		--cwc-capture-date--selected-day--background: blue;
		--cwc-capture-date--selected-day--border: 1px solid darkblue;
		--cwc-capture-date--selected-day--color: white;
		
		--cwc-capture-date--selected-month--background: blue;
		--cwc-capture-date--selected-month--border: 1px solid darkblue;
		--cwc-capture-date--selected-month--color: white;
		
		--cwc-capture-date--selected-year--background: blue;
		--cwc-capture-date--selected-year--border: 1px solid darkblue;
		--cwc-capture-date--selected-year--color: white;

		--cwc-capture-date--button-open--background: red;
		--cwc-capture-date--button-open--color: white;
		--cwc-capture-date--button-open--border: 1px solid darkred;
		--cwc-capture-date--button-open--background--hover: darkred;
		--cwc-capture-date--button-open--color--hover: white;
		--cwc-capture-date--button-open--border--hover: 1px solid darkred;
		--cwc-capture-date--button-open--background--focus: darkred;
		--cwc-capture-date--button-open--color--focus: white;
		--cwc-capture-date--button-open--border--focus: 1px solid darkred;
		--cwc-capture-date--button-open--background--active: darkred;
		--cwc-capture-date--button-open--color--active: white;
		--cwc-capture-date--button-open--border--active: 1px solid darkred;
		--cwc-capture-date--button-open--box-shadow--active: 0 0 0 2px red;

		--cwc-capture-date--button-close--background: red;
		--cwc-capture-date--button-close--color: white;
		--cwc-capture-date--button-close--border: 1px solid darkred;
		--cwc-capture-date--button-close--background--hover: darkred;
		--cwc-capture-date--button-close--color--hover: white;
		--cwc-capture-date--button-close--border--hover: 1px solid darkred;
		--cwc-capture-date--button-close--background--focus: darkred;
		--cwc-capture-date--button-close--color--focus: white;
		--cwc-capture-date--button-close--border--focus: 1px solid darkred;
		--cwc-capture-date--button-close--background--active: darkred;
		--cwc-capture-date--button-close--color--active: white;
		--cwc-capture-date--button-close--border--active: 1px solid darkred;
		--cwc-capture-date--button-close--box-shadow--active: 0 0 0 2px red;
	}
</style>
<div class="row">
	<div class="col-md-6">
		<cwc-capture-date id="picker-date1" format="dd/mm/yyyy" label="Date" placeholder="Enter a date e.g 20/12/2020 or tomorrow"></cwc-capture-date>
	</div>
	<div class="col-md-6">
		<cwc-capture-date id="picker-date2" format="dd/mm/yyyy" label="Date" placeholder="Enter a date e.g 20/12/2020 or tomorrow"></cwc-capture-date>
	</div>
</div>
					

Input

Prev Next

<cwc-capture-input>

Custom Web Component, input for forms.

Example

Events

• event * The standard input event happens, change, input, keydown etc.
• event validated The value is validated.

Methods

• method focus() Set focus on the input box.
• method Boolean validate(Boolean value) Validate the value in the control, or omit to validate internal value.

Properties

• property String value The initial value (overrides attribute value)

Attributes

• attribute label string The control name.
• attribute name string The control name.
• attribute type string The control type.
• attribute invalid-message string The message to show when control is invalid.
• attribute help string The help text to display with a little hover icon.
• attribute regex string The regex value to validate against.
• attribute value string The initial value, if set.
• attribute justify string The justification of content as left, right, center.
• attribute disabled flag To disable the control.
• attribute invalid flag The control is invalid (uses danger context styling if invalid styling not set).
• attribute required flag The control is required.
• attribute validate-on-load flag Validate the control when it loads in the dom.

Style Variables

• css style variable --cwc-capture-input--text-align The text align of the input text.
• css style variable --cwc-capture-input--padding The padding inside the input.
• css style variable --cwc-capture-input--border-radius The border-radius of the input.
• css style variable --cwc-capture-input--border The border of the input.
• css style variable --cwc-capture-input--color The color of the input text.
• css style variable --cwc-capture-input--background The background of the input.
• css style variable --cwc-capture-input--font-size The font size of the input.
• css style variable --cwc-capture-input--font-weight The font weight of the input.
• css style variable --cwc-capture-input--font-style The font style of the input.
• css style variable --cwc-capture-input--font-family The font family of the input.
• css style variable --cwc-capture-input--label--text-align The text align of the input label.
• css style variable --cwc-capture-input--label--color The colour of the input label.
• css style variable --cwc-capture-input--label--font-weight The font weight of the input label.
• css style variable --cwc-capture-input--invalid--border The border colour of an invalid input.
• css style variable --cwc-capture-input--invalid--color The colour of an invalid input text.
• css style variable --cwc-capture-input--disabled--opacity The opacity of a disabled input.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<cwc-capture-input
	label="A letters only input"
	type="text"
	invalid-message="Letters only please"
	help="An input box where you can only add letters, An input box where you can only add letters"
	regex="^[a-zA-Z]*$"
></cwc-capture-input>
					

Radio

Prev Next

<cwc-capture-radio>

Custom Web Component, radio buttons for forms.

Example

Events

• event change The value is updated.

Methods

• method Boolean validate(String value) Validate the value against the control, or omit to validate internal value.

Properties

• property String value The initial value (overrides attribute value)

Attributes

• attribute label string The control name.
• attribute name string The control name.
• attribute invalid-message string The message to show when control is invalid.
• attribute help string The help text to display with a little hover icon.
• attribute value string The initial value, if set.
• attribute justify string The justification of content as left, right, center.
• attribute disabled flag To disable the control.
• attribute invalid flag The control is invalid (uses danger context styling if invalid styling not set).
• attribute required flag The control is required.
• attribute validate-on-load flag Validate the control when it loads in the dom.

Style Variables

• css style variable --cwc-capture-radio--fill The icon fill colour for radio options.
• css style variable --cwc-capture-radio--color The text colour for radio options.
• css style variable --cwc-capture-radio--text-align The text alignment for text.
• css style variable --cwc-capture-radio--fill--hover The icon fill colour for radio options on hover.
• css style variable --cwc-capture-radio--color--hover The text colour for radio options on hover.
• css style variable --cwc-capture-radio--label--text-align The text alignment for the label.
• css style variable --cwc-capture-radio--label--color The text color for the label.
• css style variable --cwc-capture-radio--label--font-weight The font weight for hte label.
• css style variable --cwc-capture-radio--invalid--fill The icon fill colour for the options when invalid.
• css style variable --cwc-capture-radio--invalid--color The text colour for the options when invalid.
• css style variable --cwc-capture-radio--disabled--opacity The opacity of hte options when disabled.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.color-me-red {
		--cwc-capture-radio--fill: red;
		--cwc-capture-radio--fill--hover: red;
		--cwc-capture-radio--color: darkred;
		--cwc-capture-radio--color--hover: darkred;
	}
</style>

<cwc-capture-radio class="color-me-red" label="A radio list">
	<cwc-capture-radio-option value="one">One</cwc-capture-radio-option>
	<cwc-capture-radio-option value="two">Two</cwc-capture-radio-option>
	<cwc-capture-radio-option value="three">Two</cwc-capture-radio-option>
</cwc-capture-radio>
					

Select

Prev Next

<cwc-capture-select>

Custom Web Component, select box for forms.

Example

Events

• event change The value is updated.

Methods

• method render() Re-render the options.
• method Boolean validate(String value) Validate the value against the control, or omit to validate internal value.

Properties

• property String value The initial value (overrides attribute value)

Attributes

• attribute label string The control name.
• attribute name string The control name.
• attribute invalid-message string The message to show when control is invalid.
• attribute help string The help text to display with a little hover icon.
• attribute value string The initial value, if set.
• attribute justify string The justification of content as left, right, center.
• attribute disabled flag To disable the control.
• attribute invalid flag The control is invalid (uses danger context styling if invalid styling not set).
• attribute required flag The control is required.
• attribute validate-on-load flag Validate the control when it loads in the dom.

Style Variables

• css style variable --cwc-capture-select--background The background of the control.
• css style variable --cwc-capture-select--border The border of the control.
• css style variable --cwc-capture-select--border-radius The border-radius of the control.
• css style variable --cwc-capture-select--color The colour of the selected and option text.
• css style variable --cwc-capture-select--height The height of the control.
• css style variable --cwc-capture-select--font-size The font size of the selected and option text.
• css style variable --cwc-capture-select--font-weight The font weight of the selected and option text.
• css style variable --cwc-capture-select--font-style The font style of the selected and option text.
• css style variable --cwc-capture-select--font-family The font family of the selected and option text.
• css style variable --cwc-capture-select--margin The margin of the control.
• css style variable --cwc-capture-select--padding The padding of the control.
• css style variable --cwc-capture-select--text-align The text align of the selected and option text.
• css style variable --cwc-capture-select--label--text-align The text align for the control label.
• css style variable --cwc-capture-select--label--color The text color for the control label.
• css style variable --cwc-capture-select--label--font-weight The font weight for the control label.
• css style variable --cwc-capture-select--invalid--border The border colour of the control when invalid.
• css style variable --cwc-capture-select--invalid--color The text colour of selected and option text when invalid.
• css style variable --cwc-capture-select--disabled--opacity The opacit of the control when disabled.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.make-me-blue {
		--cwc-capture-select--border: blue;
		--cwc-capture-select--color: blue;
		--cwc-capture-select--label--color: blue;
	}
</style>
<cwc-capture-select class="make-me-blue" label="A input">
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</cwc-capture-select>
					

Switch

Prev Next

<cwc-capture-switch>

Custom Web Component, switch for forms and configs.

Example

Events

• event change The value is updated.

Methods

• method Boolean validate(Boolean value) Validate the value against the control, or omit to validate internal value.

Properties

• property String value The initial value (overrides attribute value)

Attributes

• attribute label string The control name.
• attribute help string The help text to display with a little hover icon.
• attribute value string The initial value, if set.
• attribute disabled flag To disable the control.
• attribute invalid flag The control is invalid (uses danger context styling if invalid styling not set).
• attribute required flag The control is required.
• attribute validate-on-load flag Validate the control when it loads in the dom.

Style Variables

• css style variable --cwc-capture-switch--background The background of the switch (actual switch.)
• css style variable --cwc-capture-switch--border The border around the switch.
• css style variable --cwc-capture-switch--border-radius The border radius of the switch and the switch border.
• css style variable --cwc-capture-switch--color The colour of hte switch text.
• css style variable --cwc-capture-switch--text-align The alignment of the switch text.
• css style variable --cwc-capture-switch--background--hover The background of the switch on hover.
• css style variable --cwc-capture-switch--label--color The text colour of the label.
• css style variable --cwc-capture-switch--label--font-weight The font weight of the label.
• css style variable --cwc-capture-switch--label--text-align The alignment of the label.
• css style variable --cwc-capture-switch--disabled--opacity The opacity of hte switch when disabled.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.make-me-orange {
		--cwc-capture-switch--background: orange;
		--cwc-capture-switch--background--hover: darkorange;
		--cwc-capture-switch--border: 1px solid orange;
		--cwc-capture-switch--border-radius: 3px;
		--cwc-capture-switch--color: white;
		--cwc-capture-switch--label--color: orange;
	}
</style>

<cwc-capture-switch class="make-me-orange" label="Switch Two"></cwc-capture-switch>
					

Time

Prev Next

<cwc-capture-time>

Custom Web Component, time input with overlay picker letting you pick a time.

Example

Events

• event show The time picker has been shown.
• event hide The time picker has been hidden.
• event change The time has changed.

Methods

• method show() Show the time picker manually.
• method hide() Hide the time picker manually.

Properties

• property String format The time format to use.
• property String label The label to use for the input box.
• property String value The selected time formatted.

Attributes

• attribute format string The time format to use.
• attribute label string The label to use for the input box.
• attribute placeholder string The placeholder text in the input box.
• attribute help string The help tip text.
• attribute required flag Is the control required.
• attribute disabled flag Is the control disabled.
• attribute invalid flag Is the control invalid.
• attribute validate-on-load flag Validate the control on load.

Style Variables

• css style variable All cwc-capture-button variables inherited.
• css style variable All cwc-capture-input variables inherited.
• css style variable All cwc-overlay-modal variables inherited.
• css style variable --cwc-capture-time--icon--margin The time picker icon margin.
• css style variable --cwc-capture-time--input--padding The input box padding.
• css style variable --cwc-capture-time--button-open--background The button to open button background.
• css style variable --cwc-capture-time--button-open--color The button to open button text color.
• css style variable --cwc-capture-time--button-open--border The button to open button border.
• css style variable --cwc-capture-time--button-open--outline The button to open button outline.
• css style variable --cwc-capture-time--button-open--background--hover The button to open button background on hover.
• css style variable --cwc-capture-time--button-open--background--focus The button to open button background on focus.
• css style variable --cwc-capture-time--button-open--background--active The button to open button background on active.
• css style variable --cwc-capture-time--button-open--box-shadow--hover The button to open button box shadow on hover.
• css style variable --cwc-capture-time--button-open--box-shadow--focus The button to open button box shadow on focus.
• css style variable --cwc-capture-time--button-open--box-shadow--active The button to open button box shadow on active.
• css style variable --cwc-capture-time--selectable--border The time bar selected area border.
• css style variable --cwc-capture-time--selectable--background The time bar selected area background.
• css style variable --cwc-capture-time--selectable--color The time bar selected area text colour.
• css style variable --cwc-capture-time--selectable--border-radius The time bar selected area border radius.
• css style variable --cwc-capture-time--selectable--color The time bar selected area text colour.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	#picker-time2 {
		--cwc-overlay-modal--border-radius: 10px;
		--cwc-overlay-modal--background: green;
		
		--cwc-capture-input--border-radius: 5px;
		--cwc-capture-button--border-radius: 5px;

		--cwc-capture-time--button-open--background: red;
		--cwc-capture-time--button-open--color: white;
		--cwc-capture-time--button-open--border: 1px solid darkred;
		--cwc-capture-time--button-open--background--hover: darkred;
		--cwc-capture-time--button-open--color--hover: white;
		--cwc-capture-time--button-open--border--hover: 1px solid darkred;
		--cwc-capture-time--button-open--background--focus: darkred;
		--cwc-capture-time--button-open--color--focus: white;
		--cwc-capture-time--button-open--border--focus: 1px solid darkred;
		--cwc-capture-time--button-open--background--active: darkred;
		--cwc-capture-time--button-open--color--active: white;
		--cwc-capture-time--button-open--border--active: 1px solid darkred;
		--cwc-capture-time--button-open--box-shadow--active: 0 0 0 2px red;
	}
</style>
<div class="row">
	<div class="col-md-6">
		<cwc-capture-time id="picker-time1" format="hh:mm:ss" label="Time" placeholder="Enter a time e.g 14:10:05 or tonight"></cwc-capture-time>
	</div>
	<div class="col-md-6">
		<cwc-capture-time id="picker-time2" format="hh:mm:ss" label="Time" placeholder="Enter a time e.g 14:10:05 or tonight"></cwc-capture-time>
	</div>
</div>
					

Year

Prev Start

<cwc-capture-year>

Custom Web Component, year input with overlay picker letting you pick a year.

Example

Events

• event show The year picker has been shown.
• event hide The year picker has been hidden.
• event change The year has changed.

Methods

• method show() Show the year picker manually.
• method hide() Hide the year picker manually.

Properties

• property String format The year format to use.
• property String label The label to use for the input box.
• property String value The selected year formatted.

Attributes

• attribute format string The year format to use.
• attribute label string The label to use for the input box.
• attribute placeholder string The placeholder text in the input box.
• attribute help string The help tip text.
• attribute required flag Is the control required.
• attribute disabled flag Is the control disabled.
• attribute invalid flag Is the control invalid.
• attribute validate-on-load flag Validate the control on load.

Style Variables

• css style variable All cwc-capture-button variables inherited.
• css style variable All cwc-capture-input variables inherited.
• css style variable All cwc-overlay-modal variables inherited.
• css style variable --cwc-capture-year--icon--margin The year picker icon margin.
• css style variable --cwc-capture-year--input--padding The input box padding.
• css style variable --cwc-capture-year--button-open--background The button to open button background.
• css style variable --cwc-capture-year--button-open--color The button to open button text color.
• css style variable --cwc-capture-year--button-open--border The button to open button border.
• css style variable --cwc-capture-year--button-open--outline The button to open button outline.
• css style variable --cwc-capture-year--button-open--background--hover The button to open button background on hover.
• css style variable --cwc-capture-year--button-open--background--focus The button to open button background on focus.
• css style variable --cwc-capture-year--button-open--background--active The button to open button background on active.
• css style variable --cwc-capture-year--button-open--box-shadow--hover The button to open button box shadow on hover.
• css style variable --cwc-capture-year--button-open--box-shadow--focus The button to open button box shadow on focus.
• css style variable --cwc-capture-year--button-open--box-shadow--active The button to open button box shadow on active.
• css style variable --cwc-capture-year--selectable--border The year bar selected area border.
• css style variable --cwc-capture-year--selectable--background The year bar selected area background.
• css style variable --cwc-capture-year--selectable--color The year bar selected area text colour.
• css style variable --cwc-capture-year--selectable--border-radius The year bar selected area border radius.
• css style variable --cwc-capture-year--selectable--color The year bar selected area text colour.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	#picker-year2 {
		--cwc-overlay-modal--border-radius: 10px;
		--cwc-overlay-modal--background: green;
		
		--cwc-capture-input--border-radius: 5px;
		--cwc-capture-button--border-radius: 5px;

		--cwc-capture-year--button-open--background: red;
		--cwc-capture-year--button-open--color: white;
		--cwc-capture-year--button-open--border: 1px solid darkred;
		--cwc-capture-year--button-open--background--hover: darkred;
		--cwc-capture-year--button-open--color--hover: white;
		--cwc-capture-year--button-open--border--hover: 1px solid darkred;
		--cwc-capture-year--button-open--background--focus: darkred;
		--cwc-capture-year--button-open--color--focus: white;
		--cwc-capture-year--button-open--border--focus: 1px solid darkred;
		--cwc-capture-year--button-open--background--active: darkred;
		--cwc-capture-year--button-open--color--active: white;
		--cwc-capture-year--button-open--border--active: 1px solid darkred;
		--cwc-capture-year--button-open--box-shadow--active: 0 0 0 2px red;
	}
</style>
<div class="row">
	<div class="col-md-6">
		<cwc-capture-year id="picker-year1" format="yyyy" label="Year" placeholder="Enter a year e.g 2018 or next year"></cwc-capture-year>
	</div>
	<div class="col-md-6">
		<cwc-capture-year id="picker-year2" format="yyyy" label="Year" placeholder="Enter a year e.g 2018 or next year"></cwc-capture-year>
	</div>
</div>