@cbpds/web-components
Version:
Web components for the CBP Design System.
178 lines (177 loc) • 5.75 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.multiple = undefined;
this.accessibilityText = undefined;
this.disabled = undefined;
this.sx = {};
}
handleComponentLoad({ detail: { nativeElement: element, host } }) {
if (element) {
this.buttongroup = [
...this.buttongroup, host
];
}
}
handleButtonClick({ detail: { nativeElement: element, host, value } }) {
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";
}
});
}
this.segmentedButtonGroupClick.emit({
detail: {
host: this.host,
button: element,
value: value,
pressed: host.pressed,
}
});
}
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";
}
});
}
render() {
return (h(Host, { key: '9471951aca1bb4671d1800200cf2d01fc0f0b63f', role: "group", "aria-label": this.accessibilityText }, h("slot", { key: 'e8f3012c2a726b05a10a8325ab8d99e8a3911aa6' })));
}
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 {
"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 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