@cbpds/web-components
Version:
Web components for the CBP Design System.
70 lines (66 loc) • 4.96 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-0f6e3adc.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[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-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[color][fill]: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[color][fill]:last-child{--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]: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.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' })));
}
get host() { return getElement(this); }
};
SegmentedButtonGroup.style = CbpSegmentedButtonGroupStyle0;
export { SegmentedButtonGroup as cbp_segmented_button_group };
//# sourceMappingURL=cbp-segmented-button-group.entry.js.map