import { Component, HostListener, Input } from '@angular/core';
import { ColorDirective } from '../../directive/color.directive';
import { CommonModule } from '@angular/common';
import { SociaIconsComponent } from './../../elements/socia-icons/socia-icons.component';
import { FormsModule } from '@angular/forms';
import { BackgroundDirective } from '../../directive/background-directive';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import BaseSection from '../BaseSection';
import { HoverDirective } from '../../directive/hover-element-directive';
import { SimpoComponentModule } from '../../components/index';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { LinkEditorComponent } from '../../elements/link-editor/link-editor.component';
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "../../services/rest.service";
import * as i3 from "@angular/material/dialog";
import * as i4 from "@angular/router";
import * as i5 from "@angular/common";
import * as i6 from "../../components/hover-elements/hover-elements.component";
import * as i7 from "../../components/delete-hover-element/delete-hover-element.component";
import * as i8 from "@angular/material/icon";
export class FooterComponent extends BaseSection {
    constructor(_eventService, restService, matDialog, router) {
        super();
        this._eventService = _eventService;
        this.restService = restService;
        this.matDialog = matDialog;
        this.router = router;
        this.edit = true;
        this.delete = false;
        this.footerType = "1";
        this.screenWidth = 475;
        this.pageLink = "Pages";
        this.pages = [];
        this.popularSearchedCategories = [];
        this.getScreenSize();
    }
    async ngOnInit() {
        this.style = this.data?.styles;
        this.content = this.data?.content;
        this.getPopularSearches();
        this.getPages();
    }
    ngOnDestroy() {
        this.linkEditorSubscription?.unsubscribe();
    }
    getScreenSize(event) {
        if (typeof window !== 'undefined') {
            this.screenWidth = window.innerWidth;
        }
    }
    get stylesLayout() {
        return { ...this.style?.layout };
    }
    deleteFolderLinks(folderIndex, linkIndex) {
        this.content?.folder[folderIndex].links.splice(linkIndex, 1);
        if ((this.content?.folder?.[folderIndex]?.links?.length || 0) <= 0) {
            this.content?.folder.splice(folderIndex, 1);
        }
    }
    editLinks() {
    }
    redirectTo(link) {
        if (this.edit) {
            this.matDialog.open(LinkEditorComponent, { panelClass: 'link-editor', data: { linkData: link, type: "LINK" } });
        }
        else
            this._eventService.buttonRedirection.emit({ data: link });
    }
    getPages() {
        this.restService.getTemplate().subscribe((res) => {
            this.pages = res.data;
        });
    }
    redirectToPage(pageData) {
        let data = {
            label: pageData.pageName,
            redirectionUrl: pageData.path,
            pageId: pageData.id,
            status: true,
        };
        this._eventService.pageRedirectionButton.emit({ data: data });
    }
    createNewLink(folderIndex) {
        const editorComponent = this.matDialog.open(LinkEditorComponent, { panelClass: 'link-editor', data: { type: "LINK" } });
        this.linkEditorSubscription = editorComponent.afterClosed().subscribe((res) => {
            if (res.link) {
                this.content?.folder[folderIndex].links.push(res.link);
            }
        });
    }
    createNewFolder() {
        const editorComponent = this.matDialog.open(LinkEditorComponent, { panelClass: 'link-editor', data: { type: "LINK" } });
        editorComponent.afterClosed().subscribe((res) => {
            if (res.link) {
                let folder = {
                    label: "Add folder name",
                    links: [res.link]
                };
                if (this.content && !this.content?.folder)
                    this.content.folder = [];
                this.content?.folder.push(folder);
            }
        });
    }
    navigateToHome() {
        this.router.navigate([]);
    }
    getPopularSearches() {
        this.restService.getPopularSearches().subscribe((res) => {
            this.popularSearchedCategories = res;
        });
    }
    redirectToCollection(collectionName, categoryName) {
        this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), collections: collectionName?.replaceAll(" ", '_'), pageNo: 1 } });
    }
    redirectToCategory(categoryName) {
        this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), pageNo: 1 } });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: i1.EventsService }, { token: i2.RestService }, { token: i3.MatDialog }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n  <div>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"content?.textDescription?.display\">\r\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"content?.popularSearches\">\r\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n  <div class=\"row align-items-center\">\r\n    <div class=\"col-md-4\">\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n      </div>\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-8\">\r\n      <div class=\"row\">\r\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr *ngIf=\"content?.displayBranding\">\r\n  <div *ngIf=\"content?.displayBranding\">\r\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n  <div class=\"row align-items-center\">\r\n    <div class=\"col-md-3\">\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n      </div>\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9\">\r\n      <div class=\"row\">\r\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr *ngIf=\"content?.displayBranding\">\r\n  <div *ngIf=\"content?.displayBranding\">\r\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n  </div>\r\n  <hr>\r\n  <div class=\"row justify-content-between\">\r\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n      [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n  <div class=\"row align-items-center\">\r\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n  </div>\r\n  <hr>\r\n  <div class=\"row justify-content-between\">\r\n    <div class=\"col-md-4\">\r\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n          (click)=\"navigateToHome()\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n        (click)=\"navigateToHome()\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n        loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n  </ng-container>\r\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div class=\"icons\">\r\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\r\n    {{page.pageName}}\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n    <ng-container *ngFor=\"let page of pages\">\r\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n    [class.w-50]=\"screenWidth < 475\">\r\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n    <div class=\"mt-15\">\r\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n            {{page.label}}</div>\r\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n    <mat-icon>add</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n    <mat-icon>add</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n  <div class=\"popular-searches mt-4\">\r\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n    <hr class=\"mb-4\">\r\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n      <div class=\"popular-category mb-4\">\r\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n        </div>\r\n        <div class=\"category-links d-flex flex-wrap gap-2\">\r\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n            <span class=\"popular-link\"\r\n              (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n          </ng-container>\r\n        </div>\r\n        <hr *ngIf=\"!last\">\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n  <div class=\"text-description mt-2\">\r\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n        [sectionId]=\"data?.id\"></simpo-text-editor>\r\n    </ng-container>\r\n  </div>\r\n  <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i6.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i7.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                //directives
                SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-footer', standalone: true, imports: [
                        CommonModule,
                        ColorDirective,
                        SociaIconsComponent,
                        FormsModule,
                        SimpoComponentModule,
                        MatIconModule,
                        MatDialogModule,
                        //directives
                        SpacingHorizontalDirective,
                        BackgroundDirective,
                        ContentFitDirective,
                        TextEditorComponent,
                        HoverDirective
                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n  <div>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"content?.textDescription?.display\">\r\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"content?.popularSearches\">\r\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n  <div class=\"row align-items-center\">\r\n    <div class=\"col-md-4\">\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n      </div>\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-8\">\r\n      <div class=\"row\">\r\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr *ngIf=\"content?.displayBranding\">\r\n  <div *ngIf=\"content?.displayBranding\">\r\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n  <div class=\"row align-items-center\">\r\n    <div class=\"col-md-3\">\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n      </div>\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9\">\r\n      <div class=\"row\">\r\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr *ngIf=\"content?.displayBranding\">\r\n  <div *ngIf=\"content?.displayBranding\">\r\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n  </div>\r\n  <hr>\r\n  <div class=\"row justify-content-between\">\r\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n      [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n  <div class=\"row align-items-center\">\r\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n  </div>\r\n  <hr>\r\n  <div class=\"row justify-content-between\">\r\n    <div class=\"col-md-4\">\r\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n          (click)=\"navigateToHome()\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n        (click)=\"navigateToHome()\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n        loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n  </ng-container>\r\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div class=\"icons\">\r\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\r\n    {{page.pageName}}\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n    <ng-container *ngFor=\"let page of pages\">\r\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n    [class.w-50]=\"screenWidth < 475\">\r\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n    <div class=\"mt-15\">\r\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n            {{page.label}}</div>\r\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n    <mat-icon>add</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n    <mat-icon>add</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n  <div class=\"popular-searches mt-4\">\r\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n    <hr class=\"mb-4\">\r\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n      <div class=\"popular-category mb-4\">\r\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n        </div>\r\n        <div class=\"category-links d-flex flex-wrap gap-2\">\r\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n            <span class=\"popular-link\"\r\n              (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n          </ng-container>\r\n        </div>\r\n        <hr *ngIf=\"!last\">\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n  <div class=\"text-description mt-2\">\r\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n        [sectionId]=\"data?.id\"></simpo-text-editor>\r\n    </ng-container>\r\n  </div>\r\n  <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }, { type: i2.RestService }, { type: i3.MatDialog }, { type: i4.Router }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], getScreenSize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 