@cbpds/web-components/dist/components/p-1ff1b82a.js

Web components for the CBP Design System.

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