@postnord/web-components/esm/pn-radio-button.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, g as getElement, h, a as Host } from './index-5606614b.js';
import { u as uuidv4 } from './helpers-9dac5241.js';

const pnRadioButtonCss = "pn-radio-button{position:relative;display:inline-block}pn-radio-button .pn-radio{position:relative;display:flex;gap:0.75em}pn-radio-button .pn-radio-label{color:#2d2013}pn-radio-button .pn-radio-helpertext{color:#5e554a}pn-radio-button .pn-radio-content{margin:0;flex:1 1 100%;display:flex;flex-direction:column;justify-content:center}pn-radio-button .pn-radio-container{display:flex;gap:0.75em;padding:0}pn-radio-button .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio-outer{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio-inner{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio[data-tile] .pn-radio-outer{outline:none}pn-radio-button .pn-radio[data-invalid]{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}pn-radio-button>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}pn-radio-button>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer{border-color:#500715}pn-radio-button>input[type=radio]:disabled:hover+.pn-radio[data-invalid]{border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:hover+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]{border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}pn-radio-button>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-container>.pn-radio-outer{outline:none}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-container>.pn-radio-outer{border-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer{border-color:#a70707}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}pn-radio-button>input[type=radio]:disabled{cursor:not-allowed}pn-radio-button>input[type=radio]:disabled:active+.pn-radio{outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile],pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>pn-icon>.pn-icon-svg path,pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label,pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]>.pn-radio-content>.pn-radio-label{color:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile]>.pn-radio-container>.pn-radio-outer,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile][data-invalid]>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile][data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}";
const PnRadioButtonStyle0 = pnRadioButtonCss;

const PnRadioButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.label = '';
        this.value = undefined;
        this.name = undefined;
        this.checked = false;
        this.helpertext = undefined;
        this.radioid = this.id;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.tile = false;
        this.icon = null;
    }
    id = `pn-radio-button-${uuidv4()}`;
    idHelper = `${this.id}-helpertext`;
    get hostElement() { return getElement(this); }
    handleId() {
        this.idHelper = `${this.radioid}-helpertext`;
    }
    componentWillLoad() {
        this.handleId();
    }
    render() {
        return (h(Host, { key: 'ae520e0cfb3de29899ac40377cbb55061cd01b68' }, h("input", { key: 'd2195982014090f751f36f46687dc9c1e049e32d', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), h("div", { key: '0ebb9fa07ebb3b896e8efd3545bc7fe295c56d05', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: 'a76dd992f2b3f2afb54e1db31ee50638002d5b4a', class: "pn-radio-container" }, h("div", { key: 'e456252ee2011d1dee97aff66f6ba4c122a5ca80', class: "pn-radio-outer" }, h("div", { key: 'dd7aee8305f27590d524b63336c619d7b440a781', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: '664c532213f996509cf6abe4a9d557b21ba60464', class: "pn-radio-content" }, this.label && (h("label", { key: '090e79852aa459100d0a382778bc30b75e61fe32', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: '1785f82b7d25eff5117587777db5d02584609885', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '2902b6b37407a1b3dc7b60d47405de5ead710a57', color: "gray900", icon: this.icon }))));
    }
    static get watchers() { return {
        "radioid": ["handleId"]
    }; }
};
PnRadioButton.style = PnRadioButtonStyle0;

export { PnRadioButton as pn_radio_button };

//# sourceMappingURL=pn-radio-button.entry.js.map