import { Component } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "../services/sti-component-resizer.service";
import * as i2 from "../services/model.service";
import * as i3 from "@angular/common";
export class StiPageGridOverlayComponent {
    constructor(componentResizerService, model) {
        this.componentResizerService = componentResizerService;
        this.model = model;
    }
    get paddingLeft() {
        return this.model.lastUsedPage?.padding.left;
    }
    get paddingRight() {
        return this.model.lastUsedPage?.padding.right;
    }
    get paddingTop() {
        return this.model.lastUsedPage?.padding.top;
    }
    get paddingBottom() {
        return this.model.lastUsedPage?.padding.bottom;
    }
    get columns() {
        return new Array(Number(this.model.form.settings.gridColumns)).fill(3);
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiPageGridOverlayComponent, deps: [{ token: i1.StiComponentResizerService }, { token: i2.StiModelService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiPageGridOverlayComponent, selector: "sti-page-grid-overlay", ngImport: i0, template: `
    <div
      class="grid-overlay"
      [style.opacity]="componentResizerService.isResizing || this.model.pageWithGrid ? 0.5 : 0"
      [style.padding-left.px]="this.paddingLeft"
      [style.padding-right.px]="this.paddingRight"
      [style.padding-top.px]="this.paddingTop"
      [style.padding-bottom.px]="this.paddingBottom"
    >
      <div class="column {{ i == columns.length - 1 ? 'last' : '' }}" *ngFor="let column of columns; index as i"></div>
    </div>

    <style>
      .grid-overlay {
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        opacity: 0;
        padding: 10px;
        transition: opacity 0.3s ease 0s;
        z-index: 1;
      }

      .column {
        width: 100%;
        margin: 0px;
        position: relative;
      }

      .column::before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 1px;
        height: 100%;
        background-color: rgb(234, 234, 234);
      }

      .column.last::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 0px;
        width: 1px;
        height: 100%;
        background-color: rgb(234, 234, 234);
      }
    </style>
  `, isInline: true, styles: ["\n      .grid-overlay {\n        position: absolute;\n        pointer-events: none;\n        width: 100%;\n        height: 100%;\n        top: 0px;\n        left: 0px;\n        display: flex;\n        opacity: 0;\n        padding: 10px;\n        transition: opacity 0.3s ease 0s;\n        z-index: 1;\n      }\n\n      .column {\n        width: 100%;\n        margin: 0px;\n        position: relative;\n      }\n\n      .column::before {\n        content: \"\";\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        width: 1px;\n        height: 100%;\n        background-color: rgb(234, 234, 234);\n      }\n\n      .column.last::after {\n        content: \"\";\n        position: absolute;\n        right: 0px;\n        top: 0px;\n        width: 1px;\n        height: 100%;\n        background-color: rgb(234, 234, 234);\n      }\n    "], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiPageGridOverlayComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-page-grid-overlay",
                    template: `
    <div
      class="grid-overlay"
      [style.opacity]="componentResizerService.isResizing || this.model.pageWithGrid ? 0.5 : 0"
      [style.padding-left.px]="this.paddingLeft"
      [style.padding-right.px]="this.paddingRight"
      [style.padding-top.px]="this.paddingTop"
      [style.padding-bottom.px]="this.paddingBottom"
    >
      <div class="column {{ i == columns.length - 1 ? 'last' : '' }}" *ngFor="let column of columns; index as i"></div>
    </div>

    <style>
      .grid-overlay {
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        opacity: 0;
        padding: 10px;
        transition: opacity 0.3s ease 0s;
        z-index: 1;
      }

      .column {
        width: 100%;
        margin: 0px;
        position: relative;
      }

      .column::before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 1px;
        height: 100%;
        background-color: rgb(234, 234, 234);
      }

      .column.last::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 0px;
        width: 1px;
        height: 100%;
        background-color: rgb(234, 234, 234);
      }
    </style>
  `,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiComponentResizerService }, { type: i2.StiModelService }]; } });
//# sourceMappingURL=data:application/json;base64, 