@vonage/vivid 5.15.0 → 5.16.0

package/data-grid/definition.js

@@ -1,2353 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { html, attr, observable, RepeatDirective, normalizeBinding, Updates as Updates$1, Observable, nullableNumberConverter, children, slotted, elements, when } from '@microsoft/fast-element';
-import { c as commonjsGlobal } from '../unbundled/_commonjsHelpers.js';
-import { eventFocusIn, eventFocusOut, eventKeyDown, keyEscape, keyFunction2, keyEnter, keyEnd, keyHome, eventFocus, keyPageDown, keyPageUp, keyArrowDown, keyArrowUp, classNames, keySpace } from '@microsoft/fast-web-utilities';
-import { D as DataGridCellTypes, a as DataGridCellSortStates, b as DataGridRowTypes, G as GenerateHeaderOptions, c as DataGridCellRole } from '../unbundled/data-grid.options.js';
-import { k as keyArrowRight, a as keyArrowLeft } from '../unbundled/key-codes.js';
-import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
-import { L as Localized } from '../unbundled/localized.js';
-
-const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}";
-
-const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
-
-const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
-
-let kernelMode;
-const kernelAttr = "fast-kernel";
-try {
-    if (document.currentScript) {
-        kernelMode = document.currentScript.getAttribute(kernelAttr);
-    }
-    else {
-        const scripts = document.getElementsByTagName("script");
-        const currentScript = scripts[scripts.length - 1];
-        kernelMode = currentScript.getAttribute(kernelAttr);
-    }
-}
-catch (e) {
-    kernelMode = "isolate";
-}
-let KernelServiceId;
-switch (kernelMode) {
-    case "share": // share the kernel across major versions
-        KernelServiceId = Object.freeze({
-            updateQueue: 1,
-            observable: 2,
-            contextEvent: 3,
-            elementRegistry: 4,
-        });
-        break;
-    case "share-v2": // only share the kernel with other v2 instances
-        KernelServiceId = Object.freeze({
-            updateQueue: 1.2,
-            observable: 2.2,
-            contextEvent: 3.2,
-            elementRegistry: 4.2,
-        });
-        break;
-    default:
-        // fully isolate the kernel from all other FAST instances
-        const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
-        KernelServiceId = Object.freeze({
-            updateQueue: `1.2${postfix}`,
-            observable: `2.2${postfix}`,
-            contextEvent: `3.2${postfix}`,
-            elementRegistry: `4.2${postfix}`,
-        });
-        break;
-}
-/**
- * Determines whether or not an object is a function.
- * @public
- */
-const isFunction = (object) => typeof object === "function";
-/**
- * Determines whether or not an object is a string.
- * @public
- */
-const isString = (object) => typeof object === "string";
-/**
- * A function which does nothing.
- * @public
- */
-const noop = () => void 0;
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-(function ensureGlobalThis() {
-    if (typeof globalThis !== "undefined") {
-        // We're running in a modern environment.
-        return;
-    }
-    // @ts-ignore
-    if (typeof commonjsGlobal !== "undefined") {
-        // We're running in NodeJS
-        // @ts-ignore
-        commonjsGlobal.globalThis = commonjsGlobal;
-    }
-    else if (typeof self !== "undefined") {
-        self.globalThis = self;
-    }
-    else if (typeof window !== "undefined") {
-        // We're running in the browser's main thread.
-        window.globalThis = window;
-    }
-    else {
-        // Hopefully we never get here...
-        // Not all environments allow eval and Function. Use only as a last resort:
-        // eslint-disable-next-line no-new-func
-        const result = new Function("return this")();
-        result.globalThis = result;
-    }
-})();
-(function requestIdleCallbackPolyfill() {
-    if ("requestIdleCallback" in globalThis) {
-        return;
-    }
-    /**
-     * A polyfill for requestIdleCallback that falls back to setTimeout.
-     *
-     * @param callback - The function to call when the browser is idle.
-     * @param options - Options object that may contain a timeout property.
-     * @returns An ID that can be used to cancel the callback.
-     * @public
-     */
-    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
-        const start = Date.now();
-        return setTimeout(() => {
-            callback({
-                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
-                    ? Date.now() - start >= options.timeout
-                    : false,
-                timeRemaining: () => 0,
-            });
-        }, 1);
-    };
-    /**
-     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
-     *
-     * @param id - The ID of the callback to cancel.
-     * @public
-     */
-    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
-        clearTimeout(id);
-    };
-})();
-
-// ensure FAST global - duplicated debug.ts
-const propConfig = {
-    configurable: false,
-    enumerable: false,
-    writable: false,
-};
-if (globalThis.FAST === void 0) {
-    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
-}
-/**
- * The FAST global.
- * @public
- */
-const FAST = globalThis.FAST;
-if (FAST.getById === void 0) {
-    const storage = Object.create(null);
-    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
-            let found = storage[id];
-            if (found === void 0) {
-                found = initialize ? (storage[id] = initialize()) : null;
-            }
-            return found;
-        } }, propConfig));
-}
-if (FAST.error === void 0) {
-    Object.assign(FAST, {
-        warn() { },
-        error(code) {
-            return new Error(`Error ${code}`);
-        },
-        addMessages() { },
-    });
-}
-/**
- * Creates a function capable of locating metadata associated with a type.
- * @returns A metadata locator function.
- * @internal
- */
-function createMetadataLocator() {
-    const metadataLookup = new WeakMap();
-    return function (target) {
-        let metadata = metadataLookup.get(target);
-        if (metadata === void 0) {
-            let currentTarget = Reflect.getPrototypeOf(target);
-            while (metadata === void 0 && currentTarget !== null) {
-                metadata = metadataLookup.get(currentTarget);
-                currentTarget = Reflect.getPrototypeOf(currentTarget);
-            }
-            metadata = metadata === void 0 ? [] : metadata.slice(0);
-            metadataLookup.set(target, metadata);
-        }
-        return metadata;
-    };
-}
-/**
- * Makes a type noop for JSON serialization.
- * @param type - The type to make noop for JSON serialization.
- * @internal
- */
-function makeSerializationNoop(type) {
-    type.prototype.toJSON = noop;
-}
-
-const createHTML = html => html;
-const fastTrustedType = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
-    : { createHTML };
-let defaultPolicy = Object.freeze({
-    createHTML(value) {
-        return fastTrustedType.createHTML(value);
-    },
-    protect(tagName, aspect, aspectName, sink) {
-        return sink;
-    },
-});
-const fastPolicy = defaultPolicy;
-/**
- * Common DOM APIs.
- * @public
- */
-const DOM = Object.freeze({
-    /**
-     * Gets the dom policy used by the templating system.
-     */
-    get policy() {
-        return defaultPolicy;
-    },
-    /**
-     * Sets the dom policy used by the templating system.
-     * @param policy - The policy to set.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setPolicy(value) {
-        if (defaultPolicy !== fastPolicy) {
-            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
-        }
-        defaultPolicy = value;
-    },
-    /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
-     */
-    setAttribute(element, attributeName, value) {
-        value === null || value === undefined
-            ? element.removeAttribute(attributeName)
-            : element.setAttribute(attributeName, value);
-    },
-    /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
-     */
-    setBooleanAttribute(element, attributeName, value) {
-        value
-            ? element.setAttribute(attributeName, "")
-            : element.removeAttribute(attributeName);
-    },
-});
-
-/**
- * The default UpdateQueue.
- * @public
- */
-const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
-    const tasks = [];
-    const pendingErrors = [];
-    const rAF = globalThis.requestAnimationFrame;
-    let updateAsync = true;
-    function throwFirstError() {
-        if (pendingErrors.length) {
-            throw pendingErrors.shift();
-        }
-    }
-    function tryRunTask(task) {
-        try {
-            task.call();
-        }
-        catch (error) {
-            if (updateAsync) {
-                pendingErrors.push(error);
-                setTimeout(throwFirstError, 0);
-            }
-            else {
-                tasks.length = 0;
-                throw error;
-            }
-        }
-    }
-    function process() {
-        const capacity = 1024;
-        let index = 0;
-        while (index < tasks.length) {
-            tryRunTask(tasks[index]);
-            index++;
-            // Prevent leaking memory for long chains of recursive calls to `enqueue`.
-            // If we call `enqueue` within a task scheduled by `enqueue`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
-                    tasks[scan] = tasks[scan + index];
-                }
-                tasks.length -= index;
-                index = 0;
-            }
-        }
-        tasks.length = 0;
-    }
-    function enqueue(callable) {
-        tasks.push(callable);
-        if (tasks.length < 2) {
-            updateAsync ? rAF(process) : process();
-        }
-    }
-    return Object.freeze({
-        enqueue,
-        next: () => new Promise(enqueue),
-        process,
-        setMode: (isAsync) => (updateAsync = isAsync),
-    });
-});
-
-/**
- * An implementation of {@link Notifier} that efficiently keeps track of
- * subscribers interested in a specific change notification on an
- * observable subject.
- *
- * @remarks
- * This set is optimized for the most common scenario of 1 or 2 subscribers.
- * With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.
- * If the set ever exceeds two subscribers, it upgrades to an array automatically.
- * @public
- */
-class SubscriberSet {
-    /**
-     * Creates an instance of SubscriberSet for the specified subject.
-     * @param subject - The subject that subscribers will receive notifications from.
-     * @param initialSubscriber - An initial subscriber to changes.
-     */
-    constructor(subject, initialSubscriber) {
-        this.sub1 = void 0;
-        this.sub2 = void 0;
-        this.spillover = void 0;
-        this.subject = subject;
-        this.sub1 = initialSubscriber;
-    }
-    /**
-     * Checks whether the provided subscriber has been added to this set.
-     * @param subscriber - The subscriber to test for inclusion in this set.
-     */
-    has(subscriber) {
-        return this.spillover === void 0
-            ? this.sub1 === subscriber || this.sub2 === subscriber
-            : this.spillover.indexOf(subscriber) !== -1;
-    }
-    /**
-     * Subscribes to notification of changes in an object's state.
-     * @param subscriber - The object that is subscribing for change notification.
-     */
-    subscribe(subscriber) {
-        const spillover = this.spillover;
-        if (spillover === void 0) {
-            if (this.has(subscriber)) {
-                return;
-            }
-            if (this.sub1 === void 0) {
-                this.sub1 = subscriber;
-                return;
-            }
-            if (this.sub2 === void 0) {
-                this.sub2 = subscriber;
-                return;
-            }
-            this.spillover = [this.sub1, this.sub2, subscriber];
-            this.sub1 = void 0;
-            this.sub2 = void 0;
-        }
-        else {
-            const index = spillover.indexOf(subscriber);
-            if (index === -1) {
-                spillover.push(subscriber);
-            }
-        }
-    }
-    /**
-     * Unsubscribes from notification of changes in an object's state.
-     * @param subscriber - The object that is unsubscribing from change notification.
-     */
-    unsubscribe(subscriber) {
-        const spillover = this.spillover;
-        if (spillover === void 0) {
-            if (this.sub1 === subscriber) {
-                this.sub1 = void 0;
-            }
-            else if (this.sub2 === subscriber) {
-                this.sub2 = void 0;
-            }
-        }
-        else {
-            const index = spillover.indexOf(subscriber);
-            if (index !== -1) {
-                spillover.splice(index, 1);
-            }
-        }
-    }
-    /**
-     * Notifies all subscribers.
-     * @param args - Data passed along to subscribers during notification.
-     */
-    notify(args) {
-        const spillover = this.spillover;
-        const subject = this.subject;
-        if (spillover === void 0) {
-            const sub1 = this.sub1;
-            const sub2 = this.sub2;
-            if (sub1 !== void 0) {
-                sub1.handleChange(subject, args);
-            }
-            if (sub2 !== void 0) {
-                sub2.handleChange(subject, args);
-            }
-        }
-        else {
-            for (let i = 0, ii = spillover.length; i < ii; ++i) {
-                spillover[i].handleChange(subject, args);
-            }
-        }
-    }
-}
-/**
- * An implementation of Notifier that allows subscribers to be notified
- * of individual property changes on an object.
- * @public
- */
-class PropertyChangeNotifier {
-    /**
-     * Creates an instance of PropertyChangeNotifier for the specified subject.
-     * @param subject - The object that subscribers will receive notifications for.
-     */
-    constructor(subject) {
-        this.subscribers = {};
-        this.subjectSubscribers = null;
-        this.subject = subject;
-    }
-    /**
-     * Notifies all subscribers, based on the specified property.
-     * @param propertyName - The property name, passed along to subscribers during notification.
-     */
-    notify(propertyName) {
-        var _a, _b;
-        (_a = this.subscribers[propertyName]) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
-        (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.notify(propertyName);
-    }
-    /**
-     * Subscribes to notification of changes in an object's state.
-     * @param subscriber - The object that is subscribing for change notification.
-     * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
-     */
-    subscribe(subscriber, propertyToWatch) {
-        var _a, _b;
-        let subscribers;
-        if (propertyToWatch) {
-            subscribers =
-                (_a = this.subscribers[propertyToWatch]) !== null && _a !== void 0 ? _a : (this.subscribers[propertyToWatch] = new SubscriberSet(this.subject));
-        }
-        else {
-            subscribers =
-                (_b = this.subjectSubscribers) !== null && _b !== void 0 ? _b : (this.subjectSubscribers = new SubscriberSet(this.subject));
-        }
-        subscribers.subscribe(subscriber);
-    }
-    /**
-     * Unsubscribes from notification of changes in an object's state.
-     * @param subscriber - The object that is unsubscribing from change notification.
-     * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
-     */
-    unsubscribe(subscriber, propertyToUnwatch) {
-        var _a, _b;
-        if (propertyToUnwatch) {
-            (_a = this.subscribers[propertyToUnwatch]) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
-        }
-        else {
-            (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.unsubscribe(subscriber);
-        }
-    }
-}
-
-/**
- * Describes how the source's lifetime relates to its controller's lifetime.
- * @public
- */
-const SourceLifetime = Object.freeze({
-    /**
-     * The source to controller lifetime relationship is unknown.
-     */
-    unknown: void 0,
-    /**
-     * The source and controller lifetimes are coupled to one another.
-     * They can/will be GC'd together.
-     */
-    coupled: 1,
-});
-/**
- * Common Observable APIs.
- * @public
- */
-FAST.getById(KernelServiceId.observable, () => {
-    const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
-    const notifierLookup = new WeakMap();
-    let watcher = void 0;
-    let createArrayObserver = (array) => {
-        throw FAST.error(1101 /* Message.needsArrayObservation */);
-    };
-    function getNotifier(source) {
-        var _a;
-        let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
-        if (found === void 0) {
-            Array.isArray(source)
-                ? (found = createArrayObserver(source))
-                : notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
-        }
-        return found;
-    }
-    const getAccessors = createMetadataLocator();
-    class DefaultObservableAccessor {
-        constructor(name) {
-            this.name = name;
-            this.field = `_${name}`;
-            this.callback = `${name}Changed`;
-        }
-        getValue(source) {
-            if (watcher !== void 0) {
-                watcher.watch(source, this.name);
-            }
-            return source[this.field];
-        }
-        setValue(source, newValue) {
-            const field = this.field;
-            const oldValue = source[field];
-            if (oldValue !== newValue) {
-                source[field] = newValue;
-                const callback = source[this.callback];
-                if (isFunction(callback)) {
-                    callback.call(source, oldValue, newValue);
-                }
-                getNotifier(source).notify(this.name);
-            }
-        }
-    }
-    class ExpressionNotifierImplementation extends SubscriberSet {
-        constructor(expression, initialSubscriber, isVolatileBinding = false) {
-            super(expression, initialSubscriber);
-            this.expression = expression;
-            this.isVolatileBinding = isVolatileBinding;
-            this.needsRefresh = true;
-            this.needsQueue = true;
-            this.isAsync = true;
-            this.first = this;
-            this.last = null;
-            this.propertySource = void 0;
-            this.propertyName = void 0;
-            this.notifier = void 0;
-            this.next = void 0;
-        }
-        setMode(isAsync) {
-            this.isAsync = this.needsQueue = isAsync;
-        }
-        bind(controller) {
-            this.controller = controller;
-            const value = this.observe(controller.source, controller.context);
-            if (!controller.isBound && this.requiresUnbind(controller)) {
-                controller.onUnbind(this);
-            }
-            return value;
-        }
-        requiresUnbind(controller) {
-            return (controller.sourceLifetime !== SourceLifetime.coupled ||
-                this.first !== this.last ||
-                this.first.propertySource !== controller.source);
-        }
-        unbind(controller) {
-            this.dispose();
-        }
-        observe(source, context) {
-            if (this.needsRefresh && this.last !== null) {
-                this.dispose();
-            }
-            const previousWatcher = watcher;
-            watcher = this.needsRefresh ? this : void 0;
-            this.needsRefresh = this.isVolatileBinding;
-            let result;
-            try {
-                result = this.expression(source, context);
-            }
-            finally {
-                watcher = previousWatcher;
-            }
-            return result;
-        }
-        // backwards compat with v1 kernel
-        disconnect() {
-            this.dispose();
-        }
-        dispose() {
-            if (this.last !== null) {
-                let current = this.first;
-                while (current !== void 0) {
-                    current.notifier.unsubscribe(this, current.propertyName);
-                    current = current.next;
-                }
-                this.last = null;
-                this.needsRefresh = this.needsQueue = this.isAsync;
-            }
-        }
-        watch(propertySource, propertyName) {
-            const prev = this.last;
-            const notifier = getNotifier(propertySource);
-            const current = prev === null ? this.first : {};
-            current.propertySource = propertySource;
-            current.propertyName = propertyName;
-            current.notifier = notifier;
-            notifier.subscribe(this, propertyName);
-            if (prev !== null) {
-                if (!this.needsRefresh) {
-                    // Declaring the variable prior to assignment below circumvents
-                    // a bug in Angular's optimization process causing infinite recursion
-                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
-                    let prevValue;
-                    watcher = void 0;
-                    /* eslint-disable-next-line */
-                    prevValue = prev.propertySource[prev.propertyName];
-                    /* eslint-disable-next-line */
-                    watcher = this;
-                    if (propertySource === prevValue) {
-                        this.needsRefresh = true;
-                    }
-                }
-                prev.next = current;
-            }
-            this.last = current;
-        }
-        handleChange() {
-            if (this.needsQueue) {
-                this.needsQueue = false;
-                queueUpdate(this);
-            }
-            else if (!this.isAsync) {
-                this.call();
-            }
-        }
-        call() {
-            if (this.last !== null) {
-                this.needsQueue = this.isAsync;
-                this.notify(this);
-            }
-        }
-        *records() {
-            let next = this.first;
-            while (next !== void 0) {
-                yield next;
-                next = next.next;
-            }
-        }
-    }
-    makeSerializationNoop(ExpressionNotifierImplementation);
-    return Object.freeze({
-        /**
-         * @internal
-         * @param factory - The factory used to create array observers.
-         */
-        setArrayObserverFactory(factory) {
-            createArrayObserver = factory;
-        },
-        /**
-         * Gets a notifier for an object or Array.
-         * @param source - The object or Array to get the notifier for.
-         */
-        getNotifier,
-        /**
-         * Records a property change for a source object.
-         * @param source - The object to record the change against.
-         * @param propertyName - The property to track as changed.
-         */
-        track(source, propertyName) {
-            watcher && watcher.watch(source, propertyName);
-        },
-        /**
-         * Notifies watchers that the currently executing property getter or function is volatile
-         * with respect to its observable dependencies.
-         */
-        trackVolatile() {
-            watcher && (watcher.needsRefresh = true);
-        },
-        /**
-         * Notifies subscribers of a source object of changes.
-         * @param source - the object to notify of changes.
-         * @param args - The change args to pass to subscribers.
-         */
-        notify(source, args) {
-            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            getNotifier(source).notify(args);
-        },
-        /**
-         * Defines an observable property on an object or prototype.
-         * @param target - The target object to define the observable on.
-         * @param nameOrAccessor - The name of the property to define as observable;
-         * or a custom accessor that specifies the property name and accessor implementation.
-         */
-        defineProperty(target, nameOrAccessor) {
-            if (isString(nameOrAccessor)) {
-                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
-            }
-            getAccessors(target).push(nameOrAccessor);
-            Reflect.defineProperty(target, nameOrAccessor.name, {
-                enumerable: true,
-                get() {
-                    return nameOrAccessor.getValue(this);
-                },
-                set(newValue) {
-                    nameOrAccessor.setValue(this, newValue);
-                },
-            });
-        },
-        /**
-         * Finds all the observable accessors defined on the target,
-         * including its prototype chain.
-         * @param target - The target object to search for accessor on.
-         */
-        getAccessors,
-        /**
-         * Creates a {@link ExpressionNotifier} that can watch the
-         * provided {@link Expression} for changes.
-         * @param expression - The binding to observe.
-         * @param initialSubscriber - An initial subscriber to changes in the binding value.
-         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
-         */
-        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
-            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
-        },
-        /**
-         * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
-         * on every evaluation of the value.
-         * @param expression - The binding to inspect.
-         */
-        isVolatileBinding(expression) {
-            return volatileRegex.test(expression.toString());
-        },
-    });
-});
-const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
-    let current = null;
-    return {
-        get() {
-            return current;
-        },
-        set(event) {
-            current = event;
-        },
-    };
-});
-/**
- * Provides additional contextual information available to behaviors and expressions.
- * @public
- */
-const ExecutionContext = Object.freeze({
-    /**
-     * A default execution context.
-     */
-    default: {
-        index: 0,
-        length: 0,
-        get event() {
-            return ExecutionContext.getEvent();
-        },
-        eventDetail() {
-            return this.event.detail;
-        },
-        eventTarget() {
-            return this.event.target;
-        },
-    },
-    /**
-     * Gets the current event.
-     * @returns An event object.
-     */
-    getEvent() {
-        return contextEvent.get();
-    },
-    /**
-     * Sets the current event.
-     * @param event - An event object.
-     */
-    setEvent(event) {
-        contextEvent.set(event);
-    },
-});
-
-const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
-let id = 0;
-/** @internal */
-const nextId = () => `${marker}-${++id}`;
-
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-const ViewBehaviorOrchestrator = Object.freeze({
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create(source) {
-        const behaviors = [];
-        const targets = {};
-        let unbindables = null;
-        let isConnected = false;
-        return {
-            source,
-            context: ExecutionContext.default,
-            targets,
-            get isBound() {
-                return isConnected;
-            },
-            addBehaviorFactory(factory, target) {
-                var _a, _b, _c, _d;
-                const compiled = factory;
-                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
-                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
-                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
-                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
-                this.addTarget(compiled.targetNodeId, target);
-                this.addBehavior(compiled.createBehavior());
-            },
-            addTarget(nodeId, target) {
-                targets[nodeId] = target;
-            },
-            addBehavior(behavior) {
-                behaviors.push(behavior);
-                if (isConnected) {
-                    behavior.bind(this);
-                }
-            },
-            onUnbind(unbindable) {
-                if (unbindables === null) {
-                    unbindables = [];
-                }
-                unbindables.push(unbindable);
-            },
-            connectedCallback(controller) {
-                if (!isConnected) {
-                    isConnected = true;
-                    behaviors.forEach(x => x.bind(this));
-                }
-            },
-            disconnectedCallback(controller) {
-                if (isConnected) {
-                    isConnected = false;
-                    if (unbindables !== null) {
-                        unbindables.forEach(x => x.unbind(this));
-                    }
-                }
-            },
-        };
-    },
-});
-
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$2(target, key, result);
-  return result;
-};
-const defaultCellContentsTemplate = html`
-	<template>
-		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
-	</template>
-`;
-const defaultHeaderCellContentsTemplate = html`
-	<template>
-		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
-	</template>
-`;
-class DataGridCell extends Localized(HostSemantics(VividElement)) {
-  constructor() {
-    super(...arguments);
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.cellType = DataGridCellTypes.default;
-    this.rowData = null;
-    this.columnDefinition = null;
-    this.isActiveCell = false;
-    this.customCellView = null;
-    this.updateCellStyle = () => {
-      if (this.gridColumn && !this.gridColumn.includes("undefined")) {
-        this.style.gridColumn = this.gridColumn;
-      } else {
-        this.style.removeProperty("grid-column");
-      }
-    };
-    this._selectable = false;
-    this.selected = false;
-    /**
-     * Indicates the selected status.
-     *
-     * @deprecated For setting selected state, please use `selected` property instead.
-     * @public
-     * HTML Attribute: aria-selected
-     */
-    this.ariaSelected = null;
-    /**
-     * Indicates the sort status.
-     *
-     * @deprecated To set the sorting visual style please use `sortDirection` property.
-     * @public
-     * HTML Attribute: aria-sort
-     */
-    this.ariaSort = null;
-  }
-  /**
-   * @internal
-   */
-  cellTypeChanged() {
-    if (this.$fastController.isConnected) {
-      this.updateCellView();
-    }
-  }
-  /**
-   * @internal
-   */
-  gridColumnChanged() {
-    if (this.$fastController.isConnected) {
-      this.updateCellStyle();
-    }
-  }
-  /**
-   * @internal
-   */
-  columnDefinitionChanged(_oldValue, _newValue) {
-    if (this.$fastController.isConnected) {
-      this.updateCellView();
-    }
-  }
-  /**
-   * Updates the fixed column style
-   * @internal
-   */
-  updateFixedStyle() {
-    if (this.fixedPosition !== void 0) {
-      this.setAttribute("data-fixed", "");
-      this.style.left = this.fixedPosition;
-    } else {
-      this.removeAttribute("data-fixed");
-      this.style.removeProperty("left");
-    }
-  }
-  /**
-   * Sets the fixed state and position for this cell
-   * @internal
-   */
-  setFixedPosition(position) {
-    this.fixedPosition = position;
-    this.updateFixedStyle();
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener(eventFocusIn, this.handleFocusin);
-    this.addEventListener(eventFocusOut, this.handleFocusout);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
-    this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`;
-    this.updateCellView();
-    this.updateCellStyle();
-    this.updateFixedStyle();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener(eventFocusIn, this.handleFocusin);
-    this.removeEventListener(
-      eventFocusOut,
-      this.handleFocusout
-    );
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
-    this.disconnectCellView();
-  }
-  handleFocusin(_) {
-    this.shadowRoot.querySelector(".base").classList.add("active");
-    if (this.isActiveCell) {
-      return;
-    }
-    this.isActiveCell = true;
-    switch (this.cellType) {
-      case DataGridCellTypes.columnHeader:
-        if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
-          const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-          /* v8 ignore else -- @preserve */
-          if (focusTarget !== null) {
-            focusTarget.focus();
-          }
-        }
-        break;
-      default:
-        if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
-          const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-          /* v8 ignore else -- @preserve */
-          if (focusTarget !== null) {
-            focusTarget.focus();
-          }
-        }
-        break;
-    }
-    this.$emit("cell-focused", this);
-  }
-  handleFocusout(_) {
-    this.shadowRoot.querySelector(".base").classList.remove("active");
-    /* v8 ignore else -- @preserve */
-    if (this !== document.activeElement && !this.contains(document.activeElement)) {
-      this.isActiveCell = false;
-    }
-  }
-  handleKeydown(e) {
-    if (e.defaultPrevented || this.columnDefinition === null || this.cellType === DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) {
-      return;
-    }
-    switch (e.key) {
-      case keyEnter:
-      case keyFunction2:
-        if (this.contains(document.activeElement) && document.activeElement !== this) {
-          return;
-        }
-        switch (this.cellType) {
-          case DataGridCellTypes.columnHeader: {
-            if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
-              const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-              /* v8 ignore else -- @preserve */
-              if (focusTarget !== null) {
-                focusTarget.focus();
-              }
-              e.preventDefault();
-            }
-            break;
-          }
-          default: {
-            if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
-              const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-              /* v8 ignore else -- @preserve */
-              if (focusTarget !== null) {
-                focusTarget.focus();
-              }
-              e.preventDefault();
-            }
-            break;
-          }
-        }
-        break;
-      case keyEscape: {
-        /* v8 ignore else -- @preserve */
-        if (this.contains(document.activeElement) && document.activeElement !== this) {
-          this.focus();
-          e.preventDefault();
-        }
-        break;
-      }
-    }
-  }
-  updateCellView() {
-    this.disconnectCellView();
-    if (this.columnDefinition === null) {
-      return;
-    }
-    switch (this.cellType) {
-      case DataGridCellTypes.columnHeader:
-        if (this.columnDefinition.headerCellTemplate !== void 0) {
-          this.customCellView = this.columnDefinition.headerCellTemplate.render(
-            this,
-            this
-          );
-        } else {
-          this.customCellView = defaultHeaderCellContentsTemplate.render(
-            this,
-            this
-          );
-        }
-        break;
-      case DataGridCellTypes.rowHeader:
-      case DataGridCellTypes.default:
-        if (this.columnDefinition.cellTemplate !== void 0) {
-          this.customCellView = this.columnDefinition.cellTemplate.render(
-            this,
-            this
-          );
-        } else {
-          this.customCellView = defaultCellContentsTemplate.render(this, this);
-        }
-        break;
-    }
-    if (!this.columnDefinition?.sortable) {
-      this.sortDirection = void 0;
-    } else if (this.columnDefinition.sortDirection) {
-      this.sortDirection = this.columnDefinition.sortDirection;
-    } else {
-      this.sortDirection = DataGridCellSortStates.none;
-    }
-  }
-  disconnectCellView() {
-    if (this.customCellView !== null) {
-      this.customCellView.dispose();
-      this.customCellView = null;
-    }
-  }
-  /**
-   * @internal
-   */
-  ariaSelectedChanged(prevValue, newValue) {
-    super.ariaSelectedChanged(prevValue, newValue);
-    this._selectable = newValue !== null;
-    this.selected = newValue === "true";
-  }
-  /**
-   * @internal
-   */
-  ariaSortChanged(oldValue, newValue) {
-    super.ariaSortChanged(oldValue, newValue);
-    if (newValue === null) {
-      this.sortDirection = void 0;
-      return;
-    }
-    this.sortDirection = newValue;
-  }
-  #getColumnDataKey() {
-    return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
-  }
-  /**
-   * @internal
-   */
-  _handleInteraction() {
-    const isHeaderCell = this.cellType === "columnheader";
-    const isSortable = isHeaderCell && this.sortDirection !== void 0;
-    if (isSortable) {
-      this.$emit("sort", {
-        columnDataKey: this.#getColumnDataKey(),
-        sortDirection: this.sortDirection
-      });
-    }
-    const hasInternalFocusQueue = isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue;
-    if (!hasInternalFocusQueue) {
-      this.$emit("cell-click", {
-        cell: this,
-        row: this.parentElement,
-        isHeaderCell,
-        columnDataKey: this.#getColumnDataKey()
-      });
-    }
-    return true;
-  }
-}
-__decorateClass$2([
-  attr({ attribute: "cell-type" })
-], DataGridCell.prototype, "cellType");
-__decorateClass$2([
-  attr({ attribute: "grid-column" })
-], DataGridCell.prototype, "gridColumn");
-__decorateClass$2([
-  observable
-], DataGridCell.prototype, "rowData");
-__decorateClass$2([
-  observable
-], DataGridCell.prototype, "columnDefinition");
-__decorateClass$2([
-  observable
-], DataGridCell.prototype, "_selectable");
-__decorateClass$2([
-  attr({ mode: "boolean" })
-], DataGridCell.prototype, "selected");
-__decorateClass$2([
-  attr({ attribute: "sort-direction" })
-], DataGridCell.prototype, "sortDirection");
-__decorateClass$2([
-  observable
-], DataGridCell.prototype, "_actionItemsSlottedContent");
-
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-class DataGridRow extends HostSemantics(VividElement) {
-  constructor() {
-    super(...arguments);
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.rowType = DataGridRowTypes.default;
-    this.rowData = null;
-    this.columnDefinitions = null;
-    this.behaviorOrchestrator = null;
-    /**
-     * @internal
-     */
-    this.focusColumnIndex = 0;
-    this.updateRowStyle = () => {
-      this.style.gridTemplateColumns = this.gridTemplateColumns;
-    };
-    /**
-     * Indicates the selected status.
-     *
-     * @deprecated
-     * @public
-     * HTML Attribute: aria-selected
-     */
-    this.ariaSelected = null;
-    this._selectable = false;
-    this.selected = false;
-  }
-  /**
-   * @internal
-   */
-  gridTemplateColumnsChanged() {
-    if (this.$fastController.isConnected) {
-      this.updateRowStyle();
-    }
-  }
-  /**
-   * @internal
-   */
-  rowTypeChanged() {
-    if (this.$fastController.isConnected) {
-      this.updateItemTemplate();
-    }
-  }
-  /**
-   * @internal
-   */
-  cellItemTemplateChanged() {
-    this.updateItemTemplate();
-  }
-  /**
-   * @internal
-   */
-  headerCellItemTemplateChanged() {
-    this.updateItemTemplate();
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    /* v8 ignore else -- @preserve */
-    if (this.behaviorOrchestrator === null) {
-      this.updateItemTemplate();
-      this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
-      this.$fastController.addBehavior(this.behaviorOrchestrator);
-      this.behaviorOrchestrator.addBehaviorFactory(
-        new RepeatDirective(
-          normalizeBinding((x) => x.columnDefinitions),
-          normalizeBinding((x) => x.activeCellItemTemplate),
-          { positioning: true }
-        ),
-        this.appendChild(document.createComment(""))
-      );
-    }
-    this.addEventListener("cell-focused", this.handleCellFocus);
-    this.addEventListener(eventFocusOut, this.handleFocusout);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
-    this.updateRowStyle();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("cell-focused", this.handleCellFocus);
-    this.removeEventListener(
-      eventFocusOut,
-      this.handleFocusout
-    );
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
-  }
-  handleFocusout(_) {
-    /* v8 ignore else -- @preserve */
-    if (!this.contains(document.activeElement)) {
-      this.focusColumnIndex = 0;
-    }
-  }
-  handleCellFocus(e) {
-    this.focusColumnIndex = this.cellElements.indexOf(e.target);
-    this.$emit("row-focused", this);
-  }
-  handleKeydown(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    let newFocusColumnIndex = 0;
-    switch (e.key) {
-      case keyArrowLeft:
-        newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-        this.cellElements[newFocusColumnIndex].focus();
-        e.preventDefault();
-        break;
-      case keyArrowRight:
-        newFocusColumnIndex = Math.min(
-          this.cellElements.length - 1,
-          this.focusColumnIndex + 1
-        );
-        this.cellElements[newFocusColumnIndex].focus();
-        e.preventDefault();
-        break;
-      case keyHome:
-        if (!e.ctrlKey) {
-          this.cellElements[0].focus();
-          e.preventDefault();
-        }
-        break;
-      case keyEnd:
-        if (!e.ctrlKey) {
-          this.cellElements[this.cellElements.length - 1].focus();
-          e.preventDefault();
-        }
-        break;
-    }
-  }
-  updateItemTemplate() {
-    this.activeCellItemTemplate = this.rowType === DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
-  }
-  /**
-   * @internal
-   */
-  ariaSelectedChanged(oldValue, newValue) {
-    super.ariaSelectedChanged(oldValue, newValue);
-    this._selectable = newValue !== null;
-    this.selected = newValue === "true";
-  }
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr({ attribute: "grid-template-columns" })
-], DataGridRow.prototype, "gridTemplateColumns");
-__decorateClass$1([
-  attr({ attribute: "row-type" })
-], DataGridRow.prototype, "rowType");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "rowData");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "columnDefinitions");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "cellItemTemplate");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "headerCellItemTemplate");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "rowIndex");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "activeCellItemTemplate");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "defaultCellItemTemplate");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "defaultHeaderCellItemTemplate");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  observable
-], DataGridRow.prototype, "_selectable");
-__decorateClass$1([
-  attr({ mode: "boolean" })
-], DataGridRow.prototype, "selected");
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const DataGridSelectionMode = {
-  none: "none",
-  singleRow: "single-row",
-  multiRow: "multi-row",
-  singleCell: "single-cell",
-  multiCell: "multi-cell"
-};
-const _DataGrid = class _DataGrid extends VividElement {
-  constructor() {
-    super();
-    this.noTabbing = false;
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.generateHeader = GenerateHeaderOptions.default;
-    this.rowsData = [];
-    this.columnDefinitions = null;
-    this.focusRowIndex = 0;
-    this.focusColumnIndex = 0;
-    /**
-     * @internal
-     */
-    this.fixedColumnsPositions = [];
-    this.behaviorOrchestrator = null;
-    this.generatedHeader = null;
-    this.isUpdatingFocus = false;
-    this.pendingFocusUpdate = false;
-    this.rowindexUpdateQueued = false;
-    this.columnDefinitionsStale = true;
-    this.generatedGridTemplateColumns = "";
-    this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
-      if (this.rowElements.length === 0) {
-        this.focusRowIndex = 0;
-        this.focusColumnIndex = 0;
-        return;
-      }
-      const focusRowIndex = Math.max(
-        0,
-        Math.min(this.rowElements.length - 1, rowIndex)
-      );
-      const focusRow = this.rowElements[focusRowIndex];
-      const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
-      );
-      const focusColumnIndex = Math.max(
-        0,
-        Math.min(cells.length - 1, columnIndex)
-      );
-      const focusTarget = cells[focusColumnIndex];
-      if (scrollIntoView && this.scrollHeight !== this.clientHeight && (focusRowIndex < this.focusRowIndex && this.scrollTop > 0 || focusRowIndex > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight)) {
-        focusTarget.scrollIntoView({ block: "center", inline: "center" });
-      }
-      focusTarget.focus();
-    };
-    this.onChildListChange = (mutations, _) => {
-      /* v8 ignore else -- @preserve */
-      if (mutations && mutations.length) {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
-              newNode.columnDefinitions = this.columnDefinitions;
-            }
-          });
-        });
-        this.queueRowIndexUpdate();
-      }
-    };
-    this.queueRowIndexUpdate = () => {
-      if (!this.rowindexUpdateQueued) {
-        this.rowindexUpdateQueued = true;
-        Updates$1.enqueue(this.updateRowIndexes);
-      }
-    };
-    this.updateRowIndexes = () => {
-      let newGridTemplateColumns = this.gridTemplateColumns;
-      if (newGridTemplateColumns === void 0) {
-        if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
-          const firstRow = this.rowElements[0];
-          this.generatedGridTemplateColumns = new Array(
-            firstRow.cellElements.length
-          ).fill("1fr").join(" ");
-        }
-        newGridTemplateColumns = this.generatedGridTemplateColumns;
-      }
-      this.rowElements.forEach((element, index) => {
-        const thisRow = element;
-        thisRow.rowIndex = index;
-        thisRow.gridTemplateColumns = newGridTemplateColumns;
-        if (this.columnDefinitionsStale) {
-          thisRow.columnDefinitions = this.columnDefinitions;
-        }
-      });
-      this.rowindexUpdateQueued = false;
-      this.columnDefinitionsStale = false;
-    };
-    this.#handleKeypress = (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        this.#handleClick(e);
-      }
-    };
-    this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
-        return;
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
-        return;
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
-      }
-    };
-    this.#handleCellSelection = ({
-      target,
-      ctrlKey,
-      shiftKey,
-      metaKey
-    }) => {
-      const cell = target;
-      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
-        cell.selected = !this.#selectedCells.includes(cell);
-      } else {
-        const cacheTargetSelection = cell.selected;
-        this._resetSelection(true);
-        cell.selected = !cacheTargetSelection;
-      }
-    };
-    this.#handleRowSelection = ({
-      target,
-      ctrlKey,
-      shiftKey,
-      metaKey
-    }) => {
-      const row = target.parentNode;
-      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
-        row.selected = !this.#selectedRows.includes(row);
-      } else {
-        const cacheTargetSelection = row.selected;
-        this._resetSelection(true);
-        row.selected = !cacheTargetSelection;
-      }
-    };
-    this.#changeHandler = {
-      handleChange(dataGrid, propertyName) {
-        /* v8 ignore else -- @preserve */
-        if (propertyName === "columnDefinitions") {
-          /* v8 ignore else -- @preserve */
-          if (dataGrid.$fastController.isConnected) {
-            dataGrid.toggleGeneratedHeader();
-          }
-        }
-      }
-    };
-    /**
-     * @internal
-     */
-    this._resetSelection = (clear = false) => {
-      const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
-      );
-      const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type="default"]')
-      );
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        for (const cell of cells) {
-          cell._selectable = true;
-          cell.selected = clear ? false : cell.selected || false;
-        }
-        for (const row of rows) {
-          row._selectable = false;
-          row.selected = false;
-        }
-      }
-      if (this.selectionMode === DataGridSelectionMode.none) {
-        for (const element of [...cells, ...rows]) {
-          element._selectable = false;
-          element.selected = false;
-        }
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        for (const cell of cells) {
-          cell._selectable = false;
-          cell.selected = false;
-        }
-        for (const row of rows) {
-          row._selectable = true;
-          row.selected = clear ? false : row.selected || false;
-        }
-      }
-    };
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeypress);
-  }
-  /**
-   *  generates a gridTemplateColumns based on columndata array
-   */
-  static generateTemplateColumns(columnDefinitions) {
-    let templateColumns = "";
-    columnDefinitions.forEach((_) => {
-      templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
-    });
-    return templateColumns;
-  }
-  /**
-   * @internal
-   */
-  noTabbingChanged() {
-    if (this.$fastController.isConnected) {
-      this.#setTabIndex();
-    }
-  }
-  #setTabIndex() {
-    this.setAttribute(
-      "tabIndex",
-      this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
-    );
-  }
-  /**
-   * @internal
-   */
-  generateHeaderChanged() {
-    if (this.$fastController.isConnected) {
-      this.toggleGeneratedHeader();
-    }
-  }
-  /**
-   * @internal
-   */
-  gridTemplateColumnsChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.$fastController.isConnected) {
-      this.updateRowIndexes();
-      if (this.fixedColumns && this.fixedColumns > 0) {
-        this.applyFixedColumns();
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  rowsDataChanged() {
-    if (this.columnDefinitions === null && this.rowsData.length > 0) {
-      this.columnDefinitions = _DataGrid.generateColumns(this.rowsData[0]);
-    }
-    if (this.$fastController.isConnected) {
-      this.toggleGeneratedHeader();
-    }
-  }
-  /**
-   * @internal
-   */
-  columnDefinitionsChanged() {
-    if (this.columnDefinitions === null) {
-      this.generatedGridTemplateColumns = "";
-      return;
-    }
-    this.generatedGridTemplateColumns = _DataGrid.generateTemplateColumns(
-      this.columnDefinitions
-    );
-    /* v8 ignore if -- @preserve */
-    if (this.$fastController.isConnected) {
-      this.columnDefinitionsStale = true;
-      this.queueRowIndexUpdate();
-    }
-  }
-  /**
-   * @internal
-   */
-  headerCellItemTemplateChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.$fastController.isConnected) {
-      if (this.generatedHeader !== null) {
-        this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  focusRowIndexChanged() {
-    if (this.$fastController.isConnected) {
-      this.queueFocusUpdate();
-    }
-  }
-  /**
-   * @internal
-   */
-  focusColumnIndexChanged() {
-    if (this.$fastController.isConnected) {
-      this.queueFocusUpdate();
-    }
-  }
-  /**
-   * @internal
-   */
-  fixedColumnsChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.$fastController.isConnected) {
-      this.applyFixedColumns();
-      this.setupResizeObserver();
-    }
-  }
-  /**
-   * @internal
-   */
-  setupResizeObserver() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = void 0;
-    }
-    if (typeof ResizeObserver !== "undefined" && this.fixedColumns && this.fixedColumns > 0) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.applyFixedColumns();
-      });
-      this.resizeObserver.observe(this);
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    /* v8 ignore else -- @preserve */
-    if (this.rowItemTemplate === void 0) {
-      this.rowItemTemplate = this.defaultRowItemTemplate;
-    }
-    /* v8 ignore else -- @preserve */
-    if (this.behaviorOrchestrator === null) {
-      this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
-      this.$fastController.addBehavior(this.behaviorOrchestrator);
-      this.behaviorOrchestrator.addBehaviorFactory(
-        new RepeatDirective(
-          normalizeBinding((x) => x.rowsData),
-          normalizeBinding((x) => x.rowItemTemplate),
-          { positioning: true }
-        ),
-        this.appendChild(document.createComment(""))
-      );
-    }
-    this.toggleGeneratedHeader();
-    this.addEventListener("row-focused", this.handleRowFocus);
-    this.addEventListener(eventFocus, this.handleFocus);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
-    this.addEventListener(eventFocusOut, this.handleFocusOut);
-    this.observer = new MutationObserver(this.onChildListChange);
-    this.observer.observe(this, { childList: true });
-    this.setupResizeObserver();
-    Updates$1.enqueue(this.queueRowIndexUpdate);
-    this.#setTabIndex();
-    Observable.getNotifier(this).subscribe(
-      this.#changeHandler,
-      "columnDefinitions"
-    );
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("row-focused", this.handleRowFocus);
-    this.removeEventListener(eventFocus, this.handleFocus);
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
-    this.removeEventListener(
-      eventFocusOut,
-      this.handleFocusOut
-    );
-    this.observer.disconnect();
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = void 0;
-    }
-    this.generatedHeader = null;
-    Observable.getNotifier(this).unsubscribe(
-      this.#changeHandler,
-      "columnDefinitions"
-    );
-  }
-  /**
-   * @internal
-   */
-  handleRowFocus(e) {
-    this.isUpdatingFocus = true;
-    const focusRow = e.target;
-    this.focusRowIndex = this.rowElements.indexOf(focusRow);
-    this.focusColumnIndex = focusRow.focusColumnIndex;
-    this.setAttribute("tabIndex", "-1");
-    this.isUpdatingFocus = false;
-  }
-  /**
-   * @internal
-   */
-  handleFocus(_) {
-    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
-  }
-  /**
-   * @internal
-   */
-  handleFocusOut(e) {
-    if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
-      this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
-    }
-  }
-  /**
-   * @internal
-   */
-  handleKeydown(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    let newFocusRowIndex;
-    const maxIndex = this.rowElements.length - 1;
-    const currentGridBottom = this.offsetHeight + this.scrollTop;
-    const lastRow = this.rowElements[maxIndex];
-    switch (e.key) {
-      case keyArrowUp:
-        e.preventDefault();
-        this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
-        break;
-      case keyArrowDown:
-        e.preventDefault();
-        this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
-        break;
-      case keyPageUp:
-        e.preventDefault();
-        if (this.rowElements.length === 0) {
-          this.focusOnCell(0, 0, false);
-          break;
-        }
-        if (this.focusRowIndex === 0) {
-          this.focusOnCell(0, this.focusColumnIndex, false);
-          return;
-        }
-        newFocusRowIndex = this.focusRowIndex - 1;
-        for (newFocusRowIndex; newFocusRowIndex >= 0; newFocusRowIndex--) {
-          const thisRow = this.rowElements[newFocusRowIndex];
-          if (thisRow.offsetTop < this.scrollTop) {
-            this.scrollTop = thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
-            break;
-          }
-        }
-        this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-        break;
-      case keyPageDown:
-        e.preventDefault();
-        if (this.rowElements.length === 0) {
-          this.focusOnCell(0, 0, false);
-          break;
-        }
-        if (this.focusRowIndex >= maxIndex || lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
-          this.focusOnCell(maxIndex, this.focusColumnIndex, false);
-          return;
-        }
-        newFocusRowIndex = this.focusRowIndex + 1;
-        for (newFocusRowIndex; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
-          const thisRow = this.rowElements[newFocusRowIndex];
-          if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
-            let stickyHeaderOffset = 0;
-            if (this.generateHeader === GenerateHeaderOptions.sticky && this.generatedHeader !== null) {
-              stickyHeaderOffset = this.generatedHeader.clientHeight;
-            }
-            this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
-            break;
-          }
-        }
-        this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-        break;
-      case keyHome: {
-        /* v8 ignore else -- @preserve */
-        if (e.ctrlKey) {
-          e.preventDefault();
-          this.focusOnCell(0, 0, true);
-        }
-        break;
-      }
-      case keyEnd: {
-        /* v8 ignore else -- @preserve */
-        if (e.ctrlKey && this.columnDefinitions !== null) {
-          e.preventDefault();
-          this.focusOnCell(
-            this.rowElements.length - 1,
-            this.columnDefinitions.length - 1,
-            true
-          );
-        }
-        break;
-      }
-    }
-  }
-  queueFocusUpdate() {
-    if (this.isUpdatingFocus && this.contains(document.activeElement)) {
-      return;
-    }
-    if (this.pendingFocusUpdate === false) {
-      this.pendingFocusUpdate = true;
-      Updates$1.enqueue(() => this.updateFocus());
-    }
-  }
-  updateFocus() {
-    this.pendingFocusUpdate = false;
-    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
-  }
-  toggleGeneratedHeader() {
-    if (this.generatedHeader !== null) {
-      this.removeChild(this.generatedHeader);
-      this.generatedHeader = null;
-    }
-    if (this.generateHeader !== GenerateHeaderOptions.none && this.columnDefinitions !== null) {
-      const generatedHeaderElement = document.createElement(
-        this.rowElementTag
-      );
-      this.generatedHeader = generatedHeaderElement;
-      this.generatedHeader.columnDefinitions = this.columnDefinitions;
-      this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
-      this.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
-      /* v8 ignore else -- @preserve */
-      if (this.firstChild !== null) {
-        this.insertBefore(generatedHeaderElement, this.firstChild);
-      }
-      return;
-    }
-  }
-  /**
-   *
-   *
-   * @internal
-   */
-  slottedRowElementsChanged(_oldValue, _newValue) {
-    this._resetSelection();
-  }
-  get #selectedRows() {
-    return this.rowElements.filter((row) => row.selected);
-  }
-  get #selectedCells() {
-    return this.rowElements.reduce((acc, row) => {
-      const rowChildren = Array.from(row.children);
-      const selectedCells = rowChildren.filter(
-        (cell) => cell.selected
-      );
-      return acc.concat(selectedCells);
-    }, []);
-  }
-  selectionModeChanged(oldValue) {
-    if (oldValue === void 0) {
-      Updates$1.enqueue(this._resetSelection);
-      return;
-    }
-    this._resetSelection(true);
-  }
-  #handleKeypress;
-  #handleClick;
-  #handleCellSelection;
-  #handleRowSelection;
-  #changeHandler;
-  static generateColumns(rowData) {
-    return Object.keys(rowData).map((property, index) => {
-      return {
-        columnDataKey: property,
-        gridColumn: `${index}`
-      };
-    });
-  }
-  /**
-   * @internal
-   */
-  applyFixedColumns() {
-    if (!this.fixedColumns || this.fixedColumns <= 0) {
-      this.clearFixedColumns();
-      return;
-    }
-    this.calculateFixedColumnPositions();
-    this.applyFixedColumnStyling();
-  }
-  /**
-   * Applies fixed columns styling using cached positions
-   * @internal
-   */
-  applyFixedColumnStyling() {
-    this.rowElements.forEach((row) => {
-      const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
-      );
-      this.fixedColumnsPositions.forEach((position, index) => {
-        /* v8 ignore else -- @preserve */
-        if (index < cells.length) {
-          const gridCell = cells[index];
-          /* v8 ignore else -- @preserve */
-          if (typeof gridCell.setFixedPosition === "function") {
-            gridCell.setFixedPosition(`${position}px`);
-          }
-        }
-      });
-    });
-  }
-  /**
-   * Calculates and caches fixed columns positions based on current layout
-   * @internal
-   */
-  calculateFixedColumnPositions() {
-    this.fixedColumnsPositions = [];
-    if (this.rowElements.length === 0) return;
-    const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
-    );
-    let accumulator = 0;
-    for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
-      this.fixedColumnsPositions.push(accumulator);
-      accumulator += cells[i].offsetWidth;
-    }
-  }
-  /**
-   * Clears all fixed columns state and styling
-   * @internal
-   */
-  clearFixedColumns() {
-    if (this.rowElements.length === 0) {
-      this.fixedColumnsPositions = [];
-      return;
-    }
-    this.rowElements.forEach((row) => {
-      const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
-      );
-      this.fixedColumnsPositions.forEach((_, index) => {
-        /* v8 ignore else -- @preserve */
-        if (index < cells.length) {
-          const gridCell = cells[index];
-          /* v8 ignore else -- @preserve */
-          if (typeof gridCell.setFixedPosition === "function") {
-            gridCell.setFixedPosition(void 0);
-          }
-        }
-      });
-    });
-    this.fixedColumnsPositions = [];
-  }
-};
-__decorateClass([
-  attr({ attribute: "no-tabbing", mode: "boolean" })
-], _DataGrid.prototype, "noTabbing");
-__decorateClass([
-  attr({ attribute: "generate-header" })
-], _DataGrid.prototype, "generateHeader");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ attribute: "grid-template-columns" })
-], _DataGrid.prototype, "gridTemplateColumns");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "rowsData");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "columnDefinitions");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "rowItemTemplate");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "cellItemTemplate");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "headerCellItemTemplate");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "focusRowIndex");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "focusColumnIndex");
-__decorateClass([
-  attr({ attribute: "fixed-columns", converter: nullableNumberConverter })
-], _DataGrid.prototype, "fixedColumns");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "defaultRowItemTemplate");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "rowElementTag");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "rowElements");
-__decorateClass([
-  observable
-], _DataGrid.prototype, "slottedRowElements");
-__decorateClass([
-  attr({ attribute: "selection-mode" })
-], _DataGrid.prototype, "selectionMode");
-let DataGrid = _DataGrid;
-
-function createRowItemTemplate(context) {
-  const rowTag = context.tagFor(DataGridRow);
-  return html`
-    <${rowTag}
-        :rowData="${(x) => x}"
-        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
-    ></${rowTag}>
-`;
-}
-function getMultiSelectAriaState(x) {
-  return x.selectionMode === void 0 || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes("multi") ? "true" : "false";
-}
-function setHeaderRow(x) {
-  if (x.columnDefinitions === null) {
-    const headerRow = x.querySelector(
-      '[cell-type="columnheader"]'
-    )?.parentElement;
-    if (x.generateHeader === GenerateHeaderOptions.default && (headerRow?.getAttribute("row-type") === DataGridRowTypes.header || headerRow?.getAttribute("row-type") === DataGridRowTypes.stickyHeader)) {
-      return;
-    }
-    if (headerRow) {
-      const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
-      headerRow.setAttribute("row-type", rowType);
-    }
-  }
-}
-function handleColumnSort(_, { event }) {
-  event.stopPropagation();
-}
-const DataGridTemplate = (context) => {
-  const rowItemTemplate = createRowItemTemplate(context);
-  const rowTag = context.tagFor(DataGridRow, true);
-  return html`
-		<template
-			aria-multiselectable="${getMultiSelectAriaState}"
-			role="grid"
-			tabindex="0"
-			@sort="${handleColumnSort}"
-			:rowElementTag="${() => rowTag}"
-			:defaultRowItemTemplate="${rowItemTemplate}"
-			${children({
-    property: "rowElements",
-    filter: elements("[role=row],[data-vvd-component=data-grid-row]")
-  })}
-		>
-			<div class="base">
-				${setHeaderRow}
-				<slot ${slotted("slottedRowElements")}></slot>
-			</div>
-		</template>
-	`;
-};
-
-function calculateAriaSelectedValue$1(x) {
-  if (x._selectable && x.selected) return "true";
-  if (x._selectable && !x.selected) return "false";
-  return null;
-}
-function createCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
-  return html`
-    <${cellTag}
-        cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
-        grid-column="${(_, c) => c.index + 1}"
-        :rowData="${(_, c) => c.parent.rowData}"
-        :columnDefinition="${(x) => x}"
-				selected="${(_, c) => c.parent.ariaSelected === "true" ? true : null}"
-    ></${cellTag}>
-`;
-}
-function createHeaderCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
-  return html`
-    <${cellTag}
-        cell-type="columnheader"
-        grid-column="${(_, c) => c.index + 1}"
-        :columnDefinition="${(x) => x}"
-    ></${cellTag}>
-`;
-}
-const DataGridRowTemplate = (context) => {
-  const cellItemTemplate = createCellItemTemplate(context);
-  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  const getBaseClasses = (x) => classNames("base", ["selected", !!x.selected]);
-  return html`
-		<template
-			${applyHostSemantics({
-    role: "row",
-    ariaSelected: calculateAriaSelectedValue$1
-  })}
-			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
-			:defaultCellItemTemplate="${cellItemTemplate}"
-			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-			${children({
-    property: "cellElements",
-    filter: elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
-    )
-  })}
-		>
-			<div
-				class="${getBaseClasses}"
-				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
-			>
-				<slot ${slotted("slottedCellElements")}></slot>
-			</div>
-		</template>
-	`;
-};
-
-function shouldShowSortIcons(x) {
-  return x.cellType === "columnheader" && x.sortDirection !== void 0 && x.sortDirection !== DataGridCellSortStates.other;
-}
-function getSortIcon(x) {
-  if (x.sortDirection === DataGridCellSortStates.ascending) {
-    return "sort-asc-solid";
-  }
-  if (x.sortDirection === DataGridCellSortStates.descending) {
-    return "sort-desc-solid";
-  }
-  return "sort-solid";
-}
-function calculateAriaSelectedValue(x) {
-  if (x._selectable && x.selected) return "true";
-  if (x._selectable && !x.selected) return "false";
-  return null;
-}
-function renderSortIcons(c) {
-  const iconTag = c.tagFor(Icon);
-  return html`
-		${when(
-    shouldShowSortIcons,
-    html`
-				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`
-  )}
-	`;
-}
-function shouldAnnounceSortState(x) {
-  return x.cellType === DataGridCellTypes.columnHeader && x.sortDirection !== void 0;
-}
-function getSortStateKey(x) {
-  return x.sortDirection ?? DataGridCellSortStates.none;
-}
-function getLocalizedSortStatus(x) {
-  const direction = getSortStateKey(x);
-  const sortStatus = x.locale.dataGrid.cell.sortStatus;
-  return sortStatus?.[direction];
-}
-function getLocalizedSortInstruction(x) {
-  const direction = getSortStateKey(x);
-  const sortInstruction = x.locale.dataGrid.cell.sortInstruction;
-  return sortInstruction?.[direction];
-}
-function getSortAnnouncement(x) {
-  return [getLocalizedSortStatus(x), getLocalizedSortInstruction(x)].filter((part) => !!part).join(" ").trim();
-}
-function handleKeyDown(x, e) {
-  if (e.key === keyEnter || e.key === keySpace) {
-    const target = e.target;
-    if (target.closest('[slot="action-items"]')) return true;
-    x._handleInteraction();
-  }
-  return true;
-}
-function handleClick(x, e) {
-  const target = e.target;
-  if (target.closest('[slot="action-items"]')) return true;
-  x._handleInteraction();
-  return true;
-}
-const DataGridCellTemplate = (context) => {
-  const visuallyHiddenTagName = context.tagFor(VisuallyHidden);
-  const getBaseClasses = ({
-    selected,
-    _actionItemsSlottedContent
-  }) => classNames(
-    "base",
-    ["selected", !!selected],
-    ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]
-  );
-  return html`
-		<template
-			tabindex="-1"
-			${applyHostSemantics({
-    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
-    ariaSelected: calculateAriaSelectedValue,
-    ariaSort: (x) => x.sortDirection ?? null
-  })}
-			@click="${(x, c) => handleClick(x, c.event)}"
-			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
-		>
-			<div class="${getBaseClasses}">
-				<div
-					class="content"
-					role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
-				>
-					${(x) => x.selected ? html`<${visuallyHiddenTagName}
-								data-announcement="selection"
-							>
-								${(x2) => x2.locale.dataGrid.cell.selected}
-							</${visuallyHiddenTagName}>` : null}
-					<slot></slot>
-					${when(
-    shouldShowSortIcons,
-    html`<${visuallyHiddenTagName}
-							data-announcement="button-role"
-						>
-							${(x) => x.locale.dataGrid.cell.button}
-						</${visuallyHiddenTagName}>
-						`
-  )}
-					${when(
-    shouldAnnounceSortState,
-    html`<${visuallyHiddenTagName}
-							aria-live="polite"
-							data-announcement="sort-state"
-						>
-							${getSortAnnouncement}
-						</${visuallyHiddenTagName}>`
-  )}
-					${(_) => renderSortIcons(context)}
-				</div>
-				<slot
-					name="action-items"
-					${slotted("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-		</template>
-	`;
-};
-
-const dataGridCellDefinition = defineVividComponent(
-  "data-grid-cell",
-  DataGridCell,
-  DataGridCellTemplate,
-  [iconDefinition, visuallyHiddenDefinition],
-  {
-    styles: dataGridCellStyles
-  }
-);
-const dataGridRowDefinition = defineVividComponent(
-  "data-grid-row",
-  DataGridRow,
-  DataGridRowTemplate,
-  [dataGridCellDefinition],
-  {
-    styles: dataGridRowStyles
-  }
-);
-const dataGridDefinition = defineVividComponent(
-  "data-grid",
-  DataGrid,
-  DataGridTemplate,
-  [dataGridRowDefinition],
-  {
-    styles: dataGridStyles
-  }
-);
-const registerDataGrid = createRegisterFunction(dataGridDefinition);
-
+import "../unbundled/definition2.js";
+import { a as DataGrid, i as registerDataGrid, n as dataGridDefinition, o as DataGridRow, r as dataGridRowDefinition, s as DataGridCell, t as dataGridCellDefinition } from "../unbundled/definition32.js";
 export { DataGridCell as VwcDataGridCellElement, DataGrid as VwcDataGridElement, DataGridRow as VwcDataGridRowElement, dataGridCellDefinition, dataGridDefinition, dataGridRowDefinition, registerDataGrid };