@pepperi-addons/ngx-lib-react 0.5.13 → 0.5.14

package/index.d.ts

@@ -31,5 +31,6 @@ export { PepListChooser } from './pep-list-chooser.js';
 export * from './pep-color-picker.js';
 export * from './pep-query-builder.js';
 export * from './pep-remote-loader.js';
+export * from './pep-addon-block-loader.js';
 export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
 export * from './services.js';

package/index.js

@@ -31,6 +31,7 @@ export { PepListChooser } from './pep-list-chooser.js';
 export * from './pep-color-picker.js';
 export * from './pep-query-builder.js';
 export * from './pep-remote-loader.js';
+export * from './pep-addon-block-loader.js';
 export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
 // Export all service helpers (bridge-based access to Angular services)
 export * from './services.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-addon-block-loader.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare type PepAddonBlockLoaderRemoteLoaderOptions = Record<string, unknown>;
+export interface PepAddonBlockLoaderProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    addonId?: string;
+    remoteEntry?: string;
+    slugName?: string;
+    blockType?: string;
+    name?: string;
+    hostObject?: unknown;
+    remoteLoaderOptions?: PepAddonBlockLoaderRemoteLoaderOptions;
+    onHostEvents?: (event: any) => void;
+    onBlockLoad?: () => void;
+}
+export declare const PepAddonBlockLoader: React.FC<PepAddonBlockLoaderProps>;

package/pep-addon-block-loader.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepAddonBlockLoader = ({ keyProp, addonId, remoteEntry, slugName, blockType, name, hostObject, remoteLoaderOptions, onHostEvents, onBlockLoad, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof addonId !== 'undefined')
+            el.addonId = addonId;
+        if (typeof remoteEntry !== 'undefined')
+            el.remoteEntry = remoteEntry;
+        if (typeof slugName !== 'undefined')
+            el.slugName = slugName;
+        if (typeof blockType !== 'undefined')
+            el.blockType = blockType;
+        if (typeof name !== 'undefined')
+            el.name = name;
+        if (typeof hostObject !== 'undefined')
+            el.hostObject = hostObject;
+        if (typeof remoteLoaderOptions !== 'undefined')
+            el.remoteLoaderOptions = remoteLoaderOptions;
+    }, [addonId, remoteEntry, slugName, blockType, name, hostObject, remoteLoaderOptions]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onHostEvents) {
+            handlers.push(['hostEvents', (e) => { var _a; return onHostEvents((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        }
+        if (onBlockLoad) {
+            handlers.push(['blockLoad', () => onBlockLoad()]);
+        }
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onHostEvents, onBlockLoad]);
+    return _jsx("pep-addon-block-loader-element", { ref: ref, ...rest }, keyProp);
+};
+//# sourceMappingURL=pep-addon-block-loader.js.map