@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 3.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r,c as o,h as t,a as b,g as c}from"./p-8d4a80f0.js";import{s as e}from"./p-93ade441.js";const a="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 d=a;const i=class{constructor(t){r(this,t);this.segmentedButtonGroupClick=o(this,"segmentedButtonGroupClick",7);this.buttongroup=[];this.multiple=undefined;this.accessibilityText=undefined;this.disabled=undefined;this.sx={}}handleComponentLoad({detail:{nativeElement:r,host:o}}){if(r){this.buttongroup=[...this.buttongroup,o]}}handleButtonClick({detail:{nativeElement:r,host:o,value:t}}){if(this.multiple)o.pressed=o.pressed=="true"?"false":"true";else o.pressed="true";if(!this.multiple&&o.pressed){this.buttongroup.forEach((r=>{if(r!=o){r.pressed="false"}}))}this.segmentedButtonGroupClick.emit({detail:{host:this.host,button:r,value:t,pressed:o.pressed}})}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}e(this.host,Object.assign({},this.sx))}componentDidLoad(){this.buttongroup.forEach((r=>{if(r.pressed!=="true"){r.pressed="false"}}))}render(){return t(b,{key:"9471951aca1bb4671d1800200cf2d01fc0f0b63f",role:"group","aria-label":this.accessibilityText},t("slot",{key:"e8f3012c2a726b05a10a8325ab8d99e8a3911aa6"}))}get host(){return c(this)}};i.style=d;export{i as cbp_segmented_button_group};
//# sourceMappingURL=p-f76d70d2.entry.js.map