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

package/elements/runtime.js

@@ -1 +1 @@
-(()=>{"use strict";var e,b={},p={};function t(e){var n=p[e];if(void 0!==n)return n.exports;var r=p[e]={id:e,loaded:!1,exports:{}};return b[e].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}t.m=b,e=[],t.O=(n,r,a,o)=>{if(!r){var i=1/0;for(f=0;f<e.length;f++){for(var[r,a,o]=e[f],c=!0,l=0;l<r.length;l++)(!1&o||i>=o)&&Object.keys(t.O).every(h=>t.O[h](r[l]))?r.splice(l--,1):(c=!1,o<i&&(i=o));if(c){e.splice(f--,1);var s=a();void 0!==s&&(n=s)}}return n}o=o||0;for(var f=e.length;f>0&&e[f-1][2]>o;f--)e[f]=e[f-1];e[f]=[r,a,o]},t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},(()=>{var n,e=Object.getPrototypeOf?r=>Object.getPrototypeOf(r):r=>r.__proto__;t.t=function(r,a){if(1&a&&(r=this(r)),8&a||"object"==typeof r&&r&&(4&a&&r.__esModule||16&a&&"function"==typeof r.then))return r;var o=Object.create(null);t.r(o);var f={};n=n||[null,e({}),e([]),e(e)];for(var i=2&a&&r;"object"==typeof i&&!~n.indexOf(i);i=e(i))Object.getOwnPropertyNames(i).forEach(c=>f[c]=()=>r[c]);return f.default=()=>r,t.d(o,f),o}})(),t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e={666:0};t.O.j=a=>0===e[a];var n=(a,o)=>{var l,s,[f,i,c]=o,_=0;if(f.some(u=>0!==e[u])){for(l in i)t.o(i,l)&&(t.m[l]=i[l]);if(c)var d=c(t)}for(a&&a(o);_<f.length;_++)t.o(e,s=f[_])&&e[s]&&e[s][0](),e[s]=0;return t.O(d)},r=self.webpackChunkngx_lib_elements=self.webpackChunkngx_lib_elements||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})()})();
+(()=>{"use strict";var e,g={},O={};function t(e){var n=O[e];if(void 0!==n)return n.exports;var r=O[e]={id:e,loaded:!1,exports:{}};return g[e].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}t.m=g,e=[],t.O=(n,r,i,a)=>{if(!r){var o=1/0;for(f=0;f<e.length;f++){for(var[r,i,a]=e[f],l=!0,c=0;c<r.length;c++)(!1&a||o>=a)&&Object.keys(t.O).every(b=>t.O[b](r[c]))?r.splice(c--,1):(l=!1,a<o&&(o=a));if(l){e.splice(f--,1);var h=i();void 0!==h&&(n=h)}}return n}a=a||0;for(var f=e.length;f>0&&e[f-1][2]>a;f--)e[f]=e[f-1];e[f]=[r,i,a]},t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},(()=>{var n,e=Object.getPrototypeOf?r=>Object.getPrototypeOf(r):r=>r.__proto__;t.t=function(r,i){if(1&i&&(r=this(r)),8&i||"object"==typeof r&&r&&(4&i&&r.__esModule||16&i&&"function"==typeof r.then))return r;var a=Object.create(null);t.r(a);var f={};n=n||[null,e({}),e([]),e(e)];for(var o=2&i&&r;"object"==typeof o&&!~n.indexOf(o);o=e(o))Object.getOwnPropertyNames(o).forEach(l=>f[l]=()=>r[l]);return f.default=()=>r,t.d(a,f),a}})(),t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{t.S={};var e={},n={};t.I=(r,i)=>{i||(i=[]);var a=n[r];if(a||(a=n[r]={}),!(i.indexOf(a)>=0)){if(i.push(a),e[r])return e[r];t.o(t.S,r)||(t.S[r]={});var v=[];return e[r]=v.length?Promise.all(v).then(()=>e[r]=1):1}}})(),(()=>{var e={666:0};t.O.j=i=>0===e[i];var n=(i,a)=>{var c,h,[f,o,l]=a,v=0;if(f.some(_=>0!==e[_])){for(c in o)t.o(o,c)&&(t.m[c]=o[c]);if(l)var u=l(t)}for(i&&i(a);v<f.length;v++)t.o(e,h=f[v])&&e[h]&&e[h][0](),e[h]=0;return t.O(u)},r=self.webpackChunkngx_lib_elements=self.webpackChunkngx_lib_elements||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})()})();

package/index.d.ts

@@ -30,5 +30,7 @@ export { PepTopBar } from './pep-top-bar.js';
 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

@@ -30,6 +30,8 @@ export { PepTopBar } from './pep-top-bar.js';
 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.12",
+  "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

package/pep-remote-loader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type PepRemoteLoaderOptions = Record<string, unknown>;
+export interface PepRemoteLoaderProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    options?: PepRemoteLoaderOptions;
+    props?: Record<string, unknown>;
+    events?: Record<string, (event: Event) => void>;
+    onLoad?: () => void;
+}
+export declare const PepRemoteLoader: React.FC<PepRemoteLoaderProps>;

package/pep-remote-loader.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepRemoteLoader = ({ keyProp, options, props, events, onLoad, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof options !== 'undefined')
+            el.options = options;
+        if (typeof props !== 'undefined')
+            el.props = props;
+        if (typeof events !== 'undefined')
+            el.events = events;
+    }, [options, props, events]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onLoad)
+            return;
+        const handler = () => onLoad();
+        el.addEventListener('load', handler);
+        return () => el.removeEventListener('load', handler);
+    }, [onLoad]);
+    return _jsx("pep-remote-loader-element", { ref: ref, ...rest }, keyProp);
+};
+//# sourceMappingURL=pep-remote-loader.js.map