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

var index = require('./index-CfUQZtlH.js');
var index$2 = require('./index.cjs.js');
var index$1 = require('./index-CNdVg5VI.js');

const pnCheckboxCss = () => `${index.transformTag("pn-checkbox")}{position:relative;display:inline-block}${index.transformTag("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${index.transformTag("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}${index.transformTag("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${index.transformTag("pn-checkbox")} .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${index.transformTag("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;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)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${index.transformTag("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${index.transformTag("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)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${index.transformTag("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${index.transformTag("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${index.transformTag("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${index.transformTag("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${index.transformTag("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${index.transformTag("pn-checkbox")} .pn-checkbox>${index.transformTag("pn-icon")}{margin-left:0.75em}${index.transformTag("pn-checkbox")}>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${index.transformTag("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${index.transformTag("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${index.transformTag("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${index.transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${index.transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${index.transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${index.transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${index.transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${index.transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${index.transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${index.transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${index.transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${index.transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${index.transformTag("pn-checkbox")}>input:disabled{pointer-events:none}${index.transformTag("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${index.transformTag("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${index.transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${index.transformTag("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${index.transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${index.transformTag("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${index.transformTag("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`;

const PnCheckbox = class extends index.Mixin(index$1.animateHeightFactory) {
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
    }
    id = `pn-checkbox-${index$2.uuidv4()}`;
    idHelpertext = `${this.id}-helpertext`;
    contentArea;
    get hostElement() { return index.getElement(this); }
    /** The checkbox label */
    label;
    /** This adds an optional helpertext under the label. */
    helpertext;
    /** This will be emitted on change and input events. */
    value;
    /** The name of the checkbox group. */
    name;
    /** Check the checkbox. */
    checked = false;
    /** A unique HTML ID for the checkbox. */
    checkboxid = this.id;
    /** Set the checkbox as required. @category State */
    required = false;
    /** Disable the checkbox. @category State */
    disabled = false;
    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox. @category State */
    invalid = false;
    /** Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. @category State */
    indeterminate = false;
    /**
     * Turn the checkbox into a clickable tile. A border and padding is added.
     *
     * **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
     * An exception is made when using the `tile` + `expand` props together,
     * which allows you to use interactive elements.
     *
     * @category Tile
     */
    tile = false;
    /**
     * Allow the checkbox to control the slot area "content".
     * When checked, the area is visible, when unchecked, the area is hidden.
     *
     * The prop `tile` must be used at the same time.
     * @see {@link tile}
     * @since v7.17.0
     * @category Tile
     */
    expand = false;
    /**
     * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
     * @see {@link tile}
     * @category Tile
     */
    icon = null;
    handleId() {
        this.idHelpertext = `${this.checkboxid}-helpertext`;
    }
    handleChecked() {
        if (this.displayContent()) {
            this.checked ? this.openDropdown(this.contentArea) : this.closeDropdown(this.contentArea);
        }
    }
    componentWillLoad() {
        this.handleId();
    }
    componentDidLoad() {
        if (this.displayContent() && this.checked) {
            requestAnimationFrame(() => this.openDropdown(this.contentArea));
        }
    }
    handleChange(e) {
        const { checked } = e.target;
        this.indeterminate = false;
        this.checked = checked;
    }
    isInvalid() {
        return this.invalid && !this.disabled;
    }
    displayText() {
        return this.displayLabel() || this.displayHelpertext();
    }
    displayLabel() {
        return !!this.label;
    }
    displayHelpertext() {
        return !!(this.helpertext || this.hostElement.querySelector('[slot="helpertext"]')?.textContent);
    }
    displayIcon() {
        return this.tile && !!this.icon;
    }
    displayContent() {
        return this.tile && this.expand;
    }
    render() {
        return (index.h(index.Host, { key: '52273e4f6d71183fa2360c147c5d2ed6fbb3d31a' }, index.h("input", { key: 'fba94a81a38009f36d938751c6362ed7340d68d7', type: "checkbox", id: this.checkboxid, class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.helpertext && this.idHelpertext, "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), index.h("div", { key: '850ecfd3abddccfe8b0ada1d0272dfa3155a669f', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, index.h("div", { key: '728efcdb0cd59f1af39839dd9fd1accc66f2da00', class: "pn-checkbox-outer" }, index.h("svg", { key: '55d82cc64b735706a57d301e9c8f64edc4aeebe9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: '02a30f7a2cbf5d502be29ff14945f22e89ca19c5', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), index.h("polyline", { key: '9c01a39dec7dc5d3961bffd07badf694ebdbadc1', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), index.h("p", { key: '0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48', class: "pn-checkbox-content", hidden: !this.displayText() }, index.h("label", { key: '9aeebad0076718474224594b5c17cd5e3c3590dc', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), index.h("span", { key: '1d99d825512267e4560b817f8853319b10b05d08', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, index.h("slot", { key: '981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11', name: "helpertext" })), index.h("slot", { key: '192f09f50bd3592c41e8836c70dc264edfc3e332' })), this.displayIcon() && index.h("pn-icon", { key: '4ab2aaf2819ca83f08233cac99922e5234837408', icon: this.icon, color: "gray900" }), index.h("div", { key: '6247821b031e2d57a216612b166db6622aaa2225', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, index.h("div", { key: 'd35445d61a6e9a7faca6ca349f56b36097a077d2', class: "pn-checkbox-area" }, index.h("slot", { key: '7cbcc9648ae405d6aa8729f2071c3b03a914a027', name: "content" }))))));
    }
    static get watchers() { return {
        "checkboxid": [{
                "handleId": 0
            }],
        "checked": [{
                "handleChecked": 0
            }]
    }; }
};
PnCheckbox.style = pnCheckboxCss();

exports.pn_checkbox = PnCheckbox;
