@ace-grid/angular 1.0.7

package/README.md

@@ -0,0 +1,42 @@
+# @ace-grid/angular
+
+Ace Grid Angular provides Angular bindings for Ace Grid Core, Pro, and Enterprise runtimes. The wrapper keeps Angular templates and lifecycle integration separate from the selected Ace Grid feature tier.
+
+## Install
+
+```bash
+npm install @ace-grid/angular @ace-grid/core react react-dom
+```
+
+For paid tiers, install the runtime you use:
+
+```bash
+npm install @ace-grid/angular @ace-grid/pro react react-dom
+npm install @ace-grid/angular @ace-grid/enterprise react react-dom
+```
+
+## Quick start
+
+```ts
+import { AceGridComponent } from "@ace-grid/angular/core";
+```
+
+Use the tier-specific entry point that matches your runtime:
+
+- `@ace-grid/angular/core`
+- `@ace-grid/angular/pro`
+- `@ace-grid/angular/enterprise`
+
+## Package boundaries
+
+This package contains the Angular wrapper only. Grid capabilities come from the runtime package you install: `@ace-grid/core`, `@ace-grid/pro`, or `@ace-grid/enterprise`.
+
+## Production notes
+
+- Keep the wrapper version aligned with the Ace Grid runtime version used by your app.
+- Install only one runtime tier in each application bundle unless you intentionally support tier switching.
+- Pro and Enterprise runtimes require a valid commercial license.
+
+## License
+
+MIT. Runtime packages may have separate license terms.

package/dist/angular-core.d.ts

@@ -0,0 +1,5 @@
+export * from "./angular";
+export * from "@ace-grid/core";
+export declare function defineAceGridElement(...args: unknown[]): unknown;
+export declare function defineAceGridUseGridElement(...args: unknown[]): unknown;
+export interface AceGridUseGridElement extends HTMLElement {}

package/dist/angular-core.js

@@ -0,0 +1,17 @@
+import { Grid as e, useGrid as r } from "@ace-grid/core";
+export * from "@ace-grid/core";
+import { r as A } from "./angularTier-OrCtSQfy.mjs";
+import { d as m, a as t } from "./angularTier-OrCtSQfy.mjs";
+import { ACE_GRID_ANGULAR_COMMON_EVENTS as f, ACE_GRID_ANGULAR_DEFAULT_TAG_NAME as n, ACE_GRID_ANGULAR_EVENT_PREFIX as N, AceGridComponent as R } from "./angular.js";
+A(
+  e,
+  r
+);
+export {
+  f as ACE_GRID_ANGULAR_COMMON_EVENTS,
+  n as ACE_GRID_ANGULAR_DEFAULT_TAG_NAME,
+  N as ACE_GRID_ANGULAR_EVENT_PREFIX,
+  R as AceGridComponent,
+  m as defineAceGridElement,
+  t as defineAceGridUseGridElement
+};

package/dist/angular-enterprise.d.ts

@@ -0,0 +1,5 @@
+export * from "./angular";
+export * from "@ace-grid/enterprise";
+export declare function defineAceGridElement(...args: unknown[]): unknown;
+export declare function defineAceGridUseGridElement(...args: unknown[]): unknown;
+export interface AceGridUseGridElement extends HTMLElement {}

package/dist/angular-enterprise.js

@@ -0,0 +1,17 @@
+import { Grid as e, useGrid as r } from "@ace-grid/enterprise";
+export * from "@ace-grid/enterprise";
+import { r as A } from "./angularTier-OrCtSQfy.mjs";
+import { d as m, a as t } from "./angularTier-OrCtSQfy.mjs";
+import { ACE_GRID_ANGULAR_COMMON_EVENTS as f, ACE_GRID_ANGULAR_DEFAULT_TAG_NAME as n, ACE_GRID_ANGULAR_EVENT_PREFIX as N, AceGridComponent as R } from "./angular.js";
+A(
+  e,
+  r
+);
+export {
+  f as ACE_GRID_ANGULAR_COMMON_EVENTS,
+  n as ACE_GRID_ANGULAR_DEFAULT_TAG_NAME,
+  N as ACE_GRID_ANGULAR_EVENT_PREFIX,
+  R as AceGridComponent,
+  m as defineAceGridElement,
+  t as defineAceGridUseGridElement
+};

package/dist/angular-pro.d.ts

@@ -0,0 +1,5 @@
+export * from "./angular";
+export * from "@ace-grid/pro";
+export declare function defineAceGridElement(...args: unknown[]): unknown;
+export declare function defineAceGridUseGridElement(...args: unknown[]): unknown;
+export interface AceGridUseGridElement extends HTMLElement {}

package/dist/angular-pro.js

