@cbpds/web-components/dist/components/cbp-chip.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 r,h as t,c as e}from"./p-9caf8482.js";import{s as i}from"./p-9c1b2f31.js";import{d as p}from"./p-4cdb3206.js";const a=":root{--cbp-chip-color-text:var(--cbp-color-text-lightest);--cbp-chip-color-text-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-hover:var(--cbp-color-text-lightest);--cbp-chip-color-text-hover-dark:var(--cbp-color-text-lightest);--cbp-chip-color-text-focus:var(--cbp-color-text-lightest);--cbp-chip-color-text-focus-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-pressed:var(--cbp-color-text-lightest);--cbp-chip-color-text-pressed-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-disabled:var(--cbp-color-interactive-disabled-light);--cbp-chip-color-text-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-chip-color-background:var(--cbp-color-interactive-secondary-dark);--cbp-chip-color-background-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-chip-color-background-hover:var(--cbp-color-interactive-secondary-darker);--cbp-chip-color-background-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-chip-color-background-focus:var(--cbp-color-interactive-focus-dark);--cbp-chip-color-background-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-chip-icon-color-background-focus:transparent;--cbp-chip-icon-color-background-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-chip-color-background-pressed:var(--cbp-color-interactive-selected-dark);--cbp-chip-color-background-pressed-dark:var(--cbp-color-interactive-selected-light);--cbp-chip-color-background-disabled:var(--cbp-color-interactive-disabled-dark);--cbp-chip-color-background-disabled-dark:var(--cbp-color-interactive-disabled-light);--cbp-chip-icon-color-outline-focus:var(--cbp-color-white);--cbp-chip-icon-color-outline-focus-dark:transparent}[data-cbp-theme=light] cbp-chip[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-chip:not([context=dark-inverts]):not([context=light-always]){--cbp-chip-color-text:var(--cbp-chip-color-text-dark);--cbp-chip-color-text-hover:var(--cbp-chip-color-text-hover-dark);--cbp-chip-color-text-focus:var(--cbp-chip-color-text-focus-dark);--cbp-chip-color-text-pressed:var(--cbp-chip-color-text-pressed-dark);--cbp-chip-color-text-disabled:var(--cbp-chip-color-text-disabled-dark);--cbp-chip-color-background:var(--cbp-chip-color-background-dark);--cbp-chip-color-background-hover:var(--cbp-chip-color-background-hover-dark);--cbp-chip-color-background-focus:var(--cbp-chip-color-background-focus-dark);--cbp-chip-icon-color-background-focus:var(--cbp-chip-icon-color-background-focus-dark);--cbp-chip-color-background-pressed:var(--cbp-chip-color-background-pressed-dark);--cbp-chip-color-background-disabled:var(--cbp-chip-color-background-disabled-dark);--cbp-chip-icon-color-outline-focus:var(--cbp-chip-icon-color-outline-focus-dark)}cbp-chip button{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:0 0 0 var(--cbp-space-3x);color:var(--cbp-chip-color-text);background-color:var(--cbp-chip-color-background);border-width:0;border-radius:var(--cbp-border-radius-pill);text-transform:uppercase;line-height:var(--cbp-space-7x);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);max-width:100%;white-space:nowrap}cbp-chip button .cbp-chip__label{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}cbp-chip button .cbp-chip__label+cbp-icon{display:flex;align-items:center;justify-content:center;min-width:var(--cbp-space-7x);min-height:var(--cbp-space-7x);border-width:0;border-radius:var(--cbp-border-radius-pill);margin-left:4px}cbp-chip button .cbp-chip__label+cbp-icon svg{transition:var(--cbp-motion-duration-shortest)}cbp-chip button :last-child{--cbp-icon-size:var(--cbp-space-3x)}cbp-chip button[aria-pressed=true]{background-color:var(--cbp-chip-color-background-pressed);color:var(--cbp-chip-color-text-pressed)}cbp-chip button[aria-pressed=true] .cbp-chip__label+cbp-icon[name=plus]>svg{transform:rotate(-135deg)}cbp-chip button:hover:not(:disabled){cursor:pointer}cbp-chip button:hover:not(:disabled) .cbp-chip__label+cbp-icon{color:var(--cbp-chip-color-text-hover);background-color:var(--cbp-chip-color-background-hover)}cbp-chip button:focus-visible{background-color:var(--cbp-chip-color-background-focus);outline:0}cbp-chip button:focus-visible>.cbp-chip__label+cbp-icon{background-color:var(--cbp-chip-icon-color-background-focus);border-color:var(--cbp-color-white);border:var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus);outline:var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);color:var(--cbp-color-text-lightest);outline-offset:-4px}cbp-chip button:disabled{font-style:italic;background-color:var(--cbp-chip-color-background-disabled);color:var(--cbp-chip-color-text-disabled)}";const b=a;const s=c(class c extends o{constructor(){super();this.__registerHost();this.chipClick=r(this,"chipClick",7);this.iconName="plus";this.name=undefined;this.value=undefined;this.pressed=false;this.disabled=undefined;this.context=undefined;this.sx={}}handleClick(c){this.ariaPressed=!this.ariaPressed;if(this.iconName=="plus"){this.button.setAttribute("aria-pressed",`${this.ariaPressed}`)}else{this.pressed=!this.pressed;this.pressed?this.icon.name="times":this.icon.name=this.iconName}this.chipClick.emit({host:this.host,name:this.name,value:this.value||this.button.innerText,active:this.ariaPressed,nativeEvent:c})}componentWillLoad(){this.ariaPressed=this.pressed?true:false;if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}i(this.host,Object.assign({},this.sx))}componentDidLoad(){if(!this.icon)this.icon=this.host.querySelector("cbp-icon");this.iconName=this.icon.name}render(){return t(e,{key:"7f7316e5ee918ce49276800ad1f15f037b410423"},t("button",{key:"8414d1273efd3ee3a9ca820e040ac6438d7dfa0e",type:"button",value:this.value,"aria-pressed":`${this.pressed}`,ref:c=>this.button=c,onClick:c=>this.handleClick(c),disabled:this.disabled},t("span",{key:"173a2a7cc71b7ae22cdbdb53d170a1012f67fcdc",class:"cbp-chip__label"},t("slot",{key:"59a35e632ddf8922e67cda10919b732772548e0e"})),this.host.querySelector("[slot=cbp-chip-icon]")?t("slot",{name:"cbp-chip-icon"}):t("cbp-icon",{name:"plus",ref:c=>this.icon=c})))}get host(){return this}static get style(){return b}},[4,"cbp-chip",{name:[513],value:[1],pressed:[4],disabled:[516],context:[513],sx:[8]}]);function l(){if(typeof customElements==="undefined"){return}const c=["cbp-chip","cbp-icon"];c.forEach((c=>{switch(c){case"cbp-chip":if(!customElements.get(c)){customElements.define(c,s)}break;case"cbp-icon":if(!customElements.get(c)){p()}break}}))}const d=s;const n=l;export{d as CbpChip,n as defineCustomElement};
//# sourceMappingURL=cbp-chip.js.map