Custom Web Components (CWC)

Control Components

Mainly centered around control and data capture, these components come in all int the form of self validating form inputs, buttons, switches and more.


Box

<cwc-control-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-control-box--border Border for main container.
  • css style variable --cwc-control-box--border-radius Border-radius for main container.
  • css style variable --cwc-control-box--label--color Label text colour.
  • css style variable --cwc-control-box--label--font-weight Label font weight.
  • css style variable --cwc-control-box--label--text-align label text alignment.
  • css style variable --cwc-control-box--option--background Option box background colour.
  • css style variable --cwc-control-box--option--color Option box text colour.
  • css style variable --cwc-control-box--option--font-size Option box text font-size.
  • css style variable --cwc-control-box--option--font-family Option box text font-family.
  • css style variable --cwc-control-box--option--cursor Option box cursor type on hover.
  • css style variable --cwc-control-box--option--border-radius Option box border-radius.
  • css style variable --cwc-control-box--option--background--selected Option box background when selected.
  • css style variable --cwc-control-box--option--color--selected Option box text colour when selected.
  • css style variable --cwc-control-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-control-box--border: 1px solid blue;
		--cwc-control-box--border-radius: 6px;
		--cwc-control-box--label--color: blue;
		--cwc-control-box--option--color: blue;
		--cwc-control-box--option--border-radius: 6px;
		--cwc-control-box--option--background--selected: blue;
		--cwc-control-box--option--cursor: pointer;
	}
</style>

<cwc-control-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-control-box>
					

Button

<cwc-control-button>

Custom Web Component, a button for forms and actions.

Example

Click Me
Click Me Too
Dont Push Me Punk!

Events

  • event click click The button is clicked.

Attributes

  • attribute type string The type for the control.
  • attribute disabled flag Disabled control when present.

Style Variables

  • css style variable --cwc-control-button--background Background color/image of button.
  • css style variable --cwc-control-button--background--hover hover Background color/image of button on hover.
  • css style variable --cwc-control-button--background--focus focus Background color/image of button on focus.
  • css style variable --cwc-control-button--background--active active Background color/image of button on active.
  • css style variable --cwc-control-button--border Border for button.
  • css style variable --cwc-control-button--border-radius Border radius for button.
  • css style variable --cwc-control-button--box-shadow Box shadow for button.
  • css style variable --cwc-control-button--box-shadow--hover hover Box shadow for button on hover.
  • css style variable --cwc-control-button--box-shadow--focus focus Box shadow for button on focus.
  • css style variable --cwc-control-button--box-shadow--active active Box shadow for button on active.
  • css style variable --cwc-control-button--cursor Cursor for button.
  • css style variable --cwc-control-button--font-family Font family for button.
  • css style variable --cwc-control-button--font-size Font size for button.
  • css style variable --cwc-control-button--line-height Line height for button.
  • css style variable --cwc-control-button--height Height for button.
  • css style variable --cwc-control-button--outline Outline for button.
  • css style variable --cwc-control-button--padding Padding for button.
  • css style variable --cwc-control-button--width Width for button.

Slots

  • root Single root slot for content to place in the component.

<!-- 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>
	.danger {
		--cwc-control-button--background: red;
		--cwc-control-button--color: white;
		--cwc-control-button--border: 1px solid transparent;
	}

	.danger:hover {
		--cwc-control-button--background--hover: darkred;
	}

	.danger:focus {
		--cwc-control-button--background--focus: darkred;
		--cwc-control-button--box-shadow--focus: 0 0 0 1px #f98a8a;
	}

	.danger:active {
		--cwc-control-button--background--active: darkred;
		--cwc-control-button--box-shadow--active: 0 0 0 2px #f98a8a;
	}
</style>

<cwc-control-button class="danger">Click Me Too</cwc-control-box>
					

Checkbox

