import { Component, Input } from "@angular/core";
import { StiFormElement } from "../../../../elements/base/StiFormElement";
import { StiFormSettings } from "../../../../elements/settings/StiFormSettings";
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/sti-localization.service";
import * as i4 from "../../../../services/sti-color-dialog.service";
import * as i5 from "../../../sti-tooltip/sti-tooltip.directive";
//import Color from "../../../system/Color";
export class StiColorEditorComponent {
    showColorPicker(element, object) {
        this.colorService.openDialog(element, object);
    }
    constructor(model, helper, loc, colorService) {
        this.model = model;
        this.helper = helper;
        this.loc = loc;
        this.colorService = colorService;
    }
    ngOnInit() { }
    get color() {
        if (this.obj instanceof StiFormElement || this.obj instanceof StiFormSettings) {
            return this.helper.getProperty(this.obj, this.property.property);
        }
        else {
            return this.obj[this.property.property];
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiColorEditorComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiLocalizationService }, { token: i4.StiColorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StiColorEditorComponent, selector: "sti-color-editor", inputs: { property: "property", textColor: "textColor", obj: "obj" }, ngImport: i0, template: `
    <table class="sti-clear" [style]="{ width: '100%' }">
      <tr>
        <td colspan="2">
          <div
            class="custom-color-picker"
            [stiTooltip]="loc.getP('Color')"
            tooltipPosition="bottom"
            (click)="showColorPicker(colorEditor, color)"
            showDelay="500"
            #colorEditor
          >
            <div class="preview">
              <span class="custom-color-preview" [style.background-color]="color.toHtmlColor()"> </span>
              <span class="color-value">{{ color.getStringName() }}</span>
              <span class="select-button"><i class="pi pi-chevron-down"></i></span>
            </div>
          </div>
        </td>
      </tr>

      <tr></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: i5.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiColorEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-color-editor",
                    template: `
    <table class="sti-clear" [style]="{ width: '100%' }">
      <tr>
        <td colspan="2">
          <div
            class="custom-color-picker"
            [stiTooltip]="loc.getP('Color')"
            tooltipPosition="bottom"
            (click)="showColorPicker(colorEditor, color)"
            showDelay="500"
            #colorEditor
          >
            <div class="preview">
              <span class="custom-color-preview" [style.background-color]="color.toHtmlColor()"> </span>
              <span class="color-value">{{ color.getStringName() }}</span>
              <span class="select-button"><i class="pi pi-chevron-down"></i></span>
            </div>
          </div>
        </td>
      </tr>

      <tr></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: () => [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiLocalizationService }, { type: i4.StiColorDialogService }], propDecorators: { property: [{
                type: Input
            }], textColor: [{
                type: Input
            }], obj: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 