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-localization.service";
import * as i3 from "../../../../services/sti-helper.service";
import * as i4 from "../../../../services/sti-changes-service";
import * as i5 from "@angular/common";
import * as i6 from "../../../sti-universal-checkbox/sti-universal-checkbox.component";
import * as i7 from "../../../sti-tooltip/sti-tooltip.directive";
export class StiImageEditorComponent {
    constructor(model, loc, helper, changesService) {
        this.model = model;
        this.loc = loc;
        this.helper = helper;
        this.changesService = changesService;
    }
    ngOnInit() { }
    get imageUrl() {
        return this.helper.getProperty(this.object, this.property.property);
    }
    set imageUrl(value) {
        this.helper.setProperty(this.object, this.property.property, value);
        this.changesService.forceChanges();
    }
    clear() {
        this.imageUrl = "";
    }
    onFileSelected(event) {
        if (event.files && event.files[0]) {
            var reader = new FileReader();
            reader.onload = (e) => {
                if (this.property.property == "reportImage") {
                    this.imageUrl = e.target.result.slice(e.target.result.indexOf(",") + 1, e.target.result.length);
                }
                else {
                    this.imageUrl = e.target.result;
                }
            };
            reader.readAsDataURL(event.files[0]);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiImageEditorComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiLocalizationService }, { token: i3.StiHelperService }, { token: i4.StiChangesService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiImageEditorComponent, selector: "sti-image-editor", inputs: { property: "property", object: "object" }, ngImport: i0, template: `
    <table class="sti-clear" [style]="{ width: '95%' }">
      <tr *ngIf="property.type === 'image'" style="width: 100%;">
        <td style="width: 25px;" colspan="1">
          <div
            class="image-upload"
            [stiTooltip]="loc.get2('FormDesigner', 'LoadImage').replace('...', '')"
            tooltipPosition="bottom"
            showDelay="500"
          >
            <label (click)="imageInput.click()">
              <img [src]="model.getImage('images.Open.png')" />
            </label>
          </div>
          <input
            [style.display]="'none'"
            type="file"
            accept=".jpg, .jpeg, .png"
            (change)="onFileSelected($event.target)"
            #imageInput
          />
        </td>
        <td *ngIf="this.imageUrl" colspan="6">
          <div class="image-delete" [stiTooltip]="loc.getP('Clear')" tooltipPosition="bottom" showDelay="500">
            <label>
              <img [src]="model.getImage('images.StiSignatureClose.png')" (click)="clear()" />
            </label>
          </div>
        </td>
      </tr>
      <tr *ngIf="this.model.selectedComponent && this.imageUrl" style="width: 100%;">
        <td colspan="7">
          <sti-checkbox [(value)]="object.preserveAspectRatio" [label]="'Preserve Aspect Ratio'"></sti-checkbox>
        </td>
      </tr>
    </table>
    <style>
      td {
        padding: 0;
      }

      .image-upload {
        background-color: var(--input-color);
        width: 20px;
        height: 20px;
      }
      .image-upload:hover {
        background-color: var(--hover-color);
      }
      img {
        height: 16px;
        width: 16px;
      }
      label {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .image-delete {
        background-color: var(--input-color);
        width: 20px;
        height: 20px;
      }
      .image-delete:hover {
        background-color: var(--hover-color);
      }
    </style>
  `, isInline: true, styles: ["\n      td {\n        padding: 0;\n      }\n\n      .image-upload {\n        background-color: var(--input-color);\n        width: 20px;\n        height: 20px;\n      }\n      .image-upload:hover {\n        background-color: var(--hover-color);\n      }\n      img {\n        height: 16px;\n        width: 16px;\n      }\n      label {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .image-delete {\n        background-color: var(--input-color);\n        width: 20px;\n        height: 20px;\n      }\n      .image-delete:hover {\n        background-color: var(--hover-color);\n      }\n    "], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.StiUniversalCheckboxComponent, selector: "sti-checkbox", inputs: ["value", "disabled", "label"], outputs: ["valueChange"] }, { kind: "directive", type: i7.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiImageEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-image-editor",
                    template: `
    <table class="sti-clear" [style]="{ width: '95%' }">
      <tr *ngIf="property.type === 'image'" style="width: 100%;">
        <td style="width: 25px;" colspan="1">
          <div
            class="image-upload"
            [stiTooltip]="loc.get2('FormDesigner', 'LoadImage').replace('...', '')"
            tooltipPosition="bottom"
            showDelay="500"
          >
            <label (click)="imageInput.click()">
              <img [src]="model.getImage('images.Open.png')" />
            </label>
          </div>
          <input
            [style.display]="'none'"
            type="file"
            accept=".jpg, .jpeg, .png"
            (change)="onFileSelected($event.target)"
            #imageInput
          />
        </td>
        <td *ngIf="this.imageUrl" colspan="6">
          <div class="image-delete" [stiTooltip]="loc.getP('Clear')" tooltipPosition="bottom" showDelay="500">
            <label>
              <img [src]="model.getImage('images.StiSignatureClose.png')" (click)="clear()" />
            </label>
          </div>
        </td>
      </tr>
      <tr *ngIf="this.model.selectedComponent && this.imageUrl" style="width: 100%;">
        <td colspan="7">
          <sti-checkbox [(value)]="object.preserveAspectRatio" [label]="'Preserve Aspect Ratio'"></sti-checkbox>
        </td>
      </tr>
    </table>
    <style>
      td {
        padding: 0;
      }

      .image-upload {
        background-color: var(--input-color);
        width: 20px;
        height: 20px;
      }
      .image-upload:hover {
        background-color: var(--hover-color);
      }
      img {
        height: 16px;
        width: 16px;
      }
      label {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .image-delete {
        background-color: var(--input-color);
        width: 20px;
        height: 20px;
      }
      .image-delete:hover {
        background-color: var(--hover-color);
      }
    </style>
  `,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiLocalizationService }, { type: i3.StiHelperService }, { type: i4.StiChangesService }]; }, propDecorators: { property: [{
                type: Input
            }], object: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 