@praxisui/visual-builder 1.0.0-beta.3 → 1.0.0-beta.30

package/README.md

@@ -1,5 +1,12 @@
 # Praxis Visual Builder
 
+## 🔰 Exemplos / Quickstart
+
+Para ver esta biblioteca em funcionamento em uma aplicação completa, utilize o projeto de exemplo (Quickstart):
+
+- Repositório: https://github.com/codexrodrigues/praxis-ui-quickstart
+- O Quickstart demonstra a integração das bibliotecas `@praxisui/*` em um app Angular, incluindo instalação, configuração e uso em telas reais.
+
 A comprehensive Angular library for building visual rule editors with support for mini-DSL expressions and contextual specifications.
 
 ## Features

package/fesm2022/praxisui-visual-builder.mjs

@@ -5520,6 +5520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
 
 class DslViewerComponent {
     snackBar;
+    cdr;
     dsl = '';
     editable = true;
     language = 'dsl';
@@ -5541,8 +5542,9 @@ class DslViewerComponent {
     showLineNumbers = true;
     wordWrap = false;
     showMinimap = true;
-    constructor(snackBar) {
+    constructor(snackBar, cdr) {
         this.snackBar = snackBar;
+        this.cdr = cdr;
     }
     ngOnInit() {
         this.initializeMonacoEditor();
@@ -5573,11 +5575,13 @@ class DslViewerComponent {
             this.updateEditorContent();
             this.updateEditorOptions();
             this.isLoading = false;
+            this.cdr.markForCheck();
         }
         catch (error) {
             console.error('Failed to initialize Monaco Editor:', error);
             this.createFallbackEditor();
             this.isLoading = false;
+            this.cdr.markForCheck();
         }
     }
     async loadMonacoEditor() {
@@ -5656,6 +5660,10 @@ class DslViewerComponent {
             return;
         this.originalDsl = this.dsl || '';
         this.monacoEditor.setValue(this.originalDsl);
+        try {
+            (console.debug || console.log)('[DslViewer] updateEditorContent', { chars: (this.originalDsl || '').length, preview: (this.originalDsl || '').slice(0, 200) });
+        }
+        catch { }
         this.hasChanges = false;
         this.validateSyntax();
     }
@@ -5863,7 +5871,7 @@ class DslViewerComponent {
         });
         return { errors, warnings };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DslViewerComponent, deps: [{ token: i1$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DslViewerComponent, deps: [{ token: i1$1.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DslViewerComponent, isStandalone: true, selector: "praxis-dsl-viewer", inputs: { dsl: "dsl", editable: "editable", language: "language", theme: "theme" }, outputs: { dslChanged: "dslChanged", validationChanged: "validationChanged" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="dsl-viewer-container">
       <!-- Toolbar -->
@@ -6237,7 +6245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
       </div>
     </div>
   `, styles: [".dsl-viewer-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.dsl-toolbar{flex-shrink:0;padding:0 16px}.toolbar-title{display:flex;align-items:center;gap:8px;font-weight:500}.toolbar-spacer{flex:1}.toolbar-actions{display:flex;align-items:center;gap:8px}.validation-status{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.validation-status.valid{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.validation-status.invalid{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.validation-status.warning{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.validation-status mat-icon{font-size:16px;width:16px;height:16px}.editor-container{flex:1;position:relative;overflow:hidden}.monaco-editor-container{width:100%;height:100%;position:relative}.monaco-editor-container.loading{opacity:.5}.loading-overlay{position:absolute;inset:0;background:var(--md-sys-color-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1000}.loading-text{color:var(--md-sys-color-on-surface-variant);font-size:14px}.readonly-overlay{position:absolute;top:8px;right:8px;z-index:100}.readonly-message{display:flex;align-items:center;gap:4px;background:var(--md-sys-color-surface-container);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--md-sys-color-on-surface-variant);box-shadow:0 2px 4px var(--vb-shadow-low-color, rgba(0,0,0,.1))}.readonly-message mat-icon{font-size:14px;width:14px;height:14px}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 16px;background:var(--md-sys-color-surface-container);border-top:1px solid var(--md-sys-color-outline-variant);font-size:12px;color:var(--md-sys-color-on-surface-variant);flex-shrink:0}.status-left,.status-center,.status-right{display:flex;align-items:center;gap:12px}.cursor-position{font-family:monospace}.syntax-errors,.warnings{display:flex;align-items:center;gap:4px}.syntax-errors mat-icon,.warnings mat-icon{font-size:14px;width:14px;height:14px}.language-mode{font-family:monospace;font-weight:600}.unsaved-indicator{color:var(--md-sys-color-primary);font-weight:700;font-size:16px}.error-panel{background:var(--md-sys-color-surface);border-top:1px solid var(--md-sys-color-outline-variant);max-height:200px;overflow-y:auto;flex-shrink:0}.error-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant)}.error-panel-header h4{margin:0;font-size:14px;font-weight:500}.error-list{padding:8px}.error-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:4px;margin-bottom:4px;cursor:pointer;transition:background .2s ease}.error-item:hover{background:var(--md-sys-color-surface-container)}.error-item.severity-error{border-left:3px solid var(--md-sys-color-error)}.error-item.severity-warning{border-left:3px solid var(--md-sys-color-secondary)}.error-item mat-icon{font-size:16px;width:16px;height:16px;margin-top:2px}.error-item.severity-error mat-icon{color:var(--md-sys-color-error)}.error-item.severity-warning mat-icon{color:var(--md-sys-color-secondary)}.error-content{flex:1}.error-message{font-weight:500;margin-bottom:2px}.error-location{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:monospace}@media (max-width: 768px){.toolbar-actions{gap:4px}.status-bar{flex-direction:column;gap:4px;align-items:stretch}.status-left,.status-center,.status-right{justify-content:center}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatSnackBar }], propDecorators: { dsl: [{
+        }], ctorParameters: () => [{ type: i1$1.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { dsl: [{
                 type: Input
             }], editable: [{
                 type: Input
@@ -7167,31 +7175,48 @@ class FieldConditionConverter extends BaseRuleConverter {
         }
     }
     mapOperator(operatorString) {
-        const operatorMap = {
-            'eq': ComparisonOperator.EQUALS,
-            'equals': ComparisonOperator.EQUALS,
-            'neq': ComparisonOperator.NOT_EQUALS,
-            'not_equals': ComparisonOperator.NOT_EQUALS,
-            'lt': ComparisonOperator.LESS_THAN,
-            'less_than': ComparisonOperator.LESS_THAN,
-            'lte': ComparisonOperator.LESS_THAN_OR_EQUAL,
-            'less_than_or_equal': ComparisonOperator.LESS_THAN_OR_EQUAL,
-            'gt': ComparisonOperator.GREATER_THAN,
-            'greater_than': ComparisonOperator.GREATER_THAN,
-            'gte': ComparisonOperator.GREATER_THAN_OR_EQUAL,
-            'greater_than_or_equal': ComparisonOperator.GREATER_THAN_OR_EQUAL,
-            'contains': ComparisonOperator.CONTAINS,
-            'startsWith': ComparisonOperator.STARTS_WITH,
-            'starts_with': ComparisonOperator.STARTS_WITH,
-            'endsWith': ComparisonOperator.ENDS_WITH,
-            'ends_with': ComparisonOperator.ENDS_WITH,
-            'in': ComparisonOperator.IN
-        };
-        const operator = operatorMap[operatorString.toLowerCase()];
-        if (!operator) {
-            throw new Error(`Unsupported operator: ${operatorString}`);
+        // Normalize: remove underscores/spaces and lowercase
+        const norm = (operatorString || '').replace(/[_\s]/g, '').toLowerCase();
+        switch (norm) {
+            case 'eq':
+            case 'equals':
+            case '==':
+            case '=':
+            case 'istrue': // treat as equals true
+            case 'isfalse': // equals false
+                return ComparisonOperator.EQUALS;
+            case 'neq':
+            case 'notequals':
+            case '!=':
+            case '<>':
+                return ComparisonOperator.NOT_EQUALS;
+            case 'lt':
+            case 'lessthan':
+            case '<':
+                return ComparisonOperator.LESS_THAN;
+            case 'lte':
+            case 'lessthanorequal':
+            case '<=':
+                return ComparisonOperator.LESS_THAN_OR_EQUAL;
+            case 'gt':
+            case 'greaterthan':
+            case '>':
+                return ComparisonOperator.GREATER_THAN;
+            case 'gte':
+            case 'greaterthanorequal':
+            case '>=':
+                return ComparisonOperator.GREATER_THAN_OR_EQUAL;
+            case 'contains':
+                return ComparisonOperator.CONTAINS;
+            case 'startswith':
+                return ComparisonOperator.STARTS_WITH;
+            case 'endswith':
+                return ComparisonOperator.ENDS_WITH;
+            case 'in':
+                return ComparisonOperator.IN;
+            default:
+                throw new Error(`Unsupported operator: ${operatorString}`);
         }
-        return operator;
     }
     convertValue(value, valueType) {
         if (value === null || value === undefined) {
@@ -9716,6 +9741,13 @@ class RuleBuilderService {
                             rootNodes: json.rootNodes,
                             isDirty: true,
                         });
+                        try {
+                            const count = Object.keys(json.nodes || {}).length;
+                            const firstKey = Object.keys(json.nodes || {})[0];
+                            const firstNode = firstKey ? json.nodes[firstKey] : undefined;
+                            (console.debug || console.log)('[RuleBuilderService] import(builder-state)', { nodesCount: count, rootNodes: (json.rootNodes || []).length, firstNode });
+                        }
+                        catch { }
                         this.saveSnapshot('Imported rules');
                         this.validateRules();
                         return;
@@ -9783,6 +9815,13 @@ class RuleBuilderService {
                         isDirty: true,
                     });
                 }
+                try {
+                    const count = Object.keys(ruleNodes.nodes || {}).length;
+                    const firstKey = Object.keys(ruleNodes.nodes || {})[0];
+                    const firstNode = firstKey ? ruleNodes.nodes[firstKey] : undefined;
+                    (console.debug || console.log)('[RuleBuilderService] import(spec)', { nodesCount: count, rootNodes: (ruleNodes.rootNodes || []).length, firstNode });
+                }
+                catch { }
                 this.saveSnapshot('Imported rules');
                 this.validateRules();
             }
@@ -14960,6 +14999,8 @@ class RuleEditorComponent {
     destroy$ = new Subject();
     // Component state
     currentState = null;
+    // Derived: JSON representation of the builder state (nodes/rootNodes[/selectedNodeId])
+    builderStateJson = null;
     validationErrors = [];
     selectedNode = null;
     fieldSchemas = {};
@@ -14989,12 +15030,23 @@ class RuleEditorComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    ngOnChanges(changes) {
+        if (changes['initialRules'] && !changes['initialRules'].firstChange) {
+            try {
+                this.importInitialRules();
+            }
+            catch (error) {
+                console.error('Failed to re-import rules:', error);
+            }
+        }
+    }
     setupSubscriptions() {
         // Subscribe to rule builder state changes
         this.ruleBuilderService.state$
             .pipe(takeUntil$1(this.destroy$))
             .subscribe((state) => {
             this.currentState = state;
+            this.updateBuilderStateJson();
             this.updateSelectedNode();
             this.rulesChanged.emit(state);
         });
@@ -15040,6 +15092,23 @@ class RuleEditorComponent {
             this.importInitialRules();
         }
     }
+    updateBuilderStateJson() {
+        const state = this.currentState;
+        if (state && Array.isArray(state.rootNodes) && state.rootNodes.length > 0) {
+            // Build minimal, stable view of the builder state for JSON preview
+            const json = {
+                nodes: state.nodes,
+                rootNodes: state.rootNodes,
+            };
+            if (state.selectedNodeId) {
+                json.selectedNodeId = state.selectedNodeId;
+            }
+            this.builderStateJson = json;
+        }
+        else {
+            this.builderStateJson = null;
+        }
+    }
     importInitialRules() {
         try {
             let content;
@@ -15055,6 +15124,10 @@ class RuleEditorComponent {
             else {
                 content = JSON.stringify(this.initialRules);
             }
+            try {
+                (console.debug || console.log)('[RuleEditor] importInitialRules', { format, contentPreview: (content || '').slice(0, 200) });
+            }
+            catch { }
             this.ruleBuilderService.import(content, { format });
         }
         catch (error) {
@@ -15360,7 +15433,7 @@ class RuleEditorComponent {
         this.snackBar.open(`Rule "${rule.name}" ${enabled ? 'enabled' : 'disabled'}`, 'Close', { duration: 2000 });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RuleEditorComponent, deps: [{ token: RuleBuilderService }, { token: FieldSchemaService }, { token: i1$1.MatSnackBar }, { token: i1.FormBuilder }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: RuleEditorComponent, isStandalone: true, selector: "praxis-rule-editor", inputs: { config: "config", initialRules: "initialRules", embedded: "embedded" }, outputs: { rulesChanged: "rulesChanged", exportRequested: "exportRequested", importRequested: "importRequested" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: RuleEditorComponent, isStandalone: true, selector: "praxis-rule-editor", inputs: { config: "config", initialRules: "initialRules", embedded: "embedded" }, outputs: { rulesChanged: "rulesChanged", exportRequested: "exportRequested", importRequested: "importRequested" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="rule-editor-container" [class.embedded]="embedded">
       <!-- Header Toolbar -->
       <mat-toolbar class="rule-editor-toolbar">
@@ -15592,7 +15665,7 @@ class RuleEditorComponent {
                 <mat-tab label="JSON Preview">
                   <div class="json-viewer">
                     <praxis-json-viewer
-                      [json]="currentState?.currentJSON"
+                      [json]="builderStateJson"
                       [editable]="currentState?.mode === 'json'"
                       (jsonChanged)="onJsonChanged($event)"
                     >
@@ -15956,7 +16029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 <mat-tab label="JSON Preview">
                   <div class="json-viewer">
                     <praxis-json-viewer
-                      [json]="currentState?.currentJSON"
+                      [json]="builderStateJson"
                       [editable]="currentState?.mode === 'json'"
                       (jsonChanged)="onJsonChanged($event)"
                     >