@cbpds/web-components
Version:
Web components for the CBP Design System.
274 lines (273 loc) • 9.63 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 = {};
}
async reset() {
this.value = this.initialValue;
}
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();
this.initialValue = this.value;
}
render() {
return (h(Host, { key: '44544f757ebeaa8cc890ad638e81f5f20b515f37', role: "group", "aria-label": this.accessibilityText }, h("slot", { key: '95715ce36a8df0b407d47fc376616f94821b3479' }), this.name &&
h("input", { key: '254ad6188844553d38d9da0a43f5468d99b81f25', 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": "A custom event fired when any of the group's buttons are clicked, whether toggled on or off."
},
"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 Segmented Button Group component to its initial state and value (when a name is specified)\nsince the hidden input does not update on a native form reset. This method may be called manually, but is automatically \ncalled on form reset when using the `cbp-form` component.",
"tags": []
}
}
};
}
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