@window-splitter/web-component 1.0.1

package/dist/esm/index.d.ts

@@ -0,0 +1,77 @@
+import { SendFn, GroupMachineContextValue, Unit, OnResizeCallback } from "@window-splitter/state";
+import { LitElement, PropertyValues } from "lit";
+import { MoveEvents, SharedPanelProps } from "@window-splitter/interface";
+export declare class PanelGroup extends LitElement {
+    private observer;
+    private cleanupChildrenObserver;
+    private groupId;
+    private context;
+    private send;
+    private isPrerender;
+    private state;
+    constructor();
+    getId(): string;
+    getPixelSizes(): number[];
+    getPercentageSizes(): number[];
+    getTemplate(): string;
+    getState(): "idle" | "dragging";
+    setSizes(updates: Unit[]): void;
+    private measureSize;
+    private measureChildren;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare class Panel extends LitElement {
+    static observedContexts: string[];
+    onCollapseChange?: (newCollapsed: boolean, el: Panel) => void;
+    onResize?: OnResizeCallback;
+    collapseAnimation?: SharedPanelProps<boolean>["collapseAnimation"];
+    collapsed?: boolean;
+    min?: string;
+    max?: string;
+    default?: string;
+    collapsible?: string;
+    defaultCollapsed?: string;
+    collapsedSize?: string;
+    isStaticAtRest?: string;
+    context: GroupMachineContextValue;
+    send: SendFn;
+    isPrerender: boolean;
+    id: string;
+    constructor();
+    collapse(): void;
+    isCollapsed(): boolean;
+    expand(): void;
+    isExpanded(): boolean;
+    getPixelSize(): number;
+    getPercentageSize(): number;
+    setSize(size: Unit): void;
+    private initPanel;
+    private getPanelData;
+    private getAttributes;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare class PanelResizer extends LitElement {
+    static observedContexts: string[];
+    onDragStart?: () => void;
+    onDrag?: (e: Parameters<NonNullable<MoveEvents["onMove"]>>[0]) => void;
+    onDragEnd?: () => void;
+    context: GroupMachineContextValue;
+    send: SendFn;
+    isPrerender: boolean;
+    size?: string;
+    disabled?: boolean;
+    constructor();
+    private initPanelResizer;
+    private getHandleData;
+    private getAttributes;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,MAAM,EACN,wBAAwB,EACxB,IAAI,EAQJ,gBAAgB,EASjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvD,OAAO,EAIL,UAAU,EACV,gBAAgB,EACjB,MAAM,4BAA4B,CAAC;AAuCpC,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,uBAAuB,CAAa;IAC5C,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,IAAI,CAAS;IAErB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,KAAK,CAAqB;;IAyD3B,KAAK;IAIL,aAAa;IAIb,kBAAkB;IAIlB,WAAW;IAOX,QAAQ;IAIR,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE;IAe/B,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,eAAe;IAyCvB,YAAY;IAYZ,oBAAoB;IAMpB,MAAM;CAYP;AAED,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,gBAAgB,WAAY;IAE5B,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC;IAG1E,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAIjB,OAAO,EAAE,wBAAwB,CAAC;IAIlC,IAAI,EAAE,MAAM,CAAC;IAIb,WAAW,UAAQ;IAE1B,EAAE,EAAE,MAAM,CAAC;;IAUJ,QAAQ;IAKR,WAAW;IAMX,MAAM;IAKN,UAAU;IAMV,YAAY;IAIZ,iBAAiB;IAIjB,OAAO,CAAC,IAAI,EAAE,IAAI;IAIzB,OAAO,CAAC,SAAS;IAqBjB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAqBrB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgChE,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAyCzC,MAAM;CAGP;AAED,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,gBAAgB,WAAY;IAE5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAIvB,OAAO,EAAE,wBAAwB,CAAC;IAGlC,IAAI,EAAE,MAAM,CAAC;IAGb,WAAW,UAAQ;IAG1B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,QAAQ,CAAC,EAAE,OAAO,CAAC;;IAUnB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,aAAa;IAyCrB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAqEhE,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAczC,oBAAoB,IAAI,IAAI;IAM5B,MAAM;CAGP"}

package/dist/esm/index.js

@@ -0,0 +1,527 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { groupMachine, initializePanel, initializePanelHandleData, buildTemplate, getCursor, isPanelData, getGroupSize, prepareSnapshot, getCollapsiblePanelForHandleId, getPanelPixelSize, getPanelPercentageSize, getPanelGroupPixelSizes, getPanelGroupPercentageSizes, prepareItems, haveConstraintsChangedForPanel, haveConstraintsChangedForPanelHandle, } from "@window-splitter/state";
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { getPanelDomAttributes, getPanelResizerDomAttributes, move, } from "@window-splitter/interface";
+import { consume, createContext, provide } from "@lit/context";
+const isPrerenderContext = createContext("isPrerender");
+const sendContext = createContext("send");
+const contextContext = createContext("context");
+const stateContext = createContext("state");
+let _id = 0;
+const getNextId = () => {
+    _id++;
+    return `${_id}`;
+};
+function updateAttributes(element, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+attributes) {
+    for (const attr of Object.keys(attributes)) {
+        if (attr === "style") {
+            for (const style of Object.keys(attributes[attr])) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                element.style[style] = attributes[attr][style];
+            }
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            element.setAttribute(attr, attributes[attr]);
+        }
+    }
+}
+function isBooleanPropValue(value) {
+    if (value === "true" || value === "")
+        return true;
+    if (value === "false")
+        return false;
+    return undefined;
+}
+export class PanelGroup extends LitElement {
+    constructor() {
+        super();
+        this.isPrerender = true;
+        this.observer = new ResizeObserver(() => { });
+        this.cleanupChildrenObserver = () => { };
+        const autosaveId = this.getAttribute("autosaveId");
+        const autosaveStrategy = this.getAttribute("autosaveStrategy") || "localStorage";
+        this.groupId = this.getAttribute("id") || autosaveId || getNextId();
+        let snapshot = this.getAttribute("snapshot");
+        if (!snapshot &&
+            typeof window !== "undefined" &&
+            autosaveId &&
+            autosaveStrategy === "localStorage") {
+            const localSnapshot = localStorage.getItem(autosaveId);
+            if (localSnapshot) {
+                snapshot = localSnapshot;
+            }
+        }
+        const [initialState, send, machineState] = groupMachine({
+            orientation: this.getAttribute("orientation") || "horizontal",
+            groupId: this.groupId,
+            autosaveStrategy,
+            ...(snapshot ? prepareSnapshot(JSON.parse(snapshot)) : undefined),
+        }, (s) => {
+            const oldContext = this.context;
+            this.context = s;
+            if (oldContext.items.length !== s.items.length) {
+                this.cleanupChildrenObserver?.();
+                this.measureChildren();
+            }
+            this.requestUpdate();
+        });
+        this.state = machineState;
+        this.send = send;
+        this.context = initialState;
+    }
+    getId() {
+        return this.groupId;
+    }
+    getPixelSizes() {
+        return getPanelGroupPixelSizes(this.context);
+    }
+    getPercentageSizes() {
+        return getPanelGroupPercentageSizes(this.context);
+    }
+    getTemplate() {
+        return buildTemplate({
+            ...this.context,
+            items: prepareItems(this.context),
+        });
+    }
+    getState() {
+        return this.state.current === "idle" ? "idle" : "dragging";
+    }
+    setSizes(updates) {
+        for (let index = 0; index < updates.length; index++) {
+            const item = this.context.items[index];
+            const update = updates[index];
+            if (item && isPanelData(item) && update) {
+                this.send({
+                    type: "setPanelPixelSize",
+                    panelId: item.id,
+                    size: update,
+                });
+            }
+        }
+    }
+    measureSize() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+                this.send({ type: "setSize", size: entry.contentRect });
+                this.measureChildren();
+                this.isPrerender = false;
+            }
+        });
+        this.observer.observe(this.renderRoot.querySelector("div"));
+    }
+    measureChildren() {
+        if (this.cleanupChildrenObserver) {
+            this.cleanupChildrenObserver();
+        }
+        const childrenObserver = new ResizeObserver((childrenEntries) => {
+            const childrenSizes = {};
+            for (const childEntry of childrenEntries) {
+                const child = childEntry.target;
+                const childId = child.getAttribute("data-splitter-id");
+                const childSize = childEntry.borderBoxSize[0];
+                if (childId && childSize) {
+                    childrenSizes[childId] = {
+                        width: childSize.inlineSize,
+                        height: childSize.blockSize,
+                    };
+                }
+            }
+            this.send({ type: "setActualItemsSize", childrenSizes });
+        });
+        if (!this.shadowRoot)
+            return;
+        const slot = this.shadowRoot.querySelector("slot");
+        if (!slot)
+            return;
+        const elements = slot.assignedElements();
+        for (const child of elements) {
+            childrenObserver.observe(child);
+        }
+        this.cleanupChildrenObserver = () => {
+            childrenObserver.disconnect();
+        };
+    }
+    firstUpdated() {
+        this.send({ type: "unlockGroup" });
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.measureSize();
+        this.setAttribute("data-panel-group-wrapper", "");
+        this.setAttribute("id", this.groupId);
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.cleanupChildrenObserver?.();
+        this.send({ type: "lockGroup" });
+    }
+    render() {
+        const template = this.context.orientation === "horizontal"
+            ? `grid-template-columns: ${buildTemplate(this.context)};`
+            : `grid-template-rows: ${buildTemplate(this.context)}`;
+        return html `
+      <div style="display: grid;height: 100%;${template}">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    provide({ context: contextContext })
+], PanelGroup.prototype, "context", void 0);
+__decorate([
+    provide({ context: sendContext })
+], PanelGroup.prototype, "send", void 0);
+__decorate([
+    provide({ context: isPrerenderContext })
+], PanelGroup.prototype, "isPrerender", void 0);
+__decorate([
+    provide({ context: stateContext })
+], PanelGroup.prototype, "state", void 0);
+export class Panel extends LitElement {
+    constructor() {
+        super();
+        this.isPrerender = true;
+        this.id ||= getNextId();
+        this.send = () => { };
+        this.context = {};
+    }
+    collapse() {
+        if (!this.getPanelData()?.collapsible)
+            return;
+        this.send({ type: "collapsePanel", panelId: this.id, controlled: true });
+    }
+    isCollapsed() {
+        return Boolean(this.getPanelData()?.collapsible && this.getPanelData()?.collapsed);
+    }
+    expand() {
+        if (!this.getPanelData()?.collapsible)
+            return;
+        this.send({ type: "expandPanel", panelId: this.id, controlled: true });
+    }
+    isExpanded() {
+        return Boolean(this.getPanelData()?.collapsible && !this.getPanelData()?.collapsed);
+    }
+    getPixelSize() {
+        return getPanelPixelSize(this.context, this.id);
+    }
+    getPercentageSize() {
+        return getPanelPercentageSize(this.context, this.id);
+    }
+    setSize(size) {
+        this.send({ type: "setPanelPixelSize", panelId: this.id, size });
+    }
+    initPanel() {
+        return initializePanel({
+            id: this.id,
+            min: this.getAttribute("min"),
+            max: this.getAttribute("max"),
+            collapsible: isBooleanPropValue(this.getAttribute("collapsible")),
+            collapsed: isBooleanPropValue(this.getAttribute("collapsed")),
+            collapsedSize: this.getAttribute("collapsedSize"),
+            onCollapseChange: this.onCollapseChange
+                ? { current: (e) => this.onCollapseChange?.(e, this) }
+                : undefined,
+            collapseAnimation: this.collapseAnimation,
+            onResize: this.onResize ? { current: this.onResize } : undefined,
+            defaultCollapsed: isBooleanPropValue(this.getAttribute("defaultCollapsed")),
+            default: this.getAttribute("default"),
+            isStaticAtRest: isBooleanPropValue(this.getAttribute("isStaticAtRest")),
+        });
+    }
+    getPanelData() {
+        return this.context?.items.find((item) => item.id === this.id);
+    }
+    getAttributes() {
+        return {
+            ...getPanelDomAttributes({
+                groupId: this.context.groupId,
+                id: this.id,
+                collapsible: this.getAttribute("collapsible") === "true",
+                collapsed: this.getAttribute("collapsed") === "true"
+                    ? true
+                    : this.getAttribute("collapsed") === "false"
+                        ? false
+                        : undefined,
+            }),
+            style: {
+                minWidth: 0,
+                minHeight: 0,
+                overflow: "hidden",
+            },
+        };
+    }
+    firstUpdated(_changedProperties) {
+        updateAttributes(this, this.getAttributes());
+        if (this.getPanelData()) {
+            this.send?.({
+                type: "rebindPanelCallbacks",
+                data: {
+                    id: this.id,
+                    onCollapseChange: this.onCollapseChange
+                        ? { current: (e) => this.onCollapseChange?.(e, this) }
+                        : undefined,
+                    onResize: this.onResize ? { current: this.onResize } : undefined,
+                },
+            });
+        }
+        else {
+            if (this.isPrerender) {
+                this.send({ type: "registerPanel", data: this.initPanel() });
+            }
+            else {
+                const groupElement = this.closest("window-splitter");
+                if (!groupElement)
+                    return;
+                const order = Array.from(groupElement.children).indexOf(this);
+                if (typeof order !== "number")
+                    return;
+                this.send({
+                    type: "registerDynamicPanel",
+                    data: { ...this.initPanel(), order },
+                });
+            }
+        }
+    }
+    disconnectedCallback() {
+        requestAnimationFrame(() => this.send({ type: "unregisterPanel", id: this.id }));
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("collapsed")) {
+            const isControlled = this.getPanelData()?.collapseIsControlled;
+            if (isControlled) {
+                if (this.collapsed) {
+                    this.send({
+                        type: "collapsePanel",
+                        panelId: this.id,
+                        controlled: true,
+                    });
+                }
+                else {
+                    this.send({
+                        type: "expandPanel",
+                        panelId: this.id,
+                        controlled: true,
+                    });
+                }
+            }
+        }
+        if (changedProperties.has("min") ||
+            changedProperties.has("max") ||
+            changedProperties.has("default") ||
+            changedProperties.has("collapsible") ||
+            changedProperties.has("collapsedSize") ||
+            changedProperties.has("defaultCollapsed") ||
+            changedProperties.has("isStaticAtRest")) {
+            const currentPanelData = this.getPanelData();
+            if (currentPanelData &&
+                haveConstraintsChangedForPanel(currentPanelData, this.initPanel())) {
+                this.send({ type: "updateConstraints", data: this.initPanel() });
+            }
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Panel.observedContexts = ["send"];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Panel.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "min", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "max", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "default", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "defaultCollapsed", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "collapsedSize", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Panel.prototype, "isStaticAtRest", void 0);
+__decorate([
+    consume({ context: contextContext }),
+    property({ attribute: false })
+], Panel.prototype, "context", void 0);
+__decorate([
+    consume({ context: sendContext }),
+    property({ attribute: false })
+], Panel.prototype, "send", void 0);
+__decorate([
+    consume({ context: isPrerenderContext }),
+    property({ attribute: false })
+], Panel.prototype, "isPrerender", void 0);
+export class PanelResizer extends LitElement {
+    constructor() {
+        super();
+        this.isPrerender = true;
+        this.id ||= getNextId();
+        this.send = () => { };
+        this.context = {};
+    }
+    initPanelResizer() {
+        return initializePanelHandleData({
+            id: this.id,
+            size: this.getAttribute("size") || "0px",
+        });
+    }
+    getHandleData() {
+        return this.context?.items.find((item) => item.id === this.id);
+    }
+    getAttributes() {
+        const handleIndex = this.context?.items.findIndex((item) => item.id === this.id);
+        const panelBeforeHandle = handleIndex !== undefined &&
+            isPanelData(this.context?.items[handleIndex - 1])
+            ? this.context?.items[handleIndex - 1]
+            : undefined;
+        const handleData = this.getHandleData() || this.initPanelResizer();
+        return {
+            ...getPanelResizerDomAttributes({
+                groupId: this.context?.groupId,
+                id: this.id,
+                orientation: this.context?.orientation || "horizontal",
+                isDragging: this.context?.activeDragHandleId === this.id,
+                activeDragHandleId: this.context?.activeDragHandleId,
+                disabled: this.disabled,
+                controlsId: panelBeforeHandle?.id,
+                min: panelBeforeHandle?.min,
+                max: panelBeforeHandle?.max,
+                currentValue: panelBeforeHandle?.currentValue,
+                groupSize: getGroupSize(this.context),
+            }),
+            tabIndex: this.disabled ? -1 : 0,
+            style: {
+                cursor: this.context ? getCursor(this.context) : undefined,
+                width: this.context?.orientation === "horizontal"
+                    ? `${handleData.size.value.toNumber()}px`
+                    : "100%",
+                height: this.context?.orientation === "vertical"
+                    ? `${handleData.size.value.toNumber()}px`
+                    : "100%",
+            },
+        };
+    }
+    firstUpdated(_changedProperties) {
+        const { moveProps } = move({
+            onMoveStart: () => {
+                this.send({
+                    type: "dragHandleStart",
+                    handleId: this.id,
+                });
+                this.onDragStart?.();
+                document.body.style.cursor = getCursor(this.context) || "auto";
+            },
+            onMove: (e) => {
+                this.send({
+                    type: "dragHandle",
+                    handleId: this.id,
+                    value: e,
+                });
+                this.onDrag?.(e);
+            },
+            onMoveEnd: () => {
+                this.send({ type: "dragHandleEnd", handleId: this.id });
+                this.onDragEnd?.();
+                document.body.style.cursor = "auto";
+            },
+        });
+        this.addEventListener("pointerdown", (e) => {
+            if (this.disabled)
+                return;
+            moveProps.onPointerDown(e);
+        });
+        this.addEventListener("keydown", (e) => {
+            moveProps.onKeyDown(e);
+            const collapsiblePanel = getCollapsiblePanelForHandleId(this.context, this.id);
+            if (e.key === "Enter" && collapsiblePanel) {
+                if (collapsiblePanel.collapsed) {
+                    this.send({ type: "expandPanel", panelId: collapsiblePanel.id });
+                }
+                else {
+                    this.send({ type: "collapsePanel", panelId: collapsiblePanel.id });
+                }
+            }
+        });
+        updateAttributes(this, this.getAttributes());
+        if (!this.getHandleData()) {
+            if (this.isPrerender) {
+                this.send({
+                    type: "registerPanelHandle",
+                    data: this.initPanelResizer(),
+                });
+            }
+            else {
+                const groupElement = this.closest("window-splitter");
+                if (!groupElement)
+                    return;
+                const order = Array.from(groupElement.children).indexOf(this);
+                if (typeof order !== "number")
+                    return;
+                this.send({
+                    type: "registerPanelHandle",
+                    data: { ...this.initPanelResizer(), order },
+                });
+            }
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("size")) {
+            const currentHandleData = this.getHandleData();
+            if (currentHandleData &&
+                haveConstraintsChangedForPanelHandle(currentHandleData, this.initPanelResizer())) {
+                this.send({ type: "updateConstraints", data: this.initPanelResizer() });
+            }
+        }
+    }
+    disconnectedCallback() {
+        requestAnimationFrame(() => this.send({ type: "unregisterPanelHandle", id: this.id }));
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+PanelResizer.observedContexts = ["send"];
+__decorate([
+    consume({ context: contextContext }),
+    property({ attribute: false })
+], PanelResizer.prototype, "context", void 0);
+__decorate([
+    consume({ context: sendContext }),
+    property({ attribute: false })
+], PanelResizer.prototype, "send", void 0);
+__decorate([
+    consume({ context: isPrerenderContext }),
+    property({ attribute: false })
+], PanelResizer.prototype, "isPrerender", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], PanelResizer.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PanelResizer.prototype, "disabled", void 0);
+//# sourceMappingURL=index.js.map