'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.currentWidth = window.innerWidth;
        this.breakPointClass = 'dotcom';
    }
    get hostElement() { return index.getElement(this); }
    handleViewportSizeChange(event) {
        this.currentWidth = event.target.innerWidth;
    }
    createBreakpointClass() {
        return `breakpoints--${this.breakPointClass}`;
    }
    render() {
        return (index.h(index.Host, { key: '4b63f6e7b25cc09bc329c7868d33f5bf10eadc92' }, index.h("div", { key: 'f88ffae449d2006027394f62bb75042acbc594fd', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', index.h("span", { key: 'ab91cc7229b2cb908bfee2dea6c87ee4ba8fca94', class: "reference" }, ' px'))));
    }
};
PnBreakpoints.style = PnBreakpointsStyle0;

exports.pn_breakpoints = PnBreakpoints;

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