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

PostNord Web Components

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

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

const index = require('./index-78a59ba0.js');

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:#e0f8ff;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:500}pn-tag .pn-tag[data-small]{padding:0.25em 0.75em}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:#f3f2f2;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:#dcf6e7;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:#fff1e3;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:#fdefee;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);
    }
    /** The label of the tag. */
    label;
    /** Select icon from out `pn-design-assets` list. Works with any SVG content. */
    icon;
    /** Set tag appearance: `discrete`, `positive`, `warning` & `error`. @category Visual */
    appearance = '';
    /** Set darker background-color on the tag**.<br/> This is intended for better tag visibility on colored background. @category Visual */
    dark = false;
    /** Set smaller tag. @category Size */
    small = false;
    /** Set larger tag. @category Size */
    large = false;
    render() {
        return (index.h(index.Host, { key: '12242b60264c36ed3e0f16ee4dfd285faf4b16d9' }, index.h("div", { key: '8846f33b34dade08dd7c12c12f7b949e34bc3cda', class: "pn-tag", "data-appearance": this.appearance, "data-icon": !!this.icon, "data-dark": this.dark, "data-small": this.small, "data-large": this.large }, this.icon && index.h("pn-icon", { key: '7b6f7e7bf8af212f0a3ca33f0a44cdf6c306d02f', icon: this.icon }), index.h("span", { key: 'b94e888aa9a0163031996e7802925ad3466c9fe2', class: "pn-tag-label" }, this.label))));
    }
};
PnTag.style = PnTagStyle0;

exports.pn_tag = PnTag;

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