@cbpds/web-components
Version:
Web components for the CBP Design System.
74 lines (68 loc) • 5.01 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.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) {
index.registerInstance(this, hostRef);
this.segmentedButtonGroupClick = index.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) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.buttongroup.forEach(cbpButton => {
if (cbpButton.pressed !== "true") {
cbpButton.pressed = "false";
}
});
}
render() {
return (index.h(index.Host, { key: '9471951aca1bb4671d1800200cf2d01fc0f0b63f', role: "group", "aria-label": this.accessibilityText }, index.h("slot", { key: 'e8f3012c2a726b05a10a8325ab8d99e8a3911aa6' })));
}
get host() { return index.getElement(this); }
};
SegmentedButtonGroup.style = CbpSegmentedButtonGroupStyle0;
exports.cbp_segmented_button_group = SegmentedButtonGroup;
//# sourceMappingURL=cbp-segmented-button-group.cjs.entry.js.map