@postnord/web-components
Version: 
PostNord Web Components
6 lines • 3.84 kB
JavaScript
/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as a,g as n,h as t,a as e}from"./p-C247oTEA.js";import{c as p,g as o}from"./p-C_nYl55V.js";const i="pn-icon{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}pn-icon[small] svg{height:1em;width:1em}pn-icon svg{display:block;height:1.5em;width:1.5em}pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{fill:var(--pn-icon-color);transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}";const c=class{constructor(n){a(this,n)}get hostElement(){return n(this)}icon="";small=false;color="gray900";handleColor(){const a=p[this.color]||o;this.hostElement.style.setProperty("--pn-icon-color",a)}componentWillLoad(){this.handleColor()}render(){return t(e,{key:"f63d0b1e54fe91f9fcf33811f6694e604e09929d",role:"presentation",class:"pn-icon",innerHTML:this.icon})}static get watchers(){return{color:["handleColor"]}}};c.style=i;const r="pn-tag{display:inline-block}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}pn-tag .pn-tag[data-icon]{padding-left:0.75em}pn-tag .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}pn-tag .pn-tag[data-dark]{background-color:#8eddf9}pn-tag .pn-tag pn-icon .pn-icon-svg path{fill:#0d234b}pn-tag .pn-tag-label{line-height:1.5em;font-weight:400}pn-tag .pn-tag{}pn-tag .pn-tag[data-xsmall]{padding:0 0.5em}pn-tag .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag{}pn-tag .pn-tag[data-small]{padding:0.125em 0.5em}pn-tag .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag[data-small][data-icon]{padding-left:0.5em}pn-tag .pn-tag{}pn-tag .pn-tag[data-large]{padding:0.75em 1.25em}pn-tag .pn-tag{}pn-tag .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}pn-tag .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}pn-tag .pn-tag[data-appearance=discrete] pn-icon .pn-icon-svg path{fill:#2d2013}pn-tag .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}pn-tag .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}pn-tag .pn-tag[data-appearance=positive] pn-icon .pn-icon-svg path{fill:#002f24}pn-tag .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}pn-tag .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}pn-tag .pn-tag[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#99290a}pn-tag .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}pn-tag .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}pn-tag .pn-tag[data-appearance=error] pn-icon .pn-icon-svg path{fill:#a70707}pn-tag .pn-tag{}";const g=class{constructor(n){a(this,n)}label;icon;appearance="";dark=false;large=false;small=false;xsmall=false;componentWillRender(){if(!!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 t(e,{key:"25baf496ed00dccf72f5eb7cb8f8623814c67452"},t("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()&&t("pn-icon",{key:"64f9df4e0906c8897045a08edce51f8015a1be56",icon:this.icon}),t("span",{key:"a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25",class:"pn-tag-label"},this.label)))}};g.style=r;export{c as pn_icon,g as pn_tag};
//# sourceMappingURL=p-b89526af.entry.js.map