@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/drag-drop/directives/drag.js

@@ -0,0 +1,522 @@
+// Ported from Angular Components (src/cdk/drag-drop/directives/drag.ts), MIT, © Google LLC.
+// Rivet: `CdkDrag` without the directive plumbing — the browser-side instance behind a `<Drag>`
+// element (drag.tsx), created on demand (directives/registry.ts) from the props the element's handler
+// captured. Deviations:
+// - inputs are the component props (plain values or accessors / signals, read when needed); a signal
+//   input that Angular re-syncs in `ngOnChanges` / its setter (`disabled`, `freeDragPosition`,
+//   `rootElementSelector`, `scale`) is synced by an effect owned by the instance;
+// - DI is the DOM: the drop container is the closest `<DropList>` element (woken), the parent drag the
+//   closest `<Drag>` element; handles, preview and placeholder templates are found below the element
+//   (`[data-rv-drag-handle]`, `<template data-rv-drag-preview|placeholder>`) instead of registering
+//   through `CDK_DRAG_PARENT`;
+// - `afterNextRender` work runs in the constructor (the element is in the document by then);
+// - outputs are `on*` callbacks; `onMoved` subscribes to the ref only while given (the public `moved`
+//   stream is the upstream lazy Observable);
+// - host classes `cdk-drag-disabled` / `cdk-drag-dragging` (+ `data-disabled` / `data-dragging`) are
+//   toggled by the instance (Angular: host bindings).
+import { createRoot, effect, untrack } from "@rivetjs/reactivity";
+import { stream } from "../../scrolling/emitter.js";
+import { coerceElement } from "../dom/coerce.js";
+import { coerceNumberProperty } from "../../coercion/index.js";
+import { directionValue, documentDirectionality } from "../../bidi/index.js";
+import { createDragRef } from "../drag-ref.js";
+import { dragDropRegistry } from "../drag-drop-registry.js";
+import { assertElementNode } from "./assertions.js";
+import { DragHandleInstance, handleElements } from "./drag-handle.js";
+import { DRAG_ATTR, PLACEHOLDER_ATTR, PREVIEW_ATTR, closestDropListElement, dragOf, drags, dropListOf, read, registered, } from "./registry.js";
+/** Element that can be moved inside a `DropList` container (Angular `CdkDrag`). */
+export class DragInstance {
+    /** The `<Drag>` element. */
+    element;
+    /** Droppable container that the draggable is a part of. */
+    dropContainer;
+    /** Reference to the underlying drag instance. */
+    _dragRef;
+    /**
+     * Emits as the user is dragging the item. Use with caution,
+     * because this event will fire for every pixel that the user has dragged.
+     * (Angular `cdkDragMoved` observable; the `onMoved` prop is its output binding.)
+     */
+    moved = stream((observer) => {
+        const subscription = this._dragRef.moved.subscribe({
+            next: (movedEvent) => observer.next({
+                source: this,
+                pointerPosition: movedEvent.pointerPosition,
+                event: movedEvent.event,
+                delta: movedEvent.delta,
+                distance: movedEvent.distance,
+            }),
+            complete: observer.complete,
+        });
+        return () => subscription.unsubscribe();
+    });
+    _inputs;
+    _config;
+    _dir;
+    _dragDropRegistry;
+    _destroyed = false;
+    _disposeSync = null;
+    _containerBeforeStarted = null;
+    _movedSubscription = null;
+    _handles = [];
+    _previewView = null;
+    _placeholderView = null;
+    constructor(element, setup = {}) {
+        this.element = element;
+        this._inputs = setup.inputs ?? {};
+        this._config = setup.config ?? null;
+        this._dir = setup.dir ?? null;
+        this._dragDropRegistry = dragDropRegistry(element.ownerDocument);
+        drags.set(element, this);
+        const config = this._config;
+        this._dragRef = createDragRef(element, {
+            dragStartThreshold: config && config.dragStartThreshold != null ? config.dragStartThreshold : 5,
+            pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ? config.pointerDirectionChangeThreshold : 5,
+            zIndex: config?.zIndex,
+        });
+        this._dragRef.data = this;
+        this._dragDropRegistry.registerDirectiveNode(element, this);
+        // Rivet: a nested `<Drag>` not created yet takes a press inside it first (see `_beforeRootPointerDown`).
+        this._dragRef._beforeRootPointerDown = (event) => {
+            const path = event.composedPath();
+            for (let i = 0; i < path.length && path[i] !== element; i++) {
+                const node = path[i];
+                if (node.nodeType !== 1 || !node.hasAttribute(DRAG_ATTR))
+                    continue;
+                if (!drags.has(node)) {
+                    const nested = dragOf(node);
+                    if (nested) {
+                        nested._beforePointerDown();
+                        nested._dragRef._pointerDownFromHost(event);
+                    }
+                }
+                return;
+            }
+        };
+        // Note that usually the container is assigned when the drop list is picks up the item, but in
+        // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
+        // where there are no items on the first change detection pass, but the items get picked up as
+        // soon as the user triggers another pass by dragging. This is a problem, because the item would
+        // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
+        // is too late since the two modes save different kinds of information. We work around it by
+        // assigning the drop container both from here and the list.
+        const containerElement = closestDropListElement(element);
+        const dropContainer = (this.dropContainer = containerElement ? dropListOf(containerElement) : null);
+        if (dropContainer) {
+            dropContainer.addItem(this);
+            // The drop container reads this so we need to sync it here.
+            this._containerBeforeStarted = dropContainer._dropListRef.beforeStarted.subscribe(() => {
+                this._dragRef.scale = this.scale;
+            });
+        }
+        this._syncInputs(this._dragRef);
+        this._handleEvents(this._dragRef);
+        // Angular `ngAfterViewInit` (`afterNextRender`).
+        this._updateRootElement();
+        this._syncHandles();
+        this._dragRef.scale = this.scale;
+        const freeDragPosition = this.freeDragPosition;
+        if (freeDragPosition) {
+            // The server rendered the same transform; let the ref own it (no stacking on top of it).
+            this._rootTransformRendered();
+            this._dragRef.setFreeDragPosition(freeDragPosition);
+        }
+        this._dragRef.disabled = this._ownDisabled;
+        this._syncReactiveInputs();
+        this._syncHostClasses();
+        registered(element);
+    }
+    /** Arbitrary data to attach to this drag instance. */
+    get data() {
+        return read(this._inputs.data);
+    }
+    /** Locks the position of the dragged element along the specified axis. */
+    get lockAxis() {
+        return read(this._inputs.lockAxis) ?? this._config?.lockAxis ?? null;
+    }
+    /** Selector of an alternate root element. */
+    get rootElementSelector() {
+        return read(this._inputs.rootElementSelector) ?? this._config?.rootElementSelector;
+    }
+    /** Element (or selector) the draggable's position is constrained to. */
+    get boundaryElement() {
+        return read(this._inputs.boundaryElement) ?? this._config?.boundaryElement;
+    }
+    /** Delay before dragging starts. */
+    get dragStartDelay() {
+        return read(this._inputs.dragStartDelay) ?? (this._config?.dragStartDelay || 0);
+    }
+    /** Position of a standalone drag item. */
+    get freeDragPosition() {
+        return read(this._inputs.freeDragPosition);
+    }
+    /** Whether starting to drag this element is disabled. */
+    get disabled() {
+        return this._ownDisabled || !!(this.dropContainer && this.dropContainer.disabled);
+    }
+    get _ownDisabled() {
+        const value = read(this._inputs.disabled);
+        return value ?? (this._config?.draggingDisabled == null ? false : this._config.draggingDisabled);
+    }
+    /** Position constraint function. */
+    get constrainPosition() {
+        return this._inputs.constrainPosition ?? this._config?.constrainPosition;
+    }
+    /** Class to be added to the preview element. */
+    get previewClass() {
+        return read(this._inputs.previewClass) ?? this._config?.previewClass;
+    }
+    /** Place into which the preview of the item will be inserted. */
+    get previewContainer() {
+        return read(this._inputs.previewContainer) ?? this._config?.previewContainer;
+    }
+    /** Scale of the drag element's parent. */
+    get scale() {
+        const value = read(this._inputs.scale);
+        return value == null ? 1 : coerceNumberProperty(value, 1);
+    }
+    /**
+     * Returns the element that is being used as a placeholder
+     * while the current element is being dragged.
+     */
+    getPlaceholderElement() {
+        return this._dragRef.getPlaceholderElement();
+    }
+    /** Returns the root draggable element. */
+    getRootElement() {
+        return this._dragRef.getRootElement();
+    }
+    /** Resets a standalone drag item to its initial position. */
+    reset() {
+        this._dragRef.reset();
+    }
+    /** Resets drag item to end of boundary element. */
+    resetToBoundary() {
+        this._dragRef.resetToBoundary();
+    }
+    /**
+     * Gets the pixel coordinates of the draggable outside of a drop container.
+     */
+    getFreeDragPosition() {
+        return this._dragRef.getFreeDragPosition();
+    }
+    /**
+     * Sets the current position in pixels the draggable outside of a drop container.
+     * @param value New position to be set.
+     */
+    setFreeDragPosition(value) {
+        this._dragRef.setFreeDragPosition(value);
+    }
+    /** Rivet: the props of a lazily created (bare) instance arrived with its own handler. */
+    _setInputs(setup) {
+        if (setup.inputs === this._inputs)
+            return;
+        this._inputs = setup.inputs ?? {};
+        if (setup.config !== undefined)
+            this._config = setup.config;
+        if (setup.dir !== undefined)
+            this._dir = setup.dir;
+        this._movedSubscription?.unsubscribe();
+        this._movedSubscription = null;
+        this._subscribeMoved();
+        this._updateRootElement();
+        this._dragRef.disabled = this._ownDisabled;
+        this._syncReactiveInputs();
+        this._syncHostClasses();
+    }
+    /** Rivet: sync what the DOM holds (handles, container state) before the ref sees a pointer down. */
+    _beforePointerDown() {
+        this._syncHandles();
+        const container = this.dropContainer;
+        if (container)
+            container._dropListRef.disabled = container.disabled;
+    }
+    /** Angular `ngOnDestroy`. */
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._destroyed = true;
+        if (this.dropContainer) {
+            this.dropContainer.removeItem(this);
+        }
+        this._dragDropRegistry.removeDirectiveNode(this.element);
+        this._disposeSync?.();
+        this._containerBeforeStarted?.unsubscribe();
+        this._movedSubscription?.unsubscribe();
+        this._dragRef.dispose();
+        if (drags.get(this.element) === this)
+            drags.delete(this.element);
+    }
+    _handlesSynced = false;
+    /** Re-collects the handles below the element (Angular: `_handles` + `_stateChanges`). */
+    _syncHandles() {
+        const elements = handleElements(this.element, DRAG_ATTR);
+        // The first sync always applies (upstream `startWith` on the handles query), so a self handle with
+        // no handle children is registered too.
+        if (!this._handlesSynced || elements.length !== this._handles.length || elements.some((element, i) => this._handles[i].element !== element)) {
+            this._handlesSynced = true;
+            this._handles = elements.map((element) => new DragHandleInstance(element));
+            const handleElementsForRef = this._handles.map((handle) => handle.element);
+            // Usually handles are only allowed to be a descendant of the drag element, but if
+            // the consumer defined a different drag root, we should allow the drag element
+            // itself to be a handle too.
+            if (this.element.hasAttribute("data-rv-drag-self-handle") && this.rootElementSelector) {
+                handleElementsForRef.push(this.element);
+            }
+            this._dragRef.withHandles(handleElementsForRef);
+        }
+        // Enabled/disable the handles in the DragRef.
+        const dragRef = this._dragRef;
+        this._handles.forEach((handle) => (handle.disabled ? dragRef.disableHandle(handle.element) : dragRef.enableHandle(handle.element)));
+    }
+    /** The handles of the drag item (Angular `_handles`). */
+    get _handleInstances() {
+        return this._handles;
+    }
+    /** Syncs the root element with the `DragRef`. */
+    _updateRootElement() {
+        const element = this.element;
+        let rootElement = element;
+        const selector = this.rootElementSelector;
+        if (selector) {
+            rootElement = element.closest(selector);
+        }
+        if (rootElement) {
+            assertElementNode(rootElement, "cdkDrag");
+        }
+        this._dragRef.withRootElement(rootElement || element);
+    }
+    /** Gets the boundary element, based on the `boundaryElement` value. */
+    _getBoundaryElement() {
+        const boundary = this.boundaryElement;
+        if (!boundary) {
+            return null;
+        }
+        if (typeof boundary === "string") {
+            return this.element.closest(boundary);
+        }
+        return coerceElement(boundary);
+    }
+    /** The preview / placeholder `<template>` of this drag item (the last one wins, like Angular). */
+    _template(attribute) {
+        let found = null;
+        this.element.querySelectorAll(`template[${attribute}]`).forEach((template) => {
+            if (template.closest(`[${DRAG_ATTR}]`) === this.element)
+                found = template;
+        });
+        return found;
+    }
+    /** Syncs the inputs of the Drag with the options of the underlying DragRef. */
+    _syncInputs(ref) {
+        ref.beforeStarted.subscribe(() => {
+            if (!ref.isDragging()) {
+                const dir = this._dir ?? documentDirectionality(this.element.ownerDocument);
+                const dragStartDelay = this.dragStartDelay;
+                const placeholderTemplate = this._template(PLACEHOLDER_ATTR);
+                const previewTemplate = this._template(PREVIEW_ATTR);
+                const placeholder = placeholderTemplate
+                    ? { template: () => (this._placeholderView = moveView(placeholderTemplate, this._placeholderView)), context: this.data }
+                    : null;
+                const preview = previewTemplate
+                    ? {
+                        template: () => (this._previewView = moveView(previewTemplate, this._previewView)),
+                        context: this.data,
+                        matchSize: previewTemplate.hasAttribute("data-match-size"),
+                    }
+                    : null;
+                ref.disabled = this.disabled;
+                ref.lockAxis = this.lockAxis;
+                ref.scale = this.scale;
+                ref.dragStartDelay = typeof dragStartDelay === "object" && dragStartDelay ? dragStartDelay : coerceNumberProperty(dragStartDelay);
+                ref.constrainPosition = this.constrainPosition;
+                ref.previewClass = this.previewClass;
+                ref
+                    .withBoundaryElement(this._getBoundaryElement())
+                    .withPlaceholderTemplate(placeholder)
+                    .withPreviewTemplate(preview)
+                    .withPreviewContainer(this.previewContainer || "global");
+                if (dir) {
+                    ref.withDirection(directionValue(dir));
+                }
+            }
+        });
+        // This only needs to be resolved once.
+        let parentResolved = false;
+        ref.beforeStarted.subscribe(() => {
+            if (parentResolved)
+                return;
+            parentResolved = true;
+            // Angular resolves the parent through DI first; here the DOM walk is the only source. Parents
+            // that were not created yet are woken (they rendered as `<Drag>` elements).
+            let parent = this.element.parentElement;
+            while (parent) {
+                const parentDrag = this._dragDropRegistry.getDragDirectiveForNode(parent) ?? (parent.hasAttribute(DRAG_ATTR) ? dragOf(parent) : null);
+                if (parentDrag) {
+                    ref.withParent(parentDrag._dragRef);
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+        });
+    }
+    /** Handles the events from the underlying `DragRef`. */
+    _handleEvents(ref) {
+        ref.started.subscribe((startEvent) => {
+            this._syncHostClasses();
+            this.dropContainer?._syncHostClasses();
+            this._inputs.onStarted?.({ source: this, event: startEvent.event });
+        });
+        ref.released.subscribe((releaseEvent) => {
+            this._inputs.onReleased?.({ source: this, event: releaseEvent.event });
+        });
+        ref.ended.subscribe((endEvent) => {
+            this._syncHostClasses();
+            this._inputs.onEnded?.({
+                source: this,
+                distance: endEvent.distance,
+                dropPoint: endEvent.dropPoint,
+                event: endEvent.event,
+            });
+        });
+        ref.entered.subscribe((enterEvent) => {
+            this._inputs.onEntered?.({
+                container: enterEvent.container.data,
+                item: this,
+                currentIndex: enterEvent.currentIndex,
+            });
+        });
+        ref.exited.subscribe((exitEvent) => {
+            this._inputs.onExited?.({
+                container: exitEvent.container.data,
+                item: this,
+            });
+        });
+        ref.dropped.subscribe((dropEvent) => {
+            this._syncHostClasses();
+            this._inputs.onDropped?.({
+                previousIndex: dropEvent.previousIndex,
+                currentIndex: dropEvent.currentIndex,
+                previousContainer: dropEvent.previousContainer.data,
+                container: dropEvent.container.data,
+                isPointerOverContainer: dropEvent.isPointerOverContainer,
+                item: this,
+                distance: dropEvent.distance,
+                dropPoint: dropEvent.dropPoint,
+                event: dropEvent.event,
+            });
+        });
+        this._subscribeMoved();
+    }
+    /** `cdkDragMoved` (only observed while there is a listener, like Angular's lazy Observable). */
+    _subscribeMoved() {
+        if (!this._inputs.onMoved || this._movedSubscription)
+            return;
+        this._movedSubscription = this._dragRef.moved.subscribe((movedEvent) => this._inputs.onMoved?.({
+            source: this,
+            pointerPosition: movedEvent.pointerPosition,
+            event: movedEvent.event,
+            delta: movedEvent.delta,
+            distance: movedEvent.distance,
+        }));
+    }
+    /** Rivet: signal inputs Angular re-syncs on change (`ngOnChanges`, the `disabled` setter). */
+    _syncReactiveInputs() {
+        this._disposeSync?.();
+        const inputs = this._inputs;
+        const accessors = [inputs.disabled, inputs.freeDragPosition, inputs.rootElementSelector, inputs.scale];
+        if (!accessors.some((value) => typeof value === "function") && !this.dropContainer)
+            return;
+        this._disposeSync = createRoot((dispose) => {
+            let first = true;
+            if (typeof inputs.disabled === "function" || this.dropContainer)
+                effect(() => {
+                    const own = this._ownDisabled;
+                    const all = this.disabled;
+                    untrack(() => {
+                        this._dragRef.disabled = own;
+                        this._toggleClass("cdk-drag-disabled", "data-disabled", all);
+                    });
+                });
+            if (typeof inputs.rootElementSelector === "function")
+                effect(() => {
+                    read(inputs.rootElementSelector);
+                    if (!first)
+                        untrack(() => this._updateRootElement());
+                });
+            if (typeof inputs.scale === "function" || typeof inputs.freeDragPosition === "function")
+                effect(() => {
+                    // Scale affects the free drag position so we need to sync it up here.
+                    const scale = this.scale;
+                    const position = this.freeDragPosition;
+                    untrack(() => {
+                        this._dragRef.scale = scale;
+                        if (!first && position)
+                            this._dragRef.setFreeDragPosition(position);
+                    });
+                });
+            first = false;
+            return dispose;
+        }).value;
+    }
+    /** The server-rendered `transform` of `freeDragPosition` is handed over to the ref. */
+    _rootTransformRendered() {
+        const root = this._dragRef.getRootElement();
+        if (root.hasAttribute("data-rv-free-position")) {
+            root.style.removeProperty("transform");
+            root.removeAttribute("data-rv-free-position");
+        }
+    }
+    /** Host classes (Angular host bindings). */
+    _syncHostClasses() {
+        this._toggleClass("cdk-drag-disabled", "data-disabled", this.disabled);
+        this._toggleClass("cdk-drag-dragging", "data-dragging", this._dragRef.isDragging());
+    }
+    _toggleClass(name, attribute, on) {
+        this.element.classList.toggle(name, on);
+        if (on)
+            this.element.setAttribute(attribute, "true");
+        else
+            this.element.removeAttribute(attribute);
+    }
+}
+/**
+ * A view of a `<template>`'s content (Angular: an embedded view): its nodes move out for the drag and
+ * back on `destroy()`, keeping their bindings live; the root elements' `class` / `style` / `popover` /
+ * `dir` changes made while dragging are undone (Angular creates a fresh view each time).
+ */
+function moveView(template, previous) {
+    previous?.destroy();
+    const rootNodes = [];
+    template.content.childNodes.forEach((node) => {
+        // Skip whitespace and framework comment markers.
+        if (node.nodeType === 3 && !node.textContent.trim())
+            return;
+        if (node.nodeType === 8)
+            return;
+        rootNodes.push(node);
+    });
+    const saved = rootNodes.map((node) => node.nodeType === 1 ? ["class", "style", "popover", "dir"].map((name) => node.getAttribute(name)) : null);
+    const document = template.ownerDocument;
+    rootNodes.forEach((node) => document.adoptNode(node));
+    let destroyed = false;
+    return {
+        rootNodes,
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            rootNodes.forEach((node, i) => {
+                const attributes = saved[i];
+                if (attributes)
+                    ["class", "style", "popover", "dir"].forEach((name, j) => {
+                        const value = attributes[j];
+                        if (value === null)
+                            node.removeAttribute(name);
+                        else
+                            node.setAttribute(name, value);
+                    });
+                template.content.appendChild(node);
+            });
+        },
+    };
+}

