import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const pnBreakpointsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-breakpoints{width:100%}pn-breakpoints .breakpoints--dotcom{width:100%;background-color:aliceblue;text-align:center;margin-bottom:2.4rem;background-color:aliceblue}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"less than 321\"}@media screen and (min-width: 321px){pn-breakpoints .breakpoints--dotcom{background-color:yellow}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"321 (xs)\"}}@media screen and (min-width: 576px){pn-breakpoints .breakpoints--dotcom{background-color:aqua}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"576 (sm)\"}}@media screen and (min-width: 768px){pn-breakpoints .breakpoints--dotcom{background-color:red;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"768 (md)\"}}@media screen and (min-width: 992px){pn-breakpoints .breakpoints--dotcom{background-color:green;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"992 (lg)\"}}@media screen and (min-width: 1200px){pn-breakpoints .breakpoints--dotcom{background-color:blue;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1200 (xl)\"}}@media screen and (min-width: 1640px){pn-breakpoints .breakpoints--dotcom{background-color:pink}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1640 (xxl)\"}}@media screen and (min-width: 1920px){pn-breakpoints .breakpoints--dotcom{background-color:orange}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1920 (fhd)\"}}";
const PnBreakpointsStyle0 = pnBreakpointsCss;

const PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class PnBreakpoints extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.currentWidth = window.innerWidth;
        this.breakPointClass = 'dotcom';
    }
    get hostElement() { return this; }
    handleViewportSizeChange(event) {
        this.currentWidth = event.target.innerWidth;
    }
    createBreakpointClass() {
        return `breakpoints--${this.breakPointClass}`;
    }
    render() {
        return (h(Host, { key: '4b63f6e7b25cc09bc329c7868d33f5bf10eadc92' }, h("div", { key: 'f88ffae449d2006027394f62bb75042acbc594fd', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: 'ab91cc7229b2cb908bfee2dea6c87ee4ba8fca94', class: "reference" }, ' px'))));
    }
    static get style() { return PnBreakpointsStyle0; }
}, [0, "pn-breakpoints", {
        "breakPointClass": [1, "break-point-class"],
        "currentWidth": [32]
    }, [[9, "resize", "handleViewportSizeChange"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-breakpoints"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-breakpoints":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnBreakpoints$1);
            }
            break;
    } });
}

const PnBreakpoints = PnBreakpoints$1;
const defineCustomElement = defineCustomElement$1;

export { PnBreakpoints, defineCustomElement };

//# sourceMappingURL=pn-breakpoints.js.map