@cbpds/web-components/dist/esm/cbp-resize-observer.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';

const cbpResizeObserverCss = "cbp-resize-observer{max-width:100%;display:block;overflow:visible}";
const CbpResizeObserverStyle0 = cbpResizeObserverCss;

const CbpResizeObserver = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.resized = createEvent(this, "resized", 7);
        this.debounce = 0;
    }
    async getCurrentSize() {
        return this.getClientRect();
    }
    getClientRect() {
        return this.host.getBoundingClientRect();
    }
    componentDidLoad() {
        this.observedEl = this.host;
        this.observer = new ResizeObserver(([{ contentRect }]) => {
            const { width, height, top, bottom, left, right, x, y } = contentRect;
            const customEvent = {
                host: this.host,
                width: width,
                height: height,
                top: top,
                bottom: bottom,
                left: left,
                right: right,
                x: x,
                y: y
            };
            this.resized.emit(customEvent);
        });
        this.observer.observe(this.observedEl);
    }
    disconnectedCallback() {
        if (this.observer) {
            this.observer.unobserve(this.observedEl);
        }
    }
    render() {
        return (h(Host, { key: '0dd1770de419f828b316c647f6c09c826f7f330e' }, h("slot", { key: '9e0a782811f68c20f0574b60647cf401c55b5cf9' })));
    }
    get host() { return getElement(this); }
};
CbpResizeObserver.style = CbpResizeObserverStyle0;

export { CbpResizeObserver as cbp_resize_observer };

//# sourceMappingURL=cbp-resize-observer.entry.js.map