@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 8.81 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r,c as o,h as c,a,g as e}from"./p-654179c2.js";import{c as d,s as i}from"./p-93ade441.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=class{constructor(c){r(this,c);this.stateChanged=o(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 c(a,{key:"cfce61c722739114fcaf764acdf47ae120e74858"},c("label",{key:"f4e650d7b9d5d9025bcc1250754b88e81bb599ac",htmlFor:this.fieldId},c("slot",{key:"7df14637c3135ad257baec2d2cf4486f2486fb06"})))}get host(){return e(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};t.style=b;export{t as cbp_radio};
//# sourceMappingURL=p-9d896aab.entry.js.map