@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.73 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-436f46fe.js";import{s as c}from"./p-93ade441.js";const a="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 d=a;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={}}async reset(){this.value=this.initialValue}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();this.initialValue=this.value}render(){return o(e,{key:"44544f757ebeaa8cc890ad638e81f5f20b515f37",role:"group","aria-label":this.accessibilityText},o("slot",{key:"95715ce36a8df0b407d47fc376616f94821b3479"}),this.name&&o("input",{key:"254ad6188844553d38d9da0a43f5468d99b81f25",type:"hidden",name:this.name,value:this.value}))}get host(){return b(this)}static get watchers(){return{value:["watchValueHandler"]}}};i.style=d;export{i as cbp_segmented_button_group};
//# sourceMappingURL=p-41fa634f.entry.js.map