@cbpds/web-components
Version:
Web components for the CBP Design System.
96 lines (95 loc) • 2.96 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
export class CbpResizeObserver {
constructor() {
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' })));
}
static get is() { return "cbp-resize-observer"; }
static get originalStyleUrls() {
return {
"$": ["cbp-resize-observer.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-resize-observer.css"]
};
}
static get properties() {
return {
"debounce": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The number of milliseconds to debounce the event emitter. (not currently working)"
},
"attribute": "debounce",
"reflect": false,
"defaultValue": "0"
}
};
}
static get events() {
return [{
"method": "resized",
"name": "resized",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the click event occurs for either a rendered button or anchor/link."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-resize-observer.js.map