@postnord/web-components/postnord-web-components/p-a3bd612d.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as i,r as p,c as n,h as t,a as e}from"./p-XKg-ydzH.js";import{c}from"./p-gPbnChG6.js";import{uuidv4 as a}from"./index.esm.js";const o=class{constructor(i){p(this,i),this.pnDelete=n(this,"pnDelete",7)}id=`pn-input-chip-${a()}`;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(e,{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:c})))}};o.style=`${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}`;export{o as pn_input_chip}