@claromentis/design-system
Version:
Claromentis Design System Component Library
247 lines (246 loc) • 6.45 kB
JavaScript
import { h } from '@stencil/core';
import { propagateFocusEvent } from "../../utils/utils";
/**
* @slot - Allows label content
*/
export class Checkbox {
constructor() {
/**
* Propagate a focus event.
*
* Used to propagate `<input>` focus events through the Shadow DOM boundary
* in the case that they aren't by the browser.
*
* @param {FocusEvent} event
*/
this.onFocusEvent = (event) => {
propagateFocusEvent(this.element, event);
};
/**
* on Change event change input's value.
*
* Used to emit the change of value when an input is checked.
*
* @param {InputEvent} event
*/
this.onChangeEvent = (event) => {
this.checked = event.target.checked;
if (this.checked) {
this.selected.emit({
value: this.value
});
}
else {
this.unselected.emit({
value: this.value
});
}
};
/**
* prevent Event Propagation
*
* Prevents the propagation of click events to prevent click events firing twice on the component
*
* @param {MouseEvent} event
*/
this.preventPropagation = (event) => {
event.stopPropagation();
};
this.name = undefined;
this.large = undefined;
this.inverted = undefined;
this.value = undefined;
this.block = undefined;
this.disabled = false;
this.checked = false;
}
/**
* Get the map of CSS classes for the checkbox.
*
* @return CssClassMap
*/
getClassMap() {
const large = this.large;
const block = this.block;
const inverted = this.inverted;
return {
'cla-checkbox': true,
[`cla-checkbox-block`]: block,
[`cla-checkbox-lg`]: large,
[`cla-checkbox-inverted`]: inverted
};
}
render() {
return (h("label", { class: this.getClassMap() }, h("input", { type: "checkbox", class: "cla-custom-control-input", value: this.value, name: this.name, id: this.name, onFocus: this.onFocusEvent, onBlur: this.onFocusEvent, onChange: this.onChangeEvent, disabled: this.disabled, checked: this.checked }), h("span", { onClick: this.preventPropagation, class: "cla-checkbox-input" }), h("span", { onClick: this.preventPropagation, class: "cla-checkbox-label" }, h("slot", null))));
}
static get is() { return "cla-checkbox"; }
static get originalStyleUrls() {
return {
"$": ["cla-checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-checkbox.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The checkbox ID & name"
},
"attribute": "name",
"reflect": false
},
"large": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to use the large variant of the checkbox."
},
"attribute": "large",
"reflect": false
},
"inverted": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to use the inverted variant of the checkbox."
},
"attribute": "inverted",
"reflect": false
},
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "0",
"resolved": "0",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The checkbox value"
},
"attribute": "value",
"reflect": false
},
"block": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to use the block style variant of the checkbox."
},
"attribute": "block",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the checkbox is disabled."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is it Checked ?"
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "selected",
"name": "selected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checkbox is selected."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "unselected",
"name": "unselected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checkbox is unselected."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "element"; }
}