@unifylib/ui-lib 1.1.22 → 1.1.23

package/fesm2022/unifylib-ui-lib.mjs

@@ -5650,7 +5650,6 @@ class ItemLineEditorComponent {
             return;
         this.items[index] = { ...v, total: this.calcLineTotal(index) };
         this.editing[index] = false;
-        this.setFieldsReadonly(true);
         this.itemsChange.emit([...this.items]);
         this.itemSaved.emit({ index, item: this.items[index] });
         this.editStateChange.emit({ index, editing: false });
@@ -5724,16 +5723,10 @@ class ItemLineEditorComponent {
             grandTotal: this.grandTotal
         });
     }
-    setFieldsReadonly(state) {
-        this.fields = (this.fields || []).map(f => ({ ...f, readonly: state }));
-    }
     restoreFieldsFromSnapshot() {
         if (this.baseFieldsSnapshot && this.baseFieldsSnapshot.length) {
             this.fields = this.baseFieldsSnapshot.map(f => ({ ...f }));
         }
-        else {
-            this.setFieldsReadonly(false);
-        }
     }
     get gridTemplate() {
         return this.columnHeaderWidths.join(' ');
@@ -5752,7 +5745,7 @@ class ItemLineEditorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n\r\n  <h3 class=\"title\">{{ title | translate }}</h3>\r\n  <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n  <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n    <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n      <div class=\"col\">\r\n        {{ labelOf(f)  | translate }}\r\n        <span *ngIf=\"f.required\" class=\"required-asterisk\"> * </span>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  @if (!noDataFound) {\r\n    <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n      <div class=\"table-row\">\r\n\r\n        <div class=\"row-inputs\">\r\n          <app-base-form-canvas\r\n            [pageInfo]=\"pageInfo\"\r\n            [fields]=\"fields\"\r\n            [editable]=\"editing[i]\"\r\n            [emitOnValueChanges]=\"true\"\r\n            [item]=\"it\"\r\n            [currency]=\"currency\"\r\n            (formUpdated)=\"onFormUpdated($event, i)\">\r\n          </app-base-form-canvas>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div class=\"row-actions\">\r\n\r\n        <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n                [disabled]=\"!canSave(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>check</mat-icon>\r\n            <span>{{ 'item-line.save' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n                (click)=\"editRow(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>edit</mat-icon>\r\n            <span>{{ 'item-line.edit' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n                (click)=\"deleteItem(i)\" type=\"button\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>delete</mat-icon>\r\n            <span>{{ 'item-line.delete' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (noDataFound) {\r\n    <div class=\"dataNotFound flex-column\">\r\n      <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n      <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n      <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n    </div>\r\n\r\n  }\r\n  <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n    <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n    <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n            [disabled]=\"!canAddNew\">\r\n      <div class=\"button-text\">\r\n        <mat-icon>add</mat-icon>\r\n        <span>  {{ 'item-line.addNewItem' | translate }}</span>\r\n      </div>\r\n    </button>\r\n\r\n  </div>\r\n\r\n  @if (!noDataFound) {\r\n    <div class=\"totals-box\">\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.required-asterisk{color:red}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n  <div class=\"header-section\">\r\n    <div class=\"header-content\">\r\n      <div class=\"header-text\">\r\n        <h3 class=\"title\">{{ title | translate }}</h3>\r\n        <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"header-divider\"></div>\r\n  </div>\r\n\r\n  <div class=\"table-section\">\r\n    @if (!noDataFound) {\r\n      <div class=\"table-container\">\r\n        <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n          <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n            <div class=\"header-cell\" [class.description-cell]=\"f.property === 'description'\">\r\n              <span class=\"header-cell-text\">\r\n                {{ labelOf(f) | translate }}\r\n                <span *ngIf=\"f.required\" class=\"required-asterisk\">*</span>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row-container\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n            <div class=\"table-row\">\r\n              <div class=\"row-inputs\" [attr.data-grid-columns]=\"gridTemplate\" [ngStyle]=\"{ '--grid-columns': gridTemplate }\">\r\n                <app-base-form-canvas\r\n                  [pageInfo]=\"pageInfo\"\r\n                  [fields]=\"fields\"\r\n                  [editable]=\"editing[i]\"\r\n                  [emitOnValueChanges]=\"true\"\r\n                  [item]=\"it\"\r\n                  [currency]=\"currency\"\r\n                  (formUpdated)=\"onFormUpdated($event, i)\">\r\n                </app-base-form-canvas>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"row-actions\">\r\n              <button *ngIf=\"editing[i]\" mat-stroked-button class=\"save-btn\" (click)=\"saveRow(i)\"\r\n                      [disabled]=\"!canSave(i)\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>check</mat-icon>\r\n                  <span>{{ 'item-line.save' | translate }}</span>\r\n                </div>\r\n              </button>\r\n\r\n              <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"edit-btn\"\r\n                      (click)=\"editRow(i)\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>edit</mat-icon>\r\n                  <span>{{ 'item-line.edit' | translate }}</span>\r\n                </div>\r\n              </button>\r\n\r\n              <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"delete-btn\"\r\n                      (click)=\"deleteItem(i)\" type=\"button\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>delete</mat-icon>\r\n                  <span>{{ 'item-line.delete' | translate }}</span>\r\n                </div>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"row-divider\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if (noDataFound) {\r\n      <div class=\"dataNotFound\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n      <button mat-stroked-button class=\"add-item-btn\" (click)=\"addNewItem()\"\r\n              [disabled]=\"!canAddNew\">\r\n        <div class=\"button-text\">\r\n          <mat-icon>add_circle_outline</mat-icon>\r\n          <span>{{ 'item-line.addNewItem' | translate }}</span>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Totals Box -->\r\n  @if (!noDataFound) {\r\n    <!-- <div class=\"totals-box\">\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"totals-divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div> -->\r\n  }\r\n</div>", styles: [":host{display:block;width:100%}.item-line-editor{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:100%;box-sizing:border-box}.header-section{display:flex;flex-direction:column;gap:20px}.header-content{display:flex;align-items:center;justify-content:space-between}.header-text{display:flex;flex-direction:column;line-height:1.2}.title{font-weight:700;font-size:24px;color:#000;margin:0}.subtitle{font-weight:300;font-size:16px;color:#888;margin:0}.header-divider{height:2px;background-color:#0d4261;width:100%}.table-section{display:flex;flex-direction:column;gap:20px}.table-container{display:flex;flex-direction:column;gap:24px;width:100%;max-width:100%;box-sizing:border-box}.table-header{display:grid;width:100%;max-width:100%;min-width:0;box-sizing:border-box;border-top:1px solid #0d4261;border-bottom:1px solid #0d4261}.header-cell{display:flex;align-items:center;justify-content:flex-start;height:48px;padding:0 20px;background:#fff;min-width:0;overflow:hidden;box-sizing:border-box}.header-cell-text{font-weight:400;font-size:16px;color:#0d4261;line-height:1.2;display:flex;align-items:center;gap:4px}.required-asterisk{color:#ce3b3a;font-weight:500}.table-body{width:100%;max-width:100%;box-sizing:border-box}.table-row-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;box-sizing:border-box}.table-row{width:100%;max-width:100%;box-sizing:border-box}.row-inputs{width:100%;padding:0 20px}:host ::ng-deep .row-container{border-bottom:1px solid #f0eeee}:host ::ng-deep .row-container .field-column{min-height:70px;padding:16px 0;background:#fff}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field{width:100%;margin-bottom:0}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper{background:transparent!important;padding:0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mdc-notched-outline{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0!important;border:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{padding:0!important;min-height:32px!important;width:100%!important;border:none!important;border-bottom:1px solid #b7b7b7!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-family:lusail,sans-serif!important;font-weight:400!important;font-size:16px!important;color:#000!important;padding:4px 0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#888!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input:disabled{color:#000!important}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;width:100%;padding-top:8px}.row-divider{height:1px;background-color:#0d4261;width:100%;margin-top:8px}.save-btn,.edit-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #0d4261!important;background:#fff!important;cursor:pointer}.save-btn .button-text,.edit-btn .button-text{display:flex;align-items:center;gap:4px}.save-btn .button-text mat-icon,.edit-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#0d4261}.save-btn .button-text span,.edit-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#0d4261;line-height:1}.save-btn:disabled,.edit-btn:disabled{opacity:.5;cursor:not-allowed}.delete-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #ce3b3a!important;background:#fff!important;cursor:pointer}.delete-btn .button-text{display:flex;align-items:center;gap:4px}.delete-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#ce3b3a}.delete-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#ce3b3a;line-height:1}.add-item{width:100%}.add-item-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:44px!important;min-width:185px!important;padding:0 16px!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;cursor:pointer}.add-item-btn .button-text{display:flex;align-items:center;gap:4px}.add-item-btn .button-text mat-icon{font-size:24px!important;width:24px!important;height:30px!important;color:#0d4261}.add-item-btn .button-text span{font-weight:500;font-size:16px;color:#0d4261;line-height:1}.add-item-btn:disabled{opacity:.5;cursor:not-allowed}.totals-box{width:400px;max-width:100%}.total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.total-row .label{font-weight:500;font-size:16px;color:#333}.total-row .value{font-weight:600;font-size:16px}.total-row.grand .label{font-weight:700}.total-row.grand .value{font-weight:700;font-size:18px}.totals-divider{height:1px;background-color:#e0e0e0;margin:8px 0}.red{color:#d9534f}.green{color:#0c7d5e}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.dataNotFound__icon{color:#0d4261;font-size:48px;height:50px;width:48px;margin-bottom:16px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:8px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.line-total{font-weight:600;font-size:14px}.divider{border-top:1px solid #e0e0e0;margin:10px 0}::ng-deep .btn-background-primary,::ng-deep .btn-none-background-primary{margin:8px 0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, decorators: [{
             type: Component,
@@ -5763,7 +5756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatIconModule,
                         BaseFormCanvasComponent,
                         TranslateModule
-                    ], template: "<div class=\"item-line-editor\">\r\n\r\n  <h3 class=\"title\">{{ title | translate }}</h3>\r\n  <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n  <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n    <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n      <div class=\"col\">\r\n        {{ labelOf(f)  | translate }}\r\n        <span *ngIf=\"f.required\" class=\"required-asterisk\"> * </span>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  @if (!noDataFound) {\r\n    <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n      <div class=\"table-row\">\r\n\r\n        <div class=\"row-inputs\">\r\n          <app-base-form-canvas\r\n            [pageInfo]=\"pageInfo\"\r\n            [fields]=\"fields\"\r\n            [editable]=\"editing[i]\"\r\n            [emitOnValueChanges]=\"true\"\r\n            [item]=\"it\"\r\n            [currency]=\"currency\"\r\n            (formUpdated)=\"onFormUpdated($event, i)\">\r\n          </app-base-form-canvas>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div class=\"row-actions\">\r\n\r\n        <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n                [disabled]=\"!canSave(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>check</mat-icon>\r\n            <span>{{ 'item-line.save' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n                (click)=\"editRow(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>edit</mat-icon>\r\n            <span>{{ 'item-line.edit' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n                (click)=\"deleteItem(i)\" type=\"button\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>delete</mat-icon>\r\n            <span>{{ 'item-line.delete' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (noDataFound) {\r\n    <div class=\"dataNotFound flex-column\">\r\n      <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n      <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n      <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n    </div>\r\n\r\n  }\r\n  <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n    <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n    <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n            [disabled]=\"!canAddNew\">\r\n      <div class=\"button-text\">\r\n        <mat-icon>add</mat-icon>\r\n        <span>  {{ 'item-line.addNewItem' | translate }}</span>\r\n      </div>\r\n    </button>\r\n\r\n  </div>\r\n\r\n  @if (!noDataFound) {\r\n    <div class=\"totals-box\">\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.required-asterisk{color:red}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"] }]
+                    ], template: "<div class=\"item-line-editor\">\r\n  <div class=\"header-section\">\r\n    <div class=\"header-content\">\r\n      <div class=\"header-text\">\r\n        <h3 class=\"title\">{{ title | translate }}</h3>\r\n        <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"header-divider\"></div>\r\n  </div>\r\n\r\n  <div class=\"table-section\">\r\n    @if (!noDataFound) {\r\n      <div class=\"table-container\">\r\n        <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n          <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n            <div class=\"header-cell\" [class.description-cell]=\"f.property === 'description'\">\r\n              <span class=\"header-cell-text\">\r\n                {{ labelOf(f) | translate }}\r\n                <span *ngIf=\"f.required\" class=\"required-asterisk\">*</span>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row-container\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n            <div class=\"table-row\">\r\n              <div class=\"row-inputs\" [attr.data-grid-columns]=\"gridTemplate\" [ngStyle]=\"{ '--grid-columns': gridTemplate }\">\r\n                <app-base-form-canvas\r\n                  [pageInfo]=\"pageInfo\"\r\n                  [fields]=\"fields\"\r\n                  [editable]=\"editing[i]\"\r\n                  [emitOnValueChanges]=\"true\"\r\n                  [item]=\"it\"\r\n                  [currency]=\"currency\"\r\n                  (formUpdated)=\"onFormUpdated($event, i)\">\r\n                </app-base-form-canvas>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"row-actions\">\r\n              <button *ngIf=\"editing[i]\" mat-stroked-button class=\"save-btn\" (click)=\"saveRow(i)\"\r\n                      [disabled]=\"!canSave(i)\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>check</mat-icon>\r\n                  <span>{{ 'item-line.save' | translate }}</span>\r\n                </div>\r\n              </button>\r\n\r\n              <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"edit-btn\"\r\n                      (click)=\"editRow(i)\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>edit</mat-icon>\r\n                  <span>{{ 'item-line.edit' | translate }}</span>\r\n                </div>\r\n              </button>\r\n\r\n              <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"delete-btn\"\r\n                      (click)=\"deleteItem(i)\" type=\"button\">\r\n                <div class=\"button-text\">\r\n                  <mat-icon>delete</mat-icon>\r\n                  <span>{{ 'item-line.delete' | translate }}</span>\r\n                </div>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"row-divider\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if (noDataFound) {\r\n      <div class=\"dataNotFound\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n      <button mat-stroked-button class=\"add-item-btn\" (click)=\"addNewItem()\"\r\n              [disabled]=\"!canAddNew\">\r\n        <div class=\"button-text\">\r\n          <mat-icon>add_circle_outline</mat-icon>\r\n          <span>{{ 'item-line.addNewItem' | translate }}</span>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Totals Box -->\r\n  @if (!noDataFound) {\r\n    <!-- <div class=\"totals-box\">\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"totals-divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div> -->\r\n  }\r\n</div>", styles: [":host{display:block;width:100%}.item-line-editor{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:100%;box-sizing:border-box}.header-section{display:flex;flex-direction:column;gap:20px}.header-content{display:flex;align-items:center;justify-content:space-between}.header-text{display:flex;flex-direction:column;line-height:1.2}.title{font-weight:700;font-size:24px;color:#000;margin:0}.subtitle{font-weight:300;font-size:16px;color:#888;margin:0}.header-divider{height:2px;background-color:#0d4261;width:100%}.table-section{display:flex;flex-direction:column;gap:20px}.table-container{display:flex;flex-direction:column;gap:24px;width:100%;max-width:100%;box-sizing:border-box}.table-header{display:grid;width:100%;max-width:100%;min-width:0;box-sizing:border-box;border-top:1px solid #0d4261;border-bottom:1px solid #0d4261}.header-cell{display:flex;align-items:center;justify-content:flex-start;height:48px;padding:0 20px;background:#fff;min-width:0;overflow:hidden;box-sizing:border-box}.header-cell-text{font-weight:400;font-size:16px;color:#0d4261;line-height:1.2;display:flex;align-items:center;gap:4px}.required-asterisk{color:#ce3b3a;font-weight:500}.table-body{width:100%;max-width:100%;box-sizing:border-box}.table-row-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;box-sizing:border-box}.table-row{width:100%;max-width:100%;box-sizing:border-box}.row-inputs{width:100%;padding:0 20px}:host ::ng-deep .row-container{border-bottom:1px solid #f0eeee}:host ::ng-deep .row-container .field-column{min-height:70px;padding:16px 0;background:#fff}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field{width:100%;margin-bottom:0}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper{background:transparent!important;padding:0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mdc-notched-outline{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0!important;border:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{padding:0!important;min-height:32px!important;width:100%!important;border:none!important;border-bottom:1px solid #b7b7b7!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-family:lusail,sans-serif!important;font-weight:400!important;font-size:16px!important;color:#000!important;padding:4px 0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#888!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input:disabled{color:#000!important}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;width:100%;padding-top:8px}.row-divider{height:1px;background-color:#0d4261;width:100%;margin-top:8px}.save-btn,.edit-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #0d4261!important;background:#fff!important;cursor:pointer}.save-btn .button-text,.edit-btn .button-text{display:flex;align-items:center;gap:4px}.save-btn .button-text mat-icon,.edit-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#0d4261}.save-btn .button-text span,.edit-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#0d4261;line-height:1}.save-btn:disabled,.edit-btn:disabled{opacity:.5;cursor:not-allowed}.delete-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #ce3b3a!important;background:#fff!important;cursor:pointer}.delete-btn .button-text{display:flex;align-items:center;gap:4px}.delete-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#ce3b3a}.delete-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#ce3b3a;line-height:1}.add-item{width:100%}.add-item-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:44px!important;min-width:185px!important;padding:0 16px!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;cursor:pointer}.add-item-btn .button-text{display:flex;align-items:center;gap:4px}.add-item-btn .button-text mat-icon{font-size:24px!important;width:24px!important;height:30px!important;color:#0d4261}.add-item-btn .button-text span{font-weight:500;font-size:16px;color:#0d4261;line-height:1}.add-item-btn:disabled{opacity:.5;cursor:not-allowed}.totals-box{width:400px;max-width:100%}.total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.total-row .label{font-weight:500;font-size:16px;color:#333}.total-row .value{font-weight:600;font-size:16px}.total-row.grand .label{font-weight:700}.total-row.grand .value{font-weight:700;font-size:18px}.totals-divider{height:1px;background-color:#e0e0e0;margin:8px 0}.red{color:#d9534f}.green{color:#0c7d5e}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.dataNotFound__icon{color:#0d4261;font-size:48px;height:50px;width:48px;margin-bottom:16px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:8px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.line-total{font-weight:600;font-size:14px}.divider{border-top:1px solid #e0e0e0;margin:10px 0}::ng-deep .btn-background-primary,::ng-deep .btn-none-background-primary{margin:8px 0!important}\n"] }]
         }], propDecorators: { noDataFoundIcon: [{
                 type: Input
             }], noDataFoundTitle: [{