@cbpds/web-components
Version:
Web components for the CBP Design System.
294 lines (293 loc) • 10.8 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpToggle {
constructor() {
this.checked = undefined;
this.disabled = undefined;
this.hideStatus = undefined;
this.statusTextOn = 'On';
this.statusTextOff = 'Off';
this.name = undefined;
this.value = undefined;
this.context = undefined;
this.sx = {};
}
toggleEvent(e) {
this.checked = this.formField.checked;
this.toggleClick.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
checked: this.formField.checked,
nativeEvent: e
});
}
async reset() {
var _a;
this.checked = this.initialChecked;
this.initialChecked ? (_a = this.formField) === null || _a === void 0 ? void 0 : _a.setAttribute('checked', '') : this === null || this === void 0 ? void 0 : this.formField.removeAttribute('checked');
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
}
watchCheckedHandler(newValue) {
if (this.formField) {
this.formField.checked = newValue;
}
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
this.formField = this.host.querySelector('input[type=checkbox]');
if (this.formField) {
this.formField.addEventListener('change', e => this.toggleEvent(e));
}
}
componentDidLoad() {
if (!!this.formField) {
if (this.checked)
this.formField.checked = this.checked;
if (this.disabled)
this.formField.setAttribute('disabled', '');
if (this.name)
this.formField.name = this.name;
if (this.value)
this.formField.value = this.value;
this.checked = this.formField.checked;
}
this.initialChecked = this.checked;
}
render() {
return (h(Host, { key: '8481e2da57ae96d8669c1059d2e30574e9893d06' }, h("label", { key: '2b906bc0006ef6a26b2b97fb8f8b95dde79132ba' }, h("slot", { key: '09cf8a44e54fcd60b2cfaa6296b6609dab81320d' }), !this.hideStatus && h("span", { key: 'ed61fd6141430229eaf981f2e2e46ff17191c447' }, this.checked ? this.statusTextOn : this.statusTextOff))));
}
static get is() { return "cbp-toggle"; }
static get originalStyleUrls() {
return {
"$": ["cbp-toggle.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-toggle.css"]
};
}
static get properties() {
return {
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Marks the toggle as checked (on) by default when specified."
},
"attribute": "checked",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Marks the toggle in a disabled state when specified."
},
"attribute": "disabled",
"reflect": true
},
"hideStatus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the status text after the toggle control when specified."
},
"attribute": "hide-status",
"reflect": false
},
"statusTextOn": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the status text for the true toggle."
},
"attribute": "status-text-on",
"reflect": false,
"defaultValue": "'On'"
},
"statusTextOff": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the status text for the false toggle."
},
"attribute": "status-text-off",
"reflect": false,
"defaultValue": "'Off'"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally set the `name` attribute of the checkbox at the component level, which is passed as part of \nformData (as a key) only when the checkbox is checked. \nNot needed if the slotted checkbox has a name."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally set the `value` attribute of the checkbox at the component level. \nNot needed if the slotted checkbox has a value."
},
"attribute": "value",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object."
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "toggleClick",
"name": "toggleClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event fired when the control is toggled by the user."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"reset": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A custom method to reset the Toggle component to its initial state and value since it does not update \nproperly on a native form reset when the checked state is set via the component property. This method may \nbe called manually, but is automatically called on form reset when using the `cbp-form` component.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "disabled",
"methodName": "watchDisabledHandler"
}, {
"propName": "checked",
"methodName": "watchCheckedHandler"
}];
}
}
//# sourceMappingURL=cbp-toggle.js.map