matcha-components 20.268.0 → 20.270.0

package/fesm2022/matcha-components.mjs

@@ -9945,6 +9945,12 @@ class MatchaDropListComponent {
                 return;
             }
         }
+        // Depth check
+        if (isCrossContainer && !this.isDepthAllowed(dragDirective)) {
+            this.isReceivingDrag = true;
+            this.canAcceptDrop = false;
+            return;
+        }
         const allItems = this.directDragItems;
         const allEls = allItems.map(d => d.elementRef.nativeElement);
         const draggedEl = dragDirective.elementRef.nativeElement;
@@ -10040,6 +10046,11 @@ class MatchaDropListComponent {
                 return;
             }
         }
+        // Depth check
+        if (sourceContainer !== this && !this.isDepthAllowed(dragDirective)) {
+            this.clearPlaceholder();
+            return;
+        }
         const dropIndex = this.calculatedDropIndex;
         this.clearPlaceholder();
         if (sourceContainer === this) {
@@ -10127,6 +10138,35 @@ class MatchaDropListComponent {
     getDragItemIndex(dragItem) {
         return this.directDragItems.indexOf(dragItem);
     }
+    isDepthAllowed(dragDirective) {
+        if (this.matchaDropListMaxDepth === undefined)
+            return true;
+        let targetDepth = 1;
+        let el = this.elementRef.nativeElement.parentElement;
+        while (el) {
+            if (el.classList.contains('matcha-drop-list'))
+                targetDepth++;
+            el = el.parentElement;
+        }
+        const subtreeHeight = dragDirective?.matchaDragGroupEl
+            ? this.getGroupSubtreeHeight(dragDirective.matchaDragGroupEl)
+            : 0;
+        return targetDepth + subtreeHeight <= this.matchaDropListMaxDepth;
+    }
+    getGroupSubtreeHeight(groupEl) {
+        let maxDepth = 0;
+        const traverse = (node, depth) => {
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                const childDepth = child.classList.contains('matcha-drop-list') ? depth + 1 : depth;
+                if (childDepth > maxDepth)
+                    maxDepth = childDepth;
+                traverse(child, childDepth);
+            }
+        };
+        traverse(groupEl, 0);
+        return maxDepth;
+    }
     // --- Kept for backward compat (no-ops with new engine) ---
     onDragStart(dragItem, _event) {
         this.onPointerDragStart(dragItem);
@@ -10137,7 +10177,7 @@ class MatchaDropListComponent {
     handleTouchDragOver(_event) { }
     handleTouchDrop(_event, _dragItem) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate", matchaDropListAcceptTypes: "matchaDropListAcceptTypes", matchaDropListTreeMode: "matchaDropListTreeMode", matchaDropListHoverExpandDelay: "matchaDropListHoverExpandDelay" }, outputs: { matchaDropListDropped: "matchaDropListDropped", matchaDropListHoverExpand: "matchaDropListHoverExpand" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && directDragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate", matchaDropListAcceptTypes: "matchaDropListAcceptTypes", matchaDropListTreeMode: "matchaDropListTreeMode", matchaDropListHoverExpandDelay: "matchaDropListHoverExpandDelay", matchaDropListMaxDepth: "matchaDropListMaxDepth" }, outputs: { matchaDropListDropped: "matchaDropListDropped", matchaDropListHoverExpand: "matchaDropListHoverExpand" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && directDragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListComponent, decorators: [{
             type: Component,
@@ -10158,6 +10198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], matchaDropListHoverExpandDelay: [{
                 type: Input
+            }], matchaDropListMaxDepth: [{
+                type: Input
             }], matchaDropListDropped: [{
                 type: Output
             }], matchaDropListHoverExpand: [{
@@ -15616,8 +15658,13 @@ 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) {
@@ -15736,7 +15783,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,
@@ -16115,6 +16163,9 @@ 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);
@@ -16152,11 +16203,11 @@ class MatchaPageBuilderComponent {
         }
     }
     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", 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 }); }
+    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 }]
@@ -16174,10 +16225,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,
@@ -16186,7 +16237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     imports: [
                         CommonModule,
                         MatchaButtonModule,
-                        MatchaSpinnerModule,
+                        MatchaSkeletonModule,
                     ],
                     exports: [MatchaPageBuilderComponent]
                 }]