import { Component, Inject } from '@angular/core';
import { GradientDirection, RedirectionLinkType } from '../../styles/index';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatOptionModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MediaSelectorComponent } from '../media-selector/media-selector.component';
import { MatSliderModule } from '@angular/material/slider';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import * as i0 from "@angular/core";
import * as i1 from "../editor-service.service";
import * as i2 from "@angular/material/dialog";
import * as i3 from "../../services/events.service";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
import * as i6 from "@angular/material/icon";
export class LinkEditorComponent {
    constructor(editorService, dialogRef, data, eventService, matDialog) {
        this.editorService = editorService;
        this.dialogRef = dialogRef;
        this.data = data;
        this.eventService = eventService;
        this.matDialog = matDialog;
        this.link = {
            linkType: RedirectionLinkType.Page,
            label: '',
            redirectionUrl: '',
            pageId: '',
            newTab: false,
        };
        this.RedirectionLink = RedirectionLinkType;
        this.externalLinkType = [
            {
                type: RedirectionLinkType.External
            },
            {
                type: RedirectionLinkType.Email
            },
            {
                type: RedirectionLinkType.Phone
            }
            // {
            //   type: RedirectionLinkType.section
            // }
        ];
        this.selectedType = RedirectionLinkType.Page;
        this.linkType = [
            {
                type: RedirectionLinkType.Page
            },
            {
                type: RedirectionLinkType.section
            },
            {
                type: RedirectionLinkType.External
            }
        ];
        this.buttonTypes = [
            {
                type: "Solid"
            },
            {
                type: "Outline"
            },
            {
                type: "Text"
            }
        ];
        this.buttonShapes = [
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/832968c1747221270856Vector%2048%20(2).png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/481850c1747220937693Vector%2048%20(1).png",
                type: "Square"
            },
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/830842c1747220757453Vector%2049.png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/780601c1747221243613Vector%2049%20(1).png",
                type: "Curve"
            },
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/210350c1747220803521Vector%2050.png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/939611c1747220900124Vector%2050%20(1).png",
                type: "Round"
            }
        ];
        this.directionType = [
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/664403c1747306840304arrow-down.png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/587430c1747306898465arrow-down.png",
                type: "DOWN"
            },
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/193359c1747306949522arrow-right.png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/450943c1747317759388arrow-right (2).png",
                type: "RIGHT"
            },
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/493838c1747307094821arrow-right (3).png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/699932c1747307157944arrow-right (4).png",
                type: "DIAGONAL_RIGHT"
            },
            {
                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/911971c1747307199115arrow-right (5).png",
                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/968726c1747307227255arrow-right (6).png",
                type: "DIAGONAL_LEFT"
            }
        ];
        this.templatePage = [];
        this.addLink = true;
        this.backgroundType = ['Solid', 'Gradient'];
        this.imgLoader = false;
    }
    ngOnInit() {
        this.addLink = true;
        if (this.data?.linkData) {
            this.link = this.data.linkData;
            this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
            this.addLink = false;
            if (this.data.buttonStyle && this.data.buttonStyle.gradientDirection)
                this.data.buttonStyle.gradientDirection = this.data?.buttonStyle?.gradientDirection || GradientDirection.DOWN;
        }
        if (this.data?.buttonStyle?.type == 'Outline' || this.data?.buttonStyle?.type == 'Text') {
            this.backgroundType = ['Solid'];
            this.data.buttonStyle.colorType = 'Solid';
        }
        else {
            this.backgroundType = ['Solid', 'Gradient'];
        }
        this.getTemplatePage();
    }
    closeDialog() {
        this.dialogRef.close();
    }
    getTemplatePage() {
        this.editorService.getTemplate().subscribe((res) => {
            this.templatePage = res.data;
        });
    }
    changeType(type) {
        this.selectedType = type;
        this.link.linkType = this.selectedType;
    }
    addNewLink() {
        this.dialogRef.close({ link: this.link });
    }
    getColorLabel() {
        if (this.data.buttonStyle?.type == 'Outline') {
            return 'Outline Color';
        }
        else if (this.data.buttonStyle?.type == 'Text') {
            return 'Text Color';
        }
        return 'Button Color';
    }
    changeButtonStyle() {
        // debugger
        if (this.data?.buttonStyle?.type == 'Outline' || this.data?.buttonStyle?.type == 'Text') {
            this.backgroundType = ['Solid'];
            this.data.buttonStyle.colorType = 'Solid';
        }
        else {
            this.backgroundType = ['Solid', 'Gradient'];
        }
        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
    }
    getContrastTextColor(backgroundHex) {
        let hex = backgroundHex?.replace('#', '');
        if (hex?.length === 3) {
            hex = hex.split('').map((c) => c + c).join('');
        }
        const r = parseInt(hex?.substr(0, 2), 16) / 255;
        const g = parseInt(hex?.substr(2, 2), 16) / 255;
        const b = parseInt(hex?.substr(4, 2), 16) / 255;
        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
        this.data.buttonStyle.textColor = luminance < 0.5 ? "#FFFFFF" : "#000000";
        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
    }
    setBorderRadius() {
        if (this.data.buttonStyle.type == 'Text') {
            return '0px';
        }
        if (this.data.buttonStyle.shape == 'Square') {
            return '0px';
        }
        if (this.data.buttonStyle.shape == 'Curve') {
            return '7px';
        }
        if (this.data.buttonStyle.shape == 'Round') {
            return '99px';
        }
        return '0px';
    }
    setBorder() {
        if (this.data.buttonStyle.type == 'Text') {
            return 'unset';
        }
        if (this.data.buttonStyle.type == 'Solid') {
            return `unset`;
        }
        if (this.data.buttonStyle.type == 'Outline') {
            return `2px solid ${this.data.buttonStyle?.background}`;
        }
        return 'unset';
    }
    setColor() {
        return this.data.buttonStyle?.textColor || '#ffffff';
    }
    setBackground() {
        if (this.data.buttonStyle?.colorType == 'Solid' && this.data.buttonStyle.type == 'Solid') {
            return this.data.buttonStyle?.background;
        }
        else if (this.data.buttonStyle?.colorType == 'Gradient' && this.data.buttonStyle.type == 'Solid') {
            const direction = GradientDirection[this.data.buttonStyle.gradientDirection || GradientDirection.DOWN];
            return `linear-gradient(${direction}, ${this.data.buttonStyle?.background}, ${this.data.buttonStyle?.secondaryBackground})`;
        }
        else {
            return '';
        }
    }
    async updateImage() {
        this.imgLoader = true;
        const mediaSelectorDialog = this.matDialog.open(MediaSelectorComponent, { data: { multiple: false }, panelClass: "media-selector" });
        mediaSelectorDialog.afterClosed().subscribe({
            next: (res) => {
                if (res) {
                    this.link.icon.url = res[0].assets[0].url ?? "";
                }
                this.imgLoader = false;
            }
        });
    }
    deleteImage() {
        this.link.icon.url = '';
    }
    setRedirectUrl() {
        this.link.redirectionUrl = '';
        for (let page of this.templatePage) {
            if (page.id === this.link.pageId) {
                this.link.redirectionUrl = page.path;
                break;
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: i1.ElementServiceService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.EventsService }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\" [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text'\" [style.color]=\"data.buttonStyle.background\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                        (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"visibility: hidden;\"\r\n                        #colorInput>\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                          (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput1>\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                          (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput>\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"text-background\">\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput3>\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\"\r\n            *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n        <div class=\"fw-bold\">Show Icon</div>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <!-- <p class=\"heading mb-0\">Image</p> -->\r\n        <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n          <img loading=\"lazy\"\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n            alt=\"\">\r\n          <p class=\"upload-text mb-0\">Upload a file</p>\r\n          <p class=\"upload-text mb-0\">or select an existing one</p>\r\n          <span class=\"upload-text\">up to 32MB</span>\r\n        </div>\r\n        <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n          <ng-container *ngIf=\"!imgLoader\">\r\n            <img [src]=\"link?.icon?.url\">\r\n            <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"imgLoader\">\r\n            <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n              <mat-spinner></mat-spinner>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n      <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n      <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n        <div class=\"tab px-3 py-2 cursor-pointer\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n          [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\r\n          {{tab | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{text-align:center;border:1px solid var(--primary-bg-color);color:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040;border-radius:10px}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid var(--primary-bg-color)}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\" [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text'\" [style.color]=\"data.buttonStyle.background\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                        (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"visibility: hidden;\"\r\n                        #colorInput>\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                          (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput1>\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                          (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput>\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"text-background\">\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"visibility: hidden;\" #colorInput3>\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\"\r\n            *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n        <div class=\"fw-bold\">Show Icon</div>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <!-- <p class=\"heading mb-0\">Image</p> -->\r\n        <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n          <img loading=\"lazy\"\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n            alt=\"\">\r\n          <p class=\"upload-text mb-0\">Upload a file</p>\r\n          <p class=\"upload-text mb-0\">or select an existing one</p>\r\n          <span class=\"upload-text\">up to 32MB</span>\r\n        </div>\r\n        <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n          <ng-container *ngIf=\"!imgLoader\">\r\n            <img [src]=\"link?.icon?.url\">\r\n            <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"imgLoader\">\r\n            <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n              <mat-spinner></mat-spinner>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n      <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n      <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n        <div class=\"tab px-3 py-2 cursor-pointer\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n          [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\r\n          {{tab | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{text-align:center;border:1px solid var(--primary-bg-color);color:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040;border-radius:10px}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid var(--primary-bg-color)}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
        }], ctorParameters: () => [{ type: i1.ElementServiceService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: i3.EventsService }, { type: i2.MatDialog }] });
//# sourceMappingURL=data:application/json;base64, 