@dotglitch/ngx-common 1.0.29 → 1.0.31

package/README.md

@@ -30,6 +30,7 @@ $ npm install @dotglitch/ngx-common
     - [Tooltip](./src/directives/tooltip.md)
 - Components
     - [VS code wrapper](./src/components/vscode/README.md)
+    - [React Magic Wrapper](./src/components/vscode/README.md)
 - Services
     - [Fetch](./src/services/fetch.md)
     - [Dependency](./src/services/dependency.md)

package/components/react-magic-wrapper/react-magic-wrapper.component.d.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
+import * as React from 'react';
+import { ThemeService } from '../../services/theme.service';
+import * as i0 from "@angular/core";
+/**
+ * Extend this component to automatically generate
+ * bindings to a React component.
+ *
+ * ! You _must_ override the property `ngReactComponent`
+ * Failure to do so will result in errors
+ * `override readonly ngReactComponent = ReactFlowWrappableComponent;`
+ */
+export declare class ReactMagicWrapperComponent implements OnChanges, OnDestroy, AfterViewInit {
+    private ngContainer;
+    private ngTheme;
+    /**
+     * The react component to be wrapped.
+     * ! Must be overridden for this wrapper to work
+     */
+    ngReactComponent: React.FunctionComponent<any> | React.ComponentClass<any> | string;
+    private _root;
+    theme: string;
+    private ngSubscriptions;
+    constructor(ngContainer: ViewContainerRef, ngTheme: ThemeService);
+    ngOnInit(): void;
+    ngOnChanges(changes?: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private _render;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ReactMagicWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ReactMagicWrapperComponent, "app-react-magic-wrapper", never, {}, {}, never, never, true, never>;
+}

package/esm2020/components/react-magic-wrapper/react-magic-wrapper.component.mjs

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/theme.service";
+/**
+ * Extend this component to automatically generate
+ * bindings to a React component.
+ *
+ * ! You _must_ override the property `ngReactComponent`
+ * Failure to do so will result in errors
+ * `override readonly ngReactComponent = ReactFlowWrappableComponent;`
+ */
+export class ReactMagicWrapperComponent {
+    constructor(ngContainer, ngTheme) {
+        this.ngContainer = ngContainer;
+        this.ngTheme = ngTheme;
+        this.ngSubscriptions = [
+            this.ngTheme.subscribe(t => {
+                this.theme = t;
+                this.ngOnChanges();
+            })
+        ];
+        if (!this.ngReactComponent)
+            throw new Error("ReactMagicWrapperComponent cannot start without a provided ngReactComponent!");
+    }
+    ngOnInit() {
+        if (!this.ngReactComponent)
+            throw new Error("ReactMagicWrapperComponent cannot start without a provided ngReactComponent!");
+    }
+    ngOnChanges(changes) {
+        this._render();
+    }
+    ngAfterViewInit() {
+        this._render();
+    }
+    ngOnDestroy() {
+        this._root.unmount();
+        this.ngSubscriptions.forEach(s => s.unsubscribe());
+    }
+    _render() {
+        if (!this.ngReactComponent)
+            return;
+        if (!this._root) {
+            this._root = createRoot(this.ngContainer.element.nativeElement);
+        }
+        // List all keys that do not start with `_` nor `ng`
+        const keys = Object.keys(this).filter(k => !/^(?:_|ng)/.test(k));
+        // Get all property keys from the class
+        const propKeys = keys.filter(k => !k.startsWith("on"));
+        // Get all event handler keys from the class
+        const evtKeys = keys.filter(k => k.startsWith("on"));
+        const props = {};
+        // Project all key properties onto `props`
+        propKeys.forEach(k => props[k] = this[k]);
+        // Bind all event handlers.
+        // ! important Angular uses EventEmitter, React uses
+        // a different method of event binding
+        evtKeys.forEach(k => props[k] = (...args) => this[k].next(args));
+        this._root.render(React.createElement(this.ngReactComponent, { props: props }));
+    }
+}
+ReactMagicWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReactMagicWrapperComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ReactMagicWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ReactMagicWrapperComponent, isStandalone: true, selector: "app-react-magic-wrapper", usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReactMagicWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-react-magic-wrapper',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.ThemeService }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtbWFnaWMtd3JhcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2NvbXBvbmVudHMvcmVhY3QtbWFnaWMtd3JhcHBlci9yZWFjdC1tYWdpYy13cmFwcGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBeUQsTUFBTSxlQUFlLENBQUM7QUFDaEgsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDL0IsT0FBTyxFQUFFLFVBQVUsRUFBUSxNQUFNLGtCQUFrQixDQUFDOzs7QUFJcEQ7Ozs7Ozs7R0FPRztBQU1ILE1BQU0sT0FBTywwQkFBMEI7SUFpQm5DLFlBQ1ksV0FBNkIsRUFDN0IsT0FBcUI7UUFEckIsZ0JBQVcsR0FBWCxXQUFXLENBQWtCO1FBQzdCLFlBQU8sR0FBUCxPQUFPLENBQWM7UUFUekIsb0JBQWUsR0FBRztZQUN0QixJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRTtnQkFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7Z0JBQ2YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3ZCLENBQUMsQ0FBQztTQUNMLENBQUM7UUFNRSxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQjtZQUN0QixNQUFNLElBQUksS0FBSyxDQUFDLDhFQUE4RSxDQUFDLENBQUM7SUFDeEcsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQjtZQUN0QixNQUFNLElBQUksS0FBSyxDQUFDLDhFQUE4RSxDQUFDLENBQUM7SUFDeEcsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUF1QjtRQUMvQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDdkQsQ0FBQztJQUVPLE9BQU87UUFDWCxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQjtZQUFFLE9BQU87UUFDbkMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDYixJQUFJLENBQUMsS0FBSyxHQUFHLFVBQVUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNuRTtRQUVELG9EQUFvRDtRQUNwRCxNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRWpFLHVDQUF1QztRQUN2QyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDdkQsNENBQTRDO1FBQzVDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFFckQsTUFBTSxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLDBDQUEwQztRQUMxQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRTFDLDJCQUEyQjtRQUMzQixvREFBb0Q7UUFDcEQsc0NBQXNDO1FBQ3RDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBRWpFLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQVksRUFBRSxDQUFDLENBQUMsQ0FBQztJQUMzRixDQUFDOzt1SEFuRVEsMEJBQTBCOzJHQUExQiwwQkFBMEIsd0dBSHpCLEVBQUU7MkZBR0gsMEJBQTBCO2tCQUx0QyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSxFQUFFO29CQUNaLFVBQVUsRUFBRSxJQUFJO2lCQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIFNpbXBsZUNoYW5nZXMsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNyZWF0ZVJvb3QsIFJvb3QgfSBmcm9tICdyZWFjdC1kb20vY2xpZW50JztcblxuaW1wb3J0IHsgVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvdGhlbWUuc2VydmljZSc7XG5cbi8qKlxuICogRXh0ZW5kIHRoaXMgY29tcG9uZW50IHRvIGF1dG9tYXRpY2FsbHkgZ2VuZXJhdGVcbiAqIGJpbmRpbmdzIHRvIGEgUmVhY3QgY29tcG9uZW50LlxuICpcbiAqICEgWW91IF9tdXN0XyBvdmVycmlkZSB0aGUgcHJvcGVydHkgYG5nUmVhY3RDb21wb25lbnRgXG4gKiBGYWlsdXJlIHRvIGRvIHNvIHdpbGwgcmVzdWx0IGluIGVycm9yc1xuICogYG92ZXJyaWRlIHJlYWRvbmx5IG5nUmVhY3RDb21wb25lbnQgPSBSZWFjdEZsb3dXcmFwcGFibGVDb21wb25lbnQ7YFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2FwcC1yZWFjdC1tYWdpYy13cmFwcGVyJyxcbiAgICB0ZW1wbGF0ZTogYGAsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBSZWFjdE1hZ2ljV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcywgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IHtcblxuICAgIC8qKlxuICAgICAqIFRoZSByZWFjdCBjb21wb25lbnQgdG8gYmUgd3JhcHBlZC5cbiAgICAgKiAhIE11c3QgYmUgb3ZlcnJpZGRlbiBmb3IgdGhpcyB3cmFwcGVyIHRvIHdvcmtcbiAgICAgKi9cbiAgICBuZ1JlYWN0Q29tcG9uZW50OiBSZWFjdC5GdW5jdGlvbkNvbXBvbmVudDxhbnk+IHwgUmVhY3QuQ29tcG9uZW50Q2xhc3M8YW55PiB8IHN0cmluZztcblxuICAgIHByaXZhdGUgX3Jvb3Q6IFJvb3Q7XG4gICAgcHVibGljIHRoZW1lOiBzdHJpbmc7XG4gICAgcHJpdmF0ZSBuZ1N1YnNjcmlwdGlvbnMgPSBbXG4gICAgICAgIHRoaXMubmdUaGVtZS5zdWJzY3JpYmUodCA9PiB7XG4gICAgICAgICAgICB0aGlzLnRoZW1lID0gdDtcbiAgICAgICAgICAgIHRoaXMubmdPbkNoYW5nZXMoKTtcbiAgICAgICAgfSlcbiAgICBdO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgbmdDb250YWluZXI6IFZpZXdDb250YWluZXJSZWYsXG4gICAgICAgIHByaXZhdGUgbmdUaGVtZTogVGhlbWVTZXJ2aWNlXG4gICAgKSB7XG4gICAgICAgIGlmICghdGhpcy5uZ1JlYWN0Q29tcG9uZW50KVxuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFwiUmVhY3RNYWdpY1dyYXBwZXJDb21wb25lbnQgY2Fubm90IHN0YXJ0IHdpdGhvdXQgYSBwcm92aWRlZCBuZ1JlYWN0Q29tcG9uZW50IVwiKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgaWYgKCF0aGlzLm5nUmVhY3RDb21wb25lbnQpXG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJSZWFjdE1hZ2ljV3JhcHBlckNvbXBvbmVudCBjYW5ub3Qgc3RhcnQgd2l0aG91dCBhIHByb3ZpZGVkIG5nUmVhY3RDb21wb25lbnQhXCIpO1xuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM/OiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX3JlbmRlcigpO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAgICAgdGhpcy5fcmVuZGVyKCk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuX3Jvb3QudW5tb3VudCgpO1xuICAgICAgICB0aGlzLm5nU3Vic2NyaXB0aW9ucy5mb3JFYWNoKHMgPT4gcy51bnN1YnNjcmliZSgpKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9yZW5kZXIoKSB7XG4gICAgICAgIGlmICghdGhpcy5uZ1JlYWN0Q29tcG9uZW50KSByZXR1cm47XG4gICAgICAgIGlmICghdGhpcy5fcm9vdCkge1xuICAgICAgICAgICAgdGhpcy5fcm9vdCA9IGNyZWF0ZVJvb3QodGhpcy5uZ0NvbnRhaW5lci5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gTGlzdCBhbGwga2V5cyB0aGF0IGRvIG5vdCBzdGFydCB3aXRoIGBfYCBub3IgYG5nYFxuICAgICAgICBjb25zdCBrZXlzID0gT2JqZWN0LmtleXModGhpcykuZmlsdGVyKGsgPT4gIS9eKD86X3xuZykvLnRlc3QoaykpO1xuXG4gICAgICAgIC8vIEdldCBhbGwgcHJvcGVydHkga2V5cyBmcm9tIHRoZSBjbGFzc1xuICAgICAgICBjb25zdCBwcm9wS2V5cyA9IGtleXMuZmlsdGVyKGsgPT4gIWsuc3RhcnRzV2l0aChcIm9uXCIpKTtcbiAgICAgICAgLy8gR2V0IGFsbCBldmVudCBoYW5kbGVyIGtleXMgZnJvbSB0aGUgY2xhc3NcbiAgICAgICAgY29uc3QgZXZ0S2V5cyA9IGtleXMuZmlsdGVyKGsgPT4gay5zdGFydHNXaXRoKFwib25cIikpO1xuXG4gICAgICAgIGNvbnN0IHByb3BzID0ge307XG4gICAgICAgIC8vIFByb2plY3QgYWxsIGtleSBwcm9wZXJ0aWVzIG9udG8gYHByb3BzYFxuICAgICAgICBwcm9wS2V5cy5mb3JFYWNoKGsgPT4gcHJvcHNba10gPSB0aGlzW2tdKTtcblxuICAgICAgICAvLyBCaW5kIGFsbCBldmVudCBoYW5kbGVycy5cbiAgICAgICAgLy8gISBpbXBvcnRhbnQgQW5ndWxhciB1c2VzIEV2ZW50RW1pdHRlciwgUmVhY3QgdXNlc1xuICAgICAgICAvLyBhIGRpZmZlcmVudCBtZXRob2Qgb2YgZXZlbnQgYmluZGluZ1xuICAgICAgICBldnRLZXlzLmZvckVhY2goayA9PiBwcm9wc1trXSA9ICguLi5hcmdzKSA9PiB0aGlzW2tdLm5leHQoYXJncykpO1xuXG4gICAgICAgIHRoaXMuX3Jvb3QucmVuZGVyKFJlYWN0LmNyZWF0ZUVsZW1lbnQodGhpcy5uZ1JlYWN0Q29tcG9uZW50LCB7IHByb3BzOiBwcm9wcyBhcyBhbnkgfSkpO1xuICAgIH1cbn1cbiJdfQ==

package/esm2020/public-api.mjs

@@ -48,5 +48,6 @@ export * from './components/filemanager/filemanager.component';
 // export * from './components/music-library/music-library.component';
 export * from './components/tabulator/tabulator.component';
 export * from './components/vscode/vscode.component';
+export * from './components/react-magic-wrapper/react-magic-wrapper.component';
 export * from './components/types';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVIOztHQUVHO0FBQ0gsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxlQUFlLENBQUM7QUFFOUI7O0dBRUc7QUFDSCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNkJBQTZCLENBQUM7QUFFNUM7O0dBRUc7QUFDSCxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMseUJBQXlCLENBQUM7QUFFeEM7O0VBRUU7QUFDRixjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLG9EQUFvRDtBQUVwRDs7RUFFRTtBQUNGLGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsZ0NBQWdDLENBQUM7QUFFL0M7O0VBRUU7QUFDRixjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsK0NBQStDLENBQUM7QUFDOUQsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLGlDQUFpQyxDQUFDO0FBSWhELGNBQWMsZ0RBQWdELENBQUM7QUFDL0Qsc0VBQXNFO0FBQ3RFLGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBwYWNrYWdlXG4gKi9cblxuLyoqXG4gKiogVHlwZXNcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi90eXBlcy9tZW51JztcbmV4cG9ydCAqIGZyb20gJy4vdHlwZXMvcG9wdXAnO1xuXG4vKipcbiAqKiBEaXJlY3RpdmVzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vZGlyZWN0aXZlcy90b29sdGlwLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2RpcmVjdGl2ZXMvbWVudS5kaXJlY3RpdmUnO1xuXG4vKipcbiAqKiBQaXBlc1xuICovXG5leHBvcnQgKiBmcm9tICcuL3BpcGVzL2h0bWwtYnlwYXNzLnBpcGUnO1xuZXhwb3J0ICogZnJvbSAnLi9waXBlcy9yZXNvdXJjZS1ieXBhc3MucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3BpcGVzL3NjcmlwdC1ieXBhc3MucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3BpcGVzL3N0eWxlLWJ5cGFzcy5waXBlJztcbmV4cG9ydCAqIGZyb20gJy4vcGlwZXMvdXJsLWJ5cGFzcy5waXBlJztcblxuLyoqXG4qKiBTZXJ2aWNlc1xuKi9cbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZGVwZW5kZW5jeS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZGlhbG9nLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9mZXRjaC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMva2V5Ym9hcmQuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2ZpbGUuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL3RoZW1lLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9uYXZpZ2F0aW9uLnNlcnZpY2UnO1xuLy8gZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9zZXJ2aWNld29ya2VyLnNlcnZpY2UnO1xuXG4vKipcbioqIExhenkgbG9hZGVyIGNvbXBvbmVudCAmIHNlcnZpY2VcbiovXG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvbGF6eS1sb2FkZXIvbGF6eS1sb2FkZXIuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvbGF6eS1sb2FkZXIvbGF6eS1sb2FkZXIubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9sYXp5LWxvYWRlci9sYXp5LWxvYWRlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2xhenktbG9hZGVyL3R5cGVzJztcblxuLyoqXG4qKiBTZXJ2aWNlc1xuKi9cbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9keW5hbWljLWh0bWwvZHluYW1pYy1odG1sLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2R5bmFtaWMtaHRtbC9keW5hbWljLWh0bWwubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9keW5hbWljLWh0bWwvZHluYW1pYy1odG1sLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvZHluYW1pYy1odG1sL3R5cGVzJztcblxuXG5cbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9maWxlbWFuYWdlci9maWxlbWFuYWdlci5jb21wb25lbnQnO1xuLy8gZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL211c2ljLWxpYnJhcnkvbXVzaWMtbGlicmFyeS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL3RhYnVsYXRvci90YWJ1bGF0b3IuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy92c2NvZGUvdnNjb2RlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvdHlwZXMnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVIOztHQUVHO0FBQ0gsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxlQUFlLENBQUM7QUFFOUI7O0dBRUc7QUFDSCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNkJBQTZCLENBQUM7QUFFNUM7O0dBRUc7QUFDSCxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMseUJBQXlCLENBQUM7QUFFeEM7O0VBRUU7QUFDRixjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLG9EQUFvRDtBQUVwRDs7RUFFRTtBQUNGLGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsZ0NBQWdDLENBQUM7QUFFL0M7O0VBRUU7QUFDRixjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsK0NBQStDLENBQUM7QUFDOUQsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLGlDQUFpQyxDQUFDO0FBSWhELGNBQWMsZ0RBQWdELENBQUM7QUFDL0Qsc0VBQXNFO0FBQ3RFLGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLGdFQUFnRSxDQUFDO0FBQy9FLGNBQWMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHBhY2thZ2VcbiAqL1xuXG4vKipcbiAqKiBUeXBlc1xuICovXG5leHBvcnQgKiBmcm9tICcuL3R5cGVzL21lbnUnO1xuZXhwb3J0ICogZnJvbSAnLi90eXBlcy9wb3B1cCc7XG5cbi8qKlxuICoqIERpcmVjdGl2ZXNcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9kaXJlY3RpdmVzL3Rvb2x0aXAuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vZGlyZWN0aXZlcy9tZW51LmRpcmVjdGl2ZSc7XG5cbi8qKlxuICoqIFBpcGVzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vcGlwZXMvaHRtbC1ieXBhc3MucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3BpcGVzL3Jlc291cmNlLWJ5cGFzcy5waXBlJztcbmV4cG9ydCAqIGZyb20gJy4vcGlwZXMvc2NyaXB0LWJ5cGFzcy5waXBlJztcbmV4cG9ydCAqIGZyb20gJy4vcGlwZXMvc3R5bGUtYnlwYXNzLnBpcGUnO1xuZXhwb3J0ICogZnJvbSAnLi9waXBlcy91cmwtYnlwYXNzLnBpcGUnO1xuXG4vKipcbioqIFNlcnZpY2VzXG4qL1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9kZXBlbmRlbmN5LnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9kaWFsb2cuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2ZldGNoLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9rZXlib2FyZC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZmlsZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvdGhlbWUuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL25hdmlnYXRpb24uc2VydmljZSc7XG4vLyBleHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL3NlcnZpY2V3b3JrZXIuc2VydmljZSc7XG5cbi8qKlxuKiogTGF6eSBsb2FkZXIgY29tcG9uZW50ICYgc2VydmljZVxuKi9cbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9sYXp5LWxvYWRlci9sYXp5LWxvYWRlci5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9sYXp5LWxvYWRlci9sYXp5LWxvYWRlci5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2xhenktbG9hZGVyL2xhenktbG9hZGVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvbGF6eS1sb2FkZXIvdHlwZXMnO1xuXG4vKipcbioqIFNlcnZpY2VzXG4qL1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2R5bmFtaWMtaHRtbC9keW5hbWljLWh0bWwuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvZHluYW1pYy1odG1sL2R5bmFtaWMtaHRtbC5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2R5bmFtaWMtaHRtbC9keW5hbWljLWh0bWwuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9keW5hbWljLWh0bWwvdHlwZXMnO1xuXG5cblxuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL2ZpbGVtYW5hZ2VyL2ZpbGVtYW5hZ2VyLmNvbXBvbmVudCc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvbXVzaWMtbGlicmFyeS9tdXNpYy1saWJyYXJ5LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2NvbXBvbmVudHMvdGFidWxhdG9yL3RhYnVsYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9jb21wb25lbnRzL3ZzY29kZS92c2NvZGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy9yZWFjdC1tYWdpYy13cmFwcGVyL3JlYWN0LW1hZ2ljLXdyYXBwZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cy90eXBlcyc7XG4iXX0=

package/fesm2015/{dotglitch-ngx-common-folder-rename.component-d039534b.mjs → dotglitch-ngx-common-folder-rename.component-22b918d0.mjs}

@@ -30,6 +30,8 @@ import 'tabulator-tables';
 import '@angular/material/progress-bar';
 import '@angular/material/expansion';
 import 'path-browserify';
+import 'react';
+import 'react-dom/client';
 
 class FolderRenameComponent {
     constructor(dialog, fetch) {
@@ -76,4 +78,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 export { FolderRenameComponent };
-//# sourceMappingURL=dotglitch-ngx-common-folder-rename.component-d039534b.mjs.map
+//# sourceMappingURL=dotglitch-ngx-common-folder-rename.component-22b918d0.mjs.map

package/fesm2015/dotglitch-ngx-common-folder-rename.component-22b918d0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotglitch-ngx-common-folder-rename.component-22b918d0.mjs","sources":["../../../packages/common/src/components/filemanager/folder-rename/folder-rename.component.ts","../../../packages/common/src/components/filemanager/folder-rename/folder-rename.component.html"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { NgxFileManagerConfiguration } from '../filemanager.component';\nimport { Fetch } from '../../../public-api';\n\n@Component({\n    selector: 'app-folder-rename',\n    templateUrl: './folder-rename.component.html',\n    styleUrls: ['./folder-rename.component.scss'],\n    imports: [\n        MatInputModule,\n        MatIconModule,\n        MatButtonModule,\n        FormsModule\n    ],\n    standalone: true\n})\nexport class FolderRenameComponent implements OnInit {\n\n    @Input() path: string;\n    @Input() name: string = '';\n    @Input() config: NgxFileManagerConfiguration;\n\n    isRename = false;\n\n    constructor(\n        public dialog: MatDialogRef<any>,\n        private fetch: Fetch\n    ) { }\n\n    ngOnInit() {\n        this.isRename = this.name.length > 0;\n    }\n\n    onSave() {\n        if (this.isRename) {\n            const url = this.config.apiSettings.renameEntryUrlTemplate\n                ? this.config.apiSettings.renameEntryUrlTemplate(this.path + this.name)\n                : this.config.apiSettings.renameEntryUrl\n\n            this.fetch.post(url, { path: this.path + '/' + this.name });\n        }\n        else {\n            const url = this.config.apiSettings.createDirectoryUrlTemplate\n                      ? this.config.apiSettings.createDirectoryUrlTemplate(this.path + this.name)\n                      : this.config.apiSettings.createDirectoryUrl\n\n            this.fetch.post(url, {path: this.path +'/'+ this.name});\n        }\n        this.dialog.close(true);\n    }\n}\n","<mat-form-field style=\"width: 280px;\">\n    <mat-label>Name</mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"name\" (keyup)=\"$event.key == 'Enter' && onSave()\">\n</mat-form-field>\n\n<div style=\"align-self: end;\">\n    <button mat-flat-button (click)=\"onSave()\"><mat-icon>check</mat-icon>Ok</button>\n    <button mat-flat-button (click)=\"dialog.close()\"><mat-icon>cancel</mat-icon>Cancel</button>\n</div>\n"],"names":["i2.Fetch","i6"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqBa,qBAAqB,CAAA;IAQ9B,WACW,CAAA,MAAyB,EACxB,KAAY,EAAA;AADb,QAAA,IAAM,CAAA,MAAA,GAAN,MAAM,CAAmB;AACxB,QAAA,IAAK,CAAA,KAAA,GAAL,KAAK,CAAO;AAPf,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAG3B,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAKZ;IAEL,QAAQ,GAAA;QACJ,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KACxC;IAED,MAAM,GAAA;QACF,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,sBAAsB;AACtD,kBAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;kBACrE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,CAAA;YAE5C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/D,SAAA;AACI,aAAA;YACD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,0BAA0B;AACpD,kBAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;kBACzE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,kBAAkB,CAAA;YAEtD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAE,GAAG,GAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;AAC3D,SAAA;AACD,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KAC3B;;kHAjCQ,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,KAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBlC,8aASA,EDKQ,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,cAAc,snBACd,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACb,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FAIN,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAZjC,SAAS;YACI,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAGpB,OAAA,EAAA;wBACL,cAAc;wBACd,aAAa;wBACb,eAAe;wBACf,WAAW;AACd,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,QAAA,EAAA,8aAAA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,CAAA;oHAIP,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;;;;;"}

package/fesm2015/dotglitch-ngx-common.mjs

@@ -38,6 +38,8 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i2$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as path from 'path-browserify';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
 
 /**
  * This utils file exists outside of the strict angular DI zone
@@ -9403,7 +9405,7 @@ class FilemanagerComponent {
         lazyLoader.registerComponent({
             id: "folder-rename",
             group: "@dotglitch/ngx-web-components",
-            load: () => import('./dotglitch-ngx-common-folder-rename.component-d039534b.mjs')
+            load: () => import('./dotglitch-ngx-common-folder-rename.component-22b918d0.mjs')
         });
         this.iconResolver = new IconResolver(libConfig.assetPath);
     }
@@ -10488,6 +10490,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+/**
+ * Extend this component to automatically generate
+ * bindings to a React component.
+ *
+ * ! You _must_ override the property `ngReactComponent`
+ * Failure to do so will result in errors
+ * `override readonly ngReactComponent = ReactFlowWrappableComponent;`
+ */
+class ReactMagicWrapperComponent {
+    constructor(ngContainer, ngTheme) {
+        this.ngContainer = ngContainer;
+        this.ngTheme = ngTheme;
+        this.ngSubscriptions = [
+            this.ngTheme.subscribe(t => {
+                this.theme = t;
+                this.ngOnChanges();
+            })
+        ];
+        if (!this.ngReactComponent)
+            throw new Error("ReactMagicWrapperComponent cannot start without a provided ngReactComponent!");
+    }
+    ngOnInit() {
+        if (!this.ngReactComponent)
+            throw new Error("ReactMagicWrapperComponent cannot start without a provided ngReactComponent!");
+    }
+    ngOnChanges(changes) {
+        this._render();
+    }
+    ngAfterViewInit() {
+        this._render();
+    }
+    ngOnDestroy() {
+        this._root.unmount();
+        this.ngSubscriptions.forEach(s => s.unsubscribe());
+    }
+    _render() {
+        if (!this.ngReactComponent)
+            return;
+        if (!this._root) {
+            this._root = createRoot(this.ngContainer.element.nativeElement);
+        }
+        // List all keys that do not start with `_` nor `ng`
+        const keys = Object.keys(this).filter(k => !/^(?:_|ng)/.test(k));
+        // Get all property keys from the class
+        const propKeys = keys.filter(k => !k.startsWith("on"));
+        // Get all event handler keys from the class
+        const evtKeys = keys.filter(k => k.startsWith("on"));
+        const props = {};
+        // Project all key properties onto `props`
+        propKeys.forEach(k => props[k] = this[k]);
+        // Bind all event handlers.
+        // ! important Angular uses EventEmitter, React uses
+        // a different method of event binding
+        evtKeys.forEach(k => props[k] = (...args) => this[k].next(args));
+        this._root.render(React.createElement(this.ngReactComponent, { props: props }));
+    }
+}
+ReactMagicWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReactMagicWrapperComponent, deps: [{ token: i0.ViewContainerRef }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ReactMagicWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ReactMagicWrapperComponent, isStandalone: true, selector: "app-react-magic-wrapper", usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReactMagicWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-react-magic-wrapper',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: ThemeService }]; } });
+
 /*
  * Public API Surface of package
  */
@@ -10499,5 +10569,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComponentResolveStrategy, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, OnMount, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, openMenu, openTooltip };
+export { ComponentResolveStrategy, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, OnMount, ReactMagicWrapperComponent, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, openMenu, openTooltip };
 //# sourceMappingURL=dotglitch-ngx-common.mjs.map