@postnord/web-components/esm/pn-checkbox.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-88f72b54.js';

const pnCheckboxCss = "pn-checkbox{position:relative;display:inline-block}pn-checkbox .pn-checkbox{position:relative;display:flex;gap:0.75em}pn-checkbox .pn-checkbox-label{color:#2d2013}pn-checkbox .pn-checkbox-helpertext{color:#5e554a}pn-checkbox .pn-checkbox-content{display:flex;flex-direction:column;font-weight:400;line-height:1.5;flex:1;margin:0}pn-checkbox .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;cursor:pointer;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-checkbox .pn-checkbox-outer svg{width:1.25em;fill:none}pn-checkbox .pn-checkbox-outer svg polyline{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition:stroke-dashoffset 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s}pn-checkbox .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-checkbox .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}pn-checkbox .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}pn-checkbox>input{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-checkbox>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}pn-checkbox>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-indeterminate-path{stroke-dashoffset:23}pn-checkbox>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-checkmark-path{stroke-dashoffset:23}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-indeterminate-path{stroke-dashoffset:0}pn-checkbox>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:disabled{cursor:not-allowed}pn-checkbox>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile]{border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile]>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer,pn-checkbox>input:disabled:checked:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#969087;border-color:#969087}pn-checkbox>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:indeterminate:disabled:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}";
const PnCheckboxStyle0 = pnCheckboxCss;

const PnCheckbox = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.label = undefined;
        this.value = undefined;
        this.name = undefined;
        this.checked = false;
        this.helpertext = undefined;
        this.checkboxid = this.id;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.indeterminate = false;
        this.tile = false;
        this.icon = null;
    }
    id = `pn-checkbox-${uuidv4()}`;
    idHelpertext = `${this.id}-helpertext`;
    get hostElement() { return getElement(this); }
    handleId() {
        this.idHelpertext = `${this.checkboxid}-helpertext`;
    }
    handlechange() {
        this.indeterminate = false;
    }
    componentWillLoad() {
        this.handleId();
    }
    render() {
        return (h(Host, { key: '82fd05eac2c3b7032222bc666436b2cb75f0b698' }, h("input", { key: '4ff9c8fbe357e42997901325ebc78c4e0fc643e7', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: 'f9d25890a66f6e45fad701f491d245b1ddbb2f76', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '1e1bb430eb787e0936ec591c960020e5355b1512', class: "pn-checkbox-outer" }, h("svg", { key: '88b8198cbed4c7bdbc715665b6816e6480c9e3cc', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '36d57c92af17db48b068bc1da5a0adc8e34b8a1f', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '350c7a6e7937e6ead3fb4b4728ba11c82bc39115', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: '3854e9296bcca7d347697442a9d927afea659b8b', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '231f5f054c2039cf1d10d44c25f4131862fcbe8d', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: '0641a9caee84d5da2ecc17cac501ff4c8cc0bd6a', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '0ddcebee9d338136b43df1ef2afd292593898ea3', icon: this.icon, color: "gray900" }))));
    }
    static get watchers() { return {
        "checkboxid": ["handleId"]
    }; }
};
PnCheckbox.style = PnCheckboxStyle0;

export { PnCheckbox as pn_checkbox };

//# sourceMappingURL=pn-checkbox.entry.js.map