import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ewFontFamilyTypes } from '../../../constants/webinar-event-codes';
let ButtonSidebarComponent = class ButtonSidebarComponent {
    /**
     * constructor
     */
    constructor() {
        /**
         * Current Preview Layout
         */
        this.currentPreviewLayout = "desktop";
        /**
         * Font Familty options constant
         */
        this.fontFamilyOptions = ewFontFamilyTypes;
        /**
         * Mobile version of top margins
         */
        this.topMarginWebMobileBind = true;
        this.fontSizeWebMobileBind = true;
        /**
         * Output
         * @param Event
         */
        this.onSidebarBackClick = new EventEmitter();
        this.callParentContainer = new EventEmitter();
    }
    /**
     * NgOnint hook
     */
    ngOnInit() {
    }
    /**
     * Get the current value of Preview Layout style
     */
    ngDoCheck() {
        this.currentPreviewLayout = localStorage.getItem('currentPreviewLayout');
    }
    /*
    * close the sidebar
    * @param type:option param
    */
    sidebarBack(type) {
        this.onSidebarBackClick.emit(type);
    }
    callElementContainer(data) {
        // this.callParentContainer.emit(data);
    }
};
__decorate([
    Input()
], ButtonSidebarComponent.prototype, "model", void 0);
__decorate([
    Output()
], ButtonSidebarComponent.prototype, "onSidebarBackClick", void 0);
__decorate([
    Output()
], ButtonSidebarComponent.prototype, "callParentContainer", void 0);
ButtonSidebarComponent = __decorate([
    Component({
        selector: 'ew-element-button-sidebar',
        template: "<div class=\"elemets-ew-sidebar\" >\r\n    <div class=\"mat-widget-header tab-toggle-ew\">\r\n        <span class=\"title-content-ew\">{{ 'BUILDER.ELEMENTS.BUTTON' | translate }}</span>\r\n\r\n        <span class=\"btn-editor-save ew-sidebar-close-btn\" (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\r\n    </div>\r\n    <div class=\"elements-outer-sec-scroll   mat-toggle-multiple\">\r\n        <mat-button-toggle-group name=\"fontStyle\"  #tabOptions=\"matButtonToggleGroup\" aria-label=\"Font Style\">\r\n            <mat-button-toggle value=\"setting\" checked>{{ 'BUILDER.ELEMENTS.TABS.SETTINGS' | translate }}</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        <div class=\" setting-tab\" *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                    <div class=\"mat-slider-outer-part common-builder-right\">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [(ngModel)]=\"model?.meta_data.margin_top\"  (input)=\"(model?.meta_data.margin_top=$event.value);\"  min=\"10\" max=\"100\" step=\"1\"></mat-slider>\r\n                        </span> <!--(topMarginWebMobileBind && model.meta_data.mobile_margin_top = $event.value)-->\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.margin_top}} PX</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 }}</span>\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.event_schedule_margin_top\" class=\"ew-off-property\">link_off</mat-icon>\r\n                    </span>-->\r\n                    <div class=\"mat-slider-outer-part common-builder-right \"> <!--slider-2-digit opacity-pointer-event-->\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [(ngModel)]=\"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 class=\"element-builder-row padding-elements-30-top\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.WIDTH' | translate }}</span>\r\n                    <div class=\"mat-slider-outer-part common-builder-right \">\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [(ngModel)]=\"model?.meta_data.width\"  (input)=\"(model?.meta_data.width=$event.value)\"  min=\"0\" max=\"100\" step=\"1\"></mat-slider>\r\n                        </span>\r\n                        \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\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\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>\r\n            \r\n            \r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.BUTTON' | translate }}</span></div>\r\n            <div class=\"builder-elements-outer\">\r\n                <ng-template [ngIf]=\"model?.page != 'waiting_area'\">\r\n                    <div class=\"element-builder-row \">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.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.button_target\">\r\n                                    <mat-option value=\"event_page\">Event Page</mat-option>\r\n                                    <mat-option value=\"custom_url\">Custom URL</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                    *ngIf=\"model?.meta_data.button_target == 'custom_url'\">\r\n                        <span class=\"builder-elements-name\">Custom URL</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                                <input matInput [(ngModel)]=\"model?.meta_data.button_custom_url\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template [ngIf]=\"model?.page == 'waiting_area'\">\r\n                    <div class=\"element-builder-row\">\r\n                        <span class=\"builder-elements-name\">Custom URL</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                                <input matInput [(ngModel)]=\"model?.meta_data.button_custom_url\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                \r\n                <div class=\"element-builder-row padding-elements-30-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.BUTTON_TEXT' | 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                            <input matInput  [(ngModel)]=\"model?.meta_data.button_text\">\r\n                        </mat-form-field>                        \r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\" padding-elements-30-top\">\r\n                    <ew-control-google-fonts-select\r\n                        [fontControlName]=\"'font_family'\"\r\n                        [variantControlName]=\"'font_variant'\"\r\n                        [model]=\"model?.meta_data\"\r\n                    ></ew-control-google-fonts-select>\r\n\r\n                </div>\r\n                \r\n                <div class=\"element-builder-row  padding-elements-30-top\" *ngIf=\"(this.currentPreviewLayout=='desktop')\" >\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.FONT_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 [(ngModel)]=\"model?.meta_data.font_size\"  (input)=\"(model?.meta_data.font_size=$event.value);\"  min=\"0\" max=\"100\" step=\"1\"></mat-slider>\r\n                        </span>\r\n                        <!--(fontSizeWebMobileBind && model.meta_data.mobile_font_size = $event.value)-->\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.font_size}} PX</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row padding-elements-30-top \"\r\n                    *ngIf=\"(this.currentPreviewLayout=='mobile')\"> <!--ew-mobile-property-bind [ngClass]=\"{'ew-mobile-bind-active' : fontSizeWebMobileBind == false}\"-->\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.MOBILE_FONT_SIZE' | translate }}</span>\r\n                        <!--<mat-icon (click)=\"fontSizeWebMobileBind = false\" class=\"ew-on-property\">insert_link</mat-icon>\r\n                        <mat-icon (click)=\"fontSizeWebMobileBind = true; model.meta_data.mobile_font_size = model.meta_data.mobile_font_size\" class=\"ew-off-property\">link_off</mat-icon>\r\n                    </span>-->\r\n                    <div class=\"mat-slider-outer-part common-builder-right \"> <!--slider-2-digit opacity-pointer-event-->\r\n                        <span class=\"mat-slider-inner\">\r\n                            <mat-slider [(ngModel)]=\"model?.meta_data.mobile_font_size\" (input)=\"(model?.meta_data.mobile_font_size = $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.mobile_font_size }} PX\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n           \r\n            <div class=\"builder-elements-outer\">\r\n                <div class=\"element-builder-row\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.BG_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\" \r\n                            [ngClass]=\"{'transparent-color-ew': model?.meta_data.background_color.slice(-2,-1) == '0'}\" floatLabel=\"never\">\r\n                            <input matInput type=\"text\"\r\n                            [cpPosition]=\"'bottom'\"\r\n                           [cpAlphaChannel]=\"'disableAlpha'\"\r\n                            [cpOutputFormat]=\"'auto'\" \r\n                            [colorPicker]=\"model?.meta_data.background_color\"\r\n                            (colorPickerChange)=\"model.meta_data.background_color=$event\"\r\n                            [(ngModel)]=\"model?.meta_data.background_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.background_color\"></span>\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.TEXT_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\" 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.text_color\"                                          \r\n                                (colorPickerChange)=\"model.meta_data.text_color=$event\"\r\n                                [(ngModel)]=\"model?.meta_data.text_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.text_color\"></span>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n            \r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.PADDINGS' | translate }}</span></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\">\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\">\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\">\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\">\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        \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 [(ngModel)]=\"model?.meta_data.border_radius\"  (input)=\"(model?.meta_data.border_radius=$event.value)\"  min=\"0\" max=\"60\" step=\"1\"></mat-slider>\r\n                        </span>\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.border_radius}} PX</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.BORDER' | translate }}</span></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                                \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                    *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\"\r\n                >\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 class=\"element-builder-row padding-elements-30-top\"\r\n                    *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\"\r\n                >\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 [(ngModel)]=\"model?.meta_data.border_size\"  (input)=\"(model?.meta_data.border_size=$event.value)\"  min=\"1\" max=\"100\" step=\"1\"></mat-slider>\r\n                        </span>\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.border_size}} PX</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row  padding-elements-30-top\"\r\n                    *ngIf=\"model?.meta_data.border_position != 'ew_no_border'\"\r\n                >\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\" 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                            />\r\n                            <span class=\"color-picker-box\" [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\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\r\n\r\n        </div>\r\n    </div>\r\n</div>",
        styles: [""]
    })
], ButtonSidebarComponent);
export { ButtonSidebarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXNpZGViYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vZXctbWEtZGVzaWduLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvZWxlbWVudHMvYnV0dG9uLXNpZGViYXIvYnV0dG9uLXNpZGViYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBQyxNQUFNLEVBQUUsWUFBWSxFQUFHLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBTzNFLElBQWEsc0JBQXNCLEdBQW5DLE1BQWEsc0JBQXNCO0lBb0NqQzs7T0FFRztJQUNIO1FBckNBOztXQUVHO1FBQ0kseUJBQW9CLEdBQVUsU0FBUyxDQUFDO1FBQy9DOztXQUVHO1FBQ0ksc0JBQWlCLEdBQVMsaUJBQWlCLENBQUE7UUFFbEQ7O1dBRUc7UUFDSSwyQkFBc0IsR0FBVyxJQUFJLENBQUM7UUFDdEMsMEJBQXFCLEdBQVcsSUFBSSxDQUFDO1FBYTVDOzs7V0FHRztRQUNRLHVCQUFrQixHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTNELHdCQUFtQixHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBUXZFLENBQUM7SUFFRDs7T0FFRztJQUNILFFBQVE7SUFFUixDQUFDO0lBRUQ7O09BRUc7SUFDSCxTQUFTO1FBQ1AsSUFBSSxDQUFDLG9CQUFvQixHQUFHLFlBQVksQ0FBQyxPQUFPLENBQUMsc0JBQXNCLENBQUMsQ0FBQztJQUMzRSxDQUFDO0lBRUQ7OztNQUdFO0lBQ0YsV0FBVyxDQUFDLElBQVk7UUFDdEIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBRUQsb0JBQW9CLENBQUMsSUFBUTtRQUM1Qix1Q0FBdUM7SUFDeEMsQ0FBQztDQUdGLENBQUE7QUFuRFU7SUFBUixLQUFLLEVBQUU7cURBTU47QUFNUztJQUFULE1BQU0sRUFBRTtrRUFBNEQ7QUFFM0Q7SUFBVCxNQUFNLEVBQUU7bUVBQTZEO0FBbEM1RCxzQkFBc0I7SUFMbEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLDJCQUEyQjtRQUNyQyxvbjJCQUE4Qzs7S0FFL0MsQ0FBQztHQUNXLHNCQUFzQixDQXVFbEM7U0F2RVksc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LE91dHB1dCwgRXZlbnRFbWl0dGVyICB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBld0ZvbnRGYW1pbHlUeXBlcyB9IGZyb20gJy4uLy4uLy4uL2NvbnN0YW50cy93ZWJpbmFyLWV2ZW50LWNvZGVzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZXctZWxlbWVudC1idXR0b24tc2lkZWJhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi1zaWRlYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24tc2lkZWJhci5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEJ1dHRvblNpZGViYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAvKipcclxuICAgKiBDdXJyZW50IFByZXZpZXcgTGF5b3V0IFxyXG4gICAqL1xyXG4gIHB1YmxpYyBjdXJyZW50UHJldmlld0xheW91dDpzdHJpbmcgPSBcImRlc2t0b3BcIjtcclxuICAvKipcclxuICAgKiBGb250IEZhbWlsdHkgb3B0aW9ucyBjb25zdGFudFxyXG4gICAqL1xyXG4gIHB1YmxpYyBmb250RmFtaWx5T3B0aW9ucyA6IGFueSA9IGV3Rm9udEZhbWlseVR5cGVzXHJcblxyXG4gIC8qKlxyXG4gICAqIE1vYmlsZSB2ZXJzaW9uIG9mIHRvcCBtYXJnaW5zXHJcbiAgICovXHJcbiAgcHVibGljIHRvcE1hcmdpbldlYk1vYmlsZUJpbmQ6Ym9vbGVhbiA9IHRydWU7XHJcbiAgcHVibGljIGZvbnRTaXplV2ViTW9iaWxlQmluZDpib29sZWFuID0gdHJ1ZTtcclxuICAvKipcclxuICAgKiBJbnB1dFxyXG4gICAqIEBwYXJhbSBtb2RlbFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBtb2RlbDoge1xyXG4gICAgZm9jdXNlZDogYm9vbGVhbixcclxuICAgIHR5cGU6IHN0cmluZyxcclxuICAgIG1ldGFfZGF0YTogYW55LFxyXG4gICAgc2lkZWJhcl9hY3RpdmU6IHN0cmluZyxcclxuICAgIHBhZ2U6IHN0cmluZyxcclxuICB9O1xyXG5cclxuICAvKipcclxuICAgKiBPdXRwdXRcclxuICAgKiBAcGFyYW0gRXZlbnRcclxuICAgKi9cclxuICAgQE91dHB1dCgpIG9uU2lkZWJhckJhY2tDbGljazogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICBAT3V0cHV0KCkgY2FsbFBhcmVudENvbnRhaW5lcjogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgXHJcbiAgLyoqXHJcbiAgICogY29uc3RydWN0b3JcclxuICAgKi9cclxuICBjb25zdHJ1Y3RvcihcclxuICApIHsgXHJcbiAgICBcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIE5nT25pbnQgaG9va1xyXG4gICAqL1xyXG4gIG5nT25Jbml0KCk6IHZvaWQgeyAgIFxyXG4gICBcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEdldCB0aGUgY3VycmVudCB2YWx1ZSBvZiBQcmV2aWV3IExheW91dCBzdHlsZVxyXG4gICAqL1xyXG4gIG5nRG9DaGVjaygpIHtcclxuICAgIHRoaXMuY3VycmVudFByZXZpZXdMYXlvdXQgPSBsb2NhbFN0b3JhZ2UuZ2V0SXRlbSgnY3VycmVudFByZXZpZXdMYXlvdXQnKTtcclxuICB9XHJcblxyXG4gIC8qXHJcbiAgKiBjbG9zZSB0aGUgc2lkZWJhclxyXG4gICogQHBhcmFtIHR5cGU6b3B0aW9uIHBhcmFtXHJcbiAgKi9cclxuICBzaWRlYmFyQmFjayh0eXBlPzpzdHJpbmcpOiB2b2lkIHsgXHJcbiAgICB0aGlzLm9uU2lkZWJhckJhY2tDbGljay5lbWl0KHR5cGUpOyAgICBcclxuICB9XHJcblxyXG4gIGNhbGxFbGVtZW50Q29udGFpbmVyKGRhdGE6YW55KTp2b2lke1xyXG4gICAvLyB0aGlzLmNhbGxQYXJlbnRDb250YWluZXIuZW1pdChkYXRhKTtcclxuICB9XHJcblxyXG5cclxufVxyXG4iXX0=