import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ewFontFamilyTypes } from '../../../constants/webinar-event-codes';
import { EwMaDesignService } from '../../../ew-ma-design.service';
var EventScheduleSidebarComponent = /** @class */ (function () {
    /**
     * constructor
     */
    function EventScheduleSidebarComponent(designService) {
        this.designService = designService;
        /**
         * Current Preview Layout
         */
        this.currentPreviewLayout = "desktop";
        /**
         * Current Page
         */
        this.currentPage = "register";
        /**
         * Font Familty options constant
         */
        this.fontFamilyOptions = ewFontFamilyTypes;
        /**
         * Output to trigger sidebar panel
         */
        this.onChangeSidebarOptions = new EventEmitter();
        this.showBackFor = '';
        this.onSidebarBackClick = new EventEmitter();
        this.callParentContainer = new EventEmitter();
        this.topMarginWebMobileBind = true;
        this.DTFontSizeWebMobileBind = true;
        this.TZFontSizeWebMobileBind = true;
        this.instant_replay = "";
    }
    /**
     * NgOnint hook
     */
    EventScheduleSidebarComponent.prototype.ngOnInit = function () {
        this.scheduleData = this.designService.getScheduleData();
        this.instant_replay = this.scheduleData['first_option_schedules'];
    };
    /**
     * Get the current value of Preview Layout style
     */
    EventScheduleSidebarComponent.prototype.ngDoCheck = function () {
        this.currentPreviewLayout = localStorage.getItem('currentPreviewLayout');
        this.currentPage = localStorage.getItem('currentPage');
    };
    /**
     * @description
     * Show/hide Count Down box
     */
    EventScheduleSidebarComponent.prototype.toggleScheduleCheckbox = function () {
        this.model.meta_data.event_schedule_toggle = !this.model.meta_data.event_schedule_toggle;
    };
    /**
     * @description
     * Show/hide Count Down box
     */
    EventScheduleSidebarComponent.prototype.toggleCountDownCheckbox = function () {
        this.model.meta_data.event_countdown_toggle = !this.model.meta_data.event_countdown_toggle;
    };
    /**
     * @description
     * Back sidebar for Popup options only
     */
    EventScheduleSidebarComponent.prototype.sidebarBack = function (type) {
        this.onSidebarBackClick.emit();
    };
    /*
    * OnChange of Color Picker
    */
    EventScheduleSidebarComponent.prototype.changeColorPicker = function (event) {
        this.model.meta_data.event_schedule_bg_color = event;
    };
    /*
    * Checking the value is undefined or not
    */
    EventScheduleSidebarComponent.prototype.isUndefined = function (val) { return typeof val === 'undefined'; };
    EventScheduleSidebarComponent.prototype.callElementContainer = function (data) {
        //this.callParentContainer.emit(data);
    };
    EventScheduleSidebarComponent.ctorParameters = function () { return [
        { type: EwMaDesignService }
    ]; };
    __decorate([
        Output()
    ], EventScheduleSidebarComponent.prototype, "onChangeSidebarOptions", void 0);
    __decorate([
        Input()
    ], EventScheduleSidebarComponent.prototype, "showBackFor", void 0);
    __decorate([
        Output()
    ], EventScheduleSidebarComponent.prototype, "onSidebarBackClick", void 0);
    __decorate([
        Output()
    ], EventScheduleSidebarComponent.prototype, "callParentContainer", void 0);
    __decorate([
        Input()
    ], EventScheduleSidebarComponent.prototype, "model", void 0);
    EventScheduleSidebarComponent = __decorate([
        Component({
            selector: 'ew-element-event-schedule-sidebar',
            template: "<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.SCHEDULE' | 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\"  #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        <!-- <div class=\"builder-resolution-change\">\r\n            <button mat-button [matMenuTriggerFor]=\"menu6\"><mat-icon>\r\n                laptop \r\n                </mat-icon>\r\n                <span class=\"keyword-errow\">\r\n                    <mat-icon>keyboard_arrow_down</mat-icon>\r\n                </span>\r\n            </button>\r\n            <mat-menu #menu6=\"matMenu\" class=\"builder-change-resolution-items\">\r\n              <button mat-menu-item><mat-icon>\r\n                laptop\r\n                </mat-icon></button>\r\n              <button mat-menu-item><mat-icon>\r\n                smartphone\r\n                </mat-icon></button>\r\n            </mat-menu>\r\n        </div> -->\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\t\t\t<div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.MARGIN_LABEL' | translate}}</span></div>\r\n            \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.event_schedule_margin_top\"  (input)=\"(model?.meta_data.event_schedule_margin_top=$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.event_schedule_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                \r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TOP_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_event_schedule_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 [value]=\"model?.meta_data.mobile_event_schedule_margin_top\" (input)=\"(model?.meta_data.mobile_event_schedule_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_event_schedule_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.event_schedule_width\"  (input)=\"(model?.meta_data.event_schedule_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.event_schedule_width}} %</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n            \r\n            \r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.SCHEDULE' | translate }}</span>\r\n                <!-- <div class=\"ew-toggle-button\">\r\n                    <div class=\"toggle-button-cover\">\r\n                        <div class=\"button-cover\">\r\n                        <div class=\"button b3\" id=\"button-ew\">\r\n                            <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleScheduleCheckbox()\">\r\n                            <div class=\"knobs\">\r\n                            <span></span>\r\n                            </div>\r\n                            <div class=\"layer\"></div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                </div> -->\r\n            </div>\r\n            <div class=\"builder-elements-outer\"                \r\n            >\r\n                <ew-control-google-fonts-select\r\n                    [fontControlName]=\"'event_schedule_fonts'\"\r\n                    [variantControlName]=\"'font_variant'\"\r\n                    [model]=\"model?.meta_data\"\r\n                ></ew-control-google-fonts-select>\r\n\r\n\r\n                <div class=\"element-builder-row  padding-elements-30-top\"\r\n                    *ngIf=\"(((scheduleData.single_schedule == '') && (scheduleData.dates_array.length)) && this.currentPreviewLayout=='desktop')\"\r\n                >\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATETIME_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.event_schedule_select_font_size\"  (input)=\"(model?.meta_data.event_schedule_select_font_size=$event.value);\"  min=\"14\" max=\"40\" step=\"1\"></mat-slider>\r\n                            \r\n                        </span>\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_select_font_size}} PX</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row padding-elements-30-top \"\r\n                    \r\n                    *ngIf=\"(((scheduleData.single_schedule == '') && (scheduleData.dates_array.length)) && this.currentPreviewLayout=='mobile')\" > \r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATETIME_FONT_SIZE' | 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.event_schedule_mobile_select_font_size\" (input)=\"(model?.meta_data.event_schedule_mobile_select_font_size = $event.value)\"\r\n                                min=\"10\" max=\"40\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n                        <span class=\"value-count-slider\">\r\n                            {{ model?.meta_data.event_schedule_mobile_select_font_size }} 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                    *ngIf=\"((scheduleData?.single_schedule !== '' || (instant_replay.length && scheduleData.dates_array.length==0)) && this.currentPreviewLayout=='desktop')\"\r\n                >\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATETIME_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.event_schedule_datetime_font_size\"  (input)=\"(model?.meta_data.event_schedule_datetime_font_size=$event.value);\"  min=\"10\" max=\"100\" step=\"1\"></mat-slider>\r\n                            <!-- (DTFontSizeWebMobileBind && model.meta_data.event_schedule_datetime_mobile_font_size = $event.value)-->\r\n                        </span>\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_datetime_font_size}} PX</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row padding-elements-30-top \"\r\n                    \r\n                    *ngIf=\"((scheduleData?.single_schedule !== '' || (instant_replay.length && scheduleData.dates_array.length==0)) && this.currentPreviewLayout=='mobile')\"\r\n                > <!-- ew-mobile-property-bind [ngClass]=\"{'ew-mobile-bind-active' : DTFontSizeWebMobileBind == false}\"-->\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATETIME_FONT_SIZE' | translate }}</span>\r\n                    <!--    <mat-icon (click)=\"DTFontSizeWebMobileBind = false\" class=\"ew-on-property\">insert_link</mat-icon>\r\n                        <mat-icon (click)=\"DTFontSizeWebMobileBind = true; model.meta_data.event_schedule_datetime_mobile_font_size = model.meta_data.event_schedule_datetime_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 [value]=\"model?.meta_data.event_schedule_datetime_mobile_font_size\" (input)=\"(model?.meta_data.event_schedule_datetime_mobile_font_size = $event.value)\"\r\n                                min=\"10\" max=\"40\" step=\"1\">\r\n                            </mat-slider>\r\n                        </span>\r\n                        <span class=\"value-count-slider\">\r\n                            {{ model?.meta_data.event_schedule_datetime_mobile_font_size }} PX\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <ng-template [ngIf]=\"(scheduleData?.single_schedule !== '' || (instant_replay.length && scheduleData.dates_array.length==0))\">\r\n                    <div class=\"element-builder-row padding-elements-30-top\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TIMEZONE_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.event_schedule_timezone_font_size\"  (input)=\"(model?.meta_data.event_schedule_timezone_font_size=$event.value);\"  min=\"10\" max=\"100\" step=\"1\"></mat-slider>\r\n                            </span>\r\n                            <!-- (TZFontSizeWebMobileBind && model.meta_data.event_schedule_timezone_mobile_font_size = $event.value)-->\r\n                            <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_timezone_font_size}} PX</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"element-builder-row padding-elements-30-top\" *ngIf=\"(this.currentPreviewLayout=='mobile')\"> <!-- padding-elements-30-top ew-mobile-property-bind [ngClass]=\"{'ew-mobile-bind-active' : TZFontSizeWebMobileBind == false}\"-->\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TIMEZONE_FONT_SIZE' | translate }}</span>\r\n                        <!--    <mat-icon (click)=\"TZFontSizeWebMobileBind = false\" class=\"ew-on-property\">insert_link</mat-icon>\r\n                            <mat-icon (click)=\"TZFontSizeWebMobileBind = true; model.meta_data.event_schedule_timezone_mobile_font_size = model.meta_data.event_schedule_timezone_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 [value]=\"model?.meta_data.event_schedule_timezone_mobile_font_size\" (input)=\"(model?.meta_data.event_schedule_timezone_mobile_font_size = $event.value)\"\r\n                                    min=\"10\" max=\"40\" step=\"1\">\r\n                                </mat-slider>\r\n                            </span>\r\n                            <span class=\"value-count-slider\">\r\n                                {{ model?.meta_data.event_schedule_timezone_mobile_font_size }} PX\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\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.event_schedule_box_align\">\r\n                                <mat-option value=\"margin-right:auto;\">Left</mat-option>\r\n                                <mat-option value=\"margin-left:auto;margin-right:auto;\">Center</mat-option>\r\n                                <mat-option value=\"margin-left:auto;\">Right</mat-option>\r\n                            </mat-select>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n                <ng-template  [ngIf]=\"currentPage == 'thank_you' || currentPage == 'waiting_area'\">\r\n                    <div class=\"element-builder-row padding-elements-30-top\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATE_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\" floatLabel=\"never\">\r\n                                \r\n                                <input matInput type=\"text\"\r\n                                    [cpPosition]=\"'top'\"\r\n                                    [cpAlphaChannel]=\"'disableAlpha'\"\r\n                                    [cpOutputFormat]=\"'auto'\"\r\n                                    [colorPicker]=\"model?.meta_data.event_schedule_date_bg_color\"                                          \r\n                                    (colorPickerChange)=\"model.meta_data.event_schedule_date_bg_color=$event\"\r\n                                    [(ngModel)]=\"model?.meta_data.event_schedule_date_bg_color\"\r\n                                />\r\n                                <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_date_bg_color\"></span>\r\n                            </mat-form-field>\r\n        \r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div class=\"element-builder-row padding-elements-30-top\">\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.DATETIME_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                            \r\n                            <input matInput type=\"text\"\r\n                                [cpPosition]=\"'top'\"\r\n                                [cpOutputFormat]=\"'auto'\" \r\n                                [cpAlphaChannel]=\"'disableAlpha'\" \r\n                                [colorPicker]=\"model?.meta_data.event_schedule_datetime_color\"                                          \r\n                                (colorPickerChange)=\"model.meta_data.event_schedule_datetime_color=$event\"\r\n                                [(ngModel)]=\"model?.meta_data.event_schedule_datetime_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_datetime_color\"></span>\r\n                        </mat-form-field>\r\n    \r\n                    </div>\r\n                </div>\r\n                <div class=\"element-builder-row padding-elements-30-top\"\r\n                    *ngIf=\"(scheduleData?.single_schedule !== '' || (instant_replay.length && scheduleData.dates_array.length==0))\"\r\n                >\r\n                    <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TIMEZONE_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.event_schedule_timezone_color\"                                          \r\n                                (colorPickerChange)=\"model.meta_data.event_schedule_timezone_color=$event\"\r\n                                [(ngModel)]=\"model?.meta_data.event_schedule_timezone_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_timezone_color\"></span>\r\n                        </mat-form-field>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- <div class=\"builder-elements-outer ew-mobile-elements \">\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>Date/Time Font Size</span>\r\n                        <div class=\"mat-slider-outer-part common-builder-right slider-2-digit\">\r\n    \r\n                            <span class=\"mat-slider-inner\">\r\n                                <mat-slider [value]=\"model?.meta_data.event_schedule_datetime_mobile_font_size\" (input)=\"model.meta_data.event_schedule_datetime_mobile_font_size = $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.event_schedule_datetime_mobile_font_size }}px\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n            \r\n            \r\n            <!-- <div class=\"builder-elements-outer ew-mobile-elements\">\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>Timezone Font Size</span>\r\n                        <div class=\"mat-slider-outer-part common-builder-right slider-2-digit\">\r\n    \r\n                            <span class=\"mat-slider-inner\">\r\n                                <mat-slider [value]=\"model?.meta_data.event_schedule_timezone_mobile_font_size\" (input)=\"model.meta_data.event_schedule_timezone_mobile_font_size = $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.event_schedule_timezone_mobile_font_size }}px\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n\r\n            \r\n            \r\n            <ng-template [ngIf]=\"currentPage == 'register'\">\r\n                <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.COUNTDOWN' | translate }}</span><div class=\"ew-toggle-button\">\r\n                        <div class=\"toggle-button-cover\">\r\n                            <div class=\"button-cover\">\r\n                            <div class=\"button b3\" id=\"button-ew\">\r\n                                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleCountDownCheckbox()\">\r\n                                <div class=\"knobs\">\r\n                                <span></span>\r\n                                </div>\r\n                                <div class=\"layer\"></div>\r\n                            </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"builder-elements-outer\"\r\n                    [style.display]=\"(this.model.meta_data.event_countdown_toggle) ? 'none':'block'\"\r\n                >\r\n                    \r\n                    <div class=\"element-builder-row\">\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.event_schedule_countdown_style\">\r\n                                    <mat-option value=\"normal\">Normal</mat-option>\r\n                                    <mat-option value=\"boxed\">Boxed</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-20-top\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.COUNTDOWN_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.event_schedule_countdown_font_size\"  (input)=\"(model?.meta_data.event_schedule_countdown_font_size=$event.value);\"  min=\"17\" max=\"40\" step=\"1\"></mat-slider>\r\n                            </span>\r\n                            \r\n                            <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_countdown_font_size}} PX</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"element-builder-row padding-elements-20-top\" *ngIf=\"(this.currentPreviewLayout=='mobile')\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.COUNTDOWN_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.event_schedule_mobile_countdown_font_size\"  (input)=\"(model?.meta_data.event_schedule_mobile_countdown_font_size=$event.value);\"  min=\"8\" max=\"30\" step=\"1\"></mat-slider>\r\n                            </span>\r\n                            \r\n                            <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_mobile_countdown_font_size}} PX</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"element-builder-row design-view-countdow-fields\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.LABELS' | translate }}</span>\r\n                        <div class=\"common-builder-right\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col m6 s6\">\r\n                                    <div class=\"bottom-custom-design-fields\">\r\n                                        <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                            <input matInput  [(ngModel)]=\"model?.meta_data.event_schedule_countdown_days\">\r\n                                        </mat-form-field>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col m6 s6\">\r\n                                    <div class=\"bottom-custom-design-fields\">\r\n                                        <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                            <input matInput  [(ngModel)]=\"model?.meta_data.event_schedule_countdown_hours\">\r\n                                        </mat-form-field>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col m6 s6\">\r\n                                    <div class=\"bottom-custom-design-fields\">\r\n                                        <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                            <input matInput  [(ngModel)]=\"model?.meta_data.event_schedule_countdown_minutes\">\r\n                                        </mat-form-field>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col m6 s6\">\r\n                                    <div class=\"bottom-custom-design-fields\">\r\n                                        <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                                            <input matInput  [(ngModel)]=\"model?.meta_data.event_schedule_countdown_seconds\">\r\n                                        </mat-form-field>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"element-builder-row padding-elements-20-top\" *ngIf=\"(this.currentPreviewLayout=='desktop')\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.COUNTDOWN_LABEL_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.event_schedule_countdown_label_font_size\"  (input)=\"(model?.meta_data.event_schedule_countdown_label_font_size=$event.value);\"  min=\"8\" max=\"14\" step=\"1\"></mat-slider>\r\n                            </span>\r\n                            \r\n                            <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_countdown_label_font_size}} PX</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"element-builder-row padding-elements-20-top\" *ngIf=\"(this.currentPreviewLayout=='mobile')\">\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.COUNTDOWN_LABEL_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.event_schedule_mobile_countdown_label_font_size\"  (input)=\"(model?.meta_data.event_schedule_mobile_countdown_label_font_size=$event.value);\"  min=\"8\" max=\"14\" step=\"1\"></mat-slider>\r\n                            </span>\r\n                            \r\n                            <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_mobile_countdown_label_font_size}} PX</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.TIME_UNIT_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.event_schedule_countdown_time_units_color\"                                          \r\n                                    (colorPickerChange)=\"model.meta_data.event_schedule_countdown_time_units_color=$event\"\r\n                                    [(ngModel)]=\"model?.meta_data.event_schedule_countdown_time_units_color\"\r\n                                />\r\n                                <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_countdown_time_units_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                        *ngIf=\"(model?.meta_data.event_schedule_countdown_style == 'boxed')\"\r\n                    >\r\n                        <span class=\"builder-elements-name\">{{ 'BUILDER.ELEMENTS.TIME_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.event_schedule_countdown_time_color\"                                          \r\n                                    (colorPickerChange)=\"model.meta_data.event_schedule_countdown_time_color=$event\"\r\n                                    [(ngModel)]=\"model?.meta_data.event_schedule_countdown_time_color\"\r\n                                />\r\n                                <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_countdown_time_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.LABEL_COLORS' | 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.event_schedule_countdown_labels_color\"                                          \r\n                                    (colorPickerChange)=\"model.meta_data.event_schedule_countdown_labels_color=$event\"\r\n                                    [(ngModel)]=\"model?.meta_data.event_schedule_countdown_labels_color\"\r\n                                />\r\n                                <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_countdown_labels_color\"></span>\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </div>\r\n                </div>            \r\n            </ng-template>\r\n\r\n            <div class=\"advance-title-sec-box\"><span class=\"title-advance-box\">{{ 'BUILDER.ELEMENTS.ELEMENT_BOX_LABEL' | translate }}</span></div>\r\n            <div class=\"builder-elements-outer\">\r\n                \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                             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?.event_schedule_bg_color\"                                \r\n                                (colorPickerChange)=\"changeColorPicker($event)\"\r\n                                [ngModel]=\"model.meta_data?.event_schedule_bg_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" \r\n                            [ngClass]=\"{'transparent-color-ew': (isUndefined(model.meta_data?.event_schedule_bg_color) || model.meta_data?.event_schedule_bg_color.slice(-2,-1) == '0') }\" \r\n                            [style.background-color]=\"model?.meta_data.event_schedule_bg_color\"></span>\r\n                        </mat-form-field>\r\n    \r\n                    </div>\r\n                </div>\r\n            </div>\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.event_schedule_padding_top\" (input)=\"model?.meta_data.event_schedule_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.event_schedule_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.event_schedule_padding_right\" (input)=\"model?.meta_data.event_schedule_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.event_schedule_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.event_schedule_padding_bottom\" (input)=\"model?.meta_data.event_schedule_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.event_schedule_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.event_schedule_padding_left\" (input)=\"model?.meta_data.event_schedule_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.event_schedule_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.event_schedule_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.event_schedule_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.event_schedule_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.event_schedule_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.event_schedule_radius\"  (input)=\"(model?.meta_data.event_schedule_radius=$event.value)\"  min=\"0\" max=\"20\" step=\"1\"></mat-slider>\r\n                        </span>\r\n                        \r\n                        <span class=\"value-count-slider\">{{model?.meta_data.event_schedule_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.event_schedule_border_directions\">\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                                \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.event_schedule_border_directions != '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.event_schedule_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.event_schedule_border_directions != '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.event_schedule_border_size\"  (input)=\"(model?.meta_data.event_schedule_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.event_schedule_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.event_schedule_border_directions != '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.event_schedule_border_color\"                                          \r\n                                (colorPickerChange)=\"model.meta_data.event_schedule_border_color=$event\"\r\n                                [(ngModel)]=\"model?.meta_data.event_schedule_border_color\"\r\n                            />\r\n                            <span class=\"color-picker-box\" [style.background-color]=\"model?.meta_data.event_schedule_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        </div>\r\n    </div>\r\n</div>",
            styles: [""]
        })
    ], EventScheduleSidebarComponent);
    return EventScheduleSidebarComponent;
}());
export { EventScheduleSidebarComponent };
//# sourceMappingURL=data:application/json;base64, 