matcha-components 20.267.0 → 20.269.0

package/fesm2022/matcha-components.mjs

@@ -15616,14 +15616,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class MatchaPageBuilderComponent {
     set text(value) {
         this._text = value;
-        if (this.isEditorInitialized && this.editor && value) {
-            this.editor.setComponents(value);
+        if (this.isEditorInitialized && this.editor) {
+            if (value) {
+                this.editor.setComponents(value);
+            }
+            else {
+                this.editor.runCommand('core:canvas-clear');
+            }
         }
     }
     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 = '';
@@ -15734,7 +15741,8 @@ class MatchaPageBuilderComponent {
                 this.editor = grapesjs.init({
                     height: '100%',
                     container: `#${this.containerId}`,
-                    fromElement: true, // Changed from false to true
+                    fromElement: true,
+                    storageManager: false,
                     showOffsets: true,
                     assetManager: {
                         embedAsBase64: true,
@@ -16113,7 +16121,20 @@ class MatchaPageBuilderComponent {
                     if (this._text) {
                         this.editor.setComponents(this._text);
                     }
+                    else {
+                        this.editor.runCommand('core:canvas-clear');
+                    }
                     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,16 +16155,17 @@ 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-skeleton *ngIf=\"isLoading\" height=\"600\" [amount]=\"1\" model=\"empty\"></matcha-skeleton>\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: MatchaSkeletonComponent, selector: "matcha-skeleton", inputs: ["amount", "grid", "height", "model", "gap"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-page-builder', encapsulation: ViewEncapsulation.None, standalone: false, 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>" }]
+            args: [{ selector: 'matcha-page-builder', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"matcha-page-builder\">\n    <matcha-skeleton *ngIf=\"isLoading\" height=\"600\" [amount]=\"1\" model=\"empty\"></matcha-skeleton>\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>" }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { gjsContainer: [{
                 type: ViewChild,
                 args: ['gjsContainer', { static: false }]
@@ -16151,6 +16173,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], onSave: [{
                 type: Output
+            }], onChange: [{
+                type: Output
             }], text: [{
                 type: Input
             }] } });
@@ -16159,10 +16183,10 @@ class MatchaPageBuilderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, declarations: [MatchaPageBuilderComponent], imports: [CommonModule,
             MatchaButtonModule,
-            MatchaSpinnerModule], exports: [MatchaPageBuilderComponent] }); }
+            MatchaSkeletonModule], exports: [MatchaPageBuilderComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, imports: [CommonModule,
             MatchaButtonModule,
-            MatchaSpinnerModule] }); }
+            MatchaSkeletonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, decorators: [{
             type: NgModule,
@@ -16171,7 +16195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     imports: [
                         CommonModule,
                         MatchaButtonModule,
-                        MatchaSpinnerModule,
+                        MatchaSkeletonModule,
                     ],
                     exports: [MatchaPageBuilderComponent]
                 }]