import { Component } from "@angular/core";
import { StiModelService } from "../../services/model.service";
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/theme.service";
import * as i4 from "../../services/sti-localization.service";
import * as i5 from "../../services/sti-form-checker.service";
import * as i6 from "@angular/common";
import * as i7 from "../sti-tooltip/sti-tooltip.directive";
export class StiFooterComponent {
    get themes() {
        return StiModelService.THEMES;
    }
    get cloud() {
        return this.loc.getP("StimulsoftCloud");
    }
    get size() {
        return this.model.zoom <= 1
            ? (this.model.zoom * 100).toFixed(0)
            : (100 + ((this.model.zoom - 1) / 3) * 100).toFixed(0);
    }
    get calculatedSize() {
        return (this.model.zoom * 100).toFixed(0);
    }
    get isMobileViewer() {
        return this.model.isMobile() && this.model.viewerMode;
    }
    get step() {
        return this.model.zoom <= 1 ? 10 : 1;
    }
    setSize(value) {
        if (value <= 100) {
            (this.model.zoom = value / 100).toFixed(1);
        }
        else {
            setTimeout(() => {
                this.model.zoom = Number((1 + ((value - 100) / 100) * 3).toFixed(1));
            });
        }
    }
    constructor(model, helper, theme, loc, formCheckerService) {
        this.model = model;
        this.helper = helper;
        this.theme = theme;
        this.loc = loc;
        this.formCheckerService = formCheckerService;
        this.isIncrement = false;
        this.isDecrement = false;
        this.model.isMobileViewer.subscribe(() => {
            setTimeout(() => {
                this.zoomByWidth();
            });
        });
        this.model.formEvents.subscribe((e) => {
            if (e.name == "SetZoomByPageWidth") {
                this.zoomByWidth();
            }
            else if (e.name == "SetZoomByOnePage") {
                this.zoomByOnePage();
            }
            else if (e.name == "SetDefaultZoom") {
                this.setDefaultZoom();
            }
        });
    }
    zoomByWidth() {
        let workspace = document.getElementsByTagName("sti-workspace")[0];
        let width = workspace["offsetWidth"];
        let pageElem = document.querySelectorAll(".page-container")[0];
        let pagetWithMaxWidth = this.model.form.pages.reduce((acc, curr) => (acc.width > curr.width ? acc : curr));
        this.model.zoom = width / (pagetWithMaxWidth.width + 30);
        setTimeout(() => {
            let rect = this.model.getPositionRelativeToForm(pageElem);
            if (this.isMobileViewer) {
                if (workspace.scrollLeft != workspace.scrollWidth - rect.width - 6) {
                    workspace.scrollLeft = workspace.scrollWidth - rect.width - 6;
                }
            }
            else {
                if (workspace.scrollLeft != (workspace.scrollWidth - rect.width) / 2) {
                    workspace.scrollLeft = (workspace.scrollWidth - rect.width) / 2;
                }
            }
        }, 0);
    }
    setDefaultZoom() {
        this.model.zoom = 1;
    }
    zoomByOnePage() {
        let workspace = document.getElementsByTagName("sti-workspace")[0];
        let height = workspace["offsetHeight"];
        let elementWithMaxHeight = this.model.form.pages.reduce((acc, curr) => (acc.height > curr.height ? acc : curr));
        let width = workspace["offsetWidth"];
        let elementWithMaxWidth = this.model.form.pages.reduce((acc, curr) => (acc.width > curr.width ? acc : curr));
        let currentCoef = height / (elementWithMaxHeight.height + 25) >
            width / (elementWithMaxWidth.width + (this.model.previewMode ? 0 : 60))
            ? width / (elementWithMaxWidth.width + (this.model.previewMode ? 0 : 60))
            : height / (elementWithMaxHeight.height + 25);
        this.model.zoom = currentCoef;
    }
    changeTheme() {
        this.theme.currentTheme = this.currentTheme;
    }
    clearTimers() {
        this.isIncrement = false;
        this.isDecrement = false;
        clearTimeout(this.timeout);
        clearInterval(this.interval);
    }
    iterate() {
        if (this.isIncrement) {
            this.model.zoom += 0.1;
        }
        else if (this.isDecrement) {
            this.model.zoom -= 0.1;
        }
    }
    setIncrementInterval() {
        this.isIncrement = true;
        this.iterate();
        let this_ = this;
        this.timeout = setTimeout(function () {
            this_.interval = setInterval(function () {
                this_.iterate();
            }, 50);
        }, 300);
    }
    setDecrementInterval() {
        this.isDecrement = true;
        this.iterate();
        let this_ = this;
        this.timeout = setTimeout(function () {
            this_.interval = setInterval(function () {
                this_.iterate();
            }, 50);
        }, 300);
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiFooterComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiThemeService }, { token: i4.StiLocalizationService }, { token: i5.StiFormCheckerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiFooterComponent, selector: "sti-footer", ngImport: i0, template: "<div class=\"sti-footer\">\r\n  <div class=\"cloud-content\">\r\n    <div\r\n      class=\"warnings-container\"\r\n      *ngIf=\"formCheckerService.hasIssue\"\r\n      (click)=\"formCheckerService.displayFormsChecker()\"\r\n    >\r\n      <div class=\"vertical-line\"></div>\r\n      <div class=\"warning-panel\">\r\n        <img [src]=\"model.getImage('images.Form_Checker.Warning.png')\" />\r\n        <span class=\"warnings-count\">{{ formCheckerService.issuesCount }}</span>\r\n      </div>\r\n    </div>\r\n    <a\r\n      *ngIf=\"model.isCloudMode && model.viewerMode && model.basePlanIsTrial\"\r\n      href=\"https://cloud.stimulsoft.com/\"\r\n      target=\"_blank\"\r\n      >{{ cloud }}</a\r\n    >\r\n  </div>\r\n  <div class=\"zoom-buttons\" *ngIf=\"model.getBooleanSetting('showZoomButtons')\">\r\n    <div *ngIf=\"!isMobileViewer\" class=\"vertical-line\"></div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'PageWidth')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"zoomByWidth()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomWidth.png')\" alt=\"\" />\r\n    </div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'OnePage')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"zoomByOnePage()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomSize.png')\" alt=\"\" />\r\n    </div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'ZoomTo100')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"setDefaultZoom()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.Zoom100.png')\" alt=\"\" />\r\n    </div>\r\n    <div *ngIf=\"!isMobileViewer\" class=\"vertical-line\"></div>\r\n    <label *ngIf=\"!isMobileViewer\"> {{ calculatedSize }}%</label>\r\n    <div\r\n      *ngIf=\"!isMobileViewer\"\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('FormViewer', 'Zoom') + ' -'\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (mousedown)=\"setDecrementInterval()\"\r\n      (mouseup)=\"clearTimers()\"\r\n      (mouseleave)=\"clearTimers()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomMinus.png')\" alt=\"\" />\r\n    </div>\r\n    <input\r\n      *ngIf=\"!isMobileViewer\"\r\n      type=\"range\"\r\n      min=\"10\"\r\n      max=\"200\"\r\n      [step]=\"step\"\r\n      [value]=\"size\"\r\n      (input)=\"setSize($event.target.value)\"\r\n    />\r\n    <div *ngIf=\"!isMobileViewer\" class=\"slider-vertical-line\"></div>\r\n    <div\r\n      *ngIf=\"!isMobileViewer\"\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('FormViewer', 'Zoom') + ' +'\"\r\n      tooltipPosition=\"left\"\r\n      showDelay=\"500\"\r\n      (mousedown)=\"setIncrementInterval()\"\r\n      (mouseup)=\"clearTimers()\"\r\n      (mouseleave)=\"clearTimers()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomPlus.png')\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <p-dropdown\r\n        [options]=\"helper.themes\"\r\n        [(ngModel)]=\"currentTheme\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"name\"\r\n        [style]=\"{ width: '100px',marginTop:'3px',marginRight:'5px' }\"\r\n        (onChange)=\"changeTheme()\"\r\n      ></p-dropdown> -->\r\n</div>\r\n<style>\r\n  .zoom-buttons {\r\n    width: fit-content;\r\n    display: flex;\r\n    position: relative;\r\n  }\r\n  .warnings-count {\r\n    margin-left: 5px;\r\n    font-size: 12px;\r\n  }\r\n  .warning-panel {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 0px 10px;\r\n    border-radius: 3px;\r\n    height: 100%;\r\n  }\r\n  .warnings-container {\r\n    display: flex;\r\n    position: absolute;\r\n    align-items: center;\r\n    top: 0;\r\n    right: 0;\r\n    height: 100%;\r\n  }\r\n  .warning-panel:hover {\r\n    background-color: rgb(18, 64, 120);\r\n  }\r\n  img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .cloud-content {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n  }\r\n  .vertical-line {\r\n    height: 32px;\r\n    width: 1px;\r\n    margin-left: 3px;\r\n    margin-right: 3px;\r\n    border-right: 1px solid rgb(149, 171, 205);\r\n  }\r\n  .slider-vertical-line {\r\n    position: absolute;\r\n    height: 11px;\r\n    width: 1px;\r\n    margin-left: 3px;\r\n    margin-right: 3px;\r\n    top: 11px;\r\n    right: 84px;\r\n    background-color: white;\r\n    pointer-events: none;\r\n  }\r\n  a {\r\n    font-size: 16px;\r\n    font-family: Arial;\r\n    cursor: pointer;\r\n    color: white;\r\n    text-decoration: none;\r\n  }\r\n  span {\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    color: rgb(255, 255, 255);\r\n  }\r\n  .button {\r\n    height: 31px;\r\n    width: 32px;\r\n    background-color: rgb(25, 71, 138);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .button:hover {\r\n    background-color: rgb(18, 64, 120);\r\n  }\r\n  .button:active {\r\n    background-color: rgb(0, 32, 80);\r\n  }\r\n  .sti-footer {\r\n    width: 100%;\r\n    height: 32px;\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    border-top: 1px solid var(--formBorder-color);\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    background-color: rgb(25, 71, 138);\r\n    font-family: \"Segoe UI\";\r\n    position: relative;\r\n  }\r\n\r\n  .sti-footer input[type=\"range\"] {\r\n    margin-top: 3px;\r\n    margin-right: 3px;\r\n    margin-left: 3px;\r\n    width: 100px;\r\n    -webkit-appearance: none;\r\n    background-color: rgb(25, 71, 138);\r\n  }\r\n\r\n  .sti-footer input[type=\"range\"]:focus {\r\n    outline: none;\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-runnable-track {\r\n    width: 100%;\r\n    height: 2px;\r\n    cursor: default;\r\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\r\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\r\n    border-radius: 0px;\r\n    border: 0px solid rgb(255, 255, 255);\r\n  }\r\n  input[type=\"range\"]::-moz-range-track {\r\n    width: 100%;\r\n    height: 2px;\r\n    cursor: default;\r\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\r\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\r\n    border-radius: 0px;\r\n    border: 0px solid rgb(255, 255, 255);\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-thumb {\r\n    height: 15px;\r\n    width: 15px;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    cursor: default;\r\n    -webkit-appearance: none;\r\n    margin-top: -6px;\r\n    z-index: 11;\r\n  }\r\n  input[type=\"range\"]::-moz-range-thumb {\r\n    height: 15px;\r\n    width: 15px;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    cursor: default;\r\n    -webkit-appearance: none;\r\n    margin-top: -6px;\r\n    border: 0;\r\n    background-color: transparent;\r\n  }\r\n\r\n  input[type=\"range\"]:focus::-webkit-slider-runnable-track {\r\n  }\r\n\r\n  input[type=\"range\"]:-webkit-slider-thumb:focus {\r\n  }\r\n\r\n  .sti-footer label {\r\n    margin-top: 7px;\r\n    margin-left: 5px;\r\n    width: 35px;\r\n    vertical-align: sub;\r\n    font-size: 12px;\r\n    font-weight: bold;\r\n    color: rgb(255, 255, 255);\r\n  }\r\n</style>\r\n", styles: ["\n  .zoom-buttons {\n    width: fit-content;\n    display: flex;\n    position: relative;\n  }\n  .warnings-count {\n    margin-left: 5px;\n    font-size: 12px;\n  }\n  .warning-panel {\n    display: flex;\n    align-items: center;\n    padding: 0px 10px;\n    border-radius: 3px;\n    height: 100%;\n  }\n  .warnings-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    top: 0;\n    right: 0;\n    height: 100%;\n  }\n  .warning-panel:hover {\n    background-color: rgb(18, 64, 120);\n  }\n  img {\n    height: 16px;\n    width: 16px;\n  }\n  .cloud-content {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n  .vertical-line {\n    height: 32px;\n    width: 1px;\n    margin-left: 3px;\n    margin-right: 3px;\n    border-right: 1px solid rgb(149, 171, 205);\n  }\n  .slider-vertical-line {\n    position: absolute;\n    height: 11px;\n    width: 1px;\n    margin-left: 3px;\n    margin-right: 3px;\n    top: 11px;\n    right: 84px;\n    background-color: white;\n    pointer-events: none;\n  }\n  a {\n    font-size: 16px;\n    font-family: Arial;\n    cursor: pointer;\n    color: white;\n    text-decoration: none;\n  }\n  span {\n    font-size: 18px;\n    font-weight: bold;\n    color: rgb(255, 255, 255);\n  }\n  .button {\n    height: 31px;\n    width: 32px;\n    background-color: rgb(25, 71, 138);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .button:hover {\n    background-color: rgb(18, 64, 120);\n  }\n  .button:active {\n    background-color: rgb(0, 32, 80);\n  }\n  .sti-footer {\n    width: 100%;\n    height: 32px;\n    display: flex;\n    justify-content: flex-end;\n    border-top: 1px solid var(--formBorder-color);\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    background-color: rgb(25, 71, 138);\n    font-family: \"Segoe UI\";\n    position: relative;\n  }\n\n  .sti-footer input[type=\"range\"] {\n    margin-top: 3px;\n    margin-right: 3px;\n    margin-left: 3px;\n    width: 100px;\n    -webkit-appearance: none;\n    background-color: rgb(25, 71, 138);\n  }\n\n  .sti-footer input[type=\"range\"]:focus {\n    outline: none;\n  }\n\n  input[type=\"range\"]::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 2px;\n    cursor: default;\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\n    border-radius: 0px;\n    border: 0px solid rgb(255, 255, 255);\n  }\n  input[type=\"range\"]::-moz-range-track {\n    width: 100%;\n    height: 2px;\n    cursor: default;\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\n    border-radius: 0px;\n    border: 0px solid rgb(255, 255, 255);\n  }\n\n  input[type=\"range\"]::-webkit-slider-thumb {\n    height: 15px;\n    width: 15px;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\n    background-repeat: no-repeat;\n    background-position: center;\n    cursor: default;\n    -webkit-appearance: none;\n    margin-top: -6px;\n    z-index: 11;\n  }\n  input[type=\"range\"]::-moz-range-thumb {\n    height: 15px;\n    width: 15px;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\n    background-repeat: no-repeat;\n    background-position: center;\n    cursor: default;\n    -webkit-appearance: none;\n    margin-top: -6px;\n    border: 0;\n    background-color: transparent;\n  }\n\n  input[type=\"range\"]:focus::-webkit-slider-runnable-track {\n  }\n\n  input[type=\"range\"]:-webkit-slider-thumb:focus {\n  }\n\n  .sti-footer label {\n    margin-top: 7px;\n    margin-left: 5px;\n    width: 35px;\n    vertical-align: sub;\n    font-size: 12px;\n    font-weight: bold;\n    color: rgb(255, 255, 255);\n  }\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: "sti-footer", template: "<div class=\"sti-footer\">\r\n  <div class=\"cloud-content\">\r\n    <div\r\n      class=\"warnings-container\"\r\n      *ngIf=\"formCheckerService.hasIssue\"\r\n      (click)=\"formCheckerService.displayFormsChecker()\"\r\n    >\r\n      <div class=\"vertical-line\"></div>\r\n      <div class=\"warning-panel\">\r\n        <img [src]=\"model.getImage('images.Form_Checker.Warning.png')\" />\r\n        <span class=\"warnings-count\">{{ formCheckerService.issuesCount }}</span>\r\n      </div>\r\n    </div>\r\n    <a\r\n      *ngIf=\"model.isCloudMode && model.viewerMode && model.basePlanIsTrial\"\r\n      href=\"https://cloud.stimulsoft.com/\"\r\n      target=\"_blank\"\r\n      >{{ cloud }}</a\r\n    >\r\n  </div>\r\n  <div class=\"zoom-buttons\" *ngIf=\"model.getBooleanSetting('showZoomButtons')\">\r\n    <div *ngIf=\"!isMobileViewer\" class=\"vertical-line\"></div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'PageWidth')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"zoomByWidth()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomWidth.png')\" alt=\"\" />\r\n    </div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'OnePage')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"zoomByOnePage()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomSize.png')\" alt=\"\" />\r\n    </div>\r\n    <div\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('Zoom', 'ZoomTo100')\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (click)=\"setDefaultZoom()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.Zoom100.png')\" alt=\"\" />\r\n    </div>\r\n    <div *ngIf=\"!isMobileViewer\" class=\"vertical-line\"></div>\r\n    <label *ngIf=\"!isMobileViewer\"> {{ calculatedSize }}%</label>\r\n    <div\r\n      *ngIf=\"!isMobileViewer\"\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('FormViewer', 'Zoom') + ' -'\"\r\n      tooltipPosition=\"top\"\r\n      showDelay=\"500\"\r\n      (mousedown)=\"setDecrementInterval()\"\r\n      (mouseup)=\"clearTimers()\"\r\n      (mouseleave)=\"clearTimers()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomMinus.png')\" alt=\"\" />\r\n    </div>\r\n    <input\r\n      *ngIf=\"!isMobileViewer\"\r\n      type=\"range\"\r\n      min=\"10\"\r\n      max=\"200\"\r\n      [step]=\"step\"\r\n      [value]=\"size\"\r\n      (input)=\"setSize($event.target.value)\"\r\n    />\r\n    <div *ngIf=\"!isMobileViewer\" class=\"slider-vertical-line\"></div>\r\n    <div\r\n      *ngIf=\"!isMobileViewer\"\r\n      class=\"button\"\r\n      [stiTooltip]=\"loc.get2('FormViewer', 'Zoom') + ' +'\"\r\n      tooltipPosition=\"left\"\r\n      showDelay=\"500\"\r\n      (mousedown)=\"setIncrementInterval()\"\r\n      (mouseup)=\"clearTimers()\"\r\n      (mouseleave)=\"clearTimers()\"\r\n    >\r\n      <img [src]=\"model.getImage('images.Other.ZoomPlus.png')\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <p-dropdown\r\n        [options]=\"helper.themes\"\r\n        [(ngModel)]=\"currentTheme\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"name\"\r\n        [style]=\"{ width: '100px',marginTop:'3px',marginRight:'5px' }\"\r\n        (onChange)=\"changeTheme()\"\r\n      ></p-dropdown> -->\r\n</div>\r\n<style>\r\n  .zoom-buttons {\r\n    width: fit-content;\r\n    display: flex;\r\n    position: relative;\r\n  }\r\n  .warnings-count {\r\n    margin-left: 5px;\r\n    font-size: 12px;\r\n  }\r\n  .warning-panel {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 0px 10px;\r\n    border-radius: 3px;\r\n    height: 100%;\r\n  }\r\n  .warnings-container {\r\n    display: flex;\r\n    position: absolute;\r\n    align-items: center;\r\n    top: 0;\r\n    right: 0;\r\n    height: 100%;\r\n  }\r\n  .warning-panel:hover {\r\n    background-color: rgb(18, 64, 120);\r\n  }\r\n  img {\r\n    height: 16px;\r\n    width: 16px;\r\n  }\r\n  .cloud-content {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n  }\r\n  .vertical-line {\r\n    height: 32px;\r\n    width: 1px;\r\n    margin-left: 3px;\r\n    margin-right: 3px;\r\n    border-right: 1px solid rgb(149, 171, 205);\r\n  }\r\n  .slider-vertical-line {\r\n    position: absolute;\r\n    height: 11px;\r\n    width: 1px;\r\n    margin-left: 3px;\r\n    margin-right: 3px;\r\n    top: 11px;\r\n    right: 84px;\r\n    background-color: white;\r\n    pointer-events: none;\r\n  }\r\n  a {\r\n    font-size: 16px;\r\n    font-family: Arial;\r\n    cursor: pointer;\r\n    color: white;\r\n    text-decoration: none;\r\n  }\r\n  span {\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    color: rgb(255, 255, 255);\r\n  }\r\n  .button {\r\n    height: 31px;\r\n    width: 32px;\r\n    background-color: rgb(25, 71, 138);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .button:hover {\r\n    background-color: rgb(18, 64, 120);\r\n  }\r\n  .button:active {\r\n    background-color: rgb(0, 32, 80);\r\n  }\r\n  .sti-footer {\r\n    width: 100%;\r\n    height: 32px;\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    border-top: 1px solid var(--formBorder-color);\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    background-color: rgb(25, 71, 138);\r\n    font-family: \"Segoe UI\";\r\n    position: relative;\r\n  }\r\n\r\n  .sti-footer input[type=\"range\"] {\r\n    margin-top: 3px;\r\n    margin-right: 3px;\r\n    margin-left: 3px;\r\n    width: 100px;\r\n    -webkit-appearance: none;\r\n    background-color: rgb(25, 71, 138);\r\n  }\r\n\r\n  .sti-footer input[type=\"range\"]:focus {\r\n    outline: none;\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-runnable-track {\r\n    width: 100%;\r\n    height: 2px;\r\n    cursor: default;\r\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\r\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\r\n    border-radius: 0px;\r\n    border: 0px solid rgb(255, 255, 255);\r\n  }\r\n  input[type=\"range\"]::-moz-range-track {\r\n    width: 100%;\r\n    height: 2px;\r\n    cursor: default;\r\n    box-shadow: 0px 0px 0px rgb(255, 255, 255);\r\n    background: linear-gradient(to bottom, rgb(38, 87, 170) 0%, rgb(98, 135, 199) 50%);\r\n    border-radius: 0px;\r\n    border: 0px solid rgb(255, 255, 255);\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-thumb {\r\n    height: 15px;\r\n    width: 15px;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    cursor: default;\r\n    -webkit-appearance: none;\r\n    margin-top: -6px;\r\n    z-index: 11;\r\n  }\r\n  input[type=\"range\"]::-moz-range-thumb {\r\n    height: 15px;\r\n    width: 15px;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABESURBVHgBxY/dCQAgCIStCRyhUdukNmmERrKTfsAHe/WD4/BOBJMAcsj0IaqsTrdzfNPF0t4KBobmKdTZ3EBQoKF+swXwnjPbHIqL4gAAAABJRU5ErkJggg==\");\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    cursor: default;\r\n    -webkit-appearance: none;\r\n    margin-top: -6px;\r\n    border: 0;\r\n    background-color: transparent;\r\n  }\r\n\r\n  input[type=\"range\"]:focus::-webkit-slider-runnable-track {\r\n  }\r\n\r\n  input[type=\"range\"]:-webkit-slider-thumb:focus {\r\n  }\r\n\r\n  .sti-footer label {\r\n    margin-top: 7px;\r\n    margin-left: 5px;\r\n    width: 35px;\r\n    vertical-align: sub;\r\n    font-size: 12px;\r\n    font-weight: bold;\r\n    color: rgb(255, 255, 255);\r\n  }\r\n</style>\r\n" }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiThemeService }, { type: i4.StiLocalizationService }, { type: i5.StiFormCheckerService }]; } });
//# sourceMappingURL=data:application/json;base64, 