80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
|
import {
|
||
|
|
resize_observer_styles_default
|
||
|
|
} from "./chunk.42VN6SQS.js";
|
||
|
|
import {
|
||
|
|
watch
|
||
|
|
} from "./chunk.FA5RT4K4.js";
|
||
|
|
import {
|
||
|
|
ShoelaceElement,
|
||
|
|
n
|
||
|
|
} from "./chunk.SEXBCYCU.js";
|
||
|
|
import {
|
||
|
|
x
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
import {
|
||
|
|
__decorateClass
|
||
|
|
} from "./chunk.KIILAQWQ.js";
|
||
|
|
|
||
|
|
// src/components/resize-observer/resize-observer.component.ts
|
||
|
|
var SlResizeObserver = class extends ShoelaceElement {
|
||
|
|
constructor() {
|
||
|
|
super(...arguments);
|
||
|
|
this.observedElements = [];
|
||
|
|
this.disabled = false;
|
||
|
|
}
|
||
|
|
connectedCallback() {
|
||
|
|
super.connectedCallback();
|
||
|
|
this.resizeObserver = new ResizeObserver((entries) => {
|
||
|
|
this.emit("sl-resize", { detail: { entries } });
|
||
|
|
});
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.startObserver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
disconnectedCallback() {
|
||
|
|
super.disconnectedCallback();
|
||
|
|
this.stopObserver();
|
||
|
|
}
|
||
|
|
handleSlotChange() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.startObserver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
startObserver() {
|
||
|
|
const slot = this.shadowRoot.querySelector("slot");
|
||
|
|
if (slot !== null) {
|
||
|
|
const elements = slot.assignedElements({ flatten: true });
|
||
|
|
this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
|
||
|
|
this.observedElements = [];
|
||
|
|
elements.forEach((el) => {
|
||
|
|
this.resizeObserver.observe(el);
|
||
|
|
this.observedElements.push(el);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stopObserver() {
|
||
|
|
this.resizeObserver.disconnect();
|
||
|
|
}
|
||
|
|
handleDisabledChange() {
|
||
|
|
if (this.disabled) {
|
||
|
|
this.stopObserver();
|
||
|
|
} else {
|
||
|
|
this.startObserver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
return x` <slot @slotchange=${this.handleSlotChange}></slot> `;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SlResizeObserver.styles = resize_observer_styles_default;
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean, reflect: true })
|
||
|
|
], SlResizeObserver.prototype, "disabled", 2);
|
||
|
|
__decorateClass([
|
||
|
|
watch("disabled", { waitUntilFirstUpdate: true })
|
||
|
|
], SlResizeObserver.prototype, "handleDisabledChange", 1);
|
||
|
|
|
||
|
|
export {
|
||
|
|
SlResizeObserver
|
||
|
|
};
|