matcha-components 20.267.0 → 20.268.0

package/fesm2022/matcha-components.mjs

@@ -15622,8 +15622,10 @@ class MatchaPageBuilderComponent {
     }
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.showControls = true;
+        this.showControls = false;
         this.onSave = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this._changeDebounceTimer = null;
         this.containerId = 'gjs-' + Math.random().toString(36).substring(2, 9);
         this.isLoading = true;
         this._text = '';
@@ -16114,6 +16116,16 @@ class MatchaPageBuilderComponent {
                         this.editor.setComponents(this._text);
                     }
                     this.ngZone.run(() => { this.isLoading = false; });
+                    editor.on('update', () => {
+                        clearTimeout(this._changeDebounceTimer);
+                        this._changeDebounceTimer = setTimeout(() => {
+                            const html = editor.getHtml();
+                            const css = editor.getCss();
+                            this.ngZone.run(() => {
+                                this.onChange.emit(`<style>${css}</style>${html}`);
+                            });
+                        }, 300);
+                    });
                 });
                 // Se o evento 'load' demorar, podemos tentar setar os componentes se já estiver inicializado
                 if (this.editor && !this.isEditorInitialized && this._text) {
@@ -16134,12 +16146,13 @@ class MatchaPageBuilderComponent {
         this.onSave.emit(combinedOutput);
     }
     ngOnDestroy() {
+        clearTimeout(this._changeDebounceTimer);
         if (this.editor) {
             this.editor.destroy();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaPageBuilderComponent, isStandalone: false, selector: "matcha-page-builder", inputs: { showControls: "showControls", text: "text" }, outputs: { onSave: "onSave" }, viewQueries: [{ propertyName: "gjsContainer", first: true, predicate: ["gjsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-page-builder\">\n    <matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n    <div class=\"editor-shell\" [style.display]=\"isLoading ? 'none' : 'block'\">\n        <div [id]=\"containerId\"></div>\n    </div>\n    <div class=\"editor-controls\" *ngIf=\"showControls && !isLoading\">\n        <button matcha-button (click)=\"save()\">Salvar</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaSpinnerComponent, selector: "matcha-spinner", inputs: ["progress", "color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaPageBuilderComponent, isStandalone: false, selector: "matcha-page-builder", inputs: { showControls: "showControls", text: "text" }, outputs: { onSave: "onSave", onChange: "onChange" }, viewQueries: [{ propertyName: "gjsContainer", first: true, predicate: ["gjsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-page-builder\">\n    <matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n    <div class=\"editor-shell\" [style.display]=\"isLoading ? 'none' : 'block'\">\n        <div [id]=\"containerId\"></div>\n    </div>\n    <div class=\"editor-controls\" *ngIf=\"showControls && !isLoading\">\n        <button matcha-button (click)=\"save()\">Salvar</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaSpinnerComponent, selector: "matcha-spinner", inputs: ["progress", "color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, decorators: [{
             type: Component,
@@ -16151,6 +16164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], onSave: [{
                 type: Output
+            }], onChange: [{
+                type: Output
             }], text: [{
                 type: Input
             }] } });