@@ -0,0 +1,17 @@
+import { Grid as e, useGrid as r } from "@ace-grid/pro";
+export * from "@ace-grid/pro";
+import { r as A } from "./angularTier-OrCtSQfy.mjs";
+import { d as m, a as t } from "./angularTier-OrCtSQfy.mjs";
+import { ACE_GRID_ANGULAR_COMMON_EVENTS as f, ACE_GRID_ANGULAR_DEFAULT_TAG_NAME as n, ACE_GRID_ANGULAR_EVENT_PREFIX as N, AceGridComponent as R } from "./angular.js";
+A(
+  e,
+  r
+);
+export {
+  f as ACE_GRID_ANGULAR_COMMON_EVENTS,
+  n as ACE_GRID_ANGULAR_DEFAULT_TAG_NAME,
+  N as ACE_GRID_ANGULAR_EVENT_PREFIX,
+  R as AceGridComponent,
+  m as defineAceGridElement,
+  t as defineAceGridUseGridElement
+};

package/dist/angular.d.ts

@@ -0,0 +1,18 @@
+export interface AceGridAngularReadyEvent {
+  element: HTMLElement;
+}
+export interface AceGridAngularComponentInputs {
+  props?: unknown;
+  hookOptions?: unknown;
+  templates?: Record<string, unknown> | null;
+  iconTemplates?: Record<string, unknown> | null;
+}
+export declare class AceGridComponent {
+  props?: unknown;
+  hookOptions?: unknown;
+  templates?: Record<string, unknown> | null;
+  iconTemplates?: Record<string, unknown> | null;
+}
+export declare const ACE_GRID_ANGULAR_COMMON_EVENTS: Record<string, string>;
+export declare const ACE_GRID_ANGULAR_DEFAULT_TAG_NAME: string;
+export declare const ACE_GRID_ANGULAR_EVENT_PREFIX: string;

package/dist/angular.js

