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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

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

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

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

const CbpResizeObserver = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.resized = index.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 (index.h(index.Host, { key: '0dd1770de419f828b316c647f6c09c826f7f330e' }, index.h("slot", { key: '9e0a782811f68c20f0574b60647cf401c55b5cf9' })));
    }
    get host() { return index.getElement(this); }
};
CbpResizeObserver.style = CbpResizeObserverStyle0;

exports.cbp_resize_observer = CbpResizeObserver;

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