<cwc-control-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-control-checkbox--border The border of the check box (only with 'boxed' attribute).
  • css style variable --cwc-control-checkbox--border-radius The border radius of the check box (only with 'boxed' attribute).
  • css style variable --cwc-control-checkbox--color The text colour of the check box text.
  • css style variable --cwc-control-checkbox--color--hover hover The colour of the check box text on hover.
  • css style variable --cwc-control-checkbox--float The float position of the check box.
  • css style variable --cwc-control-checkbox--fill The icon colour of the check box.
  • css style variable --cwc-control-checkbox--fill--hover hover The icon colour of the check box.
  • css style variable --cwc-control-checkbox--font-size The font size of the check box text.
  • css style variable --cwc-control-checkbox--font-weight The font weight of the check box text.
  • css style variable --cwc-control-checkbox--font-style The font style of the check box text.
  • css style variable --cwc-control-checkbox--font-family The font family of the check box text.
  • css style variable --cwc-control-checkbox--text-align The alignment of the check box text.
  • css style variable --cwc-control-checkbox--invalid--fill The invalid icon colour of the check box.
  • css style variable --cwc-control-checkbox--invalid--fill--hover hover The invalid icon colour of the check box on hover.
  • css style variable --cwc-control-checkbox--invalid--border The invalid border of the check box.
  • css style variable --cwc-control-checkbox--invalid--color The invalid text colour of the check box.
  • css style variable --cwc-control-checkbox--invalid--color--hover hover The invalid text colour of the check box on hover.
  • css style variable --cwc-control-checkbox--label--text-align The alignment of the check box label.
  • css style variable --cwc-control-checkbox--label--color The text colour of the check box label.
  • css style variable --cwc-control-checkbox--label--font-size The font size of the check box label.
  • css style variable --cwc-control-checkbox--label--font-weight The font weight of the check box label.
  • css style variable --cwc-control-checkbox--label--font-style The font style of the check box label.
  • css style variable --cwc-control-checkbox--label--font-family The font family of the check box label.
  • css style variable --cwc-control-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-control-checkbox--border: 1px solid red;
		--cwc-control-checkbox--fill: red;
		--cwc-control-checkbox--fill--hover: red;
		--cwc-control-checkbox--color: red;
		--cwc-control-checkbox--label--color: red;
	}
</style>

<cwc-control-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-control-checkbox>
					

Date

<cwc-control-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-control-button variables inherited.
  • css style variable All cwc-control-input variables inherited.
  • css style variable All cwc-overlay-modal variables inherited.
  • css style variable --cwc-control-date--icon--margin The date picker icon margin.
  • css style variable --cwc-control-date--input--padding The date picker input box padding.
  • css style variable --cwc-control-date--selectable--border-radius The date picker selectable border radius.
  • css style variable --cwc-control-date--selected-day--border The date picker selected day border.
  • css style variable --cwc-control-date--selected-day--background The date picker selected day background.
  • css style variable --cwc-control-date--selected-day--color The date picker selected day text colour.
  • css style variable --cwc-control-date--selected-month--border The date picker selected month border.
  • css style variable --cwc-control-date--selected-month--background The date picker selected month background.
  • css style variable --cwc-control-date--selected-month--color The date picker selected moneth text colour.
  • css style variable --cwc-control-date--selected-year--border The date picker selected year border.
  • css style variable --cwc-control-date--selected-year--background The date picker selected year background.
  • css style variable --cwc-control-date--selected-year--color The date picker selected year text colour.
  • css style variable --cwc-control-date--button-open--background The date picker open calendar button background.
  • css style variable --cwc-control-date--button-open--color The date picker open calendar button text/fill color.
  • css style variable --cwc-control-date--button-open--border The date picker open calendar button border.
  • css style variable --cwc-control-date--button-open--height The date picker open calendar button box height.
  • css style variable --cwc-control-date--button-open--background--hover The date picker open calendar button background on hover.
  • css style variable --cwc-control-date--button-open--background--focus The date picker open calendar button background on focus.
  • css style variable --cwc-control-date--button-open--background--active The date picker open calendar button background on active.
  • css style variable --cwc-control-date--button-open--box-shadow--hover The date picker open calendar button box shadow on hover.
  • css style variable --cwc-control-date--button-open--box-shadow--focus The date picker open calendar button box shadow on focus.
  • css style variable --cwc-control-date--button-open--box-shadow--active The date picker open calendar button box shadow on active.
  • css style variable --cwc-control-date--button-today--background The date picker move to today button background.
  • css style variable --cwc-control-date--button-today--color The date picker move to today button text colour.
  • css style variable --cwc-control-date--button-today--border The date picker move to today button border.
  • css style variable --cwc-control-date--button-today--outline The date picker move to today button outline.
  • css style variable --cwc-control-date--button-today--background--hover The date picker move to today button background on hover.
  • css style variable --cwc-control-date--button-today--background--focus The date picker move to today button background on focus.
  • css style variable --cwc-control-date--button-today--background--active The date picker move to today button background on active.
  • css style variable --cwc-control-date--button-today--box-shadow--hover The date picker move to today button box shadow on hover.
  • css style variable --cwc-control-date--button-today--box-shadow--focus The date picker move to today button box shadow on focus.
  • css style variable --cwc-control-date--button-today--box-shadow--active The date picker move to today button box shadow on active.
  • css style variable --cwc-control-date--button-close--background The date picker close picker button background.
  • css style variable --cwc-control-date--button-close--color The date picker close picker button text colour.
  • css style variable --cwc-control-date--button-close--border The date picker close picker button boder.
  • css style variable --cwc-control-date--button-close--outline The date picker close picker button outline.
  • css style variable --cwc-control-date--button-close--background--hover The date picker close picker button background on hover.
  • css style variable --cwc-control-date--button-close--background--focus The date picker close picker button background on focus.
  • css style variable --cwc-control-date--button-close--background--active The date picker close picker button background on active.
  • css style variable --cwc-control-date--button-close--box-shadow--hover The date picker close picker button box shadow on hover.
  • css style variable --cwc-control-date--button-close--box-shadow--focus The date picker close picker button box shadow on focus.
  • css style variable --cwc-control-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-control-input--border-radius: 5px;
		--cwc-control-button--border-radius: 5px;

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

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

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

