@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.66 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,c as r,h as o,a as e,g as b}from"./p-654179c2.js";import{s as c}from"./p-93ade441.js";const d="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 a=d;const i=class{constructor(o){t(this,o);this.segmentedButtonGroupClick=r(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:t,host:r}}){if(t){this.buttongroup=[...this.buttongroup,r]}}handleButtonClick(t){const{detail:{nativeElement:r,host:o,value:e}}=t;if(this.multiple)o.pressed=o.pressed=="true"?"false":"true";else o.pressed="true";if(!this.multiple&&o.pressed){this.buttongroup.forEach((t=>{if(t!==o){t.pressed="false"}}))}setTimeout((()=>{this.setValueFromButtons();this.segmentedButtonGroupClick.emit({host:this.host,value:this.value,button:r,buttonValue:e,pressed:o.pressed,nativeEvent:t})}),10)}watchValueHandler(t){let r=[];if(typeof t=="object")r=t;else if(typeof t=="string")r=t.split(",");this.buttongroup.forEach((t=>{t.pressed=`${r.includes(t.value)}`}))}setValueFromButtons(){let t=[];const r=Array.from(this.host.querySelectorAll("cbp-button[pressed=true]"));r.forEach((r=>{if(r.value!=undefined){t=[...t,r.value]}}));this.value=t}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}c(this.host,Object.assign({},this.sx))}componentDidLoad(){this.buttongroup.forEach((t=>{if(t.pressed!=="true"){t.pressed="false"}}));if(this.value!=undefined)this.watchValueHandler(this.value);else this.setValueFromButtons()}render(){return o(e,{key:"33ed25f4dae9f402b19e1e2e47e489d75a73d6a8",role:"group","aria-label":this.accessibilityText},o("slot",{key:"f1af153dd005da9ee9b6e01924e6d30ede6d8f13"}),this.name&&o("input",{key:"4aa28bfb2ef958db0bf4490d2b7d7ff2b8b20862",type:"hidden",name:this.name,value:this.value}))}get host(){return b(this)}static get watchers(){return{value:["watchValueHandler"]}}};i.style=a;export{i as cbp_segmented_button_group};
//# sourceMappingURL=p-2692c782.entry.js.map