import { Component, Input } from "@angular/core";
import { UsedFont } from "../../../../services/objects";
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 "../../../../services/sti-color-dialog.service";
import * as i6 from "@angular/common";
import * as i7 from "../sti-dropdown-editor/sti-dropdown-editor.component";
import * as i8 from "../../../sti-tooltip/sti-tooltip.directive";
import * as i9 from "../../../sti-select-button/sti-select-button.component";
export class StiFontEditorComponent {
    constructor(model, helper, theme, loc, colorService) {
        this.model = model;
        this.helper = helper;
        this.theme = theme;
        this.loc = loc;
        this.colorService = colorService;
    }
    ngOnInit() { }
    showColorPicker(element, object) {
        this.colorService.openDialog(element, object);
    }
    isSettings() {
        return !this.model.selectedComponent && !this.model.selectedPage;
    }
    get content() {
        return this.helper.getProperty(this.object ?? this.model.form.settings, this.property.property);
    }
    changeEvent() {
        if (this.content.eFont) {
            let currentChangableFont = new UsedFont(this.content.eFont.family, this.model.arrayOfStylesToString(this.content.eFont.style), this.content.eFont.size);
            this.model.form.formEvents.next({ name: "UpdateFonts", value: currentChangableFont });
        }
        else {
            let currentChangableFont = new UsedFont(this.content.family ? this.content.family : this.content.font.family, this.model.arrayOfStylesToString(this.content.style ? this.content.style : this.content.font.style), this.content.size ? this.content.size : this.content.font.size);
            this.model.form.formEvents.next({ name: "UpdateFonts", value: currentChangableFont });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiFontEditorComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiThemeService }, { token: i4.StiLocalizationService }, { token: i5.StiColorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiFontEditorComponent, selector: "sti-font-editor", inputs: { property: "property", object: "object" }, ngImport: i0, template: `<table class="sti-clear" [style]="{ width: '100%' }">
      <tr *ngIf="property.property === 'this' || content.eValue?.length > 0 || isSettings()">
        <td colspan="5">
          <sti-dropdown-editor
            [options]="model.fontFamilies"
            [(value)]="content.font.family"
            optionLabel="name"
            optionValue="name"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="fontFamilyTooltip"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
        <td colspan="2">
          <sti-dropdown-editor
            [options]="helper.fontSizes"
            [(value)]="content.font.size"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="fontSizeTooltip"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
      </tr>
      <tr *ngIf="property.property === 'this' || content.eValue?.length > 0 || isSettings()">
        <td colspan="2" style="padding-top: 5px;">
          <sti-selectButton
            [options]="helper.styleOptions"
            [(value)]="content.font.style"
            [multiple]="true"
            optionValue="value"
            [style]="{ height: '24px', minWidth: '90px' }"
            (onChange)="changeEvent()"
          >
            <ng-template let-item>
              <img
                [src]="model.getImage(item.image)"
                [stiTooltip]="loc.getP(item.value)"
                tooltipPosition="bottom"
                showDelay="500"
                [style]="{ height: '16px', width: '16px' }"
              />
            </ng-template>
          </sti-selectButton>
        </td>
      </tr>
      <tr
        *ngIf="
          property.property === 'font' ||
          property.property === 'descriptionFont' ||
          property.property === 'insertedText.font'
        "
      >
        <td colspan="5">
          <sti-dropdown-editor
            [options]="model.fontFamilies"
            [(value)]="content.family"
            optionLabel="name"
            optionValue="name"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="loc.get2('HelpDesigner', 'FontName')"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
        <td colspan="2">
          <sti-dropdown-editor
            [options]="helper.fontSizes"
            [(value)]="content.size"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="loc.getP('FontSize')"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
      </tr>
      <tr
        *ngIf="
          property.property === 'font' ||
          property.property === 'descriptionFont' ||
          property.property === 'insertedText.font'
        "
      >
        <td colspan="2" style="padding-top: 5px;">
          <sti-selectButton
            [options]="helper.styleOptions"
            [(value)]="content.style"
            [multiple]="true"
            optionValue="value"
            [style]="{ height: '24px', minWidth: '90px' }"
            (onChange)="changeEvent()"
          >
            <ng-template let-item>
              <img
                [src]="model.getImage(item.image)"
                [stiTooltip]="loc.getP(item.value)"
                tooltipPosition="bottom"
                showDelay="500"
                [style]="{ height: '16px', width: '16px' }"
              />
            </ng-template>
          </sti-selectButton>
        </td>
      </tr>
      <tr *ngIf="property.property == 'innerText' && (content.eValue?.length > 0 || isSettings())">
        <td colspan="7">
          <div
            class="custom-color-picker"
            [stiTooltip]="loc.getP('Color')"
            tooltipPosition="bottom"
            (click)="showColorPicker(colorEditor, content.color)"
            showDelay="500"
            #colorEditor
          >
            <div class="preview">
              <span class="custom-color-preview" [style.background-color]="content.color.toHtmlColor()"></span>
              <span class="color-value">{{ content.color.getStringName() }}</span>
              <span class="select-button"><i class="pi pi-chevron-down"></i></span>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <style>
      td {
        padding: 0;
      }
      .custom-color-picker {
        width: 100%;
        background-color: var(--input-color);
        height: 24px;
        border: 1px solid var(--inputBorder-color);
        position: relative;
        border-radius: 3px;
      }
      .custom-color-picker:hover {
        background-color: var(--hover-color);
      }
      .custom-color-picker:focus {
        background-color: var(--input-color);
      }
      .preview {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
      }
      .pick {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 22px;
      }
      .color-value {
        font-weight: 500;
        font-size: 12px;
        align-self: center;
        color: var(--text-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }
      .custom-color-preview {
        width: 24px;
        height: 14px;
        margin: 4px;
        background-color: black;
        border: 1px solid var(--inputBorder-color);
      }
      .select-button {
        float: right;
        margin-left: auto;
        margin-right: 5px;
        color: rgb(186, 185, 184);
        display: flex;
        align-items: center;
      }
      .i {
        height: 12px;
        width: 12px;
        right: 3px;
      }
    </style>`, isInline: true, styles: ["\n      td {\n        padding: 0;\n      }\n      .custom-color-picker {\n        width: 100%;\n        background-color: var(--input-color);\n        height: 24px;\n        border: 1px solid var(--inputBorder-color);\n        position: relative;\n        border-radius: 3px;\n      }\n      .custom-color-picker:hover {\n        background-color: var(--hover-color);\n      }\n      .custom-color-picker:focus {\n        background-color: var(--input-color);\n      }\n      .preview {\n        display: flex;\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      .pick {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 22px;\n      }\n      .color-value {\n        font-weight: 500;\n        font-size: 12px;\n        align-self: center;\n        color: var(--text-color);\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n      }\n      .custom-color-preview {\n        width: 24px;\n        height: 14px;\n        margin: 4px;\n        background-color: black;\n        border: 1px solid var(--inputBorder-color);\n      }\n      .select-button {\n        float: right;\n        margin-left: auto;\n        margin-right: 5px;\n        color: rgb(186, 185, 184);\n        display: flex;\n        align-items: center;\n      }\n      .i {\n        height: 12px;\n        width: 12px;\n        right: 3px;\n      }\n    "], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.StiDropdownEditorComponent, selector: "sti-dropdown-editor", inputs: ["value", "options", "optionLabel", "optionValue", "editable"], outputs: ["valueChange"] }, { kind: "directive", type: i8.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }, { kind: "component", type: i9.StiSelectButtonComponent, selector: "sti-selectButton", inputs: ["options", "value", "optionLabel", "optionValue", "multiple", "disabled"], outputs: ["onOptionClick", "onChange", "valueChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiFontEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-font-editor",
                    template: `<table class="sti-clear" [style]="{ width: '100%' }">
      <tr *ngIf="property.property === 'this' || content.eValue?.length > 0 || isSettings()">
        <td colspan="5">
          <sti-dropdown-editor
            [options]="model.fontFamilies"
            [(value)]="content.font.family"
            optionLabel="name"
            optionValue="name"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="fontFamilyTooltip"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
        <td colspan="2">
          <sti-dropdown-editor
            [options]="helper.fontSizes"
            [(value)]="content.font.size"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="fontSizeTooltip"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
      </tr>
      <tr *ngIf="property.property === 'this' || content.eValue?.length > 0 || isSettings()">
        <td colspan="2" style="padding-top: 5px;">
          <sti-selectButton
            [options]="helper.styleOptions"
            [(value)]="content.font.style"
            [multiple]="true"
            optionValue="value"
            [style]="{ height: '24px', minWidth: '90px' }"
            (onChange)="changeEvent()"
          >
            <ng-template let-item>
              <img
                [src]="model.getImage(item.image)"
                [stiTooltip]="loc.getP(item.value)"
                tooltipPosition="bottom"
                showDelay="500"
                [style]="{ height: '16px', width: '16px' }"
              />
            </ng-template>
          </sti-selectButton>
        </td>
      </tr>
      <tr
        *ngIf="
          property.property === 'font' ||
          property.property === 'descriptionFont' ||
          property.property === 'insertedText.font'
        "
      >
        <td colspan="5">
          <sti-dropdown-editor
            [options]="model.fontFamilies"
            [(value)]="content.family"
            optionLabel="name"
            optionValue="name"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="loc.get2('HelpDesigner', 'FontName')"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
        <td colspan="2">
          <sti-dropdown-editor
            [options]="helper.fontSizes"
            [(value)]="content.size"
            class="p-inputtext-sm"
            [style]="{ width: '100%' }"
            [stiTooltip]="loc.getP('FontSize')"
            tooltipPosition="bottom"
            showDelay="500"
            (valueChange)="changeEvent()"
          ></sti-dropdown-editor>
        </td>
      </tr>
      <tr
        *ngIf="
          property.property === 'font' ||
          property.property === 'descriptionFont' ||
          property.property === 'insertedText.font'
        "
      >
        <td colspan="2" style="padding-top: 5px;">
          <sti-selectButton
            [options]="helper.styleOptions"
            [(value)]="content.style"
            [multiple]="true"
            optionValue="value"
            [style]="{ height: '24px', minWidth: '90px' }"
            (onChange)="changeEvent()"
          >
            <ng-template let-item>
              <img
                [src]="model.getImage(item.image)"
                [stiTooltip]="loc.getP(item.value)"
                tooltipPosition="bottom"
                showDelay="500"
                [style]="{ height: '16px', width: '16px' }"
              />
            </ng-template>
          </sti-selectButton>
        </td>
      </tr>
      <tr *ngIf="property.property == 'innerText' && (content.eValue?.length > 0 || isSettings())">
        <td colspan="7">
          <div
            class="custom-color-picker"
            [stiTooltip]="loc.getP('Color')"
            tooltipPosition="bottom"
            (click)="showColorPicker(colorEditor, content.color)"
            showDelay="500"
            #colorEditor
          >
            <div class="preview">
              <span class="custom-color-preview" [style.background-color]="content.color.toHtmlColor()"></span>
              <span class="color-value">{{ content.color.getStringName() }}</span>
              <span class="select-button"><i class="pi pi-chevron-down"></i></span>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <style>
      td {
        padding: 0;
      }
      .custom-color-picker {
        width: 100%;
        background-color: var(--input-color);
        height: 24px;
        border: 1px solid var(--inputBorder-color);
        position: relative;
        border-radius: 3px;
      }
      .custom-color-picker:hover {
        background-color: var(--hover-color);
      }
      .custom-color-picker:focus {
        background-color: var(--input-color);
      }
      .preview {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
      }
      .pick {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 22px;
      }
      .color-value {
        font-weight: 500;
        font-size: 12px;
        align-self: center;
        color: var(--text-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }
      .custom-color-preview {
        width: 24px;
        height: 14px;
        margin: 4px;
        background-color: black;
        border: 1px solid var(--inputBorder-color);
      }
      .select-button {
        float: right;
        margin-left: auto;
        margin-right: 5px;
        color: rgb(186, 185, 184);
        display: flex;
        align-items: center;
      }
      .i {
        height: 12px;
        width: 12px;
        right: 3px;
      }
    </style>`,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiThemeService }, { type: i4.StiLocalizationService }, { type: i5.StiColorDialogService }]; }, propDecorators: { property: [{
                type: Input
            }], object: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 