simpo-component-library 3.0.37 → 3.0.39

package/fesm2022/simpo-component-library.mjs

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, Pipe, HostListener, Output, NgModule, ViewChild, Optional, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, Pipe, HostListener, Output, NgModule, ViewChild, Optional, Inject, PLATFORM_ID, ElementRef, Renderer2, forwardRef } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,7 +11,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i5 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i8 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import * as i13$1 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i13 from '@angular/material/core';
@@ -9707,6 +9707,346 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class ContenteditableValueAccessor {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.onTouched = () => { };
+        this.contenteditable = true; // Allow dynamic input
+        this.onChange = (_value) => { };
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
+        this.observer = new MutationObserver(() => {
+            this.onChange(this.elementRef.nativeElement.innerHTML);
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    onInput() {
+        this.observer?.disconnect();
+        this.onChange(this.elementRef.nativeElement.innerHTML);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ContenteditableValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[contenteditable][ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ContenteditableValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { contenteditable: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class TextEditorComponent {
+    constructor() {
+        this.value = '<p>Hello this is palash makhija</p>';
+        this.editable = false;
+        this.show = false;
+        this.toolbarX = 0;
+        this.toolbarY = 0;
+        this.toolbarData = {
+            selectedHeading: '',
+            isBold: false,
+            isItalic: false,
+            isUnderlined: false,
+            selectedSize: '',
+            selectedList: '',
+            selectedAlignment: '',
+            selectedColor: ''
+        };
+    }
+    ngOnInit() {
+        document.addEventListener('mousedown', this.hideToolbar.bind(this));
+    }
+    ngOnDestroy() {
+        document.removeEventListener('mousedown', this.hideToolbar.bind(this));
+    }
+    showToolbar(event) {
+        const selection = window.getSelection();
+        if (selection && selection.toString().trim() !== '') {
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            // Toolbar dimensions (adjust if necessary)
+            const toolbarWidth = 630; // Replace with actual width
+            const toolbarHeight = 45; // Replace with actual height
+            const margin = 10;
+            // Get viewport dimensions
+            const viewportWidth = window.innerWidth;
+            // Always center horizontally on X-axis
+            let newXViewport = rect.left + (rect.width / 2) - (toolbarWidth / 2); // Center horizontally
+            // Prevent X-axis overflow
+            if (newXViewport + toolbarWidth > viewportWidth) {
+                newXViewport = Math.max(0, viewportWidth - toolbarWidth - margin); // Adjust for right overflow
+            }
+            else if (newXViewport < 0) {
+                newXViewport = margin; // Adjust for left overflow
+            }
+            // Keep Y-axis position fixed above the selection by default
+            let newYViewport = rect.top - toolbarHeight - margin;
+            // Adjust Y-axis if there’s no space above the selection
+            if (newYViewport < 0) {
+                newYViewport = rect.bottom + margin; // Move below selection
+            }
+            // Convert to page coordinates
+            this.toolbarX = newXViewport + window.scrollX;
+            this.toolbarY = newYViewport + window.scrollY;
+            this.reFormattingData();
+            this.readFormattingProperties();
+            this.show = true;
+        }
+        else {
+            this.show = false;
+        }
+    }
+    hideToolbar(event) {
+        const clickedInsideEditor = this.editor?.nativeElement.contains(event.target);
+        const clickedInsideToolbar = this.toolbar?.nativeElement.contains(event.target);
+        // Hide the toolbar if the click is outside both the editor and toolbar
+        if (!clickedInsideEditor && !clickedInsideToolbar) {
+            this.show = false;
+        }
+    }
+    formatText(command, value = '') {
+        //   if (command === 'formatBlock') {
+        //     const selection = window.getSelection();
+        //     if (!selection || selection.rangeCount === 0) return;
+        //     const range = selection.getRangeAt(0);
+        //     const selectedText = selection.toString();
+        //     if (selectedText) {
+        //         const newElement = document.createElement(value);
+        //         newElement.textContent = selectedText;
+        //         range.deleteContents();
+        //         range.insertNode(newElement);
+        //         this.toolbarData.selectedHeading = value;
+        //         return;
+        //     }
+        // }
+        document.execCommand(command, false, value);
+        if (command === 'bold')
+            this.toolbarData.isBold = !this.toolbarData.isBold;
+        if (command === 'italic')
+            this.toolbarData.isItalic = !this.toolbarData.isItalic;
+        if (command === 'underline')
+            this.toolbarData.isUnderlined = !this.toolbarData.isUnderlined;
+        if (command === 'insertOrderedList' || command === 'insertUnorderedList')
+            this.toolbarData.selectedList = command === this.toolbarData.selectedList ? '' : command;
+        if (command === 'justifyLeft' || command === 'justifyCenter' || command === 'justifyRight')
+            this.toolbarData.selectedAlignment = command === this.toolbarData.selectedAlignment ? '' : command;
+        if (command === 'formatBlock')
+            this.toolbarData.selectedHeading = value;
+    }
+    changeFontSize(event) {
+        const size = event.target.value;
+        // Apply a default size of 4 (needed for execCommand to work)
+        document.execCommand('fontSize', false, '4');
+        // Convert selected font elements to have actual font-size instead of "size" attribute
+        const elements = document.querySelectorAll("font[size='4']");
+        elements.forEach(el => {
+            const htmlElement = el; // ✅ Explicitly cast to HTMLElement
+            htmlElement.removeAttribute('size'); // Remove old size attribute
+            htmlElement.style.fontSize = size; // Apply CSS font size
+        });
+        this.toolbarData.selectedSize = size;
+        // this.show = false; // Hide toolbar after action
+    }
+    changeColor(event) {
+        const color = event.target.value;
+        document.execCommand('foreColor', false, color);
+        this.toolbarData.selectedColor = color;
+        // this.show = false;
+    }
+    updateText(event) {
+    }
+    onFormatChange(event) {
+        const selectedValue = event.target.value;
+        this.formatText('formatBlock', selectedValue);
+    }
+    openColorPicker() {
+        this.colorPicker.nativeElement.click(); // Programmatically trigger input
+    }
+    readFormattingProperties() {
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        const node = selection.focusNode;
+        // Check if node is null
+        if (!node)
+            return;
+        let element = node.parentElement;
+        while (element) {
+            const nodeName = element.nodeName;
+            if (nodeName === 'H1' || nodeName === 'H2' || nodeName === 'H3') {
+                this.toolbarData.selectedHeading = nodeName;
+            }
+            else if (nodeName === 'B' || nodeName === 'STRONG') {
+                this.toolbarData.isBold = true;
+            }
+            else if (nodeName === 'I' || nodeName === 'EM') {
+                this.toolbarData.isItalic = true;
+            }
+            else if (nodeName === 'U') {
+                this.toolbarData.isUnderlined = true;
+            }
+            else if (nodeName === 'OL') {
+                this.toolbarData.selectedList = 'insertOrderedList';
+            }
+            else if (nodeName === 'UL') {
+                this.toolbarData.selectedList = 'insertUnorderedList';
+            }
+            else if (element.style.textAlign) {
+                this.toolbarData.selectedAlignment = `justify${element.style.textAlign.charAt(0).toUpperCase() + element.style.textAlign.slice(1)}`;
+            }
+            else if (element.style.fontSize) {
+                this.toolbarData.selectedSize = element.style.fontSize;
+            }
+            else if (element.style.color) {
+                this.toolbarData.selectedColor = element.style.color;
+            }
+            element = element.parentElement;
+        }
+    }
+    reFormattingData() {
+        this.toolbarData = {
+            selectedHeading: '',
+            isBold: false,
+            isItalic: false,
+            isUnderlined: false,
+            selectedSize: '',
+            selectedList: '',
+            selectedAlignment: '',
+            selectedColor: ''
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\">\r\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n    (input)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\">\r\n  </div>\r\n\r\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY, 'left.px': toolbarX}\" #toolbar >\r\n    <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n      <option value=\"H1\">Heading1</option>\r\n      <option value=\"H2\">Heading2</option>\r\n      <option value=\"H3\">Heading3</option>\r\n      <option value=\"div\">Text</option>\r\n    </select>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n    <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n      <option value=\"\" selected>Default</option>\r\n      <option value=\"18px\">Small</option>\r\n      <option value=\"24px\">Medium</option>\r\n      <option value=\"32px\">Large</option>\r\n      <option value=\"48px\">Extra Large</option>\r\n      <option value=\"72px\">Huge</option>\r\n    </select>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\">\r\n      <mat-icon>format_color_text</mat-icon>\r\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\" [(ngModel)]=\"toolbarData.selectedColor\">\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".editor-container{display:inline-block;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;border-bottom:1px dashed #ccc;cursor:text}.toolbar{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background-color:#0496ff!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.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: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-text-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ContenteditableValueAccessor,
+                        MatIconModule
+                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\">\r\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n    (input)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\">\r\n  </div>\r\n\r\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY, 'left.px': toolbarX}\" #toolbar >\r\n    <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n      <option value=\"H1\">Heading1</option>\r\n      <option value=\"H2\">Heading2</option>\r\n      <option value=\"H3\">Heading3</option>\r\n      <option value=\"div\">Text</option>\r\n    </select>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n    <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n      <option value=\"\" selected>Default</option>\r\n      <option value=\"18px\">Small</option>\r\n      <option value=\"24px\">Medium</option>\r\n      <option value=\"32px\">Large</option>\r\n      <option value=\"48px\">Extra Large</option>\r\n      <option value=\"72px\">Huge</option>\r\n    </select>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\">\r\n      <mat-icon>format_color_text</mat-icon>\r\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\" [(ngModel)]=\"toolbarData.selectedColor\">\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".editor-container{display:inline-block;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;border-bottom:1px dashed #ccc;cursor:text}.toolbar{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background-color:#0496ff!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { toolbar: [{
+                type: ViewChild,
+                args: ['toolbar', { static: false }]
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor', { static: false }]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: ['colorPicker']
+            }], value: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }] } });
+
+class FooterComponent {
+    constructor() {
+        this.edit = true;
+        this.delete = false;
+        this.footerType = "1";
+        this.screenWidth = 475;
+        this.pageLink = "About Us";
+        this.pages = ["Mission", "Our Team", "Awards", "Testimonials", "Privacy Policy"];
+        this.getScreenSize();
+    }
+    async ngOnInit() {
+        this.style = this.data?.styles;
+        this.content = this.data?.content;
+    }
+    getScreenSize(event) {
+        if (typeof window !== 'undefined') {
+            this.screenWidth = window.innerWidth;
+        }
+    }
+    get stylesLayout() {
+        return { ...this.style?.layout };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<section class=\"total-container\">\r\n  <div [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\"   [simpoLayout]=\"style?.layout\">\r\n    <ng-container *ngTemplateOutlet=\"footer1\"></ng-container>\r\n  </div>\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=\"pagesVertical\"></ng-container>\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        <ng-container *ngTemplateOutlet=\"foldersHorizontal\"></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=\"pagesVertical\"></ng-container>\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\" [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    <ng-container *ngTemplateOutlet=\"foldersHorizontal\"></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\">\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      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\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\">\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  <simpo-text-editor [value]=\"content?.additionalDetails?.value || ''\" [editable]=\"edit || false\"></simpo-text-editor>\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\" *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\">Made with <a class=\"branding-text fw-600\"\r\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n    <div class=\"col-md-3 mb-3 pageType\"  [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\">\r\n      {{pageLink}}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #foldersHorizontal>\r\n  <div class=\"pageType col-md-3 mb-3\" *ngFor=\"let folder of content?.folder\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\">\r\n    {{folder.label}}\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\">{{page}}</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\" [class.w-50]=\"screenWidth < 475\">\r\n    <!-- <div class=\"pageType mb-3\">{{folder.label}}</div> -->\r\n    <simpo-text-editor [value]=\"folder.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    <div class=\"mt-15\">\r\n      <ng-container *ngFor=\"let page of folder.links\">\r\n        <div class=\"pages mb-2\">{{page.label}}</div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".pageType{font-size:16px;font-weight:600;line-height:22px}.pages{font-size:16px;font-weight:400;line-height:22px}.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}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-footer', standalone: true, imports: [
+                        CommonModule,
+                        ColorDirective,
+                        SociaIconsComponent,
+                        FormsModule,
+                        SanitizeHtmlPipe,
+                        //directives
+                        SpacingHorizontalDirective,
+                        BackgroundDirective,
+                        ContentFitDirective,
+                        TextEditorComponent
+                    ], template: "<section class=\"total-container\">\r\n  <div [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\"   [simpoLayout]=\"style?.layout\">\r\n    <ng-container *ngTemplateOutlet=\"footer1\"></ng-container>\r\n  </div>\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=\"pagesVertical\"></ng-container>\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        <ng-container *ngTemplateOutlet=\"foldersHorizontal\"></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=\"pagesVertical\"></ng-container>\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\" [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    <ng-container *ngTemplateOutlet=\"foldersHorizontal\"></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\">\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      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\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\">\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  <simpo-text-editor [value]=\"content?.additionalDetails?.value || ''\" [editable]=\"edit || false\"></simpo-text-editor>\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\" *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\">Made with <a class=\"branding-text fw-600\"\r\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n    <div class=\"col-md-3 mb-3 pageType\"  [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\">\r\n      {{pageLink}}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #foldersHorizontal>\r\n  <div class=\"pageType col-md-3 mb-3\" *ngFor=\"let folder of content?.folder\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\">\r\n    {{folder.label}}\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\">{{page}}</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\" [class.w-50]=\"screenWidth < 475\">\r\n    <!-- <div class=\"pageType mb-3\">{{folder.label}}</div> -->\r\n    <simpo-text-editor [value]=\"folder.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    <div class=\"mt-15\">\r\n      <ng-container *ngFor=\"let page of folder.links\">\r\n        <div class=\"pages mb-2\">{{page.label}}</div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".pageType{font-size:16px;font-weight:600;line-height:22px}.pages{font-size:16px;font-weight:400;line-height:22px}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], getScreenSize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 class SimpoWrapComntainer {
     constructor(eventService, el) {
         this.eventService = eventService;
@@ -13160,5 +13500,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
 //# sourceMappingURL=simpo-component-library.mjs.map