import { Component, EventEmitter, Input, Output, HostListener } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';
import { CommonModule } from '@angular/common';
import { AddSectionComponent } from '../../elements/add-section/add-section.component';
import { CdkDrag } from '@angular/cdk/drag-drop';
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/common";
export class HoverElementsComponent {
    constructor(_eventService, dialog) {
        this._eventService = _eventService;
        this.dialog = dialog;
        this.edit = new EventEmitter();
        this.isMerged = false;
        this.isEcommerce = false;
        this.isMenuOpen = false;
        this.point = { x: 20, y: -50 };
    }
    ngOnInit() {
        console.log(this.data, this.index, this.editOptions, this.isMerged, this.isEcommerce);
    }
    toggleMenu(event) {
        this.isMenuOpen = !this.isMenuOpen;
        event.stopPropagation();
    }
    onDocumentClick() {
        this.isMenuOpen = false;
    }
    editSection() {
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    restyleSection(event) {
        this._eventService.closeEditorEvent.emit(false);
        this._eventService.restyleSection.emit({ index: this.index });
        event.stopPropagation();
    }
    changeContent(event) {
        this._eventService.changeContent.emit({ sectionId: this.data.componentId, index: this.index, sectionType: this.data.sectionType });
        event.stopPropagation();
    }
    moveUp(event) {
        this._eventService.changePosition.emit({ index: this.index, position: "UP" });
        event.stopPropagation();
    }
    moveDown(event) {
        this._eventService.changePosition.emit({ index: this.index, position: "DOWN" });
        event.stopPropagation();
    }
    deleteSection(event) {
        this._eventService.delete.emit({ index: this.index });
        event.stopPropagation();
    }
    addSection(position, event) {
        // this._eventService.addNewSectionClick.emit({ status: true, index: this.index, position: position, webCompName:this.data});
        // event.stopPropagation();
        let dialog = this.dialog.open(AddSectionComponent, { panelClass: "add-section", data: { status: true, index: this.index, position: position } });
        dialog.backdropClick().subscribe((res) => {
            const dialogElement = document.querySelector('.add-section');
            if (dialogElement) {
                dialogElement.classList.add('closing');
                setTimeout(() => {
                    dialog.close();
                }, 10000);
            }
            else {
                setTimeout(() => {
                    dialog.close();
                }, 10000);
            }
        });
    }
    duplicateSection(event) {
        this._eventService.duplicate.emit({ index: this.index, data: this.data });
        event.stopPropagation();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, deps: [{ token: i1.EventsService }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('ABOVE', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('BELOW', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:1px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.bottom-btn .add_btn:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.border-radius-50{border-radius:50%!important}:is(.bottom-btn,.top-btn) mat-icon{font-size:21px!important;width:21px!important;display:flex;align-items:center;justify-content:center}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:1px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);border:none;color:#fff;cursor:pointer;outline:none;z-index:1001;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.top-btn .add_btn_top:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, MatMenuModule, CommonModule, AddSectionComponent, CdkDrag], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('ABOVE', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('BELOW', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:1px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.bottom-btn .add_btn:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.border-radius-50{border-radius:50%!important}:is(.bottom-btn,.top-btn) mat-icon{font-size:21px!important;width:21px!important;display:flex;align-items:center;justify-content:center}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:1px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);border:none;color:#fff;cursor:pointer;outline:none;z-index:1001;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.top-btn .add_btn_top:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }, { type: i2.MatDialog }], propDecorators: { edit: [{
                type: Output
            }], data: [{
                type: Input
            }], index: [{
                type: Input
            }], editOptions: [{
                type: Input
            }], isMerged: [{
                type: Input
            }], isEcommerce: [{
                type: Input
            }], onDocumentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 