@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 10.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as c,c as o,h as e,a as r,g as l}from"./p-8d4a80f0.js";import{s as t}from"./p-93ade441.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-color-circle:var(--cbp-color-white);--cbp-toggle-color-circle-dark:var(--cbp-color-white);--cbp-toggle-circle-selected-color:var(--cbp-color-white);--cbp-toggle-circle-selected-color-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-color-circle-border:var(--cbp-toggle-color-circle);--cbp-toggle-color-circle-border-dark:var(--cbp-toggle-color-circle-dark);--cbp-toggle-circle-selected-border-color:var(--cbp-color-white);--cbp-toggle-circle-selected-border-color-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-outline-width:2px;--cbp-toggle-outline-style:solid;--cbp-toggle-outline-color:transparent;--cbp-toggle-outline-color-dark:transparent;--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-selected-color-hover:var(--cbp-color-interactive-selected-dark);--cbp-toggle-circle-selected-color-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-toggle-circle-selected-border-color-hover:var(--cbp-color-white);--cbp-toggle-circle-selected-border-color-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-color-circle-hover:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-color-circle-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-toggle-color-circle-border-hover:var(--cbp-color-white);--cbp-toggle-color-circle-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-outline-color-focus:var(--cbp-color-white);--cbp-toggle-outline-color-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-selected-color-focus:var(--cbp-color-white);--cbp-toggle-circle-selected-color-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-selected-border-color-focus:var(--cbp-color-white);--cbp-toggle-circle-selected-border-color-focus-dark:var(--cbp-color-black);--cbp-toggle-color-circle-focus:var(--cbp-color-white);--cbp-toggle-color-circle-focus-dark:var(--cbp-color-black);--cbp-toggle-color-circle-border-focus:var(--cbp-color-white);--cbp-toggle-color-circle-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-color-circle-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-color-circle-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-color-circle-border-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-color-circle-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:1.75rem;--cbp-toggle-circle-diameter:1rem;--cbp-toggle-circle-inset:0.375rem;--cbp-toggle-circle-border-width:0.25rem;--cbp-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}[data-cbp-theme=light] cbp-toggle[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-toggle:not([context=dark-inverts]):not([context=light-always]){--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-dark);--cbp-toggle-color-bg-selected:var(--cbp-toggle-color-bg-selected-dark);--cbp-toggle-color-circle:var(--cbp-toggle-color-circle-dark);--cbp-toggle-color-circle-border:var(--cbp-toggle-color-circle-border-dark);--cbp-toggle-circle-selected-color:var(--cbp-toggle-circle-selected-color-dark);--cbp-toggle-circle-selected-border-color:var(--cbp-toggle-circle-selected-border-color-dark);--cbp-toggle-outline-color:var(--cbp-toggle-outline-color-dark);--cbp-toggle-color-bg-hover:var(--cbp-toggle-color-bg-hover-dark);--cbp-toggle-circle-selected-color-hover:var(--cbp-toggle-circle-selected-color-hover-dark);--cbp-toggle-circle-selected-border-color-hover:var(--cbp-toggle-circle-selected-border-color-hover-dark);--cbp-toggle-color-circle-hover:var(--cbp-toggle-color-circle-hover-dark);--cbp-toggle-color-circle-border-hover:var(--cbp-toggle-color-circle-border-hover-dark);--cbp-toggle-color-bg-focus:var(--cbp-toggle-color-bg-focus-dark);--cbp-toggle-outline-color-focus:var(--cbp-toggle-outline-color-focus-dark);--cbp-toggle-circle-selected-color-focus:var(--cbp-toggle-circle-selected-color-focus-dark);--cbp-toggle-circle-selected-border-color-focus:var(--cbp-toggle-circle-selected-border-color-focus-dark);--cbp-toggle-color-circle-focus:var(--cbp-toggle-color-circle-focus-dark);--cbp-toggle-color-circle-border-focus:var(--cbp-toggle-color-circle-border-focus-dark);--cbp-toggle-color-bg-disabled:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-color-circle-disabled:var(--cbp-toggle-color-circle-disabled-dark);--cbp-toggle-color-circle-border-disabled:var(--cbp-toggle-color-circle-border-disabled-dark);--cbp-toggle-text-color:var(--cbp-toggle-text-color-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:3fr var(--cbp-toggle-control-width) 1fr;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:var(--cbp-toggle-outline-width) var(--cbp-toggle-outline-style) var(--cbp-toggle-outline-color);outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-toggle input[type=checkbox]:before{content:"";display:block;margin-top:var(--cbp-toggle-circle-inset);border-radius:var(--cbp-border-radius-circle);height:var(--cbp-toggle-circle-diameter);width:var(--cbp-toggle-circle-diameter);background-color:var(--cbp-toggle-color-circle);border:var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-color-circle-border)}cbp-toggle span:last-child{flex-basis:var(--cbp-status-text-width);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}cbp-toggle[checked] input[type=checkbox]{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-selected);--cbp-toggle-color-circle:var(--cbp-toggle-circle-selected-color);--cbp-toggle-color-circle-border:var(--cbp-toggle-circle-selected-border-color)}cbp-toggle[checked] input[type=checkbox]:before{margin-left:calc(var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) - var(--cbp-toggle-circle-inset))}cbp-toggle[checked] input[type=checkbox]:hover:not([disabled]){--cbp-toggle-color-circle:var(--cbp-toggle-circle-selected-color-hover);--cbp-toggle-color-circle-border:var(--cbp-toggle-circle-selected-border-color-hover)}cbp-toggle[checked] input[type=checkbox]:focus:not([disabled]){--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-focus);--cbp-toggle-outline-color:var(--cbp-toggle-outline-color-focus);--cbp-toggle-color-circle:var(--cbp-toggle-circle-selected-color-focus);--cbp-toggle-color-circle-border:var(--cbp-toggle-circle-selected-border-color-focus)}cbp-toggle:not([checked]) input[type=checkbox]:before{margin-left:var(--cbp-toggle-circle-inset)}cbp-toggle:not([checked]) input[type=checkbox]:hover:not([disabled]){--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-hover);--cbp-toggle-color-circle:var(--cbp-toggle-color-circle-hover);--cbp-toggle-color-circle-border:var(--cbp-toggle-color-circle-border-hover);--cbp-toggle-color-bg-dark:var(--cbp-toggle-color-bg-hover-dark);--cbp-toggle-color-circle-dark:var(--cbp-toggle-color-circle-hover-dark);--cbp-toggle-color-circle-border-dark:var(--cbp-toggle-color-circle-border-hover-dark)}cbp-toggle:not([checked]) input[type=checkbox]:focus:not([disabled]){--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-focus);--cbp-toggle-outline-color:var(--cbp-toggle-outline-color-focus);--cbp-toggle-color-bg-dark:var(--cbp-toggle-color-bg-focus-dark);--cbp-toggle-outline-color-dark:var(--cbp-toggle-outline-color-focus-dark);--cbp-toggle-color-circle:var(--cbp-toggle-color-circle-focus);--cbp-toggle-color-circle-border:var(--cbp-toggle-color-circle-border-focus)}cbp-toggle[disabled]{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-disabled);--cbp-toggle-color-bg-dark:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-color-circle:var(--cbp-toggle-color-circle-disabled);--cbp-toggle-color-circle-dark:var(--cbp-toggle-color-circle-disabled-dark);--cbp-toggle-color-circle-border:var(--cbp-toggle-color-circle-border-disabled);--cbp-toggle-color-circle-border-dark:var(--cbp-toggle-color-circle-border-disabled-dark)}cbp-toggle:focus-visible{outline:none}';const b=g;const i=class{constructor(e){c(this,e);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={}}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",(()=>this.toggleEvent()))}}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}}watchDisabledHandler(c){if(this.formField){c?this.formField.setAttribute("disabled",""):this.formField.removeAttribute("disabled")}}toggleEvent(){this.checked=this.formField.checked;this.toggleClick.emit({host:this.host,nativeElement:this.formField,value:this.formField.value,checked:this.formField.checked})}render(){return e(r,{key:"731cd595a5abff4938c2178bb4364abed0a47de0"},e("label",{key:"79b65e59299b93ed293ad6b8e40dd577cb5d864f"},e("slot",{key:"cf688712fa3b264a44bed2d16f7170103f649bb5"}),!this.hideStatus&&e("span",{key:"87575796cf2157d641db470c58de870dce87316e"},this.checked?this.statusTextOn:this.statusTextOff)))}get host(){return l(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};i.style=b;export{i as cbp_toggle};
//# sourceMappingURL=p-4e8d64a1.entry.js.map