import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "../services/model.service";
import * as i2 from "../services/sti-form-events-service";
import * as i3 from "../services/sti-helper.service";
import * as i4 from "../services/sti-localization.service";
import * as i5 from "./sti-tooltip/sti-tooltip.directive";
export class StiPageNavigationComponent {
    constructor(model, formEvents, helper, loc) {
        this.model = model;
        this.formEvents = formEvents;
        this.helper = helper;
        this.loc = loc;
    }
    getTranslate() {
        return `translate(${1 - this.model.zoom > 0 ? Math.abs(1 - this.model.zoom) * 25 : -(Math.abs(1 - this.model.zoom) * 25)}px, ${1 - this.model.zoom > 0 ? Math.abs(1 - this.model.zoom) * 120 : -(Math.abs(1 - this.model.zoom) * 120)}px)`;
    }
    setProperties(newPage, currentPage) {
        newPage.paperKind = currentPage.paperKind;
        newPage.padding = currentPage.padding;
        newPage.backgroundColor = currentPage.backgroundColor;
        newPage.visible = currentPage.visible;
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiPageNavigationComponent, deps: [{ token: i1.StiModelService }, { token: i2.FormEventsService }, { token: i3.StiHelperService }, { token: i4.StiLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiPageNavigationComponent, selector: "sti-page-navigation", inputs: { currentPage: "currentPage" }, ngImport: i0, template: `
    <div class="page-navigation" [style.scale]="1 / model.zoom" [style.transform]="getTranslate()">
      <div
        class="button-navigation {{ !formEvents.canMoveUp ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('QueryBuilder', 'MoveUp')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.moveUp()"
      >
        <img
          [style.filter]="!formEvents.canMoveUp ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.MovePageUp.png')"
        />
      </div>
      <div
        class="button-navigation {{ !formEvents.canMoveDown ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('QueryBuilder', 'MoveDown')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.moveDown()"
      >
        <img
          [style.filter]="!formEvents.canMoveDown ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.MovePageDown.png')"
        />
      </div>
      <div
        class="button-navigation"
        [stiTooltip]="loc.get2('TableRibbon', 'InsertAbove')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.insertBefore()"
      >
        <img [src]="model.getImage('images.Page.InsertPageBefore.png')" />
      </div>
      <div
        class="button-navigation"
        [stiTooltip]="loc.get2('TableRibbon', 'InsertBelow')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.insertAfter()"
      >
        <img [src]="model.getImage('images.Page.InsertPageAfter.png')" />
      </div>
      <div
        class="button-navigation {{ !formEvents.canClear ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('MainMenu', 'menuEditClearContents')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.clear()"
      >
        <img
          [style.filter]="!formEvents.canClear ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.ClearContent.png')"
        />
      </div>
      <div
        class="button-navigation {{ !formEvents.canDelete ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('FormViewer', 'PageDelete')"
        tooltipPosition="bottom"
        showDelay="500"
        [style.border-bottom]="'1px solid var(--pageNavBorder-color)'"
        (click)="formEvents.delete(); $event.stopPropagation()"
      >
        <img
          [style.filter]="!formEvents.canDelete ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.DeletePage.png')"
        />
      </div>
    </div>

    <style>
      .page-navigation {
        display: flex;
        flex-direction: column;
      }
      .button-navigation {
        background-color: var(--pageNavBackground-color);
        border-top: 1px solid var(--pageNavBorder-color);
        border-left: 1px solid var(--pageNavBorder-color);
        border-right: 1px solid var(--pageNavBorder-color);
        width: 40px;
        height: 40px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      .button-navigation img {
        height: 16px;
        width: 16px;
      }
      .button-navigation:hover {
        background-color: var(--hover-color);
      }
      .disabled {
        background-color: var(--pageNavDisable-color);
        pointer-events: none;
      }
      .disabled:hover {
        background-color: var(--pageNavDisable-color);
      }
    </style>
  `, isInline: true, styles: ["\n      .page-navigation {\n        display: flex;\n        flex-direction: column;\n      }\n      .button-navigation {\n        background-color: var(--pageNavBackground-color);\n        border-top: 1px solid var(--pageNavBorder-color);\n        border-left: 1px solid var(--pageNavBorder-color);\n        border-right: 1px solid var(--pageNavBorder-color);\n        width: 40px;\n        height: 40px;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        user-select: none;\n      }\n      .button-navigation img {\n        height: 16px;\n        width: 16px;\n      }\n      .button-navigation:hover {\n        background-color: var(--hover-color);\n      }\n      .disabled {\n        background-color: var(--pageNavDisable-color);\n        pointer-events: none;\n      }\n      .disabled:hover {\n        background-color: var(--pageNavDisable-color);\n      }\n    "], dependencies: [{ kind: "directive", type: i5.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiPageNavigationComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-page-navigation",
                    template: `
    <div class="page-navigation" [style.scale]="1 / model.zoom" [style.transform]="getTranslate()">
      <div
        class="button-navigation {{ !formEvents.canMoveUp ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('QueryBuilder', 'MoveUp')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.moveUp()"
      >
        <img
          [style.filter]="!formEvents.canMoveUp ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.MovePageUp.png')"
        />
      </div>
      <div
        class="button-navigation {{ !formEvents.canMoveDown ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('QueryBuilder', 'MoveDown')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.moveDown()"
      >
        <img
          [style.filter]="!formEvents.canMoveDown ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.MovePageDown.png')"
        />
      </div>
      <div
        class="button-navigation"
        [stiTooltip]="loc.get2('TableRibbon', 'InsertAbove')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.insertBefore()"
      >
        <img [src]="model.getImage('images.Page.InsertPageBefore.png')" />
      </div>
      <div
        class="button-navigation"
        [stiTooltip]="loc.get2('TableRibbon', 'InsertBelow')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.insertAfter()"
      >
        <img [src]="model.getImage('images.Page.InsertPageAfter.png')" />
      </div>
      <div
        class="button-navigation {{ !formEvents.canClear ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('MainMenu', 'menuEditClearContents')"
        tooltipPosition="bottom"
        showDelay="500"
        (click)="formEvents.clear()"
      >
        <img
          [style.filter]="!formEvents.canClear ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.ClearContent.png')"
        />
      </div>
      <div
        class="button-navigation {{ !formEvents.canDelete ? 'disabled' : '' }}"
        [stiTooltip]="loc.get2('FormViewer', 'PageDelete')"
        tooltipPosition="bottom"
        showDelay="500"
        [style.border-bottom]="'1px solid var(--pageNavBorder-color)'"
        (click)="formEvents.delete(); $event.stopPropagation()"
      >
        <img
          [style.filter]="!formEvents.canDelete ? 'grayscale(1)' : ''"
          [src]="model.getImage('images.Page.DeletePage.png')"
        />
      </div>
    </div>

    <style>
      .page-navigation {
        display: flex;
        flex-direction: column;
      }
      .button-navigation {
        background-color: var(--pageNavBackground-color);
        border-top: 1px solid var(--pageNavBorder-color);
        border-left: 1px solid var(--pageNavBorder-color);
        border-right: 1px solid var(--pageNavBorder-color);
        width: 40px;
        height: 40px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      .button-navigation img {
        height: 16px;
        width: 16px;
      }
      .button-navigation:hover {
        background-color: var(--hover-color);
      }
      .disabled {
        background-color: var(--pageNavDisable-color);
        pointer-events: none;
      }
      .disabled:hover {
        background-color: var(--pageNavDisable-color);
      }
    </style>
  `,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.FormEventsService }, { type: i3.StiHelperService }, { type: i4.StiLocalizationService }]; }, propDecorators: { currentPage: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 