@cbpds/web-components/dist/components/cbp-radio.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as r,H as o,d as c,h as a,c as e}from"./p-9caf8482.js";import{c as d,s as i}from"./p-9c1b2f31.js";const l=':root{--cbp-radio-color-bg:var(--cbp-color-white);--cbp-radio-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-radio-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-radio-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-halo:transparent;--cbp-radio-color-halo-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-radio-color-halo-focus:var(--cbp-color-interactive-focus-light);--cbp-radio-color-checked:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-checked-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-border-checked:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-border-checked-hover:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-border-checked-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-halo-checked-hover:var(--cbp-color-interactive-selected-light);--cbp-radio-color-halo-checked-focus:var(--cbp-color-interactive-focus-light);--cbp-radio-color-label:var(--cbp-color-text-darkest);--cbp-radio-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-radio-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-radio-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-radio-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-radio-color-halo-dark:transparent;--cbp-radio-color-halo-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-radio-color-halo-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-checked-focus-dark:var(--cbp-color-white);--cbp-radio-color-border-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-border-checked-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-border-checked-focus-dark:var(--cbp-color-white);--cbp-radio-color-halo-checked-hover-dark:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-halo-checked-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-label-dark:var(--cbp-color-text-lightest);--cbp-radio-min-height:var(--cbp-space-11x);--cbp-radio-margin:0 0 var(--cbp-space-1x) 0;--cbp-radio-font-weight-label:var(--cbp-font-weight-bold)}[data-cbp-theme=light] cbp-radio[context*=dark],[data-cbp-theme=dark] cbp-radio:not([context=dark-inverts]):not([context=light-always]){--cbp-radio-color-bg:var(--cbp-radio-color-bg-dark);--cbp-radio-color-border:var(--cbp-radio-color-border-dark);--cbp-radio-color-border-hover:var(--cbp-radio-color-border-hover-dark);--cbp-radio-color-border-focus:var(--cbp-radio-color-border-focus-dark);--cbp-radio-color-halo:var(--cbp-radio-color-halo-dark);--cbp-radio-color-halo-hover:var(--cbp-radio-color-halo-hover-dark);--cbp-radio-color-halo-focus:var(--cbp-radio-color-halo-focus-dark);--cbp-radio-color-checked:var(--cbp-radio-color-checked-dark);--cbp-radio-color-checked-focus:var(--cbp-radio-color-checked-focus-dark);--cbp-radio-color-bg-checked-focus:var(--cbp-radio-color-bg-checked-focus-dark);--cbp-radio-color-border-checked:var(--cbp-radio-color-border-checked-dark);--cbp-radio-color-border-checked-hover:var(--cbp-radio-color-border-checked-hover-dark);--cbp-radio-color-border-checked-focus:var(--cbp-radio-color-border-checked-focus-dark);--cbp-radio-color-halo-checked-hover:var(--cbp-radio-color-halo-checked-hover-dark);--cbp-radio-color-halo-checked-focus:var(--cbp-radio-color-halo-checked-focus-dark);--cbp-radio-color-label:var(--cbp-radio-color-label-dark)}cbp-radio{display:block;margin:var(--cbp-radio-margin);position:relative}cbp-radio label{display:grid;grid-template-columns:var(--cbp-space-7x) 1fr;align-items:center;gap:var(--cbp-space-2x);min-height:var(--cbp-radio-min-height);font-weight:var(--cbp-radio-font-weight-label);color:var(--cbp-radio-color-label)}cbp-radio input[type=radio]{appearance:none;display:grid;place-content:center;background-color:var(--cbp-radio-color-bg);min-height:unset;height:var(--cbp-space-7x);width:var(--cbp-space-7x);margin:0;border-color:var(--cbp-radio-color-border);border-style:solid;border-width:var(--cbp-border-size-md);border-radius:var(--cbp-border-radius-circle);outline:0;box-shadow:0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-radio-color-halo);clip-path:circle(80%)}cbp-radio input[type=radio]::before{content:"";overflow:hidden;height:var(--cbp-space-4x);width:var(--cbp-space-4x);transform:scale(0);background-color:var(--cbp-radio-color-checked);border-radius:var(--cbp-border-radius-circle)}cbp-radio input[type=radio]:hover{--cbp-radio-color-border:var(--cbp-radio-color-border-hover);--cbp-radio-color-halo:var(--cbp-radio-color-halo-hover)}cbp-radio input[type=radio]:focus{--cbp-radio-color-border:var(--cbp-radio-color-border-focus);--cbp-radio-color-halo:var(--cbp-radio-color-halo-focus)}cbp-radio input[type=radio]:checked{--cbp-radio-color-border:var(--cbp-radio-color-border-checked)}cbp-radio input[type=radio]:checked:hover{--cbp-radio-color-border:var(--cbp-radio-color-border-checked-hover);--cbp-radio-color-halo:var(--cbp-radio-color-halo-checked-hover)}cbp-radio input[type=radio]:checked:focus{--cbp-radio-color-checked:var(--cbp-radio-color-checked-focus);--cbp-radio-color-border:var(--cbp-radio-color-border-checked-focus);--cbp-radio-color-halo:var(--cbp-radio-color-halo-checked-focus)}cbp-radio input[type=radio]:checked::before{transform:scale(1);transition:all var(--cbp-motion-duration-shortest) ease-in-out}cbp-radio[disabled],cbp-radio:has(*:disabled){cursor:not-allowed}cbp-radio[disabled] label,cbp-radio:has(*:disabled) label{font-style:italic;cursor:not-allowed}cbp-radio[disabled],cbp-radio:has(*:disabled){--cbp-radio-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-hover:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-bg-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-checked-hover:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-halo-hover:transparent;--cbp-radio-color-halo-checked-hover:transparent;--cbp-radio-color-label:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-bg-dark:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-bg-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-checked-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-halo-hover-dark:transparent;--cbp-radio-color-halo-checked-hover-dark:transparent;--cbp-radio-color-label-dark:var(--cbp-color-interactive-disabled-light)}';const b=l;const t=r(class r extends o{constructor(){super();this.__registerHost();this.stateChanged=c(this,"stateChanged",7);this.name=undefined;this.value=undefined;this.fieldId=d("cbp-radio");this.checked=undefined;this.disabled=undefined;this.context=undefined;this.sx={}}handleChange(r){this.checked=this.formField.checked;this.stateChanged.emit({host:this.host,nativeElement:this.formField,value:this.formField.value,checked:this.formField.checked,nativeEvent:r})}watchDisabledHandler(r){if(this.formField){r?this.formField.setAttribute("disabled",""):this.formField.removeAttribute("disabled")}}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}i(this.host,Object.assign({},this.sx));this.formField=this.host.querySelector("input[type=radio]");if(this.formField){const r=this.formField.getAttribute("id");r?this.fieldId=r:this.formField.setAttribute("id",this.fieldId);this.formField.addEventListener("change",(r=>this.handleChange(r)))}}componentDidLoad(){if(!!this.formField){if(this.checked)this.formField.checked=this.checked;if(this.disabled)this.formField.setAttribute("disabled","");if(this.name)this.formField.name=this.name;if(this.value)this.formField.value=this.value}}render(){return a(e,{key:"cfce61c722739114fcaf764acdf47ae120e74858"},a("label",{key:"f4e650d7b9d5d9025bcc1250754b88e81bb599ac",htmlFor:this.fieldId},a("slot",{key:"7df14637c3135ad257baec2d2cf4486f2486fb06"})))}get host(){return this}static get watchers(){return{disabled:["watchDisabledHandler"]}}static get style(){return b}},[4,"cbp-radio",{name:[1],value:[1],fieldId:[1025,"field-id"],checked:[4],disabled:[4],context:[513],sx:[8]},undefined,{disabled:["watchDisabledHandler"]}]);function p(){if(typeof customElements==="undefined"){return}const r=["cbp-radio"];r.forEach((r=>{switch(r){case"cbp-radio":if(!customElements.get(r)){customElements.define(r,t)}break}}))}const h=t;const s=p;export{h as CbpRadio,s as defineCustomElement};
//# sourceMappingURL=cbp-radio.js.map