@stories-js/core
Version:
Stories web components to build stories
298 lines • 8.85 kB
JavaScript
/*!
* (C) StoriesJS https://storiesjs.org - GPL-2.0 License
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, Host, h, Prop, Element, Event, Watch } from '@stencil/core';
import { getAriaLabel, renderHiddenInput } from '../../helpers';
import { createColorClasses, hostContext } from '../../utils';
let checkboxIds = 0;
export class Checkbox {
constructor() {
this.inputId = `stories-cb-${checkboxIds++}`;
/**
* The name of the control, which is submitted with the form data.
*/
this.name = this.inputId;
/**
* If `true`, the checkbox is selected.
*/
this.checked = false;
/**
* If `true`, the checkbox will visually appear as indeterminate.
*/
this.indeterminate = false;
/**
* If `true`, the user cannot interact with the checkbox.
*/
this.disabled = false;
/**
* The value of the checkbox does not mean if it's checked or not, use the `checked`
* property for that.
*
* The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
* it's only used when the checkbox participates in a native `<form>`.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.value = 'on';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.onClick = (ev) => {
ev.preventDefault();
this.setFocus();
this.checked = !this.checked;
this.indeterminate = false;
};
this.onFocus = () => {
this.storiesFocus.emit();
};
this.onBlur = () => {
this.storiesBlur.emit();
};
}
componentWillLoad() {
this.emitStyle();
}
checkedChanged(isChecked) {
this.storiesChange.emit({
checked: isChecked,
value: this.value
});
this.emitStyle();
}
disabledChanged() {
this.emitStyle();
}
emitStyle() {
this.storiesStyle.emit({
'checkbox-checked': this.checked,
'interactive-disabled': this.disabled,
});
}
setFocus() {
if (this.focusEl) {
this.focusEl.focus();
}
}
render() {
const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
const { label, labelId, labelText } = getAriaLabel(el, inputId);
renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
const path = indeterminate
? h("path", { d: "M6 12L18 12", part: "mark" })
: h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" });
return (h(Host, { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": label ? labelId : null, class: createColorClasses(color, {
'in-item': hostContext('stories-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': indeterminate,
'interactive': true
}), onClick: this.onClick, role: "checkbox" },
h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path),
h("label", { htmlFor: inputId }, labelText),
h("input", { ref: focusEl => this.focusEl = focusEl, "aria-checked": `${checked}`, disabled: disabled, id: inputId, onBlur: () => this.onBlur(), onFocus: () => this.onFocus(), type: "checkbox" })));
}
static get is() { return "stories-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["checkbox.scss"]
}; }
static get styleUrls() { return {
"$": ["checkbox.css"]
}; }
static get properties() { return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
},
"attribute": "color",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the control, which is submitted with the form data."
},
"attribute": "name",
"reflect": false,
"defaultValue": "this.inputId"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the checkbox is selected."
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the checkbox will visually appear as indeterminate."
},
"attribute": "indeterminate",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the checkbox."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`."
},
"attribute": "value",
"reflect": false,
"defaultValue": "'on'"
}
}; }
static get events() { return [{
"method": "storiesChange",
"name": "storiesChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checked property has changed."
},
"complexType": {
"original": "CheckboxChangeEventDetail",
"resolved": "CheckboxChangeEventDetail<any>",
"references": {
"CheckboxChangeEventDetail": {
"location": "import",
"path": "../../types"
}
}
}
}, {
"method": "storiesFocus",
"name": "storiesFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checkbox has focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "storiesBlur",
"name": "storiesBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checkbox loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "storiesStyle",
"name": "storiesStyle",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Emitted when the styles change."
},
"complexType": {
"original": "StyleEventDetail",
"resolved": "StyleEventDetail",
"references": {
"StyleEventDetail": {
"location": "import",
"path": "../../types"
}
}
}
}]; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "checked",
"methodName": "checkedChanged"
}, {
"propName": "disabled",
"methodName": "disabledChanged"
}]; }
}
//# sourceMappingURL=checkbox.js.map