@postnord/web-components/postnord-web-components/p-7aea3de5.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as a,r as n,g as t,h as e,a as p}from"./p-XKg-ydzH.js";import{c as i,g as o}from"./p-C_nYl55V.js";const c=class{constructor(a){n(this,a)}get hostElement(){return t(this)}icon="";small=!1;color="gray900";handleColor(){this.hostElement.style.setProperty("--pn-icon-color",i[this.color]||o)}componentWillLoad(){this.handleColor()}render(){return e(p,{key:"f4d252ce71c0e0c83d352447bdd0c195de49196f"},e("span",{key:"adc6e3dd5d4d45ed9a154f07bd3e3fce8dbf6981",role:"presentation",class:"pn-icon","data-small":this.small,innerHTML:this.icon}))}static get watchers(){return{color:[{handleColor:0}]}}};c.style=`${a("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${a("pn-icon")} .pn-icon{margin:0}${a("pn-icon")} .pn-icon svg{display:block;height:1.5em;width:1.5em}${a("pn-icon")} .pn-icon svg>circle,${a("pn-icon")} .pn-icon svg>path{fill:var(--pn-icon-color);transition-property:fill, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${a("pn-icon")} .pn-icon svg>circle,${a("pn-icon")} .pn-icon svg>path{transition-duration:0s;transition-delay:0s}}${a("pn-icon")} .pn-icon[data-small] svg{height:1em;width:1em}`;const r=class{constructor(a){n(this,a)}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)))}};r.style=`${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{}`;export{c as pn_icon,r as pn_tag}