@ionic/core
Version:
Base components for Ionic
133 lines (132 loc) • 4.21 kB
JavaScript
import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
export class Checkbox {
constructor() {
this.inputId = `ion-cb-${checkboxIds++}`;
this.name = this.inputId;
this.checked = false;
this.disabled = false;
this.value = 'on';
this.onFocus = () => {
this.ionFocus.emit();
};
this.onBlur = () => {
this.ionBlur.emit();
};
}
componentWillLoad() {
this.emitStyle();
}
checkedChanged(isChecked) {
this.ionChange.emit({
checked: isChecked,
value: this.value
});
this.emitStyle();
}
emitStyle() {
this.ionStyle.emit({
'checkbox-checked': this.checked,
'interactive-disabled': this.disabled,
});
}
onClick() {
this.setFocus();
this.checked = !this.checked;
}
setFocus() {
if (this.buttonEl) {
this.buttonEl.focus();
}
}
hostData() {
const { inputId, disabled, checked, color, el } = this;
const labelId = inputId + '-lbl';
const label = findItemLabel(el);
if (label) {
label.id = labelId;
}
return {
'role': 'checkbox',
'aria-disabled': disabled ? 'true' : null,
'aria-checked': `${checked}`,
'aria-labelledby': labelId,
class: Object.assign({}, createColorClasses(color), { 'in-item': hostContext('ion-item', el), 'checkbox-checked': checked, 'checkbox-disabled': disabled, 'interactive': true })
};
}
render() {
renderHiddenInput(true, this.el, this.name, (this.checked ? this.value : ''), this.disabled);
return [
h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24" }, this.mode === 'md'
? h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59" })
: h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8" })),
h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, ref: el => this.buttonEl = el })
];
}
static get is() { return "ion-checkbox"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"checked": {
"type": Boolean,
"attr": "checked",
"mutable": true,
"watchCallbacks": ["checkedChanged"]
},
"color": {
"type": String,
"attr": "color"
},
"disabled": {
"type": Boolean,
"attr": "disabled",
"watchCallbacks": ["emitStyle"]
},
"el": {
"elementRef": true
},
"mode": {
"type": String,
"attr": "mode"
},
"name": {
"type": String,
"attr": "name"
},
"value": {
"type": String,
"attr": "value"
}
}; }
static get events() { return [{
"name": "ionChange",
"method": "ionChange",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionFocus",
"method": "ionFocus",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionBlur",
"method": "ionBlur",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionStyle",
"method": "ionStyle",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "click",
"method": "onClick"
}]; }
static get style() { return "/**style-placeholder:ion-checkbox:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-checkbox:**/"; }
}
let checkboxIds = 0;