import { Component, Input } from "@angular/core";
import StiInnerBorder from "../../../../../properties/StiInnerBorder";
import { StiBorder } from "../../../../../properties/StiBorder";
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 StiBorderSidesEditorComponent {
    constructor(model, helper, theme, loc) {
        this.model = model;
        this.helper = helper;
        this.theme = theme;
        this.loc = loc;
    }
    get borderAlignments() {
        let alignments = this.helper.getProperty(this.model.selectedComponent.element, this.property.property);
        return alignments.values;
    }
    set borderAlignments(value) {
        this.helper.getProperty(this.model.selectedComponent.element, this.property.property).addValues(value);
    }
    setAll() {
        if (this.object instanceof StiBorder) {
            this.object.drawTop = true;
            this.object.drawLeft = true;
            this.object.drawBottom = true;
            this.object.drawRight = true;
        }
        else if (this.object instanceof StiInnerBorder) {
            this.object.drawHorizontal = true;
            this.object.drawVertical = true;
        }
    }
    setNone() {
        if (this.object instanceof StiBorder) {
            this.object.drawTop = false;
            this.object.drawLeft = false;
            this.object.drawBottom = false;
            this.object.drawRight = false;
        }
        else if (this.object instanceof StiInnerBorder) {
            this.object.drawHorizontal = false;
            this.object.drawVertical = false;
        }
    }
    changeState(value) {
        this.object[value] = !this.object[value];
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiBorderSidesEditorComponent, 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: "16.2.12", type: StiBorderSidesEditorComponent, selector: "sti-border-sides-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 {{
                object.drawTop && object.drawLeft && object.drawBottom && object.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('All')" alt="" />
            </div>
            <div
              class="button {{
                !object.drawTop && !object.drawLeft && !object.drawBottom && !object.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('None')" alt="" />
            </div>
            <div
              class="button {{ object.drawTop ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Top')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawTop')"
            >
              <img [src]="theme.getIcon('Top')" alt="" />
            </div>
            <div
              class="button {{ object.drawLeft ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Left')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawLeft')"
            >
              <img [src]="theme.getIcon('Left')" alt="" />
            </div>
            <div
              class="button {{ object.drawBottom ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Bottom')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawBottom')"
            >
              <img [src]="theme.getIcon('Bottom')" alt="" />
            </div>
            <div
              class="button {{ object.drawRight ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Right')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawRight')"
            >
              <img [src]="theme.getIcon('Right')" alt="" />
            </div>
          </div>
        </td>
        <td colspan="7" *ngIf="property.property == 'gridLines'">
          <div class="button-group">
            <div
              class="button {{ object.drawHorizontal && object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('GridAll')" alt="" />
            </div>
            <div
              class="button {{ !object.drawHorizontal && !object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('GridNone')" alt="" />
            </div>
            <div
              class="button {{ object.drawHorizontal ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'StiOrientationHorizontal')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawHorizontal')"
            >
              <img [src]="theme.getIcon('Horizontal')" alt="" />
            </div>
            <div
              class="button {{ object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'StiOrientationVertical')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawVertical')"
            >
              <img [src]="theme.getIcon('Vertical')" 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);
      }
      .draw-grid-all {
        background: var(--gridAll-icon);
      }
      .draw-grid-none {
        background: var(--gridNone-icon);
      }
      .draw-horizontal {
        background: var(--gridHorizontal-icon);
      }
      .draw-vertical {
        background: var(--gridVertical-icon);
      }
    </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      .draw-grid-all {\n        background: var(--gridAll-icon);\n      }\n      .draw-grid-none {\n        background: var(--gridNone-icon);\n      }\n      .draw-horizontal {\n        background: var(--gridHorizontal-icon);\n      }\n      .draw-vertical {\n        background: var(--gridVertical-icon);\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: "16.2.12", ngImport: i0, type: StiBorderSidesEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-border-sides-editor",
                    template: `
    <table class="sti-clear" [style]="{ width: '100%' }">
      <tr>
        <td colspan="7" *ngIf="property.property != 'gridLines'">
          <div class="button-group">
            <div
              class="button {{
                object.drawTop && object.drawLeft && object.drawBottom && object.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('All')" alt="" />
            </div>
            <div
              class="button {{
                !object.drawTop && !object.drawLeft && !object.drawBottom && !object.drawRight ? 'active' : ''
              }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('None')" alt="" />
            </div>
            <div
              class="button {{ object.drawTop ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Top')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawTop')"
            >
              <img [src]="theme.getIcon('Top')" alt="" />
            </div>
            <div
              class="button {{ object.drawLeft ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Left')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawLeft')"
            >
              <img [src]="theme.getIcon('Left')" alt="" />
            </div>
            <div
              class="button {{ object.drawBottom ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Bottom')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawBottom')"
            >
              <img [src]="theme.getIcon('Bottom')" alt="" />
            </div>
            <div
              class="button {{ object.drawRight ? 'active' : '' }}"
              [stiTooltip]="loc.getP('Right')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawRight')"
            >
              <img [src]="theme.getIcon('Right')" alt="" />
            </div>
          </div>
        </td>
        <td colspan="7" *ngIf="property.property == 'gridLines'">
          <div class="button-group">
            <div
              class="button {{ object.drawHorizontal && object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'ChartGridLinesAll')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setAll()"
            >
              <img [src]="theme.getIcon('GridAll')" alt="" />
            </div>
            <div
              class="button {{ !object.drawHorizontal && !object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'BorderStyleNone')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="setNone()"
            >
              <img [src]="theme.getIcon('GridNone')" alt="" />
            </div>
            <div
              class="button {{ object.drawHorizontal ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'StiOrientationHorizontal')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawHorizontal')"
            >
              <img [src]="theme.getIcon('Horizontal')" alt="" />
            </div>
            <div
              class="button {{ object.drawVertical ? 'active' : '' }}"
              [stiTooltip]="loc.get2('PropertyEnum', 'StiOrientationVertical')"
              tooltipPosition="bottom"
              showDelay="500"
              (click)="changeState('drawVertical')"
            >
              <img [src]="theme.getIcon('Vertical')" 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);
      }
      .draw-grid-all {
        background: var(--gridAll-icon);
      }
      .draw-grid-none {
        background: var(--gridNone-icon);
      }
      .draw-horizontal {
        background: var(--gridHorizontal-icon);
      }
      .draw-vertical {
        background: var(--gridVertical-icon);
      }
    </style>
  `,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiThemeService }, { type: i4.StiLocalizationService }]; }, propDecorators: { property: [{
                type: Input
            }], object: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 