@pobuca/email-builder 1.0.0

package/fesm2015/pobuca-email-builder.js

@@ -0,0 +1,4335 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, ViewChild, ElementRef, ViewEncapsulation, ChangeDetectorRef, Input, HostBinding, HostListener, Pipe, EventEmitter, forwardRef, Renderer2, Output, Directive, ComponentFactoryResolver, ViewContainerRef, inject, NgModule } from '@angular/core';
+import { defer, of, BehaviorSubject, Subject, combineLatest, EMPTY, ReplaySubject, animationFrameScheduler, iif, fromEvent, throwError } from 'rxjs';
+import { map, shareReplay, pluck, withLatestFrom, switchMap, exhaustMap, take, catchError, distinct, distinctUntilKeyChanged, subscribeOn, distinctUntilChanged, tap, filter, finalize, takeUntil, mapTo, debounceTime } from 'rxjs/operators';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import { HttpClient, HttpEventType, HttpResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatBottomSheetRef, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ResizableModule } from 'angular-resizable-element';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import 'quill';
+import { QuillModule, QUILL_CONFIG_TOKEN } from 'ngx-quill';
+import { ColorChromeModule } from 'ngx-color/chrome';
+import { CdkPortal, PortalModule } from '@angular/cdk/portal';
+import { __awaiter } from 'tslib';
+import '@angular/localize/init';
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * Template Storage/Cache keys.
+ */
+var ETemplatesStorage;
+(function (ETemplatesStorage) {
+    ETemplatesStorage["LATEST_USED"] = "NGB_LATEST_USED_TEMPLATES";
+    ETemplatesStorage["STORAGE"] = "NGB_TEMP_TEMPLATES_STORAGE";
+})(ETemplatesStorage || (ETemplatesStorage = {}));
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// import { getDiff } from 'recursive-diff';
+/**
+ * An alternative lodash cloneDeep function. Use it on your own risk.
+ * @param obj Object to be cloned.
+ */
+function cloneDeep(obj = {}) {
+    return JSON.parse(JSON.stringify(obj));
+}
+/**
+ * An alternative lodash isEqual function. Use it on your own risk.
+ * @param x Object to be compared
+ * @param y the second Object to be compared
+ */
+function isEqual(x, y) {
+    // return !getDiff(x, y).length;
+    return JSON.stringify(x) === JSON.stringify(y);
+}
+/**
+ * An alternative lodash defaultsDeep function. Use it on your own risk.
+ * @param to The object with default properties
+ * @param sources An array of objects with default properties
+ */
+function defaultsDeep(to = {}, ...sources) {
+    for (const source of sources) {
+        for (const key in source) {
+            if (to.hasOwnProperty(key)) {
+                continue;
+            }
+            if (!Array.isArray(source[key]) && typeof source[key] === 'object') {
+                to[key] = defaultsDeep(to[key], source[key]);
+            }
+            else {
+                to[key] = source[key];
+            }
+        }
+    }
+    return to;
+}
+/**
+ * Create CSS border styles based on {@link IBorder} object.
+ * @param border Border object.
+ * @param rule Most likely you won't need it, but for some cases, it can be changed. Default is: `border`.
+ *
+ * @return CSS Border styles.
+ */
+function createBorder(border, rule = 'border') {
+    const { color = '#000000', style = 'solid', width = 4, radius = 0 } = border;
+    return {
+        [rule]: `${width}px ${style} ${color}`,
+        borderRadius: `${radius}px`
+    };
+}
+/**
+ * Create CSS padding styles based on {@link IPadding} object.
+ * @param padding Padding object.
+ * @param rule Most likely you won't need it, but for some cases, it can be changed. Default is: `padding`.
+ */
+function createPadding(padding, rule = 'padding') {
+    const { top = 10, right = 25, bottom = 10, left = 25 } = padding;
+    return {
+        [rule]: `${top}px ${right}px ${bottom}px ${left}px`
+    };
+}
+/**
+ * Create CSS margin styles based on {@link IMargin} object.
+ * @param margin Margin object.
+ */
+function createMargin(margin) {
+    const { top = 0, bottom = 0 } = margin;
+    return {
+        margin: `${top}px 0 ${bottom}px`
+    };
+}
+/**
+ * Create CSS font styles based on {@link IFont} object.
+ * @param font Font object.
+ */
+function createFont(font) {
+    const { family = '', size = 13, style = 'normal', weight = 'normal' } = font;
+    return {
+        fontFamily: family,
+        fontSize: `${size}px`,
+        fontStyle: style,
+        fontWeight: weight
+    };
+}
+/**
+ * Create CSS line-height styles based on {@link ILineHeight} object.
+ * @param lineHeight Line-height object.
+ */
+function createLineHeight(lineHeight) {
+    const { value = 22, unit = 'px' } = lineHeight;
+    return {
+        lineHeight: unit !== 'none' ? `${value}${unit}` : 'normal'
+    };
+}
+/**
+ * Create background styles based on {@link IBackground} object.
+ * @param background Background object.
+ */
+function createBackground(background) {
+    const { url = '', color = 'white', repeat = 'no-repeat' } = background;
+    return `${color} ${url && `url(${url})`} ${repeat} top center`;
+}
+/**
+ * Create Width or Height styles based on {@link IWidthHeight} object.
+ * @param widthHeight Width or Height object.
+ */
+function createWidthHeight(widthHeight) {
+    const { value = 100, unit = '%', auto = false } = widthHeight;
+    return (auto && 'auto') || (['%', 'px'].indexOf(unit) > -1 && `${value}${unit}`) || unit;
+}
+/**
+ * Convert bytes to KB-YB.
+ * @param bytes Bytes number.
+ * @param decimals How many decimals to be used. Default: 2.
+ */
+function bytesToSize(bytes, decimals = 2) {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
+}
+/**
+ * Get a Social Icon path.
+ * @param path Icon path. Ex: facebook.png
+ */
+function getAssetByPath(path) {
+    return `https://www.mailjet.com/images/theme/v1/icons/ico-social/${path}`;
+}
+/**
+ * A simple and powerful function that allows to create an `Observable` only when it needs to be used.
+ * @param args Arguments to send to new Observable.
+ */
+function deferOf(...args) {
+    return defer(() => of(...args));
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+const defaultColumnsOptions = {
+    background: {
+        color: 'transparent'
+    },
+    border: {
+        width: 0,
+        color: '#cccccc',
+        radius: 0,
+        style: 'solid'
+    },
+    verticalAlign: 'top'
+};
+class Structure {
+    constructor(type = 'cols_1', elements = [], options) {
+        this.type = type;
+        this.elements = elements;
+        this.columns = 1;
+        this.id = Date.now();
+        this.options = {
+            fullWidth: false,
+            border: {
+                color: '#cccccc',
+                style: 'solid',
+                width: 0,
+                radius: 0
+            },
+            background: {
+                color: '#ffffff',
+                url: '',
+                repeat: 'repeat',
+                size: {
+                    value: 100,
+                    unit: 'px',
+                    auto: true,
+                    units: ['px', '%', 'cover', 'contain']
+                }
+            },
+            padding: {
+                top: 4,
+                right: 4,
+                bottom: 4,
+                left: 4
+            },
+            margin: {
+                top: 0,
+                bottom: 0
+            },
+            gaps: [4, 4]
+        };
+        if (!elements.length) {
+            if (['cols_2', 'cols_12', 'cols_21'].includes(type)) {
+                this.columns = 2;
+            }
+            else if (type === 'cols_3') {
+                this.columns = 3;
+            }
+            else if (type === 'cols_4') {
+                this.columns = 4;
+            }
+        }
+        const columns = Array.from({ length: this.columns }, () => defaultColumnsOptions);
+        let columnsWidth = [1];
+        if (type === 'cols_21') {
+            columnsWidth = [4, 6];
+        }
+        else if (type === 'cols_12') {
+            columnsWidth = [6, 4];
+        }
+        else if (type === 'cols_2') {
+            columnsWidth = [5, 5];
+        }
+        else if (type === 'cols_3') {
+            columnsWidth = [3.33, 3.33, 3.33];
+        }
+        else if (type === 'cols_4') {
+            columnsWidth = [2.5, 2.5, 2.5, 2.5];
+        }
+        this.options = defaultsDeep(options, this.options, {
+            columns,
+            columnsWidth
+        });
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class AIPBlock {
+}
+class TextBlock {
+    constructor(innerText, options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.innerText = innerText;
+        this.state = state;
+        this.type = 'text';
+        this.icon = 'text_format';
+        this.options = {
+            color: '#000000',
+            font: {
+                fallback: 'Arial, Helvetica, sans-serif',
+                family: 'Roboto',
+                style: 'normal',
+                size: 16,
+                weight: 400
+            },
+            lineHeight: {
+                value: 40,
+                unit: 'none'
+            },
+            padding: {
+                top: 10,
+                right: 25,
+                bottom: 10,
+                left: 25
+            }
+        };
+        this.title = $localize `:@@text_block:Text`;
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+class ImageBlock {
+    constructor(src = 'https://via.placeholder.com/600x200?text=CHANGE+ME', options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.src = src;
+        this.state = state;
+        this.type = 'image';
+        this.icon = 'image';
+        this.options = {
+            border: {
+                color: '#cccccc',
+                style: 'solid',
+                width: 0,
+                radius: 0
+            },
+            width: {
+                value: 100,
+                unit: 'px',
+                auto: true,
+                units: ['px']
+            },
+            height: {
+                value: 100,
+                unit: 'px',
+                auto: true,
+                units: ['px']
+            },
+            link: {
+                href: '',
+                target: '_blank'
+            },
+            align: 'center',
+            title: '',
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        };
+        this.title = $localize `:@@image_block:Image`;
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+class ButtonBlock {
+    constructor(innerText = 'Click on me', options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.innerText = innerText;
+        this.state = state;
+        this.type = 'button';
+        this.icon = 'radio_button_checked';
+        this.options = {
+            backgroundColor: '#414141',
+            border: {
+                color: '#414141',
+                style: 'solid',
+                width: 0,
+                radius: 3
+            },
+            color: '#ffffff',
+            font: {
+                fallback: 'Arial, Helvetica, sans-serif',
+                family: 'Roboto',
+                size: 13,
+                style: 'normal',
+                weight: 400
+            },
+            align: 'center',
+            fullWidth: false,
+            // verticalAlign: 'middle',
+            lineHeight: {
+                value: 120,
+                unit: '%'
+            },
+            link: {
+                href: '',
+                target: '_blank'
+            },
+            innerPadding: {
+                top: 10,
+                right: 25,
+                bottom: 10,
+                left: 25
+            },
+            padding: {
+                top: 10,
+                right: 25,
+                bottom: 10,
+                left: 25
+            }
+        };
+        this.title = $localize `:@@button_block:Button`;
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+class DividerBlock {
+    constructor(options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.state = state;
+        this.type = 'divider';
+        this.icon = 'remove';
+        this.options = {
+            border: {
+                color: '#000000',
+                style: 'solid',
+                width: 4
+            },
+            padding: {
+                top: 10,
+                right: 25,
+                bottom: 10,
+                left: 25
+            }
+        };
+        this.title = $localize `:@@divider_block:Divider`;
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+class SpacerBlock {
+    constructor(options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.state = state;
+        this.type = 'spacer';
+        this.icon = 'vertical_align_center';
+        this.title = $localize `:@@spacer_block:Spacer`;
+        this.options = {
+            height: {
+                value: 20,
+                unit: 'px',
+                units: ['px']
+            }
+        };
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+class SocialBlock {
+    // https://mjml.io/documentation/#mjml-social
+    constructor(networks = [], options, state = {
+        disabled: false,
+        message: ''
+    }) {
+        this.networks = networks;
+        this.state = state;
+        this.type = 'social';
+        this.icon = 'share';
+        this.title = $localize `:@@share_block:Social`;
+        this.options = {
+            align: 'center',
+            mode: 'horizontal',
+            font: {
+                fallback: 'Arial, Helvetica, sans-serif',
+                family: 'Roboto',
+                style: 'normal',
+                size: 16,
+                weight: 400
+            },
+            iconSize: {
+                value: 30,
+                unit: 'px'
+            },
+            lineHeight: {
+                value: 16,
+                unit: 'px'
+            },
+            color: '#333333',
+            innerPadding: {
+                top: 4,
+                right: 4,
+                bottom: 4,
+                left: 4
+            },
+            padding: {
+                top: 10,
+                right: 25,
+                bottom: 10,
+                left: 25
+            }
+        };
+        this.options = defaultsDeep(options, this.options);
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * Some top documentation
+ */
+/**
+ * The default social networks list provided by builder. This list is injected by {@link PB_SOCIAL_NETWORKS}.
+ */
+const PB_DEFAULT_SOCIAL_NETWORKS = [
+    'github',
+    'instagram',
+    'web',
+    'snapchat',
+    'youtube',
+    'vimeo',
+    'medium',
+    'soundcloud',
+    'dribbble',
+    'facebook',
+    'twitter',
+    'pinterest',
+    'linkedin',
+    'tumblr',
+    'xing',
+    'tiktok'
+];
+/**
+ * The token that injects [default social networks list]{@link PB_DEFAULT_SOCIAL_NETWORKS}.
+ * Use it to add or remove social networks within list.
+ *
+ * @example
+ * {provide: PB_SOCIAL_NETWORKS, useValue: PB_DEFAULT_SOCIAL_NETWORKS.filter(network => !['github', 'instagram'].includes(network)}
+ */
+const PB_SOCIAL_NETWORKS = new InjectionToken('PB Social Networks', {
+    providedIn: 'any',
+    factory: () => PB_DEFAULT_SOCIAL_NETWORKS
+});
+/**
+ * The default [Google Fonts]{@link https://fonts.google.com} list provided by builder.
+ * This list is injected by {@link PB_GOOGLE_FONTS} token.
+ */
+const PB_DEFAULT_GOOGLE_FONTS = [
+    'Open+Sans:300,400,500,700',
+    'Droid+Sans:300,400,500,700',
+    'Lato:300,400,500,700',
+    'Roboto:300,400,700,900',
+    'Ubuntu:300,400,500,700',
+    'Fira+Sans:300,400,500,700',
+    'Mansalva:400'
+];
+/**
+ * The token that injects [default google fonts]{@link PB_DEFAULT_GOOGLE_FONTS} list.
+ */
+const PB_GOOGLE_FONTS = new InjectionToken('PB Google Fonts', {
+    providedIn: 'any',
+    factory: () => PB_DEFAULT_GOOGLE_FONTS
+});
+/**
+ * The default Fallback Fonts list provided by builder. This list is injected by {@link PB_FALLBACK_FONTS} token.
+ *
+ * A fallback font is a font that takes effect in case a [Google Font]{@link PB_DEFAULT_GOOGLE_FONTS} can't be loaded by some email
+ * providers.
+ */
+const PB_DEFAULT_FALLBACK_FONTS = [
+    'Palatino Linotype, Book Antiqua, Palatino, serif',
+    'Times New Roman, Times, serif',
+    'Arial, Helvetica, sans-serif',
+    'Arial Black, Gadget, sans-serif',
+    'Comic Sans MS, cursive, sans-serif',
+    'Impact, Charcoal, sans-serif',
+    'Lucida Sans Unicode, Lucida Grande, sans-serif',
+    'Tahoma, Geneva, sans-serif',
+    'Trebuchet MS, Helvetica, sans-serif',
+    'Verdana, Geneva, sans-serif',
+    'Courier New, Courier, monospace',
+    'Lucida Console, Monaco, monospace'
+];
+/**
+ * The token that injects {@link PB_DEFAULT_FALLBACK_FONTS} list.
+ */
+const PB_FALLBACK_FONTS = new InjectionToken('PB Fallback Fonts', {
+    providedIn: 'any',
+    factory: () => PB_DEFAULT_FALLBACK_FONTS
+});
+/**
+ * The default [Structures]{@link IStructure} list. This list is injected by {@link PB_STRUCTURES} token.
+ */
+const PB_DEFAULT_STRUCTURES = [
+    new Structure('cols_1'),
+    new Structure('cols_2'),
+    new Structure('cols_3'),
+    new Structure('cols_4'),
+    new Structure('cols_12'),
+    new Structure('cols_21')
+];
+/**
+ * The token that injects {@link PB_DEFAULT_STRUCTURES} list.
+ */
+const PB_STRUCTURES = new InjectionToken('PB Structures', {
+    providedIn: 'any',
+    factory: () => PB_DEFAULT_STRUCTURES
+});
+/**
+ * The default [Blocks]{@link TBlocks} list. This list is injected by {@link PB_BLOCKS} token.
+ */
+const PB_DEFAULT_BLOCKS = [
+    new TextBlock(),
+    new ImageBlock(),
+    new ButtonBlock(),
+    new DividerBlock(),
+    new SpacerBlock(),
+    new SocialBlock()
+];
+/**
+ * The token that injects {@link PB_BLOCKS} list.
+ */
+const PB_BLOCKS = new InjectionToken('PB Blocks', {
+    providedIn: 'any',
+    factory: () => PB_DEFAULT_BLOCKS
+});
+/**
+ * Default builder configuration, injected by {@link PB_CONFIG} token. See {@link IForRootConf} for more info.
+ */
+const PB_DEFAULT_CONFIG = Object.freeze({
+    xApiKey: 't7HdQfZjGp6R96fOV4P8v18ggf6LLTQZ1puUI2tz',
+    // apiPath: 'https://ngb-api.wlocalhost.org/v1',
+    useSaveButton: true,
+    usePreviewButton: true,
+    useDownloadButton: true,
+    templateListIfEmpty: true,
+    uploadImageName: 'image'
+});
+/**
+ * The token that injects [default builder configurations]{@link PB_DEFAULT_CONFIG}.
+ */
+const PB_CONFIG = new InjectionToken('PB Builder Configuration', {
+    providedIn: 'root',
+    factory: () => PB_DEFAULT_CONFIG
+});
+/**
+ * The default Storage used by builder. It can be either `localStorage` or `sessionStorage`.
+ */
+const PB_STORAGE_FACTORY = new InjectionToken('PB Storage factory token', {
+    providedIn: 'any',
+    factory: () => sessionStorage
+});
+/**
+ * The default storage to cache the templates list. It can be either `localStorage` or `sessionStorage`.
+ */
+const PB_TEMPLATES_TEMPORARY_STORAGE = new InjectionToken('PB Token that stores temporary templates cache', {
+    providedIn: 'any',
+    factory: () => sessionStorage
+});
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// import { Structure } from './Structure';
+class Defaults {
+    constructor(structures = [], general = {
+        name: '',
+        previewText: '',
+        width: {
+            value: 600,
+            unit: 'px',
+            units: ['px']
+        },
+        background: {
+            // url: '',
+            color: '#f1f1f1',
+            // repeat: 'repeat',
+            size: {
+                value: 100,
+                unit: '%',
+                auto: true,
+                units: ['px', '%', 'cover', 'contain']
+            }
+        },
+        padding: {
+            top: 16,
+            right: 10,
+            bottom: 10,
+            left: 10
+        },
+        direction: 'ltr',
+        global: {
+            // TODO Add more global configurations
+            // fonts: [],
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        }
+    }) {
+        this.structures = structures;
+        this.general = general;
+    }
+}
+class PBEmail extends Defaults {
+    constructor({ structures, general } = {}) {
+        super(structures, general);
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * This service allows you to control all your users' abilities within this builder. Lets say you want to implement user Roles or just
+ * need to disable some functionality for certain users based on purchase plan or on something else. You can allow or disallow almost
+ * everything.
+ *
+ * All the methods must return an Observable, so, in my opinion, that's the best part of this service, you can either return an
+ * [EMPTY Observable]{@link https://rxjs.dev/api/index/const/EMPTY}, a modified object or an (Info Modal).pipe(mapTo(EMPTY)) - I think you
+ * got the idea.
+ *
+ * I recommend always using a Modal or a Toast for forbidden actions.
+ *
+ * It won't work if you have a Regular/Free License - you'll get an error on running the project,
+ * you need either an [Extended or Commercial License]{@link https://wlocalhost.org} key for this purpose.
+ *
+ * @example
+ * // Create a custom service
+ * class YourOwnMiddlewareService extends PbUserMiddlewaresService {}
+ *
+ * // Rewrite it into AppModule
+ * { provide: PbUserMiddlewaresService, useClass: YourOwnMiddlewareService }
+ */
+class PbUserMiddlewaresService {
+    /**
+     * This method is called before sending the request to MJML Convertor. Use it to add some additional blocks or anything else to
+     * the PBEmail object.
+     * @param email PBEmail object that's being sent to MJML Convertor.
+     */
+    createHTMLTemplate(email) {
+        return deferOf(email);
+    }
+    /**
+     * Allow or Disallow preview window.
+     * @param state Coming Preview state
+     */
+    togglePreview(state) {
+        return deferOf(state);
+    }
+    /**
+     * Allow or Disallow preview devices.
+     * @param button Device's button that has been clicked
+     */
+    togglePreviewDevice(button) {
+        return deferOf(button.value);
+    }
+    /**
+     * Allow or disallow users to select certain templates based either on category or template object.
+     * @param category Template's category user has selected
+     * @param template Template user has selected
+     */
+    chooseTemplate(category, template) {
+        return deferOf({ category, template });
+    }
+    /**
+     * Allow, disallow or return the same path for all user's uploaded images.
+     * @param path Path of uploaded image
+     *
+     * @TODO Check if this middleware is being called before image has been uploaded
+     */
+    uploadImage(path) {
+        return deferOf(path);
+    }
+    /**
+     * Allow or disallow users to add blocks within email structures.
+     * @param event Event of dropped block
+     * @param column Column that block has been dropped
+     *
+     * @TODO add parent structure as a parameter
+     */
+    addBlock(event, column) {
+        return deferOf({ event, column });
+    }
+    /**
+     * Prevent user to edit blocks within email body.
+     * @param block Block that user intends to edit
+     */
+    editBlock(block) {
+        return deferOf(block);
+    }
+    /**
+     * Prevent user to remove blocks within email body.
+     * @param index Block's Index
+     * @param column Block's parent column
+     * @param block Block that user intends to remove
+     */
+    removeBlock(index, column, block) {
+        return deferOf({ index, column });
+    }
+    /**
+     * Prevent user to duplicate blocks within email body.
+     * @param index Block's Index
+     * @param column Block's parent column
+     * @param block Block that user intends to duplicate
+     */
+    duplicateBlock(index, column, block) {
+        return deferOf({ index, column, block });
+    }
+    /**
+     * Disable Drag and Drop certain blocks from Blocks list to Email body.
+     * Return TRUE to disable all blocks - no matter on block's data.
+     * @param block Block to allow or disallow from being dragged
+     */
+    disableBlockDragFromList(block) {
+        return deferOf(false);
+    }
+    /**
+     * Prevent users to sort blocks within email body.
+     * @param block Block that user intends to change the order
+     */
+    disableBlockDragWithinEmailBody(block) {
+        return deferOf(false);
+    }
+    /**
+     * Prevent user to add new structure.
+     * @param event Event of dropped structure
+     */
+    addStructure(event) {
+        return deferOf(event);
+    }
+    /**
+     * Prevent user to edit the structure.
+     * @param structure Structure that user intends to edit
+     */
+    editStructure(structure) {
+        return deferOf(structure);
+    }
+    /**
+     * Prevent user to remove the structure.
+     * @param index Index of the structure
+     * @param structure Structure that user intends to remove
+     */
+    removeStructure(index, structure) {
+        return deferOf(index);
+    }
+    /**
+     * Prevent user to duplicate the structure within email body.
+     * @param index Index of structure
+     * @param structure Structure that user intends to duplicate
+     */
+    duplicateStructure(index, structure) {
+        return deferOf(index);
+    }
+    /**
+     * Disable Drag and Drop certain structures from Structures list to Email body.
+     * Return TRUE to disable all structures.
+     * @param structure Structure to prevent from being dragged
+     */
+    disableStructureDragFromList(structure) {
+        return deferOf(false);
+    }
+    /**
+     * Allow or disallow users to sort structures within email body.
+     * @param structure Structure that user intends to change the order
+     */
+    disableStructureDragWithinEmailBody(structure) {
+        return deferOf(false);
+    }
+    /**
+     * I don't know why would you do that, but you can disable OnExit confirm modal.
+     * @param event Window [BeforeUnloadEvent]{@link https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent}
+     */
+    preventWindowExit(event) {
+        return deferOf(event);
+    }
+    /**
+     * Allow or disallow user to export certain types of file
+     * @param type Type that user intends to download
+     */
+    exportFile(type) {
+        return deferOf(type);
+    }
+    /**
+     * Allow or disallow user to import certain types of file
+     * @param file Web APIs [FILE]{@link https://developer.mozilla.org/en-US/docs/Web/API/File}
+     */
+    importFile(file) {
+        return deferOf(file);
+    }
+    /**
+     * Catch all errors within email editor, it might not work 100%, it's still on working process.
+     * @param error Throwable Error
+     */
+    catchError(error) {
+        return deferOf(error);
+    }
+}
+PbUserMiddlewaresService.decorators = [
+    { type: Injectable }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * Default NGB ROOT API Path
+ */
+const NGB_HOST = 'https://ngb-api.wlocalhost.org/v1';
+/**
+ * The abstract service that must extend the user's custom REST API service.
+ * Contains all required properties needed within project.
+ *
+ * Rewrite the default methods/properties to get the desired data.
+ * We recommend using `shareReplay()` operator if it's just a simple static data.
+ *
+ * @example
+ * // Create a custom service
+ * class YourOwnRestApiService extends PbUserRestApiService {}
+ *
+ * // Rewrite it into AppModule
+ * { provide: PbUserRestApiService, useClass: YourOwnRestApiService }
+ */
+class PbUserRestApiService {
+    constructor(http) {
+        this.http = http;
+        /**
+         * Get all user merge fields to inject into text editor.
+         */
+        this.getAllUserMergeFields$ = deferOf([]);
+        /**
+         * Get all Custom Modules to be included into Modules List.
+         * We're looking for someone who could create many modules to be included by default, if you feel you can help us, please leave a message!
+         */
+        this.getAllUserModules$ = deferOf([]);
+        /**
+         * Get all Predefined Templates and categories.
+         * You can leave it to get all default templates from NGB API
+         */
+        this.getAllUserTemplates$ = this.http
+            .get(NGB_HOST.concat('/templates'))
+            .pipe(map(list => list.map(({ category, templates }) => ({
+            category,
+            templates: templates.map(title => ({
+                thumbPath: `https://ngb-templates.s3.amazonaws.com/${category}-${title}.jpg`,
+                title,
+                templateData: null
+            }))
+        }))), shareReplay());
+    }
+    /**
+     * This method must return the chosen template from Template Gallery List PBEmail object,
+     * see {@link PbUserRestApiService#getAllUserTemplates$|getAllUserTemplates$}.
+     *
+     * Sometimes it can contain 'templateData' property - in this case, just return it.
+     *
+     * @param category Selected Category from Template Gallery.
+     * @param template Selected Template from Template Gallery.
+     *
+     * @example
+     * if (template.templateData) { return template }
+     */
+    getUserTemplateData$(category, template) {
+        if (template.templateData) {
+            return deferOf(template);
+        }
+        return this.http
+            .get(NGB_HOST.concat('/templates'), {
+            params: { category, template: template.title }
+        })
+            .pipe(map(email => (Object.assign(Object.assign({}, template), { templateData: email }))));
+    }
+    /**
+     * Handle all uploaded images.
+     * FormData 'csrf' is deprecated in favor of [HttpClientXsrfModule]{@link https://angular.io/api/common/http/HttpClientXsrfModule}.
+     *
+     * @param body A FormData that contains 'image' and 'csrf' data.
+     * @param uploadImagePath Define a path where NGB have to send the upload request.
+     */
+    userImageUpload$(body, uploadImagePath) {
+        return this.http.request('POST', uploadImagePath, {
+            body,
+            reportProgress: true,
+            responseType: 'json',
+            observe: 'events'
+        });
+    }
+    /**
+     * Get all images to include into Image Gallery.
+     */
+    getUserImages$() {
+        return deferOf([]);
+    }
+    /**
+     * Rewrite the default request which converts PBEmail to HTML, if you have a paid License,
+     * this method allows you to rewrite the default Convertor API Path to yours.
+     *
+     * You can still use the default Convertor API Path, since you have a valid and active License Key.
+     *
+     * @param emailAndFonts PBEmail plus Google Fonts List object.
+     * @param url Your own Convertor API Path, or leave it empty to use NGB servers.
+     */
+    createHTMLTemplate$(emailAndFonts, url = NGB_HOST) {
+        return this.http.post(url, emailAndFonts);
+    }
+}
+PbUserRestApiService.decorators = [
+    { type: Injectable }
+];
+PbUserRestApiService.ctorParameters = () => [
+    { type: HttpClient }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * This service allow you rewrite the default Builder Storage methods. It contains all methods builder needs to cache or store objects.
+ * Alternatively you can rewrite the [PB_TEMPLATES_TEMPORARY_STORAGE]{@link PB_TEMPLATES_TEMPORARY_STORAGE}
+ * or [PB_STORAGE_FACTORY]{@link PB_STORAGE_FACTORY} tokens.
+ *
+ * In next major updates, it can have some limitations for Regular License.
+ *
+ * @example
+ * // Create a custom service
+ * class YourOwnStorageService extends IpStorageService {}
+ *
+ * // Rewrite it into AppModule
+ * { provide: IpStorageService, useClass: YourOwnStorageService }
+ */
+class PbStorageService {
+    constructor(
+    /**
+     * Storage for templates defined by [PB_TEMPLATES_TEMPORARY_STORAGE]{@link PB_TEMPLATES_TEMPORARY_STORAGE} token.
+     */
+    templateStorage) {
+        this.templateStorage = templateStorage;
+    }
+    /**
+     * Get the latest used templates end user has chosen from templates list.
+     * @return Latest used templates by end user.
+     */
+    getLatestUsedTemplates() {
+        return JSON.parse(this.templateStorage.getItem(ETemplatesStorage.LATEST_USED)) || [];
+    }
+    /**
+     * Add a template to end user's chosen templates list.
+     * @param template Template end user chosen.
+     */
+    addTemplateToLatestUsed(template) {
+        const latest = this.getLatestUsedTemplates().filter(({ title }) => title !== template.title);
+        latest.unshift(template);
+        this.templateStorage.setItem(ETemplatesStorage.LATEST_USED, JSON.stringify(latest));
+    }
+    /**
+     * Clear all latest used templates cache.
+     */
+    clearLatestUsed() {
+        this.templateStorage.removeItem(ETemplatesStorage.LATEST_USED);
+    }
+    /**
+     * Cache a fully templates list.
+     * @param list Template list to cache
+     */
+    cacheTemplateList(list) {
+        this.templateStorage.setItem(ETemplatesStorage.STORAGE, JSON.stringify(list));
+    }
+    /**
+     * Get a cached templates list if exists.
+     * @return Either a cached templates list or an empty array.
+     */
+    getCachedTemplateList() {
+        return JSON.parse(this.templateStorage.getItem(ETemplatesStorage.STORAGE)) || [];
+    }
+    /**
+     * Clear all templates list cache.
+     */
+    clearCachedTemplateList() {
+        this.templateStorage.removeItem(ETemplatesStorage.STORAGE);
+    }
+}
+PbStorageService.decorators = [
+    { type: Injectable }
+];
+PbStorageService.ctorParameters = () => [
+    { type: Storage, decorators: [{ type: Inject, args: [PB_TEMPLATES_TEMPORARY_STORAGE,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// https://www.npmjs.com/package/recursive-diff
+/**
+ * @internal
+ */
+class PbEmailObjectStoreService {
+    constructor(userRestApi, pbStorage, userMiddleware, googleFonts, config) {
+        this.userRestApi = userRestApi;
+        this.pbStorage = pbStorage;
+        this.userMiddleware = userMiddleware;
+        this.googleFonts = googleFonts;
+        this.config = config;
+        this.Email = new PBEmail();
+        this.clonedEmail = cloneDeep(this.Email);
+        this._Email$ = new BehaviorSubject(this.Email);
+        this.emailAsObservable$ = this._Email$.asObservable();
+        this.emailStructuresAsObservable$ = this.emailAsObservable$.pipe(pluck('structures'));
+        this.generalEmailOptionsAsObservable$ = this.emailAsObservable$.pipe(pluck('general'));
+        this.currentEmailHasChanges$ = this.emailAsObservable$.pipe(map(current => !isEqual(current, this.clonedEmail))
+        // shareReplay(),
+        // tap((isDirty) => console.log('IsDirty', isDirty)),
+        );
+        this.builderContainerStyles$ = this.generalEmailOptionsAsObservable$.pipe(map(({ background, padding, direction }) => (Object.assign({ direction, backgroundRepeat: background.repeat, backgroundColor: background.color, backgroundSize: createWidthHeight(background.size), backgroundPosition: 'top center' }, createPadding(padding)))));
+        // public readonly emailBodyWidth$ = this.generalEmailOptionsAsObservable$.pipe(map(({ width }) => createWidthHeight(width)));
+        this._Mjml$ = new BehaviorSubject('');
+        this.mjmlAsObservable$ = this._Mjml$.asObservable();
+        this._Template$ = new BehaviorSubject('');
+        this.templateAsObservable$ = this._Template$.asObservable();
+        this._onTemplateCreated$ = new Subject();
+        this.onTemplateCreated$ = this._onTemplateCreated$.pipe(withLatestFrom(this._Email$, this._Template$, this._Mjml$), map(([_, ...rest]) => rest));
+    }
+    createHTMLTemplate$() {
+        return this.emailAsObservable$.pipe(switchMap(email => {
+            if (!email.structures.length) {
+                throw new Error('Please add some structures and blocks to perform this action.');
+            }
+            return deferOf(email);
+        }), withLatestFrom(combineLatest([this.currentEmailHasChanges$, this.templateAsObservable$])), exhaustMap(([email, [hasChanges, currentHtml]]) => {
+            if (hasChanges || !currentHtml) {
+                return this.userMiddleware.createHTMLTemplate(email).pipe(exhaustMap(em => this.userRestApi.createHTMLTemplate$(Object.assign(Object.assign({}, em), { googleFonts: this.googleFonts }), this.config.apiPath)), map(res => {
+                    if (res.errors.length) {
+                        const error = res.errors.map(({ message, tagName }) => `${tagName} > ${message}`).join('\n');
+                        throw new Error(error);
+                    }
+                    this._Mjml$.next(res.mjml);
+                    this._Template$.next(res.html);
+                    this.clonedEmail = cloneDeep(this.Email);
+                    this._onTemplateCreated$.next();
+                    return res;
+                }));
+            }
+            return combineLatest([this._Mjml$, this._Template$]).pipe(map(([mjml, html]) => ({ html, mjml, errors: [] })));
+        }));
+    }
+    markForCheck() {
+        this._Email$.next(this.Email);
+        if (this.Email.structures.length) {
+            this.pbStorage.addTemplateToLatestUsed(cloneDeep({
+                templateData: this.Email,
+                title: 'last-edited',
+                thumbPath: 'https://via.placeholder.com/200x300?text=LAST+EDITED'
+            }));
+        }
+        // console.log(getDiff(this.clonedEmail, this.Email));
+    }
+    setEmail(newEmail) {
+        if (!newEmail.structures || !newEmail.general) {
+            throw new Error('Injected object is not a valid PBEmail');
+        }
+        this.Email = newEmail;
+        this.reset();
+    }
+    addStructure({ currentIndex = 0, item }) {
+        const { structures = [] } = this.Email;
+        let isModule = true;
+        if (!item.data.elements.length) {
+            isModule = false;
+            item.data.elements = Array.from({ length: item.data.columns }, () => []);
+        }
+        const newStructure = Object.assign(Object.assign({ id: Date.now() }, cloneDeep(item.data)), { isModule });
+        structures.splice(currentIndex, 0, newStructure);
+        this.markForCheck();
+        return newStructure;
+    }
+    changeStructureOrder({ previousIndex = 0, currentIndex = 0 }) {
+        moveItemInArray(this.Email.structures, previousIndex, currentIndex);
+        this.markForCheck();
+    }
+    duplicateStructure(index) {
+        const { structures = [] } = this.Email;
+        const newStructure = cloneDeep(Object.assign(Object.assign({}, structures[index]), { id: Date.now() }));
+        structures.splice(index, 0, newStructure);
+        this.markForCheck();
+        return newStructure;
+    }
+    removeStructure(index) {
+        const { structures = [] } = this.Email;
+        structures.splice(index, 1);
+        this.markForCheck();
+    }
+    addBlock({ previousIndex = 0, currentIndex = 0, item, previousContainer: { id, data } }, column) {
+        // console.log(id);
+        // console.log(item);
+        if (id === 'block-elements') {
+            column.splice(currentIndex, 0, cloneDeep(item.data));
+        }
+        else {
+            transferArrayItem(data, column, previousIndex, currentIndex);
+        }
+        this.markForCheck();
+    }
+    changeBlockOrder({ previousIndex = 0, currentIndex = 0 }, column) {
+        moveItemInArray(column, previousIndex, currentIndex);
+        this.markForCheck();
+    }
+    duplicateBlock(key, column, block) {
+        const newBlock = cloneDeep(block);
+        column.splice(key, 0, newBlock);
+        this.markForCheck();
+        return newBlock;
+    }
+    removeBlock(key, column) {
+        column.splice(key, 1);
+        this.markForCheck();
+    }
+    reset() {
+        this._Mjml$.next(null);
+        this._Template$.next(null);
+        this.clonedEmail = cloneDeep(this.Email);
+        this.markForCheck();
+    }
+}
+PbEmailObjectStoreService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PbEmailObjectStoreService_Factory() { return new PbEmailObjectStoreService(i0.ɵɵinject(PbUserRestApiService), i0.ɵɵinject(PbStorageService), i0.ɵɵinject(PbUserMiddlewaresService), i0.ɵɵinject(PB_GOOGLE_FONTS), i0.ɵɵinject(PB_CONFIG)); }, token: PbEmailObjectStoreService, providedIn: "root" });
+PbEmailObjectStoreService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+PbEmailObjectStoreService.ctorParameters = () => [
+    { type: PbUserRestApiService },
+    { type: PbStorageService },
+    { type: PbUserMiddlewaresService },
+    { type: Array, decorators: [{ type: Inject, args: [PB_GOOGLE_FONTS,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [PB_CONFIG,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class TemplateListDialogComponent {
+    constructor(matDialogRef, templateList) {
+        this.matDialogRef = matDialogRef;
+        this.templateList = templateList;
+        this.chooseCategory$ = new BehaviorSubject('latest');
+        this.currentCategoryTemplates$ = this.chooseCategory$.pipe(map(category => this.templateList.find(list => list.category === category) || { templates: [] }), pluck('templates'), map(templates => (templates.length > 0 ? templates : null))
+        // map(tmpl => Array.from({ length: 1000 }).map((_, i) => tmpl[0]))
+        );
+    }
+    chooseTemplate(template) {
+        this.csdTemplate = template;
+    }
+    chageCategory(category) {
+        this.chooseCategory$.next(category);
+    }
+    getTemplatesList() {
+        return this.templateList.filter(({ category }) => category !== 'latest');
+    }
+    startBuilding() {
+        this.chooseCategory$.pipe(take(1)).subscribe(category => {
+            this.matDialogRef.close({ category, template: this.csdTemplate });
+        });
+    }
+}
+TemplateListDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-template-list-dialog',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div fxLayout=\"column\" style=\"height: 100%;\">\n  <h2 mat-dialog-title i18n=\"templates|Modal template header\">Custom Templates</h2>\n  <div class=\"mat-typography template-list-wrapper\" fxLayout fxLayoutGap=\"1rem\" fxFlex>\n    <mat-list fxFlex=\"200px\" dense>\n      <mat-list-item (click)=\"chageCategory('latest')\" [ngClass]=\"{active: (chooseCategory$ | async) === 'latest'}\"\n        i18n=\"templates|category name\">\n        Latest\n      </mat-list-item>\n      <mat-divider></mat-divider>\n      <mat-list-item *ngFor=\"let list of getTemplatesList()\" (click)=\"chageCategory(list.category)\"\n        [ngClass]=\"{active: (chooseCategory$ | async) === list.category}\" i18n=\"templates|category name\">\n        {{list.category}}\n      </mat-list-item>\n    </mat-list>\n\n    <ng-container *ngIf=\"currentCategoryTemplates$ | async as templates;else emptyCategory\">\n      <cdk-virtual-scroll-viewport itemSize=\"150\" [maxBufferPx]=\"150\" fxFlex>\n        <div class=\"template-list\">\n          <div *cdkVirtualFor=\"let template of templates\" class=\"template-list-item\" (click)=\"chooseTemplate(template)\"\n            i18n-matTooltip=\"templates|Click to choose message\" matTooltip=\"Click to choose\">\n            <img [src]=\"template.thumbPath\" [alt]=\"template.title\" />\n            <div class=\"description\">\n              <h3>{{template.title}}</h3>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n  </div>\n  <mat-dialog-actions align=\"end\">\n    <button mat-button mat-dialog-close i18n=\"actions|Undo\">Undo</button>\n    <button mat-button (click)=\"startBuilding()\" [disabled]=\"!csdTemplate\" i18n=\"actions|Start\">\n      Start\n    </button>\n  </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyCategory>\n  <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"empty-category-notification\">\n    <mat-icon>notifications</mat-icon>\n    <h2 i18n=\"templates|No templates in current category message\">This category is empty!</h2>\n  </div>\n</ng-template>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:inherit}.template-list-wrapper mat-list{position:sticky;top:0}.template-list-wrapper mat-list mat-list-item{text-transform:capitalize;cursor:pointer;border-radius:3px;transition:all .3s linear}.template-list-wrapper mat-list mat-list-item.active,.template-list-wrapper mat-list mat-list-item:hover{background-color:#f3f3f3}.template-list-wrapper .template-list{display:grid;gap:1rem;grid-template:150px/repeat(3,1fr)}@media screen and (max-width:699px){.template-list-wrapper .template-list{grid-template:150px/repeat(2,1fr)}}.template-list-wrapper .template-list-item{border-radius:3px;overflow:hidden;border:1px solid #ccc;padding:.5rem;position:relative;background-color:#f3f3f3}.template-list-wrapper .template-list-item img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:calc(200px - 1rem);width:100%;cursor:pointer;animation:objectPosition 3s linear infinite alternate;animation-play-state:paused}.template-list-wrapper .template-list-item .description{position:absolute;bottom:0;right:0;left:0;background-color:#fff;padding:.5rem;opacity:1;transition:all .3s linear;text-transform:capitalize}.template-list-wrapper .template-list-item .description h3{margin:0}.template-list-wrapper .template-list-item:hover img{animation-play-state:running}.template-list-wrapper .template-list-item:hover .description{bottom:-44px;opacity:.6}.empty-category-notification mat-icon{height:50px;width:50px;font-size:50px}.empty-category-notification h2{text-transform:uppercase}@keyframes objectPosition{to{-o-object-position:bottom;object-position:bottom}}"]
+            },] }
+];
+TemplateListDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: Array, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// @dynamic
+class ConfirmDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+}
+ConfirmDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-confirm-dialog',
+                template: `
+    <h2 mat-dialog-title>Are you sure?</h2>
+    <mat-dialog-actions fxLayout fxLayoutAlign="space-between center" fxLayoutGap="1rem">
+      <button mat-stroked-button mat-dialog-close="0">No</button>
+      <button mat-stroked-button color="warn" mat-dialog-close="1">Yes</button>
+    </mat-dialog-actions>
+  `
+            },] }
+];
+ConfirmDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class ImportDialogComponent {
+    constructor(pbMiddlewares, bottomSheetRef) {
+        this.pbMiddlewares = pbMiddlewares;
+        this.bottomSheetRef = bottomSheetRef;
+        this.importing = false;
+        this.fileReader = new FileReader();
+    }
+    openBrowserModal(event) {
+        event.preventDefault();
+        this.uploadInput.nativeElement.click();
+    }
+    startImporting() {
+        this.importing = true;
+        this.pbMiddlewares
+            .importFile(this.uploadInput.nativeElement.files.item(0))
+            .pipe(take(1), catchError(error => this.pbMiddlewares.catchError(error).pipe(switchMap(() => {
+            this.bottomSheetRef.dismiss(error);
+            return EMPTY;
+        }))))
+            .subscribe(file => {
+            this.fileReader.readAsText(file, 'utf-8');
+        });
+    }
+    ngOnInit() {
+        this.fileReader.addEventListener('loadend', () => {
+            this.importing = false;
+            try {
+                const email = JSON.parse(this.fileReader.result);
+                this.bottomSheetRef.dismiss(email);
+            }
+            catch (error) {
+                this.bottomSheetRef.dismiss(null);
+                throw new Error(error);
+            }
+        });
+    }
+    ngOnDestroy() { }
+}
+ImportDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-import-dialog',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<mat-nav-list>\n    <mat-list-item (click)=\"openBrowserModal($event)\">\n        <div *ngIf=\"!importing\">\n            <span mat-line i18n=\"import|Import JSON file\">Import JSON file</span>\n        </div>\n        <ng-container *ngIf=\"importing\">\n            <span mat-line i18n=\"import|Importing in progress\">Importing in progress ...</span>\n            <!-- <span mat-line>{{ imageInfo }}</span> -->\n        </ng-container>\n    </mat-list-item>\n    <mat-progress-bar *ngIf=\"importing\" mode=\"buffer\" value=\"100\"></mat-progress-bar>\n</mat-nav-list>\n<input type=\"file\" accept=\"application/json\" fxHide #uploadInput (change)=\"startImporting()\" />\n",
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */"]
+            },] }
+];
+ImportDialogComponent.ctorParameters = () => [
+    { type: PbUserMiddlewaresService },
+    { type: MatBottomSheetRef }
+];
+ImportDialogComponent.propDecorators = {
+    uploadInput: [{ type: ViewChild, args: ['uploadInput', { read: ElementRef, static: true },] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ */
+class PbUserInterfaceService {
+    constructor(emailObjectStore, matDialog, bottomSheet, snackBar) {
+        this.emailObjectStore = emailObjectStore;
+        this.matDialog = matDialog;
+        this.bottomSheet = bottomSheet;
+        this.snackBar = snackBar;
+        this.activeMatProgress$ = new ReplaySubject();
+        this.cdkDropListConnectedTo$ = this.emailObjectStore.emailStructuresAsObservable$.pipe(
+        // tap(structures => console.log('Structures Length', structures.length)),
+        map(structures => structures.reduce((prev, { elements }, structureKey) => {
+            prev.push(...elements.map((_, columnKey) => `column-droplist-${columnKey}-${structureKey}`));
+            return prev;
+        }, [])), distinct(), distinctUntilKeyChanged('length'), 
+        // tap(dropList => console.log('Drop List', dropList)),
+        shareReplay());
+        this._currentEditingStructure$ = new BehaviorSubject(null);
+        this.currentEditingStructure$ = this._currentEditingStructure$.pipe(subscribeOn(animationFrameScheduler), distinctUntilChanged(), catchError(() => of(null)), 
+        // tap(editStructure => console.log(editStructure)),
+        shareReplay());
+        this._currentEditingBlock$ = new BehaviorSubject(null);
+        this.currentEditingBlock$ = this._currentEditingBlock$.pipe(subscribeOn(animationFrameScheduler), distinctUntilChanged(), catchError(() => of(null)), shareReplay());
+        this._editGeneralSettings$ = new Subject();
+        this.editGeneralSettings$ = this._editGeneralSettings$.pipe(subscribeOn(animationFrameScheduler), tap(() => this.changeTabIndex(2)), distinctUntilChanged(), shareReplay());
+        this._currentTabIndex$ = new BehaviorSubject(0);
+        this.currentTabIndex$ = this._currentTabIndex$.pipe(subscribeOn(animationFrameScheduler), distinctUntilChanged());
+    }
+    editBlock(block) {
+        this._currentEditingStructure$.next(null);
+        this._currentEditingBlock$.next(block);
+        this._editGeneralSettings$.next('block');
+    }
+    editStructure(structure) {
+        this._currentEditingBlock$.next(null);
+        this._editGeneralSettings$.next('structure');
+        this._currentEditingStructure$.next(structure);
+    }
+    editGeneralSettings() {
+        this.resetElements();
+        this._editGeneralSettings$.next('general');
+    }
+    changeTabIndex(index) {
+        this._currentTabIndex$.next(index);
+    }
+    confirmDialog$() {
+        return this.matDialog
+            .open(ConfirmDialogComponent)
+            .afterClosed()
+            .pipe(map(res => res === '1'));
+    }
+    templatesListDialog$(templateList) {
+        return this.matDialog
+            .open(TemplateListDialogComponent, {
+            data: templateList,
+            width: '60vw',
+            maxWidth: '800px',
+            height: '70vh',
+            maxHeight: '900px'
+        })
+            .afterClosed()
+            .pipe(filter(tmpl => Boolean(tmpl)));
+    }
+    importDialog$() {
+        return this.bottomSheet
+            .open(ImportDialogComponent, {
+            ariaLabel: 'Browse media'
+        })
+            .afterDismissed();
+    }
+    notify(msg, close = 'dismiss', duration = 3000) {
+        return this.snackBar.open(msg, close, { duration });
+    }
+    currentEditingBlock() {
+        return this._currentEditingBlock$.getValue();
+    }
+    currentEditingStructure() {
+        return this._currentEditingStructure$.getValue();
+    }
+    currentStructureEqualWith(structure) {
+        return this.currentEditingStructure() === structure;
+    }
+    currentBlockEqualWith(block) {
+        return this.currentEditingBlock() === block;
+    }
+    currentStructureContainsActiveBlock(structure) {
+        return structure.elements.some(elems => elems.some(block => block === this.currentEditingBlock()));
+    }
+    resetElements() {
+        this._currentEditingStructure$.next(null);
+        this._currentEditingBlock$.next(null);
+    }
+    reset() {
+        this.resetElements();
+        this.changeTabIndex(0);
+    }
+}
+PbUserInterfaceService.decorators = [
+    { type: Injectable }
+];
+PbUserInterfaceService.ctorParameters = () => [
+    { type: PbEmailObjectStoreService },
+    { type: MatDialog },
+    { type: MatBottomSheet },
+    { type: MatSnackBar }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @deprecated Soon it will be removed
+ * @internal
+ */
+class PbEmailBuilderService {
+    constructor(config, 
+    // @Inject(PB_GOOGLE_FONTS) private googleFonts: string[],
+    emailObjectStore, pbMiddleWares, pbUserInterface // private _http: HttpClient,
+    ) {
+        this.config = config;
+        this.emailObjectStore = emailObjectStore;
+        this.pbMiddleWares = pbMiddleWares;
+        this.pbUserInterface = pbUserInterface;
+        // private _template = new BehaviorSubject<string>('');
+        // private _mjml = new BehaviorSubject<string>('');
+        // private readonly _onSave$ = new Subject();
+        /**
+         * @deprecated Please use the new service "UserRestApiService" instead
+         */
+        this.modules = new Set();
+        /**
+         * @deprecated Please use the new service "UserRestApiService" instead
+         */
+        this.customTemplates = new Set();
+        /**
+         * @deprecated Please use the new service "UserRestApiService" instead
+         */
+        this._mergeTags = new Set();
+        this.onTemplateCreated$ = this.emailObjectStore.onTemplateCreated$.pipe(shareReplay());
+        /**
+         * @deprecated Use onTemplateCreated$ instead
+         */
+        this.onSave$ = this.onTemplateCreated$;
+        /**
+         * @deprecated Use isLoading$ instead
+         */
+        this.isLoading = this.pbUserInterface.activeMatProgress$.asObservable();
+        this.isLoading$ = this.pbUserInterface.activeMatProgress$.asObservable();
+        this.config = Object.assign(Object.assign({}, PB_DEFAULT_CONFIG), this.config);
+    }
+    /**
+     * Save current Email Template
+     */
+    createHTMLTemplate$() {
+        this.pbUserInterface.activeMatProgress$.next(true);
+        return this.emailObjectStore.createHTMLTemplate$().pipe(tap(() => this.pbUserInterface.activeMatProgress$.next(false)), catchError((error) => this.pbMiddleWares.catchError(error).pipe(switchMap(() => {
+            this.pbUserInterface.notify(error.message);
+            this.pbUserInterface.activeMatProgress$.next(false);
+            return EMPTY;
+        }))), finalize(() => this.pbUserInterface.activeMatProgress$.next(false)));
+    }
+    /**
+     *  @deprecated Please use ngb.createHTMLTemplate$() instead
+     */
+    saveEmail() {
+        return this.createHTMLTemplate$();
+    }
+    /**
+     * Get Email as object
+     */
+    get Email() {
+        return this.emailObjectStore.Email;
+    }
+    /**
+     * Set Email saved from database or created with new PBEmail()
+     */
+    set Email(newEmail) {
+        this.emailObjectStore.setEmail(newEmail);
+    }
+    /**
+     * @deprecated Use getTemplateAsObservable$() instead
+     */
+    get Template() {
+        return null;
+    }
+    /**
+     * Set HTML output
+     */
+    // set Template(template: string) {
+    //   this._template.next(template);
+    // }
+    /**
+     * @deprecated Use getMjmlAsObservable$() instead
+     */
+    get Mjml() {
+        return null;
+    }
+    /**
+     * Listen Email changes
+     */
+    getEmailAsObservable$() {
+        return this.emailObjectStore.emailAsObservable$;
+    }
+    /**
+     * Listen Template changes
+     */
+    getTemplateAsObservable$() {
+        return this.emailObjectStore.templateAsObservable$;
+    }
+    /**
+     * Listen MJML changes
+     */
+    getMjmlAsObservable$() {
+        return this.emailObjectStore.mjmlAsObservable$;
+    }
+    /**
+     * Listen Email and Template changes
+     * @deprecated Use onTemplateCreated$ instead
+     */
+    onChanges$() {
+        return this.onTemplateCreated$;
+    }
+}
+PbEmailBuilderService.decorators = [
+    { type: Injectable }
+];
+PbEmailBuilderService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [PB_CONFIG,] }] },
+    { type: PbEmailObjectStoreService },
+    { type: PbUserMiddlewaresService },
+    { type: PbUserInterfaceService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class UploadBottomSheetDialogComponent {
+    constructor(sanitizer, ngb, userRestApi, userInterface, middlewares, bottomSheetRef) {
+        this.sanitizer = sanitizer;
+        this.ngb = ngb;
+        this.userRestApi = userRestApi;
+        this.userInterface = userInterface;
+        this.middlewares = middlewares;
+        this.bottomSheetRef = bottomSheetRef;
+        this.uploading = false;
+        this.progress = new Subject();
+    }
+    get imageInfo() {
+        if (this.choosedImage) {
+            const { lastModified, size } = this.choosedImage;
+            const modTime = new Date(lastModified);
+            return `${modTime.toLocaleString()}, ${bytesToSize(size)}.`;
+        }
+        return '';
+    }
+    previewLink() {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl);
+    }
+    openBrowserModal(event) {
+        event.preventDefault();
+        const { uploadImagePath } = this.ngb.config;
+        if (!this.uploading && uploadImagePath) {
+            this.uploadInput.nativeElement.click();
+        }
+        else if (!uploadImagePath) {
+            this.userInterface.notify(`Hm ... this isn't a bug, it seems 'uploadImagePath' is empty!`);
+        }
+    }
+    uploadInputChanged() {
+        const { nativeElement } = this.uploadInput;
+        if (nativeElement.files.length) {
+            this._startUploading(nativeElement.files.item(0));
+        }
+    }
+    _startUploading(image) {
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+        }
+        this.objectUrl = URL.createObjectURL(image);
+        this.uploading = true;
+        const { uploadImagePath, csrf } = this.ngb.config;
+        const formData = new FormData();
+        if (csrf) {
+            formData.append(csrf.name, csrf.token);
+        }
+        formData.append('image', image);
+        return this.userRestApi
+            .userImageUpload$(formData, uploadImagePath)
+            .pipe(catchError((error) => this.middlewares.catchError(error).pipe(switchMap(() => {
+            this.userInterface.notify(error.message);
+            return EMPTY;
+        }))), finalize(() => this.progress.complete()))
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                const percentDone = Math.round((100 * event.loaded) / event.total);
+                this.progress.next(percentDone);
+            }
+            else if (event instanceof HttpResponse) {
+                if (!event.body.success) {
+                    this.userInterface.notify(event.body.message, 'Dismiss', null);
+                }
+                else {
+                    this.bottomSheetRef.dismiss(event.body.path);
+                    this.userInterface.notify('Successfully uploaded.', null, 1000);
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+        }
+    }
+}
+UploadBottomSheetDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-upload-bottom-sheet-dialog',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<mat-nav-list>\n  <mat-list-item (click)=\"openBrowserModal($event)\">\n    <div *ngIf=\"!uploading\">\n      <span mat-line i18n=\"upload|Browse images from computer\">Browse images from computer</span>\n    </div>\n    <ng-container *ngIf=\"uploading\">\n      <img matListAvatar [src]=\"previewLink()\" />\n      <span mat-line i18n=\"upload|Uploading Message\">Uploading ...</span>\n      <span mat-line>{{ imageInfo }}</span>\n    </ng-container>\n  </mat-list-item>\n  <mat-progress-bar *ngIf=\"uploading\" mode=\"buffer\" [value]=\"progress | async\"></mat-progress-bar>\n</mat-nav-list>\n<input type=\"file\" accept=\"image/*\" fxHide #uploadInput (change)=\"uploadInputChanged()\" />\n",
+                styles: [""]
+            },] }
+];
+UploadBottomSheetDialogComponent.ctorParameters = () => [
+    { type: DomSanitizer },
+    { type: PbEmailBuilderService },
+    { type: PbUserRestApiService },
+    { type: PbUserInterfaceService },
+    { type: PbUserMiddlewaresService },
+    { type: MatBottomSheetRef }
+];
+UploadBottomSheetDialogComponent.propDecorators = {
+    uploadInput: [{ type: ViewChild, args: ['uploadInput', { static: true },] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * A service that must be extended in case you want to rewrite the default
+ * uploading process. In case you have a Regular License, you'll get a simple upload
+ * service, for any other paid Licenses - you get an Image Gallery.
+ *
+ * It won't work if you have a Regular/Free License - you'll get an error on running the project,
+ * you need either an [Extended or Commercial License]{@link https://wlocalhost.org} key for this purpose.
+ *
+ * @example
+ * // Create a custom service
+ * class YourOwnUploaderService extends PbUserImageUploaderService {}
+ *
+ * // Rewrite it into AppModule
+ * { provide: PbUserImageUploaderService, useClass: YourOwnUploaderService }
+ */
+class PbUserImageUploaderService {
+}
+PbUserImageUploaderService.decorators = [
+    { type: Injectable }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ */
+class ImageUploader extends PbUserImageUploaderService {
+    constructor(matBottomSheet, userMiddlewaresService) {
+        super();
+        this.matBottomSheet = matBottomSheet;
+        this.userMiddlewaresService = userMiddlewaresService;
+    }
+    browse$() {
+        return this.matBottomSheet
+            .open(UploadBottomSheetDialogComponent, {
+            ariaLabel: 'Browse media'
+        })
+            .afterDismissed()
+            .pipe(switchMap(path => this.userMiddlewaresService.uploadImage(path)));
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class UploadImageGalleryComponent {
+    constructor(imageCategoryList, userConfig, matDialogRef, sanitizer, userRestApi, middlewares, userInterface) {
+        this.imageCategoryList = imageCategoryList;
+        this.userConfig = userConfig;
+        this.matDialogRef = matDialogRef;
+        this.sanitizer = sanitizer;
+        this.userRestApi = userRestApi;
+        this.middlewares = middlewares;
+        this.userInterface = userInterface;
+        this.currentMenuItem = 'gallery';
+    }
+    changeCurrentMenuItem(item) {
+        this.currentMenuItem = item;
+    }
+    addImageToTemplate(imagePath = this.choseImage) {
+        this.matDialogRef.close(imagePath);
+    }
+    previewImage({ target }) {
+        this.uploadImageFile = target.files.item(0);
+        if (this.imagePreviewObjectUrl) {
+            URL.revokeObjectURL(this.imagePreviewObjectUrl);
+        }
+        this.imagePreviewObjectUrl = URL.createObjectURL(this.uploadImageFile);
+        this.uploadImagePreview = this.sanitizer.bypassSecurityTrustResourceUrl(this.imagePreviewObjectUrl);
+    }
+    startUploading() {
+        const { csrf, uploadImagePath } = this.userConfig;
+        const formData = new FormData();
+        if (csrf) {
+            formData.append(csrf.name, csrf.token);
+        }
+        formData.append('image', this.uploadImageFile);
+        return this.userRestApi
+            .userImageUpload$(formData, uploadImagePath)
+            .pipe(catchError((error) => this.middlewares.catchError(error).pipe(switchMap(() => {
+            this.userInterface.notify(error.message);
+            return EMPTY;
+        }))))
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                // const percentDone = Math.round((100 * event.loaded) / event.total);
+                // this.progress.next(percentDone);
+            }
+            else if (event instanceof HttpResponse) {
+                if (!event.body.success) {
+                    this.userInterface.notify(event.body.message, 'Dismiss', null);
+                }
+                else {
+                    this.addImageToTemplate(event.body.path);
+                    this.userInterface.notify('Successfully uploaded.', null, 1000);
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.imagePreviewObjectUrl) {
+            URL.revokeObjectURL(this.imagePreviewObjectUrl);
+        }
+    }
+}
+UploadImageGalleryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-upload-image-gallery',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div fxLayout=\"column\" style=\"height: 100%;\">\n    <h2 mat-dialog-title i18n=\"image-gallery|Modal Image gallery header\">Image Gallery</h2>\n    <div class=\"mat-typography gallery-list-wrapper\" fxLayout fxLayoutGap=\"1rem\" fxFlex>\n        <mat-list fxFlex=\"200px\">\n            <mat-list-item (click)=\"changeCurrentMenuItem('gallery')\" [class.active]=\"currentMenuItem === 'gallery'\"\n                i18n=\"image-gallery|Image list\">\n                Gallery Image list\n            </mat-list-item>\n            <mat-list-item (click)=\"changeCurrentMenuItem('upload')\" [class.active]=\"currentMenuItem === 'upload'\"\n                i18n=\"image-gallery|Upload an image\">\n                Upload an image\n            </mat-list-item>\n        </mat-list>\n\n        <ng-container *ngIf=\"currentMenuItem === 'gallery'\">\n            <ng-container *ngIf=\"imageCategoryList.length;else emptyImageList\">\n                <cdk-virtual-scroll-viewport itemSize=\"150\" [minBufferPx]=\"150 * 10\" fxFlex\n                    class=\"gallery-list\">\n                    <div *cdkVirtualFor=\"let imagePath of imageCategoryList\" class=\"gallery-list-item\"\n                         (click)=\"choseImage = imagePath\" i18n-matTooltip=\"image-gallery|Click to choose message\"\n                         matTooltip=\"Click to choose\">\n                        <img [src]=\"imagePath\" />\n                    </div>\n                </cdk-virtual-scroll-viewport>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"currentMenuItem === 'upload'\">\n            <div class=\"upload-image\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex fxLayoutGap=\"1rem\">\n                <label class=\"upload-image-item\" [class.empty]=\"!uploadImagePreview\">\n                    <div class=\"upload-image-item-overview\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                        <mat-icon>backup</mat-icon>\n                    </div>\n                    <img class=\"upload-image-item-preview\" *ngIf=\"uploadImagePreview\" [src]=\"uploadImagePreview\" />\n                    <input type=\"file\" fxHide pattern=\"image/*\" (change)=\"previewImage($event)\">\n                </label>\n                <button mat-flat-button color=\"primary\" (click)=\"startUploading()\" i18n=\"image-gallery|Upload and insert into template\">\n                  Upload and insert into template\n                </button>\n            </div>\n        </ng-container>\n    </div>\n    <mat-dialog-actions align=\"end\">\n        <button mat-button mat-dialog-close i18n=\"actions|Undo\">Cancel</button>\n        <button mat-stroked-button color=\"primary\" [disabled]=\"!choseImage\" (click)=\"addImageToTemplate()\"\n                i18n=\"actions|Start\">\n            Add to template\n        </button>\n    </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyImageList>\n    <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"empty-category-notification\">\n        <mat-icon>notifications</mat-icon>\n        <h2 i18n=\"image-gallery|Image list is empty message\">Image list is empty!</h2>\n    </div>\n</ng-template>\n",
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */mat-list{background-color:#fff}mat-list mat-list-item{cursor:pointer}mat-list mat-list-item.active{background-color:#ccc}.gallery-list ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;gap:.3rem;grid-template:auto/repeat(4,1fr)}.gallery-list-item{height:120px;background-color:#ccc;cursor:pointer}.gallery-list-item img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.upload-image-item{width:80%;height:200px;background-color:#ccc;position:relative;border-radius:3px;padding:1em;text-align:center}.upload-image-item.empty .upload-image-item-overview,.upload-image-item:hover .upload-image-item-overview{opacity:1}.upload-image-item-overview{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:opacity .5s linear}.upload-image-item-overview mat-icon{height:50px;width:50px;font-size:50px}.upload-image-item-preview{max-height:100%}"]
+            },] }
+];
+UploadImageGalleryComponent.ctorParameters = () => [
+    { type: Array, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [PB_CONFIG,] }] },
+    { type: MatDialogRef },
+    { type: DomSanitizer },
+    { type: PbUserRestApiService },
+    { type: PbUserMiddlewaresService },
+    { type: PbUserInterfaceService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ */
+class PaidUsersImageUploaderServiceService extends PbUserImageUploaderService {
+    constructor(matDialog, userMiddleware, userRestApi) {
+        super();
+        this.matDialog = matDialog;
+        this.userMiddleware = userMiddleware;
+        this.userRestApi = userRestApi;
+    }
+    browse$() {
+        return this.userRestApi.getUserImages$().pipe(exhaustMap(imageCategoryList => this.matDialog
+            .open(UploadImageGalleryComponent, {
+            data: imageCategoryList,
+            width: '60vw',
+            maxWidth: '800px',
+            height: '60vh',
+            maxHeight: '800px'
+        })
+            .afterClosed()), filter(path => !!path.length), switchMap(path => this.userMiddleware.uploadImage(path)));
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class StructureComponent {
+    constructor(userInterfaceService, emailObjectStore, chRef, pbMiddlewaresService) {
+        this.userInterfaceService = userInterfaceService;
+        this.emailObjectStore = emailObjectStore;
+        this.chRef = chRef;
+        this.pbMiddlewaresService = pbMiddlewaresService;
+        this.structure = new Structure();
+        this.cdkDropListConnectedTo$ = this.userInterfaceService.cdkDropListConnectedTo$;
+        this.validate = function ({ rectangle }) {
+            const colFr = +(rectangle.width / this.fr).toFixed(2);
+            return colFr > 1 && colFr <= 10 - this.structure.columns;
+        }.bind(this);
+        // sectionWidth$ = this.userInterfaceService.currentEditingStructure$.pipe(
+        //   withLatestFrom(this.emailObjectStore.emailBodyWidth$),
+        //   map(([{ options }, width]) => {
+        //     return options.fullWidth ? '100%' : width;
+        //   })
+        // );
+        this.componentIsDestroyed$ = new Subject();
+    }
+    get isStructureActive() {
+        return this.isActive;
+    }
+    // @HostBinding('style.width') get sectionWidth(): string | number {
+    //   console.log(this.emailObjectStore.Email.general.width.value);
+    //   return this.structure.options.fullWidth ? '100%' : this.emailObjectStore.Email.general.width.value;
+    // }
+    // Don't close right panel on structure click
+    onHostClick(event) {
+        event.stopImmediatePropagation();
+        this.editStructure();
+    }
+    removeStructure(event) {
+        event.stopPropagation();
+        this.pbMiddlewaresService
+            .removeStructure(this.index, this.structure)
+            .pipe(exhaustMap(() => this.userInterfaceService.confirmDialog$()), filter(removeAllowed => removeAllowed), take(1))
+            .subscribe(() => {
+            this.emailObjectStore.removeStructure(this.index);
+            this.userInterfaceService.resetElements();
+        });
+    }
+    duplicateStructure(event) {
+        event.stopPropagation();
+        this.pbMiddlewaresService
+            .duplicateStructure(this.index, this.structure)
+            .pipe(map(() => this.emailObjectStore.duplicateStructure(this.index)), take(1))
+            .subscribe(newStructure => {
+            this.editStructure(newStructure);
+        });
+    }
+    dropNewBlock(event, column) {
+        if (event.previousContainer === event.container) {
+            this.emailObjectStore.addBlock(event, column);
+        }
+        else {
+            this.pbMiddlewaresService
+                .addBlock(event, column)
+                .pipe(map(newData => this.emailObjectStore.addBlock(newData.event, newData.column)))
+                .subscribe(() => {
+                // this.userInterfaceService.editBlock(newBlock);
+                this.chRef.markForCheck();
+            });
+        }
+    }
+    disableBlockDrag$(block) {
+        return this.pbMiddlewaresService.disableBlockDragWithinEmailBody(block).pipe(take(1));
+    }
+    editStructure(structure = this.structure) {
+        this.pbMiddlewaresService
+            .editStructure(structure)
+            .pipe(take(1))
+            .subscribe(strctr => {
+            this.userInterfaceService.editStructure(strctr);
+        });
+    }
+    getResizeEdges(columnKey) {
+        return {
+            right: columnKey + 1 !== this.structure.columns,
+            left: columnKey !== 0
+        };
+    }
+    createColumnId(columnKey) {
+        return `column-droplist-${columnKey}-${this.index}`;
+    }
+    getColumnStyles(columnKey) {
+        const { options: { gaps = [4, 4], columns = [] } } = this.structure;
+        const column = columns[columnKey] || defaultColumnsOptions;
+        let verticalAlign = 'center';
+        if (column.verticalAlign === 'bottom') {
+            verticalAlign = 'flex-end';
+        }
+        else if (column.verticalAlign === 'top') {
+            verticalAlign = 'flex-start';
+        }
+        return Object.assign({ padding: gaps.map(gap => `${gap}px`).join(' '), backgroundColor: column.background.color, placeSelf: `${verticalAlign} stretch` }, createBorder(column.border)
+        // ...createBackground(column.background)
+        );
+    }
+    onResizeEnd({ rectangle }, key) {
+        this.structure.options.columnsWidth[key] = +(rectangle.width / this.fr).toFixed(2);
+    }
+    ngDoCheck() {
+        if (this.isActive || this.userInterfaceService.currentStructureContainsActiveBlock(this.structure)) {
+            this.chRef.markForCheck();
+        }
+    }
+    ngOnInit() {
+        // Add columns options in case of old template
+        const { columns, columnsWidth } = this.structure.options;
+        if (!columns || !columnsWidth) {
+            const { type, elements, options } = this.structure;
+            this.editStructure(new Structure(type, elements, options));
+        }
+        const width = this.emailObjectStore.Email.general.width.value;
+        const [, horizontalGap] = this.structure.options.gaps;
+        this.fr = (width - horizontalGap * this.structure.columns) / 10;
+        this.userInterfaceService.currentEditingStructure$
+            .pipe(map(currentEditingStructure => currentEditingStructure === this.structure), takeUntil(this.componentIsDestroyed$))
+            .subscribe(isActive => {
+            this.isActive = isActive;
+        });
+    }
+    ngOnDestroy() {
+        this.componentIsDestroyed$.next('');
+        this.componentIsDestroyed$.complete();
+    }
+}
+StructureComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-structure',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div class=\"column\" *ngFor=\"let column of structure.elements; let index = index\" cdkDropList mwlResizable\n  [enableGhostResize]=\"false\" [resizeSnapGrid]=\"{ left: fr, right: fr }\" [resizeEdges]=\"getResizeEdges(index)\"\n  [validateResize]=\"validate\" (resizing)=\"onResizeEnd($event, index)\"\n  (cdkDropListDropped)=\"dropNewBlock($event, column)\" [class.empty]=\"!column.length\" [ngStyle]=\"getColumnStyles(index)\"\n  [cdkDropListConnectedTo]=\"cdkDropListConnectedTo$ | async\" [cdkDropListData]=\"column\" [id]=\"createColumnId(index)\">\n\n  <div *ngIf=\"!column.length\" class=\"empty-block\" i18n=\"structure|Inside empty block\">DnD blocks</div>\n\n  <pb-block *ngFor=\"let block of column; let index = index\" cdkDrag [cdkDragData]=\"block\" [block]=\"block\"\n    [index]=\"index\" [column]=\"column\" [cdkDragDisabled]=\"disableBlockDrag$(block) | async\">\n    <button mat-icon-button class=\"move\" cdkDragHandle i18n-matTooltip=\"block|Change Block order\"\n      matTooltip=\"Change Block order\" *ngIf=\"!(disableBlockDrag$(block) | async)\">\n      <mat-icon i18n-aria-label=\"block|Move block\" aria-label=\"Move block\" inline>pan_tool</mat-icon>\n    </button>\n  </pb-block>\n</div>\n\n<ng-content select=\".move\"></ng-content>\n<div class=\"tools\" fxLayoutGap=\"0.25rem\">\n  <button mat-icon-button class=\"edit\" color=\"primary\" i18n-matTooltip=\"structure|Change structure settings\"\n    matTooltip=\"Change structure settings\">\n    <mat-icon i18n-aria-label=\"structure|Edit structure\" aria-label=\"Edit structure\" inline>edit</mat-icon>\n  </button>\n  <button mat-icon-button (click)=\"duplicateStructure($event)\" i18n-matTooltip=\"structure|Duplicate structure\"\n    matTooltip=\"Duplicate structure\">\n    <mat-icon i18n-aria-label=\"structure|Duplicate structure\" aria-label=\"Duplicate structure\" inline>file_copy\n    </mat-icon>\n  </button>\n  <button mat-icon-button color=\"warn\" (click)=\"removeStructure($event)\" i18n-matTooltip=\"structure|Delete structure\"\n    matTooltip=\"Delete structure\">\n    <mat-icon i18n-aria-label=\"structure|Remove Structure\" aria-label=\"Remove Structure\" inline>delete_forever\n    </mat-icon>\n  </button>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.Emulated,
+                exportAs: 'structure',
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-block>.cdk-drag-handle{position:absolute;top:-30px;right:0;cursor:move;background-color:rgba(63,81,181,.5);color:#fff;border-radius:50% 50% 0 0;opacity:0;height:30px;width:30px;font-size:smaller}pb-block>.cdk-drag-handle mat-icon{margin-top:-8px}pb-block>.cdk-drag-handle:hover{background-color:#3f51b5}pb-block.cdk-drag-preview .cdk-drag-handle,pb-block:hover .cdk-drag-handle{opacity:1}:host{display:grid;border:1px solid #ccc;position:relative;grid-template-columns:1fr}:host>.tools{direction:ltr;position:absolute;opacity:0;left:0;bottom:-25px;color:#ff4081}:host>.tools button{background-color:#fff;border-radius:0 0 3px 3px;height:25px;width:25px;line-height:0}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview,:host:hover{box-shadow:0 0 1px 2px #ff4081;z-index:1}:host:hover>.tools{opacity:1}:host:hover>.tools button{background-color:#ff4081;color:#fff}:host.active>.tools>.edit{display:none}:host.cols_2{grid-template-columns:repeat(2,6fr)}:host.cols_3{grid-template-columns:repeat(3,4fr)}:host.cols_4{grid-template-columns:repeat(4,3fr)}:host.cols_12{grid-template-columns:7fr 5fr}:host.cols_21{grid-template-columns:5fr 7fr}:host .cdk-drop-list-dragging,:host .cdk-drop-list-receiving{height:100%}:host>.column{box-sizing:border-box}:host>.column.empty{height:60px}:host>.column.empty .empty-block{background-color:rgba(101,99,99,.21);height:100%;display:flex;justify-content:center;place-items:center;flex-direction:column;color:rgba(101,99,99,.3);font-size:small}:host>.column.empty.cdk-drop-list-dragging .empty-block{display:none}:host>.column.empty>.cdk-drag-placeholder{min-height:60px!important}"]
+            },] }
+];
+StructureComponent.ctorParameters = () => [
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService },
+    { type: ChangeDetectorRef },
+    { type: PbUserMiddlewaresService }
+];
+StructureComponent.propDecorators = {
+    structure: [{ type: Input }],
+    index: [{ type: Input }],
+    isStructureActive: [{ type: HostBinding, args: ['class.active',] }],
+    onHostClick: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @ignore
+ *
+ * Soon will be removed.
+ */
+class SlugifyPipe {
+    transform(input) {
+        const trChars = {
+            áÁ: 'a',
+            éÉ: 'e',
+            íÍ: 'i',
+            óÓ: 'o',
+            úÚ: 'u',
+            ñÑ: 'n'
+        };
+        for (const key of Object.keys(trChars)) {
+            input = input.replace(new RegExp('[' + key + ']', 'g'), trChars[key]);
+        }
+        return input
+            .toString()
+            .toLowerCase()
+            .replace(/\s+/g, '-') // Replace spaces with -
+            .replace(/[^\w\-]+/g, '') // Remove all non-word chars
+            .replace(/\-\-+/g, '-') // Replace multiple - with single -
+            .replace(/^-+/, '') // Trim - from start of text
+            .replace(/-+$/, ''); // Trim - from end of text
+    }
+}
+SlugifyPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'slugify'
+            },] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class PbEmailBuilderComponent {
+    constructor(ngb, userRestApiService, userInterfaceService, emailObjectStore, renderer2, slugifyPipe, middlewares, changeDetectorRef, structures, blocks, googleFonts, doc) {
+        this.ngb = ngb;
+        this.userRestApiService = userRestApiService;
+        this.userInterfaceService = userInterfaceService;
+        this.emailObjectStore = emailObjectStore;
+        this.renderer2 = renderer2;
+        this.slugifyPipe = slugifyPipe;
+        this.middlewares = middlewares;
+        this.changeDetectorRef = changeDetectorRef;
+        this.structures = structures;
+        this.blocks = blocks;
+        this.doc = doc;
+        this.emailChange = new EventEmitter();
+        this.previewTemplate = false;
+        this.showGeneralSettings$ = this.userInterfaceService.editGeneralSettings$;
+        this.currentTabIndex$ = this.userInterfaceService.currentTabIndex$;
+        this.cdkDropListConnectedTo$ = this.userInterfaceService.cdkDropListConnectedTo$;
+        this.getBuilderContainerStyles$ = this.emailObjectStore.builderContainerStyles$;
+        this.currentHTMLTemplate$ = this.emailObjectStore.templateAsObservable$;
+        this.activeMatProgress$ = this.userInterfaceService.activeMatProgress$.asObservable();
+        this.customModuleList$ = this.userRestApiService.getAllUserModules$;
+        this._onDestroy$ = new Subject();
+        this.includedFonts = new Set();
+        if (this.doc) {
+            for (const font of googleFonts) {
+                const link = this.doc.createElement('link');
+                link.href = `https://fonts.googleapis.com/css?family=${font}`;
+                link.rel = 'stylesheet';
+                this.includedFonts.add(link);
+                this.doc.head.appendChild(link);
+            }
+        }
+    }
+    writeValue(email) {
+        try {
+            this.emailObjectStore.setEmail(email);
+            this.previewTemplate = false;
+            this.changeDetectorRef.markForCheck();
+        }
+        catch (error) {
+            this.userInterfaceService.notify(error.message);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Not implemented yet
+     * @param isDisabled The state of builder
+     */
+    setDisabledState(isDisabled) {
+        // tslint:disable-next-line: no-console
+        console.info('[IpEmailBuilderComponent] Method [setDisabledState] is not implemented.');
+    }
+    saveEmail() {
+        return this.emailObjectStore.currentEmailHasChanges$
+            .pipe(exhaustMap(hasChanges => {
+            return iif(() => hasChanges, this.ngb.createHTMLTemplate$(), this.userInterfaceService.notify('No changes were detected to be save!').afterDismissed());
+        }), take(1))
+            .subscribe();
+    }
+    disableBlocksList$(block) {
+        return iif(() => { var _a; return !((_a = block.state) === null || _a === void 0 ? void 0 : _a.disabled); }, this.emailObjectStore.emailStructuresAsObservable$.pipe(map(({ length }) => length > 0), exhaustMap(hasStructures => (hasStructures ? this.middlewares.disableBlockDragFromList(block) : deferOf(true))))).pipe(take(1));
+    }
+    disableStructureList$(structure) {
+        return this.middlewares.disableStructureDragFromList(structure).pipe(take(1));
+    }
+    trackByFn(block) {
+        return block.type;
+    }
+    changeTabIndex(index) {
+        this.userInterfaceService.changeTabIndex(index);
+    }
+    download(source) {
+        return this.middlewares
+            .exportFile(source)
+            .pipe(exhaustMap(() => this.ngb.createHTMLTemplate$().pipe(map(serverResponse => (Object.assign(Object.assign({}, serverResponse), { type: source }))))), catchError(error => this.middlewares.catchError(error).pipe(switchMap(() => {
+            this.userInterfaceService.notify(error.message);
+            return EMPTY;
+        }))), take(1))
+            .subscribe(({ type, html, mjml }) => {
+            const anchor = this.renderer2.createElement('a');
+            let download = html;
+            if (type === 'mjml') {
+                download = mjml;
+            }
+            else if (type === 'json') {
+                download = JSON.stringify(this.ngb.Email, null, 1);
+            }
+            const href = URL.createObjectURL(new Blob([download], {
+                type: type === 'json' ? 'text/json' : 'text/html'
+            }));
+            const fileName = this.slugifyPipe.transform(this.ngb.Email.general.name || 'ngb-template');
+            anchor.href = href;
+            anchor.target = '_blank';
+            anchor.download = `${fileName}.${type}`;
+            anchor.click();
+            URL.revokeObjectURL(href);
+        });
+    }
+    importFile() {
+        this.userInterfaceService
+            .importDialog$()
+            .pipe(switchMap(emailOrError => {
+            if (emailOrError instanceof Error) {
+                throw emailOrError;
+            }
+            return deferOf(emailOrError);
+        }), catchError(error => this.middlewares.catchError(error).pipe(switchMap(() => {
+            this.userInterfaceService.notify(error.message);
+            return EMPTY;
+        }))), take(1), filter(email => !!email))
+            .subscribe(email => {
+            this.writeValue(email);
+            this.userInterfaceService.notify('Email has been imported successfully.');
+        });
+    }
+    // getBackgroundImage(): SafeStyle {
+    //   const {
+    //     background: { url }
+    //   } = this.email.general;
+    //   return this.sanitizer.bypassSecurityTrustStyle(url && `url(${url})`);
+    // }
+    // getBuilderContainerStyles() {
+    //   const { background, padding, direction } = this.emailObjectStore.Email.general;
+    //   return {
+    //     direction,
+    //     backgroundRepeat: background.repeat,
+    //     backgroundColor: background.color,
+    //     backgroundSize: createWidthHeight(background.size),
+    //     backgroundPosition: 'top center',
+    //     ...createPadding(padding)
+    //   };
+    // }
+    createArrayFromStructureColumns({ columns }) {
+        return new Array(columns).fill('');
+    }
+    togglePreview() {
+        return this.emailObjectStore
+            .createHTMLTemplate$()
+            .pipe(exhaustMap(() => this.middlewares.togglePreview(!this.previewTemplate)), catchError(error => this.middlewares.catchError(error).pipe(switchMap(() => {
+            this.userInterfaceService.notify(error.message);
+            return EMPTY;
+        }))), take(1))
+            .subscribe(nextState => {
+            this.previewTemplate = nextState;
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnInit() {
+        fromEvent(window, 'beforeunload')
+            .pipe(withLatestFrom(this.emailObjectStore.currentEmailHasChanges$), filter(([_, emailIsDirty]) => emailIsDirty), switchMap(([event]) => this.middlewares.preventWindowExit(event)), takeUntil(this._onDestroy$))
+            .subscribe(ev => {
+            ev.preventDefault();
+            ev.returnValue = '';
+        });
+        this.emailObjectStore.emailAsObservable$.pipe(takeUntil(this._onDestroy$)).subscribe(email => {
+            var _a, _b;
+            (_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this.onChange) === null || _b === void 0 ? void 0 : _b.call(this, email);
+            this.emailChange.next(email);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.email) {
+            this.writeValue(changes.email.currentValue);
+        }
+    }
+    // private setEmail(email: PBEmail) {
+    //   try {
+    //     this.emailObjectStore.setEmail(email);
+    //     this.previewTemplate = false;
+    //     this.changeDetectorRef.markForCheck();
+    //   } catch (error) {
+    //     this.userInterfaceService.notify(error.message);
+    //   }
+    // }
+    ngOnDestroy() {
+        this._onDestroy$.next();
+        this._onDestroy$.complete();
+        // Reset the builder state
+        this.userInterfaceService.reset();
+        if (this.doc) {
+            this.includedFonts.forEach(font => font.remove());
+        }
+        this.includedFonts.clear();
+    }
+}
+PbEmailBuilderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-email-builder',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<mat-sidenav-container>\n  <div class=\"pb-builder-container\" fxLayout=\"column\" fxFlex>\n    <mat-progress-bar *ngIf=\"activeMatProgress$ | async\" mode=\"buffer\"></mat-progress-bar>\n    <mat-toolbar fxLayoutGap=\"1rem\" fxLayoutAlign=\"space-between center\">\n      <ng-content fxLayout fxLayoutGap=\"0.5rem\" select=\".top-actions\"></ng-content>\n\n      <div fxFlexlayout fxLayoutGap=\"0.5rem\">\n        <button *ngIf=\"ngb.config.useSaveButton\" type=\"button\" (click)=\"saveEmail()\" mat-stroked-button color=\"primary\"\n                i18n=\"actions|Save Email\">\n          Save Email\n        </button>\n        <button *ngIf=\"ngb.config.usePreviewButton\" type=\"button\" (click)=\"togglePreview()\" mat-stroked-button>\n          <ng-container [ngSwitch]=\"previewTemplate\">\n            <span *ngSwitchDefault i18n=\"actions|Preview\">Preview</span>\n            <span *ngSwitchCase=\"true\" i18n=\"actions|Close Preview\">Close Preview</span>\n          </ng-container>\n        </button>\n\n        <button mat-button mat-stroked-button i18n=\"actions|Import\" (click)=\"importFile()\">\n          Import\n        </button>\n\n        <ng-container *ngIf=\"ngb.config.useDownloadButton\">\n          <button mat-button [matMenuTriggerFor]=\"downloadMenu\" mat-stroked-button i18n=\"actions|Export\">\n            Export\n          </button>\n          <mat-menu #downloadMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"download('html')\" i18n=\"actions|Export HTML\">\n              Export HTML\n            </button>\n            <button mat-menu-item (click)=\"download('mjml')\" i18n=\"actions|Export MJML\">\n              Export MJML\n            </button>\n            <button mat-menu-item (click)=\"download('json')\" i18n=\"actions|Export JSON\">\n              Export JSON\n            </button>\n          </mat-menu>\n        </ng-container>\n\n      </div>\n      <!-- <div class=\"history-actions\" style=\"margin-inline-start: auto;\">\n        <span>Last saved Now</span>\n        <button type=\"button\" mat-icon-button>\n          <mat-icon>undo</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button>\n          <mat-icon>redo</mat-icon>\n        </button>\n      </div> -->\n    </mat-toolbar>\n    <ng-container [ngSwitch]=\"previewTemplate\">\n      <pb-builder-container *ngSwitchDefault [ngStyle]=\"getBuilderContainerStyles$ | async\">\n        <ng-content select=\".rewrited-empty-email\"></ng-content>\n      </pb-builder-container>\n\n      <pb-preview-template fxLayout fxFlex=\"auto\" fxLayoutAlign=\"center\" [template]=\"currentHTMLTemplate$ | async\"\n                           *ngSwitchCase=\"true\">\n      </pb-preview-template>\n    </ng-container>\n  </div>\n  <mat-sidenav mode=\"side\" fxFlex=\"0 0 310px\" [opened]=\"!previewTemplate\" position=\"end\" class=\"pb-builder-content\">\n    <mat-tab-group [selectedIndex]=\"currentTabIndex$ | async\" (selectedIndexChange)=\"changeTabIndex($event)\">\n      <mat-tab i18n-label=\"Content\" label=\"Content\">\n        <div class=\"main-padding\">\n          <cdk-drop-list class=\"elements\" [cdkDropListConnectedTo]=\"cdkDropListConnectedTo$ | async\"\n                         [cdkDropListData]=\"blocks\" [cdkDropListSortingDisabled]=\"true\" id=\"block-elements\">\n            <div cdkDrag *ngFor=\"let block of blocks; trackBy: trackByFn\" [cdkDragData]=\"block\"\n                 [cdkDragDisabled]=\"disableBlocksList$(block) | async\" class=\"drag-element\"\n                 [matTooltip]=\"block.state.message\">\n              <mat-icon>{{ block.icon }}</mat-icon>\n              <div class=\"drag-element-title\">{{ block.title }}</div>\n            </div>\n          </cdk-drop-list>\n\n          <mat-divider style=\"margin: 1em 0;\"></mat-divider>\n          <!-- <h3 class=\"divider\"><span>Structures</span></h3> -->\n          <cdk-drop-list class=\"elements structure-elements\" cdkDropListConnectedTo=\"structures-drop-list\"\n                         [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"structures\">\n            <div cdkDrag *ngFor=\"let structure of structures; trackBy: trackByFn\" [cdkDragData]=\"structure\"\n                 [cdkDragDisabled]=\"disableStructureList$(structure) | async\" class=\"drag-element structure-element\"\n                 [ngClass]=\"structure.type\">\n              <div *ngFor=\"let column of createArrayFromStructureColumns(structure)\"></div>\n            </div>\n          </cdk-drop-list>\n          <ng-content fxLayout fxLayoutGap=\"0.5rem\" select=\".after-structure-blocks\"></ng-content>\n        </div>\n      </mat-tab>\n      <mat-tab i18n-label=\"Modules\" label=\"Modules\" class=\"modules-tab\">\n        <cdk-virtual-scroll-viewport itemSize=\"54\" [minBufferPx]=\"54 * 10\" [maxBufferPx]=\"54 * 20\"\n                                     style=\"height: inherit;\"\n                                     *ngIf=\"customModuleList$ | async as modules; else emptyModuleList\">\n          <div class=\"main-padding\">\n            <div class=\"custom-modules\" cdkDropList cdkDropListConnectedTo=\"structures-drop-list\"\n                 [cdkDropListData]=\"modules\" [cdkDropListSortingDisabled]=\"true\">\n              <div fxLayout=\"column\" fxLayoutGap=\"1rem\">\n                <ng-container *cdkVirtualFor=\"let module of modules\">\n                  <div cdkDrag [cdkDragData]=\"module.module\"\n                       [cdkDragDisabled]=\"disableStructureList$(module.module) | async\" class=\"drag-element\"\n                       style=\"padding: 1em;text-transform: uppercase;height: 54px;\">\n                    <span *ngIf=\"module.name\">{{module.name}}</span>\n                    <!-- <img *ngIf=\"module.thumb\" [src]=\"module.thumb\" /> -->\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <ng-content fxLayout fxLayoutGap=\"0.5rem\" select=\".after-content-blocks\"></ng-content>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        <ng-template #emptyModuleList>\n          <h4 class=\"main-padding\" style=\"text-align: center;\" i18n=\"modules|empty list message\">\n            Module list is empty\n          </h4>\n        </ng-template>\n      </mat-tab>\n      <mat-tab i18n-label=\"Settings\" label=\"Settings\">\n        <div class=\"pb-builder-options\" [ngSwitch]=\"showGeneralSettings$ | async\">\n          <pb-general-settings *ngSwitchDefault></pb-general-settings>\n          <pb-block-settings *ngSwitchCase=\"'block'\"></pb-block-settings>\n          <pb-structure-settings *ngSwitchCase=\"'structure'\" fxLayout=\"column\"></pb-structure-settings>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-sidenav>\n</mat-sidenav-container>\n",
+                exportAs: 'pbEmailBuilder',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => PbEmailBuilderComponent),
+                        multi: true
+                    },
+                    SlugifyPipe
+                ],
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:100vh}.hide{display:none}::ng-deep mat-sidenav-container{height:100%}::ng-deep mat-sidenav-container mat-sidenav-content{width:100%;z-index:unset!important;overflow:unset!important}::ng-deep h3.divider{text-align:center;display:block;overflow:hidden;margin:0 0 1rem}::ng-deep h3.divider span{font-weight:100;position:relative;display:inline-block}::ng-deep h3.divider span:after,::ng-deep h3.divider span:before{content:\"\";position:absolute;top:50%;height:1px;background:#ccc;width:99999px}::ng-deep h3.divider span:before{left:100%;margin-left:10px}::ng-deep h3.divider span:after{right:100%;margin-right:10px}::ng-deep .pb-builder-content{border-right:1px solid rgba(0,0,0,.12)}::ng-deep .pb-builder-content .overflow{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#fff;opacity:.5;display:none;z-index:3}::ng-deep .pb-builder-content.disabled .overflow{display:block}::ng-deep .pb-builder-content .mat-tab-label{width:50%;min-width:auto;height:64px;font-size:medium;text-transform:uppercase;padding:0 12px}::ng-deep .pb-builder-content .mat-tab-body-wrapper,::ng-deep .pb-builder-content .mat-tab-group{height:100%}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body{padding:0}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements{display:grid;grid-gap:.5rem;margin-bottom:1rem;grid-template:repeat(2,1fr)/repeat(3,1fr)}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.structure-elements{grid-template:repeat(4,1fr)/1fr}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.cdk-drop-list-dragging .cdk-drag{transform:none!important}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body input{height:auto;border:none}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .custom-modules .drag-element img{max-width:100%}::ng-deep .pb-builder-container{position:relative;height:100%}::ng-deep .pb-builder-container mat-progress-bar{position:absolute}::ng-deep .pb-builder-container mat-toolbar{background-color:#fff}::ng-deep .pb-builder-options .mat-expansion-panel{box-shadow:none!important}::ng-deep .pb-builder-options .mat-expansion-panel.mat-expanded{overflow:visible}::ng-deep .pb-builder-options mat-expansion-panel-header:not(.mat-expanded){background:rgba(0,0,0,.04)}::ng-deep .pb-builder-options ::ng-deep .group{display:grid;grid-template:auto/repeat(2,1fr);grid-gap:1rem}::ng-deep .pb-builder-options ::ng-deep .group>*{align-self:center}::ng-deep .pb-builder-options ::ng-deep .group+.group{margin-top:1em}::ng-deep .pb-builder-options ::ng-deep .group.four{grid-template-columns:repeat(4,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.f-large{grid-template-columns:2fr 1fr}::ng-deep .pb-builder-options ::ng-deep .group.l-large{grid-template-columns:1fr 2fr}::ng-deep .pb-builder-options ::ng-deep .group.three{grid-template-columns:repeat(3,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-small{grid-template-columns:1fr repeat(2,2fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-large{grid-template-columns:2fr repeat(2,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.l-large{grid-template-columns:repeat(2,1fr) 2fr}::ng-deep .pb-builder-options ::ng-deep .group .mat-form-field-infix{width:auto!important}::ng-deep .drag-element{text-align:center;border:1px solid #ccc;box-sizing:border-box;background:#fff;color:#7b7b7b;cursor:move;transition:box-shadow .3s ease-in-out;will-change:box-shadow;border-radius:3px}::ng-deep .drag-element.cdk-drag-disabled,::ng-deep .drag-element.cdk-drag-placeholder{cursor:not-allowed;opacity:.6}::ng-deep .drag-element:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}::ng-deep .drag-element .mat-icon{font-size:40px!important;padding:.5rem;width:auto;height:auto}::ng-deep .drag-element img{max-width:100%}::ng-deep .drag-element-title{font-size:.9em;text-transform:uppercase;margin-bottom:.5rem}::ng-deep .drag-element.structure-element{height:60px;position:relative;padding:4px;display:grid;grid-template:1fr/1fr}::ng-deep .drag-element.structure-element>div{background:#ccc;border:4px solid #bbb}::ng-deep .drag-element.structure-element.cols_2{grid-template-columns:repeat(2,5fr)}::ng-deep .drag-element.structure-element.cols_3{grid-template-columns:repeat(3,3.33fr)}::ng-deep .drag-element.structure-element.cols_4{grid-template-columns:repeat(4,2.5fr)}::ng-deep .drag-element.structure-element.cols_12{grid-template-columns:6fr 4fr}::ng-deep .drag-element.structure-element.cols_21{grid-template-columns:4fr 6fr}::ng-deep .main-padding{padding:1rem}::ng-deep .cdk-drop-list-receiving>:not(.cdk-drag){opacity:.6}::ng-deep .cdk-drop-list-dragging>*{pointer-events:none}@keyframes drag-animation{0%{opacity:0;height:0}to{opacity:1}}::ng-deep .cdk-drag-animating{animation:drag-animation 1s cubic-bezier(0,0,.2,1) infinite}::ng-deep .cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 2px rgba(63,81,181,.5);min-height:60px;min-width:100px;background-color:#fff}::ng-deep .cdk-drag.structure-element.cdk-drag-placeholder{box-shadow:0 0 1px 2px #ff4081;width:100%;pointer-events:none}"]
+            },] }
+];
+PbEmailBuilderComponent.ctorParameters = () => [
+    { type: PbEmailBuilderService },
+    { type: PbUserRestApiService },
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService },
+    { type: Renderer2 },
+    { type: SlugifyPipe },
+    { type: PbUserMiddlewaresService },
+    { type: ChangeDetectorRef },
+    { type: Array, decorators: [{ type: Inject, args: [PB_STRUCTURES,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [PB_BLOCKS,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [PB_GOOGLE_FONTS,] }] },
+    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+PbEmailBuilderComponent.propDecorators = {
+    email: [{ type: Input }],
+    emailChange: [{ type: Output }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// tslint:disable-next-line:no-shadowed-variable directive-class-suffix
+class AbstractBlock {
+    ngOnInit() {
+        // if (!this.portal) {
+        //   throw new Error(`Each element should have an options' portal, add *cdkPortal inside of HTML block.`);
+        // }
+    }
+}
+AbstractBlock.decorators = [
+    { type: Directive }
+];
+AbstractBlock.propDecorators = {
+    portal: [{ type: ViewChild, args: [CdkPortal, { static: true },] }]
+};
+class AbstractEntityBlock {
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class TextElementComponent extends AbstractBlock {
+    constructor(userRestApi, emailObject, internalService) {
+        super();
+        this.userRestApi = userRestApi;
+        this.emailObject = emailObject;
+        this.internalService = internalService;
+        // @Input() block: TextBlock;
+        this.setAsReadOnly$ = this.internalService.currentEditingBlock$.pipe(map(editingBlock => editingBlock !== this.block));
+        this.staticQuillConfig = {
+            toolbar: {
+                container: [
+                    ['bold', 'italic', 'underline', 'strike'],
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }, { size: ['small', false, 'large', 'huge'] }],
+                    [{ align: [] }, 'link'],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    [{ color: [] }, { background: [] }],
+                    ['clean']
+                ],
+                handlers: {
+                    placeholder(selector) {
+                        const range = this.quill.getSelection();
+                        const format = this.quill.getFormat();
+                        const text = this.quill.getText(range.index, range.length);
+                        this.quill.deleteText(range.index, text.length);
+                        this.quill.insertText(range.index, selector, format);
+                        this.quill.setSelection(range.index, selector.length);
+                    }
+                }
+            }
+        };
+        this.quillInit$ = this.userRestApi.getAllUserMergeFields$.pipe(map(placeholder => {
+            // @ts-ignore
+            this.staticQuillConfig.toolbar.container.splice(-1, 0, [{ placeholder }]);
+        }), mapTo(true), take(1));
+        this.textChanged$ = new Subject();
+        this.componentDestroyed$ = new Subject();
+    }
+    getTextStyles() {
+        const { color, font, lineHeight, padding } = this.block.options;
+        return Object.assign(Object.assign(Object.assign({ color, 'word-break': 'break-all' }, createLineHeight(lineHeight)), createFont(font)), createPadding(padding));
+    }
+    contentChanged() {
+        this.textChanged$.next();
+    }
+    ngOnInit() {
+        this.textChanged$.pipe(debounceTime(600), takeUntil(this.componentDestroyed$)).subscribe(() => {
+            this.emailObject.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.componentDestroyed$.next();
+        this.componentDestroyed$.complete();
+    }
+}
+TextElementComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-text-element',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div [ngStyle]=\"getTextStyles()\">\n  <quill-editor *ngIf=\"quillInit$ | async; else loadingModules\" i18n-placeholder=\"text-element|placeholder\"\n                placeholder=\"Insert text here ...\" [modules]=\"staticQuillConfig\" [readOnly]=\"setAsReadOnly$ |async\"\n                [(ngModel)]=\"block.innerText\" (onContentChanged)=\"contentChanged()\">\n  </quill-editor>\n</div>\n\n<ng-template #loadingModules>\n  <span i18n=\"text-element|loading message\">Please wait ...</span>\n</ng-template>\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: ["@charset \"UTF-8\";\n/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */\n/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\u2022\"}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\u2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\u2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover{color:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble,.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:\"\";display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-stroke.ql-thin,.ql-bubble .ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-item:before,.ql-bubble .ql-picker.ql-header .ql-picker-label:before{content:\"Normal\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-item:before,.ql-bubble .ql-picker.ql-font .ql-picker-label:before{content:\"Sans Serif\"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before{content:\"Serif\"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before{content:\"Monospace\"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-item:before,.ql-bubble .ql-picker.ql-size .ql-picker-label:before{content:\"Normal\"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before{content:\"Small\"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before{content:\"Large\"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before{content:\"Huge\"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:\" \";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:\"\u00D7\";font-size:16px;font-weight:700}.ql-container.ql-bubble:not(.ql-disabled) a{position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:\" \";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:after,.ql-container.ql-bubble:not(.ql-disabled) a:before{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:hover:after,.ql-container.ql-bubble:not(.ql-disabled) a:hover:before{visibility:visible}quill-editor{display:block;word-break:break-word}quill-editor .ql-container{font-family:inherit;font-size:inherit}quill-editor .ql-container .ql-editor{padding:0!important;line-height:inherit;font:inherit;overflow:visible}quill-editor .ql-placeholder .ql-picker-label:before{display:block;content:\"Tags\";min-width:50px}quill-editor .ql-placeholder.ql-expanded .ql-picker-item:before{content:attr(data-value);width:-moz-min-content;width:min-content}quill-editor .ql-tooltip{z-index:10;line-height:normal}quill-editor .ql-tooltip .ql-picker-options{max-height:300px;overflow:auto}quill-editor .ql-toolbar{width:600px;width:-moz-max-content;width:max-content}quill-editor h1,quill-editor h2,quill-editor h3,quill-editor h4,quill-editor h5,quill-editor h6{font-weight:inherit;line-height:inherit}"]
+            },] }
+];
+TextElementComponent.ctorParameters = () => [
+    { type: PbUserRestApiService },
+    { type: PbEmailObjectStoreService },
+    { type: PbUserInterfaceService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class ImageComponent extends AbstractBlock {
+    constructor(imageUploader, chRef, ngb) {
+        super();
+        this.imageUploader = imageUploader;
+        this.chRef = chRef;
+        this.ngb = ngb;
+    }
+    // @Input() block = new ImageBlock();
+    get align() {
+        return this.block.options.align;
+    }
+    get src() {
+        return this.block.src || 'https://via.placeholder.com/600x200?text=CHANGE+ME';
+    }
+    uploadImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const src = yield this.imageUploader.browse$().toPromise();
+            if (src) {
+                this.block.src = src;
+                this.chRef.markForCheck();
+            }
+        });
+    }
+    getImageStyles() {
+        const { border, width, height, padding } = this.block.options;
+        return Object.assign(Object.assign({ width: createWidthHeight(width), height: createWidthHeight(height) }, createPadding(padding)), createBorder(border));
+    }
+}
+ImageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-image',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<!-- <div\n  class=\"overflow\"\n  *ngIf=\"(ngb.currentEditingBlock$ | async) !== block\"\n  (click)=\"uploadImage()\"\n>\n  <mat-icon inline>cloud_upload</mat-icon>\n</div> -->\n<img [src]=\"src\" [title]=\"block.options.title\" [ngStyle]=\"getImageStyles()\" />\n",
+                styles: [":host{display:block;line-height:0}:host:hover .overflow{opacity:1}.overflow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3);opacity:0;will-change:opacity;transition:opacity .3s cubic-bezier(.075,.82,.165,1);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:3em}.overflow mat-icon{opacity:.8}img{max-width:100%;box-sizing:border-box}"]
+            },] }
+];
+ImageComponent.ctorParameters = () => [
+    { type: PbUserImageUploaderService },
+    { type: ChangeDetectorRef },
+    { type: PbEmailBuilderService }
+];
+ImageComponent.propDecorators = {
+    align: [{ type: HostBinding, args: ['style.textAlign',] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class ButtonComponent extends AbstractBlock {
+    // @Input() block: ButtonBlock;
+    getButtonStyles() {
+        const { backgroundColor, border, color, font, lineHeight, innerPadding, fullWidth } = this.block.options;
+        return Object.assign(Object.assign(Object.assign(Object.assign({ color, width: fullWidth ? '100%' : 'auto', backgroundColor }, createFont(font)), createPadding(innerPadding)), createBorder(border)), createLineHeight(lineHeight));
+    }
+    getParentStyles() {
+        const { align, padding } = this.block.options;
+        return Object.assign({ justifyContent: (align === 'center' && 'center') ||
+                (align === 'right' && 'flex-end') ||
+                'flex-start' }, createPadding(padding));
+    }
+}
+ButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-button',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n  <button type=\"button\" [class.full-width]=\"block.options.fullWidth\" [ngStyle]=\"getButtonStyles()\">\n    {{ block.innerText }}\n  </button>\n</div>\n",
+                encapsulation: ViewEncapsulation.Emulated,
+                styles: ["button{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]
+            },] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class DividerComponent extends AbstractBlock {
+    // @Input()
+    // block: DividerBlock = new DividerBlock();
+    getDividerStyles() {
+        const { border, padding } = this.block.options;
+        return Object.assign(Object.assign({}, createBorder(border, 'borderTop')), createPadding(padding, 'margin'));
+    }
+    ngOnInit() {
+    }
+}
+DividerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-divider',
+                template: '<div [ngStyle]="getDividerStyles()"></div>',
+                styles: [`
+      :host {
+        display: table;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class SpacerComponent extends AbstractBlock {
+    // @Input() block: SpacerBlock = new SpacerBlock();
+    get height() {
+        return createWidthHeight(this.block.options.height);
+    }
+}
+SpacerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-spacer',
+                template: '',
+                styles: [`
+      :host {
+        display: table;
+        width: 100%;
+        transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+      }
+    `]
+            },] }
+];
+SpacerComponent.propDecorators = {
+    height: [{ type: HostBinding, args: ['style.height',] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class SocialComponent extends AbstractBlock {
+    // @Input()
+    // block: SocialBlock;
+    getParentStyles() {
+        const { color, font, lineHeight, padding } = this.block.options;
+        return Object.assign(Object.assign(Object.assign({ color }, createLineHeight(lineHeight)), createFont(font)), createPadding(padding));
+    }
+    getLabelStyles() {
+        const { innerPadding } = this.block.options;
+        return Object.assign(Object.assign({}, createPadding(innerPadding)), { lineHeight: 0 });
+    }
+    getSocialListStyles() {
+        const { align } = this.block.options;
+        return {
+            display: 'flex',
+            placeContent: (align === 'left' && 'flex-start') ||
+                (align === 'right' && 'flex-end') ||
+                align
+        };
+    }
+    getSocialListClasses() {
+        return `social-list ${this.block.options.mode}`;
+    }
+    getSocialNetworkIcon(network) {
+        return getAssetByPath(`${network}.png`);
+    }
+}
+SocialComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-social',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n  <div [class]=\"getSocialListClasses()\" [ngStyle]=\"getSocialListStyles()\">\n    <ng-container *ngIf=\"block.networks.length; else noSocialNetworks\">\n      <div class=\"social-list-item\" *ngFor=\"let network of block.networks\">\n        <div [ngStyle]=\"getLabelStyles()\">\n          <img [src]=\"getSocialNetworkIcon(network.name)\" [width]=\"block.options.iconSize.value\"\n            [height]=\"block.options.iconSize.value\" [classList]=\"network.name\" [alt]=\"network.name\" />\n        </div>\n        <span *ngIf=\"network.label\">{{ network.label }}</span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #noSocialNetworks>\n  <p i18n=\"social block|Empty social list message\">Please add some social networks.</p>\n</ng-template>\n",
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px}.social-list-item img.facebook{background-color:#3a5898}.social-list-item img.twitter{background-color:#d95988}.social-list-item img.github{background-color:#000}.social-list-item img.instagram{background-color:#3f729b}.social-list-item img.web{background-color:#4bade9}.social-list-item img.snapchat{background-color:#fffa54}.social-list-item img.youtube{background-color:#ea3323}.social-list-item img.vimeo{background-color:#53b4e7}.social-list-item img.medium{background-color:#000}.social-list-item img.soundcloud{background-color:#ef7f31}.social-list-item img.dribbble{background-color:#d95988}.social-list-item img.pinterest{background-color:#bd071c}.social-list-item img.linkedin{background-color:#0077b5}.social-list-item img.tumblr{background-color:#334356}.social-list-item img.xing{background-color:#296365}.social-list-item img.tiktok{background-color:#000}"]
+            },] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+const cStore = new Map();
+/**
+ * @internal
+ *
+ * Soon it must be optimized, and load all components lazily.
+ */
+class DynamicComponentDirective {
+    constructor(cResolver, viewContainerRef) {
+        this.cResolver = cResolver;
+        this.viewContainerRef = viewContainerRef;
+        cStore.set('text', TextElementComponent);
+        cStore.set('image', ImageComponent);
+        cStore.set('button', ButtonComponent);
+        cStore.set('divider', DividerComponent);
+        cStore.set('spacer', SpacerComponent);
+        cStore.set('social', SocialComponent);
+    }
+    set pbDynamicComponent(block) {
+        const component = this.cResolver.resolveComponentFactory(cStore.get(block.type));
+        this.viewContainerRef.createComponent(component).instance.block = block;
+    }
+}
+DynamicComponentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[pbDynamicComponent]'
+            },] }
+];
+DynamicComponentDirective.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef }
+];
+DynamicComponentDirective.propDecorators = {
+    pbDynamicComponent: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// import { IpUserRestApiProvider } from '../providers';
+class BuilderContainerComponent {
+    constructor(userInterfaceService, emailObjectStore, userRestApi, pbStorage, pbMiddlewaresService, sanitizer, userConfig) {
+        var _a;
+        this.userInterfaceService = userInterfaceService;
+        this.emailObjectStore = emailObjectStore;
+        this.userRestApi = userRestApi;
+        this.pbStorage = pbStorage;
+        this.pbMiddlewaresService = pbMiddlewaresService;
+        this.sanitizer = sanitizer;
+        this.userConfig = userConfig;
+        this.showTemplateList = (_a = this.userConfig.templateListIfEmpty) !== null && _a !== void 0 ? _a : true;
+        this.getStructures$ = this.emailObjectStore.emailStructuresAsObservable$;
+        this.activeMatProgress$ = this.userInterfaceService.activeMatProgress$;
+    }
+    onHostClick() {
+        this.userInterfaceService.editGeneralSettings();
+    }
+    trackBy(structure) {
+        return structure.id;
+    }
+    disableStructureDrag$(structure) {
+        return this.pbMiddlewaresService.disableStructureDragWithinEmailBody(structure).pipe(take(1));
+    }
+    openTemplateDialog(ev) {
+        ev.stopImmediatePropagation();
+        this.userInterfaceService.activeMatProgress$.next(true);
+        const cachedTemplates = this.pbStorage.getCachedTemplateList();
+        return iif(() => cachedTemplates.length > 0, deferOf(cachedTemplates), this.userRestApi.getAllUserTemplates$.pipe(tap(list => this.pbStorage.cacheTemplateList(list))))
+            .pipe(
+        // map(() => []),
+        map(templates => {
+            return [...templates, { category: 'latest', templates: this.pbStorage.getLatestUsedTemplates() }];
+        }), finalize(() => this.userInterfaceService.activeMatProgress$.next(false)), exhaustMap(list => (list === null || list === void 0 ? void 0 : list.length) > 0 ? this.userInterfaceService.templatesListDialog$(list) : throwError(new Error('The template list is empty'))), switchMap(({ category, template }) => this.pbMiddlewaresService.chooseTemplate(category, template)), exhaustMap(({ category, template }) => this.userRestApi.getUserTemplateData$(category, template).pipe(tap(choosedTemplate => {
+            if (category !== 'latest') {
+                this.pbStorage.addTemplateToLatestUsed(choosedTemplate);
+            }
+        }))), catchError((error) => this.pbMiddlewaresService.catchError(error).pipe(switchMap(() => {
+            this.userInterfaceService.notify(error.message);
+            return EMPTY;
+        }))), take(1))
+            .subscribe((result) => {
+            if (result) {
+                this.emailObjectStore.setEmail(new PBEmail(result.templateData));
+            }
+            else {
+                this.userInterfaceService.notify('No template was chosen');
+            }
+        });
+    }
+    dropNewStructure(event) {
+        if (event.previousContainer === event.container) {
+            this.emailObjectStore.changeStructureOrder(event);
+        }
+        else {
+            this.pbMiddlewaresService
+                .addStructure(event)
+                .pipe(tap(newEvent => this.emailObjectStore.addStructure(newEvent)), take(1))
+                .subscribe();
+        }
+    }
+    getStructureStyles(structure) {
+        const { border, background, padding, margin, columnsWidth, fullWidth } = structure.options;
+        return Object.assign(Object.assign(Object.assign({ 
+            // direction,
+            width: fullWidth ? '100%' : `${this.emailObjectStore.Email.general.width.value}px`, backgroundRepeat: background.repeat, backgroundColor: background.color, backgroundSize: createWidthHeight(background.size), backgroundPosition: 'top center', gridTemplateColumns: columnsWidth.map(fr => `${fr}fr`).join(' ') }, createBorder(border)), createPadding(padding)), createMargin(margin));
+    }
+    getBackgroundImage(structure) {
+        const { background: { url } } = structure.options;
+        return this.sanitizer.bypassSecurityTrustStyle(url && `url(${url})`);
+    }
+}
+BuilderContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-builder-container',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<ng-container *ngIf=\"getStructures$ | async as structures\">\n  <div cdkDropList [cdkDropListData]=\"structures\"\n       cdkDropListConnectedTo=\"structures-drop-list\" id=\"structures-drop-list\"\n       (cdkDropListDropped)=\"dropNewStructure($event)\" fxFlex fxLayout=\"column\" fxLayoutAlign=\"start center\">\n    <pb-structure cdkDrag\n                  *ngFor=\"let structure of structures; trackBy: trackBy; let index = index\" [id]=\"structure.id\"\n                  [index]=\"index\" [ngClass]=\"structure.type\" [structure]=\"structure\"\n                  [ngStyle]=\"getStructureStyles(structure)\"\n                  [style.backgroundImage]=\"getBackgroundImage(structure)\"\n                  [cdkDragDisabled]=\"disableStructureDrag$(structure) | async\">\n      <button cdkDragHandle mat-icon-button class=\"move\" *ngIf=\"!(disableStructureDrag$(structure) | async)\"\n              i18n-matTooltip=\"structure|Move Structure\" matTooltip=\"Move Structure\">\n        <mat-icon i18n-aria-label=\"structure|Move Structure\" aria-label=\"Move structure\" inline>pan_tool</mat-icon>\n      </button>\n    </pb-structure>\n\n    <div class=\"empty-email mat-typography\" *ngIf=\"!structures.length\">\n      <ng-content></ng-content>\n      <div class=\"default-empty-email\" *ngIf=\"showTemplateList\">\n        <h1 i18n=\"templates|First header\">Choose template from list</h1>\n        <p i18n=\"templates|Description\">Or create one from scratch by dragging structures and blocks here!</p>\n        <button type=\"button\" color=\"primary\" [disabled]=\"activeMatProgress$ | async\"\n                (click)=\"openTemplateDialog($event)\" mat-flat-button i18n=\"templates|Choose a template button\">\n          Choose template\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
+                providers: [
+                // IpUserRestApiProvider
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush
+                // encapsulation: ViewEncapsulation.None
+                ,
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-structure>.cdk-drag-handle{position:absolute;cursor:move;border-radius:50% 50% 0 0;height:30px;width:30px;font-size:smaller;line-height:0;top:-30px;right:0;background-color:#ff4081;color:#fff;opacity:0}pb-structure.cdk-drag-preview>.cdk-drag-handle,pb-structure:hover>.cdk-drag-handle{opacity:.8}pb-structure.cdk-drag-preview>.cdk-drag-handle:hover,pb-structure:hover>.cdk-drag-handle:hover{opacity:1}pb-structure ::ng-deep .cdk-drag-placeholder{background-color:#3f51b5;opacity:.6;cursor:move;border-radius:0}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep :not(mat-icon){display:none}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep mat-icon{padding:5px;color:#fff}:host{background-color:#f2f2f2;overflow-x:hidden;overflow-y:auto;position:relative;height:100%}:host #structures-drop-list{height:-moz-fit-content;height:fit-content;max-width:100%;padding-bottom:3rem;will-change:box-shadow}:host #structures-drop-list .empty-email{display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1 1 100%;margin-top:10%}:host #structures-drop-list .empty-email .default-empty-email{text-align:center}:host #structures-drop-list.cdk-drop-list-dragging .empty-email{display:none}"]
+            },] }
+];
+BuilderContainerComponent.ctorParameters = () => [
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService },
+    { type: PbUserRestApiService },
+    { type: PbStorageService },
+    { type: PbUserMiddlewaresService },
+    { type: DomSanitizer },
+    { type: undefined, decorators: [{ type: Inject, args: [PB_CONFIG,] }] }
+];
+BuilderContainerComponent.propDecorators = {
+    onHostClick: [{ type: HostListener, args: ['click',] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class FontStylesComponent {
+    constructor(pbEmailObject, googleFonts, fallbackFonts) {
+        this.pbEmailObject = pbEmailObject;
+        this.fallbackFonts = fallbackFonts;
+        this.fontsMap = new Map();
+        this.stylesMap = new Map([
+            ['normal', $localize `:@@font_style_normal:Normal`],
+            ['italic', $localize `:@@font_style_italic:Italic`],
+            ['oblique', $localize `:@@font_style_oblique:Oblique`]
+        ]);
+        googleFonts.forEach(font => {
+            const [family, ...weights] = font.match(/[^\d:,]{2,}|\d{3}/g);
+            this.fontsMap.set(family.replace('+', ' '), [...new Set(weights.map(Number))]);
+        });
+    }
+    get fontWeightList() {
+        return this.isGoogleFont() ? this.fontsMap.get(this.font.family) : [100, 400, 500, 700, 900];
+    }
+    get fontFamilyList() {
+        return [...this.fontsMap.keys(), ...this.fallbackFonts];
+    }
+    get styles() {
+        return [...this.stylesMap.keys()];
+    }
+    markForCheck() {
+        this.pbEmailObject.markForCheck();
+    }
+    isGoogleFont() {
+        return this.fontsMap.has(this.font.family);
+    }
+    getStyleLabel(style) {
+        // tslint:disable-next-line:no-non-null-assertion
+        return this.stylesMap.get(style);
+    }
+    hasProperty(property) {
+        return this.font.hasOwnProperty(property);
+    }
+}
+FontStylesComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-font-styles',
+                template: `
+    <div class="group two">
+      <mat-form-field appearance="outline" *ngIf="hasProperty('family')">
+        <mat-label i18n="settings|Font Family">Family</mat-label>
+        <mat-select [(value)]="font.family" disableRipple (selectionChange)="markForCheck()">
+          <mat-option *ngFor="let name of fontFamilyList" [ngStyle]="{ fontFamily: name }" [value]="name">
+            {{ name }}
+          </mat-option>
+        </mat-select>
+        <mat-hint *ngIf="isGoogleFont()" i18n="settings|Partial support">Partial support.</mat-hint>
+        <mat-hint *ngIf="!isGoogleFont()" i18n="settings|Full support">Full support.</mat-hint>
+      </mat-form-field>
+      <mat-form-field appearance="outline" *ngIf="hasProperty('fallback')">
+        <mat-label i18n="settings|Font Fallback">Fallback</mat-label>
+        <mat-select [(value)]="font.fallback" [disabled]="!isGoogleFont()" disableRipple (selectionChange)="markForCheck()">
+          <mat-option *ngFor="let name of fallbackFonts" [ngStyle]="{ fontFamily: name }" [value]="name">
+            {{ name }}
+          </mat-option>
+        </mat-select>
+        <mat-hint i18n="settings|Full support">Full support.</mat-hint>
+      </mat-form-field>
+    </div>
+
+    <div class="group three">
+      <mat-form-field appearance="outline" *ngIf="hasProperty('size')">
+        <mat-label i18n="settings|Font Size">Size</mat-label>
+        <input matInput type="number" max="30" min="10" step="1" (input)="markForCheck()" [(ngModel)]="font.size" />
+      </mat-form-field>
+      <mat-form-field appearance="outline" *ngIf="hasProperty('weight')">
+        <mat-label i18n="settings|Font Weight">Weight</mat-label>
+        <mat-select placeholder="Weight" [(value)]="font.weight" disableRipple (selectionChange)="markForCheck()">
+          <mat-option *ngFor="let weight of fontWeightList" [value]="weight">
+            {{ weight }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline" style="min-width: 90px;">
+        <mat-label i18n="settings|Font Style">Style</mat-label>
+        <mat-select placeholder="Style" [(value)]="font.style" disableRipple (selectionChange)="markForCheck()">
+          <mat-option *ngFor="let style of styles" [value]="style" i18n>
+            {{ getStyleLabel(style) }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+FontStylesComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService },
+    { type: Array, decorators: [{ type: Inject, args: [PB_GOOGLE_FONTS,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [PB_FALLBACK_FONTS,] }] }
+];
+FontStylesComponent.propDecorators = {
+    font: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class PaddingComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+}
+PaddingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-padding',
+                template: `
+    <div class="group four">
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Padding Settings|Padding Top">Top</mat-label>
+        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.top" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Padding Settings|Padding Right">Right</mat-label>
+        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.right" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Padding Settings|Padding Bottom">Bottom</mat-label>
+        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.bottom" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Padding Settings|Padding Left">Left</mat-label>
+        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.left" />
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+PaddingComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+PaddingComponent.propDecorators = {
+    padding: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class LineHeightComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.label = $localize `:@@line_height_label:Line Height`;
+        this.units = ['%', 'px', 'none'];
+        this.unitsLabels = new Map([
+            ['%', $localize `:@@unit_percent:Percent`],
+            ['px', $localize `:@@unit_pixels:Pixels`],
+            ['none', $localize `:@@unit_none:None`]
+        ]);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    getUnitLabel(unit) {
+        return this.unitsLabels.get(unit);
+    }
+}
+LineHeightComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-line-height',
+                template: `
+    <div class="group">
+      <mat-form-field appearance="outline">
+        <mat-label>{{ label }}</mat-label>
+        <input
+          matInput
+          [(ngModel)]="lineHeight.value"
+          type="number"
+          step="1"
+          (input)="markForCheck()"
+          [disabled]="lineHeight.unit === 'none'"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Line Height Settings|Change Line Height Unit">Unit</mat-label>
+        <mat-select placeholder="Unit" [(value)]="lineHeight.unit" (selectionChange)="markForCheck()" disableRipple>
+          <mat-option *ngFor="let unit of units" [value]="unit" i18n>
+            {{ getUnitLabel(unit) }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+LineHeightComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+LineHeightComponent.propDecorators = {
+    lineHeight: [{ type: Input }],
+    label: [{ type: Input }],
+    units: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class WidthHeightComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.disabled = false;
+        this.units = new Map([
+            ['%', $localize `:@@unit_percent:Percent`],
+            ['px', $localize `:@@unit_pixels:Pixels`],
+            ['contain', $localize `:@@unit_contain:Contain`],
+            ['cover', $localize `:@@unit_cover:Cover`]
+        ]);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    getLabel() {
+        return this.label;
+    }
+    toggleChange({ checked }) {
+        this.model.auto = checked;
+        this.markForCheck();
+    }
+    getUnits() {
+        return this.model.units || ['%', 'px'];
+    }
+    disableValueField() {
+        return this.model.auto || ['%', 'px'].indexOf(this.model.unit) === -1;
+    }
+    showAutoSlider() {
+        return this.model.hasOwnProperty('auto');
+    }
+    getUnitLabel(unit) {
+        return this.units.get(unit);
+    }
+}
+WidthHeightComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-width-height',
+                template: `
+    <div class="group" [ngClass]="{ three: showAutoSlider() }">
+      <mat-form-field appearance="outline">
+        <mat-label>{{ getLabel() }}</mat-label>
+        <input
+          matInput
+          [(ngModel)]="model.value"
+          [disabled]="disableValueField() || disabled"
+          type="number"
+          [placeholder]="getLabel()"
+          (input)="markForCheck()"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Size Settings|Size Unit">Unit</mat-label>
+        <mat-select [disabled]="model.auto || disabled" [(value)]="model.unit" (selectionChange)="markForCheck()" disableRipple>
+          <mat-option *ngFor="let unit of getUnits()" [value]="unit" i18n>
+            {{ getUnitLabel(unit) }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-slide-toggle
+        style="margin-top: -20px;"
+        *ngIf="showAutoSlider()"
+        [checked]="model.auto"
+        (change)="toggleChange($event)"
+        [disabled]="disabled"
+        i18n="Size Settings|Size Auto"
+      >
+        Auto
+      </mat-slide-toggle>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+WidthHeightComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+WidthHeightComponent.propDecorators = {
+    model: [{ type: Input }],
+    label: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class BorderComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this._styleLabels = new Map([
+            ['solid', $localize `:@@border_style_solid:Solid`],
+            ['dotted', $localize `:@@border_style_dotted:Dotted`],
+            ['dashed', $localize `:@@border_style_dashed:Dashed`],
+            ['double', $localize `:@@border_style_double:Double`],
+            ['groove', $localize `:@@border_style_groove:Groove`]
+        ]);
+    }
+    get styleLabels() {
+        return [...this._styleLabels.keys()];
+    }
+    getStyleLabel(style) {
+        // tslint:disable-next-line:no-non-null-assertion
+        return this._styleLabels.get(style);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    isEven() {
+        return Object.keys(this.border).length % 2 === 0;
+    }
+    hasOwnProperty(property) {
+        return this.border.hasOwnProperty(property);
+    }
+}
+BorderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-border',
+                template: `
+    <div class="group" [class.three]="isEven()">
+      <mat-form-field appearance="outline" *ngIf="hasOwnProperty('width')">
+        <mat-label i18n="Border Settings|Change Border Width">Width</mat-label>
+        <input
+          matInput
+          [(ngModel)]="border.width"
+          type="number"
+          min="0"
+          step="1"
+          (input)="markForCheck()"
+          i18n-placeholder
+          placeholder="Border Settings|Change Border Width"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline" *ngIf="hasOwnProperty('radius')">
+        <mat-label i18n="Border Settings|Change Border Radius">Radius</mat-label>
+        <input
+          matInput
+          [(ngModel)]="border.radius"
+          type="number"
+          min="0"
+          step="1"
+          (input)="markForCheck()"
+          i18n-placeholder
+          placeholder="Border Settings|Change Border Radius"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline" *ngIf="hasOwnProperty('style')" style="min-width: 90px">
+        <mat-label i18n="Border Settings|Change Border Style">Style</mat-label>
+        <mat-select
+          placeholder="Style"
+          [disabled]="!border.width"
+          [(value)]="border.style"
+          (selectionChange)="markForCheck()"
+          disableRipple
+        >
+          <mat-option *ngFor="let style of styleLabels" [value]="style">
+            {{ getStyleLabel(style) }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <pb-color [options]="border" [disabled]="!border.width" *ngIf="hasOwnProperty('color')" key="color"></pb-color>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+    `]
+            },] }
+];
+BorderComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+BorderComponent.propDecorators = {
+    border: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+// import { PbEmailBuilderService } from '../pb-email-builder.service';
+// import { parseColor } from '../utils';
+class ColorComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.disabled = false;
+        this.key = 'backgroundColor';
+        this.transparent = false;
+        this.showColorPicker = false;
+    }
+    get currentColorModel() {
+        return this.options[this.key];
+    }
+    set currentColorModel(hex) {
+        this.options[this.key] = hex;
+    }
+    get currentColor() {
+        return this.transparent ? this.oldValue : this.currentColorModel;
+    }
+    set currentColor(hex) {
+        this.currentColorModel = hex;
+    }
+    onHostMouseLeave() {
+        this.showColorPicker = false;
+    }
+    changeColor(event) {
+        this.currentColor = event.color.hex;
+        this.emailObject.markForCheck();
+    }
+    makeTransparentColor() {
+        this.showColorPicker = false;
+        if (this.transparent) {
+            this.oldValue = this.currentColorModel;
+            this.currentColor = 'transparent';
+        }
+        else {
+            this.currentColor = this.oldValue;
+        }
+        this.emailObject.markForCheck();
+    }
+    ngOnInit() {
+        if (this.currentColor === 'transparent') {
+            this.transparent = true;
+            this.oldValue = '#ffffff';
+        }
+        // this.changeContrastColor();
+    }
+}
+ColorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-color',
+                template: `
+    <div class="group" *ngIf="showTransparent">
+      <mat-slide-toggle
+        [disabled]="disabled"
+        [(ngModel)]="transparent"
+        (change)="makeTransparentColor()"
+        i18n="Color settings|Make color transparent"
+      >
+        Transparent
+      </mat-slide-toggle>
+    </div>
+    <div class="group two">
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Color settings|Change color">Color</mat-label>
+        <input matInput [disabled]="transparent || disabled" (focus)="showColorPicker = false" [(ngModel)]="currentColor" type="text" />
+      </mat-form-field>
+      <div class="choose-color" [class.transparent]="transparent || disabled">
+        <div class="current-color" (mouseover)="showColorPicker = !transparent" [style.backgroundColor]="currentColor"></div>
+        <color-chrome
+          [disableAlpha]="true"
+          *ngIf="showColorPicker"
+          (onChangeComplete)="changeColor($event)"
+          [color]="currentColor"
+        ></color-chrome>
+      </div>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+
+      .choose-color {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+
+      .current-color {
+        width: 100%;
+        height: 48px;
+        border-radius: 5px;
+        margin: 0.25em 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        transition: background-color 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+      }
+
+      .choose-color.transparent .current-color {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      color-chrome {
+        position: absolute;
+        top: calc(100% - 1em);
+        right: 0;
+        z-index: 9;
+      }
+    `]
+            },] }
+];
+ColorComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+ColorComponent.propDecorators = {
+    options: [{ type: Input }],
+    showTransparent: [{ type: Input }],
+    disabled: [{ type: Input }],
+    key: [{ type: Input }],
+    onHostMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class LinkComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.targetLabels = new Map([
+            ['_blank', $localize `:@@link_target_blank:Blank`],
+            ['_self', $localize `:@@link_target_self:Self`],
+            ['_parent', $localize `:@@link_target_parent:Parent`],
+            ['_top', $localize `:@@link_target_top:Top`]
+        ]);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    getTargets() {
+        return ['_blank', '_self', '_parent', '_top'];
+    }
+    getTargetLabel(target) {
+        return this.targetLabels.get(target);
+    }
+}
+LinkComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-link',
+                template: `
+    <div class="group f-large">
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Link Settings|Link">Link</mat-label>
+        <input matInput [(ngModel)]="link.href" type="url" placeholder="Link" (blur)="markForCheck()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Link Settings|Target">Target</mat-label>
+        <mat-select
+          placeholder="Target"
+          i18n-placeholder="Link Settings|Target"
+          [(value)]="link.target"
+          disableRipple
+          (selectionChange)="markForCheck()"
+        >
+          <mat-option *ngFor="let target of getTargets()" [value]="target">
+            {{ getTargetLabel(target) }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+LinkComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+LinkComponent.propDecorators = {
+    link: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class AlignComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.mode = 'horizontal';
+        this.labels = new Map([
+            ['left', $localize `:@@horizontal_align_left:Left`],
+            ['center', $localize `:@@horizontal_align_center:Center`],
+            ['right', $localize `:@@horizontal_align_right:Right`],
+            ['top', $localize `:@@vertical_align_top:Top`],
+            ['middle', $localize `:@@vertical_align_middle:Middle`],
+            ['bottom', $localize `:@@vertical_align_bottom:Bottom`]
+        ]);
+    }
+    get currentModel() {
+        return this.model.align || this.model.verticalAlign;
+    }
+    set currentModel(value) {
+        if (this.model.align) {
+            this.model.align = value;
+        }
+        else {
+            this.model.verticalAlign = value;
+        }
+        this.emailObject.markForCheck();
+    }
+    getLabel(key) {
+        return this.labels.get(key);
+    }
+    getPositions() {
+        if (this.mode === 'vertical') {
+            return ['top', 'middle', 'bottom'];
+        }
+        return ['left', 'center', 'right'];
+    }
+}
+AlignComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-align',
+                template: `
+    <mat-form-field appearance="outline">
+      <mat-label [ngSwitch]="mode">
+        <ng-container *ngSwitchCase="'vertical'" i18n="Align Settings|Vertical Align">Vertical Align</ng-container>
+        <ng-container *ngSwitchDefault i18n="Align Settings|Align">Align</ng-container>
+      </mat-label>
+      <mat-select [(ngModel)]="currentModel" disableRipple [disabled]="disabled">
+        <mat-option *ngFor="let position of getPositions()" [value]="position">
+          {{ getLabel(position) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+    `]
+            },] }
+];
+AlignComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+AlignComponent.propDecorators = {
+    model: [{ type: Input }],
+    mode: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class DirectionComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+        this.dirLabels = new Map([
+            ['ltr', $localize `:@@direction_ltr:Left to right`],
+            ['rtl', $localize `:@@direction_rtl:Right to left`]
+        ]);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    getDirections() {
+        return ['ltr', 'rtl'];
+    }
+    getDirectionLabel(dir) {
+        return this.dirLabels.get(dir);
+    }
+}
+DirectionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-direction',
+                template: `
+    <mat-form-field appearance="outline">
+      <mat-label i18n="settings|Direction">Direction</mat-label>
+      <mat-select
+        i18n-placeholder="settings|Direction"
+        placeholder="Direction"
+        [(value)]="model.direction"
+        (selectionChange)="markForCheck()"
+        disableRipple
+      >
+        <mat-option *ngFor="let dir of getDirections()" [value]="dir">
+          {{ getDirectionLabel(dir) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+    `]
+            },] }
+];
+DirectionComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+DirectionComponent.propDecorators = {
+    model: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class BackRepatComponent {
+    constructor() {
+        this.disabled = false;
+        this.repeatLabels = new Map([
+            ['no-repeat', $localize `:@@no_repeat:No`],
+            ['repeat', $localize `:@@repeat:Repeat`],
+            ['repeat-x', $localize `:@@repeat_x:X`],
+            ['repeat-y', $localize `:@@repeat_y:Y`],
+            ['round', $localize `:@@repeat_round:Round`],
+            ['space', $localize `:@@repeat_space:Space`]
+        ]);
+    }
+    getRepeats() {
+        return ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
+    }
+    getRepeatLabel(repeat) {
+        return this.repeatLabels.get(repeat);
+    }
+}
+BackRepatComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-back-repeat',
+                template: `
+    <mat-form-field appearance="outline">
+      <mat-label i18n="settings|Background Repeat">Repeat</mat-label>
+      <mat-select [(value)]="model.repeat" [disabled]="disabled" disableRipple>
+        <mat-option *ngFor="let repeat of getRepeats()" [value]="repeat">
+          {{ getRepeatLabel(repeat) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+    `]
+            },] }
+];
+BackRepatComponent.propDecorators = {
+    model: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+const devicesMap = new Map([
+    ['desktop', '1 1 100%'],
+    ['smartphone', '1 1 360px'],
+    ['tablet', '1 1 768px']
+]);
+class PreviewTemplateComponent {
+    constructor(middlewares, sanitizer) {
+        this.middlewares = middlewares;
+        this.sanitizer = sanitizer;
+        this.device = 'desktop';
+    }
+    changeDevice(button) {
+        return this.middlewares
+            .togglePreviewDevice(button)
+            .pipe(take(1))
+            .subscribe(device => {
+            this.device = device;
+        });
+    }
+    getFlexWidth() {
+        return devicesMap.get(this.device);
+    }
+    ngOnInit() {
+        this.src = URL.createObjectURL(new Blob([this.template], { type: 'text/html' }));
+        this.templateSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
+    }
+    ngOnDestroy() {
+        if (this.src) {
+            URL.revokeObjectURL(this.src);
+        }
+    }
+}
+PreviewTemplateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-preview-template',
+                template: `
+    <iframe [src]="templateSrc" [fxFlex]="getFlexWidth()"></iframe>
+    <mat-button-toggle-group value="desktop" (change)="changeDevice($event)" vertical>
+      <mat-button-toggle value="desktop" matTooltip="Desktop / 100%" matTooltipPosition="left">
+        <mat-icon>desktop_windows</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="tablet" matTooltip="Tablet / 768px" matTooltipPosition="left">
+        <mat-icon>tablet</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="smartphone" matTooltip="Smartphone / 360px" matTooltipPosition="left">
+        <mat-icon>smartphone</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      iframe {
+        border: 0;
+        will-change: width;
+        transition: all 500ms ease-in-out;
+      }
+
+      /* iframe a[href] {
+        pointer-events: none;
+      } */
+
+      /* iframe.active {
+        opacity: 1;
+      } */
+
+      mat-button-toggle-group {
+        position: absolute;
+        right: 0;
+        background: white;
+      }
+    `]
+            },] }
+];
+PreviewTemplateComponent.ctorParameters = () => [
+    { type: PbUserMiddlewaresService },
+    { type: DomSanitizer }
+];
+PreviewTemplateComponent.propDecorators = {
+    template: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class BlockComponent {
+    constructor(pbMiddlewaresService, userInterfaceService, emailObjectStore, chRef) {
+        this.pbMiddlewaresService = pbMiddlewaresService;
+        this.userInterfaceService = userInterfaceService;
+        this.emailObjectStore = emailObjectStore;
+        this.chRef = chRef;
+        this.isActive = false;
+        this.componentIsDestroyed$ = new Subject();
+    }
+    onHostClick(event) {
+        event.stopImmediatePropagation();
+        this.editBlock();
+    }
+    get isBlockActive() {
+        return this.isActive;
+    }
+    removeBlock() {
+        this.pbMiddlewaresService
+            .removeBlock(this.index, this.column, this.block)
+            .pipe(exhaustMap(() => this.userInterfaceService.confirmDialog$()), filter(removeAllowed => removeAllowed), take(1))
+            .subscribe(() => {
+            this.emailObjectStore.removeBlock(this.index, this.column);
+        });
+    }
+    duplicateBlock() {
+        this.pbMiddlewaresService
+            .duplicateBlock(this.index, this.column, this.block)
+            .pipe(map(data => this.emailObjectStore.duplicateBlock(data.index, data.column, data.block)), take(1))
+            .subscribe(() => {
+            // this.chRef.markForCheck();
+        });
+    }
+    editBlock() {
+        this.pbMiddlewaresService
+            .editBlock(this.block)
+            .pipe(take(1))
+            .subscribe(block => {
+            this.userInterfaceService.editBlock(block);
+        });
+    }
+    ngOnInit() {
+        this.userInterfaceService.currentEditingBlock$
+            .pipe(map(currentEditingBlock => currentEditingBlock === this.block), takeUntil(this.componentIsDestroyed$))
+            .subscribe(isActive => {
+            this.isActive = isActive;
+        });
+    }
+    ngDoCheck() {
+        if (this.isActive) {
+            this.chRef.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.componentIsDestroyed$.next('');
+        this.componentIsDestroyed$.complete();
+    }
+}
+BlockComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-block',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<ng-content select=\".move\"></ng-content>\n<div class=\"tools\" fxLayout fxLayoutGap=\"0.25rem\">\n  <button mat-icon-button (click)=\"duplicateBlock()\" i18n-matTooltip=\"block|Duplicate Block\"\n    matTooltip=\"Duplicate Block\">\n    <mat-icon i18n-aria-label=\"block|Duplicate Block\" aria-label=\"Duplicate block\" inline>file_copy</mat-icon>\n  </button>\n  <button mat-icon-button (click)=\"removeBlock()\" i18n-matTooltip=\"block|Remove Block\" class=\"delete\"\n    matTooltip=\"Remove Block\">\n    <mat-icon i18n-aria-label=\"block|Remove Block\" aria-label=\"Delete block\" inline>delete_forever</mat-icon>\n  </button>\n</div>\n<ng-content *pbDynamicComponent=\"block\"></ng-content>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;position:relative}:host.active:not(.cdk-drag-preview)>.tools{opacity:1;display:flex!important}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview{z-index:3;box-shadow:0 0 0 2px #3f51b5}:host:hover:not(.active){box-shadow:0 0 0 2px rgba(63,81,181,.5)}:host>.tools{direction:ltr;opacity:0;z-index:4;position:absolute;max-width:100%;bottom:-25px;right:0;display:none!important;transition:all .5s ease-in-out}:host>.tools>button{background:#3f51b5;border-radius:3px;color:#fff;line-height:0;width:25px;height:25px}:host>.tools>button mat-icon{font-size:14px;margin-top:-3px}:host>.tools ::ng-deep+*>*{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]
+            },] }
+];
+BlockComponent.ctorParameters = () => [
+    { type: PbUserMiddlewaresService },
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService },
+    { type: ChangeDetectorRef }
+];
+BlockComponent.propDecorators = {
+    block: [{ type: Input }],
+    column: [{ type: Input }],
+    index: [{ type: Input }],
+    onHostClick: [{ type: HostListener, args: ['click', ['$event'],] }],
+    isBlockActive: [{ type: HostBinding, args: ['class.active',] }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class ImageUploadComponent {
+    constructor(imageUpload, emailObject) {
+        this.imageUpload = imageUpload;
+        this.emailObject = emailObject;
+        this.key = 'src';
+        this.browsing = new Subject();
+    }
+    get source() {
+        return this.block[this.key];
+    }
+    set source(value) {
+        this.block[this.key] = value;
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    browse() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.browsing.next(true);
+            try {
+                const path = yield this.imageUpload.browse$().toPromise();
+                if (path) {
+                    this.source = path;
+                    this.emailObject.markForCheck();
+                }
+            }
+            finally {
+                this.browsing.next(false);
+            }
+        });
+    }
+    ngOnInit() {
+        this.source = this.block.src || this.block.url;
+    }
+}
+ImageUploadComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-image-upload',
+                template: `
+    <div fxLayout fxLayoutAlign="space-between center">
+      <div class="image-info" [fxFlex]="source ? '30%' : '60%'" fxLayout fxLayoutGap="0.5em" fxLayoutAlign="center center">
+        <div *ngIf="source" class="chose-image">
+          <img [src]="source" alt="image source" />
+        </div>
+        <span *ngIf="!source" style="width: 100%;" i18n="Upload Image Settings|Upload an image"> Upload an image </span>
+      </div>
+      <button
+        type="button"
+        (click)="browse()"
+        [disabled]="browsing | async"
+        color="primary"
+        mat-stroked-button
+        i18n="Upload Image Settings|Browse"
+      >
+        Browse
+      </button>
+    </div>
+    <mat-form-field appearance="outline" style="width: 100%">
+      <mat-label i18n="Upload Image Settings|Image Source">Image Source</mat-label>
+      <input matInput [(ngModel)]="source" type="url" (input)="markForCheck()" />
+    </mat-form-field>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+      }
+
+      .chose-image {
+        width: 100%;
+        max-height: 60px;
+        overflow: hidden;
+        border-radius: 3px;
+        line-height: 0;
+      }
+
+      .chose-image img {
+        width: 100%;
+        height: 60px;
+        object-fit: cover;
+        object-position: center;
+      }
+
+      .size {
+        font-size: 80%;
+        color: #ccc;
+      }
+
+      mat-form-field {
+        margin-top: 0.5rem;
+      }
+    `]
+            },] }
+];
+ImageUploadComponent.ctorParameters = () => [
+    { type: PbUserImageUploaderService },
+    { type: PbEmailObjectStoreService }
+];
+ImageUploadComponent.propDecorators = {
+    block: [{ type: Input }],
+    key: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class BlockSettingsComponent {
+    constructor(internalService, emailObject, networks) {
+        this.internalService = internalService;
+        this.emailObject = emailObject;
+        this.networks = networks;
+        this.block$ = this.internalService.currentEditingBlock$;
+    }
+    hasProperty(options, property) {
+        return options.hasOwnProperty(property);
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+    socialNetworks(block) {
+        return this.networks.filter(link => !block.networks.find(({ name }) => name === link)).sort();
+    }
+    addSocialNetwork({ value, source }, block) {
+        block.networks.push({ name: value, href: '', label: '' });
+        source.value = '';
+        this.markForCheck();
+    }
+    removeSocialNetwork(network, block) {
+        block.networks = block.networks.filter(n => n !== network);
+        this.markForCheck();
+    }
+    getSocialIcon(network) {
+        return getAssetByPath(`${network}.png`);
+    }
+}
+BlockSettingsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-block-settings',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<ng-container *ngIf=\"block$ | async as currentBlock\">\n  <mat-accordion>\n    <mat-expansion-panel expanded *ngIf=\"hasProperty(currentBlock.options, 'font')\">\n      <mat-expansion-panel-header i18n=\"settings|Font\">\n        Font\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]=\"currentBlock.options\" key=\"color\"></pb-color>\n        <pb-font-styles [font]=\"currentBlock.options.font\"></pb-font-styles>\n        <pb-line-height *ngIf=\"currentBlock.type !== 'social'\" [lineHeight]=\"currentBlock.options.lineHeight\">\n        </pb-line-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf=\"currentBlock.type === 'image'\">\n      <mat-expansion-panel expanded>\n        <mat-expansion-panel-header i18n=\"settings|Image\">\n          Image\n        </mat-expansion-panel-header>\n        <pb-image-upload [block]=\"currentBlock\"></pb-image-upload>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Image Attributes\">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class=\"group f-large\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label i18n=\"settings|Image Alt\">Alt</mat-label>\n              <input matInput [(ngModel)]=\"currentBlock.options.title\" type=\"text\" i18n-placeholder\n                placeholder=\"settings|Image Alt\" (input)=\"markForCheck()\" />\n            </mat-form-field>\n            <pb-align [model]=\"currentBlock.options\"></pb-align>\n          </div>\n          <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentBlock.type === 'button'\">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Button Text\">\n          Button Text\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n            <mat-label i18n=\"settings|Button Text\">Button Text</mat-label>\n            <input matInput [(ngModel)]=\"currentBlock.innerText\" type=\"text\" i18n-placeholder\n              placeholder=\"settings|Button Text\" (input)=\"markForCheck()\" />\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Background\">\n          Background\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <pb-color [options]=\"currentBlock.options\"></pb-color>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Button Attributes\">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class=\"group two\" style=\"padding-bottom: 0\">\n            <pb-align [model]=\"currentBlock.options\" [disabled]=\"currentBlock.options.fullWidth\"></pb-align>\n            <mat-slide-toggle style=\"margin-top: -24px\" [(ngModel)]=\"currentBlock.options.fullWidth\"\n              (change)=\"markForCheck()\">\n              <ng-container i18n=\"settings|Button Full Width\">Full Width</ng-container>\n            </mat-slide-toggle>\n          </div>\n          <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n          <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel [expanded]=\"currentBlock.type === 'spacer'\"\n      *ngIf=\"hasProperty(currentBlock.options, 'width') || hasProperty(currentBlock.options, 'height')\">\n      <mat-expansion-panel-header i18n=\"settings|Sizes\">\n        Sizes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'width')\" [model]=\"currentBlock.options.width\"\n          label=\"width\"></pb-width-height>\n        <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'height')\" [model]=\"currentBlock.options.height\"\n          label=\"height\"></pb-width-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'background')\">\n      <mat-expansion-panel-header i18n=\"settings|Background\">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]=\"currentBlock.options.background\"></pb-color>\n      </ng-template>\n      backgroundColor\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"currentBlock.type === 'divider'\"\n      *ngIf=\"hasProperty(currentBlock.options, 'border')\">\n      <mat-expansion-panel-header>\n        <ng-container i18n=\"settings|Divider Styles\" *ngIf=\"currentBlock.type === 'divider'\">Styles</ng-container>\n        <ng-container i18n=\"settings|Border\" *ngIf=\"currentBlock.type !== 'divider'\">Border</ng-container>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-border [border]=\"currentBlock.options.border\"></pb-border>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf=\"currentBlock.type === 'social'\">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Icons\">\n          Icons\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n            <mat-label i18n=\"settings|Add new Network\">Add new Network</mat-label>\n            <mat-select (selectionChange)=\"addSocialNetwork($event, currentBlock)\" [disabled]=\"!socialNetworks.length\">\n              <mat-option style=\"text-transform: capitalize\" *ngFor=\"let link of socialNetworks(currentBlock)\"\n                [value]=\"link\">\n                {{ link }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel class=\"networks-list\" *ngFor=\"let network of currentBlock.networks\">\n        <mat-expansion-panel-header style=\"text-transform: capitalize\">\n          <img [class]=\"network.name\" [src]=\"getSocialIcon(network.name)\" [alt]=\"network.name\" />\n          {{ network.name }}\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class=\"networks-list-item\">\n            <div class=\"item-info\">\n              <mat-form-field matLine appearance=\"outline\">\n                <mat-label i18n=\"settings|Social Network Label\">Label</mat-label>\n                <input matInput autocomplete=\"off\" [(ngModel)]=\"network.label\"\n                  i18n-placeholder=\"settings|Social Network Label\" placeholder=\"Label\" type=\"text\"\n                  (input)=\"markForCheck()\" />\n              </mat-form-field>\n              <button mat-stroked-button color=\"warn\" (click)=\"removeSocialNetwork(network, currentBlock)\">\n                <mat-icon>delete_forever</mat-icon>\n              </button>\n            </div>\n            <mat-form-field matLine appearance=\"outline\">\n              <mat-label style=\"text-transform: capitalize\">\n                {{ network.name }} <ng-container i18n=\"settings|Social Network Link\">Link</ng-container>\n              </mat-label>\n              <input autocomplete=\"off\" matInput [(ngModel)]=\"network.href\" type=\"url\" (input)=\"markForCheck()\" />\n            </mat-form-field>\n          </div>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n=\"settings|Social Styles\">\n          Styles\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class=\"group two\" style=\"padding-bottom: 0\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label i18n=\"settings|Social Model\">Mode</mat-label>\n              <mat-select (selectionChange)=\"markForCheck()\" i18n-placeholder=\"settings|Social Model\" placeholder=\"Mode\"\n                [(value)]=\"currentBlock.options.mode\" disableRipple>\n                <mat-option *ngFor=\"let mode of ['horizontal', 'vertical']\" [value]=\"mode\">\n                  {{ mode }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <pb-align [model]=\"currentBlock.options\"></pb-align>\n          </div>\n          <pb-line-height [units]=\"['px']\" [lineHeight]=\"currentBlock.options.iconSize\" label=\"Icon Size\">\n          </pb-line-height>\n          <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'padding')\">\n      <mat-expansion-panel-header i18n=\"settings|Padding\">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]=\"currentBlock.options.padding\"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px}.networks-list mat-expansion-panel-header img.facebook{background-color:#3a5898}.networks-list mat-expansion-panel-header img.twitter{background-color:#d95988}.networks-list mat-expansion-panel-header img.github{background-color:#000}.networks-list mat-expansion-panel-header img.instagram{background-color:#3f729b}.networks-list mat-expansion-panel-header img.web{background-color:#4bade9}.networks-list mat-expansion-panel-header img.snapchat{background-color:#fffa54}.networks-list mat-expansion-panel-header img.youtube{background-color:#ea3323}.networks-list mat-expansion-panel-header img.vimeo{background-color:#53b4e7}.networks-list mat-expansion-panel-header img.medium{background-color:#000}.networks-list mat-expansion-panel-header img.soundcloud{background-color:#ef7f31}.networks-list mat-expansion-panel-header img.dribbble{background-color:#d95988}.networks-list mat-expansion-panel-header img.pinterest{background-color:#bd071c}.networks-list mat-expansion-panel-header img.linkedin{background-color:#0077b5}.networks-list mat-expansion-panel-header img.tumblr{background-color:#334356}.networks-list mat-expansion-panel-header img.xing{background-color:#296365}.networks-list mat-expansion-panel-header img.tiktok{background-color:#000}.networks-list-item{width:100%;display:grid;row-gap:.5rem}.networks-list-item .item-info{display:grid;grid-template-columns:2fr 1fr;-moz-column-gap:.5rem;column-gap:.5rem}.networks-list-item .item-info button{align-self:baseline;margin:.25rem 0;height:50px}.networks-list-item .item-info ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}"]
+            },] }
+];
+BlockSettingsComponent.ctorParameters = () => [
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService },
+    { type: Array, decorators: [{ type: Inject, args: [PB_SOCIAL_NETWORKS,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class StructureSettingsComponent {
+    constructor(pbInternalService, emailObject) {
+        this.pbInternalService = pbInternalService;
+        this.emailObject = emailObject;
+        this.currentStructure$ = this.pbInternalService.currentEditingStructure$;
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+}
+StructureSettingsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-structure-settings',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<mat-accordion *ngIf=\"currentStructure$ | async as structure\">\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header i18n=\"Structure settings|Change structure Background\">\n      Background\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-color [options]=\"structure.options.background\" key=\"color\"></pb-color>\n      <pb-image-upload [block]=\"structure.options.background\" key=\"url\" style=\"margin-bottom: 1em\"></pb-image-upload>\n      <pb-back-repeat [disabled]=\"!structure.options.background.url\"\n                      [model]=\"structure.options.background\"></pb-back-repeat>\n      <pb-width-height [disabled]=\"!structure.options.background.url\" [model]=\"structure.options.background.size\"\n                       label=\"size\">\n      </pb-width-height>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n=\"Structure settings|Change structure border\">\n      Border\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-border [border]=\"structure.options.border\"></pb-border>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n=\"Structure settings|Change structure padding\">\n      Padding\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-padding [padding]=\"structure.options.padding\"></pb-padding>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n=\"Structure settings|Change structure margin\">\n      Margin\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-margin [margin]=\"structure.options.margin\"></pb-margin>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n=\"Structure settings|Change structure layout\">\n      Layout\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-gaps [gaps]=\"structure.options.gaps\"></pb-gaps>\n      <mat-slide-toggle [disabled]=\"structure.type === 'cols_1'\" style=\"margin-top: -24px;\"\n                        [(ngModel)]=\"structure.options.disableResponsive\" i18n=\"Structure settings|Disable Responsive\"\n                        (change)=\"markForCheck()\">\n        Disable Responsive\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"structure.options.fullWidth\" i18n=\"Structure settings|Full Width\"\n        (change)=\"markForCheck()\">\n        Make section full width\n      </mat-slide-toggle>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel *ngFor=\"let column of structure.options.columns; let key = index\">\n    <mat-expansion-panel-header>\n      <ng-container i18n=\"Structure settings|Structure Column\">Column</ng-container>\n      {{ key + 1 }}\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <h3 class=\"divider\">\n        <span i18n=\"Structure settings|Column Background\">Column Background</span>\n      </h3>\n      <pb-color [options]=\"column.background\" [showTransparent]=\"true\" key=\"color\"></pb-color>\n      <h3 class=\"divider\">\n        <span i18n=\"Structure settings|Column Border\">Column Border</span>\n      </h3>\n      <pb-border [border]=\"column.border\"></pb-border>\n      <h3 class=\"divider\">\n        <span i18n=\"Structure settings|Column Vertical Align\">Vertical Align</span>\n      </h3>\n      <pb-align [model]=\"column\" mode=\"vertical\"></pb-align>\n    </ng-template>\n  </mat-expansion-panel>\n</mat-accordion>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                styles: [":host{display:block}"]
+            },] }
+];
+StructureSettingsComponent.ctorParameters = () => [
+    { type: PbUserInterfaceService },
+    { type: PbEmailObjectStoreService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class GeneralSettingsComponent {
+    constructor(pbEmailObject) {
+        this.pbEmailObject = pbEmailObject;
+        this.generalOptions$ = this.pbEmailObject.generalEmailOptionsAsObservable$;
+    }
+}
+GeneralSettingsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-general-settings',
+                template: "<!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  -->\n\n<ng-container *ngIf=\"generalOptions$ | async as general\">\n  <div class=\"mat-expansion-panel-body\" style=\"margin: 24px 0\">\n    <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n      <mat-label i18n=\"General Settings|Email Name\">Email Name</mat-label>\n      <input matInput [(ngModel)]=\"general.name\">\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n      <mat-label i18n=\"General Settings|Email Preview Text\">Preview Text</mat-label>\n      <textarea matInput [(ngModel)]=\"general.previewText\"></textarea>\n      <mat-hint i18n=\"General Settings|Email Preview Text Hint\">\n        This text is displayed in the inbox of the recipient.\n      </mat-hint>\n    </mat-form-field>\n  </div>\n\n  <mat-accordion>\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n=\"General Settings|Email Background\">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]=\"general.background\" key=\"color\"></pb-color>\n        <!-- <pb-image-upload [block]=\"structure.options.background\" key=\"url\" style=\"margin-bottom: 1em\"></pb-image-upload>\n        <pb-back-repeat [disabled]=\"!structure.options.background.url\" [model]=\"structure.options.background\">\n        </pb-back-repeat>\n        <pb-width-height [model]=\"structure.options.background.size\" label=\"Background Size\"></pb-width-height> -->\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n=\"General Settings|Email Attributes\">\n        Attributes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height [model]=\"general.width\" label=\"width\"></pb-width-height>\n        <pb-direction [model]=\"general\"></pb-direction>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n=\"General Settings|Email Padding\">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]=\"general.padding\"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                styles: [""]
+            },] }
+];
+GeneralSettingsComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class MarginComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+}
+MarginComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-margin',
+                template: `
+    <div class="group">
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Margin settings|Margin Top">Margin Top</mat-label>
+        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.top" (input)="markForCheck()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Margin settings|Margin Bottom">Margin Bottom</mat-label>
+        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.bottom" (input)="markForCheck()" />
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+MarginComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+MarginComponent.propDecorators = {
+    margin: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class GapsComponent {
+    constructor(emailObject) {
+        this.emailObject = emailObject;
+    }
+    markForCheck() {
+        this.emailObject.markForCheck();
+    }
+}
+GapsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pb-gaps',
+                template: `
+    <div class="group">
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Gaps settings|Vertical Gaps">Vertical Gaps</mat-label>
+        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[0]" (input)="markForCheck()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label i18n="Gaps settings|Horizontal Gaps">Horizontal Gaps</mat-label>
+        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[1]" (input)="markForCheck()" />
+      </mat-form-field>
+    </div>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `]
+            },] }
+];
+GapsComponent.ctorParameters = () => [
+    { type: PbEmailObjectStoreService }
+];
+GapsComponent.propDecorators = {
+    gaps: [{ type: Input }]
+};
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @ignore
+ */
+const NOT_ALLOWED = 'This feature is disabled in free version.';
+/**
+ * @internal
+ */
+class FreeUsersMiddleware extends PbUserMiddlewaresService {
+    constructor() {
+        super();
+        // tslint:disable-next-line: no-console
+        console.warn('You use the Regular License of Angular Email Builder, some limitations are applied. More info on https://wlocalhost.org');
+    }
+    chooseTemplate() {
+        throw new Error(NOT_ALLOWED);
+    }
+    exportFile(type) {
+        return iif(() => type === 'json', deferOf(type), throwError(new Error(NOT_ALLOWED)));
+    }
+    importFile(file) {
+        return iif(() => file.type === 'application/json', deferOf(file), throwError(new Error(NOT_ALLOWED)));
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ * No limitations are applied for Paid users
+ */
+class PaidUsersMiddleware extends PbUserMiddlewaresService {
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+class IpInterceptorInterceptor {
+    constructor(userConfig, userInterface) {
+        this.userConfig = userConfig;
+        this.userInterface = userInterface;
+    }
+    intercept(request, next) {
+        if (request.url.startsWith('https://ngb-api.wlocalhost.org')) {
+            const notify = this.userInterface.notify('Loading, please wait ...', null, null);
+            const { xApiKey } = Object.assign(Object.assign({}, PB_DEFAULT_CONFIG), this.userConfig);
+            return next
+                .handle(request.clone({
+                setHeaders: {
+                    'Content-Type': 'application/json',
+                    'X-Api-Key': xApiKey
+                },
+                responseType: 'json'
+            }))
+                .pipe(tap((res) => {
+                if (res.type === HttpEventType.Response) {
+                    notify.dismiss();
+                }
+            }));
+        }
+        else {
+            return next.handle(request);
+        }
+    }
+}
+IpInterceptorInterceptor.ɵprov = i0.ɵɵdefineInjectable({ factory: function IpInterceptorInterceptor_Factory() { return new IpInterceptorInterceptor(i0.ɵɵinject(PB_CONFIG), i0.ɵɵinject(PbUserInterfaceService)); }, token: IpInterceptorInterceptor, providedIn: "root" });
+IpInterceptorInterceptor.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+IpInterceptorInterceptor.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [PB_CONFIG,] }] },
+    { type: PbUserInterfaceService }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ */
+const LIBRARY_IS_PRO = new InjectionToken('Library environment', {
+    providedIn: 'any',
+    factory: () => {
+        const { xApiKey } = inject(PB_CONFIG);
+        return !(!xApiKey || xApiKey.length < 40 || xApiKey === PB_DEFAULT_CONFIG.xApiKey);
+    }
+});
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ * The free User Rest API service for Regular license.
+ * No differences between other licenses for now, but might be in the future.
+ */
+class FreeUsersRestApi extends PbUserRestApiService {
+    constructor(http) {
+        super(http);
+    }
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ */
+class FreeUsersPbStorage extends PbStorageService {
+}
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+/**
+ * @internal
+ * @param http
+ */
+function createCustomRestApiService(http) {
+    return new FreeUsersRestApi(http);
+}
+/**
+ * @internal
+ * @param libraryIsProEnv
+ */
+function createUserMiddlewareService(libraryIsProEnv) {
+    if (!libraryIsProEnv) {
+        return new FreeUsersMiddleware();
+    }
+    else {
+        return new PaidUsersMiddleware();
+    }
+}
+/**
+ * @internal
+ * @param templateStorage
+ */
+function createUsersIpStorage(templateStorage) {
+    return new FreeUsersPbStorage(templateStorage);
+}
+/**
+ * @internal
+ * @param libraryIsProEnv
+ * @param matBottomSheet
+ * @param matDialog
+ * @param userMiddleware
+ * @param userRestApi
+ */
+function createUserUploaderService(libraryIsProEnv, matBottomSheet, matDialog, userMiddleware, userRestApi) {
+    if (!libraryIsProEnv) {
+        return new ImageUploader(matBottomSheet, userMiddleware);
+    }
+    else {
+        return new PaidUsersImageUploaderServiceService(matDialog, userMiddleware, userRestApi);
+    }
+}
+const ɵ0 = {
+    bounds: 'pb-builder-container',
+    theme: 'bubble',
+    format: 'html',
+    trackChanges: 'all',
+    suppressGlobalRegisterWarning: true
+};
+class PbEmailBuilderModule {
+    constructor(pbMiddlewaresService, userImageUploader, libraryIsPro) {
+        if (!libraryIsPro && !(pbMiddlewaresService instanceof FreeUsersMiddleware)) {
+            throw new Error('Upgrade to an Extended or Commercial License to use Custom Middlewares.');
+        }
+        if (!libraryIsPro && !(userImageUploader instanceof ImageUploader)) {
+            throw new Error('Upgrade to an Extended or Commercial License to use Custom Image Uploader.');
+        }
+    }
+    /**
+     * @deprecated use PbEmailBuilderModule.withConfig(userConfig) instead
+     * @internal
+     */
+    static forRoot(userConfig = {}) {
+        return PbEmailBuilderModule.withConfig(userConfig);
+    }
+    /**
+     * Import module with configurations
+     * @param userConfig Configurations
+     */
+    static withConfig(userConfig = {}) {
+        return {
+            ngModule: PbEmailBuilderModule,
+            providers: [
+                PbEmailBuilderService,
+                PbEmailObjectStoreService,
+                PbUserInterfaceService,
+                { provide: PB_CONFIG, useValue: userConfig },
+                {
+                    provide: PbUserMiddlewaresService,
+                    useFactory: createUserMiddlewareService,
+                    deps: [LIBRARY_IS_PRO]
+                },
+                {
+                    provide: PbStorageService,
+                    useFactory: createUsersIpStorage,
+                    deps: [PB_TEMPLATES_TEMPORARY_STORAGE]
+                },
+                {
+                    provide: PbUserImageUploaderService,
+                    useFactory: createUserUploaderService,
+                    deps: [LIBRARY_IS_PRO, MatBottomSheet, MatDialog, PbUserMiddlewaresService, PbUserRestApiService]
+                },
+                {
+                    provide: PbUserRestApiService,
+                    useFactory: createCustomRestApiService,
+                    deps: [HttpClient]
+                }
+            ]
+        };
+    }
+}
+PbEmailBuilderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    HttpClientModule,
+                    QuillModule,
+                    FlexLayoutModule,
+                    DragDropModule,
+                    FormsModule,
+                    ColorChromeModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    MatTabsModule,
+                    MatSliderModule,
+                    MatSelectModule,
+                    MatSlideToggleModule,
+                    MatButtonToggleModule,
+                    MatDividerModule,
+                    MatTooltipModule,
+                    MatDialogModule,
+                    MatSnackBarModule,
+                    MatProgressBarModule,
+                    MatMenuModule,
+                    MatSidenavModule,
+                    MatToolbarModule,
+                    MatListModule,
+                    MatBottomSheetModule,
+                    MatDividerModule,
+                    MatExpansionModule,
+                    ResizableModule,
+                    ScrollingModule,
+                    PortalModule
+                ],
+                declarations: [
+                    PbEmailBuilderComponent,
+                    StructureComponent,
+                    BlockComponent,
+                    DynamicComponentDirective,
+                    PreviewTemplateComponent,
+                    TextElementComponent,
+                    ImageComponent,
+                    ButtonComponent,
+                    DividerComponent,
+                    SpacerComponent,
+                    SocialComponent,
+                    BuilderContainerComponent,
+                    FontStylesComponent,
+                    PaddingComponent,
+                    MarginComponent,
+                    GapsComponent,
+                    LineHeightComponent,
+                    WidthHeightComponent,
+                    BorderComponent,
+                    ColorComponent,
+                    LinkComponent,
+                    AlignComponent,
+                    DirectionComponent,
+                    BackRepatComponent,
+                    ConfirmDialogComponent,
+                    ImageUploadComponent,
+                    BlockSettingsComponent,
+                    StructureSettingsComponent,
+                    GeneralSettingsComponent,
+                    UploadBottomSheetDialogComponent,
+                    UploadImageGalleryComponent,
+                    TemplateListDialogComponent,
+                    SlugifyPipe,
+                    ImportDialogComponent
+                ],
+                exports: [PbEmailBuilderComponent, PreviewTemplateComponent, SlugifyPipe],
+                entryComponents: [
+                    TextElementComponent,
+                    ImageComponent,
+                    ButtonComponent,
+                    DividerComponent,
+                    SpacerComponent,
+                    SocialComponent,
+                    ConfirmDialogComponent,
+                    UploadBottomSheetDialogComponent,
+                    UploadImageGalleryComponent,
+                    TemplateListDialogComponent,
+                    ImportDialogComponent
+                ],
+                providers: [
+                    {
+                        provide: QUILL_CONFIG_TOKEN,
+                        useValue: ɵ0
+                    },
+                    { provide: HTTP_INTERCEPTORS, useClass: IpInterceptorInterceptor, multi: true },
+                    // { provide: PB_BLOCK_ELEMENT, useClass: TextBlock, multi: true },
+                    PbEmailBuilderService,
+                    PbEmailObjectStoreService,
+                    PbUserInterfaceService
+                ]
+            },] }
+];
+PbEmailBuilderModule.ctorParameters = () => [
+    { type: PbUserMiddlewaresService },
+    { type: PbUserImageUploaderService },
+    { type: Boolean, decorators: [{ type: Inject, args: [LIBRARY_IS_PRO,] }] }
+];
+
+/*
+ * Copyright (c) 2024 Pobuca.
+ * All rights reserved.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AIPBlock, ButtonBlock, Defaults, DividerBlock, ETemplatesStorage, ImageUploader as FreeUsersImageUploader, ImageBlock, PBEmail, PB_BLOCKS, PB_CONFIG, PB_DEFAULT_BLOCKS, PB_DEFAULT_CONFIG, PB_DEFAULT_FALLBACK_FONTS, PB_DEFAULT_GOOGLE_FONTS, PB_DEFAULT_SOCIAL_NETWORKS, PB_DEFAULT_STRUCTURES, PB_FALLBACK_FONTS, PB_GOOGLE_FONTS, PB_SOCIAL_NETWORKS, PB_STORAGE_FACTORY, PB_STRUCTURES, PB_TEMPLATES_TEMPORARY_STORAGE, PbEmailBuilderComponent, PbEmailBuilderModule, PbEmailBuilderService, PbStorageService, PbUserImageUploaderService, PbUserMiddlewaresService, PbUserRestApiService, PreviewTemplateComponent, SlugifyPipe, SocialBlock, SpacerBlock, Structure, TextBlock, bytesToSize, cloneDeep, createBackground, createBorder, createCustomRestApiService, createFont, createLineHeight, createMargin, createPadding, createUserMiddlewareService, createUserUploaderService, createUsersIpStorage, createWidthHeight, defaultColumnsOptions, defaultsDeep, deferOf, getAssetByPath, isEqual, ɵ0, PbEmailObjectStoreService as ɵa, PbUserInterfaceService as ɵb, BackRepatComponent as ɵba, ConfirmDialogComponent as ɵbb, ImageUploadComponent as ɵbc, BlockSettingsComponent as ɵbd, StructureSettingsComponent as ɵbe, GeneralSettingsComponent as ɵbf, UploadBottomSheetDialogComponent as ɵbg, UploadImageGalleryComponent as ɵbh, TemplateListDialogComponent as ɵbi, ImportDialogComponent as ɵbj, IpInterceptorInterceptor as ɵbk, LIBRARY_IS_PRO as ɵbl, FreeUsersRestApi as ɵc, FreeUsersPbStorage as ɵd, StructureComponent as ɵe, BlockComponent as ɵf, DynamicComponentDirective as ɵg, TextElementComponent as ɵh, AbstractBlock as ɵi, ImageComponent as ɵj, ButtonComponent as ɵk, DividerComponent as ɵl, SpacerComponent as ɵm, SocialComponent as ɵn, BuilderContainerComponent as ɵo, FontStylesComponent as ɵp, PaddingComponent as ɵq, MarginComponent as ɵr, GapsComponent as ɵs, LineHeightComponent as ɵt, WidthHeightComponent as ɵu, BorderComponent as ɵv, ColorComponent as ɵw, LinkComponent as ɵx, AlignComponent as ɵy, DirectionComponent as ɵz };
+//# sourceMappingURL=pobuca-email-builder.js.map