/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { c as colors, g as gray900 } from './colors-C_nYl55V.js';

const pnIconCss = () => `${transformTag("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${transformTag("pn-icon")}[small] svg{height:1em;width:1em}${transformTag("pn-icon")} svg{display:block;height:1.5em;width:1.5em}${transformTag("pn-icon")} .pn-icon-svg>circle,${transformTag("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){${transformTag("pn-icon")} .pn-icon-svg>circle,${transformTag("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}`;

const PnIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get hostElement() { return getElement(this); }
    /**
     * The SVG content of the icon you want to use.
     *
     * Flags cannot be colored.
     *
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
     **/
    icon = '';
    /** Make the icon small (16 instead of 24px). */
    small = false;
    /**
     * Color the icon with one of the follwing colors from our library.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
     **/
    color = 'gray900';
    handleColor() {
        const color = colors[this.color] || gray900;
        this.hostElement.style.setProperty('--pn-icon-color', color);
    }
    componentWillLoad() {
        this.handleColor();
    }
    render() {
        return h(Host, { key: 'f63d0b1e54fe91f9fcf33811f6694e604e09929d', role: "presentation", class: "pn-icon", innerHTML: this.icon });
    }
    static get watchers() { return {
        "color": [{
                "handleColor": 0
            }]
    }; }
};
PnIcon.style = pnIconCss();

const pnTagCss = () => `${transformTag("pn-tag")}{display:inline-block}${transformTag("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}${transformTag("pn-tag")} .pn-tag[data-icon]{padding-left:0.75em}${transformTag("pn-tag")} .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}${transformTag("pn-tag")} .pn-tag[data-dark]{background-color:#8eddf9}${transformTag("pn-tag")} .pn-tag ${transformTag("pn-icon")} .pn-icon-svg path{fill:#0d234b}${transformTag("pn-tag")} .pn-tag-label{line-height:1.5em;font-weight:400}${transformTag("pn-tag")} .pn-tag{}${transformTag("pn-tag")} .pn-tag[data-xsmall]{padding:0 0.5em}${transformTag("pn-tag")} .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}${transformTag("pn-tag")} .pn-tag{}${transformTag("pn-tag")} .pn-tag[data-small]{padding:0.125em 0.5em}${transformTag("pn-tag")} .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}${transformTag("pn-tag")} .pn-tag[data-small][data-icon]{padding-left:0.5em}${transformTag("pn-tag")} .pn-tag{}${transformTag("pn-tag")} .pn-tag[data-large]{padding:0.75em 1.25em}${transformTag("pn-tag")} .pn-tag{}${transformTag("pn-tag")} .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}${transformTag("pn-tag")} .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}${transformTag("pn-tag")} .pn-tag[data-appearance=discrete] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#2d2013}${transformTag("pn-tag")} .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}${transformTag("pn-tag")} .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}${transformTag("pn-tag")} .pn-tag[data-appearance=positive] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#002f24}${transformTag("pn-tag")} .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}${transformTag("pn-tag")} .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}${transformTag("pn-tag")} .pn-tag[data-appearance=warning] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#99290a}${transformTag("pn-tag")} .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}${transformTag("pn-tag")} .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}${transformTag("pn-tag")} .pn-tag[data-appearance=error] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#a70707}${transformTag("pn-tag")} .pn-tag{}`;

const PnTag = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    /** The label of the tag. */
    label;
    /**
     * Select icon from out `pn-design-assets` list. Works with any SVG content.
     *
     * **Please note**: Can not be used with the `xsmall` prop due to the small size.
     *
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.}
     */
    icon;
    /** Set tag appearance: `discrete`, `positive`, `warning` & `error`. @category Visual */
    appearance = '';
    /**
     * Set darker background-color on the tag.
     *
     * This is intended for better tag visibility on colored background.
     *
     * @category Visual
     * @deprecated Will be removed in v8.0.0
     */
    dark = false;
    /** Set larger tag. @category Size */
    large = false;
    /** Set smaller tag. @category Size */
    small = false;
    /** Set extra small tag. @since v7.11.0 @category Size */
    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 (h(Host, { key: '25baf496ed00dccf72f5eb7cb8f8623814c67452' }, h("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() && h("pn-icon", { key: '64f9df4e0906c8897045a08edce51f8015a1be56', icon: this.icon }), h("span", { key: 'a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25', class: "pn-tag-label" }, this.label))));
    }
};
PnTag.style = pnTagCss();

export { PnIcon as pn_icon, PnTag as pn_tag };