package/drag-drop/directives/drop-list-group.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Declaratively connects sibling `DropList` instances together. All of the `DropList`
+ * elements that are placed inside a `DropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `connectedTo` input of `DropList`.
+ */
+export declare class DropListGroupInstance<T = any> {
+    /** Element of the group. */
+    readonly element: HTMLElement;
+    /** Drop lists registered inside the group. */
+    readonly _items: Set<T>;
+    constructor(element: HTMLElement);
+    /** Whether starting a dragging sequence from inside this group is disabled. */
+    get disabled(): boolean;
+    /** Rivet: register every drop list of the group (they wake through their own handlers). */
+    _wakeAll(): void;
+    /** Angular `ngOnDestroy`. */
+    destroy(): void;
+}
+/**
+ * The group element a drop list belongs to (Angular: `CDK_DROP_LIST_GROUP`, skipSelf — a drop list
+ * provides `undefined` to its children, so a list nested in another list joins no outer group).
+ */
+export declare function groupElementOf(listElement: Element): HTMLElement | null;
+/** The group instance of a group element (created on first use). */
+export declare function groupOf(element: HTMLElement): DropListGroupInstance;

package/drag-drop/directives/drop-list-group.js

@@ -0,0 +1,55 @@
+// Ported from Angular Components (src/cdk/drag-drop/directives/drop-list-group.ts), MIT, © Google LLC.
+// Rivet: `<DropListGroup>` renders `data-rv-drop-list-group` (+ `data-disabled`); the instance is DOM
+// derived (its only input is `disabled`). `_items` holds the drop lists that registered so far;
+// `_wakeAll()` creates the instances of every list of the group (Angular creates them with the view).
+import { DROP_LIST_ATTR, DROP_LIST_GROUP_ATTR, groups, dropListOf } from "./registry.js";
+/**
+ * Declaratively connects sibling `DropList` instances together. All of the `DropList`
+ * elements that are placed inside a `DropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `connectedTo` input of `DropList`.
+ */
+export class DropListGroupInstance {
+    /** Element of the group. */
+    element;
+    /** Drop lists registered inside the group. */
+    _items = new Set();
+    constructor(element) {
+        this.element = element;
+    }
+    /** Whether starting a dragging sequence from inside this group is disabled. */
+    get disabled() {
+        return this.element.hasAttribute("data-disabled");
+    }
+    /** Rivet: register every drop list of the group (they wake through their own handlers). */
+    _wakeAll() {
+        this.element.querySelectorAll(`[${DROP_LIST_ATTR}]`).forEach((list) => {
+            if (groupElementOf(list) === this.element)
+                dropListOf(list);
+        });
+    }
+    /** Angular `ngOnDestroy`. */
+    destroy() {
+        this._items.clear();
+        groups.delete(this.element);
+    }
+}
+/**
+ * The group element a drop list belongs to (Angular: `CDK_DROP_LIST_GROUP`, skipSelf — a drop list
+ * provides `undefined` to its children, so a list nested in another list joins no outer group).
+ */
+export function groupElementOf(listElement) {
+    for (let node = listElement.parentElement; node; node = node.parentElement) {
+        if (node.hasAttribute(DROP_LIST_GROUP_ATTR))
+            return node;
+        if (node.hasAttribute(DROP_LIST_ATTR))
+            return null;
+    }
+    return null;
+}
+/** The group instance of a group element (created on first use). */
+export function groupOf(element) {
+    let group = groups.get(element);
+    if (!group)
+        groups.set(element, (group = new DropListGroupInstance(element)));
+    return group;
+}