@postnord/web-components/components/pn-input-chip.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as i,proxyCustomElement as n,HTMLElement as p,createEvent as e,h as t,Host as c}from"@stencil/core/internal/client";import{c as a}from"./close_small.js";import{u as o}from"./helpers.js";import{d as l}from"./pn-icon2.js";const h=n(class extends p{constructor(i){super(),!1!==i&&this.__registerHost(),this.pnDelete=e(this,"pnDelete",7)}id="pn-input-chip-"+o();label;value;icon;small=!1;large=!1;disabled=!1;pnDelete;pnId;handleDelete=()=>{this.disabled||this.pnDelete.emit({label:this.label,value:this.value})};getId(){return this.pnId||this.id}render(){return t(c,{key:"38bf6d618ac176e63fc2da44b20aa45b744c3ff8"},t("button",{key:"43a8fa2b75eedefef49ce8881c72e86cf1323486",type:"button",class:"pn-input-chip",id:this.getId(),"data-icon":!!this.icon,"data-small":this.small,"data-large":this.large,disabled:this.disabled,"aria-label":"Remove "+this.label,onClick:this.handleDelete},!!this.icon&&t("pn-icon",{key:"53b015eba2c0a074febc78089bcdefc9cb799ad1",class:"pn-input-chip-icon",icon:this.icon}),t("span",{key:"0baa4ef7ebe84ac5102f295c02ad3f0e08a6516e",class:"pn-input-chip-label"},this.label),!this.disabled&&t("pn-icon",{key:"320c04a05bb38411734a77c085bd536c29296423",color:"blue700",icon:a})))}static get style(){return`${i("pn-input-chip")}{display:inline-block}${i("pn-input-chip")} .pn-input-chip{position:relative;font-size:1em;font-weight:500;text-align:center;display:flex;align-items:center;gap:0.25em;padding:0.5em 0.5em 0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;cursor:pointer;transition-property:border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-input-chip")} .pn-input-chip{transition-duration:0s;transition-delay:0s}}${i("pn-input-chip")} .pn-input-chip{outline:0.2rem solid transparent;outline-offset:0.2rem}${i("pn-input-chip")} .pn-input-chip[data-icon]{padding-left:0.75em}${i("pn-input-chip")} .pn-input-chip[data-icon][data-small]{padding-left:0.5em}${i("pn-input-chip")} .pn-input-chip[data-icon][data-large]{padding-left:1em}${i("pn-input-chip")} .pn-input-chip[data-small]{padding:0.25em 0.25em 0.25em 0.75em}${i("pn-input-chip")} .pn-input-chip[data-small] .pn-input-chip-label{line-height:1.25em;font-size:0.875em}${i("pn-input-chip")} .pn-input-chip[data-large]{padding:0.6875em 0.6875em 0.6875em 1.25em}${i("pn-input-chip")} .pn-input-chip:hover{background-color:#effbff;border-color:#005d92}${i("pn-input-chip")} .pn-input-chip:hover .pn-input-chip-label{color:#005d92}${i("pn-input-chip")} .pn-input-chip:hover .pn-input-chip-icon .pn-icon-svg path{fill:#005d92}${i("pn-input-chip")} .pn-input-chip:focus-visible{outline-color:#005d92;border-color:#005d92}${i("pn-input-chip")} .pn-input-chip:active{background-color:#e0f8ff;border-color:#005d92}${i("pn-input-chip")} .pn-input-chip:active .pn-input-chip-label{color:#0d234b}${i("pn-input-chip")} .pn-input-chip:active .pn-input-chip-icon .pn-icon-svg path{fill:#0d234b}${i("pn-input-chip")} .pn-input-chip:disabled{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${i("pn-input-chip")} .pn-input-chip:disabled .pn-input-chip-label{color:#5e554a;margin-right:0.5em}${i("pn-input-chip")} .pn-input-chip:disabled .pn-input-chip-icon .pn-icon-svg path{fill:#5e554a}${i("pn-input-chip")} .pn-input-chip-icon{flex-shrink:0;width:1.5em;height:1.5em}${i("pn-input-chip")} .pn-input-chip-label{color:#005d92;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}${i("pn-input-chip")} .pn-input-chip-close{flex-shrink:0;width:1.5em;height:1.5em;display:flex;align-items:center;justify-content:center}`}},[512,"pn-input-chip",{label:[1],value:[513],icon:[1],small:[4],large:[4],disabled:[4],pnId:[1,"pn-id"]}]),r=h,s=function(){"undefined"!=typeof customElements&&["pn-input-chip","pn-icon"].forEach((n=>{switch(n){case"pn-input-chip":customElements.get(i(i(n)))||customElements.define(i(i(n)),h);break;case"pn-icon":customElements.get(i(i(n)))||l()}}))};export{r as PnInputChip,s as defineCustomElement}