Input

<cwc-control-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-control-input--text-align The text align of the input text.
  • css style variable --cwc-control-input--padding The padding inside the input.
  • css style variable --cwc-control-input--border-radius The border-radius of the input.
  • css style variable --cwc-control-input--border The border of the input.
  • css style variable --cwc-control-input--color The color of the input text.
  • css style variable --cwc-control-input--background The background of the input.
  • css style variable --cwc-control-input--font-size The font size of the input.
  • css style variable --cwc-control-input--font-weight The font weight of the input.
  • css style variable --cwc-control-input--font-style The font style of the input.
  • css style variable --cwc-control-input--font-family The font family of the input.
  • css style variable --cwc-control-input--label--text-align The text align of the input label.
  • css style variable --cwc-control-input--label--color The colour of the input label.
  • css style variable --cwc-control-input--label--font-weight The font weight of the input label.
  • css style variable --cwc-control-input--invalid--border The border colour of an invalid input.
  • css style variable --cwc-control-input--invalid--color The colour of an invalid input text.
  • css style variable --cwc-control-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-control-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-control-input>
					

Radio

<cwc-control-radio>

Custom Web Component, radio buttons for forms.

Example

One Two Two
One Two Two
One Two Two

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-control-radio--fill The icon fill colour for radio options.
  • css style variable --cwc-control-radio--color The text colour for radio options.
  • css style variable --cwc-control-radio--text-align The text alignment for text.
  • css style variable --cwc-control-radio--fill--hover The icon fill colour for radio options on hover.
  • css style variable --cwc-control-radio--color--hover The text colour for radio options on hover.
  • css style variable --cwc-control-radio--label--text-align The text alignment for the label.
  • css style variable --cwc-control-radio--label--color The text color for the label.
  • css style variable --cwc-control-radio--label--font-weight The font weight for hte label.
  • css style variable --cwc-control-radio--invalid--fill The icon fill colour for the options when invalid.
  • css style variable --cwc-control-radio--invalid--color The text colour for the options when invalid.
  • css style variable --cwc-control-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-control-radio--fill: red;
		--cwc-control-radio--fill--hover: red;
		--cwc-control-radio--color: darkred;
		--cwc-control-radio--color--hover: darkred;
	}
</style>

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

Select

<cwc-control-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-control-select--background The background of the control.
  • css style variable --cwc-control-select--border The border of the control.
  • css style variable --cwc-control-select--border-radius The border-radius of the control.
  • css style variable --cwc-control-select--color The colour of the selected and option text.
  • css style variable --cwc-control-select--height The height of the control.
  • css style variable --cwc-control-select--font-size The font size of the selected and option text.
  • css style variable --cwc-control-select--font-weight The font weight of the selected and option text.
  • css style variable --cwc-control-select--font-style The font style of the selected and option text.
  • css style variable --cwc-control-select--font-family The font family of the selected and option text.
  • css style variable --cwc-control-select--margin The margin of the control.
  • css style variable --cwc-control-select--padding The padding of the control.
  • css style variable --cwc-control-select--text-align The text align of the selected and option text.
  • css style variable --cwc-control-select--label--text-align The text align for the control label.
  • css style variable --cwc-control-select--label--color The text color for the control label.
  • css style variable --cwc-control-select--label--font-weight The font weight for the control label.
  • css style variable --cwc-control-select--invalid--border The border colour of the control when invalid.
  • css style variable --cwc-control-select--invalid--color The text colour of selected and option text when invalid.
  • css style variable --cwc-control-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-control-select--border: blue;
		--cwc-control-select--color: blue;
		--cwc-control-select--label--color: blue;
	}
