import { Component, ViewChild } from "@angular/core";
import StiRectangleGeometryLayout from "../../computed/StiRectangleGeometryLayout";
import * as i0 from "@angular/core";
import * as i1 from "../../services/model.service";
import * as i2 from "../../services/sti-helper.service";
import * as i3 from "../../services/sti-draggable.service";
import * as i4 from "../../services/sti-export.service";
import * as i5 from "../../services/theme.service";
import * as i6 from "../../services/sti-localization.service";
import * as i7 from "../../services/sti-toolbox.service";
import * as i8 from "../../services/http-client.service";
import * as i9 from "../../services/sti-user-service";
import * as i10 from "../../services/sti-form-checker.service";
import * as i11 from "@angular/common";
import * as i12 from "./navbar.home-ribbon.component";
import * as i13 from "./navbar.file-ribbon.component";
import * as i14 from "./navbar.insert-ribbon.component";
import * as i15 from "../sti-tooltip/sti-tooltip.directive";
export class NavbarComponent {
    get editButtonRight() {
        return (this.saveButton?.nativeElement.offsetWidth ?? 0) + 20;
    }
    get componentHeight() {
        if (this.model.viewerMode) {
            return 0;
        }
        else if (this.model.pdfPreviewMode || this.model.previewMode) {
            return 38;
        }
        else
            return 93;
    }
    getClass(ribbon) {
        return this.model.ribbon == ribbon ? "current" : "other";
    }
    setEvent(event) {
        if (event == "Share") {
            this.httpService.post("", { action: "InterfaceEvent", event: "ShareButtonClick" }).subscribe(() => { });
        }
        else if (event == "Publish") {
            this.httpService.post("", { action: "InterfaceEvent", event: "PublishButtonClick" }).subscribe(() => { });
        }
        else if (event == "Login") {
            this.httpService.post("", { action: "InterfaceEvent", event: "LoginButtonClick" }).subscribe(() => { });
        }
        else if (event == "Signup") {
            this.httpService.post("", { action: "InterfaceEvent", event: "SignUpButtonClick" }).subscribe(() => { });
        }
    }
    setRibbon(ribbon) {
        this.model.ribbon = ribbon;
    }
    onSetRibbon(ribbon, oldRibbon) {
        if (ribbon == "PDFPreview" || ribbon == "File") {
            this.model.currentFormState = this.model.form.saveToReportJsonObject().serialize();
        }
        if ((this.model.isWebView || this.model.embeddedMode) && ribbon == "File") {
            this.httpService.post("", { action: "InterfaceEvent", event: "RibbonFileClick" }).subscribe(() => { });
            this.model.ribbon = oldRibbon;
        }
        else {
            if (ribbon == "File") {
                this.model.currentSelectedFileOption = "Open";
            }
        }
        this.model.showTrialLog();
    }
    save() {
        if (this.model.isWebView || this.model.embeddedMode || this.model.isCloudMode) {
            let form = this.model.form.saveToJsonObject().serialize();
            this.httpService.post("", { action: "InterfaceEvent", event: "SaveButtonClick", form: form }).subscribe(() => { });
        }
        else {
            this.setRibbon("File");
            this.model.currentSelectedFileOption = "SaveAs";
        }
    }
    showInfo(event, type) {
        let elements = document.elementsFromPoint(event.clientX, event.clientY);
        let element = elements.find((element) => element?.classList.contains("localization")) ||
            elements.find((element) => element?.classList.contains("user-info"));
        let elementRect = this.model.getPositionRelativeToForm(element);
        this.userService.previewY = elementRect.bottom;
        if (type == "Localization") {
            this.userService.showLocalizationPreview = true;
            this.userService.previewX = elementRect.right - (this.loc.localizationList?.length > 0 ? 465 : 155);
        }
        else {
            this.userService.showUserInfo = true;
            this.userService.previewX = elementRect.right - 351;
        }
    }
    sendExportEvent() {
        if (this.model.isWebView) {
            this.httpService.post("", { action: "InterfaceEvent", event: "ExportButtonClick" }).subscribe(() => { });
        }
        else if (this.model.isCloudMode && !this.model.viewerMode) {
            this.model.showSaveDialogFromCloud = true;
        }
        else {
            this.showPdfOption();
        }
    }
    constructor(model, helper, draggableService, exportService, render, theme, loc, toolboxService, httpService, userService, formCheckerService) {
        this.model = model;
        this.helper = helper;
        this.draggableService = draggableService;
        this.exportService = exportService;
        this.render = render;
        this.theme = theme;
        this.loc = loc;
        this.toolboxService = toolboxService;
        this.httpService = httpService;
        this.userService = userService;
        this.formCheckerService = formCheckerService;
        this.disabled = true;
    }
    ngOnDestroy() {
        this.startPdfEventSubscription?.unsubscribe();
        this.setFormEventSubscription?.unsubscribe();
    }
    editForm() {
        let cloudParams = {
            demomode: true,
            localizationName: "en",
            themeName: "Office2022WhiteBlue",
            isForm: true,
            reportName: this.helper.base64Encode(this.model.form.formName),
        };
        let win_ = window.open("about:blank");
        let doc = win_ ? win_.document : document;
        this.httpService.postForm("https://designer.stimulsoft.com/", {
            designerParams: this.helper.base64Encode(JSON.stringify(cloudParams)),
        }, doc, true);
    }
    showPdfOption() {
        this.exportService.showModalWindow = !this.exportService.showModalWindow;
    }
    ngOnInit() {
        this.model.form?.pages.length == 1 ? (this.disabled = true) : (this.disabled = false);
        this.setFormEventSubscription = this.model.formEvents.subscribe((e) => {
            if (e.name == "SetForm") {
                this.setDefaultTab();
            }
            else if (e.name == "ShowFileMenu") {
                this.setRibbon("File");
            }
            else if (e.name == "ShowSaveMenu") {
                this.setRibbon("File");
                this.model.currentSelectedFileOption = "SaveAs";
            }
            else if (e.name == "ShowTab") {
                this.setRibbon(e.value);
            }
        });
        this.model.interfaceEvent.subscribe((e) => {
            if (e.name == "setRibbon") {
                this.onSetRibbon(e.data.ribbon, e.data.oldRibbon);
            }
        });
        this.startPdfEventSubscription = this.model.startPdfExportEvent.subscribe(() => {
            this.setRibbon("Preview");
            this.showPdfOption();
        });
    }
    setDefaultTab() {
        let defaultSettingsTab = this.model.settings?.defaultTab;
        let tab = defaultSettingsTab == "Home" || defaultSettingsTab == "Insert" || defaultSettingsTab == "Preview" || defaultSettingsTab == "PDFPreview" ?
            defaultSettingsTab : "Home";
        this.model.ribbon = tab;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiDraggableService }, { token: i4.StiExportService }, { token: StiRectangleGeometryLayout }, { token: i5.StiThemeService }, { token: i6.StiLocalizationService }, { token: i7.StiToolboxService }, { token: i8.StiHttpClientService }, { token: i9.StiUserService }, { token: i10.StiFormCheckerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "sti-navbar", viewQueries: [{ propertyName: "saveButton", first: true, predicate: ["saveButton"], descendants: true }], ngImport: i0, template: "<div class=\"navbar\" [style.visibility]=\"model.viewerMode ? 'hidden' : 'visible'\" [style.height.px]=\"componentHeight\">\r\n  <div\r\n    class=\"navigation\"\r\n    [style.border-bottom]=\"\r\n      model.previewMode && !model.viewerMode ? '1px solid rgb(224,224,224)' : '1px solid transparent'\r\n    \"\r\n  >\r\n    <div\r\n      class=\"image-container\"\r\n      *ngIf=\"model.previewMode && model.showEditButton\"\r\n      [style.right.px]=\"editButtonRight\"\r\n      [style.visibility]=\"'visible'\"\r\n      [style.top.px]=\"model.viewerMode ? 5 : 43\"\r\n      [style.min-width.px]=\"model.isMobile() ? 33 : 83\"\r\n      (click)=\"editForm()\"\r\n    >\r\n      <img [style.margin]=\"model.isMobile() ? '0px' : '0px 5px 0px 0px'\" [src]=\"model.getImage('images.Edit.png')\" />\r\n      <span *ngIf=\"!model.isMobile()\">{{ loc.get2(\"MainMenu\", \"menuEditEdit\") }}</span>\r\n    </div>\r\n    <div\r\n      #saveButton\r\n      class=\"image-container\"\r\n      *ngIf=\"(model.viewerMode || model.previewMode) && model.showSaveToPdfButton && !model.fileMenuMode\"\r\n      [style.right.px]=\"15\"\r\n      [style.visibility]=\"'visible'\"\r\n      [style.top.px]=\"model.viewerMode ? 5 : 43\"\r\n      [style.min-width.px]=\"model.isMobile() ? 33 : 83\"\r\n      [stiTooltip]=\"loc.get2('A_WebViewer', 'SaveReport')\"\r\n      tooltipPosition=\"bottom\"\r\n      (click)=\"showPdfOption()\"\r\n    >\r\n      <img\r\n        [style.margin]=\"model.isMobile() ? '0px' : '1px 5px 0px 0px'\"\r\n        [src]=\"\r\n          model.isMobile() ? model.getImage('images.ReportSave.png') : model.getImage('images.Other.DownloadPDF.png')\r\n        \"\r\n      />\r\n      <span *ngIf=\"!model.isMobile()\">{{ loc.get2(\"Buttons\", \"Save\") }}</span>\r\n    </div>\r\n    <div class=\"save-button\" *ngIf=\"model.getBooleanSetting('showSaveButton')\" (click)=\"save()\">\r\n      <img [src]=\"model.getImage('images.Other.Save.png')\" />\r\n    </div>\r\n    <div class=\"file-menu-button\" *ngIf=\"model.getBooleanSetting('showFileButton')\" (click)=\"setRibbon('File')\">\r\n      <span>{{ loc.getP(\"File\") }}</span>\r\n    </div>\r\n    <div class=\"navigation-button\" *ngIf=\"model.getBooleanSetting('showHomeTab')\" (click)=\"setRibbon('Home')\">\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.get2(\"Toolbars\", \"TabHome\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Home') }}\"></div>\r\n    </div>\r\n    <div\r\n      class=\"navigation-button\"\r\n      *ngIf=\"model.showInsertTab && model.getBooleanSetting('showInsertTab')\"\r\n      (click)=\"setRibbon('Insert')\"\r\n    >\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.getP(\"Insert\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Insert') }}\"></div>\r\n    </div>\r\n    <div class=\"navigation-button\" *ngIf=\"model.getBooleanSetting('showPreviewTab')\" (click)=\"setRibbon('Preview')\">\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.get2(\"FormDesigner\", \"Preview\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Preview') }}\"></div>\r\n    </div>\r\n    <div\r\n      class=\"navigation-button\"\r\n      *ngIf=\"model.getBooleanSetting('showPDFPreviewTab')\"\r\n      (click)=\"setRibbon('PDFPreview')\"\r\n    >\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.getP(\"PDFPreview\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('PDFPreview') }}\"></div>\r\n    </div>\r\n    <div *ngIf=\"(userService.currentUser || model.embeddedMode) && model.userWasChecked\" class=\"user-interface\">\r\n      <div class=\"share button\" (click)=\"setEvent('Share')\">\r\n        <img [src]=\"model.getImage('images.Share.png')\" alt=\"\" />\r\n      </div>\r\n      <div class=\"publish button\" (click)=\"setEvent('Publish')\">\r\n        <span>{{ loc.get2(\"Buttons\", \"Publish\") }}</span>\r\n      </div>\r\n      <div class=\"localization button\" (click)=\"showInfo($event, 'Localization')\" [style.padding]=\"'3px 10px'\">\r\n        <span>{{ loc.currentLocalization ? loc.currentLocalization.cultureName.toUpperCase() : \"EN\" }}</span>\r\n      </div>\r\n      <div\r\n        *ngIf=\"!model.userIsAuthorized && !model.isWebView\"\r\n        class=\"login button\"\r\n        [style.padding]=\"'3px 10px'\"\r\n        (click)=\"setEvent('Login')\"\r\n      >\r\n        <span>{{ loc.get2(\"Cloud\", \"Login\") }}</span>\r\n      </div>\r\n      <div *ngIf=\"!model.userIsAuthorized && !model.isWebView\" class=\"signup button\" (click)=\"setEvent('Signup')\">\r\n        <span>{{ loc.get2(\"Cloud\", \"ButtonSignUp\") }}</span>\r\n      </div>\r\n      <div\r\n        class=\"user-info button\"\r\n        *ngIf=\"model.userIsAuthorized || model.isWebView\"\r\n        (click)=\"showInfo($event, 'User')\"\r\n      >\r\n        <span>{{\r\n          userService.currentUser\r\n            ? (userService.currentUser.firstName ? userService.currentUser.firstName : \"\") +\r\n              \" \" +\r\n              (userService.currentUser.lastName ? userService.currentUser.lastName : \"\")\r\n            : \"My1 Company\"\r\n        }}</span\r\n        ><img\r\n          *ngIf=\"userService?.currentUser?.picture\"\r\n          src=\"data:image/jpeg;base64,{{ userService?.currentUser?.picture }}\"\r\n          alt=\"\"\r\n        />\r\n        <div\r\n          *ngIf=\"!userService?.currentUser?.picture\"\r\n          class=\"custom-image\"\r\n          [style.background-color]=\"userService.getBackground(userService.currentUser)\"\r\n        >\r\n          <span [style.margin-top.px]=\"4\">{{\r\n            userService.currentUser\r\n              ? (userService.currentUser.firstName ? userService.currentUser.firstName[0] : \"\") +\r\n                (userService.currentUser.lastName ? userService.currentUser.lastName[0] : \"\")\r\n              : \"MC\"\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <sti-file-ribbon-component *ngIf=\"model.ribbon == 'File'\"></sti-file-ribbon-component>\r\n  <sti-home-ribbon-component *ngIf=\"model.ribbon == 'Home'\"></sti-home-ribbon-component>\r\n  <sti-insert-ribbon-component *ngIf=\"model.ribbon == 'Insert' && model.showInsertTab\"></sti-insert-ribbon-component>\r\n</div>\r\n\r\n<style>\r\n  .save-button img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .save-button {\r\n    height: 30px;\r\n    width: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: 3px;\r\n    border-radius: 3px;\r\n  }\r\n  .save-button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .label-container {\r\n    padding: 0px 12px;\r\n  }\r\n  .file-menu-button {\r\n    height: 30px;\r\n    margin-left: 3px;\r\n    min-width: 70px;\r\n    background-color: rgb(25, 71, 138);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: white;\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n    padding: 0px 10px;\r\n  }\r\n  .file-menu-button:hover {\r\n    background-color: rgb(61, 98, 152);\r\n  }\r\n  .navigation-button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .navigation-button {\r\n    height: 30px;\r\n    min-width: 60px;\r\n    margin-left: 3px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    color: rgb(68, 68, 68);\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n  }\r\n  .navigation-label {\r\n    height: 27px;\r\n    width: 100%;\r\n    padding-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    white-space: nowrap;\r\n  }\r\n  .current-indicator {\r\n    height: 3px;\r\n    margin: 0px 10px;\r\n  }\r\n  .navigation-button:hover .current-indicator {\r\n    margin: 0px;\r\n  }\r\n  .image-container {\r\n    position: absolute;\r\n    top: 43px;\r\n    height: 23px;\r\n    min-width: 83px;\r\n    border: 1px solid rgb(218, 218, 218);\r\n    border-radius: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 0px 10px;\r\n    justify-content: center;\r\n    background-color: white;\r\n    z-index: 99999999;\r\n  }\r\n  .image-container img {\r\n    height: 16px;\r\n    width: 16px;\r\n    margin: 5px 0px 0px 5px;\r\n  }\r\n  .image-container span {\r\n    font-family: Arial;\r\n    font-size: 12px;\r\n  }\r\n  .image-container:hover {\r\n    background-color: rgb(226, 226, 226);\r\n  }\r\n  .image-container:active {\r\n    background-color: rgb(187, 187, 187);\r\n  }\r\n  .custom-image {\r\n    margin: 0px 5px;\r\n    height: 22px;\r\n    width: 22px;\r\n    font-family: Arial;\r\n    font-size: 12px;\r\n    overflow: hidden;\r\n    border-radius: 40px;\r\n    color: White;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n  .user-info img {\r\n    width: 22px;\r\n    height: 22px;\r\n    margin: 0px 5px;\r\n    border-radius: 40px;\r\n  }\r\n  .button {\r\n    height: 30px;\r\n    min-width: 30px;\r\n    padding: 3px 5px;\r\n    border-radius: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: 3px;\r\n  }\r\n  .button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .share img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .user-interface {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 30px;\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n    color: #444444;\r\n    flex: 1;\r\n  }\r\n  .signup {\r\n    background-color: #19478a;\r\n    color: #ffffff;\r\n    padding: 0px 17px;\r\n    margin-right: 3px;\r\n  }\r\n  .signup:hover {\r\n    background-color: rgb(61, 98, 152);\r\n  }\r\n  .navbar {\r\n    height: 93px;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background-color: var(--back-color);\r\n    color: var(--text-color);\r\n  }\r\n  a span {\r\n    height: 100%;\r\n    padding: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-items: center;\r\n  }\r\n  .navigation {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    height: 38px;\r\n    align-items: center;\r\n    background-color: var(--back-color);\r\n    width: 100%;\r\n    padding-top: 1px;\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    font-family: \"Segoe UI\";\r\n  }\r\n\r\n  .navigation a {\r\n    padding: 0px 10px;\r\n    height: 100%;\r\n    text-decoration: none;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    cursor: default;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\r\n  }\r\n  .navigation a:hover {\r\n    padding: 0;\r\n    background-color: var(--hover-color);\r\n  }\r\n  a:hover span {\r\n    padding-left: 13px;\r\n    padding-right: 13px;\r\n    width: 100%;\r\n  }\r\n  .current {\r\n    background-color: rgb(25, 71, 138);\r\n  }\r\n\r\n  .other {\r\n    background-color: transparent;\r\n  }\r\n</style>\r\n", styles: ["\n  .save-button img {\n    height: 16px;\n    width: 16px;\n  }\n  .save-button {\n    height: 30px;\n    width: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: 3px;\n    border-radius: 3px;\n  }\n  .save-button:hover {\n    background-color: rgb(218, 218, 218);\n  }\n  .label-container {\n    padding: 0px 12px;\n  }\n  .file-menu-button {\n    height: 30px;\n    margin-left: 3px;\n    min-width: 70px;\n    background-color: rgb(25, 71, 138);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 12px;\n    font-family: Arial;\n    padding: 0px 10px;\n  }\n  .file-menu-button:hover {\n    background-color: rgb(61, 98, 152);\n  }\n  .navigation-button:hover {\n    background-color: rgb(218, 218, 218);\n  }\n  .navigation-button {\n    height: 30px;\n    min-width: 60px;\n    margin-left: 3px;\n    display: flex;\n    flex-direction: column;\n    color: rgb(68, 68, 68);\n    font-size: 12px;\n    font-family: Arial;\n  }\n  .navigation-label {\n    height: 27px;\n    width: 100%;\n    padding-top: 2px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n  }\n  .current-indicator {\n    height: 3px;\n    margin: 0px 10px;\n  }\n  .navigation-button:hover .current-indicator {\n    margin: 0px;\n  }\n  .image-container {\n    position: absolute;\n    top: 43px;\n    height: 23px;\n    min-width: 83px;\n    border: 1px solid rgb(218, 218, 218);\n    border-radius: 3px;\n    display: flex;\n    align-items: center;\n    padding: 0px 10px;\n    justify-content: center;\n    background-color: white;\n    z-index: 99999999;\n  }\n  .image-container img {\n    height: 16px;\n    width: 16px;\n    margin: 5px 0px 0px 5px;\n  }\n  .image-container span {\n    font-family: Arial;\n    font-size: 12px;\n  }\n  .image-container:hover {\n    background-color: rgb(226, 226, 226);\n  }\n  .image-container:active {\n    background-color: rgb(187, 187, 187);\n  }\n  .custom-image {\n    margin: 0px 5px;\n    height: 22px;\n    width: 22px;\n    font-family: Arial;\n    font-size: 12px;\n    overflow: hidden;\n    border-radius: 40px;\n    color: White;\n    display: flex;\n    justify-content: center;\n  }\n  .user-info img {\n    width: 22px;\n    height: 22px;\n    margin: 0px 5px;\n    border-radius: 40px;\n  }\n  .button {\n    height: 30px;\n    min-width: 30px;\n    padding: 3px 5px;\n    border-radius: 3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: 3px;\n  }\n  .button:hover {\n    background-color: rgb(218, 218, 218);\n  }\n  .share img {\n    height: 16px;\n    width: 16px;\n  }\n  .user-interface {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    height: 30px;\n    font-size: 12px;\n    font-family: Arial;\n    color: #444444;\n    flex: 1;\n  }\n  .signup {\n    background-color: #19478a;\n    color: #ffffff;\n    padding: 0px 17px;\n    margin-right: 3px;\n  }\n  .signup:hover {\n    background-color: rgb(61, 98, 152);\n  }\n  .navbar {\n    height: 93px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--back-color);\n    color: var(--text-color);\n  }\n  a span {\n    height: 100%;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    justify-items: center;\n  }\n  .navigation {\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    height: 38px;\n    align-items: center;\n    background-color: var(--back-color);\n    width: 100%;\n    padding-top: 1px;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    font-family: \"Segoe UI\";\n  }\n\n  .navigation a {\n    padding: 0px 10px;\n    height: 100%;\n    text-decoration: none;\n    text-align: center;\n    font-size: 13px;\n    cursor: default;\n    margin-right: 5px;\n    margin-left: 5px;\n  }\n  .navigation a:hover {\n    padding: 0;\n    background-color: var(--hover-color);\n  }\n  a:hover span {\n    padding-left: 13px;\n    padding-right: 13px;\n    width: 100%;\n  }\n  .current {\n    background-color: rgb(25, 71, 138);\n  }\n\n  .other {\n    background-color: transparent;\n  }\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i12.StiHomeRibbonComponent, selector: "sti-home-ribbon-component" }, { kind: "component", type: i13.StiFileRibbonComponent, selector: "sti-file-ribbon-component" }, { kind: "component", type: i14.StiInsertRibbonComponent, selector: "sti-insert-ribbon-component" }, { kind: "directive", type: i15.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
            type: Component,
            args: [{ selector: "sti-navbar", template: "<div class=\"navbar\" [style.visibility]=\"model.viewerMode ? 'hidden' : 'visible'\" [style.height.px]=\"componentHeight\">\r\n  <div\r\n    class=\"navigation\"\r\n    [style.border-bottom]=\"\r\n      model.previewMode && !model.viewerMode ? '1px solid rgb(224,224,224)' : '1px solid transparent'\r\n    \"\r\n  >\r\n    <div\r\n      class=\"image-container\"\r\n      *ngIf=\"model.previewMode && model.showEditButton\"\r\n      [style.right.px]=\"editButtonRight\"\r\n      [style.visibility]=\"'visible'\"\r\n      [style.top.px]=\"model.viewerMode ? 5 : 43\"\r\n      [style.min-width.px]=\"model.isMobile() ? 33 : 83\"\r\n      (click)=\"editForm()\"\r\n    >\r\n      <img [style.margin]=\"model.isMobile() ? '0px' : '0px 5px 0px 0px'\" [src]=\"model.getImage('images.Edit.png')\" />\r\n      <span *ngIf=\"!model.isMobile()\">{{ loc.get2(\"MainMenu\", \"menuEditEdit\") }}</span>\r\n    </div>\r\n    <div\r\n      #saveButton\r\n      class=\"image-container\"\r\n      *ngIf=\"(model.viewerMode || model.previewMode) && model.showSaveToPdfButton && !model.fileMenuMode\"\r\n      [style.right.px]=\"15\"\r\n      [style.visibility]=\"'visible'\"\r\n      [style.top.px]=\"model.viewerMode ? 5 : 43\"\r\n      [style.min-width.px]=\"model.isMobile() ? 33 : 83\"\r\n      [stiTooltip]=\"loc.get2('A_WebViewer', 'SaveReport')\"\r\n      tooltipPosition=\"bottom\"\r\n      (click)=\"showPdfOption()\"\r\n    >\r\n      <img\r\n        [style.margin]=\"model.isMobile() ? '0px' : '1px 5px 0px 0px'\"\r\n        [src]=\"\r\n          model.isMobile() ? model.getImage('images.ReportSave.png') : model.getImage('images.Other.DownloadPDF.png')\r\n        \"\r\n      />\r\n      <span *ngIf=\"!model.isMobile()\">{{ loc.get2(\"Buttons\", \"Save\") }}</span>\r\n    </div>\r\n    <div class=\"save-button\" *ngIf=\"model.getBooleanSetting('showSaveButton')\" (click)=\"save()\">\r\n      <img [src]=\"model.getImage('images.Other.Save.png')\" />\r\n    </div>\r\n    <div class=\"file-menu-button\" *ngIf=\"model.getBooleanSetting('showFileButton')\" (click)=\"setRibbon('File')\">\r\n      <span>{{ loc.getP(\"File\") }}</span>\r\n    </div>\r\n    <div class=\"navigation-button\" *ngIf=\"model.getBooleanSetting('showHomeTab')\" (click)=\"setRibbon('Home')\">\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.get2(\"Toolbars\", \"TabHome\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Home') }}\"></div>\r\n    </div>\r\n    <div\r\n      class=\"navigation-button\"\r\n      *ngIf=\"model.showInsertTab && model.getBooleanSetting('showInsertTab')\"\r\n      (click)=\"setRibbon('Insert')\"\r\n    >\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.getP(\"Insert\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Insert') }}\"></div>\r\n    </div>\r\n    <div class=\"navigation-button\" *ngIf=\"model.getBooleanSetting('showPreviewTab')\" (click)=\"setRibbon('Preview')\">\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.get2(\"FormDesigner\", \"Preview\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('Preview') }}\"></div>\r\n    </div>\r\n    <div\r\n      class=\"navigation-button\"\r\n      *ngIf=\"model.getBooleanSetting('showPDFPreviewTab')\"\r\n      (click)=\"setRibbon('PDFPreview')\"\r\n    >\r\n      <div class=\"label-container\">\r\n        <div class=\"navigation-label\">\r\n          <span>{{ loc.getP(\"PDFPreview\") }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"current-indicator {{ getClass('PDFPreview') }}\"></div>\r\n    </div>\r\n    <div *ngIf=\"(userService.currentUser || model.embeddedMode) && model.userWasChecked\" class=\"user-interface\">\r\n      <div class=\"share button\" (click)=\"setEvent('Share')\">\r\n        <img [src]=\"model.getImage('images.Share.png')\" alt=\"\" />\r\n      </div>\r\n      <div class=\"publish button\" (click)=\"setEvent('Publish')\">\r\n        <span>{{ loc.get2(\"Buttons\", \"Publish\") }}</span>\r\n      </div>\r\n      <div class=\"localization button\" (click)=\"showInfo($event, 'Localization')\" [style.padding]=\"'3px 10px'\">\r\n        <span>{{ loc.currentLocalization ? loc.currentLocalization.cultureName.toUpperCase() : \"EN\" }}</span>\r\n      </div>\r\n      <div\r\n        *ngIf=\"!model.userIsAuthorized && !model.isWebView\"\r\n        class=\"login button\"\r\n        [style.padding]=\"'3px 10px'\"\r\n        (click)=\"setEvent('Login')\"\r\n      >\r\n        <span>{{ loc.get2(\"Cloud\", \"Login\") }}</span>\r\n      </div>\r\n      <div *ngIf=\"!model.userIsAuthorized && !model.isWebView\" class=\"signup button\" (click)=\"setEvent('Signup')\">\r\n        <span>{{ loc.get2(\"Cloud\", \"ButtonSignUp\") }}</span>\r\n      </div>\r\n      <div\r\n        class=\"user-info button\"\r\n        *ngIf=\"model.userIsAuthorized || model.isWebView\"\r\n        (click)=\"showInfo($event, 'User')\"\r\n      >\r\n        <span>{{\r\n          userService.currentUser\r\n            ? (userService.currentUser.firstName ? userService.currentUser.firstName : \"\") +\r\n              \" \" +\r\n              (userService.currentUser.lastName ? userService.currentUser.lastName : \"\")\r\n            : \"My1 Company\"\r\n        }}</span\r\n        ><img\r\n          *ngIf=\"userService?.currentUser?.picture\"\r\n          src=\"data:image/jpeg;base64,{{ userService?.currentUser?.picture }}\"\r\n          alt=\"\"\r\n        />\r\n        <div\r\n          *ngIf=\"!userService?.currentUser?.picture\"\r\n          class=\"custom-image\"\r\n          [style.background-color]=\"userService.getBackground(userService.currentUser)\"\r\n        >\r\n          <span [style.margin-top.px]=\"4\">{{\r\n            userService.currentUser\r\n              ? (userService.currentUser.firstName ? userService.currentUser.firstName[0] : \"\") +\r\n                (userService.currentUser.lastName ? userService.currentUser.lastName[0] : \"\")\r\n              : \"MC\"\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <sti-file-ribbon-component *ngIf=\"model.ribbon == 'File'\"></sti-file-ribbon-component>\r\n  <sti-home-ribbon-component *ngIf=\"model.ribbon == 'Home'\"></sti-home-ribbon-component>\r\n  <sti-insert-ribbon-component *ngIf=\"model.ribbon == 'Insert' && model.showInsertTab\"></sti-insert-ribbon-component>\r\n</div>\r\n\r\n<style>\r\n  .save-button img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .save-button {\r\n    height: 30px;\r\n    width: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: 3px;\r\n    border-radius: 3px;\r\n  }\r\n  .save-button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .label-container {\r\n    padding: 0px 12px;\r\n  }\r\n  .file-menu-button {\r\n    height: 30px;\r\n    margin-left: 3px;\r\n    min-width: 70px;\r\n    background-color: rgb(25, 71, 138);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: white;\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n    padding: 0px 10px;\r\n  }\r\n  .file-menu-button:hover {\r\n    background-color: rgb(61, 98, 152);\r\n  }\r\n  .navigation-button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .navigation-button {\r\n    height: 30px;\r\n    min-width: 60px;\r\n    margin-left: 3px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    color: rgb(68, 68, 68);\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n  }\r\n  .navigation-label {\r\n    height: 27px;\r\n    width: 100%;\r\n    padding-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    white-space: nowrap;\r\n  }\r\n  .current-indicator {\r\n    height: 3px;\r\n    margin: 0px 10px;\r\n  }\r\n  .navigation-button:hover .current-indicator {\r\n    margin: 0px;\r\n  }\r\n  .image-container {\r\n    position: absolute;\r\n    top: 43px;\r\n    height: 23px;\r\n    min-width: 83px;\r\n    border: 1px solid rgb(218, 218, 218);\r\n    border-radius: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 0px 10px;\r\n    justify-content: center;\r\n    background-color: white;\r\n    z-index: 99999999;\r\n  }\r\n  .image-container img {\r\n    height: 16px;\r\n    width: 16px;\r\n    margin: 5px 0px 0px 5px;\r\n  }\r\n  .image-container span {\r\n    font-family: Arial;\r\n    font-size: 12px;\r\n  }\r\n  .image-container:hover {\r\n    background-color: rgb(226, 226, 226);\r\n  }\r\n  .image-container:active {\r\n    background-color: rgb(187, 187, 187);\r\n  }\r\n  .custom-image {\r\n    margin: 0px 5px;\r\n    height: 22px;\r\n    width: 22px;\r\n    font-family: Arial;\r\n    font-size: 12px;\r\n    overflow: hidden;\r\n    border-radius: 40px;\r\n    color: White;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n  .user-info img {\r\n    width: 22px;\r\n    height: 22px;\r\n    margin: 0px 5px;\r\n    border-radius: 40px;\r\n  }\r\n  .button {\r\n    height: 30px;\r\n    min-width: 30px;\r\n    padding: 3px 5px;\r\n    border-radius: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: 3px;\r\n  }\r\n  .button:hover {\r\n    background-color: rgb(218, 218, 218);\r\n  }\r\n  .share img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .user-interface {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 30px;\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n    color: #444444;\r\n    flex: 1;\r\n  }\r\n  .signup {\r\n    background-color: #19478a;\r\n    color: #ffffff;\r\n    padding: 0px 17px;\r\n    margin-right: 3px;\r\n  }\r\n  .signup:hover {\r\n    background-color: rgb(61, 98, 152);\r\n  }\r\n  .navbar {\r\n    height: 93px;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background-color: var(--back-color);\r\n    color: var(--text-color);\r\n  }\r\n  a span {\r\n    height: 100%;\r\n    padding: 3px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-items: center;\r\n  }\r\n  .navigation {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    height: 38px;\r\n    align-items: center;\r\n    background-color: var(--back-color);\r\n    width: 100%;\r\n    padding-top: 1px;\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    font-family: \"Segoe UI\";\r\n  }\r\n\r\n  .navigation a {\r\n    padding: 0px 10px;\r\n    height: 100%;\r\n    text-decoration: none;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    cursor: default;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\r\n  }\r\n  .navigation a:hover {\r\n    padding: 0;\r\n    background-color: var(--hover-color);\r\n  }\r\n  a:hover span {\r\n    padding-left: 13px;\r\n    padding-right: 13px;\r\n    width: 100%;\r\n  }\r\n  .current {\r\n    background-color: rgb(25, 71, 138);\r\n  }\r\n\r\n  .other {\r\n    background-color: transparent;\r\n  }\r\n</style>\r\n" }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiDraggableService }, { type: i4.StiExportService }, { type: StiRectangleGeometryLayout }, { type: i5.StiThemeService }, { type: i6.StiLocalizationService }, { type: i7.StiToolboxService }, { type: i8.StiHttpClientService }, { type: i9.StiUserService }, { type: i10.StiFormCheckerService }]; }, propDecorators: { saveButton: [{
                type: ViewChild,
                args: ["saveButton"]
            }] } });
//# sourceMappingURL=data:application/json;base64, 