@cbpds/web-components
Version:
Web components for the CBP Design System.
249 lines (248 loc) • 8.51 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class SegmentedButtonGroup {
constructor() {
this.buttongroup = [];
this.name = undefined;
this.value = undefined;
this.multiple = undefined;
this.accessibilityText = undefined;
this.disabled = undefined;
this.sx = {};
}
handleComponentLoad({ detail: { nativeElement: element, host } }) {
if (element) {
this.buttongroup = [
...this.buttongroup, host
];
}
}
handleButtonClick(e) {
const { detail: { nativeElement: element, host, value } } = e;
if (this.multiple)
host.pressed = (host.pressed == "true") ? "false" : "true";
else
host.pressed = "true";
if (!this.multiple && host.pressed) {
this.buttongroup.forEach(el => {
if (el !== host) {
el.pressed = "false";
}
});
}
setTimeout(() => {
this.setValueFromButtons();
this.segmentedButtonGroupClick.emit({
host: this.host,
value: this.value,
button: element,
buttonValue: value,
pressed: host.pressed,
nativeEvent: e
});
}, 10);
}
watchValueHandler(newValue) {
let values = [];
if (typeof newValue == 'object')
values = newValue;
else if (typeof newValue == 'string')
values = newValue.split(',');
this.buttongroup.forEach((item) => {
item.pressed = `${values.includes(item.value)}`;
});
}
setValueFromButtons() {
let values = [];
const PressedButtons = Array.from(this.host.querySelectorAll('cbp-button[pressed=true]'));
PressedButtons.forEach(item => {
if (item.value != undefined) {
values = [...values, item.value];
}
});
this.value = values;
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.buttongroup.forEach(cbpButton => {
if (cbpButton.pressed !== "true") {
cbpButton.pressed = "false";
}
});
if (this.value != undefined)
this.watchValueHandler(this.value);
else
this.setValueFromButtons();
}
render() {
return (h(Host, { key: '33ed25f4dae9f402b19e1e2e47e489d75a73d6a8', role: "group", "aria-label": this.accessibilityText }, h("slot", { key: 'f1af153dd005da9ee9b6e01924e6d30ede6d8f13' }), this.name &&
h("input", { key: '4aa28bfb2ef958db0bf4490d2b7d7ff2b8b20862', type: "hidden", name: this.name, value: this.value })));
}
static get is() { return "cbp-segmented-button-group"; }
static get originalStyleUrls() {
return {
"$": ["cbp-segmented-button-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-segmented-button-group.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies the name of the (hidden) form field as a formData key \nwhen a value is intended to be passed."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "any",
"mutable": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies a value of the group as a way to set the initial button pressed states and/or\nto be passed as part of submitted formData when a name is also specified. \nRequires that the individual buttons have a value specified for the group to pass a value."
},
"attribute": "value",
"reflect": false
},
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether multiple buttons may be activated at the same time. Defaults to false."
},
"attribute": "multiple",
"reflect": false
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies accessibility text used to label the group, applied to the group via aria-label."
},
"attribute": "accessibility-text",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"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": "segmentedButtonGroupClick",
"name": "segmentedButtonGroupClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "watchValueHandler"
}];
}
static get listeners() {
return [{
"name": "componentLoad",
"method": "handleComponentLoad",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "buttonClick",
"method": "handleButtonClick",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-segmented-button-group.js.map