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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as c,H as e,d as o,h as r,c as l}from"./p-9caf8482.js";import{s as t}from"./p-9c1b2f31.js";const g=':root{--cbp-toggle-color-bg:var(--cbp-color-interactive-secondary-light);--cbp-toggle-color-bg-dark:var(--cbp-color-interactive-secondary-dark);--cbp-toggle-color-bg-selected:var(--cbp-color-interactive-selected-dark);--cbp-toggle-color-bg-selected-dark:var(--cbp-color-interactive-selected-light);--cbp-toggle-circle-color:var(--cbp-color-white);--cbp-toggle-circle-color-dark:var(--cbp-color-white);--cbp-toggle-circle-color-selected:var(--cbp-color-white);--cbp-toggle-circle-color-selected-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color);--cbp-toggle-circle-color-border-dark:var(--cbp-toggle-circle-color-dark);--cbp-toggle-circle-color-border-selected:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-outline-width:var(--cbp-space-half-x);--cbp-toggle-outline-style:solid;--cbp-toggle-color-bg-hover:var(--cbp-color-interactive-secondary-dark);--cbp-toggle-color-bg-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-toggle-circle-color-selected-hover:var(--cbp-color-interactive-selected-dark);--cbp-toggle-circle-color-selected-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-toggle-circle-color-border-selected-hover:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-toggle-circle-color-border-hover:var(--cbp-color-white);--cbp-toggle-circle-color-border-hover-dark:var(--cbp-color-white);--cbp-toggle-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-toggle-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-toggle-color-outline-focus:var(--cbp-color-white);--cbp-toggle-color-outline-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-selected-focus:var(--cbp-color-white);--cbp-toggle-circle-color-selected-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-border-selected-focus:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-focus:var(--cbp-color-white);--cbp-toggle-circle-color-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-border-focus:var(--cbp-color-white);--cbp-toggle-circle-color-border-focus-dark:var(--cbp-color-black);--cbp-toggle-color-bg-disabled:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-color-bg-disabled-dark:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-circle-color-border-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-border-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-text-color:var(--cbp-color-text-darkest);--cbp-toggle-text-color-dark:var(--cbp-color-text-lightest);--cbp-toggle-control-width:3.25rem;--cbp-toggle-control-height:var(--cbp-space-7x);--cbp-toggle-circle-diameter:var(--cbp-space-4x);--cbp-toggle-circle-inset:0.375rem;--cbp-toggle-circle-border-width:var(--cbp-border-size-xl);--cbp-toggle-status-text-width:var(--cbp-space-16x);--cbp-toggle-description-text-width:min-content;--cbp-toggle-gap:var(--cbp-space-4x);--cbp-toggle-margin:0 0 var(--cbp-space-4x) 0;--cbp-toggle-custom-icon:"";--cbp-toggle-custom-icon-on:"";--cbp-toggle-custom-icon-off:"";--cbp-toggle-grid-columns:3fr var(--cbp-toggle-control-width) 1fr}[data-cbp-theme=light] cbp-toggle[context*=dark]:not([context=light-always]):not(#fakeId),[data-cbp-theme=dark] cbp-toggle:not([context=dark-inverts]):not([context=light-always]):not(#fakeId){--cbp-toggle-text-color:var(--cbp-toggle-text-color-dark);--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-dark);--cbp-toggle-color-bg-selected:var(--cbp-toggle-color-bg-selected-dark);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-dark);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-dark);--cbp-toggle-circle-color-selected:var(--cbp-toggle-circle-color-selected-dark);--cbp-toggle-circle-color-border-selected:var(--cbp-toggle-circle-color-border-selected-dark);--cbp-toggle-color-bg-hover:var(--cbp-toggle-color-bg-hover-dark);--cbp-toggle-circle-color-selected-hover:var(--cbp-toggle-circle-color-selected-hover-dark);--cbp-toggle-circle-color-border-selected-hover:var(--cbp-toggle-circle-color-border-selected-hover-dark);--cbp-toggle-circle-color-hover:var(--cbp-toggle-circle-color-hover-dark);--cbp-toggle-circle-color-border-hover:var(--cbp-toggle-circle-color-border-hover-dark);--cbp-toggle-color-bg-focus:var(--cbp-toggle-color-bg-focus-dark);--cbp-toggle-color-outline-focus:var(--cbp-toggle-color-outline-focus-dark);--cbp-toggle-circle-color-selected-focus:var(--cbp-toggle-circle-color-selected-focus-dark);--cbp-toggle-circle-color-border-selected-focus:var(--cbp-toggle-circle-color-border-selected-focus-dark);--cbp-toggle-circle-color-focus:var(--cbp-toggle-circle-color-focus-dark);--cbp-toggle-circle-color-border-focus:var(--cbp-toggle-circle-color-border-focus-dark);--cbp-toggle-color-bg-disabled:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color-disabled:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border-disabled:var(--cbp-toggle-circle-color-border-disabled-dark)}cbp-toggle{display:flex;align-items:center;margin:var(--cbp-toggle-margin);color:var(--cbp-toggle-text-color)}cbp-toggle label{display:grid;grid-template-columns:var(--cbp-toggle-grid-columns);gap:var(--cbp-toggle-gap);align-items:center;width:100%}cbp-toggle input[type=checkbox]{all:unset;appearance:none;height:var(--cbp-toggle-control-height);min-width:var(--cbp-toggle-control-width);flex-basis:var(--cbp-toggle-control-width);border-radius:var(--cbp-border-radius-pill);background-color:var(--cbp-toggle-color-bg);outline-width:0;outline-style:var(--cbp-toggle-outline-style);outline-color:var(--cbp-toggle-color-outline-focus);outline-offset:calc(-1 * var(--cbp-space-1x));--cbp-toggle-custom-icon:var(--cbp-toggle-custom-icon-off)}cbp-toggle input[type=checkbox]::before,cbp-toggle input[type=checkbox]::after{display:inline-block;margin-block-start:var(--cbp-toggle-circle-inset);height:var(--cbp-toggle-circle-diameter);width:var(--cbp-toggle-circle-diameter);transition:margin 0.2s linear}cbp-toggle input[type=checkbox]::before{content:"";background-color:var(--cbp-toggle-circle-color);border-radius:var(--cbp-border-radius-circle);border:var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-circle-color-border);margin-inline:var(--cbp-toggle-circle-inset) var(--cbp-space-1x)}cbp-toggle input[type=checkbox]::after{content:var(--cbp-toggle-custom-icon);margin-inline:var(--cbp-space-1x) var(--cbp-toggle-circle-border-width)}cbp-toggle input[type=checkbox]:hover{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-hover);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-hover);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-hover)}cbp-toggle input[type=checkbox]:focus{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-focus);--cbp-toggle-color:var(--cbp-toggle-color-outline-focus);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-focus);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-focus);outline-width:var(--cbp-toggle-outline-width)}cbp-toggle input[type=checkbox]:checked{--cbp-toggle-custom-icon:var(--cbp-toggle-custom-icon-on);--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-selected);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected)}cbp-toggle input[type=checkbox]:checked::before{border-radius:var(--cbp-border-radius-circle);background-color:var(--cbp-toggle-circle-color);border:var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-circle-color-border);margin-inline-start:calc(var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) - var(--cbp-toggle-circle-inset))}cbp-toggle input[type=checkbox]:checked::after{margin-inline:calc((var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) + var(--cbp-toggle-circle-inset)) * -1) var(--cbp-space-1x)}cbp-toggle input[type=checkbox]:checked:hover{--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected-hover);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected-hover)}cbp-toggle input[type=checkbox]:checked:focus{--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected-focus);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected-focus)}cbp-toggle span:last-child{flex-basis:var(--cbp-toggle-status-text-width);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}cbp-toggle:has(:disabled),cbp-toggle:has(:disabled):hover{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-disabled);--cbp-toggle-color-bg-dark:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-disabled);--cbp-toggle-circle-color-dark:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-disabled);--cbp-toggle-circle-color-border-dark:var(--cbp-toggle-circle-color-border-disabled-dark);--cbp-toggle-color-bg-hover:var(--cbp-toggle-color-bg-disabled);--cbp-toggle-color-bg-hover-dark:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color-hover:var(--cbp-toggle-circle-color-disabled);--cbp-toggle-circle-color-hover-dark:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border-hover:var(--cbp-toggle-circle-color-border-disabled);--cbp-toggle-circle-color-border-hover-dark:var(--cbp-toggle-circle-color-border-disabled-dark)}';const b=g;const i=c(class c extends e{constructor(){super();this.__registerHost();this.toggleClick=o(this,"toggleClick",7);this.checked=undefined;this.disabled=undefined;this.hideStatus=undefined;this.statusTextOn="On";this.statusTextOff="Off";this.name=undefined;this.value=undefined;this.context=undefined;this.sx={}}toggleEvent(c){this.checked=this.formField.checked;this.toggleClick.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")}}watchCheckedHandler(c){if(this.formField){this.formField.checked=c}}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}t(this.host,Object.assign({},this.sx));this.formField=this.host.querySelector("input[type=checkbox]");if(this.formField){this.formField.addEventListener("change",(c=>this.toggleEvent(c)))}}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 r(l,{key:"c29533eb20c682842be3716a664b15e6cc8965d4"},r("label",{key:"da1aefcf5cdda57b35f713aa2405e8a8a44e16d1"},r("slot",{key:"e536a25d4740e7ab9952abcdb3d9dafda8a8f445"}),!this.hideStatus&&r("span",{key:"8d9a9b3895d9f883b3a38fb6ad6adacd7ac6a7c8"},this.checked?this.statusTextOn:this.statusTextOff)))}get host(){return this}static get watchers(){return{disabled:["watchDisabledHandler"],checked:["watchCheckedHandler"]}}static get style(){return b}},[4,"cbp-toggle",{checked:[516],disabled:[516],hideStatus:[4,"hide-status"],statusTextOn:[1,"status-text-on"],statusTextOff:[1,"status-text-off"],name:[1],value:[1],context:[513],sx:[8]},undefined,{disabled:["watchDisabledHandler"],checked:["watchCheckedHandler"]}]);function a(){if(typeof customElements==="undefined"){return}const c=["cbp-toggle"];c.forEach((c=>{switch(c){case"cbp-toggle":if(!customElements.get(c)){customElements.define(c,i)}break}}))}const d=i;const p=a;export{d as CbpToggle,p as defineCustomElement};
//# sourceMappingURL=cbp-toggle.js.map