@@ -0,0 +1,242 @@
+import { ViewChild as w, Input as m, Output as l, Component as y, ChangeDetectionStrategy as f, EventEmitter as r, inject as g, NgZone as O, ApplicationRef as R, EnvironmentInjector as T, createComponent as v } from "@angular/core";
+var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? _(t, s) : t, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (o = (a ? h(t, s, o) : h(o)) || o);
+  return a && o && A(t, s, o), o;
+};
+const u = "ace-grid", D = "ace-grid-", c = {
+  cellChange: "ace-grid-cell-change",
+  rowAdd: "ace-grid-row-add",
+  rowDelete: "ace-grid-row-delete",
+  selectionChange: "ace-grid-selection-change",
+  selectionRangeChange: "ace-grid-selection-range-change",
+  sortChange: "ace-grid-sort-change",
+  sortModelChange: "ace-grid-sort-model-change",
+  filterChange: "ace-grid-filter-change"
+};
+let n = class {
+  constructor() {
+    this.customTagName = u, this.props = {}, this.hookOptions = null, this.templates = null, this.iconTemplates = null, this.elementClassName = "", this.ready = new r(), this.customEvent = new r(), this.cellChange = new r(), this.rowAdd = new r(), this.rowDelete = new r(), this.selectionChange = new r(), this.selectionRangeChange = new r(), this.sortChange = new r(), this.sortModelChange = new r(), this.filterChange = new r(), this.zone = g(O), this.appRef = g(R), this.environmentInjector = g(T), this.element = null, this.unpatchDispatchEvent = null, this.getElement = () => this.element, this.rerender = () => {
+      this.element?.rerender();
+    }, this.setProps = (e) => {
+      this.element?.setProps?.(e);
+    }, this.getProps = () => this.element?.getProps?.() ?? null, this.setTemplates = (e) => {
+      this.element?.setTemplates?.(e);
+    }, this.getTemplates = () => this.element?.getTemplates?.() ?? null, this.setIconTemplates = (e) => {
+      this.iconTemplates = {
+        ...this.iconTemplates ?? {},
+        ...e
+      }, this.applyInputs(
+        this.props,
+        this.hookOptions,
+        this.templates,
+        this.iconTemplates
+      );
+    }, this.getIconTemplates = () => this.iconTemplates ?? null, this.setHookOptions = (e) => {
+      const t = this.element;
+      t?.setHookOptions && t.setHookOptions(e);
+    }, this.getHookOptions = () => {
+      const e = this.element;
+      return e?.getHookOptions ? e.getHookOptions() : null;
+    }, this.getRows = () => this.element?.getRows?.() ?? null, this.getActions = () => this.element?.getActions?.() ?? null, this.getApi = () => this.element?.getApi?.() ?? null;
+  }
+  ngAfterViewInit() {
+    const e = (this.customTagName ?? "").trim() || u, t = this.containerRef.nativeElement;
+    this.ensureElement(t, e, this.elementClassName), this.applyInputs(
+      this.props,
+      this.hookOptions,
+      this.templates,
+      this.iconTemplates
+    );
+  }
+  ngOnChanges(e) {
+    if (!this.containerRef) return;
+    const t = this.containerRef.nativeElement, s = (this.customTagName ?? "").trim() || u;
+    (e.customTagName || e.elementClassName) && this.ensureElement(t, s, this.elementClassName), (e.props || e.hookOptions || e.templates || e.iconTemplates) && this.applyInputs(
+      this.props,
+      this.hookOptions,
+      this.templates,
+      this.iconTemplates
+    );
+  }
+  ngOnDestroy() {
+    this.teardownElement();
+  }
+  ensureElement(e, t, s) {
+    const a = this.element?.tagName.toLowerCase();
+    if (!this.element || a !== t.toLowerCase()) {
+      this.teardownElement();
+      const o = document.createElement(
+        t
+      );
+      o.style.display = "block", o.style.width = "100%", o.className = s, e.replaceChildren(o), this.element = o, this.unpatchDispatchEvent = this.patchDispatchEvent(o), this.ready.emit({ element: o });
+      return;
+    }
+    this.element.className = s;
+  }
+  applyInputs(e, t, s, a) {
+    this.element && (this.element.props = e ?? {}, this.element.templates = this.mergeTemplateRegistries(
+      s,
+      this.buildAngularIconTemplateRegistry(a)
+    ) ?? {}, "hookOptions" in this.element && (this.element.hookOptions = t ?? {}));
+  }
+  patchDispatchEvent(e) {
+    const t = e.dispatchEvent.bind(e);
+    return e.dispatchEvent = ((s) => (s.type.startsWith(D) && this.zone.run(() => {
+      this.emitCustomEvent(s);
+    }), t(s))), () => {
+      e.dispatchEvent = t;
+    };
+  }
+  emitCustomEvent(e) {
+    this.customEvent.emit(e);
+    const t = e.detail;
+    switch (e.type) {
+      case c.cellChange:
+        this.cellChange.emit(t);
+        break;
+      case c.rowAdd:
+        this.rowAdd.emit(t);
+        break;
+      case c.rowDelete:
+        this.rowDelete.emit(t);
+        break;
+      case c.selectionChange:
+        this.selectionChange.emit(t);
+        break;
+      case c.selectionRangeChange:
+        this.selectionRangeChange.emit(t);
+        break;
+      case c.sortChange:
+        this.sortChange.emit(t);
+        break;
+      case c.sortModelChange:
+        this.sortModelChange.emit(t);
+        break;
+      case c.filterChange:
+        this.filterChange.emit(t);
+        break;
+    }
+  }
+  teardownElement() {
+    this.unpatchDispatchEvent?.(), this.unpatchDispatchEvent = null, this.element?.remove(), this.element = null;
+  }
+  buildAngularIconTemplateRegistry(e) {
+    if (!e || Object.keys(e).length === 0)
+      return null;
+    const t = Object.entries(e).filter((s) => !!s[1]).map(([s, a]) => [
+      s,
+      ({ props: o }) => {
+        const p = document.createElement("span");
+        p.style.display = "contents";
+        const h = v(a, {
+          environmentInjector: this.environmentInjector,
+          hostElement: p
+        }), d = new Set(
+          Object.keys(a.ɵcmp?.inputs ?? {})
+        );
+        return this.appRef.attachView(h.hostView), Object.entries(o).forEach(([C, E]) => {
+          (d.size === 0 || d.has(C)) && h.setInput(C, E);
+        }), h.changeDetectorRef.detectChanges(), {
+          node: p,
+          cleanup: () => {
+            this.appRef.detachView(h.hostView), h.destroy();
+          }
+        };
+      }
+    ]);
+    return {
+      icons: Object.fromEntries(t)
+    };
+  }
+  mergeTemplateRegistries(e, t) {
+    return !e && !t ? null : {
+      ...e ?? {},
+      ...t ?? {},
+      icons: {
+        ...e?.icons ?? {},
+        ...t?.icons ?? {}
+      }
+    };
+  }
+};
+i([
+  w("container")
+], n.prototype, "containerRef", 2);
+i([
+  m()
+], n.prototype, "customTagName", 2);
+i([
+  m()
+], n.prototype, "props", 2);
+i([
+  m()
+], n.prototype, "hookOptions", 2);
+i([
+  m()
+], n.prototype, "templates", 2);
+i([
+  m()
+], n.prototype, "iconTemplates", 2);
+i([
+  m()
+], n.prototype, "elementClassName", 2);
+i([
+  l()
+], n.prototype, "ready", 2);
+i([
+  l()
+], n.prototype, "customEvent", 2);
+i([
+  l()
+], n.prototype, "cellChange", 2);
+i([
+  l()
+], n.prototype, "rowAdd", 2);
+i([
+  l()
+], n.prototype, "rowDelete", 2);
+i([
+  l()
+], n.prototype, "selectionChange", 2);
+i([
+  l()
+], n.prototype, "selectionRangeChange", 2);
+i([
+  l()
+], n.prototype, "sortChange", 2);
+i([
+  l()
+], n.prototype, "sortModelChange", 2);
+i([
+  l()
+], n.prototype, "filterChange", 2);
+n = i([
+  y({
+    standalone: !0,
+    selector: "ace-grid-angular",
+    template: '<div #container class="ace-grid-angular__container"></div>',
+    styles: [
+      `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .ace-grid-angular__container {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `
+    ],
+    changeDetection: f.OnPush
+  })
+], n);
+export {
+  c as ACE_GRID_ANGULAR_COMMON_EVENTS,
+  u as ACE_GRID_ANGULAR_DEFAULT_TAG_NAME,
+  D as ACE_GRID_ANGULAR_EVENT_PREFIX,
+  n as AceGridComponent
+};