@cbpds/web-components
Version:
Web components for the CBP Design System.
104 lines (100 loc) • 6.25 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpSegmentedButtonGroupCss = "cbp-segmented-button-group{display:flex;width:fit-content}cbp-segmented-button-group cbp-button{--cbp-button-border-width:var(--cbp-border-size-md) calc(var(--cbp-border-size-md) / 2);--cbp-button-border-style:solid;--cbp-button-border-radius:0;}cbp-segmented-button-group cbp-button:first-child{--cbp-button-border-radius:var(--cbp-border-radius-soft) 0 0 var(--cbp-border-radius-soft);--cbp-button-border-width:var(--cbp-border-size-md) calc(var(--cbp-border-size-md) / 2) var(--cbp-border-size-md) var(--cbp-border-size-md)}cbp-segmented-button-group cbp-button:last-of-type{--cbp-button-border-radius:0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;--cbp-button-border-width:var(--cbp-border-size-md) var(--cbp-border-size-md) var(--cbp-border-size-md) calc(var(--cbp-border-size-md) / 2)}cbp-segmented-button-group cbp-button[color][fill]{--cbp-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border);--cbp-button-color-border-focus:var(--cbp-button-color-border);--cbp-button-color-border-active:var(--cbp-button-color-border);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-focus-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-active-dark:var(--cbp-button-color-border-dark)}cbp-segmented-button-group cbp-button[color][fill]:has([aria-pressed=true]){--cbp-button-color:var(--cbp-color-white);--cbp-button-color-bg:var(--cbp-color-interactive-selected-dark);--cbp-button-color-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-dark:var(--cbp-color-interactive-selected-light)}cbp-segmented-button-group cbp-button[color][fill] [disabled]{--cbp-button-color:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-button-color-dark:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-bg-dark:var(--cbp-color-interactive-disabled-light)}";
const CbpSegmentedButtonGroupStyle0 = cbpSegmentedButtonGroupCss;
const SegmentedButtonGroup = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.segmentedButtonGroupClick = createEvent(this, "segmentedButtonGroupClick", 7);
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 })));
}
get host() { return getElement(this); }
static get watchers() { return {
"value": ["watchValueHandler"]
}; }
};
SegmentedButtonGroup.style = CbpSegmentedButtonGroupStyle0;
export { SegmentedButtonGroup as cbp_segmented_button_group };
//# sourceMappingURL=cbp-segmented-button-group.entry.js.map