@pepperi-addons/ngx-composite-lib-react 0.5.5 → 0.5.7

package/i18n/en.ngx-composite-lib.json

@@ -177,5 +177,9 @@
         "HIDE_IN": {
             "HIDE_IN_TITLE": "Hide on:"
         }
+    },
+    "ASSET_PICKER_BUTTON": {
+        "CHOOSE_IMAGE": "Choose image",
+        "OPEN_ASSETS_MANAGER": "Assets Manager"
     }
 }

package/index.d.ts

@@ -14,3 +14,4 @@ export { PepMenuDataView } from './pep-menu-data-view.js';
 export { PepManageParameters } from './pep-manage-parameters.js';
 export { PepMappingParameters } from './pep-mapping-parameters.js';
 export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
+export { PepAssetPickerButton } from './pep-asset-picker-button.js';

package/index.js

@@ -14,4 +14,5 @@ export { PepMenuDataView } from './pep-menu-data-view.js';
 export { PepManageParameters } from './pep-manage-parameters.js';
 export { PepMappingParameters } from './pep-mapping-parameters.js';
 export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
+export { PepAssetPickerButton } from './pep-asset-picker-button.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "React wrappers for Pepperi ngx-composite-lib Angular Elements.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-asset-picker-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PepAssetPickerButtonProps {
+    imageURL?: string;
+    onAssetChange?: (detail: unknown) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepAssetPickerButton: React.FC<PepAssetPickerButtonProps>;

package/pep-asset-picker-button.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+export const PepAssetPickerButton = ({ imageURL, onAssetChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (imageURL !== undefined)
+            el.imageURL = imageURL;
+    }, [imageURL]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            onAssetChange?.(e.detail);
+        };
+        el.addEventListener('assetChange', handler);
+        return () => el.removeEventListener('assetChange', handler);
+    }, [onAssetChange]);
+    return React.createElement('pep-asset-picker-button-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-asset-picker-button.js.map