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-helper.service";
import * as i3 from "../../../../services/theme.service";
import * as i4 from "../../../../services/sti-localization.service";
import * as i5 from "@angular/common";
import * as i6 from "../../../sti-tooltip/sti-tooltip.directive";
export class StiExceedMarginsEditorComponent {
    constructor(model, helper, theme, loc) {
        this.model = model;
        this.helper = helper;
        this.theme = theme;
        this.loc = loc;
    }
    get margins() {
        return this.helper.getProperty(this.object, this.property.property);
    }
    setAll() {
        this.margins.drawTop = true;
        this.margins.drawLeft = true;
        this.margins.drawBottom = true;
        this.margins.drawRight = true;
    }
    setNone() {
        this.margins.drawTop = false;
        this.margins.drawLeft = false;
        this.margins.drawBottom = false;
        this.margins.drawRight = false;
    }
    changeState(value) {
        this.margins[value] = !this.margins[value];
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiExceedMarginsEditorComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiThemeService }, { token: i4.StiLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StiExceedMarginsEditorComponent, selector: "sti-exceed-margins-editor", inputs: { property: "property", object: "object" }, ngImport: i0, template: `
    <table class="sti-clear" [style]="{ width: '100%' }">
      <tr>
        <td colspan="7" *ngIf="property.property != 'gridLines'">
          <div class="button-group">
            <div
              class="button {{
                margins.drawTop && margins.drawLeft && margins.drawBottom && margins.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('All')" alt="" />
            </div>
            <div
              class="button {{
                !margins.drawTop && !margins.drawLeft && !margins.drawBottom && !margins.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('None')" alt="" />
            </div>
            <div
              class="button {{ margins.drawTop ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Top')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawTop')"
            >
              <img [src]="theme.getIcon('Top')" alt="" />
            </div>
            <div
              class="button {{ margins.drawLeft ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Left')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawLeft')"
            >
              <img [src]="theme.getIcon('Left')" alt="" />
            </div>
            <div
              class="button {{ margins.drawBottom ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Bottom')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawBottom')"
            >
              <img [src]="theme.getIcon('Bottom')" alt="" />
            </div>
            <div
              class="button {{ margins.drawRight ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Right')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawRight')"
            >
              <img [src]="theme.getIcon('Right')" alt="" />
            </div>
          </div>
        </td>
      </tr>
    </table>
    <style>
      td {
        text-align: end;
      }
      tr {
        padding: 3px 0px 3px 0px;
      }
      .active {
        background-color: var(--active-color) !important;
      }
      .active:hover {
        background-color: var(--active-color) !important;
      }
      .button-group {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: start;
      }
      .button {
        height: 22px;
        width: 28px;
        background-color: var(--back-color);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .button img {
        height: 16px;
        width: 16px;
      }
      .button:hover {
        background-color: var(--hover-color);
      }
      .button:active {
        background-color: var(--active-color);
      }
    </style>
  `, isInline: true, styles: ["\n      td {\n        text-align: end;\n      }\n      tr {\n        padding: 3px 0px 3px 0px;\n      }\n      .active {\n        background-color: var(--active-color) !important;\n      }\n      .active:hover {\n        background-color: var(--active-color) !important;\n      }\n      .button-group {\n        display: flex;\n        width: 100%;\n        flex-direction: row;\n        justify-content: start;\n      }\n      .button {\n        height: 22px;\n        width: 28px;\n        background-color: var(--back-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .button img {\n        height: 16px;\n        width: 16px;\n      }\n      .button:hover {\n        background-color: var(--hover-color);\n      }\n      .button:active {\n        background-color: var(--active-color);\n      }\n    "], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiExceedMarginsEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-exceed-margins-editor",
                    template: `
    <table class="sti-clear" [style]="{ width: '100%' }">
      <tr>
        <td colspan="7" *ngIf="property.property != 'gridLines'">
          <div class="button-group">
            <div
              class="button {{
                margins.drawTop && margins.drawLeft && margins.drawBottom && margins.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('All')" alt="" />
            </div>
            <div
              class="button {{
                !margins.drawTop && !margins.drawLeft && !margins.drawBottom && !margins.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('None')" alt="" />
            </div>
            <div
              class="button {{ margins.drawTop ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Top')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawTop')"
            >
              <img [src]="theme.getIcon('Top')" alt="" />
            </div>
            <div
              class="button {{ margins.drawLeft ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Left')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawLeft')"
            >
              <img [src]="theme.getIcon('Left')" alt="" />
            </div>
            <div
              class="button {{ margins.drawBottom ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Bottom')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawBottom')"
            >
              <img [src]="theme.getIcon('Bottom')" alt="" />
            </div>
            <div
              class="button {{ margins.drawRight ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Right')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawRight')"
            >
              <img [src]="theme.getIcon('Right')" alt="" />
            </div>
          </div>
        </td>
      </tr>
    </table>
    <style>
      td {
        text-align: end;
      }
      tr {
        padding: 3px 0px 3px 0px;
      }
      .active {
        background-color: var(--active-color) !important;
      }
      .active:hover {
        background-color: var(--active-color) !important;
      }
      .button-group {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: start;
      }
      .button {
        height: 22px;
        width: 28px;
        background-color: var(--back-color);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .button img {
        height: 16px;
        width: 16px;
      }
      .button:hover {
        background-color: var(--hover-color);
      }
      .button:active {
        background-color: var(--active-color);
      }
    </style>
  `,
                }]
        }], ctorParameters: () => [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiThemeService }, { type: i4.StiLocalizationService }], propDecorators: { property: [{
                type: Input
            }], object: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 