import { Component, Input, ViewChild } from "@angular/core";
import { StiTableElement } from "../../../../../elements/StiTableElement";
import { RotateAnimation } from "../../../../animations/animations";
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-column-draggable.service";
import * as i6 from "../../../../../services/mouse.service";
import * as i7 from "@angular/common";
import * as i8 from "../table-column-editor/table-column-editor.component";
export class StiTableColumnsEditorComponent {
    getMaxWidth() {
        return this.model.propertyGridWidth - 20;
    }
    get disabled() {
        return this.property.property != "columns" &&
            this.model?.selectedComponent?.element instanceof StiTableElement &&
            this.model?.selectedComponent?.element.columns.length == 0
            ? true
            : false;
    }
    constructor(model, helper, theme, loc, draggableService, mouseService) {
        this.model = model;
        this.helper = helper;
        this.theme = theme;
        this.loc = loc;
        this.draggableService = draggableService;
        this.mouseService = mouseService;
        this.arrayOfStates = [];
        this.minWidth = 40;
        this.isDrag = false;
    }
    ngOnInit() {
        if (this.items.length != this.arrayOfStates.length) {
            this.items.forEach(() => {
                this.arrayOfStates.push("default");
            });
            this.model.currentContentEditableItem.subscribe((index) => this.refreshState(index));
        }
    }
    get items() {
        return this.helper.getProperty(this.model.selectedComponent.element, this.property.property);
    }
    onHeaderClick(event, item) {
        event.preventDefault();
        this.draggableService.startX = event["offsetX"];
        this.draggableService.startY = event["offsetY"];
        this.draggableService.containerWidth = this.booleanButton?.nativeElement.offsetWidth;
        this.draggableService.onHeaderClick(event, item, this.items);
    }
    refreshState(index) {
        if (this.arrayOfStates.length != this.items.length) {
            this.arrayOfStates = [];
            this.items.forEach(() => {
                this.arrayOfStates.push("default");
            });
        }
        this.arrayOfStates.forEach((state, i) => {
            if (i != index) {
                this.arrayOfStates[i] = "default";
            }
            else {
                this.arrayOfStates[i] = "rotated";
            }
        });
    }
    changeState(i) {
        if (!this.isDrag) {
            this.arrayOfStates[i] = this.arrayOfStates[i] == "default" ? "rotated" : "default";
        }
    }
    addItem(event, element) {
        if (this.model.selectedComponent.element instanceof StiTableElement) {
            if (this.property.property == "columns") {
                this.model.selectedComponent.element.addColumnLikeLast();
                this.model.showColumnPreview(this.items.length - 1);
            }
            else {
                this.helper.addTotalMenuItems = null;
                this.model.toggleTieredMenu(element);
            }
        }
    }
    deleteItem(i) {
        this.items.splice(i, 1);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiTableColumnsEditorComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiHelperService }, { token: i3.StiThemeService }, { token: i4.StiLocalizationService }, { token: i5.StiColumnDraggableService }, { token: i6.StiMouseService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiTableColumnsEditorComponent, selector: "sti-table-columns-editor", inputs: { property: "property" }, viewQueries: [{ propertyName: "booleanButton", first: true, predicate: ["booleanButton"], descendants: true }], ngImport: i0, template: `
    <table class="sti-clear drop-area" [style]="{ width: '100%' }">
      <tr *ngIf="draggableService.isDragging && !draggableService.fromTable">
        <td [style]="{ height: '3px', width: '100%' }" (mousemove)="draggableService.insertIndex = 0">
          <div
            class="drag-preview"
            [style.margin-bottom]="'-5px'"
            [style.height.px]="draggableService.insertIndex == 0 ? 6 : 0"
          >
            <div class="middle-part" *ngIf="draggableService.insertIndex == 0"></div>
          </div>
        </td>
      </tr>

      <tr *ngFor="let item of items; index as i">
        <td
          colspan="7"
          *ngIf="(!draggableService.fromTable && draggableService.item != item) || draggableService.fromTable"
        >
          <div
            #booleanButton
            class="boolean-button"
            [style.max-width.px]="getMaxWidth()"
            (click)="changeState(i)"
            (mouseover)="overIndex = i"
            (mouseleave)="overIndex = null"
            (mousedown)="onHeaderClick($event, item)"
            (mousemove)="!draggableService.fromTable ? (draggableService.insertIndex = i + 1) : return"
          >
            <div class="arrow" [@rotatedState]="arrayOfStates[i]">
              <span class="select-button"><i class="pi pi-chevron-right"></i></span>
            </div>
            <div class="content">
              {{
                this.property.property == "columns"
                  ? item.label
                    ? item.label
                    : "Column " + (i + 1)
                  : item.header
                  ? item.header
                  : "Total Field " + (i + 1)
              }}
            </div>
            <div class="delete" *ngIf="draggableService.insertIndex == -1">
              <div class="delete-button" (click)="deleteItem(i)" *ngIf="overIndex == i">
                <img [src]="model.getImage('images.Ribbon.Delete.png')" />
              </div>
            </div>
          </div>
          <sti-table-column-editor
            [column]="item"
            [state]="arrayOfStates[i] == 'default' ? false : true"
            [index]="i"
            [expression]="item?.calculationAlgorithm?.expression"
          ></sti-table-column-editor>
          <div
            class="drag-preview"
            [style.height.px]="!draggableService.fromTable && draggableService.insertIndex == i + 1 ? 6 : 0"
          >
            <div class="middle-part" *ngIf="!draggableService.fromTable && draggableService.insertIndex == i + 1"></div>
          </div>
        </td>
      </tr>
      <tr [style.text-align]="'start'">
        <td>
          <button #addButton class="add-button" [disabled]="disabled" (click)="addItem($event, addButton)">
            <!--addItem()-->
            {{
              this.property.property == "columns"
                ? loc.get2("FormDictionaryDesigner", "ColumnNew")
                : loc.get2("FormDictionaryDesigner", "NewItem")
            }}
          </button>
        </td>
      </tr>
    </table>
    <style>
      .middle-part {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        border-bottom: 3px solid rgb(198, 198, 198);
      }
      tr {
        padding: 3px 0px 3px 0px;
      }
      i {
        width: 10px;
        height: 10px;
      }
      .arrow {
        width: 20px;
        text-align: center;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }
      .content {
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        flex: 1;
        overflow: hidden;
      }
      .delete {
        width: 45px;
        display: flex;
        height: 100%;
      }
      .delete-button {
        width: 22px;
        height: 100%;
        border-radius: 3px;
        background-color: var(--hover-color);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .delete-button img {
        height: 16px;
        width: 16px;
      }
      .delete-button:hover {
        background-color: var(--columnDeleteHover-color);
      }
      .delete-button:active {
        background-color: var(--hover-color);
      }
      .boolean-button {
        width: 100%;
        height: 22px;
        margin-top: 2px;
        display: flex;
        flex-direction: row;
        color: var(--text-color);
        background-color: var(--hover-color);
        border-top: 2px solid var(--toolbarResizerBorder-color);
      }

      .drag-preview {
        width: 100%;
        margin-bottom: -3px;
        background-color: transparent;
        position: relative;
        transition: height 50ms ease-in-out;
      }
      .add-button {
        min-width: 100px;
        min-height: 22px;
        padding: 3px 6px;
        margin-top: 5px;
        text-decoration: none;
        font-weight: 600;
        font-size: 12px;
        color: var(--text-color);
        text-align: center;
        justify-content: center;
        background-color: var(--input-color);
        border-top: 2px solid var(--toolbarResizerBorder-color);
        border-left: 1px solid var(--toolbarResizerBorder-color);
        border-right: 1px solid var(--toolbarResizerBorder-color);
        border-bottom: 1px solid var(--toolbarResizerBorder-color);
        border-radius: 3px;
      }
      .add-button:not([disabled]):hover {
        background-color: var(--hover-color);
      }
      .add-button[disabled] {
        opacity: 0.7;
        pointer-events: none;
        background-color: var(--hover-color);
      }
      .add-button:active {
        background-color: var(--active-color);
      }
    </style>
  `, isInline: true, styles: ["\n      .middle-part {\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: 50%;\n        border-bottom: 3px solid rgb(198, 198, 198);\n      }\n      tr {\n        padding: 3px 0px 3px 0px;\n      }\n      i {\n        width: 10px;\n        height: 10px;\n      }\n      .arrow {\n        width: 20px;\n        text-align: center;\n        cursor: default;\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n      }\n      .content {\n        cursor: default;\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        flex: 1;\n        overflow: hidden;\n      }\n      .delete {\n        width: 45px;\n        display: flex;\n        height: 100%;\n      }\n      .delete-button {\n        width: 22px;\n        height: 100%;\n        border-radius: 3px;\n        background-color: var(--hover-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .delete-button img {\n        height: 16px;\n        width: 16px;\n      }\n      .delete-button:hover {\n        background-color: var(--columnDeleteHover-color);\n      }\n      .delete-button:active {\n        background-color: var(--hover-color);\n      }\n      .boolean-button {\n        width: 100%;\n        height: 22px;\n        margin-top: 2px;\n        display: flex;\n        flex-direction: row;\n        color: var(--text-color);\n        background-color: var(--hover-color);\n        border-top: 2px solid var(--toolbarResizerBorder-color);\n      }\n\n      .drag-preview {\n        width: 100%;\n        margin-bottom: -3px;\n        background-color: transparent;\n        position: relative;\n        transition: height 50ms ease-in-out;\n      }\n      .add-button {\n        min-width: 100px;\n        min-height: 22px;\n        padding: 3px 6px;\n        margin-top: 5px;\n        text-decoration: none;\n        font-weight: 600;\n        font-size: 12px;\n        color: var(--text-color);\n        text-align: center;\n        justify-content: center;\n        background-color: var(--input-color);\n        border-top: 2px solid var(--toolbarResizerBorder-color);\n        border-left: 1px solid var(--toolbarResizerBorder-color);\n        border-right: 1px solid var(--toolbarResizerBorder-color);\n        border-bottom: 1px solid var(--toolbarResizerBorder-color);\n        border-radius: 3px;\n      }\n      .add-button:not([disabled]):hover {\n        background-color: var(--hover-color);\n      }\n      .add-button[disabled] {\n        opacity: 0.7;\n        pointer-events: none;\n        background-color: var(--hover-color);\n      }\n      .add-button:active {\n        background-color: var(--active-color);\n      }\n    "], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.StiTableColumnEditorComponent, selector: "sti-table-column-editor", inputs: ["column", "state", "index", "expression"] }], animations: [RotateAnimation] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiTableColumnsEditorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-table-columns-editor",
                    template: `
    <table class="sti-clear drop-area" [style]="{ width: '100%' }">
      <tr *ngIf="draggableService.isDragging && !draggableService.fromTable">
        <td [style]="{ height: '3px', width: '100%' }" (mousemove)="draggableService.insertIndex = 0">
          <div
            class="drag-preview"
            [style.margin-bottom]="'-5px'"
            [style.height.px]="draggableService.insertIndex == 0 ? 6 : 0"
          >
            <div class="middle-part" *ngIf="draggableService.insertIndex == 0"></div>
          </div>
        </td>
      </tr>

      <tr *ngFor="let item of items; index as i">
        <td
          colspan="7"
          *ngIf="(!draggableService.fromTable && draggableService.item != item) || draggableService.fromTable"
        >
          <div
            #booleanButton
            class="boolean-button"
            [style.max-width.px]="getMaxWidth()"
            (click)="changeState(i)"
            (mouseover)="overIndex = i"
            (mouseleave)="overIndex = null"
            (mousedown)="onHeaderClick($event, item)"
            (mousemove)="!draggableService.fromTable ? (draggableService.insertIndex = i + 1) : return"
          >
            <div class="arrow" [@rotatedState]="arrayOfStates[i]">
              <span class="select-button"><i class="pi pi-chevron-right"></i></span>
            </div>
            <div class="content">
              {{
                this.property.property == "columns"
                  ? item.label
                    ? item.label
                    : "Column " + (i + 1)
                  : item.header
                  ? item.header
                  : "Total Field " + (i + 1)
              }}
            </div>
            <div class="delete" *ngIf="draggableService.insertIndex == -1">
              <div class="delete-button" (click)="deleteItem(i)" *ngIf="overIndex == i">
                <img [src]="model.getImage('images.Ribbon.Delete.png')" />
              </div>
            </div>
          </div>
          <sti-table-column-editor
            [column]="item"
            [state]="arrayOfStates[i] == 'default' ? false : true"
            [index]="i"
            [expression]="item?.calculationAlgorithm?.expression"
          ></sti-table-column-editor>
          <div
            class="drag-preview"
            [style.height.px]="!draggableService.fromTable && draggableService.insertIndex == i + 1 ? 6 : 0"
          >
            <div class="middle-part" *ngIf="!draggableService.fromTable && draggableService.insertIndex == i + 1"></div>
          </div>
        </td>
      </tr>
      <tr [style.text-align]="'start'">
        <td>
          <button #addButton class="add-button" [disabled]="disabled" (click)="addItem($event, addButton)">
            <!--addItem()-->
            {{
              this.property.property == "columns"
                ? loc.get2("FormDictionaryDesigner", "ColumnNew")
                : loc.get2("FormDictionaryDesigner", "NewItem")
            }}
          </button>
        </td>
      </tr>
    </table>
    <style>
      .middle-part {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        border-bottom: 3px solid rgb(198, 198, 198);
      }
      tr {
        padding: 3px 0px 3px 0px;
      }
      i {
        width: 10px;
        height: 10px;
      }
      .arrow {
        width: 20px;
        text-align: center;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }
      .content {
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        flex: 1;
        overflow: hidden;
      }
      .delete {
        width: 45px;
        display: flex;
        height: 100%;
      }
      .delete-button {
        width: 22px;
        height: 100%;
        border-radius: 3px;
        background-color: var(--hover-color);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .delete-button img {
        height: 16px;
        width: 16px;
      }
      .delete-button:hover {
        background-color: var(--columnDeleteHover-color);
      }
      .delete-button:active {
        background-color: var(--hover-color);
      }
      .boolean-button {
        width: 100%;
        height: 22px;
        margin-top: 2px;
        display: flex;
        flex-direction: row;
        color: var(--text-color);
        background-color: var(--hover-color);
        border-top: 2px solid var(--toolbarResizerBorder-color);
      }

      .drag-preview {
        width: 100%;
        margin-bottom: -3px;
        background-color: transparent;
        position: relative;
        transition: height 50ms ease-in-out;
      }
      .add-button {
        min-width: 100px;
        min-height: 22px;
        padding: 3px 6px;
        margin-top: 5px;
        text-decoration: none;
        font-weight: 600;
        font-size: 12px;
        color: var(--text-color);
        text-align: center;
        justify-content: center;
        background-color: var(--input-color);
        border-top: 2px solid var(--toolbarResizerBorder-color);
        border-left: 1px solid var(--toolbarResizerBorder-color);
        border-right: 1px solid var(--toolbarResizerBorder-color);
        border-bottom: 1px solid var(--toolbarResizerBorder-color);
        border-radius: 3px;
      }
      .add-button:not([disabled]):hover {
        background-color: var(--hover-color);
      }
      .add-button[disabled] {
        opacity: 0.7;
        pointer-events: none;
        background-color: var(--hover-color);
      }
      .add-button:active {
        background-color: var(--active-color);
      }
    </style>
  `,
                    animations: [RotateAnimation],
                }]
        }], ctorParameters: function () { return [{ type: i1.StiModelService }, { type: i2.StiHelperService }, { type: i3.StiThemeService }, { type: i4.StiLocalizationService }, { type: i5.StiColumnDraggableService }, { type: i6.StiMouseService }]; }, propDecorators: { property: [{
                type: Input
            }], booleanButton: [{
                type: ViewChild,
                args: ["booleanButton"]
            }] } });
//# sourceMappingURL=data:application/json;base64, 