@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.41 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as o,H as t,d as r,h as e,c}from"./p-c5a784ab.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[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=o(class o extends t{constructor(){super();this.__registerHost();this.segmentedButtonGroupClick=r(this,"segmentedButtonGroupClick",7);this.buttongroup=[];this.multiple=undefined;this.accessibilityText=undefined;this.disabled=undefined;this.sx={}}handleComponentLoad({detail:{nativeElement:o,host:t}}){if(o){this.buttongroup=[...this.buttongroup,t]}}handleButtonClick({detail:{nativeElement:o,host:t,value:r}}){if(this.multiple)t.pressed=t.pressed=="true"?"false":"true";else t.pressed="true";if(!this.multiple&&t.pressed){this.buttongroup.forEach((o=>{if(o!=t){o.pressed="false"}}))}this.segmentedButtonGroupClick.emit({detail:{host:this.host,button:o,value:r,pressed:t.pressed}})}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}b(this.host,Object.assign({},this.sx))}componentDidLoad(){this.buttongroup.forEach((o=>{if(o.pressed!=="true"){o.pressed="false"}}))}render(){return e(c,{key:"9471951aca1bb4671d1800200cf2d01fc0f0b63f",role:"group","aria-label":this.accessibilityText},e("slot",{key:"e8f3012c2a726b05a10a8325ab8d99e8a3911aa6"}))}get host(){return this}static get style(){return d}},[4,"cbp-segmented-button-group",{multiple:[4],accessibilityText:[1,"accessibility-text"],disabled:[4],sx:[8]},[[0,"componentLoad","handleComponentLoad"],[0,"buttonClick","handleButtonClick"]]]);function n(){if(typeof customElements==="undefined"){return}const o=["cbp-segmented-button-group"];o.forEach((o=>{switch(o){case"cbp-segmented-button-group":if(!customElements.get(o)){customElements.define(o,i)}break}}))}const s=i;const l=n;export{s as CbpSegmentedButtonGroup,l as defineCustomElement};
//# sourceMappingURL=cbp-segmented-button-group.js.map