ngx-devextreme-zoneless 3.0.0 → 4.0.0

package/README.md

@@ -77,8 +77,9 @@ export class OrdersComponent {
 ```
 
 Or import everything at once with `DX_SIGNAL_DIRECTIVES` (also available per
-family: `DX_VALUE_DIRECTIVES`, `DX_NAVIGATION_DIRECTIVES`,
-`DX_VISIBLE_DIRECTIVES`, `DX_DATA_DIRECTIVES`, `DX_VISUALIZATION_DIRECTIVES`).
+family: `DX_VALUE_DIRECTIVES`, `DX_OPENED_DIRECTIVES`, `DX_EDITOR_STATE_DIRECTIVES`,
+`DX_NAVIGATION_DIRECTIVES`, `DX_VISIBLE_DIRECTIVES`, `DX_DATA_DIRECTIVES`,
+`DX_VISUALIZATION_DIRECTIVES`).
 
 ## Choosing your binding style
 
@@ -107,10 +108,13 @@ invisible, and is what the rest of this package covers.
 ## What is covered
 
 Two-way directives exist wherever a widget has genuine user-mutable state —
-`[(dxValue)]` on every editor, selection and grid state on the data widgets,
-`[(dxVisible)]`/`[(dxOpened)]`/`[(dxSelectedIndex)]` on overlays and
-navigation, chart point selection — each typed to the widget's real value
-type. The
+`[(dxValue)]` and `[(dxOpened)]` on the editors, selection, focus, editing
+state, deferred selection and layout state on the grids and the card view,
+navigation, selection and focus on the file manager, expansion on the trees,
+`[(dxVisible)]`/`[(dxOpened)]`/`[(dxSelectedIndex)]`/`[(dxSelectedItemKeys)]`
+on overlays and navigation, pane sizes and dimensions on the splitter and the
+resizable, chart point selection and both axes' visual ranges — each typed to
+the widget's real value type. The
 **[directive catalog](https://github.com/CaffeinatedCoder/ngx-devextreme-zoneless/blob/main/docs/directives.md)**
 is the authoritative table. Components without a dedicated directive
 (PivotGrid, Sortable, Menu, …) are fully covered by the
@@ -129,20 +133,30 @@ complete DevExtreme.AspNet.Data loadOptions wire protocol through your own
 
 ```
 ngx-devextreme-zoneless            → everything (re-exports the below)
-ngx-devextreme-zoneless/core       → engine, types, bases, data-source/remote helpers
-ngx-devextreme-zoneless/editors    → [(dxValue)] directives
-ngx-devextreme-zoneless/navigation → [(dxSelectedIndex)], [(dxOpened)], …
+ngx-devextreme-zoneless/core       → engine, types, bases, signal factories
+ngx-devextreme-zoneless/data-source → dxArrayStoreSource, dxReloadOn, dxRemoteStore, dxLoadOptionsParams
+ngx-devextreme-zoneless/editors    → [(dxValue)], [(dxOpened)], [(dxZoomLevel)], [(dxInputFieldText)]
+ngx-devextreme-zoneless/navigation → [(dxSelectedIndex)], [(dxOpened)], splitter and resizable layout, …
 ngx-devextreme-zoneless/overlays   → [(dxVisible)] directives
-ngx-devextreme-zoneless/data       → grid/form/scheduler/tree directives
+ngx-devextreme-zoneless/data       → grid/card-view/file-manager/form/scheduler/tree directives
 ngx-devextreme-zoneless/visualization → chart selection, range selector
 ngx-devextreme-zoneless/forms      → [dxFieldState] (Signal Forms; NOT re-exported by the main entry)
 ```
 
-Importing from the main entry is fine: bundlers drop the families you don't
-use at module level (CI proves it — a probe app importing a single editor
-directive is asserted to contain no Gantt, Scheduler, HtmlEditor, chart or
-grid modules). Import from a family entry point when you want the split to be
-explicit.
+No entry point of this package carries widget runtime: every directive holds
+its `devextreme-angular` wrapper class as a type-only import and resolves the
+host through the wrapper's own `NestedOptionHost` provider, so the only widget
+code in your bundle is what you import yourself. That matters under code
+splitting, where bundlers assign files to chunks by reachability rather than by
+use — a directive FESM that imported the grid wrapper would put the grid into
+every lazy route touching that FESM as soon as one route used the grid. CI
+measures both halves: a static scan of the built entry points rejects any
+runtime `devextreme-angular/ui/` import, and a six-chunk probe app asserts that
+a chunk importing TreeView selection next to a grid page, or a text-box
+directive next to an html-editor one, keeps only its own widget in its static
+closure. Importing from the main entry is fine — its `export *` barrel over
+separate FESMs was measured not to re-couple them — and the family entry points
+exist to make the split explicit.
 
 ## Documentation
 
@@ -157,16 +171,22 @@ explicit.
 
 Working on the package itself:
 [development](https://github.com/CaffeinatedCoder/ngx-devextreme-zoneless/blob/main/docs/development.md)
-— builds, the smoke app's four screens, the e2e suite and the tree-shaking
-probe.
+— builds, the smoke app's six screens, the e2e suite, the tree-shaking
+probe and the server-render measurement.
 
 ## Verified, not assumed
 
 Running DevExtreme zoneless is outside the vendor-supported configuration, so
 the claim this package makes is exactly as strong as its suite: a Playwright
-run drives every binding family through a real zoneless app — both directions,
-widget re-creation, slow and failing endpoints against a wire-protocol stub —
-on every push. The compile-time surface has its own contract tests
+run drives every directive in the catalog through a real zoneless app — both
+directions on every widget, widget re-creation, signal-driven `*dxTemplate`
+content, slow and failing endpoints against a wire-protocol stub — on every
+push, and a server render of every screen under `@angular/platform-server`
+pins that the same app bootstraps, settles and raises nothing on the server
+with the vendor's `DxServerModule` in place (measured, not assumed: the vendor
+constructs every widget there, and its viz widgets are empty stand-ins — see
+[development](https://github.com/CaffeinatedCoder/ngx-devextreme-zoneless/blob/main/docs/development.md)).
+The compile-time surface has its own contract tests
 ([examples/type-tests.ts](examples/type-tests.ts)): option names, event names
 and value types are pinned so a vendor rename fails the build instead of
 shipping.

package/fesm2022/ngx-devextreme-zoneless-core.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, inject, Injector, DestroyRef, afterNextRender, effect, untracked, signal, computed, Directive, model, input } from '@angular/core';
-import CustomStore from 'devextreme/data/custom_store';
-import DataSource from 'devextreme/data/data_source';
+import { assertInInjectionContext, inject, Injector, DestroyRef, afterNextRender, effect, untracked, signal, Directive, model, input } from '@angular/core';
+import { NestedOptionHost } from 'devextreme-angular/core';
 
 /**
  * Structural equality used to break the two-way binding echo cycle
@@ -425,6 +424,34 @@ function dxInstanceSignal(hostRef, injector) {
     }, resolvedInjector);
     return instance.asReadonly();
 }
+/**
+ * Injects the devextreme-angular component hosting the *current element*
+ * without naming its class — and therefore without a runtime import of
+ * `devextreme-angular/ui/<widget>`:
+ *
+ * ```ts
+ * const host = injectDxHost<DxTextBoxComponent>(); // `DxTextBoxComponent` is a type-only import
+ * ```
+ *
+ * Every generated wrapper lists `NestedOptionHost` in its own `providers` and
+ * calls `setHost(this)` in its constructor (verified against devextreme-angular
+ * 26.1.4 for all forty adapted widgets), so the token resolves at the widget's
+ * element injector and points at the wrapper itself. Nested option components
+ * (`dxo-*`, `dxi-*`) get their *own* instance on their own element and never
+ * overwrite the widget's. The injection is strictly `{ self: true }`.
+ *
+ * This is what every shipped directive uses, and the reason is bundle
+ * isolation rather than taste: a value import of the wrapper class is a
+ * module-level edge from the directive's FESM to the widget, and esbuild
+ * assigns files to chunks by reachability — so a widget that is live for one
+ * lazy route becomes part of every other route's closure that shares the FESM.
+ * With the class as a type-only import the edge does not exist. The caller
+ * names the type; the directive's selector (`dx-text-box[dxValue]`) is what
+ * makes it true.
+ */
+function injectDxHost() {
+    return inject(NestedOptionHost, { self: true }).getHost();
+}
 /**
  * Injects a devextreme-angular component from the *current element* and
  * exposes its widget instance as a signal that becomes non-`undefined` once
@@ -444,400 +471,6 @@ function injectDxInstance(token) {
     return dxInstanceSignal(inject(token, { self: true }));
 }
 
-/**
- * Internal: invokes `run` whenever one of the dependency signals changes.
- * The first execution only collects dependencies — reloads happen on changes.
- * With `debounceMs > 0` the invocation is trailing-debounced; the pending
- * timer is cleared both by the next change and by injector destruction (the
- * effect's cleanup runs in either case). `run` executes untracked, so it can
- * read signals without creating subscriptions.
- *
- * Returns a function that drops a debounced run still waiting to fire,
- * reporting whether there was one. That lets a caller with its own refetch
- * path *adopt* a pending dependency change instead of racing it — see
- * `dxRemoteStore`'s `reload()`.
- *
- * Not exported from the public API — this is the one implementation behind
- * `dxReloadOn` and `dxRemoteStore`'s dependency-driven reloads.
- */
-function watchDxSignals(dependencies, run, options) {
-    const debounceMs = options.debounceMs ?? 0;
-    let first = true;
-    let pending;
-    effect((onCleanup) => {
-        for (const dependency of dependencies) {
-            dependency();
-        }
-        if (first) {
-            first = false;
-            return;
-        }
-        if (debounceMs > 0) {
-            const timer = setTimeout(() => {
-                pending = undefined;
-                untracked(run);
-            }, debounceMs);
-            pending = timer;
-            onCleanup(() => {
-                clearTimeout(timer);
-                if (pending === timer) {
-                    pending = undefined;
-                }
-            });
-        }
-        else {
-            untracked(run);
-        }
-    }, { injector: options.injector });
-    return () => {
-        if (pending === undefined) {
-            return false;
-        }
-        clearTimeout(pending);
-        pending = undefined;
-        return true;
-    };
-}
-
-/**
- * Wraps a `Signal<readonly T[]>` in a DevExtreme `DataSource` that reloads
- * whenever the signal changes — bind it to any `[dataSource]` input and the
- * widget follows the signal:
- *
- * ```ts
- * readonly orders = signal<readonly Order[]>([]);
- * readonly ordersSource = dxArrayStoreSource(this.orders, { key: 'id' });
- * // <dx-data-grid [dataSource]="ordersSource" />
- * ```
- *
- * The store loads in `'raw'` mode, so DevExtreme applies filtering, sorting
- * and paging client-side exactly as for a plain array. The source is disposed
- * when the injector is destroyed.
- */
-function dxArrayStoreSource(source, options = {}) {
-    if (options.injector === undefined) {
-        assertInInjectionContext(dxArrayStoreSource);
-    }
-    const injector = options.injector ?? inject(Injector);
-    const dataSource = new DataSource({
-        store: new CustomStore({
-            key: options.key,
-            loadMode: 'raw',
-            // `untracked` — loads must not create reactive subscriptions;
-            // reloading is driven by the effect below.
-            load: () => untracked(source),
-        }),
-    });
-    dxReloadOn(dataSource, [source], injector);
-    injector.get(DestroyRef).onDestroy(() => dataSource.dispose());
-    return dataSource;
-}
-/**
- * Triggers a reload whenever one of the dependency signals changes — the
- * missing link between external filter state held in signals and a
- * remote-loading `DataSource` (or grid), without hand-written `refresh()`
- * plumbing in every component:
- *
- * ```ts
- * readonly search = signal('');
- * readonly source = new DataSource({ store: createStore({ loadUrl: '/api/orders' }) });
- * constructor() {
- *   dxReloadOn(this.source, [this.search]);
- * }
- * ```
- *
- * The first run only collects dependencies; reloads happen on changes. For a
- * target that is not a `DataSource` (e.g. a grid instance living in a
- * signal), pass a callback: `dxReloadOn(() => this.grid()?.refresh(), [deps])`.
- */
-function dxReloadOn(target, dependencies, injector) {
-    if (injector === undefined) {
-        assertInInjectionContext(dxReloadOn);
-    }
-    const resolvedInjector = injector ?? inject(Injector);
-    const trigger = typeof target === 'function'
-        ? target
-        : 'reload' in target
-            ? () => target.reload()
-            : () => target.refresh();
-    watchDxSignals(dependencies, () => void trigger(), { injector: resolvedInjector });
-}
-
-/**
- * Wraps a remote load function in a DevExtreme `DataSource` with signal-based
- * loading state:
- *
- * ```ts
- * readonly search = signal('');
- * readonly orders = dxRemoteStore<Order, number>({
- *     key: 'id',
- *     deps: [this.search],
- *     debounce: 300,
- *     load: async (options, signal) => {
- *         const params = dxLoadOptionsParams(options);
- *         params.set('search', untracked(this.search));
- *         const response = await fetch(`/api/orders?${params}`, { signal });
- *         if (!response.ok) throw new Error(`orders load failed: ${response.status}`);
- *         return response.json();
- *     },
- * });
- * // <dx-data-grid [dataSource]="orders.dataSource" [remoteOperations]="true" />
- * // @if (orders.error()) { <button (click)="orders.reload()">retry</button> }
- * ```
- *
- * Semantics, aligned with Angular's `resource()`:
- * - every load gets an `AbortSignal`; a reload (dependency-driven or manual)
- *   aborts whatever is still in flight — last write wins, stale responses
- *   never overwrite newer ones and never surface stale errors;
- * - `error` reflects the most recent settled load and is cleared by the next
- *   successful one; `reload()` is the retry;
- * - dependency changes reset to page 0 (a new query is a new result set);
- *   manual `reload()` keeps the page (same query, fresh data) — unless a
- *   dependency change is still pending in the debounce window, which it adopts
- *   rather than races;
- * - widget search options are folded into `LoadOptions.filter` before `load`
- *   runs (`useDefaultSearch`, matching the vendor's own remote client), so
- *   the load function only ever deals in filter expressions.
- *
- * The store is load-only by design: create/update/delete intentionally stay
- * out of this API — pass a full `CustomStore` to the widget where you need
- * editing.
- */
-/**
- * Normalizes the counts in a `LoadResult` envelope.
- *
- * DevExtreme types `totalCount` and `groupCount` as `number`, but the wire
- * protocol's reference server implementations aggregate counts into a decimal
- * and spell a decimal as a **quoted JSON string** — so a conformant endpoint
- * may answer `"120"` where the typings promise `120`. Forwarded as-is, the
- * grid's pager arithmetic silently concatenates instead of adding: a measured
- * 120-row result renders as "Page 1 of 120 (1200 items)".
- *
- * Only these two fields are coerced, and only when the string parses as a
- * finite number. `summary` is deliberately left alone: it is positional and
- * may legitimately carry non-numeric aggregates (a `min` over a string or date
- * column), so blind coercion there would corrupt real values.
- */
-function normalizeCounts(result) {
-    if (Array.isArray(result) || result === null || typeof result !== 'object') {
-        return result;
-    }
-    let normalized;
-    for (const key of ['totalCount', 'groupCount']) {
-        const value = result[key];
-        if (typeof value !== 'string') {
-            continue;
-        }
-        const parsed = Number(value);
-        if (value.trim() === '' || !Number.isFinite(parsed)) {
-            continue;
-        }
-        normalized ??= { ...result };
-        normalized[key] = parsed;
-    }
-    return (normalized ?? result);
-}
-function dxRemoteStore(options) {
-    if (options.injector === undefined) {
-        assertInInjectionContext(dxRemoteStore);
-    }
-    const injector = options.injector ?? inject(Injector);
-    const pendingCount = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pendingCount" }] : /* istanbul ignore next */ []));
-    const lastError = signal(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lastError" }] : /* istanbul ignore next */ []));
-    let loadSequence = 0;
-    /** Query-scoped loads: superseded by `reload()`, aborted on destroy. */
-    const inFlightLoads = new Set();
-    /** Key-scoped lookups: aborted on destroy only — see `byKey` above. */
-    const inFlightByKey = new Set();
-    const trackedLoad = (loadOptions) => {
-        const sequence = ++loadSequence;
-        const controller = new AbortController();
-        inFlightLoads.add(controller);
-        pendingCount.update((count) => count + 1);
-        const settle = () => {
-            inFlightLoads.delete(controller);
-            pendingCount.update((count) => count - 1);
-        };
-        // A load function that is not declared `async` can throw *synchronously*
-        // while it builds its request (a bad dependency, a filter that will not
-        // serialize, …). Funnel that into the same rejection path — otherwise
-        // the tracking never settles and `isLoading` stays `true` forever while
-        // the reason never reaches `error`.
-        let pending;
-        try {
-            pending = options.load(loadOptions, controller.signal);
-        }
-        catch (reason) {
-            pending = Promise.reject(reason);
-        }
-        return Promise.resolve(pending).then((result) => {
-            settle();
-            if (sequence === loadSequence) {
-                lastError.set(undefined);
-            }
-            return normalizeCounts(result);
-        }, (reason) => {
-            settle();
-            if (controller.signal.aborted) {
-                // Superseded load: reject with DevExtreme's own
-                // cancellation token (the literal `'canceled'`), which the
-                // DataSource recognizes and drops without firing
-                // `loadError` — the widget never flashes its error UI for
-                // a load this store aborted on purpose.
-                throw 'canceled';
-            }
-            if (sequence === loadSequence) {
-                lastError.set(reason);
-            }
-            throw reason;
-        });
-    };
-    const userByKey = options.byKey;
-    const trackedByKey = userByKey === undefined
-        ? undefined
-        : (key) => {
-            const controller = new AbortController();
-            inFlightByKey.add(controller);
-            // Same synchronous-throw guard as `trackedLoad`, so a
-            // non-`async` `byKey` cannot leak its controller.
-            let pending;
-            try {
-                pending = userByKey(key, controller.signal);
-            }
-            catch (reason) {
-                pending = Promise.reject(reason);
-            }
-            return Promise.resolve(pending).finally(() => inFlightByKey.delete(controller));
-        };
-    const dataSource = new DataSource({
-        langParams: options.langParams,
-        store: new CustomStore({
-            key: options.key,
-            loadMode: 'processed',
-            useDefaultSearch: true,
-            load: trackedLoad,
-            byKey: trackedByKey,
-        }),
-    });
-    /** Aborts the query-scoped loads only — `byKey` deliberately survives. */
-    const abortInFlightLoads = () => {
-        for (const controller of inFlightLoads) {
-            controller.abort();
-        }
-    };
-    /** Drops a debounced dependency run still waiting; `true` if there was one. */
-    let cancelPendingDepsRun;
-    const reload = () => {
-        // Abort in-flight transport before starting over — the aborted loads
-        // reject as `'canceled'` (see trackedLoad), which DevExtreme drops
-        // silently. Deliberately NOT `dataSource.cancelAll()`: that method
-        // resets the internal operation-id counter, and the id reuse makes
-        // grid adapters discard the results of every subsequent load.
-        abortInFlightLoads();
-        // A dependency change still inside the debounce window describes the
-        // very refetch this call is asking for, so adopt it rather than race
-        // it: take the page-0 reset it implies and drop its timer. Racing was
-        // measured at four round trips against at most two on the same path,
-        // and moved the page out from under the user a few hundred
-        // milliseconds after they had already asked for fresh data. The
-        // adopted path costs one round trip or two: resetting the page and
-        // refetching are separate `DataSource` operations, and a widget
-        // sitting off page 0 usually interposes its current-page load before
-        // the page-0 one — though its internal load scheduling can collapse
-        // the pair into the page-0 load alone (measured both ways, 26.1.4).
-        if (cancelPendingDepsRun?.() === true) {
-            dataSource.pageIndex(0);
-        }
-        return Promise.resolve(dataSource.reload()).then(() => undefined, () => undefined);
-    };
-    const deps = options.deps ?? [];
-    if (deps.length > 0) {
-        // Dependencies describe the query, so a change starts a new result
-        // set: reset to the first page (mirroring `DataSource.filter()`
-        // semantics) and reload. The helper owns the debounce timer,
-        // including clearing it on injector destruction.
-        cancelPendingDepsRun = watchDxSignals(deps, () => {
-            dataSource.pageIndex(0);
-            void reload();
-        }, { debounceMs: options.debounce, injector });
-    }
-    injector.get(DestroyRef).onDestroy(() => {
-        abortInFlightLoads();
-        for (const controller of inFlightByKey) {
-            controller.abort();
-        }
-        dataSource.dispose();
-    });
-    return {
-        dataSource,
-        isLoading: computed(() => pendingCount() > 0),
-        error: lastError.asReadonly(),
-        reload,
-    };
-}
-function normalizeSorting(value) {
-    const list = Array.isArray(value) ? value : [value];
-    return list.map((entry) => {
-        if (typeof entry === 'object' && entry !== null && 'selector' in entry) {
-            return entry;
-        }
-        return { selector: entry, desc: false };
-    });
-}
-/**
- * Serializes `LoadOptions` into the query parameters understood by the
- * DevExtreme.AspNet.Data server libraries — the same wire format the
- * vendor's own `createStore({ loadUrl })` client produces: structured
- * options JSON-encoded (`filter`, `sort`, `group`, `select`, `totalSummary`,
- * `groupSummary`, `langParams`, with string `sort`/`group` entries normalized
- * to `{ selector }` objects), scalars plain (`skip`, `take`,
- * `requireTotalCount`, `requireGroupCount`).
- *
- * ```ts
- * const response = await fetch(`/api/orders?${dxLoadOptionsParams(options)}`, { signal });
- * ```
- */
-function dxLoadOptionsParams(loadOptions) {
-    const params = new URLSearchParams();
-    for (const key of ['skip', 'take', 'requireTotalCount', 'requireGroupCount']) {
-        const value = loadOptions[key];
-        if (value !== undefined && value !== null) {
-            params.set(key, String(value));
-        }
-    }
-    // `parentIds` carries the keys of the rows being expanded — the only
-    // loadOptions member a TreeList adds, and the one the protocol's reference
-    // .NET server does not parse (verified against 5.1.0: it declares no
-    // `ParentIds`). A remote hierarchy is therefore a contract between the
-    // widget and *your* endpoint; the client's job is simply not to drop what
-    // the widget produced, which is what this line guarantees.
-    for (const key of ['filter', 'select', 'totalSummary', 'groupSummary', 'parentIds']) {
-        const value = loadOptions[key];
-        if (value !== undefined && value !== null) {
-            params.set(key, JSON.stringify(value));
-        }
-    }
-    for (const key of ['sort', 'group']) {
-        const value = loadOptions[key];
-        if (value !== undefined && value !== null) {
-            params.set(key, JSON.stringify(normalizeSorting(value)));
-        }
-    }
-    // `langParams` rides the loadOptions object at runtime but is absent from
-    // DevExtreme's `LoadOptions` typing — it is declared on `DataSourceOptions`
-    // only — so it is read through an explicit cast rather than from the typed
-    // lists above. Dropping it silently changes collation between client and
-    // server, which is why it is carried even though the typings do not admit
-    // it exists.
-    const langParams = loadOptions.langParams;
-    if (langParams !== undefined && langParams !== null) {
-        params.set('langParams', JSON.stringify(langParams));
-    }
-    return params;
-}
-
 /**
  * Abstract base directives for the concrete per-component adapter directives.
  *
@@ -928,6 +561,25 @@ class DxSelectedIndexDirectiveBase extends DxBindingDirectiveBase {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DxSelectedIndexDirectiveBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }], propDecorators: { dxSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dxSelectedIndex", required: true }] }, { type: i0.Output, args: ["dxSelectedIndexChange"] }] } });
+/**
+ * `[(dxOpened)]` — for widgets with an open/closed state: the Drawer, the
+ * drop-down editors (SelectBox, Lookup, DateBox, TagBox, ...) and the
+ * DropDownButton. Every way the widget closes — outside click, escape, an
+ * item pick, tab-out — lands back in the signal.
+ */
+class DxOpenedDirectiveBase extends DxBindingDirectiveBase {
+    dxOpened = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dxOpened" }] : /* istanbul ignore next */ []));
+    constructor(host, optionName) {
+        super();
+        this.bindOption(host, optionName, this.dxOpened);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DxOpenedDirectiveBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: DxOpenedDirectiveBase, isStandalone: true, inputs: { dxOpened: { classPropertyName: "dxOpened", publicName: "dxOpened", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dxOpened: "dxOpenedChange" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DxOpenedDirectiveBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }, { type: undefined }], propDecorators: { dxOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "dxOpened", required: true }] }, { type: i0.Output, args: ["dxOpenedChange"] }] } });
 /** `[(dxVisible)]` — for overlay widgets (Popup, Popover, Toast, ...). */
 class DxVisibleDirectiveBase extends DxBindingDirectiveBase {
     dxVisible = model.required(/* @ts-ignore */
@@ -953,5 +605,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DxBindingDirectiveBase, DxSelectedIndexDirectiveBase, DxSelectedItemKeysDirectiveBase, DxSelectedRowKeysDirectiveBase, DxValueDirectiveBase, DxVisibleDirectiveBase, bindDxOption, bindDxState, dxArrayStoreSource, dxEventSignal, dxInstanceSignal, dxLoadOptionsParams, dxOptionAdapter, dxOptionSignal, dxReloadOn, dxRemoteStore, dxShallowObjectEquals, dxStructuralClone, dxStructuralEquals, injectDxInstance, onDxWidgetReady };
+export { DxBindingDirectiveBase, DxOpenedDirectiveBase, DxSelectedIndexDirectiveBase, DxSelectedItemKeysDirectiveBase, DxSelectedRowKeysDirectiveBase, DxValueDirectiveBase, DxVisibleDirectiveBase, bindDxOption, bindDxState, dxEventSignal, dxInstanceSignal, dxOptionAdapter, dxOptionSignal, dxShallowObjectEquals, dxStructuralClone, dxStructuralEquals, injectDxHost, injectDxInstance, onDxWidgetReady };
 //# sourceMappingURL=ngx-devextreme-zoneless-core.mjs.map