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

package/index.d.ts

@@ -29,5 +29,6 @@ export { PepAddress } from './pep-address.js';
 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 { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
 export * from './services.js';

package/index.js

@@ -29,6 +29,7 @@ export { PepAddress } from './pep-address.js';
 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 { 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.11",
+  "version": "0.5.12",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-query-builder.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export interface PepQueryBuilderField {
+    FieldID: string;
+    FieldType: string;
+    Title: string;
+    OptionalValues?: Array<{
+        Key: string;
+        Value: string;
+    }>;
+}
+export interface PepQueryBuilderProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    query?: any;
+    fields?: PepQueryBuilderField[];
+    variableFields?: PepQueryBuilderField[];
+    maxDepth?: number;
+    onQueryChange?: (query: any) => void;
+    onFormValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepQueryBuilder: React.FC<PepQueryBuilderProps>;

package/pep-query-builder.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepQueryBuilder = ({ keyProp, query, fields, variableFields, maxDepth, onQueryChange, onFormValidationChange, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof query !== 'undefined')
+            el.query = query;
+        if (typeof fields !== 'undefined')
+            el.fields = fields;
+        if (typeof variableFields !== 'undefined')
+            el.variableFields = variableFields;
+        if (typeof maxDepth !== 'undefined')
+            el.maxDepth = maxDepth;
+    }, [query, fields, variableFields, maxDepth]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onQueryChange) {
+            handlers.push(['queryChange', (e) => { var _a; return onQueryChange((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        }
+        if (onFormValidationChange) {
+            handlers.push(['formValidationChange', (e) => { var _a; return onFormValidationChange(!!((_a = e.detail) !== null && _a !== void 0 ? _a : e)); }]);
+        }
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onQueryChange, onFormValidationChange]);
+    return _jsx("pep-query-builder-element", { ref: ref, ...rest }, keyProp);
+};
+//# sourceMappingURL=pep-query-builder.js.map