@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 7.55 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as o,H as c,d as r,h as e,c as t}from"./p-9caf8482.js";import{c as d}from"./p-9c1b2f31.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=o(class o extends c{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(){super();this.__registerHost();this.dropdownItemClick=r(this,"dropdownItemClick",7);this.value=undefined;this.disabled=undefined;this.current=undefined;this.itemId=d("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 e(t,{key:"da359461438a85ea9b3f19fd484298885441a93d",role:"option",id:this.itemId,onClick:o=>this.handleClick(o),"aria-selected":this.selected?"true":"false"},e("div",{key:"e6ecc12b478f136686a3c1376ae9ebf1175268cb",class:"cbp-dropdown-item-content"},e("slot",{key:"49a9ccfae4068a92c81f70cdcebff0a6f902c36e"})))}get host(){return this}static get watchers(){return{selected:["watchSelected"]}}static get style(){return p}},[4,"cbp-dropdown-item",{value:[1],disabled:[516],current:[516],itemId:[1,"item-id"],selected:[516]},undefined,{selected:["watchSelected"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["cbp-dropdown-item"];o.forEach((o=>{switch(o){case"cbp-dropdown-item":if(!customElements.get(o)){customElements.define(o,a)}break}}))}export{a as C,l as d};
//# sourceMappingURL=p-574733ec.js.map