WebBuild/wwwroot/platform/layout/components/layoutbuilder/layoutbuilder.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Layouts;
        (function (Layouts) {
            let Components;
            (function (Components) {
                class LayoutBuilder extends Unibase.Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.ThemeId = 0;
                        this.activeMode = "";
                        this.Thumbnail = '';
                        this.BackgroundImageId = 0;
                        this.modes = [];
                        this.layoutSettings = [];
                        this.isLayoutSettingsModified = false;
                        this.Logo = Unibase.Themes.Compact.Components.Index.Instance().Logo;
                        this.isModeButtonClicked = false;
                        this.backgroundImageSimplebar = ".layoutbuilder-simple-scroll-bar .simplebar-content-wrapper";
                        this.primaryItem = '#myColorTabContent #primary .colors-wrap .color-box';
                        this.secondaryItem = '#myColorTabContent #secondary .colors-wrap .color-box';
                        this.highLightItem = '#myColorTabContent #highlight .colors-wrap .color-box';
                        this.primaryTextItem = '#myTextColorTabContent #primaryText .colors-wrap .color-box';
                        this.secondaryTextItem = '#myTextColorTabContent #secondaryText .colors-wrap .color-box';
                        this.buttonMode = '#dipsplay-modes-section .buttons-wrap button.mode-btn';
                        this.customModeInputSection = '#dipsplay-modes-section .custom-mode-section .custom-mode-input-section';
                        this.customModeInput = '#dipsplay-modes-section .custom-mode-section input.custom-mode-input';
                        this.layoutElement = '.layout-builder #menu-layouts .card-body .row.layout-row a';
                        this.detailsViewElement = '.layout-builder #detail-list-view .card-body .row.detail-row a';
                        this.backgroundImageElement = '.layout-builder #background-image-view .card-body .row a';
                        this.logoElementLeft = '.layout-builder-dashboard .biz-submenu .brand-img';
                        this.logoElementTop = '.layout-builder-dashboard .top-navbar .brand-img';
                        this.defaultDisplayModes = [];
                        this.instance = this;
                    }
                    cssFiles() {
                        return [
                            'libs/dragula/dist/style.css',
                            'platform/layout/components/layoutbuilder/style.layoutbuilder.css',
                            "libs/spectrum-2.0.8/dist/spectrum.css"
                        ];
                    }
                    jsFiles() {
                        return [
                            "platform/layout/managers/themelayoutmanager.js",
                            "libs/dragula/dist/dragula.min.js",
                            "libs/dragula/dist/init.js",
                            "libs/spectrum-2.0.8/dist/spectrum.js",
                        ];
                    }
                    html(id, containerid) {
                        var instance = this;
                        let html = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().loadTemplate();
                        return html;
                    }
                    load(formId, containerid, callback) {
                        $('.color-pickr-container').each((index, picker) => {
                            let colorType = $(picker).attr('data-name');
                            $(`.sp-container.${colorType}`).remove();
                        });
                        let instance = this;
                        instance.isLayoutSettingsModified = false;
                        instance.isModeButtonClicked = false;
                        $(".btn-layout-builder-close").click(function () {
                            $('.biz-wrapper').removeClass('.biz-drawer-push biz-drawer-pushright');
                            $('#' + containerid).modal('hide');
                            $('#' + containerid).remove();
                        });
                        instance.addDefaultDisplayModes();
                        instance.fileCacheHelper.loadJsFile('platform/core/infos/status.js', function () { });
                        Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(0, 0).then(function (response) {
                            $(".preloader-it").delay(1000).fadeIn("slow");
                            let result = response.result;
                            if (result != null) {
                                instance.currentTheme = response.result.CurrentTheme;
                                let result = response.result.LayoutInfo;
                                for (var i = 0; i < result.length; i++) {
                                    let curLayout = result[i];
                                    let layoutId = curLayout.LayoutId;
                                    curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                    $(".layout-builder #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">
                                        <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                    let elementId = "layoutPreviewHtml_" + layoutId;
                                    let divHtml = "<div id='" + elementId + "' class='d-none layoutpreviewhtml'> </div>";
                                    $(curLayout.AppendTo).prepend(divHtml);
                                    if (curLayout.PreviewHtml.includes('%3')) {
                                        $("#" + elementId).append(HtmlHelper.getHelper().decode(curLayout.PreviewHtml));
                                    }
                                    else {
                                        $("#" + elementId).append(curLayout.PreviewHtml);
                                    }
                                }
                                result = response.result.LayoutSettings;
                                if (result) {
                                    instance.layoutSettings = [];
                                    for (let i = 0; i < result.length; i++) {
                                        let layoutSetting = result[i];
                                        let layoutSettingObj = {
                                            LayoutId: layoutSetting.LayoutId,
                                            SettingValue: layoutSetting.SettingValue,
                                            logoImgUrl: layoutSetting.LogoImageUrl,
                                            IsOverrideLogo: layoutSetting.IsOverrideLogo
                                        };
                                        instance.layoutSettings.push(layoutSettingObj);
                                    }
                                }
                                $(instance.layoutElement).click(function () {
                                    $(instance.layoutElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.LayoutId = id;
                                    let elementId = "layoutPreviewHtml_" + id;
                                    $(".layoutpreviewhtml").addClass('d-none');
                                    $("#" + elementId).removeClass('d-none');
                                    $(".layout-builder-dashboard").removeClass('biz-layout-3-preview');
                                    let layoutIndex = Number($(this).attr('data-index'));
                                    if (layoutIndex == 3)
                                        $(".layout-builder-dashboard").addClass('biz-layout-3-preview');
                                    if (instance.isLayoutSettingsModified) {
                                        bootbox.confirm({
                                            message: "Do you want to save previous layout settings?",
                                            className: "layout-builder-bootbox",
                                            callback: function (result) {
                                                if (result) {
                                                    instance.getLayoutSettings();
                                                    MessageHelper.Instance().showSuccess('Layout Settings Saved!', '');
                                                    instance.appendLayoutSettings(id);
                                                }
                                                else {
                                                    instance.logoFileData = null;
                                                    instance.appendLayoutSettings(id);
                                                }
                                                instance.isLayoutSettingsModified = false;
                                            }
                                        });
                                    }
                                    else {
                                        instance.appendLayoutSettings(id);
                                    }
                                });
                                result = response.result.DetailViewInfo;
                                for (var i = 0; i < result.length; i++) {
                                    let viewLayout = result[i];
                                    let id = viewLayout.DetailsViewId;
                                    $(".layout-builder #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                        <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                    var elementId = "detailsViewPreviewHtml_" + id;
                                    var divHtml = "<div id='" + elementId + "' class='d-none detailsviewpreviewhtml'> </div>";
                                    $(".layout-builder-dashboard #bizgaze_body .biz-wrapper .biz-pg-wrapper ._bizgaze_detail_container").append(divHtml);
                                    $("#" + elementId).append(viewLayout.PreviewHtml);
                                }
                                $(instance.detailsViewElement).click(function () {
                                    $(instance.detailsViewElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.viewId = id;
                                    let elementId = "detailsViewPreviewHtml_" + id;
                                    $(".detailsviewpreviewhtml").addClass('d-none');
                                    $("#" + elementId).removeClass('d-none');
                                });
                                $('.isStructSettingsEnableChk').on('click', function () {
                                    var msg, enable;
                                    enable = !$('.isStructSettingsEnableChk').prop("checked");
                                    if ($('.isStructSettingsEnableChk').prop("checked")) {
                                        msg = 'Are you sure enable structures in apps or details page ?';
                                    }
                                    else {
                                        msg = 'Are you sure? Do you want to disable structures? <br><br> All structures and layouts of widgets will be missing.You need to reconfigure.';
                                    }
                                    bootbox.confirm({
                                        message: msg,
                                        closeButton: false,
                                        buttons: {
                                            confirm: {
                                                label: 'OK',
                                                className: 'btn-success'
                                            },
                                            cancel: {
                                                label: 'Cancel',
                                                className: 'btn-danger'
                                            }
                                        },
                                        callback: function (result) {
                                            return __awaiter(this, void 0, void 0, function* () {
                                                if (result) {
                                                    $('.isStructSettingsEnableChk').prop("checked", $('.isStructSettingsEnableChk').prop("checked"));
                                                }
                                                else {
                                                    $('.isStructSettingsEnableChk').prop("checked", enable);
                                                }
                                            });
                                        }
                                    });
                                });
                                $('.isStructSettingsEnableChk').prop("checked", Unibase.Themes.Compact.Components.Index.Instance().currentTheme.isstructenable);
                                instance.loadColorPalettes();
                                result = response.result.DisplayModesInfo;
                                for (let i = 0; i < result.length; i++) {
                                    let DisplayMode = result[i];
                                    let DisplayModeName = result[i].DisplayModeName;
                                    if (DisplayModeName != null) {
                                        if (DisplayModeName.toLowerCase() == "light" || DisplayModeName.toLowerCase() == "dark") {
                                            let iconClass = DisplayModeName.toLowerCase() == "light" ? "fa-sun-o text-warning" : "fa-moon-o";
                                            instance.appendDisplayMode(iconClass, DisplayMode);
                                        }
                                        else {
                                            instance.appendDisplayMode("", DisplayMode);
                                        }
                                    }
                                }
                                instance.enableButtonModeClick();
                                let themeobj = Unibase.Platform.Membership.Infos.Identity.currentUser.settings.find(x => x.settingName == "themeobj").settingValue;
                                if (themeobj != null && themeobj != "" && themeobj != undefined) {
                                    instance.currentTheme = themeobj;
                                    let currentTheme = themeobj;
                                    instance.ThemeId = currentTheme.themeId;
                                    instance.Thumbnail = currentTheme.thumbnail;
                                    instance.BackgroundImageId = currentTheme.backgroundImageId;
                                    instance.LayoutId = currentTheme.layoutId;
                                    instance.viewId = currentTheme.detailsViewId;
                                    $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                    $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                    $(`${instance.buttonMode}[data-id="${currentTheme.displayModeId}"]`).click();
                                    if (currentTheme != null) {
                                        if (currentTheme.thumbnail != "" && currentTheme.thumbnail != null) {
                                            if (currentTheme.thumbnail.includes('tenants\\default\\layoutbuilder\\backgroundimages')) {
                                                let imageUrl = `'${instance.currentTheme.thumbnail.replace(/\\/g, "/")}'`;
                                                instance.applyBackgroundImage(imageUrl);
                                            }
                                            else {
                                                Unibase.Themes.Compact.Components.Index.Instance().getImageUrl(currentTheme.thumbnail).then(function (imageUrl) {
                                                    instance.applyBackgroundImage(imageUrl);
                                                });
                                            }
                                        }
                                    }
                                    $('#imagepickerThumbnail').change(function (e) {
                                        let file = e;
                                        var t = file.target.files[0].type.split('/').pop().toLowerCase();
                                        if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
                                            MessageHelper.Instance().showError('Please select a valid image file', 'layoutBuilderErrMsg');
                                            $("#imagepickerThumbnail").val('');
                                            return false;
                                        }
                                        Unibase.Platform.Helpers.FileHelper.Instance().getBase64(e).then(function (response) {
                                            instance.imageUploadEffect(response);
                                            $("#imagepickerThumbnail").val('');
                                        });
                                    });
                                }
                                $(instance.logoElementLeft).attr('src', instance.Logo);
                                $(instance.logoElementTop).attr('src', instance.Logo);
                                instance.appendBackgroundImages(response.result.BackgroundImages);
                            }
                            $(".preloader-it").delay(1000).fadeOut("slow");
                            let el = $(".custom-scollable-container .simplebar-content-wrapper")[0];
                            instance.addScrollOnDrag(el);
                            $('.layout-builder').removeClass('d-none');
                        });
                        $('#dipsplay-modes-section .custom-mode-section button.custom-mode-btn').click(function () {
                            $(instance.customModeInputSection).toggleClass('d-none');
                            if (!$(instance.customModeInputSection).hasClass('d-none')) {
                                $($(instance.customModeInput)[0]).focus();
                            }
                        });
                        $(instance.customModeInput).on('keypress', function (e) {
                            if (e.which == 13) {
                                instance.addDisplayMode();
                            }
                        });
                        if (callback !== null) {
                            callback();
                        }
                    }
                    addDisplayMode() {
                        let instance = this;
                        let DisplayModeName = $(instance.customModeInput).val().toString();
                        if (DisplayModeName != '') {
                            let isExists = false;
                            for (let key in instance.modes) {
                                let text = instance.modes[key].DisplayModeName.toLowerCase();
                                if (text == DisplayModeName.toLowerCase()) {
                                    isExists = true;
                                    break;
                                }
                            }
                            if (!isExists) {
                                let postData = {
                                    DisplayModeId: 0,
                                    DisplayModeName: DisplayModeName,
                                    PrimaryColor: "black",
                                    SecondaryColor: "black",
                                    HighlightColor: "#7b6464",
                                    PrimaryTextColor: "white",
                                    SecondaryTextColor: "black",
                                };
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveDisplayMode(postData).then(function (response) {
                                    if (response.result != null) {
                                        if (response.status == Unibase.Data.Status.Success) {
                                            MessageHelper.Instance().showSuccess(response.message, '');
                                            instance.appendDisplayMode("", response.result);
                                            $(instance.customModeInput).val('');
                                            $(instance.customModeInputSection).addClass('d-none');
                                        }
                                    }
                                });
                            }
                        }
                    }
                    addDefaultDisplayModes() {
                        const instance = this;
                        instance.defaultDisplayModes['Default'] = { PrimaryColor: 'rgb(42, 46, 51)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(0, 176, 255)', PrimaryTextColor: 'rgb(242, 231, 231)', SecondaryTextColor: '"rgb(15, 15, 15)', TransparentPrimaryColor: 'rgb(42, 46, 51)' };
                        instance.defaultDisplayModes['Pine Green'] = { PrimaryColor: 'rgb(0, 109, 119)', SecondaryColor: 'rgb(131, 197, 190)', HighlightColor: 'rgb(2, 82, 89)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(0, 109, 119)' };
                        instance.defaultDisplayModes['Blue'] = { PrimaryColor: 'rgb(55, 80, 217)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(26, 43, 130)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(55, 80, 217)' };
                        instance.defaultDisplayModes['Dark Grey'] = { PrimaryColor: 'rgb(25, 63, 100)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(11, 41, 70)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(25, 63, 100)' };
                        instance.defaultDisplayModes['Light Blue'] = { PrimaryColor: 'rgb(47, 114, 190)', SecondaryColor: 'rgb(195, 233, 248)', HighlightColor: 'rgb(25, 88, 159)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(47, 114, 190)' };
                        instance.defaultDisplayModes['Pink'] = { PrimaryColor: 'rgb(243, 39, 110)', SecondaryColor: 'rgb(246, 248, 249)', HighlightColor: 'rgb(206, 16, 82)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(0, 0, 0)' };
                    }
                    resetDisplayMode() {
                        const instance = this;
                        const displayModeName = $('#dipsplay-modes-section .mode-btn.active').attr('data-name');
                        const displayModeSettings = instance.defaultDisplayModes[displayModeName];
                        for (const property in displayModeSettings) {
                            $(`#color-picker-${property}`).val(displayModeSettings[property]);
                            const elem = $(`#color-picker-${property}`);
                            elem.spectrum("set", displayModeSettings[property]).trigger('change');
                        }
                        MessageHelper.Instance().showSuccess('Display Mode reset successful.', '');
                        $(`#displayModeResetBtn`).blur();
                    }
                    enableColorPicker() {
                        let instance = this;
                        $('.color-pickr-container').each((index, picker) => {
                            let colorType = $(picker).attr('data-name');
                            let activeColor = instance.modes[instance.activeMode][colorType];
                            let element = $(`.color-pickr-container[data-name="${colorType}"] #color-picker-${colorType}`);
                            if ($(`.sp-container.${colorType}`).length) {
                                if (activeColor == 'none' || activeColor == '')
                                    activeColor = 'black';
                                element.val(activeColor).trigger('change');
                                return;
                            }
                            element.spectrum({
                                color: activeColor,
                                type: "color",
                                showInput: true,
                                maxSelectionSize: 1,
                                showInitial: true,
                                allowEmpty: false,
                                showAlpha: true,
                                disabled: false,
                                localStorageKey: false,
                                showPaletteOnly: false,
                                togglePaletteOnly: false,
                                clickoutFiresChange: true,
                                containerClassName: colorType,
                                replacerClassName: colorType,
                                showPalette: true,
                                palette: [
                                    ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                                    ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                                    ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                                    ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                                    ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                                    ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                                    ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                                    ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
                                ],
                                showSelectionPalette: true,
                                selectionPalette: ["red", "green", "blue"],
                                locale: 'fr',
                                togglePaletteMoreText: 'More',
                                togglePaletteLessText: 'Less',
                                clearText: "",
                                noColorSelectedText: "",
                                showButtons: true,
                                chooseText: "Choose",
                                cancelText: "Cancel",
                                move: function (color) {
                                    let convertedColor = color.toRgbString();
                                    instance.modes[instance.activeMode][colorType] = convertedColor;
                                    let colorList = convertedColor.match(/\((.*?)\)/)[1].split(',');
                                    let opacity = 0;
                                    let opacityElement = $(`.sp-container.${colorType} .sp-picker-container .sp-input-container input.opacity`);
                                    if (colorList.length > 3) {
                                        opacity = Number(colorList[3]) * 100;
                                        opacityElement.val(opacity.toFixed(2) + " %");
                                        opacityElement.removeClass('d-none');
                                    }
                                    else {
                                        opacityElement.addClass('d-none');
                                    }
                                    if (instance.isModeButtonClicked == false)
                                        instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                                },
                                hide: function (color) {
                                    $(this).trigger('change');
                                }
                            });
                            let colorPickerContainer = $(`.sp-container.${colorType} .sp-picker-container .sp-input-container`);
                            colorPickerContainer.addClass('d-flex').append(`<input type="text" class="opacity" title="Opacity" value="0%" disabled/>`);
                            colorPickerContainer.find('.sp-input').trigger('change');
                        });
                        instance.isModeButtonClicked = false;
                    }
                    enableButtonModeClick() {
                        $('body style.colorClasses').remove();
                        let instance = this;
                        $(instance.buttonMode).unbind('click');
                        $(instance.buttonMode).click(function () {
                            $(instance.buttonMode).removeClass('active');
                            $(this).addClass('active');
                            let modeName = $(this).attr('data-class');
                            if (modeName == 'custom') {
                                instance.unhideDisplayModes();
                            }
                            else {
                            }
                            instance.activeMode = $(this).find('.btn-text').html();
                            instance.activeDisplayModeId = Number($(this).attr('data-id'));
                            instance.isModeButtonClicked = true;
                            instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                            instance.enableColorPicker();
                            let paletteId = instance.modes[instance.activeMode].PaletteId;
                            if (paletteId === 0) {
                                paletteId = '';
                            }
                            $('#palettesSelect').val(paletteId).trigger('change');
                            if (instance.defaultDisplayModes[instance.activeMode]) {
                                $('#displayModeResetBtn').removeClass('d-none');
                            }
                            else {
                                $('#displayModeResetBtn').addClass('d-none');
                            }
                        });
                    }
                    appendBackgroundImages(backgroundImages) {
                        let instance = this;
                        let backGroundImagescrollBar = `#background-image-view .dropdown-menu-scrollbar`;
                        backgroundImages.forEach((backgroundImage) => {
                            let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                            $(".layout-builder #background-image-view .row").append(`<a href="javascript:;" class="col-6 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                        <div class="p-relative">
                                            <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                            <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                <i class="fa fa-trash"></i> 
                                            </div>
                                        </div>
                                        <i class="zmdi zmdi-check"></i>
                                </a>`);
                            $(backGroundImagescrollBar).animate({ scrollTop: $(backGroundImagescrollBar).prop("scrollHeight") });
                            $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"]`).click(function (e) {
                                if ($(this).hasClass('active')) {
                                    $(this).removeClass('active');
                                    $($(instance.backgroundImageSimplebar)[0]).css('background-image', '').removeClass('background-image');
                                    instance.Thumbnail = "";
                                    instance.BackgroundImageId = 0;
                                    instance.unhideDisplayModes();
                                    instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                                }
                                else {
                                    $(instance.backgroundImageElement).removeClass('active');
                                    $(this).addClass('active');
                                    let img = $(this).find('img').attr('src');
                                    instance.Thumbnail = $(this).attr('data-url');
                                    instance.BackgroundImageId = Number($(this).attr('data-id'));
                                    if (img.includes('tenants\\default\\layoutbuilder\\backgroundimages')) {
                                        let imageUrl = `'${img.replace(/\\/g, "/")}'`;
                                        instance.applyBackgroundImage(imageUrl);
                                    }
                                    else {
                                        instance.applyBackgroundImage(img);
                                    }
                                }
                            });
                            $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"] .delete`).click(function (e) {
                                e.stopPropagation();
                                let imageId = Number($(this).attr('data-id'));
                                let postData = { BackgroundImageId: imageId };
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().deleteBackgroundImage(postData).then(function (response) {
                                    if (response.status == Unibase.Data.Status.Success)
                                        $(`${instance.backgroundImageElement}[data-id="${imageId}"]`).remove();
                                });
                            });
                            if (backgroundImage.Thumbnail == instance.Thumbnail)
                                $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"]`).addClass('active');
                        });
                    }
                    appendOrRemoveCss(defaultColors) {
                        let instance = this;
                        if (instance.Thumbnail != "") {
                            instance.unhideTransperentPrimaryTab();
                        }
                        else {
                            instance.hideTransperentPrimaryTab();
                        }
                        let colors = Object.create(defaultColors);
                        $('body style#layoutBuilderColorStyles').remove();
                        let layoutBuilderColors = `<style id="layoutBuilderColorStyles">

                        /* First Left Layout Start */

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-submenu {
	                            background: ${colors.PrimaryColor} !important; /* Transperent Color*/
                                opacity: 0.95;
                            }
                            

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-main-menu,
                            .layout-builder-dashboard .top-navbar nav.navbar {
	                            background: ${colors.PrimaryColor} !important;
                            }

                            @media (max-width: 1199px) {
                                body.background-image .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-main-menu,
                                body.background-image .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-submenu {
	                                background: ${colors.PrimaryColor} !important;
                                }
                            }

                            .layout-builder-dashboard ._bizgaze_detail_container,
                            .layout-builder-dashboard .biz-pg-wrapper{
                                background: ${colors.SecondaryColor} !important;
                            }

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-main-menu .menu-content-wrap > .navbar-nav > .nav-item.sunbnav-active > .nav-link .nav-icon-wrap,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-highlight-color .navbar-nav li.active-item {
	                            background-color: ${colors.HighlightColor} !important;
                            }
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-main-menu .menu-content-wrap > .navbar-nav > .nav-item > .nav-link .nav-icon-wrap,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-header span,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-header a,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-options-container ul li a {
	                            color: ${colors.PrimaryTextColor} !important
                            }
                            
                            .layout-builder-dashboard .biz-pg-wrapper {
                                color: ${colors.SecondaryTextColor} !important;
                            }

                            /* Second Top Layout Start*/

                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav nav.navbar.biz-primary-color,
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapsing,
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapse {
	                            background: ${colors.PrimaryColor} !important;
                            }

                            .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapsing,
                            .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapse {
                                background: ${colors.TransparentPrimaryColor} !important;
                            } 
                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color .navbar-nav-wrap ul li a,
                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color ul.navbar-nav.hk-navbar-content li.nav-item a.nav-link span {
	                            color: ${colors.PrimaryTextColor} !important
                            }

                            /* Third Left Layout Start */
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-vertical-nav .hk-navbar.biz-primary-color nav.hk-nav {
                                background: ${colors.PrimaryColor} !important;
                            }

                            /* .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-vertical-nav.biz-layout-3-top-navbar-preview .hk-navbar.biz-primary-color nav.hk-nav {
                                background: ${colors.TransparentPrimaryColor} !important;
                            } */

                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color .navbar-toggle-btn {
                                color: ${colors.PrimaryTextColor} !important
                            }`;
                        layoutBuilderColors += `
                                
                
                        </style>`;
                        $('body').prepend(layoutBuilderColors);
                    }
                    appendDisplayMode(iconClass, displayMode) {
                        let instance = this;
                        let DisplayModeName = displayMode.DisplayModeName;
                        let DisplayModeId = displayMode.DisplayModeId;
                        let button = "";
                        if (iconClass != "") {
                            button = `<button class="btn mode-btn btn-outline btn-wth-icon icon-left mb-15 mr-2 p-relative" data-class="${DisplayModeName}" data-id="${DisplayModeId}"><span><span class="icon-label"><span class="fa ${iconClass}"></span></span><span class="btn-text">${DisplayModeName}</span></span></button>`;
                        }
                        else {
                            button = `<button class="btn mode-btn btn-outline text-dark mb-15 mr-2 p-relative" data-class="custom" data-id="${DisplayModeId}" data-name="${DisplayModeName}"><span class="btn-text">${DisplayModeName}</span><i class="zmdi zmdi-close delete" data-id="${DisplayModeId}" data-name="${DisplayModeName}"></i></button>`;
                        }
                        $('#dipsplay-modes-section .buttons-wrap').append(button);
                        let mode = {
                            "DisplayModeId": DisplayModeId,
                            "DisplayModeName": DisplayModeName,
                            "PrimaryColor": displayMode.PrimaryColor,
                            "TransparentPrimaryColor": displayMode.TransparentPrimaryColor,
                            "SecondaryColor": displayMode.SecondaryColor,
                            "HighlightColor": displayMode.HighlightColor,
                            "PrimaryTextColor": displayMode.PrimaryTextColor,
                            "SecondaryTextColor": displayMode.SecondaryTextColor,
                            "PaletteId": displayMode.PaletteId
                        };
                        instance.modes[DisplayModeName] = mode;
                        instance.enableButtonModeClick();
                        $(`${instance.buttonMode} .delete[data-id="${DisplayModeId}"]`).click(function (e) {
                            e.stopPropagation();
                            let element = $(this);
                            bootbox.confirm('Are you sure you want to delete?', function (result) {
                                if (result) {
                                    let displayModeId = Number(element.attr('data-id'));
                                    let DisplayModeName = element.attr('data-name');
                                    if (DisplayModeName == "Default")
                                        return;
                                    let postData = { DisplayModeId: displayModeId };
                                    Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().deleteDisplayMode(postData).then(function (response) {
                                        if (response.status == Unibase.Data.Status.Success) {
                                            delete instance.modes[DisplayModeName];
                                            $(`${instance.buttonMode}[data-id="${displayModeId}"]`).remove();
                                            MessageHelper.Instance().showSuccess(response.message, '');
                                        }
                                        else if (response.status == Unibase.Data.Status.Error) {
                                            MessageHelper.Instance().showError(response.message, 'layoutBuilderErrMsg');
                                        }
                                    });
                                }
                            });
                        });
                    }
                    loadColorPalettes() {
                        const instance = this;
                        instance.fileCacheHelper.loadJsFile("apps/crm/palettes/managers/palettemanager.js", function () {
                            const palettemanager = Bizgaze.Apps.Crm.Palettes.Managers.PaletteManager.Instance();
                            palettemanager.getPallettes().then(function (pallresponse) {
                                const palettedata = [];
                                if (pallresponse.result) {
                                    for (const palette of pallresponse.result) {
                                        palettedata.push({ id: palette.paletteid, text: palette.name });
                                    }
                                }
                                $("#palettesSelect").select2({
                                    placeholder: 'Select Palette',
                                    data: palettedata,
                                    allowClear: true,
                                }).on('select2:select select2:clear', function () {
                                    const selectedPalette = +$(this).val();
                                    instance.modes[instance.activeMode].PaletteId = selectedPalette;
                                });
                                const paletteId = instance.modes[instance.activeMode].PaletteId;
                                if (paletteId != 0) {
                                    $('#palettesSelect').val(paletteId).trigger('change');
                                }
                            });
                        });
                    }
                    appendLayoutSettings(layoutId) {
                        const instance = this;
                        const navParentGroupsArr = ['dashboards', 'apps', 'reports', 'isStructures'];
                        let layoutNavHtml = '';
                        navParentGroupsArr.map(navGroup => {
                            layoutNavHtml += `<li class="nav-group-item">
                                        <div class="enable-settings-control d-flex justify-content-between align-items-center mb-10 pl-0">
                                          <label class="nav-group-label font-weight-500 text-capitalize mb-0" for="${navGroup}SettingsEnableChk" data-group="${navGroup}">${navGroup}</label>
                                          <input type="checkbox" class="nav-settings-input" id="${navGroup}SettingsEnableChk" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().toggleLayoutNavSettings('${navGroup}')">
                                        </div>
										<div class="group-options-wrap d-none" id="${navGroup}SettingsWrap">
											<div class="nav-group-option d-flex justify-content-between mb-10">
												<span>Icon</span>
												<label class="switch mb-0" for="${navGroup}IconChk"><input id="${navGroup}IconChk" type="checkbox" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeLayoutNavSetting('${navGroup}','icon')"><span></span></label>
											</div>
											<div class="nav-group-option d-flex justify-content-between mb-10">
												<span>Title</span>
												<label class="switch mb-0" for="${navGroup}TitleChk"><input id="${navGroup}TitleChk" type="checkbox" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeLayoutNavSetting('${navGroup}','title')"><span></span></label>
											</div>
										</div>
									</li>`;
                        }).join('');
                        $('#navParentGroupsList').html(layoutNavHtml).attr('data-layoutid', layoutId);
                        $('#isStructuresSettingsWrap').siblings('.enable-settings-control').addClass('hidden');
                        $('#isStructuresSettingsWrap').remove();
                        let layoutLogoHtml = `<input type="file" class="logo-upload-input mt-15" id="logoUploadInput" accept="image/*" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().layoutLogoUpload(event);">
									<div id="layoutLogoWrap" class="layout-logo-wrap mt-15 d-none">
										<img id="layoutLogoPreview" src="" alt="your image" class="img-fluid layout-logo-preview" data-dynamic="1" onerror="ReloadImage(event)"/>
                                        <a href="javascript:;" class="delete" id="layoutLogoDeleteBtn" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().deleteLayoutLogo(${layoutId});">
                                            <i class="fa fa-trash"></i>
                                        </a>
									</div>
									<div class="logo-override-chk-wrap d-flex justify-content-between mt-15">
										<span class="font-weight-500 text-capitalize">Override Company Logo</span>
										<label class="switch mb-0" for="logoOverrideChk"><input type="checkbox" class="logo-override-chk" id="logoOverrideChk" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeOverrideLogoSetting()"><span></span></label>
									</div>`;
                        $('#logoSettingsBody').html(layoutLogoHtml).attr('data-layoutid', layoutId);
                        instance.bindLayoutSettings(layoutId);
                    }
                    bindLayoutSettings(layoutId) {
                        const instance = this;
                        if (instance.layoutSettings.length != 0) {
                            let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                            if (layoutArrIndex != -1) {
                                const settingValues = JSON.parse(instance.layoutSettings[layoutArrIndex].SettingValue);
                                $.each(settingValues, function (key, obj) {
                                    let navGroup = key.toString();
                                    if (obj.IsEnabled) {
                                        $(`#${navGroup}SettingsEnableChk`).prop('checked', true);
                                        $(`#${navGroup}SettingsWrap`).removeClass('d-none');
                                    }
                                    if (obj.Icon) {
                                        $(`#${navGroup}IconChk`).prop('checked', true);
                                    }
                                    if (obj.Title) {
                                        $(`#${navGroup}TitleChk`).prop('checked', true);
                                    }
                                });
                                let logoImageUrl = instance.layoutSettings[layoutArrIndex].logoImgUrl;
                                if (logoImageUrl == "") {
                                    const logoData = instance.layoutSettings[layoutArrIndex].LogoData;
                                    if (logoData)
                                        logoImageUrl = `data:image/${logoData.FileType};base64,${logoData.FileData}`;
                                }
                                const isOverrideLogo = instance.layoutSettings[layoutArrIndex].IsOverrideLogo;
                                if (logoImageUrl) {
                                    $('#layoutLogoPreview').attr('src', logoImageUrl).parent().removeClass('d-none');
                                    $('#logoOverrideChk').prop({ 'disabled': false, 'checked': isOverrideLogo });
                                }
                                else {
                                    $('#logoOverrideChk').prop('disabled', true);
                                }
                            }
                            else {
                                $(`#navParentGroupsList`).find('.nav-settings-input').prop('checked', true).trigger('change');
                                instance.isLayoutSettingsModified = false;
                            }
                        }
                        else {
                            $(`#navParentGroupsList`).find('.nav-settings-input').not('#isStructuresSettingsEnableChk').prop('checked', true).trigger('change');
                            instance.isLayoutSettingsModified = false;
                        }
                    }
                    toggleLayoutNavSettings(navGroup) {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                        if ($(`#${navGroup}SettingsEnableChk`).is(':checked')) {
                            $(`#${navGroup}SettingsWrap`).removeClass('d-none');
                            $(`#${navGroup}SettingsWrap`).find('input:checkbox').prop('checked', true);
                        }
                        else {
                            $(`#${navGroup}SettingsWrap`).addClass('d-none');
                            $(`#${navGroup}SettingsWrap`).find('input:checkbox').prop('checked', false);
                        }
                    }
                    onChangeLayoutNavSetting(navGroup, setting) {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                        let isAllSettingsChecked = false;
                        $(`#${navGroup}SettingsWrap input:checkbox`).each(function (i, e) {
                            if ($(e).is(':checked')) {
                                isAllSettingsChecked = true;
                            }
                        });
                        if (isAllSettingsChecked) {
                            $(`#${navGroup}SettingsEnableChk`).prop('checked', true);
                        }
                    }
                    getLayoutSettings() {
                        const instance = this;
                        let layoutSettingObj = {};
                        const selectedLayoutId = Number($('#navParentGroupsList').attr('data-layoutid'));
                        if (!selectedLayoutId) {
                            return;
                        }
                        $('#navParentGroupsList .nav-group-label').each(function (i, e) {
                            let navGroup = $(e).attr('data-group');
                            layoutSettingObj[navGroup] = {
                                IsEnabled: $(`#${navGroup}SettingsEnableChk`).is(':checked'),
                                Icon: $(`#${navGroup}IconChk`).is(':checked'),
                                Title: $(`#${navGroup}TitleChk`).is(':checked')
                            };
                        });
                        let layoutsettings = {
                            LayoutId: selectedLayoutId,
                            SettingValue: JSON.stringify(layoutSettingObj),
                            LogoData: instance.logoFileData,
                            IsOverrideLogo: $('#logoOverrideChk').is(':checked')
                        };
                        let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == selectedLayoutId);
                        if (layoutArrIndex != -1) {
                            instance.layoutSettings[layoutArrIndex].SettingValue = layoutsettings.SettingValue;
                            instance.layoutSettings[layoutArrIndex].LogoData = layoutsettings.LogoData;
                            instance.layoutSettings[layoutArrIndex].IsOverrideLogo = layoutsettings.IsOverrideLogo;
                            instance.layoutSettings[layoutArrIndex].logoImgUrl = "";
                        }
                        else {
                            instance.layoutSettings.push(layoutsettings);
                        }
                        instance.logoFileData = null;
                    }
                    layoutLogoUpload(e) {
                        const instance = this;
                        const layoutId = Number($('#logoSettingsBody').attr('data-layoutid'));
                        const inputEl = document.getElementById('logoUploadInput');
                        const fileType = inputEl.files[0].type.split('/').pop().toLowerCase();
                        if (fileType != "jpeg" && fileType != "jpg" && fileType != "png" && fileType != "bmp" && fileType != "gif") {
                            MessageHelper.Instance().showError('Please select a valid image file', 'layoutBuilderErrMsg');
                            $("#logoUploadInput").val('');
                            return false;
                        }
                        else {
                            const [file] = inputEl.files;
                            if (file) {
                                const reader = new FileReader();
                                reader.onload = function () {
                                    $('#layoutLogoPreview').attr('src', `${reader.result}`).parent().removeClass('d-none');
                                };
                                if (file) {
                                    reader.readAsDataURL(file);
                                }
                                Unibase.Platform.Helpers.FileHelper.Instance().getBase64(e).then(function (response) {
                                    instance.logoFileData = response;
                                    let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                                    if (layoutArrIndex != -1) {
                                        instance.layoutSettings[layoutArrIndex].LogoData = instance.logoFileData;
                                        instance.layoutSettings[layoutArrIndex].isLogoDelete = false;
                                    }
                                });
                                $('#logoOverrideChk').prop('disabled', false);
                                instance.isLayoutSettingsModified = true;
                            }
                        }
                    }
                    onChangeOverrideLogoSetting() {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                    }
                    deleteLayoutLogo(layoutId) {
                        const instance = this;
                        $('#layoutLogoPreview').attr('src', '').parent().addClass('d-none');
                        $('#logoOverrideChk').prop('checked', false).attr("disabled", 'true');
                        let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                        if (layoutArrIndex != -1) {
                            instance.layoutSettings[layoutArrIndex].isLogoDelete = true;
                        }
                        instance.isLayoutSettingsModified = true;
                    }
                    saveTheme() {
                        let instance = this;
                        let modes = [];
                        for (let key in this.modes) {
                            let displayMode = this.modes[key];
                            let mode = {
                                DisplayModeId: displayMode["DisplayModeId"],
                                DisplayModeName: displayMode.DisplayModeName,
                                PrimaryColor: displayMode["PrimaryColor"],
                                TransparentPrimaryColor: displayMode["TransparentPrimaryColor"],
                                SecondaryColor: displayMode["SecondaryColor"],
                                HighlightColor: displayMode["HighlightColor"],
                                PrimaryTextColor: displayMode["PrimaryTextColor"],
                                SecondaryTextColor: displayMode["SecondaryTextColor"],
                                PaletteId: displayMode["PaletteId"],
                            };
                            modes.push(mode);
                        }
                        this.instance.getLayoutSettings();
                        let postData = {
                            ThemeId: this.ThemeId,
                            LayoutId: this.LayoutId,
                            DetailsViewId: this.viewId,
                            DisplayModeId: this.activeDisplayModeId,
                            BackgroundImageId: this.BackgroundImageId,
                            DisplayModes: modes,
                            LayoutSettings: this.layoutSettings,
                            isStructEnable: $('.isStructSettingsEnableChk').prop("checked")
                        };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveTheme(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success) {
                                MessageHelper.Instance().showSuccess(response.message, '');
                                instance.refrshLayout(response);
                            }
                        });
                    }
                    refrshLayout(response) {
                        let result = response.result;
                        var themeobj = Unibase.Platform.Membership.Infos.Identity.getCurrentUser().settings.find(x => x.settingName == "themeobj").settingValue;
                        let layoutSettingsObj = {
                            settingValue: result.LayoutSettings,
                            isOverrideLogo: result.IsOverrideLogo,
                            logoImageUrl: result.LogoImageUrl
                        };
                        var isAppStructureEnable = Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable;
                        if (result.IsStructEnable != undefined) {
                            isAppStructureEnable = result.IsStructEnable;
                        }
                        if (themeobj != null && themeobj != "" && themeobj != undefined) {
                            let resultObj = {
                                layoutId: result.LayoutId,
                                layoutIndex: result.LayoutIndex,
                                layoutName: result.LayoutName,
                                layoutHtmlPath: result.LayoutHtmlPath,
                                detailsViewId: result.DetailsViewId,
                                detailsViewIndex: result.DetailsViewIndex,
                                thumbnail: result.Thumbnail,
                                primaryColor: result.PrimaryColor,
                                secondaryColor: result.SecondaryColor,
                                highlightColor: result.HighlightColor,
                                primaryTextColor: result.PrimaryTextColor,
                                secondaryTextColor: result.SecondaryTextColor,
                                transparentPrimaryColor: result.TransparentPrimaryColor,
                                displayModeId: result.DisplayModeId,
                                backgroundImageId: result.BackgroundImageId,
                                themeId: result.ThemeId,
                                layoutSettings: layoutSettingsObj,
                                isstructenable: isAppStructureEnable,
                                paletteId: result.PaletteId
                            };
                            var newobj = Unibase.Platform.Membership.Infos.Identity.getCurrentUser();
                            newobj.settings.find(x => x.settingName == "themeobj").settingValue = resultObj;
                            Unibase.Platform.Membership.Infos.Identity.setCurrentUser(newobj);
                            if (isMobileApp()) {
                                Unibase.Platform.Helpers.MobileHelper.Instance().redirectToLogin();
                            }
                            else {
                                window.location.href = '#/welcome';
                                window.location.reload();
                            }
                        }
                    }
                    applyBackgroundImage(imageURL) {
                        let instance = this;
                        instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                        $($(instance.backgroundImageSimplebar)[0]).css('background-image', 'url(' + imageURL + ')').addClass('background-image');
                    }
                    imageUploadEffect(imageFile) {
                        let instance = this;
                        $('.layout-builder .background-change .progress-wrap').removeClass('d-none');
                        $('.layout-builder .background-change .progress-wrap').addClass('d-flex');
                        let i = 0;
                        let isUploadCompleted = false;
                        let uploadTimer = setInterval(() => {
                            if (isUploadCompleted == true) {
                                clearInterval(uploadTimer);
                                $('.layout-builder .background-change .progress-wrap .progress .progress-bar').width(0 + '%');
                                $('.layout-builder .background-change .progress-wrap .progress-text').html(0 + '%');
                                $('.layout-builder .background-change .progress-wrap').removeClass('d-flex');
                                $('.layout-builder .background-change .progress-wrap').addClass('d-none');
                            }
                            else {
                                $('.layout-builder .background-change .progress-wrap .progress .progress-bar').width(i + '%');
                                $('.layout-builder .background-change .progress-wrap .progress-text').html(i + '%');
                                if (i < 99)
                                    i++;
                            }
                        }, 100);
                        let postData = { BackgroundImageId: 0, FileData: imageFile };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveBackgroundImage(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success && response.result != null) {
                                isUploadCompleted = true;
                                let imageItem = response.result;
                                instance.Thumbnail = imageItem.Thumbnail;
                                instance.BackgroundImageId = imageItem.BackgroundImageId;
                                $(`${instance.backgroundImageElement}`).removeClass('active');
                                instance.appendBackgroundImages([imageItem]);
                                Unibase.Themes.Compact.Components.Index.Instance().getImageUrl(instance.Thumbnail).then(function (imageUrl) {
                                    instance.applyBackgroundImage(imageUrl);
                                });
                            }
                        });
                    }
                    hideTransperentPrimaryTab() {
                        $(".background-colors ul.nav-tabs li[title='Transparent Primary']").addClass('d-none');
                    }
                    unhideTransperentPrimaryTab() {
                        $(".background-colors ul.nav-tabs li[title='Transparent Primary']").removeClass('d-none');
                    }
                    hideDisplayModes() {
                        $(".layout-builder .drawer-body .background-colors").addClass('d-none');
                        $(".layout-builder .drawer-body .text-colors").addClass('d-none');
                    }
                    unhideDisplayModes() {
                        $(".layout-builder .drawer-body .background-colors").removeClass('d-none');
                        $(".layout-builder .drawer-body .text-colors").removeClass('d-none');
                    }
                    addScrollOnDrag(el) {
                        let x = 0, y = 0, top = 0, left = 0;
                        let draggingFunction = (e) => {
                            document.addEventListener('mouseup', () => {
                                document.removeEventListener("mousemove", draggingFunction);
                            });
                            el.scrollLeft = left - e.pageX + x;
                            el.scrollTop = top - e.pageY + y;
                            el.style.cursor = 'grab';
                            el.style.removeProperty('user-select');
                        };
                        el.addEventListener('mousedown', (e) => {
                            e.preventDefault();
                            el.style.cursor = 'grabbing';
                            el.style.userSelect = 'none';
                            y = e.pageY;
                            x = e.pageX;
                            top = el.scrollTop;
                            left = el.scrollLeft;
                            document.addEventListener('mousemove', draggingFunction);
                        });
                    }
                    loadBuilder(formId, installedAppId, appConfigurationId) {
                        var formbuilderinstance = LayoutBuilder.Instance();
                        formbuilderinstance.init();
                    }
                    init() {
                        var instance = this;
                        instance.render();
                    }
                    render() {
                        var layoutBuilder = Unibase.Platform.Layouts.Components.LayoutBuilder.Instance();
                        this.navigationHelper.popup(0, '', layoutBuilder, function (containerid) {
                        }, Platform.Helpers.Size.ExtraLarge);
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new LayoutBuilder();
                        }
                        return this.instance;
                    }
                }
                Components.LayoutBuilder = LayoutBuilder;
            })(Components = Layouts.Components || (Layouts.Components = {}));
        })(Layouts = Platform.Layouts || (Platform.Layouts = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));