@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 5.3 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as o,d as r,h as e,c}from"./p-e7f1ba21.js";import{s as b}from"./p-9c1b2f31.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 i=a;const d=t(class t extends o{constructor(){super();this.__registerHost();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:o}}){if(t){this.buttongroup=[...this.buttongroup,o]}}handleButtonClick(t){const{detail:{nativeElement:o,host:r,value:e}}=t;if(this.multiple)r.pressed=r.pressed=="true"?"false":"true";else r.pressed="true";if(!this.multiple&&r.pressed){this.buttongroup.forEach((t=>{if(t!==r){t.pressed="false"}}))}setTimeout((()=>{this.setValueFromButtons();this.segmentedButtonGroupClick.emit({host:this.host,value:this.value,button:o,buttonValue:e,pressed:r.pressed,nativeEvent:t})}),10)}watchValueHandler(t){let o=[];if(typeof t=="object")o=t;else if(typeof t=="string")o=t.split(",");this.buttongroup.forEach((t=>{t.pressed=`${o.includes(t.value)}`}))}setValueFromButtons(){let t=[];const o=Array.from(this.host.querySelectorAll("cbp-button[pressed=true]"));o.forEach((o=>{if(o.value!=undefined){t=[...t,o.value]}}));this.value=t}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}b(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 e(c,{key:"44544f757ebeaa8cc890ad638e81f5f20b515f37",role:"group","aria-label":this.accessibilityText},e("slot",{key:"95715ce36a8df0b407d47fc376616f94821b3479"}),this.name&&e("input",{key:"254ad6188844553d38d9da0a43f5468d99b81f25",type:"hidden",name:this.name,value:this.value}))}get host(){return this}static get watchers(){return{value:["watchValueHandler"]}}static get style(){return i}},[4,"cbp-segmented-button-group",{name:[1],value:[1032],multiple:[4],accessibilityText:[1,"accessibility-text"],disabled:[4],sx:[8],reset:[64]},[[0,"componentLoad","handleComponentLoad"],[0,"buttonClick","handleButtonClick"]],{value:["watchValueHandler"]}]);function s(){if(typeof customElements==="undefined"){return}const t=["cbp-segmented-button-group"];t.forEach((t=>{switch(t){case"cbp-segmented-button-group":if(!customElements.get(t)){customElements.define(t,d)}break}}))}const n=d;const l=s;export{n as CbpSegmentedButtonGroup,l as defineCustomElement};
//# sourceMappingURL=cbp-segmented-button-group.js.map