@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 7.16 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as o,c,h as r,a as e,g as d}from"./p-654179c2.js";import{c as t}from"./p-93ade441.js";const b=":root{--cbp-dropdown-item-color:var(--cbp-dropdown-menu-color);--cbp-dropdown-item-color-bg:transparent;--cbp-dropdown-item-color-border:var(--cbp-color-gray-cool-50);--cbp-dropdown-item-color-dark:var(--cbp-dropdown-menu-color-dark);--cbp-dropdown-item-color-bg-dark:transparent;--cbp-dropdown-item-color-border-dark:var(--cbp-color-gray-cool-50);--cbp-dropdown-item-border-size:var(--cbp-border-size-sm);--cbp-dropdown-item-padding-block:var(--cbp-space-2x);--cbp-dropdown-item-padding-inline-start:var(--cbp-space-1x);--cbp-dropdown-item-font-style:normal;--cbp-dropdown-item-font-style-selected:italic}[data-cbp-theme=light] cbp-dropdown[context*=dark] cbp-dropdown-item,[data-cbp-theme=dark] cbp-dropdown:not([context=dark-inverts]):not([context=light-always]) cbp-dropdown-item{--cbp-dropdown-item-color:var(--cbp-dropdown-item-color-dark);--cbp-dropdown-item-color-bg:var(--cbp-dropdown-item-color-bg-dark);--cbp-dropdown-item-color-border:var(--cbp-dropdown-item-color-border-dark);--cbp-checkbox-color-label:var(--cbp-checkbox-color-label-dark)}cbp-dropdown-item{display:block;color:var(--cbp-dropdown-item-color);background:var(--cbp-dropdown-item-color-bg);font-style:var(--cbp-dropdown-item-font-style);line-height:var(--cbp-line-height-xs);outline:0;cursor:default;}cbp-dropdown-item .cbp-dropdown-item-content{margin-inline-start:var(--cbp-space-3x);padding-inline-start:var(--cbp-dropdown-item-padding-inline-start);padding-block:var(--cbp-dropdown-item-padding-block);border-block-end:var(--cbp-dropdown-item-border-size) solid var(--cbp-dropdown-item-color-border)}cbp-dropdown-item:not([hidden]):last-of-type(){border-block-end-width:0}cbp-dropdown-item[selected]{--cbp-dropdown-item-color:var(--cbp-color-text-dark);--cbp-dropdown-item-color-dark:var(--cbp-color-text-light);--cbp-dropdown-item-font-style:var(--cbp-dropdown-item-font-style-selected)}cbp-dropdown-item:hover{--cbp-dropdown-item-color:var(--cbp-color-text-lightest);--cbp-dropdown-item-color-bg:var(--cbp-color-interactive-secondary-darker);--cbp-dropdown-item-color-border:transparent;--cbp-dropdown-item-color-dark:var(--cbp-color-text-darkest);--cbp-dropdown-item-color-bg-dark:var(--cbp-color-interactive-secondary-light);--cbp-dropdown-item-color-border-dark:transparent}cbp-dropdown-item[current],cbp-dropdown-item:focus{--cbp-dropdown-item-color:var(--cbp-color-text-lightest);--cbp-dropdown-item-color-bg:var(--cbp-color-interactive-focus-dark);--cbp-dropdown-item-color-border:transparent;--cbp-dropdown-item-color-dark:var(--cbp-color-text-darkest);--cbp-dropdown-item-color-bg-dark:var(--cbp-color-interactive-focus-light);--cbp-dropdown-item-color-border-dark:transparent}cbp-dropdown-item[disabled]{font-style:italic}cbp-dropdown-item cbp-checkbox{--cbp-checkbox-min-height:var(--cbp-space-7x);--cbp-checkbox-margin:0;--cbp-checkbox-color-halo-hover:transparent;--cbp-checkbox-color-halo-focus:transparent;--cbp-checkbox-color-halo-checked-hover:transparent;--cbp-checkbox-color-halo-checked-focus:transparent;--cbp-checkbox-color-halo-hover-dark:transparent;--cbp-checkbox-color-halo-focus-dark:transparent;--cbp-checkbox-color-halo-checked-hover-dark:transparent;--cbp-checkbox-color-halo-checked-focus-dark:transparent;--cbp-checkbox-font-weight-label:var(--cbp-font-weight-regular)}cbp-dropdown-item[current] cbp-checkbox,cbp-dropdown-item:focus cbp-checkbox,cbp-dropdown-item:hover cbp-checkbox{--cbp-checkbox-color-label:var(--cbp-color-text-lightest);--cbp-checkbox-color-label-dark:var(--cbp-color-text-darkest)}cbp-dropdown-item[current] cbp-checkbox,cbp-dropdown-item:focus cbp-checkbox{--cbp-checkbox-color:var(--cbp-color-text-lightest);--cbp-checkbox-color-bg:var(--cbp-color-gray-cool-70);--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-focus-dark);--cbp-checkbox-color-border-hover:var(--cbp-checkbox-color-border-focus-dark);--cbp-checkbox-color-bg-checked:var(--cbp-checkbox-color-bg-checked-focus);--cbp-checkbox-color-border-checked:var(--cbp-checkbox-color-border-checked-focus);--cbp-checkbox-color-border-checked-hover:var(--cbp-checkbox-color-border-checked-focus);--cbp-checkbox-color-dark:var(--cbp-color-text-darkest);--cbp-checkbox-color-bg-dark:var(--cbp-color-white);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-bg-checked-dark:var(--cbp-checkbox-color-bg-checked-focus-dark);--cbp-checkbox-color-border-checked-dark:var(--cbp-checkbox-color-border-checked-focus-dark);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-checkbox-color-border-checked-focus-dark)}cbp-dropdown-item:hover:not(:focus) cbp-checkbox{--cbp-checkbox-color:var(--cbp-color-text-darkest);--cbp-checkbox-color-bg:var(--cbp-color-gray-cool-70);--cbp-checkbox-color-border:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-border-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-bg-checked:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked-hover:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-dark:var(--cbp-color-text-lightest);--cbp-checkbox-color-bg-dark:var(--cbp-color-white);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-checkbox-color-bg-checked-dark:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-dark:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-color-interactive-selected-dark)}";const p=b;const a=class{handleClick(o){const{target:c}=o;if(!this.disabled){if(c.tagName!="LABEL"){const r=this.host.querySelector(".cbp-dropdown-item-content").innerText;this.dropdownItemClick.emit({host:this.host,target:c,label:r,value:!!this.value?this.value:r,nativeEvent:o})}}}watchSelected(o){if(this.checkbox)this.checkbox.checked=o}constructor(r){o(this,r);this.dropdownItemClick=c(this,"dropdownItemClick",7);this.value=undefined;this.disabled=undefined;this.current=undefined;this.itemId=t("cbp-dropdown-item");this.selected=undefined;if(!this.host.hasAttribute("slot"))this.host.slot="cbp-dropdown-items"}componentWillLoad(){this.checkbox=this.host.querySelector("input[type=checkbox]")}componentDidLoad(){if(this.selected&&this.checkbox)this.checkbox.checked=true}render(){return r(e,{key:"da359461438a85ea9b3f19fd484298885441a93d",role:"option",id:this.itemId,onClick:o=>this.handleClick(o),"aria-selected":this.selected?"true":"false"},r("div",{key:"e6ecc12b478f136686a3c1376ae9ebf1175268cb",class:"cbp-dropdown-item-content"},r("slot",{key:"49a9ccfae4068a92c81f70cdcebff0a6f902c36e"})))}get host(){return d(this)}static get watchers(){return{selected:["watchSelected"]}}};a.style=p;export{a as cbp_dropdown_item};
//# sourceMappingURL=p-752c4f5a.entry.js.map