@postnord/web-components/components/pn-tag.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as a,proxyCustomElement as n,HTMLElement as t,h as e,Host as p}from"@stencil/core/internal/client";import{d as c}from"./pn-icon2.js";const g=n(class extends t{constructor(a){super(),!1!==a&&this.__registerHost()}label;icon;appearance="";dark=!1;large=!1;small=!1;xsmall=!1;componentWillRender(){this.icon&&this.xsmall&&console.warn("pn-tag: Icon was not rendered because tag size is set to xsmall")}showIcon(){return!!this.icon&&!this.xsmall}render(){return e(p,{key:"25baf496ed00dccf72f5eb7cb8f8623814c67452"},e("div",{key:"beee7ac3dc693e1c8cb5653e2fce3af01566c4e9",class:"pn-tag","data-appearance":this.appearance,"data-icon":!!this.icon,"data-dark":this.dark,"data-small":this.small,"data-xsmall":this.xsmall,"data-large":this.large},this.showIcon()&&e("pn-icon",{key:"64f9df4e0906c8897045a08edce51f8015a1be56",icon:this.icon}),e("span",{key:"a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25",class:"pn-tag-label"},this.label)))}static get style(){return`${a("pn-tag")}{display:inline-block}${a("pn-tag")} .pn-tag{display:inline-flex;flex-direction:row;gap:0.5em;justify-content:center;align-items:center;border-radius:0.5em;padding:0.5em 1em}${a("pn-tag")} .pn-tag[data-icon]{padding-left:0.75em}${a("pn-tag")} .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}${a("pn-tag")} .pn-tag[data-dark]{background-color:#8eddf9}${a("pn-tag")} .pn-tag ${a("pn-icon")} .pn-icon-svg path{fill:#0d234b}${a("pn-tag")} .pn-tag-label{line-height:1.5em;font-weight:400}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-xsmall]{padding:0 0.5em}${a("pn-tag")} .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-small]{padding:0.125em 0.5em}${a("pn-tag")} .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}${a("pn-tag")} .pn-tag[data-small][data-icon]{padding-left:0.5em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-large]{padding:0.75em 1.25em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}${a("pn-tag")} .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}${a("pn-tag")} .pn-tag[data-appearance=discrete] ${a("pn-icon")} .pn-icon-svg path{fill:#2d2013}${a("pn-tag")} .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}${a("pn-tag")} .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}${a("pn-tag")} .pn-tag[data-appearance=positive] ${a("pn-icon")} .pn-icon-svg path{fill:#002f24}${a("pn-tag")} .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}${a("pn-tag")} .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}${a("pn-tag")} .pn-tag[data-appearance=warning] ${a("pn-icon")} .pn-icon-svg path{fill:#99290a}${a("pn-tag")} .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}${a("pn-tag")} .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}${a("pn-tag")} .pn-tag[data-appearance=error] ${a("pn-icon")} .pn-icon-svg path{fill:#a70707}${a("pn-tag")} .pn-tag{}`}},[512,"pn-tag",{label:[1],icon:[1],appearance:[1],dark:[4],large:[4],small:[4],xsmall:[4]}]),r=g,o=function(){"undefined"!=typeof customElements&&["pn-tag","pn-icon"].forEach((n=>{switch(n){case"pn-tag":customElements.get(a(a(n)))||customElements.define(a(a(n)),g);break;case"pn-icon":customElements.get(a(a(n)))||c()}}))};export{r as PnTag,o as defineCustomElement}