@postnord/web-components/cjs/pn-icon_2.cjs.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ec4ed1cc.js');
const colors = require('./colors-b7314a6f.js');

const pnIconCss = "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)}";
const PnIconStyle0 = pnIconCss;

const PnIcon = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.icon = '';
        this.small = false;
        this.color = 'gray900';
    }
    get hostElement() { return index.getElement(this); }
    handleColor() {
        const color = colors.colors[this.color] || colors.gray900;
        this.hostElement.style.setProperty('--pn-icon-color', color);
    }
    componentWillLoad() {
        this.handleColor();
    }
    render() {
        return index.h(index.Host, { key: '6b379a07a1461fc01976dd837866f52a02add716', role: "presentation", class: "pn-icon", innerHTML: this.icon });
    }
    static get watchers() { return {
        "color": ["handleColor"]
    }; }
};
PnIcon.style = PnIconStyle0;

const pnTagCss = "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;background-color:rgba(142, 221, 249, 0.3);color:#0d234b;}pn-tag .pn-tag[data-icon]{padding-left:0.75em}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[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[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[data-large]{padding:0.75em 1.25em}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}";
const PnTagStyle0 = pnTagCss;

const PnTag = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.label = undefined;
        this.icon = undefined;
        this.appearance = '';
        this.dark = false;
        this.large = false;
        this.small = false;
        this.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 (index.h(index.Host, { key: 'f07d506fb9d4df01931b4ac381c424a904a90c1f' }, index.h("div", { key: '88bce171adea43125fc3de310016b245ac509407', 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() && index.h("pn-icon", { key: '11b7548ee1427d38edd5af4535ad67a4099b6ae1', icon: this.icon }), index.h("span", { key: 'b3d51d7762cb36c40eaa5824dcdf575ce2484186', class: "pn-tag-label" }, this.label))));
    }
};
PnTag.style = PnTagStyle0;

exports.pn_icon = PnIcon;
exports.pn_tag = PnTag;

//# sourceMappingURL=pn-icon_2.cjs.entry.js.map