stimulsoft-forms
Version:
Stimulsoft PDF Forms
940 lines (939 loc) • 145 kB
JavaScript
import { Component, Input, ViewChild, } from "@angular/core";
import { StiHorizontalAlignment, StiLabelAlignment, StiVerticalAlignment } from "../../system/enums";
import { StiRadioButtonColumnItem } from "../../elements/table/columns/StiRadioButtonColumnItem";
import { Enum } from "../../system/Enum";
import Color from "../../system/Color";
import * as i0 from "@angular/core";
import * as i1 from "../../services/model.service";
import * as i2 from "../../services/sti-draggable.service";
import * as i3 from "../../services/sti-column-draggable.service";
import * as i4 from "../../services/sti-editable-content.service";
import * as i5 from "../../services/mouse.service";
import * as i6 from "@angular/common";
import * as i7 from "../sti-component";
import * as i8 from "../sti-editable-content.component";
import * as i9 from "./sti-table-totals-field/sti-table-totals-field.component";
import * as i10 from "../sti-table-column-resizer.component";
import * as i11 from "./sti-table-column/sti-table-column.component";
export class StiTableComponent {
get selected() {
return this.model.selectedComponent?.element == this.element;
}
get canAddRow() {
return this._canAddRow;
}
set canAddRow(value) {
let oldValue = this._canAddRow;
if (oldValue != value) {
this._canAddRow = value;
this.cdr.detectChanges();
}
}
get canDeleteRow() {
return this._canDeleteRow;
}
set canDeleteRow(value) {
let oldValue = this._canDeleteRow;
if (oldValue != value) {
this._canDeleteRow = value;
this.cdr.detectChanges();
}
}
checkAbilityToAddRow() {
if (this.isInitialized) {
let tableRect = this.model.getPositionRelativeToForm(this.table?.nativeElement);
let totalsRect = this.model.getPositionRelativeToForm(this.totals?.nativeElement);
let tableRowRect = this.model.getPositionRelativeToForm(this.tableRow?.nativeElement);
let componentLabelRect = this.model.getPositionRelativeToForm(this.componentLabel?.nativeElement);
let componentDescriptionRect = this.model.getPositionRelativeToForm(this.componentDescription?.nativeElement);
if (this.model.previewMode) {
let componentInnerHeight = this.element.height - this.element.padding.top - this.element.padding.bottom;
this.canAddRow =
componentInnerHeight -
(this.element.label.value && this.element.label.alignment == StiLabelAlignment.Top
? componentLabelRect?.height
: 0) -
(this.element.description.value ? componentDescriptionRect?.height : 0) -
(this.element.useTotals ? totalsRect?.height : 0) -
tableRect?.height >
tableRowRect?.height;
}
else {
let parentContainer = this.model.getElementPage(this.element) ?? this.model.getElementPanel(this.element);
this.canAddRow =
parentContainer.contentAreaHeight -
(this.element.label.value && this.element.label.alignment == StiLabelAlignment.Top
? componentLabelRect?.height
: 0) -
(this.element.description.value ? componentDescriptionRect?.height : 0) -
(this.element.useTotals ? totalsRect?.height : 0) -
tableRect?.height >
tableRowRect?.height;
}
}
else {
this.canAddRow = false;
}
}
getMaxHeight() {
if (!this.isInitialized) {
return 0;
}
let tBodyRec = this.tBody ? this.model.getPositionRelativeToForm(this.tBody?.nativeElement) : 0;
let totalsRec = this.totals ? this.model.getPositionRelativeToForm(this.totals?.nativeElement) : 0;
return Number((this.element.geometry.bottom -
this.element.padding.bottom -
this.element.padding.top -
this.getSizeWithZoom(tBodyRec instanceof DOMRect ? tBodyRec.height : 0) -
this.getSizeWithZoom(totalsRec instanceof DOMRect ? totalsRec.height : 0) -
this.innerMargin).toFixed(2));
}
checkAbilityToDeleteRow() {
this.canDeleteRow = this.element.rowLabels.length > 1;
}
canDeleteColumn() {
return this.element.columns.length > 0 && this.isInitialized ? true : false;
}
getSizeWithZoom(size) {
return size / this.model.zoom;
}
isOverMaxHeight() {
if (!this.isInitialized) {
return false;
}
let parentContainer = this.model.getElementPage(this.element) ?? this.model.getElementPanel(this.element);
return this.element.height == parentContainer.contentAreaHeight - this.element.y;
}
updatePropertyGrid(column, event) {
if (!this.element.showColumnsEditor) {
this.element.showColumnsEditor = true;
this.model.needToRefresh.next(true);
}
setTimeout(() => {
let index = this.element.columns.findIndex((item) => item == column);
if (this.model.currentContentEditableItemIndex != index ||
this.model.previousSelectedComponent?.element != this.element) {
this.model.currentContentEditableItem.next(index);
this.model.currentContentEditableItemIndex = index;
}
}, 0);
}
get totalsWidth() {
return this.element?.label?.alignment == StiLabelAlignment.Top
? this.element?.width - this.element.padding.left - this.element.padding.right
: this.element?.width - this.element?.label?.width - this.element.padding.left - this.element.padding.right;
}
getPageColor() {
if (this.model.selectedComponent.element == this.element) {
if (this.model.getElementPage(this.element)) {
return this.model.getElementPage(this.element)?.backgroundColor?.toHtmlColor();
}
else {
let currentElement = this.model.getElementPanel(this.element);
if (this.model.getElementPage(currentElement)) {
return this.model.getElementPage(currentElement)?.backgroundColor?.toHtmlColor();
}
else {
while (this.model.getElementPage(currentElement)) {
currentElement = this.model.getElementPanel(currentElement);
}
return this.model.getElementPage(currentElement)?.backgroundColor?.toHtmlColor();
}
}
}
else {
return "transparent";
}
}
get align() {
return "start";
}
get contentAlign() {
return this.element["label"]["alignment"] == StiLabelAlignment.Right ? "flex-end" : "start";
}
get width() {
if (this.element.label.alignment == StiLabelAlignment.Top) {
return "100%";
}
else {
return this.element.label.width + "px";
}
}
get margin() {
return this.element["label"]["alignment"] == StiLabelAlignment.Top && this.element.label.value ? "10" : "0";
}
get headerAlignment() {
return Enum.getName(StiHorizontalAlignment, this.element.tableHeaderAlignment);
}
get rowAlignment() {
return Enum.getName(StiHorizontalAlignment, this.element.rowLabelsHorizontalAlignment);
}
get totalVerticalAlignment() {
if (this.element.totalsRowHeaderVerticalAlignment == StiVerticalAlignment.Top) {
return "flex-start";
}
else if (this.element.totalsRowHeaderVerticalAlignment == StiVerticalAlignment.Bottom) {
return "flex-end";
}
else {
return "center";
}
}
get totalHorizontalAlignment() {
if (this.element.totalsRowHeaderHorizontalAlignment == StiHorizontalAlignment.Left) {
return "flex-start";
}
else if (this.element.totalsRowHeaderHorizontalAlignment == StiHorizontalAlignment.Right) {
return "flex-end";
}
else {
return "center";
}
}
onHeaderClick(event, item) {
if (this.model.previewMode) {
return;
}
let form = document.querySelector("stimulsoft-forms");
form?.classList.add("unselectable");
this.model.canDrag = false;
if (this.editableContentService.editableContent != item) {
this.columnDraggableService.onHeaderClick(event, item, this.element.columns, true, this.element);
}
}
changeStyle(elem) { }
get tableBackColor() {
return this.element?.backgroundColor.toHtmlColor()
? this.element.backgroundColor.toHtmlColor()
: Color.transparent().toHtmlColor();
}
addColumn() {
this.element.addColumnLikeLast();
this.model.showColumnPreview(this.element.columns.length - 1);
}
addRow() {
this.element.addRow();
}
deleteColumn() {
this.element.deleteLastColumn();
}
deleteRow() {
this.element.deleteLastRow();
}
getColumnAlignment(column) {
return Enum.getName(StiHorizontalAlignment, column.cellAlignment);
}
getBorder(pen, isVisible, isDragPreview = false) {
return isVisible || isDragPreview ? pen.toHtmlBorder() : "transparent";
}
getBorderWidth(pen, isDragPreview) {
let res = isDragPreview ? Number(pen.width) + 2 : pen.width;
return res + "px";
}
getColumnBackColor(column, index) {
if (this.element.alternateRowColors) {
if (index % 2 === 0) {
return this.element.oddRowsStyle.toHtmlColor();
}
else {
return this.element.evenRowsStyle.toHtmlColor();
}
}
else {
return column.backgroundColor?.toHtmlColor() ?? column.eBackgroundColor.toHtmlColor();
}
}
getColumnForeColor(column, index) {
if (this.element.alternateRowColors) {
if (index % 2 === 0) {
return this.element.oddRowsTextColor.toHtmlColor();
}
else {
return this.element.evenRowsTextColor.toHtmlColor();
}
}
else {
return column.cellForeColor?.toHtmlColor() ?? column.eColor.toHtmlColor();
}
}
constructor(model, draggableService, columnDraggableService, editableContentService, cdr, mouseService) {
this.model = model;
this.draggableService = draggableService;
this.columnDraggableService = columnDraggableService;
this.editableContentService = editableContentService;
this.cdr = cdr;
this.mouseService = mouseService;
this.isClone = false;
this.minWidth = 40;
this.isDrag = false;
this.canDrag = false;
this.isInitialized = false;
this.isActive = false;
this._canAddRow = false;
this._canDeleteRow = false;
this.innerMargin = 5;
}
ngAfterContentChecked() {
if (!this.model.draggingElement &&
!this.isClone &&
(this.model?.selectedComponent?.element == this.element || this.isActive)) {
this.checkAbilityToAddRow();
this.checkAbilityToDeleteRow();
}
}
ngOnDestroy() {
this.isInitialized = false;
}
ngAfterViewInit() {
if (this.element && !this.isClone) {
this.element.element = this.tableTr;
if (this.element != this.model.draggingElement) {
setTimeout(() => {
this.isInitialized = true;
});
}
}
}
ngOnInit() { }
changeState(column, i) {
if (column instanceof StiRadioButtonColumnItem) {
column.cells.forEach((cell) => {
cell.isChecked = false;
});
}
column.cells[i].isChecked = !column.cells[i].isChecked;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StiTableComponent, deps: [{ token: i1.StiModelService }, { token: i2.StiDraggableService }, { token: i3.StiColumnDraggableService }, { token: i4.StiEditableContentService }, { token: i0.ChangeDetectorRef }, { token: i5.StiMouseService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StiTableComponent, selector: "sti-table-component", inputs: { element: "element", isClone: "isClone" }, viewQueries: [{ propertyName: "tableTr", first: true, predicate: ["tableTr"], descendants: true }, { propertyName: "tBody", first: true, predicate: ["tBody"], descendants: true }, { propertyName: "totals", first: true, predicate: ["totals"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableRow", first: true, predicate: ["tableRow"], descendants: true }, { propertyName: "componentDescription", first: true, predicate: ["description"], descendants: true }, { propertyName: "componentLabel", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: ` <sti-component
[element]="element"
[isClone]="isClone"
(mouseenter)="model.previewMode ? (isActive = true) : ''"
(mouseleave)="model.previewMode ? (isActive = false) : ''"
>
<sti-editable-content-component
*ngIf="element?.label.value?.length > 0 && element?.isLabelTopAlignment()"
[style.align-self]="align"
[style.text-align]="contentAlign"
[editableContent]="element.label"
[style.width]="width"
></sti-editable-content-component>
<table
class="outer-table"
[style.width]="'100%'"
[style.height]="'max-content'"
[style.margin-top.px]="element?.getTopMargin()"
>
<tr>
<td
*ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"
[style.display]="'flex'"
[style.height]="'100%'"
[style.width]="element?.getLabelWidth()"
[style.align-items]="element?.getVerticalAlignment()"
#label
>
<sti-editable-content-component
*ngIf="element?.label.value?.length > 0"
[editableContent]="element?.label"
[required]="element.required"
[style.text-align]="element?.getContentAlign()"
[style.width]="element?.getLabelWidth()"
[hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
></sti-editable-content-component>
</td>
<td [style.width]="'100%'">
<div class="sti-table" #table>
<div [style.display]="'flex'">
<table
class="column-drop-area"
[style.background-color]="element?.backgroundColor.toHtmlColor()"
[style.align-self]="align"
>
<thead>
<tr #tableTr>
<th
*ngIf="element?.showRowLabels"
[id]="0"
(mousemove)="columnDraggableService.fromTable ? (columnDraggableService.insertIndex = 0) : return"
[style.justify-content]="headerAlignment"
[style.color]="element?.tableHeaderColor.toHtmlColor()"
[style.background-color]="element?.tableHeaderBackgroundColor.toHtmlColor()"
[style.width.px]="!isClone ? element?.rowLabelsWidth : 0"
[style.max-height.px]="
!isClone && !model.pdfPreviewMode && isInitialized && isOverMaxHeight()
? getMaxHeight()
: 'auto'
"
[style.border-top]="getBorder(element?.border.pen, element?.border.drawTop)"
[style.border-left]="getBorder(element?.border.pen, element?.border.drawLeft)"
[style.border-bottom]="
getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawTop)
"
[style.border-right]="
element.columns.length > 0 ? '' : getBorder(element?.border.pen, element?.border.drawRight)
"
[style.padding]="'5px 0px 5px 5px'"
>
<sti-editable-content-component
[editableContent]="element"
[alignment]="element?.tableHeaderAlignment"
[isTableHeader]="true"
[style.width]="'100%'"
[hideEmpty]="false"
[active]="selected"
></sti-editable-content-component>
<sti-table-column-resizer
[resizableItem]="element"
[element]="element"
[style.height]="'100%'"
></sti-table-column-resizer>
</th>
<th
*ngFor="let column of element.columns; index as idx"
[id]="idx + 1"
(mousemove)="
columnDraggableService.fromTable ? (columnDraggableService.insertIndex = idx + 1) : return
"
class="drag-item sti-table-th"
(click)="model.showColumnPreview(idx)"
[style]="element.font.htmlStyle()"
[style.justify-content]="getColumnAlignment(column)"
(mousedown)="onHeaderClick($event, column)"
[style.color]="column?.headerForeColor.toHtmlColor()"
[style.background-color]="column?.headerBackColor.toHtmlColor()"
[style.width.px]="!isClone ? column?.width : 0"
[style.height.px]="
isClone && !model.pdfPreviewMode ? element?.element?.nativeElement?.clientHeight : 'auto'
"
[style.max-height.px]="
!isClone && !model.pdfPreviewMode && isInitialized && isOverMaxHeight()
? getMaxHeight()
: 'auto'
"
[style.transition]="columnDraggableService.fromTable ? 'border-width 50ms linear' : ''"
[style.border-top]="
getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawTop) !=
'transparent'
? getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawTop)
: getBorder(element?.border.pen, element?.border.drawTop)
"
[style.border-bottom]="
getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawBottom)
"
[style.border-right]="
getBorder(
element?.columnHeadersBorder.pen,
element?.columnHeadersBorder.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
) != 'transparent'
? idx == element.columns.length - 1
? getBorder(
element?.columnHeadersBorder.pen,
element?.columnHeadersBorder.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
: getBorder(
element?.gridLines.pen,
element?.gridLines.drawVertical,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
: idx == element.columns.length - 1
? getBorder(
element?.border.pen,
element?.border.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
: getBorder(
element?.gridLines.pen,
element?.gridLines.drawVertical,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
"
[style.border-left]="
idx == 0
? getBorder(
element?.columnHeadersBorder.pen,
element?.columnHeadersBorder.drawLeft,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == 0 &&
idx == 0
? true
: false
)
: ''
"
[style.border-left-width]="
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == 0 &&
idx == 0
? getBorderWidth(element?.columnHeadersBorder.pen, true)
: getBorderWidth(element?.columnHeadersBorder.pen, false)
"
[style.border-right-width]="
idx != element.columns.length - 1
? columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? getBorderWidth(element?.gridLines.pen, true)
: getBorderWidth(element?.gridLines.pen, false)
: element?.columnHeadersBorder.drawRight
? columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? getBorderWidth(element?.columnHeadersBorder.pen, true)
: getBorderWidth(element?.columnHeadersBorder.pen, false)
: columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? getBorderWidth(element?.border.pen, true)
: getBorderWidth(element?.border.pen, false)
"
[style.padding]="'5px 0px 5px 5px'"
>
<sti-editable-content-component
[eParent]="element"
[editableContent]="column"
[alignment]="column?.headerAlignment"
[isTableHeader]="true"
[style.width]="'100%'"
[hideEmpty]="false"
[active]="selected"
></sti-editable-content-component>
<sti-table-column-resizer
[resizableItem]="column"
[element]="element"
[index]="idx"
*ngIf="idx != element.columns.length - 1"
[style.height]="'100%'"
></sti-table-column-resizer>
</th>
</tr>
</thead>
<tbody #tBody>
<tr *ngFor="let rowLabel of element.rowLabelsContentEditable; index as i" #tableRow>
<td
*ngIf="element?.showRowLabels"
[attr.data-label]="element.tableHeaderText"
[id]="0"
(mousemove)="columnDraggableService.fromTable ? (columnDraggableService.insertIndex = 0) : return"
[style]="element.font.htmlStyle()"
[style.justify-content]="rowAlignment"
[style.color]="getColumnForeColor(rowLabel, i)"
[style.width.px]="!isClone ? element?.rowLabelsWidth : 0"
[style.background-color]="getColumnBackColor(rowLabel, i)"
[style.border-left]="
getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawLeft) != 'transparent'
? getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawLeft)
: getBorder(element?.border.pen, element?.border.drawLeft)
"
[style.border-bottom]="
getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawBottom) != 'transparent'
? i == element.rowLabels.length - 1
? getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawBottom)
: getBorder(element?.gridLines.pen, element?.gridLines.drawHorizontal)
: i == element.rowLabels.length - 1
? getBorder(element?.border.pen, element?.border.drawBottom)
: getBorder(element?.gridLines.pen, element?.gridLines.drawHorizontal)
"
[style.border-right]="
element.columns.length > 0
? ''
: getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawRight) !=
'transparent'
? getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawRight)
: getBorder(element?.border.pen, element?.border.drawRight)
"
>
<sti-editable-content-component
[eParent]="element"
[editableContent]="rowLabel"
[displayContent]="rowLabel?.displayValue"
[alignment]="element?.rowLabelsHorizontalAlignment"
[style.width]="'100%'"
[hideEmpty]="false"
[active]="selected"
></sti-editable-content-component>
</td>
<td
*ngFor="let column of element.columns; index as ind"
[attr.data-label]="column.label"
[id]="ind + 1"
(mousedown)="updatePropertyGrid(column, $event)"
(mousemove)="
columnDraggableService.fromTable ? (columnDraggableService.insertIndex = ind + 1) : return
"
class="drag-item sti-table-td"
[style.justify-content]="getColumnAlignment(column)"
[style.color]="getColumnForeColor(column, i)"
[style.background-color]="getColumnBackColor(column, i)"
[style.width.px]="
!isClone ? (ind == element.columns.length - 1 ? column?.width + 0.04 : column?.width) : 0
"
[style.transition]="columnDraggableService.fromTable ? 'border-width 50ms linear' : ''"
[style.border-left]="
ind == 0
? getBorder(
element?.rowHeadersBorder.pen,
element?.rowHeadersBorder.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == 0 &&
ind == 0
? true
: false
)
: ''
"
[style.border-bottom]="
i == element.rowLabels.length - 1
? getBorder(element?.border.pen, element?.border.drawBottom)
: getBorder(element?.gridLines.pen, element?.gridLines.drawHorizontal)
"
[style.border-right]="
ind == element.columns.length - 1
? getBorder(
element?.border.pen,
element?.border.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == ind + 1
? true
: false
)
: getBorder(
element?.gridLines.pen,
element?.gridLines.drawVertical,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == ind + 1
? true
: false
)
"
[style.border-left-width]="
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == 0 &&
ind == 0
? getBorderWidth(element?.rowHeadersBorder.pen, true)
: getBorderWidth(element?.rowHeadersBorder.pen, false)
"
[style.border-right-width]="
ind != element.columns.length - 1
? columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == ind + 1
? getBorderWidth(element?.gridLines.pen, true)
: getBorderWidth(element?.gridLines.pen, false)
: element?.columnHeadersBorder.drawRight
? columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == ind + 1
? getBorderWidth(element?.border.pen, true)
: getBorderWidth(element?.border.pen, false)
: columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == ind + 1
? getBorderWidth(element?.border.pen, true)
: getBorderWidth(element?.border.pen, false)
"
>
<sti-table-column-component
[column]="column"
[index]="i"
[element]="element"
[style.width]="'100%'"
></sti-table-column-component>
</td>
</tr>
</tbody>
</table>
<div
class="right"
*ngIf="
element == model.selectedComponent?.element &&
model.draggingElement != element &&
!model.previewMode
"
>
<div class="right-control-panel">
<div
class="add control-button"
[style.margin-bottom.px]="5"
[style.background-color]="getPageColor()"
(click)="addColumn()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect class="plus" width="16" height="16" [attr.fill]="getPageColor()" />
<path
d="M11.5656 8.905H8.97358V11.5656H7.16329V8.905H4.57129V7.23186H7.16329V4.57129H8.97358V7.23186H11.5656V8.905Z"
fill="#898989"
/>
</svg>
</div>
<div
class="delete control-button {{ canDeleteColumn() ? '' : 'disabled' }}"
[style.background-color]="getPageColor()"
(click)="deleteColumn()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M6 8H8H10"
stroke="#898989"
stroke-width="2"
stroke-linecap="square"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="bottom"
*ngIf="
(element == model.selectedComponent?.element &&
model.draggingElement != element &&
!model.previewMode) ||
(model.previewMode && !element.readOnly && element.dynamicRows && isActive)
"
>
<div class="bottom-control-panel">
<div
class="add control-button {{ canAddRow ? '' : 'disabled' }}"
[style.margin-right.px]="5"
[style.background-color]="getPageColor()"
(click)="addRow()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect class="plus" width="16" height="16" [attr.fill]="getPageColor()" />
<path
d="M11.5656 8.905H8.97358V11.5656H7.16329V8.905H4.57129V7.23186H7.16329V4.57129H8.97358V7.23186H11.5656V8.905Z"
fill="#898989"
/>
</svg>
</div>
<div
class="delete control-button {{ canDeleteRow ? '' : 'disabled' }}"
[style.background-color]="getPageColor()"
(click)="deleteRow()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M6 8H8H10"
stroke="#898989"
stroke-width="2"
stroke-linecap="square"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
<div class="totals" *ngIf="element?.useTotals" #totals>
<div
class="totals-header"
[style.align-items]="totalVerticalAlignment"
[style.justify-content]="totalHorizontalAlignment"
>
<sti-editable-content-component
[editableContent]="element.totalsRowHeaderEditableContent"
[hideEmpty]="false"
[active]="selected"
[isTableTotalHeader]="true"
></sti-editable-content-component>
</div>
<div class="totals-fields">
<sti-table-totals-field-component
[fields]="element.totalsFields"
[object]="element"
></sti-table-totals-field-component>
</div>
</div>
</td>
</tr>
<tr *ngIf="element?.description.value?.length > 0" #description>
<td *ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"></td>
<td [style.maxWidth.px]="element.maxWidth + 1">
<sti-editable-content-component
*ngIf="element?.description.value?.length > 0"
[editableContent]="element.description"
>
</sti-editable-content-component>
</td>
</tr>
</table>
</sti-component>`, isInline: true, styles: [".outer-table table{border-spacing:0}.outer-table tr{height:max-content;padding:0;margin:0}.outer-table td{height:100%;padding:0;margin:0}.add{border-radius:3px;background-color:transparent;display:flex;border:1px solid lightGray;justify-content:center;align-items:center;z-index:100}.disabled{opacity:.5;pointer-events:none}.right{width:0px;background-color:transparent;position:relative}.right-control-panel{height:55px;width:18px;left:3px;top:calc(50% - 22.5px);position:absolute;display:flex;flex-direction:column}.right-control-panel .control-button{height:25px}.control-button{border-radius:3px;background-color:transparent;display:flex;border:1px solid lightGray;justify-content:center;align-items:center;z-index:100}.control-button:hover{background-color:#d3d3d3!important;cursor:default}.control-button:hover .plus{fill:#d3d3d3!important;cursor:default}.bottom-control-panel{height:18px;width:55px;top:3px;left:calc(50% - 22.5px);position:absolute;display:flex}.bottom-control-panel .control-button{width:25px}.bottom{width:calc(100% - 5px);height:0px;background-color:transparent;position:relative}.table-content{min-width:260px;width:100%;display:inline-block;flex-direction:column;flex:1}table,th,td{border-collapse:collapse}th{position:relative}.sti-table th,.sti-table td{display:flex;flex-direction:row;align-items:center;overflow:hidden;padding:4px;height:auto}.sti-table table{width:100%;margin:0;padding:0;display:inline-table;table-layout:auto;border-collapse:collapse;border-spacing:0;overflow:hidden}.sti-table th{padding:3px}.sti-table tr{display:flex;flex-direction:row;flex:1}.totals{width:100%;display:flex;min-height:5px;margin-top:5px;overflow:hidden}.totals-header{display:flex;flex:1;padding:4px 0}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.StiComponent, selector: "sti-component", inputs: ["element", "class", "isClone", "borderArea"] }, { kind: "component", type: i8.StiEditableContentComponent, selector: "sti-editable-content-component", inputs: ["editableContent", "displayContent", "required", "eParent", "hideEmpty", "active", "alignment", "isTableTotalHeader", "disablePadding", "fromButton", "parentCursor", "isTableHeader"] }, { kind: "component", type: i9.StiTableTotalsFieldComponent, selector: "sti-table-totals-field-component", inputs: ["fields", "object", "isClone"] }, { kind: "component", type: i10.StiTableColumnResizerComponent, selector: "sti-table-column-resizer", inputs: ["resizableItem", "element", "index"] }, { kind: "component", type: i11.StiTableColumnComponent, selector: "sti-table-column-component", inputs: ["column", "index", "element"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StiTableComponent, decorators: [{
type: Component,
args: [{ selector: "sti-table-component", template: ` <sti-component
[element]="element"
[isClone]="isClone"
(mouseenter)="model.previewMode ? (isActive = true) : ''"
(mouseleave)="model.previewMode ? (isActive = false) : ''"
>
<sti-editable-content-component
*ngIf="element?.label.value?.length > 0 && element?.isLabelTopAlignment()"
[style.align-self]="align"
[style.text-align]="contentAlign"
[editableContent]="element.label"
[style.width]="width"
></sti-editable-content-component>
<table
class="outer-table"
[style.width]="'100%'"
[style.height]="'max-content'"
[style.margin-top.px]="element?.getTopMargin()"
>
<tr>
<td
*ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"
[style.display]="'flex'"
[style.height]="'100%'"
[style.width]="element?.getLabelWidth()"
[style.align-items]="element?.getVerticalAlignment()"
#label
>
<sti-editable-content-component
*ngIf="element?.label.value?.length > 0"
[editableContent]="element?.label"
[required]="element.required"
[style.text-align]="element?.getContentAlign()"
[style.width]="element?.getLabelWidth()"
[hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
></sti-editable-content-component>
</td>
<td [style.width]="'100%'">
<div class="sti-table" #table>
<div [style.display]="'flex'">
<table
class="column-drop-area"
[style.background-color]="element?.backgroundColor.toHtmlColor()"
[style.align-self]="align"
>
<thead>
<tr #tableTr>
<th
*ngIf="element?.showRowLabels"
[id]="0"
(mousemove)="columnDraggableService.fromTable ? (columnDraggableService.insertIndex = 0) : return"
[style.justify-content]="headerAlignment"
[style.color]="element?.tableHeaderColor.toHtmlColor()"
[style.background-color]="element?.tableHeaderBackgroundColor.toHtmlColor()"
[style.width.px]="!isClone ? element?.rowLabelsWidth : 0"
[style.max-height.px]="
!isClone && !model.pdfPreviewMode && isInitialized && isOverMaxHeight()
? getMaxHeight()
: 'auto'
"
[style.border-top]="getBorder(element?.border.pen, element?.border.drawTop)"
[style.border-left]="getBorder(element?.border.pen, element?.border.drawLeft)"
[style.border-bottom]="
getBorder(element?.rowHeadersBorder.pen, element?.rowHeadersBorder.drawTop)
"
[style.border-right]="
element.columns.length > 0 ? '' : getBorder(element?.border.pen, element?.border.drawRight)
"
[style.padding]="'5px 0px 5px 5px'"
>
<sti-editable-content-component
[editableContent]="element"
[alignment]="element?.tableHeaderAlignment"
[isTableHeader]="true"
[style.width]="'100%'"
[hideEmpty]="false"
[active]="selected"
></sti-editable-content-component>
<sti-table-column-resizer
[resizableItem]="element"
[element]="element"
[style.height]="'100%'"
></sti-table-column-resizer>
</th>
<th
*ngFor="let column of element.columns; index as idx"
[id]="idx + 1"
(mousemove)="
columnDraggableService.fromTable ? (columnDraggableService.insertIndex = idx + 1) : return
"
class="drag-item sti-table-th"
(click)="model.showColumnPreview(idx)"
[style]="element.font.htmlStyle()"
[style.justify-content]="getColumnAlignment(column)"
(mousedown)="onHeaderClick($event, column)"
[style.color]="column?.headerForeColor.toHtmlColor()"
[style.background-color]="column?.headerBackColor.toHtmlColor()"
[style.width.px]="!isClone ? column?.width : 0"
[style.height.px]="
isClone && !model.pdfPreviewMode ? element?.element?.nativeElement?.clientHeight : 'auto'
"
[style.max-height.px]="
!isClone && !model.pdfPreviewMode && isInitialized && isOverMaxHeight()
? getMaxHeight()
: 'auto'
"
[style.transition]="columnDraggableService.fromTable ? 'border-width 50ms linear' : ''"
[style.border-top]="
getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawTop) !=
'transparent'
? getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawTop)
: getBorder(element?.border.pen, element?.border.drawTop)
"
[style.border-bottom]="
getBorder(element?.columnHeadersBorder.pen, element?.columnHeadersBorder.drawBottom)
"
[style.border-right]="
getBorder(
element?.columnHeadersBorder.pen,
element?.columnHeadersBorder.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
) != 'transparent'
? idx == element.columns.length - 1
? getBorder(
element?.columnHeadersBorder.pen,
element?.columnHeadersBorder.drawRight,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
: getBorder(
element?.gridLines.pen,
element?.gridLines.drawVertical,
columnDraggableService.parentElement == element &&
columnDraggableService.fromTable &&
columnDraggableService.insertIndex == idx + 1
? true
: false
)
: idx == element.columns.length - 1
? getBorder(