import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { EwMaDesignService } from '../../../ew-ma-design.service';
let ImageSidebarComponent = class ImageSidebarComponent {
    constructor(designService) {
        this.designService = designService;
        this.currentPreviewLayout = "desktop";
        this.showBackFor = '';
        this.onSidebarBackClick = new EventEmitter();
        this.showImageLibrary = true;
        /*
        * Show the Library Popup
        */
        this.showImageLibraryPopup = false;
        this.topMarginWebMobileBind = true;
        this.imgAspectRatio = 1;
        /**
         * @description
         * Emit event to Done Click.
         */
        this.onDoneClick = new EventEmitter();
        this.callParentContainer = new EventEmitter();
    }
    ngOnInit() {
        this.environment = this.designService.environment;
        this.eventId = this.designService.eventId;
        if (this.model && this.model.meta_data.image_url) {
            this.showImageLibrary = false;
        }
    }
    ngOnChanges() {
        if (this.model && this.model.meta_data.image_url) {
            this.showImageLibrary = false;
        }
        if (this.model.meta_data.image_url == "") {
            this.showImageLibrary = true;
            this.showImageLibraryPopup = false;
        }
    }
    ngOnDestroy() {
        this.showImageLibrary = true;
    }
    selectedImage(image) {
        if (image) {
            let imgProps = JSON.parse(image.properties);
            this.model.meta_data.image_url = image.url;
            this.model.meta_data.image_name = image.name;
            this.model.meta_data.image_width = imgProps.image_width;
            this.model.meta_data.image_height = imgProps.image_height;
            this.model.meta_data.image_size = imgProps.image_size;
            this.imgAspectRatio = imgProps.image_width / imgProps.image_height;
            /*
            let clientWidth = 0;
            let containerWidth = document.querySelector('.'+this.model.meta_data.unique_class).clientWidth;
            if (this.model.meta_data.image_type == 'presenter') {
              clientWidth = 80;
            }else{
               clientWidth = (containerWidth>imgProps.image_width)?imgProps.image_width:containerWidth;
            }
            
            let sizeObj = this.calculateWidthHeight(clientWidth);
            
              this.model.meta_data.width = sizeObj.width;
              this.model.meta_data.height = sizeObj.height;
            */
            if (this.model.meta_data.image_type == 'presenter') {
                this.model.meta_data.width = '';
                this.model.meta_data.height = '';
                this.model.meta_data.object_fit = 'cover';
            }
            else {
                this.model.meta_data.width = '50';
                this.model.meta_data.height = 'auto';
            }
            this.showImageLibrary = false;
        }
        else {
            if (this.model.meta_data.image_url) {
                this.showImageLibrary = false;
            }
            this.imgAspectRatio = 1;
        }
    }
    removeImage() {
        this.showImageLibrary = true;
        this.showImageLibraryPopup = false;
        if (this.model.meta_data.image_type == 'presenter') {
            //Show Presenter default icon
            this.showImageLibrary = false;
            let imageCDN = this.designService.getImageCDNEndpoint();
            this.model.meta_data.image_url = imageCDN + 'assets/images/icon-presenter-sqr.png'; //imageCDN+'assets/images/icon-presenter.png';
            this.model.meta_data.image_name = 'icon-presenter-sqr.png'; //'icon-presenter.png';
            this.model.meta_data.image_width = 0; //101;
            this.model.meta_data.image_height = 0; //106;
            this.model.meta_data.image_size = 0; //9004;
            //this.model.meta_data.border_radius = 100;
            this.model.meta_data.width = 80;
            this.model.meta_data.height = 80;
            this.model.meta_data.object_fit = 'cover';
        }
        else {
            this.model.meta_data.image_url = '';
            this.model.meta_data.image_name = '';
            this.model.meta_data.image_width = 0;
            this.model.meta_data.image_height = 0;
            this.model.meta_data.image_size = 0;
            this.model.meta_data.width = '50';
            this.model.meta_data.height = 'auto';
        }
    }
    changeImage() {
        this.showImageLibrary = true;
        this.showImageLibraryPopup = true;
    }
    closeConfig() {
        this.onDoneClick.emit();
    }
    sidebarBack(type) {
        this.onSidebarBackClick.emit();
    }
    /**
    * Get the current value of Preview Layout style
    */
    ngDoCheck() {
        this.currentPreviewLayout = localStorage.getItem('currentPreviewLayout');
    }
    callElementContainer(data) {
        // this.callParentContainer.emit(data);
    }
    /**
     * calculate width and height as per aspect ratio
     */
    calculateWidthHeight(data) {
        let newHeight = 0;
        let newWidth = 0;
        newHeight = data / ((this.model.meta_data.aspect_ratio) ? this.imgAspectRatio : 1);
        newWidth = newHeight * ((this.model.meta_data.aspect_ratio) ? this.imgAspectRatio : 1);
        return { 'width': newWidth.toFixed(0), 'height': newHeight.toFixed(0) };
    }
    calAspectRatio(element) {
        if (this.model.meta_data.aspect_ratio) {
            this.imgAspectRatio = this.model.meta_data.image_width / this.model.meta_data.image_height;
            if (element == 'width') {
                let newHeight = this.model.meta_data.width / this.imgAspectRatio;
                this.model.meta_data.height = parseInt(newHeight.toFixed(0));
            }
            else if (element == 'height') {
                let newWidth = this.model.meta_data.height * this.imgAspectRatio;
                this.model.meta_data.width = parseInt(newWidth.toFixed(0));
            }
        }
    }
    toggleAspectRatio() {
        this.model.meta_data.aspect_ratio = !this.model.meta_data.aspect_ratio;
    }
};
ImageSidebarComponent.ctorParameters = () => [
    { type: EwMaDesignService }
];
__decorate([
    Input()
], ImageSidebarComponent.prototype, "showBackFor", void 0);
__decorate([
    Input()
], ImageSidebarComponent.prototype, "model", void 0);
__decorate([
    Output()
], ImageSidebarComponent.prototype, "onSidebarBackClick", void 0);
__decorate([
    Output()
], ImageSidebarComponent.prototype, "onDoneClick", void 0);
__decorate([
    Output()
], ImageSidebarComponent.prototype, "callParentContainer", void 0);
ImageSidebarComponent = __decorate([
    Component({
        selector: 'ew-element-image-sidebar',
        template: "<!-- <div class=\"page-sidebar-elements layout-branding-elements page-editor-ew-view\">\r\n\t<div class=\"mat-widget-header tab-toggle-ew editor-type-header\">\r\n\t\t<span class=\"title-content-ew\">Image</span>\r\n\t\t<span class=\"btn-editor-save\">\r\n\t\t\t<button (click)=\"closeConfig()\" class=\"small-button-ew\" mat-flat-button color=\"accent\">Done</button>\r\n\t\t</span>\r\n\t</div>\r\n\r\n\t<div class=\"elements-outer-sec-scroll popover-btn-ew-custom\">\r\n\r\n\t\t<div class=\"layout-branding-elements\">\r\n\t\t\t<div class=\"layout-page-branding\">\r\n\r\n\t\t\t\t<div class=\"box-title-branding branding-element-common upload-image-custom-widget\">\r\n\t\t\t\t\t<div class=\"theme-box-content branding-selected-theme\">\r\n\r\n\t\t\t\t\t\t<lib-ew-ma-image\r\n\t\t\t\t\t\t\t[event_id]=\"eventId\"\r\n\t\t\t\t\t\t\t[label_text]=\"''\"\r\n\t\t\t\t\t\t\tdefault_language=\"en\"\r\n\t\t\t\t\t\t\t[env]=\"environment\"\r\n\t\t\t\t\t\t\t(selectedImage)=\"selectedImage($event)\"\r\n\t\t\t\t\t\t\t*ngIf=\"model?.meta_data.showImageLibrary\"\r\n\t\t\t\t\t\t></lib-ew-ma-image>\r\n\r\n\t\t\t\t\t\t<div class=\"uploaded-img-sec\" *ngIf=\"!model?.meta_data.showImageLibrary\">\r\n\t\t\t\t\t\t\t<div class=\"uploaded-img-left\">\r\n\t\t\t\t\t\t\t\t<img src=\"{{ model?.meta_data.image_url }}\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"uploader-img-right\">\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-name\">{{ model?.meta_data.image_name }}</span>\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-size\">{{ model?.meta_data.image_width }}x{{ model?.meta_data.image_height }} PX</span>\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-weight\">{{ model?.meta_data.image_size }} bytes</span>\r\n\t\t\t\t\t\t\t\t<div class=\"call-action-upload-file\">\r\n\t\t\t\t\t\t\t\t\t<button (click)=\"removeImage()\" class=\"small-button-ew\" mat-flat-button color=\"grey\">Change</button>\r\n\t\t\t\t\t\t\t\t\t<button (click)=\"removeImage()\" class=\"no-bg-btn theme-button-text-ew-small warning-btn-no-text\">Remove</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t</!-- <div class=\"uploaded-img-sec\">\r\n\t\t\t\t\t\t\t<div class=\"uploaded-img-left\">\r\n\t\t\t\t\t\t\t\t<img src=\"/assets/images/logo-custom.png\">\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"uploader-img-right\">\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-name\">conselting_training.jpg</span>\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-size\">341x281px</span>\r\n\t\t\t\t\t\t\t\t<span class=\"uploader-img-weight\">648kb</span>\r\n\t\t\t\t\t\t\t\t<div class=\"call-action-upload-file\">\r\n\t\t\t\t\t\t\t\t\t<button class=\"small-button-ew\" mat-flat-button color=\"grey\">Change</button>\r\n\t\t\t\t\t\t\t\t\t<button class=\"no-bg-btn theme-button-text-ew-small warning-btn-no-text\">Remove</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div> -/->\r\n\r\n\t\t\t\t\t\t<div class=\"common-slider-ew-spiner slider-without-spiner logo-part-slider-ew large-padding-ew\">\r\n\t\t\t\t\t\t\t<label class=\"upload-img-label\">Image Radius</label>\r\n\t\t\t\t\t\t\t<div class=\"mat-slider-outer-part\">\r\n\t\t\t\t\t\t\t\t<span class=\"mat-slider-inner\">\r\n\t\t\t\t\t\t\t\t\t<mat-slider\r\n\t\t\t\t\t\t\t\t\t [value]=\"model?.meta_data.image_radius\"\r\n\t\t\t\t\t\t\t\t\t (input)=\"model.meta_data.image_radius = $event.value\"\r\n\t\t\t\t\t\t\t\t\t min=\"0\"\r\n\t\t\t\t\t\t\t\t\t max=\"100\"\r\n\t\t\t\t\t\t\t\t\t step=\"1\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t</mat-slider>\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t<span class=\"value-count-slider\">\r\n\t\t\t\t\t\t\t\t\t{{ model?.meta_data.image_radius }} PX\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"advance-title-sec-box\">\r\n\t\t\t\t\t<span class=\"title-advance-box\">Margin</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"box-title-branding branding-element-common form-setting-margin-box\">\r\n\t\t\t\t\t<div class=\"theme-box-content\">\r\n\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t<div class=\"col m5 s5\">\r\n\t\t\t\t\t\t\t\t<div class=\"elements-custom-outer-ew\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"left-list-item\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"title-list-nav\">Top</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"bottom-custom-design-fields fields-padding-margin-ew\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input name=\"margin_top\" [(ngModel)]=\"model?.meta_data.margin_top\" matInput placeholder=\"5px\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"col m5 s5\">\r\n\t\t\t\t\t\t\t\t<div class=\"elements-custom-outer-ew\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"left-list-item\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"title-list-nav\">Bottom</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"bottom-custom-design-fields fields-padding-margin-ew\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input name=\"margin_bottom\" [(ngModel)]=\"model?.meta_data.margin_bottom\" matInput placeholder=\"5px\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div> -->\r\n<!-- Old Code -->\r\n\r\n<div class=\"elemets-ew-sidebar\">\r\n    <div class=\"mat-widget-header tab-toggle-ew\">\r\n        <mat-icon *ngIf=\"showBackFor == 'popup'\" (click)=\"sidebarBack('popup')\">arrow_back</mat-icon>\r\n        <span class=\"title-content-ew\">{{ 'BUILDER.ELEMENTS.IMAGE' | translate }}</span>\r\n        \r\n        <span class=\"btn-editor-save ew-sidebar-close-btn\" *ngIf=\"showBackFor !== 'popup'\" (click)=\"sidebarBack('builderPage')\">\r\n            <button class=\"small-button-ew green base\" mat-flat-button color=\"accent\">{{ 'DESIGN.DONE' | translate }}</button>\r\n        </span>\r\n    </div>\r\n    <div class=\"elements-outer-sec-scroll mat-toggle-multiple\">\r\n        <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\" #tabOptions=\"matButtonToggleGroup\">\r\n            <mat-button-toggle value=\"setting\" checked>\r\n                {{ 'BUILDER.ELEMENTS.TABS.SETTINGS' | translate }}\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"advanced\">{{ 'BUILDER.ELEMENTS.TABS.ADVANCED' | translate }}</mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n       \r\n\r\n        <div *ngIf=\"tabOptions.value == 'setting'\">\r\n            <ew-element-show-hide [model]=\"model\" (callSideBar)=\"callElementContainer($event)\" ></ew-element-show-hide>\r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.MARGIN_LABEL' | translate }}</span></div>\r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TOP_MARGIN' | translate }}</span>\r\n\r\n                    <div class=\"mat-slider-outer-part common-builder-right\">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [value]=\"model?.meta_data.margin_top\" (input)=\"model.meta_data.margin_top = $event.value;\"\r\n                                min=\"0\" max=\"100\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span> <!--(topMarginWebMobileBind && model.meta_data.mobile_margin_top = $event.value)-->\r\n                        <span class=\"value-count-slider\">\r\n                            {{ model?.meta_data.margin_top }} PX\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row \" *ngIf=\"(this.currentPreviewLayout=='mobile')\"> <!--padding-elements-30-top ew-mobile-property-bind [ngClass]=\"{'ew-mobile-bind-active' : topMarginWebMobileBind == false}\"-->\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.MOBILE_MARGIN' | translate }}\r\n                        <!--<mat-icon (click)=\"topMarginWebMobileBind = false\" class=\"ew-on-property\">insert_link</mat-icon>\r\n                        <mat-icon (click)=\"topMarginWebMobileBind = true; model.meta_data.mobile_margin_top = model.meta_data.margin_top\" class=\"ew-off-property\">link_off</mat-icon>\r\n                        -->\r\n                    </span>\r\n                    <div class=\"mat-slider-outer-part common-builder-right\"> <!--opacity-pointer-event-->\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [value]=\"model?.meta_data.mobile_margin_top\" (input)=\"model.meta_data.mobile_margin_top = $event.value\"\r\n                                min=\"0\" max=\"100\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n                        <span class=\"value-count-slider\">\r\n                            {{ model?.meta_data.mobile_margin_top }} PX\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <!-- <div class=\"builder-elements-outer ew-mobile-elements ew-margin-bottom-20\">\r\n                <div class=\"element-builder-row\">\r\n                    <div class=\"ew-mobile-setting\">\r\n                        <span class=\"builder-elements-name\"><span class=\"mobile-icon-title\"><mat-icon>smartphone</mat-icon>Mobile</span>Top Margin</span>\r\n                        <div class=\"mat-slider-outer-part common-builder-right slider-2-digit\">\r\n                            <span class=\"mat-slider-inner\">\r\n                                <mat-slider [value]=\"model?.meta_data.mobile_margin_top\" (input)=\"model.meta_data.mobile_margin_top = $event.value\"\r\n                                    min=\"0\" max=\"100\" step=\"1\">\r\n                                </mat-slider>\r\n                            </span>\r\n                            <span class=\"value-count-slider\">\r\n                                {{ model?.meta_data.mobile_margin_top }} PX\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n\r\n        <div class=\"advance-title-sec-box\">\r\n            <span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.IMAGE' | translate }}</span>\r\n        </div>\r\n\r\n        <div class=\"builder-elements-outer\">\r\n            <div class=\"element-builder-row label-on-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.IMAGE' | translate }}</span>               \r\n\r\n\t\t\t\t<lib-ew-ma-image\r\n\t\t\t\t\t[event_id]=\"eventId\"\r\n\t\t\t\t\t[label_text]=\"''\"\r\n                    [showImageLibPopup]=\"showImageLibraryPopup\"\r\n\t\t\t\t\t[default_language]=\"designService.defaultLang\"\r\n\t\t\t\t\t[env]=\"environment\"\r\n\t\t\t\t\t(selectedImage)=\"selectedImage($event)\"\r\n\t\t\t\t\t*ngIf=\"showImageLibrary\"\r\n\t\t\t\t></lib-ew-ma-image>\r\n\r\n                <!-- *ngIf=\"!showImageLibrary\" -->\r\n\r\n\t\t\t\t<div class=\"uploaded-img-sec\" *ngIf=\"!showImageLibrary\">\r\n\t\t\t\t\t<div class=\"uploaded-img-left\">\r\n\t\t\t\t\t\t<img src=\"{{ model?.meta_data.image_url }}\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"uploader-img-right\">\r\n\t\t\t\t\t\t<span class=\"uploader-img-name\">{{ model?.meta_data.image_name }}</span>\r\n\t\t\t\t\t\t<span class=\"uploader-img-size\">{{ model?.meta_data.image_width }}x{{ model?.meta_data.image_height }} PX</span>\r\n\t\t\t\t\t\t<!-- <span class=\"uploader-img-weight\">{{ model?.meta_data.image_size }} bytes</span> -->\r\n\t\t\t\t\t\t<div class=\"call-action-upload-file\">\r\n\t\t\t\t\t\t\t<button (click)=\"changeImage()\" class=\"small-button-ew\" mat-flat-button color=\"grey\">{{ 'DESIGN.CHANGE' | translate }}</button>\r\n                            \r\n                            <ng-template [ngIf]=\"model.meta_data.image_name !== 'icon-presenter.png'\">\r\n\t\t\t\t\t\t\t    <button (click)=\"removeImage()\" class=\"no-bg-btn theme-button-text-ew-small warning-btn-no-text\">{{ 'DESIGN.REMOVE' | translate }}</button>\r\n                            </ng-template>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n            </div>\r\n\r\n\r\n            <div class=\"image-aspect-ratio\" *ngIf=\"model.meta_data.image_type!='presenter'\" >\r\n                <div class=\"element-builder-row padding-elements-20-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.SIZE' | translate }}</span>\r\n                    <div class=\"mat-slider-outer-part\">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [value]=\"model?.meta_data.width\" (input)=\"model.meta_data.width = $event.value\"\r\n                                min=\"10\" max=\"100\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n    \r\n                        <span class=\"value-count-slider\">{{ model?.meta_data.width }}%</span>\r\n                        <!--<mat-form-field class=\"ew-field-without-lebel builder-input-fields\" floatLabel=\"never\">\r\n                            <input matInput [(ngModel)]=\"model.meta_data.width\" type=\"number\"  (keyup)=\"calAspectRatio('width')\">\r\n    \r\n                        </mat-form-field>-->\r\n                    </div>\r\n                </div>\r\n                <!--<div class=\"element-builder-row padding-elements-20-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.HEIGHT' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field class=\"ew-field-without-lebel builder-input-fields\" floatLabel=\"never\">\r\n                            <input matInput [(ngModel)]=\"model.meta_data.height\" type=\"number\" (keyup)=\"calAspectRatio('height')\" >\r\n                            \r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n              \r\n                <div class=\"aspect-ratio-option padding-elements-20-top {{ (!model.meta_data.aspect_ratio)?'disabled':''}}\"> \r\n                    <span class=\"top-horizontal-line\"></span>\r\n                    <span class=\"ratio-link\" (click)=\"toggleAspectRatio()\">\r\n                        <mat-icon>insert_link</mat-icon>\r\n                    </span>\r\n                    <span class=\"top-horizontal-line\"></span>\r\n                </div>-->\r\n            </div>\r\n            <div class=\"image-aspect-ratio\" *ngIf=\"model.meta_data.image_type=='presenter'\" >\r\n                <div class=\"element-builder-row padding-elements-20-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.IMAGE_POSITION' | translate }}</span>\r\n                        <div class=\"common-builder-right\">\r\n                            <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                                <mat-select [(value)]=\"model?.meta_data.object_fit\">\r\n                                    <mat-option value=\"cover\">Cover</mat-option>\r\n                                    <mat-option value=\"contain\">Contain</mat-option>\r\n                                    <mat-option value=\"fill\">Fill</mat-option>\r\n                                    <mat-option value=\"none\">None</mat-option>\r\n                                    <mat-option value=\"scale-down\">Scale Down</mat-option>\r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n            <!--<div class=\"element-builder-row padding-elements-30-top\" >\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.WIDTH' | translate }}</span>\r\n                <div class=\"common-builder-right\">\r\n                    <mat-form-field class=\"ew-field-without-lebel builder-input-fields\" floatLabel=\"never\">\r\n                        <input matInput [(ngModel)]=\"model.meta_data.width\" type=\"number\" placeholder=\"PX\" (keyup)=\"calAspectRatio('width')\">\r\n                    </mat-form-field>\r\n                </div>-->  \r\n                 <!--<div class=\"mat-slider-outer-part common-builder-right\">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.width\" (input)=\"model.meta_data.width = $event.value\"\r\n                            min=\"1\" max=\"100\" step=\"1\">\r\n                        </mat-slider>\r\n                    </span>\r\n                    <span class=\"value-count-slider\">{{ model?.meta_data.width }}%</span>\r\n                </div>-->\r\n            <!--</div>-->\r\n            <!--<div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.HEIGHT' | translate }}</span>\r\n                <div class=\"common-builder-right\">\r\n                    <mat-form-field class=\"ew-field-without-lebel builder-input-fields\" floatLabel=\"never\">\r\n                        <input matInput [(ngModel)]=\"model.meta_data.height\" type=\"number\" placeholder=\"PX\" (keyup)=\"calAspectRatio('height')\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div> -->\r\n            <div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.ALIGN' | translate }}</span>\r\n                <div class=\"common-builder-right\">\r\n                    <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                        <mat-select [(value)]=\"model?.meta_data.align\">\r\n                            <mat-option value=\"left\">Left</mat-option>\r\n                            <mat-option value=\"center\">Center</mat-option>\r\n                            <mat-option value=\"right\">Right</mat-option>\r\n                        </mat-select>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.OPACITY' | translate }}</span>\r\n                <div class=\"mat-slider-outer-part common-builder-right\">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.opacity\" (input)=\"model.meta_data.opacity = $event.value\"\r\n                            min=\"0\" max=\"1\" step=\"0.01\">\r\n                        </mat-slider>\r\n                    </span>\r\n\r\n                    <span class=\"value-count-slider\">{{ model?.meta_data.opacity *100 | number: '1.0-0' }}%</span>\r\n                </div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.LINK_URL' | translate }}</span>\r\n                <div class=\"common-builder-right\">\r\n                    <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel builder-input-fields\">\r\n\t\t\t\t\t\t<input matInput [(ngModel)]=\"model?.meta_data.link_url\" placeholder=\"\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\t\t\t<div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.LINK_URL_TARGET' | translate }}</span>\r\n                <div class=\"common-builder-right\">\r\n                    <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                        <mat-select [(value)]=\"model?.meta_data.link_target\">\r\n                            <mat-option value=\"_self\">Normal</mat-option>\r\n                            <mat-option value=\"_blank\">New Tab/Window</mat-option>\r\n                        </mat-select>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"advance-title-sec-box\">\r\n\t\t\t<span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.PADDINGS' | translate }}</span>\r\n\t\t</div>\r\n        <div class=\"builder-elements-outer\">\r\n            <div class=\"element-builder-row\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.PADDING.TOP' | translate }}</span>\r\n                <div class=\"mat-slider-outer-part common-builder-right\">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.padding_top\" (input)=\"model?.meta_data.padding_top = $event.value\" min=\"0\" max=\"100\" step=\"1\">\r\n                        </mat-slider>\r\n                    </span>\r\n                    <span class=\"value-count-slider\">\r\n                        {{ model?.meta_data.padding_top }} px\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.PADDING.RIGHT' | translate }}</span>\r\n                <div class=\"mat-slider-outer-part common-builder-right \">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.padding_right\" (input)=\"model?.meta_data.padding_right = $event.value\" min=\"0\" max=\"100\" step=\"1\">\r\n                        </mat-slider>\r\n                    </span>\r\n                    <span class=\"value-count-slider\">\r\n                        {{ model?.meta_data.padding_right }} px\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.PADDING.BOTTOM' | translate }}</span>\r\n                <div class=\"mat-slider-outer-part common-builder-right \">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.padding_bottom\" (input)=\"model?.meta_data.padding_bottom = $event.value\" min=\"0\" max=\"100\" step=\"1\">\r\n                        </mat-slider>\r\n                    </span>\r\n                    <span class=\"value-count-slider\">\r\n                        {{ model?.meta_data.padding_bottom }} px\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"element-builder-row padding-elements-30-top\">\r\n                <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.PADDING.LEFT' | translate }}</span>\r\n                <div class=\"mat-slider-outer-part common-builder-right\">\r\n                    <span class=\"mat-slider-inner\">\r\n                        <mat-slider [value]=\"model?.meta_data.padding_left\" (input)=\"model?.meta_data.padding_left = $event.value\" min=\"0\" max=\"100\" step=\"1\">\r\n                        </mat-slider>\r\n                    </span>\r\n                    <span class=\"value-count-slider\">\r\n                        {{ model?.meta_data.padding_left }} px\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            \r\n            <!-- <div class=\"element-builder-row padding-elements-builder-sidebar\">\r\n                <div class=\"row\">\r\n                    <div class=\"col m3 s3\">\r\n                        <div class=\"bottom-custom-design-fields\">\r\n                            <label class=\"label-padding-sec\">{{ 'BUILDER.ELEMENTS.PADDING.TOP' | translate }}</label>\r\n                            <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                <input matInput [(ngModel)]=\"model?.meta_data.padding_top\" type=\"number\" placeholder=\"\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col m3 s3\">\r\n                        <div class=\"bottom-custom-design-fields\">\r\n                            <label class=\"label-padding-sec\">{{ 'BUILDER.ELEMENTS.PADDING.RIGHT' | translate }}</label>\r\n                            <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                <input matInput [(ngModel)]=\"model?.meta_data.padding_right\" type=\"number\" placeholder=\"\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col m3 s3\">\r\n                        <div class=\"bottom-custom-design-fields\">\r\n                            <label class=\"label-padding-sec\">{{ 'BUILDER.ELEMENTS.PADDING.BOTTOM' | translate }}</label>\r\n                            <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                <input matInput [(ngModel)]=\"model?.meta_data.padding_bottom\" type=\"number\" placeholder=\"\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col m3 s3\">\r\n                        <div class=\"bottom-custom-design-fields\">\r\n                            <label class=\"label-padding-sec\">{{ 'BUILDER.ELEMENTS.PADDING.LEFT' | translate }}</label>\r\n                            <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                <input matInput [(ngModel)]=\"model?.meta_data.padding_left\" type=\"number\" placeholder=\"\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n        </div>\r\n        \r\n        <div class=\"advanced-tab\" *ngIf=\"tabOptions.value == 'advanced'\">\r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.BORDER_RADIUS' | translate }}</span>\r\n                    <div class=\"mat-slider-outer-part common-builder-right\">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [value]=\"model?.meta_data.border_radius\" (input)=\"model.meta_data.border_radius = $event.value\"\r\n                                min=\"0\" max=\"50\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n                        <span class=\"value-count-slider\">{{ model?.meta_data.border_radius }} %</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"advance-title-sec-box\">\r\n                <span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.BORDER' | translate }}</span>\r\n            </div>\r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.BORDER' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                            <mat-select [(value)]=\"model?.meta_data.border_position\">\r\n                                <mat-option value=\"ew_border_top_bottom\">Top & Bottom</mat-option>\r\n                                <mat-option value=\"ew_border_top\">Top Only</mat-option>\r\n                                <mat-option value=\"ew_border_bottom\">Bottom Only</mat-option>\r\n                                <mat-option value=\"ew_border_left_right\">Left & Right</mat-option>\r\n                                <mat-option value=\"ew_border_left\">Left Only</mat-option>\r\n                                <mat-option value=\"ew_border_right\">Right Only</mat-option>\r\n                                <mat-option value=\"ew_full_border\">Full Border</mat-option>\r\n                                <mat-option value=\"ew_no_border\">No Border</mat-option>\r\n                            </mat-select>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\" class=\"element-builder-row padding-elements-30-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.STYLE' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                            <mat-select [(value)]=\"model?.meta_data.border_style\">\r\n                                <mat-option value=\"solid\">Solid</mat-option>\r\n                                <mat-option value=\"dashed\">Dashed</mat-option>\r\n                                <mat-option value=\"dotted\">Dotted</mat-option>\r\n                                <mat-option value=\"double\">Double</mat-option>\r\n                                <mat-option value=\"groove\">Groove</mat-option>\r\n                            </mat-select>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\" class=\"element-builder-row padding-elements-30-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.SIZE' | translate }}</span>\r\n                    <div class=\"mat-slider-outer-part common-builder-right\">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [value]=\"model?.meta_data.border_size\" (input)=\"model.meta_data.border_size = $event.value\"\r\n                                min=\"1\" max=\"10\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n                        <span class=\"value-count-slider\">{{ model?.meta_data.border_size }} PX</span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\" class=\"element-builder-row  padding-elements-30-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.BORDER_COLOR' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field class=\"mat-form-field color-picker-mat embeded-color-widget-picker\" [ngClass]=\"{'transparent-color-ew': model?.meta_data.border_color.slice(-2,-1) == '0'}\" floatLabel=\"never\">\r\n                            <input matInput type=\"text\"\r\n                                [cpPosition]=\"'top'\"\r\n                                [cpAlphaChannel]=\"'disableAlpha'\"\r\n                                [cpOutputFormat]=\"'auto'\"\r\n                                [colorPicker]=\"model?.meta_data.border_color\"\r\n                                (colorPickerChange)=\"model.meta_data.border_color=$event\"\r\n                                [(ngModel)]=\"model?.meta_data.border_color\" />\r\n                            <span class=\"color-picker-box\"\r\n                                [style.background-color]=\"model?.meta_data.border_color\"></span>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"advance-title-sec-box\">\r\n                <span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.BOX_SHADOW' | translate }}</span>\r\n            </div>\r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TYPE' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field floatLabel=\"never\" class=\"ew-field-without-lebel\">\r\n                            <mat-select [(value)]=\"model?.meta_data.box_shadow\">\r\n                                <mat-option value=\"ew-no-shadow\">No Shadow</mat-option>\r\n                                <mat-option value=\"ew-small-shadow\">Small</mat-option>\r\n                                <mat-option value=\"ew-medium-shadow\">Medium</mat-option>\r\n                                <mat-option value=\"ew-large-shadow\">Large</mat-option>\r\n                            </mat-select>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"advance-title-sec-box\">\r\n                <span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.CUSTOM_CLASS' | translate }}</span>\r\n            </div>\r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.CUSTOM_CLASS_NAME' | translate }}</span>\r\n                    <div class=\"common-builder-right\">\r\n                        <mat-form-field class=\"ew-field-without-lebel builder-input-fields\" floatLabel=\"never\">\r\n                            <input matInput type=\"text\" [(ngModel)]=\"model?.meta_data.custom_class\">\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
        styles: [""]
    })
], ImageSidebarComponent);
export { ImageSidebarComponent };
//# sourceMappingURL=data:application/json;base64, 