@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 5.22 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as o,d as e,h as r,c}from"./p-9caf8482.js";import{s as b}from"./p-9c1b2f31.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=t(class t extends o{constructor(){super();this.__registerHost();this.segmentedButtonGroupClick=e(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:o}}){if(t){this.buttongroup=[...this.buttongroup,o]}}handleButtonClick(t){const{detail:{nativeElement:o,host:e,value:r}}=t;if(this.multiple)e.pressed=e.pressed=="true"?"false":"true";else e.pressed="true";if(!this.multiple&&e.pressed){this.buttongroup.forEach((t=>{if(t!==e){t.pressed="false"}}))}setTimeout((()=>{this.setValueFromButtons();this.segmentedButtonGroupClick.emit({host:this.host,value:this.value,button:o,buttonValue:r,pressed:e.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()}render(){return r(c,{key:"33ed25f4dae9f402b19e1e2e47e489d75a73d6a8",role:"group","aria-label":this.accessibilityText},r("slot",{key:"f1af153dd005da9ee9b6e01924e6d30ede6d8f13"}),this.name&&r("input",{key:"4aa28bfb2ef958db0bf4490d2b7d7ff2b8b20862",type:"hidden",name:this.name,value:this.value}))}get host(){return this}static get watchers(){return{value:["watchValueHandler"]}}static get style(){return a}},[4,"cbp-segmented-button-group",{name:[1],value:[1032],multiple:[4],accessibilityText:[1,"accessibility-text"],disabled:[4],sx:[8]},[[0,"componentLoad","handleComponentLoad"],[0,"buttonClick","handleButtonClick"]],{value:["watchValueHandler"]}]);function n(){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,i)}break}}))}const s=i;const l=n;export{s as CbpSegmentedButtonGroup,l as defineCustomElement};
//# sourceMappingURL=cbp-segmented-button-group.js.map