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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-icon2.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)}pn-radio-button .pn-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}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)}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$1 = /*@__PURE__*/ proxyCustomElement(class PnRadioButton extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        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 this; }
    handleId() {
        this.idHelper = `${this.radioid}-helpertext`;
    }
    componentWillLoad() {
        this.handleId();
    }
    render() {
        return (h(Host, { key: '68e3b652705f9abb8f235a95d10744d3e89092e8' }, h("input", { key: '47b698cae8463a65910771c226a8b70f7bb7dce1', 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: 'bce9d6324e9715a126cacc343c086dae45d3c983', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: 'ccb27713de4efc025a6f565a85b6dfd1153d93d4', class: "pn-radio-container" }, h("div", { key: '1522b327478147860d22ca792cfaf188338ececd', class: "pn-radio-outer" }, h("div", { key: '4c90dac7a275a6836cc20ed79f3e7ce38e4271c2', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: 'f6dbf0ff2e1fecc12d6bd48f342fecf66fcf8bb6', class: "pn-radio-content" }, this.label && (h("label", { key: '2ec84da175f2f32c0a659e4b887c629a62f0314f', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: 'c1b5ab3bd22314ecea520e7beadf956a2e74b6f2', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '7a6a9591942fbb1b1028f41b95c0d1d16d0b25ec', color: "gray900", icon: this.icon }))));
    }
    static get watchers() { return {
        "radioid": ["handleId"]
    }; }
    static get style() { return PnRadioButtonStyle0; }
}, [0, "pn-radio-button", {
        "label": [1],
        "value": [513],
        "name": [1],
        "checked": [4],
        "helpertext": [1],
        "radioid": [1],
        "disabled": [4],
        "required": [4],
        "invalid": [4],
        "tile": [4],
        "icon": [1]
    }, undefined, {
        "radioid": ["handleId"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-radio-button", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-radio-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnRadioButton$1);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnRadioButton = PnRadioButton$1;
const defineCustomElement = defineCustomElement$1;

export { PnRadioButton, defineCustomElement };

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