</style>
<cwc-control-select class="make-me-blue" label="A input">
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</cwc-control-select>
					

Switch

<cwc-control-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-control-switch--background The background of the switch (actual switch.)
  • css style variable --cwc-control-switch--border The border around the switch.
  • css style variable --cwc-control-switch--border-radius The border radius of the switch and the switch border.
  • css style variable --cwc-control-switch--color The colour of hte switch text.
  • css style variable --cwc-control-switch--text-align The alignment of the switch text.
  • css style variable --cwc-control-switch--background--hover The background of the switch on hover.
  • css style variable --cwc-control-switch--label--color The text colour of the label.
  • css style variable --cwc-control-switch--label--font-weight The font weight of the label.
  • css style variable --cwc-control-switch--label--text-align The alignment of the label.
  • css style variable --cwc-control-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-control-switch--background: orange;
		--cwc-control-switch--background--hover: darkorange;
		--cwc-control-switch--border: 1px solid orange;
		--cwc-control-switch--border-radius: 3px;
		--cwc-control-switch--color: white;
		--cwc-control-switch--label--color: orange;
	}
</style>

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

Time

<cwc-control-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-control-button variables inherited.
  • css style variable All cwc-control-input variables inherited.
  • css style variable All cwc-overlay-modal variables inherited.
  • css style variable --cwc-control-time--icon--margin The time picker icon margin.
  • css style variable --cwc-control-time--input--padding The input box padding.
  • css style variable --cwc-control-time--button-open--background The button to open button background.
  • css style variable --cwc-control-time--button-open--color The button to open button text color.
  • css style variable --cwc-control-time--button-open--border The button to open button border.
  • css style variable --cwc-control-time--button-open--outline The button to open button outline.
  • css style variable --cwc-control-time--button-open--background--hover The button to open button background on hover.
  • css style variable --cwc-control-time--button-open--background--focus The button to open button background on focus.
  • css style variable --cwc-control-time--button-open--background--active The button to open button background on active.
  • css style variable --cwc-control-time--button-open--box-shadow--hover The button to open button box shadow on hover.
  • css style variable --cwc-control-time--button-open--box-shadow--focus The button to open button box shadow on focus.
  • css style variable --cwc-control-time--button-open--box-shadow--active The button to open button box shadow on active.
  • css style variable --cwc-control-time--selectable--border The time bar selected area border.
  • css style variable --cwc-control-time--selectable--background The time bar selected area background.
  • css style variable --cwc-control-time--selectable--color The time bar selected area text colour.
  • css style variable --cwc-control-time--selectable--border-radius The time bar selected area border radius.
  • css style variable --cwc-control-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-control-input--border-radius: 5px;
		--cwc-control-button--border-radius: 5px;

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

Year

<cwc-control-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-control-button variables inherited.
  • css style variable All cwc-control-input variables inherited.
  • css style variable All cwc-overlay-modal variables inherited.
  • css style variable --cwc-control-year--icon--margin The year picker icon margin.
  • css style variable --cwc-control-year--input--padding The input box padding.
  • css style variable --cwc-control-year--button-open--background The button to open button background.
  • css style variable --cwc-control-year--button-open--color The button to open button text color.
  • css style variable --cwc-control-year--button-open--border The button to open button border.
  • css style variable --cwc-control-year--button-open--outline The button to open button outline.
  • css style variable --cwc-control-year--button-open--background--hover The button to open button background on hover.
  • css style variable --cwc-control-year--button-open--background--focus The button to open button background on focus.
  • css style variable --cwc-control-year--button-open--background--active The button to open button background on active.
  • css style variable --cwc-control-year--button-open--box-shadow--hover The button to open button box shadow on hover.
  • css style variable --cwc-control-year--button-open--box-shadow--focus The button to open button box shadow on focus.
  • css style variable --cwc-control-year--button-open--box-shadow--active The button to open button box shadow on active.
  • css style variable --cwc-control-year--selectable--border The year bar selected area border.
  • css style variable --cwc-control-year--selectable--background The year bar selected area background.
  • css style variable --cwc-control-year--selectable--color The year bar selected area text colour.
  • css style variable --cwc-control-year--selectable--border-radius The year bar selected area border radius.
  • css style variable --cwc-control-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-control-input--border-radius: 5px;
		--cwc-control-button--border-radius: 5px;

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

Go To Top