mmhglobal-dynamicform 2.41.5 → 2.43.0

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -2376,37 +2376,27 @@ class ZComponentService {
         }
         return obsList;
     }
-    localizeDateTimeByIgnoringTimeZone(value, data) {
-        if (this.timePickerDateType.includes(data.Type)) {
-            const userTimeZoneOffSet = this.convertOffsetMinToHour((new Date(value).getTimezoneOffset()));
-            const datetimeWithoutTimeZone = this.removeTimeZoneAndConvertToISOString(value);
-            //return new Date(`${datetimeWithoutTimeZone.split('.000Z')[0]}${userTimeZoneOffSet}`);
-            return new Date(`${datetimeWithoutTimeZone.split('Z')[0]}${userTimeZoneOffSet}`);
-        }
-        else if (data.Type === 'zshortdate') {
-            const dateOnly = value.includes('T') ? value.split('T')[0] : value; // Extract date portion
-            const date = new Date(dateOnly); // Create a date object from the extracted date
-            date.setUTCDate(1); // Set day to the first of the month
-            // Convert to UTC, accounting for the timezone offset
-            const timezoneOffset = date.getTimezoneOffset(); // Get timezone offset in minutes
-            date.setMinutes(date.getMinutes() + timezoneOffset); // Adjust for timezone offset
-            // Return the final date object
-            return date;
-        }
-        else {
-            const dateOnly = value.includes('T') ? value.split('T')[0] : value;
-            return new Date(dateOnly + " " + new Date(dateOnly).toLocaleTimeString());
-        }
-    }
-    removeTimeZoneAndConvertToISOString(value) {
-        const result = value.split('+')[0];
-        return new Date(result.endsWith('Z') ? result : `${result}Z`).toISOString();
-    }
-    convertOffsetMinToHour(num) {
-        num = -num;
-        const prefix = num.toString().startsWith('-') ? '-' : '+';
-        const result = `${(Math.abs(num) / 60).toString().padStart(2, '0')}:00`;
-        return `${prefix}${result}`;
+    localizeDateTimeByIgnoringTimeZone(value, field) {
+        // Support both string and Date inputs
+        const originalDate = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+        // Case 1: time / datetime fields → keep wall-clock time stable
+        if (this.timePickerDateType.includes(field.Type)) {
+            const adjusted = new Date(originalDate);
+            const offsetMinutes = originalDate.getTimezoneOffset();
+            adjusted.setMinutes(originalDate.getMinutes() - offsetMinutes);
+            return adjusted;
+        }
+        // Case 2: month-only (zshortdate) → year+month, day fixed to 1
+        if (field.Type === 'zshortdate') {
+            return new Date(originalDate.getFullYear(), originalDate.getMonth(), 1, // day
+            0, 0, 0, 0);
+        }
+        // Case 3: normal date-only → keep calendar date stable, ignore time
+        const dateOnly = new Date(originalDate.getFullYear(), originalDate.getMonth(), originalDate.getDate(), 0, 0, 0, 0);
+        const normalizedDate = new Date(dateOnly);
+        const localOffsetMinutes = dateOnly.getTimezoneOffset();
+        normalizedDate.setMinutes(dateOnly.getMinutes() - localOffsetMinutes);
+        return normalizedDate;
     }
     //#endregion
     decrementComponentCounterForField(field) {
@@ -3625,21 +3615,21 @@ class DateParserFilter {
     constructor(componentService) {
         this.componentService = componentService;
     }
-    transform(value, data) {
-        // debugger;
-        if (!value) {
-            return value;
+    transform(rawValue, field) {
+        if (!rawValue) {
+            return null;
         }
-        // filter items array, items which match and return true will be
-        // kept, false will be filtered out
         try {
-            if (data.IsIgnoreTimeZone) {
-                return this.componentService.localizeDateTimeByIgnoringTimeZone(value, data);
+            // For "ignore timezone" fields, normalize via service
+            if (field.IsIgnoreTimeZone) {
+                return this.componentService.localizeDateTimeByIgnoringTimeZone(rawValue, field);
             }
-            return new Date(value);
+            // Otherwise, just convert to Date
+            const inputDate = new Date(rawValue);
+            return inputDate;
         }
         catch (error) {
-            console.log("DateParserFilter error: ", error);
+            console.log('DateParserFilter error:', error);
             return null;
         }
     }
@@ -7252,12 +7242,13 @@ class ZdatetimeComponent extends InputFieldBase {
     }
     onChange(value) {
         const formControl = this.form.controls[this.data.Value];
-        const val = this.convertDateTimeValueToString(value);
+        const dateValue = this.convertDateTimeValueToString(value);
         if (formControl) {
-            formControl.setValue(val);
+            formControl.setValue(dateValue);
             formControl.markAsTouched();
         }
-        super.onChange(null, val);
+        // Important: pass Date to base, not ISO string
+        super.onChange(null, dateValue);
     }
     setMinAndMaxDateRange() {
         const minDateGroupValue = ZComponentHelper.getGroupValue(this.data.MinDate, this.group);
@@ -7277,24 +7268,39 @@ class ZdatetimeComponent extends InputFieldBase {
         }
     }
     convertDateTimeValueToString(value) {
-        if (value == undefined) {
+        if (value === undefined || value === null) {
             return undefined;
         }
-        const valueDate = value;
+        const inputDate = new Date(value);
+        // zshortdate → normalize to first day of month
         if (this.data.Type === 'zshortdate') {
-            valueDate.setDate(1);
+            const monthStart = new Date(inputDate);
+            monthStart.setDate(1);
+            return monthStart;
         }
+        // Ignore timezone: keep same local wall-clock time regardless of browser TZ
         if (this.data.IsIgnoreTimeZone) {
-            const timezoneOffSet = new Date(value).getTimezoneOffset();
-            valueDate.setMinutes(valueDate.getMinutes() + (-timezoneOffSet));
-            return valueDate.toISOString();
+            return this.adjustForIgnoreTimeZone(inputDate);
         }
+        // For non-time types -> date-only
         if (!['zuidatetime', 'ztime', 'zuitime'].includes(this.data.Type)) {
-            return this.parseAnyValueToDateOnly(value).toISOString();
-        }
-        else {
-            return this.parseAnyValueToDate(value).toISOString();
+            // Assuming these helpers already return Date
+            const dateOnly = this.parseAnyValueToDateOnly(inputDate);
+            return dateOnly;
         }
+        // For datetime/time types -> full datetime
+        const dateTime = this.parseAnyValueToDate(inputDate);
+        return dateTime;
+    }
+    /**
+     * Adjusts a Date so that its wall-clock time stays the same
+     * when ignoring the browser timezone.
+     */
+    adjustForIgnoreTimeZone(date) {
+        const adjustedDate = new Date(date);
+        const timezoneOffsetMinutes = adjustedDate.getTimezoneOffset();
+        adjustedDate.setMinutes(adjustedDate.getMinutes() - timezoneOffsetMinutes);
+        return adjustedDate;
     }
     parseAnyValueToDate(value) {
         return new Date(value instanceof Date ? value : new Date(value));
@@ -7340,13 +7346,22 @@ class ZgaugeComponent extends FieldBase {
         super(componentService);
         this.componentService = componentService;
         this.isLoading = true;
+        this.value = 0;
+        this.title = "";
+        this.color = [{ color: "#0175c7" }];
+        this.majorTicks = { visible: true, color: '#0000ff' };
+        this.minorTicks = { visible: true, color: '#0000ff' };
+        this.startAngle = 0;
+        this.endAngle = 180;
+        this.minValue = 0;
+        this.maxValue = 200;
         this.options = {
-            value: 0,
-            title: '',
+            value: this.value,
+            title: this.title,
             chartInnerText1: '',
             chartInnerText2: '',
             scaleMax: 50,
-            colors: [],
+            colors: this.color,
             transitions: false,
             majorTicks: { visible: true, color: '#0000ff' },
             minorTicks: { visible: true, color: '#0000ff' },
@@ -7357,12 +7372,12 @@ class ZgaugeComponent extends FieldBase {
             endAngle: 180,
             rangePlaceholderColor: '#e6e5e5',
             labelsColor: '#0000ff',
-            rangeFrom: 0,
-            rangeTo: 100,
             rangeColor: '#ff6358',
             rangeLineCap: 'round',
             showLabels: true,
             rangeSize: 10,
+            labelStyle: "text-align: center; font-size: 18px;",
+            arcgaugeStyle: "margin-top:50px;width:90% ;height:100%; min-width: 330px;",
         };
     }
     ngOnInit() {
@@ -7390,26 +7405,26 @@ class ZgaugeComponent extends FieldBase {
         return this.componentProperties.style.style3 ? this.componentService.convertStyleStringToObject(this.componentProperties.style.style3) : { 'white-space': 'initial' };
     }
     getFieldDeclarationForSetup(field, options) {
+        var _a, _b;
         if (field.Value.startsWith('group.')) {
-            options.value = ZComponentHelper.getGroupEvalValue.call(this, field.Value) || options.value;
+            options.value = (_a = ZComponentHelper.getGroupEvalValue.call(this, field.Value)) !== null && _a !== void 0 ? _a : options.value;
         }
         else {
-            options.value = this.group.zModel[field.Value] || options.value;
+            options.value = (_b = this.group.zModel[field.Value]) !== null && _b !== void 0 ? _b : options.value;
             options.value = parseInt(options.value);
         }
         options.title = ZComponentHelper.getGroupEvalValue.call(this, field.Title) || options.title;
-        options.scaleMax = field.Max || options.scaleMax; // not using
         options.minValue = ZComponentHelper.getGroupEvalValue.call(this, field.MinValue) || options.minValue || 0;
         options.maxValue = ZComponentHelper.getGroupEvalValue.call(this, field.MaxValue) || options.maxValue || 100;
-        options.colors = ZComponentHelper.getGroupEvalValue.call(this, field.Color) || options.colors || { color: "#0175c7" };
+        options.colors = ZComponentHelper.getGroupEvalValue.call(this, field.Color) || options.colors;
         options.transitions = field.Transitions || options.transitions;
-        options.majorTicks = ZComponentHelper.getGroupEvalValue.call(this, field.MajorTicks) || options.majorTicks || { visible: true, color: '#0000ff' };
-        options.minorTicks = ZComponentHelper.getGroupEvalValue.call(this, field.MinorTicks) || options.minorTicks || { visible: true, color: '#0000ff' };
+        options.majorTicks = ZComponentHelper.getGroupEvalValue.call(this, field.MajorTicks) || options.majorTicks;
+        options.minorTicks = ZComponentHelper.getGroupEvalValue.call(this, field.MinorTicks) || options.minorTicks;
         options.showLabels = field.ShowLabels != undefined ? field.ShowLabels : options.showLabels;
         options.style = field.Style || options.style;
         options.reverse = field.Reverse || options.reverse;
-        options.startAngle = ZComponentHelper.getGroupEvalValue.call(this, field.StartAngle) || options.startAngle || 0;
-        options.endAngle = ZComponentHelper.getGroupEvalValue.call(this, field.EndAngle) || options.endAngle || 180;
+        options.startAngle = field.StartAngle || options.startAngle || 0;
+        options.endAngle = field.EndAngle || options.endAngle || 180;
         options.rangePlaceholderColor = field.RangePlaceholderColor || options.rangePlaceholderColor;
         options.rangeFrom = ZComponentHelper.getGroupEvalValue.call(this, field['RangeFrom']) || options.rangeFrom;
         options.rangeTo = ZComponentHelper.getGroupEvalValue.call(this, field['RangeTo']) || options.rangeTo;
@@ -7430,10 +7445,10 @@ class ZgaugeComponent extends FieldBase {
     }
 }
 ZgaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgaugeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZgaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgaugeComponent, selector: "app-zgauge", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" style=\"margin-top:50px;width:90% ;height:100%; min-width: 330px;\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""], components: [{ type: i2$8.ArcGaugeComponent, selector: "kendo-arcgauge", inputs: ["value", "color", "colors", "opacity", "scale"], exportAs: ["kendoArcGauge"] }, { type: i2$8.ArcScaleComponent, selector: "kendo-arcgauge-scale", inputs: ["labels", "rangeDistance", "rangeLineCap", "startAngle", "endAngle"] }, { type: i2$8.ArcLabelsComponent, selector: "kendo-arcgauge-scale-labels" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$8.ArcCenterTemplateDirective, selector: "[kendoArcGaugeCenterTemplate]" }] });
+ZgaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgaugeComponent, selector: "app-zgauge", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"componentProperties.style.style\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" [style]=\"componentProperties.style.style1\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\" [style]=\"componentProperties.style.style2\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""], components: [{ type: i2$8.ArcGaugeComponent, selector: "kendo-arcgauge", inputs: ["value", "color", "colors", "opacity", "scale"], exportAs: ["kendoArcGauge"] }, { type: i2$8.ArcScaleComponent, selector: "kendo-arcgauge-scale", inputs: ["labels", "rangeDistance", "rangeLineCap", "startAngle", "endAngle"] }, { type: i2$8.ArcLabelsComponent, selector: "kendo-arcgauge-scale-labels" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$8.ArcCenterTemplateDirective, selector: "[kendoArcGaugeCenterTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgaugeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zgauge', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" style=\"margin-top:50px;width:90% ;height:100%; min-width: 330px;\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""] }]
+            args: [{ selector: 'app-zgauge', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"componentProperties.style.style\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" [style]=\"componentProperties.style.style1\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\" [style]=\"componentProperties.style.style2\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
 const hideAndShowVerticalAnimation = trigger('hideAndShowAnimation', [
@@ -9077,27 +9092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 args: ["textarea"]
             }] } });
 
+/********** Angular **********/
 class MyFileInfo {
 }
 class ZuploadComponent extends InputFieldBase {
-    // zModelValue = [{
-    //   name: "RXJS 01.png",
-    //   size: 128753,
-    //   uid: "c96e234d-af61-4587-adcc-3b400ddef884"
-    // }];
-    // fieldElement = [{
-    //   Name: 'FileUploadList',
-    //   Type: 'zupload',
-    //   Value: 'FileUploadList',
-    //   SelectionOptions: ['jpg', 'jpeg', 'png', 'bmp', 'pdf'],
-    //   UploadMetaData: 'group.UploadMetaData',
-    //   AutoUpload: false,
-    //   AllowRemove: true,
-    //   Multiple: false,
-    //   OnSuccess: 'group.onSuccess()',
-    //   DivClass: "col-md-12 col-md-6",
-    //   Visible: true
-    // }];
     constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService, alertService) {
         super(componentService);
         this.componentService = componentService;
@@ -9107,6 +9105,7 @@ class ZuploadComponent extends InputFieldBase {
         this.ngZone = ngZone;
         this.sharePointService = sharePointService;
         this.alertService = alertService;
+        // NOTE: Naming: `uid` array actually stores preview UIDs. Consider renaming to `previewUids` in future (not changed to preserve API).
         this.uploadAttachmentUrl = null;
         this.uploadSaveUrl = "/Attachment/Chunk_Upload_Save"; // should represent an actual API endpoint
         this.uploadRemoveUrl = "/Attachment/Chunk_Upload_Remove"; // should represent an actual API endpoint
@@ -9114,9 +9113,9 @@ class ZuploadComponent extends InputFieldBase {
         this.getImageUrl = "/Attachment/getImage"; // GET method
         this.isAutoUpload = false;
         this.isMultiple = false;
+        this.showFileList = true;
         this.imagePreviews = [];
         this.uid = [];
-        this.showFileList = true;
         this.fileList = [];
         this.restrictions = {
             minFileSize: 1,
@@ -9141,75 +9140,134 @@ class ZuploadComponent extends InputFieldBase {
             size: 102400,
             maxAutoRetries: 3,
         };
-        this.uploadAttachmentUrl = this.zcoreService.normalizeUrl(this.zcoreService.getEnvironment().uploadAttachmentUrl);
-        this.uploadSaveUrl = this.uploadAttachmentUrl + this.uploadSaveUrl;
-        this.uploadRemoveUrl = this.uploadAttachmentUrl + this.uploadRemoveUrl;
+        const env = this.zcoreService.getEnvironment();
+        const normalized = this.zcoreService.normalizeUrl(env === null || env === void 0 ? void 0 : env.uploadAttachmentUrl);
+        this.uploadAttachmentUrl = normalized !== null && normalized !== void 0 ? normalized : null;
+        if (this.uploadAttachmentUrl) {
+            this.uploadSaveUrl = this.uploadAttachmentUrl + this.uploadSaveUrl;
+            this.uploadRemoveUrl = this.uploadAttachmentUrl + this.uploadRemoveUrl;
+        }
+        else {
+            // Safer logging: avoid silent null URLs that break uploads
+            // NOTE: This indicates a configuration issue.
+            console.warn(`[ZuploadComponent] uploadAttachmentUrl is empty. Upload endpoints may be invalid.`, { uploadAttachmentUrl: env === null || env === void 0 ? void 0 : env.uploadAttachmentUrl });
+        }
+        this.defaultUploadSaveUrl = this.uploadSaveUrl;
+        this.defaultUploadRemoveUrl = this.uploadRemoveUrl;
     }
+    /**
+     * Angular lifecycle hook - initializes restrictions and upload behavior from field config.
+     */
     ngOnInit() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         super.setupInnerField();
-        // this.group['UploadMetaData'] = new UploadMetaData(null, '15', 'SO-No-1234', 'SaleOrder');
-        // this.uploadSaveUrl = uploadAttachmentUrl + this.uploadSaveUrl;
-        // this.uploadRemoveUrl = uploadAttachmentUrl + this.uploadRemoveUrl;
-        if (this.data.SelectOptions && !this.data.AllowedFileExtension) {
+        // Allowed extensions:
+        // - If SelectOptions present and AllowedFileExtension not present, override
+        // - Else if AllowedFileExtension present and SelectOptions absent, append
+        // NOTE: Keep original behavior; it may allow duplicates, but prevents unexpected restriction loss.
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.SelectOptions) && !((_b = this.data) === null || _b === void 0 ? void 0 : _b.AllowedFileExtension)) {
             this.restrictions.allowedExtensions = this.data.SelectOptions;
         }
-        else if (!this.data.SelectOptions && this.data.AllowedFileExtension) {
+        else if (!((_c = this.data) === null || _c === void 0 ? void 0 : _c.SelectOptions) && ((_d = this.data) === null || _d === void 0 ? void 0 : _d.AllowedFileExtension)) {
             this.restrictions.allowedExtensions = this.restrictions.allowedExtensions.concat(this.data.AllowedFileExtension);
         }
-        if (this.data.MinFileSize) {
+        if (typeof ((_e = this.data) === null || _e === void 0 ? void 0 : _e.MinFileSize) === "number" && this.data.MinFileSize >= 0) {
             this.restrictions.minFileSize = this.data.MinFileSize;
         }
-        if (this.data.MaxFileSize) {
+        if (typeof ((_f = this.data) === null || _f === void 0 ? void 0 : _f.MaxFileSize) === "number" && this.data.MaxFileSize >= 0) {
             this.restrictions.maxFileSize = this.data.MaxFileSize;
         }
-        this.isAutoUpload = this.data.AutoUpload || false;
-        if (!this.data.AllowRemove) {
+        this.isAutoUpload = Boolean((_g = this.data) === null || _g === void 0 ? void 0 : _g.AutoUpload);
+        // If remove is not allowed, Kendo upload expects empty URL to hide remove request.
+        if (this.data && this.data.AllowRemove === false) {
             this.uploadRemoveUrl = "";
         }
-        if (this.data.Multiple) {
-            this.isMultiple = this.data.Multiple;
-        }
-        this.componentProperties.style.style6 = this.componentProperties.style.style6 || "margin: 5px; border: 1px solid gray;";
+        this.isMultiple = Boolean((_h = this.data) === null || _h === void 0 ? void 0 : _h.Multiple);
+        // Ensure style6 exists (legacy styling hook).
+        this.componentProperties.style.style6 =
+            this.componentProperties.style.style6 || "margin: 5px; border: 1px solid gray;";
     }
+    /**
+     * Kendo Upload success callback for both upload and remove.
+     * Keeps zModel in sync and emits ZComponent output events.
+     */
     onSuccess(e) {
-        var _a, _b, _c;
-        // angular kendo upload didn't filter away Sent event for remove, so we have to handle it here
-        // upload progress not required for removal, thus it's also removed
-        // @ts-ignore
-        if (e.operation === "remove" && (e.response.type === HttpEventType.Sent || e.response.type === HttpEventType.UploadProgress)) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        // Angular Kendo Upload emits "Sent" and "UploadProgress" for remove; ignore them to avoid double-handling.
+        // @ts-ignore - Kendo types for response differ by runtime usage
+        const responseType = (_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.type;
+        if ((e === null || e === void 0 ? void 0 : e.operation) === "remove" &&
+            (responseType === HttpEventType.Sent || responseType === HttpEventType.UploadProgress)) {
             return;
         }
-        if (!Array.isArray(this.group.zModel[this.data.Value])) {
-            this.group.zModel[this.data.Value] = [];
+        const modelKey = (_b = this.data) === null || _b === void 0 ? void 0 : _b.Value;
+        if (!modelKey) {
+            console.warn(`[ZuploadComponent] onSuccess skipped: missing data.Value.`, { event: e });
+            return;
         }
-        const file = e.files[0];
-        const existingFileIndex = this.group.zModel[this.data.Value].findIndex(f => f.name === file.name && f.uid === file.uid);
+        if (!((_c = this.group) === null || _c === void 0 ? void 0 : _c.zModel)) {
+            console.warn(`[ZuploadComponent] onSuccess skipped: missing group.zModel.`, { event: e });
+            return;
+        }
+        if (!Array.isArray(this.group.zModel[modelKey])) {
+            this.group.zModel[modelKey] = [];
+        }
+        const file = (_e = (_d = e === null || e === void 0 ? void 0 : e.files) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : undefined;
+        if (!file) {
+            console.warn(`[ZuploadComponent] onSuccess: no file found in event.`, { event: e });
+            return;
+        }
+        const existingFileIndex = this.group.zModel[modelKey].findIndex((f) => (f === null || f === void 0 ? void 0 : f.name) === file.name && (f === null || f === void 0 ? void 0 : f.uid) === file.uid);
         if (e.operation === "upload") {
-            // console.log('upload Success: ', e);
-            //sharepoint required to read data from fileUid and attachment able to get data from fileUid too.
-            file.myUid = (_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.fileUid) !== null && _c !== void 0 ? _c : file.uid;
-            delete file['httpSubscription'];
+            // SharePoint and Attachment use fileUid (server) for later operations.
+            // Prefer fileUid if provided; fallback to file.uid
+            // @ts-ignore - body shape is runtime-dependent
+            file.myUid = (_h = (_g = (_f = e === null || e === void 0 ? void 0 : e.response) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.fileUid) !== null && _h !== void 0 ? _h : file.uid;
+            // Clean up internal subscription data to avoid circular structures
+            // NOTE: This relies on Kendo attaching internal fields; safe delete.
+            delete file["httpSubscription"];
             if (existingFileIndex !== -1) {
-                this.group.zModel[this.data.Value][existingFileIndex] = file;
+                this.group.zModel[modelKey][existingFileIndex] = file;
             }
             else {
-                this.group.zModel[this.data.Value].push(file);
+                this.group.zModel[modelKey].push(file);
             }
+            console.info(`[ZuploadComponent] Upload succeeded.`, {
+                name: file.name,
+                uid: file.uid,
+                myUid: file.myUid,
+            });
         }
         else if (e.operation === "remove") {
             if (existingFileIndex !== -1) {
-                this.group.zModel[this.data.Value].splice(existingFileIndex, 1);
+                this.group.zModel[modelKey].splice(existingFileIndex, 1);
             }
+            console.info(`[ZuploadComponent] Remove succeeded.`, {
+                name: file.name,
+                uid: file.uid,
+                myUid: file.myUid,
+            });
         }
-        ZComponentHelper.setComponentModelValue(this.data, this.group.zModel[this.data.Value], this.group);
-        this.group.subject.next({
+        else {
+            // Unknown operation, preserve behavior but log for diagnostics.
+            console.debug(`[ZuploadComponent] onSuccess received unsupported operation.`, { operation: e.operation, event: e });
+        }
+        ZComponentHelper.setComponentModelValue(this.data, this.group.zModel[modelKey], this.group);
+        (_j = this.group.subject) === null || _j === void 0 ? void 0 : _j.next({
             type: "zupload-onSuccess",
-            target: this.data.OnSuccess,
+            target: (_k = this.data) === null || _k === void 0 ? void 0 : _k.OnSuccess,
             event: e,
-            data: { value: e.files[0], field: this.data },
+            data: { value: file, field: this.data },
         });
     }
+    /**
+     * Normalize and enrich image compression config with byte-based thresholds.
+     */
     compressionConfigHandler(imgConfig) {
+        if (!imgConfig) {
+            // NOTE: keep function safe for unexpected null; returns as-is
+            return imgConfig;
+        }
         if (imgConfig.FileSizeMaxSize) {
             imgConfig.FileSizeMaxSizeByte = this.convertSizeToByte(imgConfig.FileSizeMaxSize);
         }
@@ -9221,79 +9279,117 @@ class ZuploadComponent extends InputFieldBase {
         }
         return imgConfig;
     }
+    /**
+     * Convert string size values like "10KB", "2 MB", "1gb", "1024" into bytes.
+     * If unit is omitted, bytes are assumed.
+     *
+     * @param sizeString Human readable size string.
+     * @returns Size in bytes. Returns 0 if parsing fails.
+     */
     convertSizeToByte(sizeString) {
-        let _tempFileSizeMaxSize = 0;
+        if (!sizeString || typeof sizeString !== "string") {
+            return 0;
+        }
+        // Remove all spaces
+        const raw = sizeString.replace(/ /g, "").trim();
+        if (!raw) {
+            return 0;
+        }
+        let parsedValue = 0;
         let sizeByByte = 0;
-        let sizeType = 'b';
-        // remove all space
-        const _tempFileSize = sizeString.replace(/ /g, '');
-        // check last char is alphabetic
-        const lastChar = _tempFileSize.substr(_tempFileSize.length - 1);
-        if (isNaN(parseFloat(lastChar))) {
-            const secLastChar = _tempFileSize.substr(_tempFileSize.length - 2).slice(0, -1);
-            if (isNaN(parseFloat(secLastChar))) {
-                // check last 2nd char is alphabetic
-                sizeType = secLastChar + sizeType;
-                _tempFileSizeMaxSize = parseFloat(_tempFileSize.slice(0, -2));
+        let sizeType = "b";
+        // Check last char is alphabetic
+        const lastChar = raw.substring(raw.length - 1);
+        const lastCharIsNumber = !Number.isNaN(Number.parseFloat(lastChar));
+        if (!lastCharIsNumber) {
+            const secondLastChar = raw.substring(raw.length - 2).slice(0, -1);
+            const secondLastIsNumber = !Number.isNaN(Number.parseFloat(secondLastChar));
+            if (!secondLastIsNumber) {
+                // Last 2nd char is also alphabetic (e.g. "MB", "GB")
+                sizeType = `${secondLastChar}${sizeType}`;
+                parsedValue = Number.parseFloat(raw.slice(0, -2));
             }
             else {
-                _tempFileSizeMaxSize = parseFloat(_tempFileSize.slice(0, -1));
+                parsedValue = Number.parseFloat(raw.slice(0, -1));
+            }
+            // If parsing failed, return 0 (SonarQube safe behavior)
+            if (Number.isNaN(parsedValue) || parsedValue < 0) {
+                console.warn(`[ZuploadComponent] convertSizeToByte: invalid size value.`, { sizeString });
+                return 0;
             }
             switch (sizeType.toLowerCase()) {
                 case "b":
-                    sizeByByte = _tempFileSizeMaxSize;
+                    sizeByByte = parsedValue;
                     break;
                 case "kb":
-                    sizeByByte = _tempFileSizeMaxSize * 1024;
+                    sizeByByte = parsedValue * 1024;
                     break;
                 case "mb":
-                    sizeByByte = _tempFileSizeMaxSize * 1048576;
+                    sizeByByte = parsedValue * 1048576;
                     break;
                 case "gb":
-                    sizeByByte = _tempFileSizeMaxSize * 1073741824;
+                    sizeByByte = parsedValue * 1073741824;
+                    break;
+                default:
+                    // Unknown unit => treat as bytes for backward compatibility
+                    console.warn(`[ZuploadComponent] convertSizeToByte: unknown unit, defaulting to bytes.`, {
+                        sizeString,
+                        unit: sizeType,
+                    });
+                    sizeByByte = parsedValue;
                     break;
             }
         }
         else {
-            // default using bytes if no size type
-            sizeByByte = parseFloat(_tempFileSize);
+            // Default using bytes if no size type
+            const n = Number.parseFloat(raw);
+            if (Number.isNaN(n) || n < 0) {
+                console.warn(`[ZuploadComponent] convertSizeToByte: invalid numeric bytes value.`, { sizeString });
+                return 0;
+            }
+            sizeByByte = n;
         }
         return sizeByByte;
     }
+    /**
+     * Kendo Upload upload event: validates files, builds image previews, injects metadata and auth header.
+     */
     uploadEventHandler(e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = e === null || e === void 0 ? void 0 : e.files) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.warn(`[ZuploadComponent] uploadEventHandler: no files in UploadEvent.`);
+            return;
+        }
         // Image Preview
-        const me = this;
         e.files.forEach((file) => {
-            if (!me.isValidUploadedFile(me, file)) {
+            var _a, _b;
+            if (!this.isValidUploadedFile(file)) {
                 e.preventDefault();
                 return;
             }
-            else {
-                if (file.rawFile && file.rawFile.type.includes("image")) {
-                    if (!file.validationErrors) {
-                        const reader = new FileReader();
-                        reader.onload = function (ev) {
-                            if (me.data.EnableImagePreview) {
-                                if (!me.uid.includes(file.uid)) {
-                                    me.uid.push(file.uid);
-                                    me.imagePreviews.push(Object.assign(Object.assign({}, file), { src: reader.result }));
-                                }
-                            }
-                        };
-                        reader.readAsDataURL(file.rawFile);
+            if (((_b = (_a = file === null || file === void 0 ? void 0 : file.rawFile) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes("image")) && !file.validationErrors) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    var _a;
+                    if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.EnableImagePreview) {
+                        if (!this.uid.includes(file.uid)) {
+                            this.uid.push(file.uid);
+                            this.imagePreviews.push(Object.assign(Object.assign({}, file), { src: reader.result }));
+                        }
                     }
-                }
+                };
+                reader.readAsDataURL(file.rawFile);
             }
         });
         // Add metadata to the upload event
-        let additional = ZComponentHelper.getGroupEvalValue.call(this, this.data.UploadMetaData);
+        let additional = ZComponentHelper.getGroupEvalValue.call(this, (_b = this.data) === null || _b === void 0 ? void 0 : _b.UploadMetaData);
         if (!(additional instanceof UploadMetaData)) {
-            console.error("UploadMetaData defined at " + this.data.UploadMetaData + " is invalid: ", additional);
+            console.warn(`[ZuploadComponent] Invalid UploadMetaData at "${(_c = this.data) === null || _c === void 0 ? void 0 : _c.UploadMetaData}". Fallback to default metadata.`, additional);
             additional = new UploadMetaData(null, "0");
         }
         //#region sharepoint
-        let attachmentInfo = this.sharePointService.getAttachmentInfo(this.data["DownloadFileConfig"]);
-        //add tagging into metadata
+        const attachmentInfo = this.sharePointService.getAttachmentInfo((_d = this.data) === null || _d === void 0 ? void 0 : _d["DownloadFileConfig"]);
+        // Add tagging into metadata
         if (attachmentInfo) {
             if (attachmentInfo.tag) {
                 const tag = this.sharePointService.generateTagging(this.group, attachmentInfo.tag);
@@ -9304,155 +9400,277 @@ class ZuploadComponent extends InputFieldBase {
             additional[AttachmentConfig.isSaveToSharePoint] = attachmentInfo.isSaveToSharePoint;
         }
         //#endregion
-        const str = JSON.stringify(additional);
-        e.data = { additional: str, };
-        e.headers = e.headers.append("Authorization", "Bearer " + this.authService.e1AccessToken);
+        additional[AttachmentConfig.projectCode] = (_e = this.data) === null || _e === void 0 ? void 0 : _e.ProjectCode;
+        additional[AttachmentConfig.moduleCode] = (_f = this.data) === null || _f === void 0 ? void 0 : _f.ModuleCode;
+        const payload = JSON.stringify(additional);
+        e.data = { additional: payload };
+        // NOTE: Potentially unsafe: assumes token is always present. Keep behavior but add clearer logging.
+        const token = (_g = this.authService) === null || _g === void 0 ? void 0 : _g.e1AccessToken;
+        if (!token) {
+            console.warn(`[ZuploadComponent] Missing e1AccessToken. Upload may fail due to authorization.`);
+        }
+        e.headers = e.headers.append("Authorization", `Bearer ${token !== null && token !== void 0 ? token : ""}`);
     }
+    /**
+     * Kendo Upload remove event: updates component memory, fires project event if defined,
+     * otherwise attaches required payload and authorization headers.
+     */
     onRemove(e) {
-        // remove file from component memory
-        const index = this.fileList.findIndex((item) => item.uid === e.files[0].uid);
+        var _a, _b, _c, _d, _e, _f;
+        const file = (_a = e === null || e === void 0 ? void 0 : e.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file) {
+            console.warn(`[ZuploadComponent] onRemove: no file found in RemoveEvent.`, { event: e });
+            return;
+        }
+        // Remove file from component memory (for SelectFileOnly flow)
+        const index = this.fileList.findIndex((item) => item.uid === file.uid);
         if (index >= 0) {
             this.fileList.splice(index, 1);
-            this.group['zupload_' + this.data.Value] = this.fileList;
+            this.group[`zupload_${(_b = this.data) === null || _b === void 0 ? void 0 : _b.Value}`] = this.fileList;
         }
-        if (this.data['FileRemovedEvent']) {
-            this.group.subject.next({
+        const removedEvent = (_c = this.data) === null || _c === void 0 ? void 0 : _c["FileRemovedEvent"];
+        if (removedEvent) {
+            (_d = this.group.subject) === null || _d === void 0 ? void 0 : _d.next({
                 type: "zupload-fileRemovedEvent",
-                target: this.data['FileRemovedEvent'],
-                data: e
+                target: removedEvent,
+                data: e,
             });
+            return;
         }
-        else {
-            const myFile = e.files[0];
-            // console.log('remove done: ', e);
-            e.data = {
-                id: myFile.myUid,
-            };
-            e.headers = e.headers.append("Authorization", "Bearer " + this.authService.e1AccessToken);
-            if (this.data.EnableImagePreview) {
-                e.files.forEach((file) => {
-                    this.imagePreviews = this.imagePreviews.filter(f => f.uid !== file.uid);
-                });
-            }
+        const myFile = file;
+        // Attach remove payload
+        e.data = { id: myFile.myUid };
+        const token = (_e = this.authService) === null || _e === void 0 ? void 0 : _e.e1AccessToken;
+        if (!token) {
+            console.warn(`[ZuploadComponent] Missing e1AccessToken. Remove may fail due to authorization.`);
+        }
+        e.headers = e.headers.append("Authorization", `Bearer ${token !== null && token !== void 0 ? token : ""}`);
+        // Remove preview if enabled
+        if ((_f = this.data) === null || _f === void 0 ? void 0 : _f.EnableImagePreview) {
+            e.files.forEach((f) => {
+                this.imagePreviews = this.imagePreviews.filter((p) => (p === null || p === void 0 ? void 0 : p["uid"]) !== f.uid);
+            });
         }
+        console.info(`[ZuploadComponent] Remove requested.`, { name: myFile.name, uid: myFile.uid, myUid: myFile.myUid });
     }
-    onChange(file) {
-        if (this.data['FileChangedEvent']) {
-            this.group.subject.next({
-                type: "zupload-fileChangedEvent",
-                target: this.data['FileChangedEvent'],
-                data: file
-            });
+    /**
+     * Kendo Upload change event handler. Emits project event if configured.
+     */
+    onChange(files) {
+        var _a, _b;
+        const changedEvent = (_a = this.data) === null || _a === void 0 ? void 0 : _a["FileChangedEvent"];
+        if (!changedEvent) {
+            return;
         }
+        (_b = this.group.subject) === null || _b === void 0 ? void 0 : _b.next({
+            type: "zupload-fileChangedEvent",
+            target: changedEvent,
+            data: files,
+        });
     }
-    isValidUploadedFile(me, file) {
-        const fileSize = file.rawFile.size;
-        const fileExtension = file.rawFile.name.split('.').pop().toLowerCase();
-        // Check if file size and extension are valid
-        if (fileSize > me.restrictions.maxFileSize || !me.restrictions.allowedExtensions.includes(fileExtension)) {
-            let errorMessage = 'Error: ';
-            if (!me.restrictions.allowedExtensions.includes(fileExtension)) {
-                errorMessage = `Invalid file type. Allowed types are: ${me.restrictions.allowedExtensions.join(', ')}.`;
-            }
-            else if (fileSize > me.restrictions.maxFileSize) {
-                errorMessage = `File size cannot exceeds ${me.formatFileSize(me.restrictions.maxFileSize)}.`;
-            }
-            me.alertService.showOkay('Failed to upload', errorMessage, ['col-4']);
+    /**
+     * Validate a selected/uploaded file against configured restrictions (size + extension).
+     *
+     * @param file Kendo FileInfo
+     * @returns true if file passes restrictions, otherwise false (and shows alert).
+     */
+    isValidUploadedFile(file) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const rawFile = file === null || file === void 0 ? void 0 : file.rawFile;
+        if (!rawFile) {
+            // NOTE: Kendo can provide FileInfo without rawFile in some events. Preserve behavior: treat as invalid.
+            console.warn(`[ZuploadComponent] File validation failed: rawFile is missing.`, { file });
+            this.alertService.showOkay("Failed to upload", "File is not available for upload.", ["col-4"]);
+            return false;
+        }
+        const fileSize = (_a = rawFile.size) !== null && _a !== void 0 ? _a : 0;
+        // Keep original behavior: uses last segment after dot.
+        // NOTE: Potentially unsafe for files without extension; will result in empty extension.
+        const fileExtension = ((_c = (_b = rawFile.name) === null || _b === void 0 ? void 0 : _b.split(".").pop()) !== null && _c !== void 0 ? _c : "").toLowerCase();
+        const max = (_e = (_d = this.restrictions) === null || _d === void 0 ? void 0 : _d.maxFileSize) !== null && _e !== void 0 ? _e : 0;
+        const allowed = (_g = (_f = this.restrictions) === null || _f === void 0 ? void 0 : _f.allowedExtensions) !== null && _g !== void 0 ? _g : [];
+        const isExtensionAllowed = allowed.includes(fileExtension);
+        const isSizeAllowed = fileSize <= max;
+        if (!isExtensionAllowed || !isSizeAllowed) {
+            let errorMessage = "Error:";
+            if (!isExtensionAllowed) {
+                errorMessage = `Invalid file type "${fileExtension || "unknown"}". Allowed types: ${allowed.join(", ")}.`;
+            }
+            else if (!isSizeAllowed) {
+                errorMessage = `File size cannot exceed ${this.formatFileSize(max)}.`;
+            }
+            console.warn(`[ZuploadComponent] File rejected by restrictions.`, {
+                name: rawFile.name,
+                size: fileSize,
+                extension: fileExtension,
+                maxAllowedBytes: max,
+                allowedExtensions: allowed,
+            });
+            this.alertService.showOkay("Failed to upload", errorMessage, ["col-4"]);
             return false;
         }
         return true;
     }
+    /**
+     * Kendo Upload select event handler:
+     * - Handles SharePoint endpoint switching
+     * - Supports SelectFileOnly mode (read file content into memory and emit event)
+     * - Supports image compression when AutoUpload is false
+     */
     selectEventHandler(e) {
-        const me = this;
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = e === null || e === void 0 ? void 0 : e.files) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.warn(`[ZuploadComponent] selectEventHandler: no files in SelectEvent.`);
+            return;
+        }
+        // Reset to default every selection to avoid SharePoint URL "sticking" permanently.
+        this.uploadSaveUrl = this.defaultUploadSaveUrl;
+        this.uploadRemoveUrl = this.defaultUploadRemoveUrl;
         //#region sharepoint
-        const attachmentInfo = this.sharePointService.getAttachmentInfo(this.data["DownloadFileConfig"]);
+        const attachmentInfo = this.sharePointService.getAttachmentInfo((_b = this.data) === null || _b === void 0 ? void 0 : _b["DownloadFileConfig"]);
         // Change uploadSaveUrl if saving to SharePoint
-        if (attachmentInfo && attachmentInfo.isSaveToSharePoint && attachmentInfo.siteName) {
-            const attachmentSourceUrl = this.zcoreService.getEnvironment().attachmentSourceUrl;
-            this.uploadSaveUrl = attachmentSourceUrl + '/Chunk_Upload_Save';
+        if ((attachmentInfo === null || attachmentInfo === void 0 ? void 0 : attachmentInfo.isSaveToSharePoint) && attachmentInfo.siteName) {
+            const attachmentSourceUrl = (_c = this.zcoreService.getEnvironment()) === null || _c === void 0 ? void 0 : _c.attachmentSourceUrl;
+            if (attachmentSourceUrl) {
+                this.uploadSaveUrl = `${attachmentSourceUrl}/Chunk_Upload_Save`;
+                console.info(`[ZuploadComponent] Upload endpoint switched to SharePoint mode.`, { uploadSaveUrl: this.uploadSaveUrl });
+            }
+            else {
+                console.warn(`[ZuploadComponent] attachmentSourceUrl is missing. Cannot switch to SharePoint upload endpoint.`);
+            }
         }
         //#endregion
-        if (this.data['SelectFileOnly']) {
+        if ((_d = this.data) === null || _d === void 0 ? void 0 : _d["SelectFileOnly"]) {
             // Append all files to component memory
-            e.files.forEach((file) => __awaiter(this, void 0, void 0, function* () {
-                if (me.isValidUploadedFile(me, file)) {
-                    if (file.rawFile) {
-                        const reader = new FileReader();
-                        reader.onload = function (ev) {
-                            // Clone the data and also add the read file to the object
-                            const fileData = Object.assign({}, file);
-                            fileData['file'] = ev.target["result"];
-                            // Push to component fileList
-                            me.fileList.push(fileData);
-                            me.group['zupload_' + me.data.Value] = me.fileList;
-                            if (me.data['FileSelectedEvent']) {
-                                // Call the project event
-                                me.group.subject.next({
-                                    type: "zupload-fileSelectedEvent",
-                                    target: me.data['FileSelectedEvent'],
-                                    data: me.fileList
-                                });
-                            }
-                        };
-                        yield reader.readAsDataURL(file.rawFile);
-                    }
+            e.files.forEach((file) => {
+                if (!this.isValidUploadedFile(file)) {
+                    e.preventDefault();
+                    return;
                 }
-                else {
+                if (!file.rawFile) {
                     e.preventDefault();
+                    return;
                 }
-            }));
+                const reader = new FileReader();
+                reader.onload = (ev) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    // Clone the data and also add the read file to the object
+                    const fileData = Object.assign(Object.assign({}, file), { file: (_b = (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : null });
+                    fileData["file"] = (_c = ev === null || ev === void 0 ? void 0 : ev.target) === null || _c === void 0 ? void 0 : _c.result;
+                    // Push to component fileList
+                    this.fileList.push(fileData);
+                    this.group[`zupload_${(_d = this.data) === null || _d === void 0 ? void 0 : _d.Value}`] = this.fileList;
+                    const selectedEvent = (_e = this.data) === null || _e === void 0 ? void 0 : _e["FileSelectedEvent"];
+                    if (selectedEvent) {
+                        (_f = this.group.subject) === null || _f === void 0 ? void 0 : _f.next({
+                            type: "zupload-fileSelectedEvent",
+                            target: selectedEvent,
+                            data: this.fileList,
+                        });
+                    }
+                };
+                reader.onerror = () => {
+                    var _a;
+                    console.warn(`[ZuploadComponent] Failed to read file as base64.`, {
+                        name: (_a = file.rawFile) === null || _a === void 0 ? void 0 : _a.name,
+                        uid: file.uid,
+                        error: reader.error,
+                    });
+                };
+                reader.readAsDataURL(file.rawFile);
+            });
+            return;
         }
-        else {
-            // Only workable for Auto Upload = false
-            if (!this.data.AutoUpload) {
-                // Compression for image file
-                const imageCompressionEnabled = this.data.Compression ? true : false;
-                //Check if Image Compression is enabled.
-                if (imageCompressionEnabled === true) {
-                    e.files.forEach((file) => {
-                        if (me.isValidUploadedFile(me, file)) {
-                            // Compress only if it is an image file
-                            if (file.rawFile && file.rawFile.type.includes("image")) {
-                                if (!file.validationErrors) {
-                                    const imgConfig = this.compressionConfigHandler(this.data.Compression);
-                                    if (file.size > imgConfig.FileSizeMinSizeByte) {
-                                        me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
-                                            .pipe(take(1))
-                                            .subscribe(compressFile => {
-                                            this.ngZone.run(() => {
-                                                file.rawFile = compressFile;
-                                                file.size = compressFile.size;
-                                                // Push to component fileList
-                                                me.fileList.push(Object.assign({}, file));
-                                                const reader = new FileReader();
-                                                reader.readAsDataURL(file.rawFile);
-                                            });
-                                            console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
-                                        });
-                                    } // file size check
-                                } // validationErrors check
-                            } // file type check
-                        }
-                        else {
-                            e.preventDefault();
-                        }
-                    }); // loop each file
-                } // imagecompression check
-                // add to group scope
-                me.group['zupload_' + me.data.Value] = e.files;
-            }
+        // Only workable for Auto Upload = false
+        if ((_e = this.data) === null || _e === void 0 ? void 0 : _e.AutoUpload) {
+            return;
+        }
+        // Compression for image file
+        const imageCompressionEnabled = Boolean((_f = this.data) === null || _f === void 0 ? void 0 : _f.Compression);
+        // Check if Image Compression is enabled.
+        if (imageCompressionEnabled) {
+            e.files.forEach((file) => {
+                var _a, _b, _c;
+                if (!this.isValidUploadedFile(file)) {
+                    e.preventDefault();
+                    return;
+                }
+                // Compress only if it is an image file
+                if (!((_b = (_a = file === null || file === void 0 ? void 0 : file.rawFile) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes("image")) || file.validationErrors) {
+                    return;
+                }
+                const imgConfig = this.compressionConfigHandler(this.data.Compression);
+                const minBytes = (_c = imgConfig === null || imgConfig === void 0 ? void 0 : imgConfig.FileSizeMinSizeByte) !== null && _c !== void 0 ? _c : 0;
+                // Original behavior: only compress if file size > minBytes
+                if (file.size <= minBytes) {
+                    return;
+                }
+                this.compressImage
+                    .compress(file.rawFile, imgConfig) // Pass in parameter to set the Compression Options
+                    .pipe(take(1))
+                    .subscribe({
+                    next: (compressFile) => {
+                        var _a;
+                        this.ngZone.run(() => {
+                            file.rawFile = compressFile;
+                            file.size = compressFile.size;
+                            // Push to component fileList (kept as original intent)
+                            const fileData = Object.assign({}, file);
+                            this.fileList.push(fileData);
+                            // Keep original: read to data URL (side effect)
+                            const reader = new FileReader();
+                            reader.readAsDataURL(file.rawFile);
+                        });
+                        console.info(`[ZuploadComponent] Image compressed successfully.`, {
+                            name: (_a = file === null || file === void 0 ? void 0 : file.rawFile) === null || _a === void 0 ? void 0 : _a.name,
+                            newSizeKB: Number((file.rawFile.size / 1024).toFixed(2)),
+                        });
+                    },
+                    error: (err) => {
+                        var _a;
+                        // Preserve flow (do not block selection), but provide clearer diagnostic
+                        console.error(`[ZuploadComponent] Image compression failed. Upload will continue with original file.`, {
+                            name: (_a = file === null || file === void 0 ? void 0 : file.rawFile) === null || _a === void 0 ? void 0 : _a.name,
+                            error: err,
+                        });
+                    },
+                });
+            });
         }
+        // Add to group scope (original behavior: store selected files)
+        this.group[`zupload_${(_g = this.data) === null || _g === void 0 ? void 0 : _g.Value}`] = e.files;
     }
+    /**
+     * Clears UI-selected files and syncs group state.
+     * NOTE: Original behavior sets group value to fileList (not empty); preserved.
+     */
     clearFiles() {
+        var _a;
+        if (!this.uploadComponent) {
+            console.warn(`[ZuploadComponent] clearFiles: uploadComponent is not ready.`);
+            return;
+        }
         this.uploadComponent.clearFiles();
-        this.group['zupload_' + this.data.Value] = this.fileList;
+        this.group[`zupload_${(_a = this.data) === null || _a === void 0 ? void 0 : _a.Value}`] = this.fileList;
+        console.info(`[ZuploadComponent] Files cleared from UI.`, {
+            storedFileListCount: this.fileList.length,
+        });
     }
+    /**
+     * Format bytes into human-readable string.
+     *
+     * @param bytes Raw byte size
+     * @returns Formatted file size string (e.g. "12.5MB")
+     */
     formatFileSize(bytes) {
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-        if (bytes === 0)
-            return '0 Byte';
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (!Number.isFinite(bytes) || bytes <= 0) {
+            return "0 Byte";
+        }
         const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
+        const value = bytes / Math.pow(1024, i);
+        // NOTE: Original output had no space between number and unit; preserved.
+        return `${Number.parseFloat(value.toFixed(2))}${sizes[i]}`;
     }
 }
 ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
@@ -9462,7 +9680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload\r\n    *ngIf=\"!data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\"\r\n    [removeUrl]=\"uploadRemoveUrl\"\r\n    [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\"\r\n    [chunkable]=\"chunkSettings\"\r\n    [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect\r\n    *ngIf=\"data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    [formControlName]=\"data.Value\"\r\n    (valueChange)=\"onChange($event)\" \r\n    [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-fileselect>\r\n\r\n  <div\r\n    *ngIf=\"imagePreviews.length\"\r\n    class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div\r\n      class=\"label-container e1tag-style3\"\r\n      [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div\r\n      class=\"image-container e1tag-style4\"\r\n      [style]=\"componentProperties.style.style4\">\r\n      <img\r\n        *ngFor=\"let image of imagePreviews\"\r\n        [src]=\"image.src\"\r\n        alt=\"image preview\"\r\n        height=\"100\"\r\n        class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }, { type: i2.AlertService }]; }, propDecorators: { uploadComponent: [{
                 type: ViewChild,
-                args: ["uploadComponent"]
+                args: ["uploadComponent", { static: false }]
             }] } });
 
 /********** Angular **********/
@@ -9533,75 +9751,181 @@ class ZtexteditorComponent extends InputFieldBase {
         };
         this.isCompressModeOn = false;
         this.CloseEnlargeBtn = false;
-        this.style = "";
-        this.CompressionEnableIcon = 'k-i-zoom-best-fit';
-        this.CompressionDisabledIcon = 'k-i-zoom-actual-size';
+        this.originalInlineStyle = '';
+        this.compressionEnableIcon = 'k-i-zoom-best-fit';
+        this.compressionDisabledIcon = 'k-i-zoom-actual-size';
     }
+    /** Initialize component state and editor configuration. */
     ngOnInit() {
+        var _a;
         super.setupInnerField();
-        this.data.ToolBarUploadImageMethod = this.data.ToolBarUploadImageMethod || 'explorer'; //  || 'default';
+        // Backward-compatible default: when not provided, use explorer.
+        this.data.ToolBarUploadImageMethod = this.data.ToolBarUploadImageMethod || 'explorer';
         this.setupPasteCleanupSettings();
         super.setupComponentSettings(this.componentSettings);
         super.focusOnDefault(this.focus.bind(this));
-        this.isCompressModeOn = !!this.data.Compression;
+        // Safe cast to boolean.
+        this.isCompressModeOn = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.Compression);
     }
+    /** Notify component service once view is ready. */
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
+    /** Sync editor content to zModel and trigger configured change handler. */
     onChange(value) {
         ZComponentHelper.setToZModel(this.data.Value, value, this.group, this.data);
-        this.triggerEvent("inputfield-onChange", this.data.OnChange, value);
+        this.triggerEvent('inputfield-onChange', this.data.OnChange, value);
     }
-    onPaste($event) {
+    /** Handle paste: normalize plain-text special entities, then optionally compress pasted base64 images. */
+    onPaste(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            const imageCompressionEnabled = !!this.data.Compression;
-            if (imageCompressionEnabled && this.isCompressModeOn) {
-                let beforeSize = 0;
-                let afterSize = 0;
-                const parser = new DOMParser();
-                const doc = parser.parseFromString($event.cleanedHtml, 'text/html');
-                const imgElements = Array.from(doc.querySelectorAll('img')).filter(dom => dom.src.startsWith('data:image/'));
-                yield Promise.all(imgElements.map((imgTags, index) => __awaiter(this, void 0, void 0, function* () {
-                    const file = yield this.base64ToFile(imgTags.src, "image" + index.toString());
-                    beforeSize += file.size;
-                    const compress = yield this.ImageCompression(file);
-                    if (compress != null) {
-                        const base64 = yield this.readFileAsDataURL(compress);
-                        afterSize += compress.size;
-                        imgTags.src = base64;
-                    }
-                    else {
-                        console.log('Image compress failed');
-                    }
-                })));
-                console.log(`Before Image compress size: ${(beforeSize / 1024).toFixed(2)}KB`);
-                console.log(`After Image compress size: ${(afterSize / 1024).toFixed(2)}KB`);
-                this.editor.value = doc.body.innerHTML;
+            if (!e) {
+                console.warn('[Ztexteditor] Paste event is undefined. Paste ignored.');
+                return;
             }
+            // Common Excel/plain-text issue: "&amp;" gets inserted literally causing "&amp;amp;" in HTML.
+            this.handleCommonSymbolTags(e);
+            // Compress only if enabled and base64 images exist.
+            yield this.handleImageCompression(e);
         });
     }
-    OnOffCompressMode($event) {
-        debugger;
-        const alertHeader = `Confirmation`;
-        const alertMessage = `Do you want to <b>${this.isCompressModeOn ? 'disable' : 'enable'}</b> image compression when input content? <br/> Note: Click "Yes" the content will be reset to blank.`;
-        const buttonConfig = {
+    /**
+     * If the paste is plain text (no HTML tags and no images), normalize common entities and insert as real text.
+     * Returns true when the event is handled and default paste is prevented.
+     */
+    handleCommonSymbolTags(e) {
+        var _a, _b, _c, _d;
+        const editor = this.editor;
+        if (!editor) {
+            console.warn('[Ztexteditor] Editor is not ready. Cannot handle plain-text normalization.');
+            return false;
+        }
+        const clipboard = (_a = e.originalEvent) === null || _a === void 0 ? void 0 : _a.clipboardData;
+        const plainText = (_b = clipboard === null || clipboard === void 0 ? void 0 : clipboard.getData('text/plain')) !== null && _b !== void 0 ? _b : '';
+        const htmlText = (_c = clipboard === null || clipboard === void 0 ? void 0 : clipboard.getData('text/html')) !== null && _c !== void 0 ? _c : '';
+        const cleanedHtml = (_d = e.cleanedHtml) !== null && _d !== void 0 ? _d : '';
+        const htmlHasImg = /<img\b/i.test(htmlText);
+        const cleanedHasTags = /<[^>]+>/.test(cleanedHtml);
+        // If paste has HTML tags or images, do NOT interfere (let Kendo handle it).
+        if (htmlHasImg || cleanedHasTags) {
+            return false;
+        }
+        // Plain-text paste: prevent Kendo from inserting encoded entities as literal text.
+        e.preventDefault();
+        // Decode common entities once so user sees correct characters.
+        // This is intentionally limited to common entities to avoid unexpected transformations.
+        const normalized = (plainText || cleanedHtml)
+            .replaceAll('&amp;', '&')
+            .replaceAll('&lt;', '<')
+            .replaceAll('&gt;', '>')
+            .replaceAll('&quot;', '"')
+            .replaceAll('&#39;', "'");
+        editor.exec('insertText', { text: normalized });
+        return true;
+    }
+    /**
+     * If compression is enabled and compress mode is ON, compress any pasted base64 images (data:image/*).
+     * IMPORTANT: modifies e.cleanedHtml (what gets pasted), not editor.value.
+     */
+    handleImageCompression(e) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const compressionConfig = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Compression;
+            const isCompressionEnabled = !!compressionConfig;
+            if (!isCompressionEnabled || !this.isCompressModeOn) {
+                return;
+            }
+            const cleaned = (_b = e.cleanedHtml) !== null && _b !== void 0 ? _b : '';
+            if (!cleaned) {
+                return;
+            }
+            let doc;
+            try {
+                doc = new DOMParser().parseFromString(cleaned, 'text/html');
+            }
+            catch (err) {
+                console.warn('[Ztexteditor] Failed to parse pasted HTML for image compression. Paste will continue.', err);
+                return;
+            }
+            const imgElements = Array.from(doc.querySelectorAll('img'))
+                .map(img => img)
+                .filter(img => typeof (img === null || img === void 0 ? void 0 : img.src) === 'string' && img.src.startsWith('data:image/'));
+            if (imgElements.length === 0) {
+                return;
+            }
+            let beforeSizeBytes = 0;
+            let afterSizeBytes = 0;
+            let failedCount = 0;
+            yield Promise.all(imgElements.map((img, index) => __awaiter(this, void 0, void 0, function* () {
+                const src = img.src;
+                try {
+                    const file = yield this.base64ToFile(src, `pasted-image-${index}`);
+                    beforeSizeBytes += file.size;
+                    const compressed = yield this.imageCompression(file);
+                    if (!compressed) {
+                        failedCount++;
+                        console.warn(`[Ztexteditor] Image compression skipped/failed for pasted image #${index + 1}.`);
+                        return;
+                    }
+                    const base64 = yield this.readFileAsDataURL(compressed);
+                    afterSizeBytes += compressed.size;
+                    img.src = base64;
+                }
+                catch (err) {
+                    failedCount++;
+                    console.warn(`[Ztexteditor] Error compressing pasted image #${index + 1}.`, err);
+                }
+            })));
+            // Helpful console logs for troubleshooting.
+            const beforeKb = (beforeSizeBytes / 1024).toFixed(2);
+            const afterKb = (afterSizeBytes / 1024).toFixed(2);
+            console.log(`[Ztexteditor] Pasted image compression completed. Images=${imgElements.length}, Failed=${failedCount}, Before=${beforeKb}KB, After=${afterKb}KB`);
+            // Modify what gets pasted, not editor.value.
+            e.cleanedHtml = doc.body.innerHTML;
+        });
+    }
+    /**
+     * Toggle compress mode via confirmation dialog.
+     */
+    onOffCompressMode(event) {
+        const header = 'Confirmation';
+        const actionText = this.isCompressModeOn ? 'disable' : 'enable';
+        // Keep existing behavior: toggling resets content.
+        const message = `Do you want to <b>${actionText}</b> image compression when input content?` +
+            `<br/>Note: Click "Yes" the content will be reset to blank.`;
+        const buttons = {
             yes: { text: 'Yes', cssClass: 'primary' },
-            no: { text: 'No', cssClass: 'secondary' }
+            no: { text: 'No', cssClass: 'secondary' },
         };
-        this.alertService.show(alertHeader, alertMessage, [buttonConfig.yes, buttonConfig.no], ['col-4'])
+        this.alertService
+            .show(header, message, [buttons.yes, buttons.no], ['col-4'])
             .subscribe(reply => {
-            if (reply === 'Yes') {
-                this.editor.value = "";
-                this.isCompressModeOn = !this.isCompressModeOn;
-                let button = $event.target;
-                button.classList.remove(this.CompressionEnableIcon);
-                button.classList.remove(this.CompressionDisabledIcon);
-                button.classList.add(this.isCompressModeOn ? this.CompressionDisabledIcon : this.CompressionEnableIcon);
+            if (reply !== 'Yes') {
+                return;
+            }
+            const editor = this.editor;
+            if (!editor) {
+                console.warn('[Ztexteditor] Editor is not ready. Cannot toggle compression mode.');
+                return;
+            }
+            editor.value = '';
+            this.isCompressModeOn = !this.isCompressModeOn;
+            // Update toolbar icon classes safely.
+            const buttonEl = this.getEventTargetElement(event);
+            if (!buttonEl) {
+                console.warn('[Ztexteditor] Unable to resolve toolbar button element from event.');
+            }
+            else {
+                buttonEl.classList.remove(this.compressionEnableIcon, this.compressionDisabledIcon);
+                buttonEl.classList.add(this.isCompressModeOn ? this.compressionDisabledIcon : this.compressionEnableIcon);
+            }
+            if (this.compress_btn) {
                 this.compress_btn.title = `${this.isCompressModeOn ? 'Disable' : 'Enable'} image compression`;
-                this.toastService.show(`${this.isCompressModeOn ? 'Enable' : 'Disable'} image compression successfully.`, 'top', false, 2500, "success");
             }
+            this.toastService.show(`${this.isCompressModeOn ? 'Enable' : 'Disable'} image compression successfully.`, 'top', false, 2500, 'success');
         });
     }
+    /** Focus editor if available. Returns true if focus succeeded. */
     focus() {
         if (this.editor) {
             this.editor.focus();
@@ -9616,102 +9940,194 @@ class ZtexteditorComponent extends InputFieldBase {
         }
         return iconName;
     }
+    /** Merge paste cleanup options from data.Options (string expression or object) into pasteCleanupSettings. */
     setupPasteCleanupSettings() {
-        if (this.data.Options) {
-            if (typeof this.data.Options == 'string') {
-                const option = ZComponentHelper.getGroupValue(this.data.Options, this.group);
-                Object.assign(this.pasteCleanupSettings, option);
+        var _a;
+        const options = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Options;
+        if (!options) {
+            return;
+        }
+        if (typeof options === 'string') {
+            const resolved = ZComponentHelper.getGroupValue(options, this.group);
+            if (resolved && typeof resolved === 'object') {
+                Object.assign(this.pasteCleanupSettings, resolved);
             }
-            else if (typeof this.data.Options == 'object') {
-                Object.assign(this.pasteCleanupSettings, this.data.Options);
+            else {
+                console.warn('[Ztexteditor] data.Options resolved value is not an object. Paste cleanup settings unchanged.', {
+                    resolved,
+                });
             }
+            return;
+        }
+        if (typeof options === 'object') {
+            Object.assign(this.pasteCleanupSettings, options);
+            return;
         }
+        console.warn('[Ztexteditor] Unsupported data.Options type. Paste cleanup settings unchanged.', {
+            type: typeof options,
+        });
     }
-    // #region Custom Image Upload
+    // #region Custom Image Upload / Enlarge
+    /** Trigger hidden file input click for image upload. */
     openFileExplorer() {
-        const input = document.getElementById(`${this.data.Value}-upload-file`);
-        if (input) {
-            input.click();
+        const id = `${this.data.Value}-upload-file`;
+        const input = document.getElementById(id);
+        if (!input) {
+            console.warn(`[Ztexteditor] Upload input element not found (id="${id}").`);
+            return;
         }
+        input.click();
     }
+    /** Open an enlarged popup editor. */
     openPopup() {
-        if (this.editor) {
-            // Open the popup
-            this.dialogRef = this.dialogService.open({
-                content: ZtexteditorComponent,
-                width: '98%',
-                height: '97%'
-            });
-            const texteditor = this.dialogRef.content.instance;
-            texteditor.data = this.data;
-            texteditor.data.AllowEnlarge = false;
-            texteditor.dialogRef = this.dialogRef;
-            texteditor.CloseEnlargeBtn = true;
-            texteditor.componentProperties = this.componentProperties;
-            this.style = this.componentProperties.style.style1;
-            texteditor.componentProperties.style.style1 += "height:" + (window.innerHeight * 0.8).toString() + "px";
-            texteditor.group = this.group;
-            texteditor.componentSettings = this.componentSettings;
-            texteditor.form = this.form;
-            //To set the html back into the target ztext editor.
-            this.dialogRef.result.subscribe(() => {
-                this.data.AllowEnlarge = true;
-                this.componentProperties.style.style1 = this.style;
-                this.editor.value = this.group.zModel[this.data.Value];
-                this.onChange(this.group.zModel[this.data.Value]);
-                this.focus();
-            });
+        var _a, _b, _c, _d, _e;
+        const editor = this.editor;
+        if (!editor) {
+            console.warn('[Ztexteditor] Editor is not ready. Cannot open popup.');
+            return;
         }
+        // Open dialog
+        this.dialogRef = this.dialogService.open({
+            content: ZtexteditorComponent,
+            width: '98%',
+            height: '97%',
+        });
+        const popupComponent = this.dialogRef.content.instance;
+        popupComponent.data = this.data;
+        popupComponent.data.AllowEnlarge = false;
+        popupComponent.dialogRef = this.dialogRef;
+        popupComponent.CloseEnlargeBtn = true;
+        popupComponent.componentProperties = this.componentProperties;
+        // Preserve style so we can restore it on close.
+        this.originalInlineStyle = (_c = (_b = (_a = this.componentProperties) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.style1) !== null && _c !== void 0 ? _c : '';
+        if ((_d = popupComponent.componentProperties) === null || _d === void 0 ? void 0 : _d.style) {
+            popupComponent.componentProperties.style.style1 =
+                ((_e = popupComponent.componentProperties.style.style1) !== null && _e !== void 0 ? _e : '') +
+                    `height:${(window.innerHeight * 0.8).toString()}px`;
+        }
+        popupComponent.group = this.group;
+        popupComponent.componentSettings = this.componentSettings;
+        popupComponent.form = this.form;
+        // Restore state and push value back into editor on close.
+        this.dialogRef.result.subscribe(() => {
+            var _a, _b, _c;
+            this.data.AllowEnlarge = true;
+            if ((_a = this.componentProperties) === null || _a === void 0 ? void 0 : _a.style) {
+                this.componentProperties.style.style1 = this.originalInlineStyle;
+            }
+            // Pull current zModel into editor and trigger onChange (existing behavior).
+            const newValue = (_c = (_b = this.group) === null || _b === void 0 ? void 0 : _b.zModel) === null || _c === void 0 ? void 0 : _c[this.data.Value];
+            editor.value = newValue;
+            this.onChange(newValue);
+            this.focus();
+        });
     }
+    /** Close the popup editor if open. */
     onPopupClose() {
+        if (!this.dialogRef) {
+            return;
+        }
         this.dialogRef.close();
     }
+    /**
+     * Handle <input type="file"> change and insert selected image into editor.
+     * NOTE: Prefer typing fileInput as Event for better safety.
+     */
     uploadImage(fileInput) {
-        const uploadedImage = fileInput.target.files[0];
-        if (uploadedImage) {
-            this.insertImageIntoEditor(uploadedImage);
+        var _a;
+        const input = fileInput === null || fileInput === void 0 ? void 0 : fileInput.target;
+        const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file) {
+            console.warn('[Ztexteditor] No image selected for upload.');
+            return;
         }
+        void this.insertImageIntoEditor(file);
     }
+    /** Insert image into editor, optionally compressing first. */
     insertImageIntoEditor(file) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const imageCompressionEnabled = !!this.data.Compression;
-            if (imageCompressionEnabled) {
-                console.log(`Before Image compress size: ${(file.size / 1024).toFixed(2)}KB`);
-                file = yield this.ImageCompression(file);
-                console.log(`After Image compress size: ${(file.size / 1024).toFixed(2)}KB`);
-            }
-            var base64str = yield this.readFileAsDataURL(file);
-            this.editor.exec("insertImage", { src: base64str });
+            const editor = this.editor;
+            if (!editor) {
+                console.warn('[Ztexteditor] Editor is not ready. Cannot insert image.');
+                return;
+            }
+            let workingFile = file;
+            const compressionConfig = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Compression;
+            const compressionEnabled = !!compressionConfig;
+            if (compressionEnabled) {
+                console.log(`[Ztexteditor] Upload image before compression: ${(workingFile.size / 1024).toFixed(2)}KB`);
+                workingFile = yield this.imageCompression(workingFile);
+                if (!workingFile) {
+                    console.warn('[Ztexteditor] Image compression failed. Upload image insertion aborted.');
+                    return;
+                }
+                console.log(`[Ztexteditor] Upload image after compression: ${(workingFile.size / 1024).toFixed(2)}KB`);
+            }
+            try {
+                const base64 = yield this.readFileAsDataURL(workingFile);
+                editor.exec('insertImage', { src: base64 });
+            }
+            catch (err) {
+                console.warn('[Ztexteditor] Failed to read uploaded image as base64.', err);
+            }
         });
     }
+    /** Convert base64 (data URL) to File. */
     base64ToFile(base64String, fileName) {
         return __awaiter(this, void 0, void 0, function* () {
+            // Using fetch on data URL is supported by modern browsers; keep existing logic.
             const response = yield fetch(base64String);
             const blob = yield response.blob();
-            const file = new File([blob], fileName, {
+            return new File([blob], fileName, {
                 type: blob.type,
                 lastModified: Date.now(),
             });
-            return file;
         });
     }
-    ImageCompression(file) {
+    /**
+     * Compress an image file if it is an image and above min threshold.
+     * Returns the compressed file, or null if not compressible / compression skipped.
+     */
+    imageCompression(file) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            //Check if Image Compression is enabled.
-            if (file && file.type.includes("image")) {
-                const imgConfig = this.compressionConfigHandler(this.data.Compression);
-                if (file.size > imgConfig.FileSizeMinSizeByte) {
-                    const compressed$ = this.compressImage.compress(file, imgConfig);
-                    const compressFile = yield firstValueFrom(compressed$);
-                    return compressFile;
-                } // file size check
+            if (!file) {
+                console.warn('[Ztexteditor] imageCompression called with empty file.');
+                return null;
             }
-            else {
+            if (!file.type || !file.type.includes('image')) {
+                console.warn('[Ztexteditor] Skipping compression: file is not an image.', { type: file.type });
+                return null;
+            }
+            const config = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Compression;
+            if (!config) {
+                // Compression not configured.
+                return null;
+            }
+            const imgConfig = this.compressionConfigHandler(config);
+            // If file is below threshold, keep existing behavior: skip compression (return null).
+            if (file.size <= imgConfig.FileSizeMinSizeByte) {
+                console.log(`[Ztexteditor] Skipping compression: file size ${(file.size / 1024).toFixed(2)}KB is below threshold ${(imgConfig.FileSizeMinSizeByte / 1024).toFixed(2)}KB.`);
+                return null;
+            }
+            try {
+                const compressed$ = this.compressImage.compress(file, imgConfig);
+                const compressedFile = yield firstValueFrom(compressed$);
+                return compressedFile !== null && compressedFile !== void 0 ? compressedFile : null;
+            }
+            catch (err) {
+                console.warn('[Ztexteditor] Compression service threw an error.', err);
                 return null;
             }
         });
     }
+    /** Normalize image compression config into byte-based thresholds. */
     compressionConfigHandler(imgConfig) {
+        if (!imgConfig) {
+            // Defensive: should never happen because caller checks.
+            return imgConfig;
+        }
         if (imgConfig.FileSizeMaxSize) {
             imgConfig.FileSizeMaxSizeByte = this.convertSizeToByte(imgConfig.FileSizeMaxSize);
         }
@@ -9723,63 +10139,74 @@ class ZtexteditorComponent extends InputFieldBase {
         }
         return imgConfig;
     }
+    /**
+     * Convert size string like "100kb", "1 MB", "2gb" to bytes.
+     * If no unit is provided, bytes are assumed.
+     */
     convertSizeToByte(sizeString) {
-        let _tempFileSizeMaxSize = 0;
-        let sizeByByte = 0;
-        let sizeType = 'b';
-        // remove all space
-        const _tempFileSize = sizeString.replace(/ /g, '');
-        // check last char is alphabetic
-        const lastChar = _tempFileSize.substr(_tempFileSize.length - 1);
-        if (isNaN(parseFloat(lastChar))) {
-            const secLastChar = _tempFileSize.substr(_tempFileSize.length - 2).slice(0, -1);
-            if (isNaN(parseFloat(secLastChar))) {
-                // check last 2nd char is alphabetic
-                sizeType = secLastChar + sizeType;
-                _tempFileSizeMaxSize = parseFloat(_tempFileSize.slice(0, -2));
-            }
-            else {
-                _tempFileSizeMaxSize = parseFloat(_tempFileSize.slice(0, -1));
-            }
-            switch (sizeType.toLowerCase()) {
-                case "b":
-                    sizeByByte = _tempFileSizeMaxSize;
-                    break;
-                case "kb":
-                    sizeByByte = _tempFileSizeMaxSize * 1024;
-                    break;
-                case "mb":
-                    sizeByByte = _tempFileSizeMaxSize * 1048576;
-                    break;
-                case "gb":
-                    sizeByByte = _tempFileSizeMaxSize * 1073741824;
-                    break;
-            }
+        if (!sizeString || typeof sizeString !== 'string') {
+            console.warn('[Ztexteditor] convertSizeToByte received invalid sizeString. Defaulting to 0.', { sizeString });
+            return 0;
         }
-        else {
-            // default using bytes if no size type
-            sizeByByte = parseFloat(_tempFileSize);
+        // Remove all spaces, e.g. "1 MB" -> "1MB"
+        const trimmed = sizeString.replace(/ /g, '').trim();
+        if (!trimmed) {
+            return 0;
+        }
+        // Extract numeric part and unit part (letters).
+        // Example: "1.5MB" => number=1.5, unit="mb"
+        const match = /^([0-9]*\.?[0-9]+)([a-zA-Z]*)$/.exec(trimmed);
+        if (!match) {
+            console.warn('[Ztexteditor] Unable to parse sizeString. Defaulting to 0.', { sizeString });
+            return 0;
+        }
+        const numeric = Number(match[1]);
+        const unit = (match[2] || 'b').toLowerCase();
+        if (Number.isNaN(numeric) || numeric < 0) {
+            console.warn('[Ztexteditor] Invalid numeric size in sizeString. Defaulting to 0.', { sizeString });
+            return 0;
+        }
+        switch (unit) {
+            case 'b':
+            case '':
+                return numeric;
+            case 'kb':
+                return numeric * 1024;
+            case 'mb':
+                return numeric * 1024 * 1024;
+            case 'gb':
+                return numeric * 1024 * 1024 * 1024;
+            default:
+                console.warn('[Ztexteditor] Unknown unit in sizeString. Defaulting to bytes.', { sizeString, unit });
+                return numeric;
         }
-        return sizeByByte;
     }
+    /** Read a File as base64 data URL. */
     readFileAsDataURL(file) {
         return new Promise((resolve, reject) => {
+            if (!file) {
+                reject(new Error('File is required.'));
+                return;
+            }
             const reader = new FileReader();
             reader.readAsDataURL(file);
-            reader.onload = () => {
-                resolve(reader.result);
-            };
-            reader.onerror = (error) => {
-                reject(error);
-            };
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
         });
     }
+    // #endregion
+    // #region Small helpers
+    /** Extract event target as HTMLElement safely. */
+    getEventTargetElement(event) {
+        const target = event === null || event === void 0 ? void 0 : event.target;
+        return target instanceof HTMLElement ? target : null;
+    }
 }
 ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i6.DialogService }, { token: i2.AlertService }, { token: i2.CompressImageService }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "compress_btn", first: true, predicate: ["compressButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"OnOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"OnOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6$2.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i7$3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i7$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6$2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i6$2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i6$2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i6$2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i6$2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i6$2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i6$2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i6$2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i6$2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i6$2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i6$2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i6$2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i6$2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i6$2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i6$2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i6$2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i6$2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i6$2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i6$2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i6$2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i6$2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i6$2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i6$2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i6$2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i6$2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i6$2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i6$2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i6$2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i6$2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i6$2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i6$2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i6$2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i6$2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
+ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "compress_btn", first: true, predicate: ["compressButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"onOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"onOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6$2.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i7$3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i7$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6$2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i6$2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i6$2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i6$2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i6$2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i6$2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i6$2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i6$2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i6$2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i6$2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i6$2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i6$2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i6$2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i6$2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i6$2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i6$2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i6$2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i6$2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i6$2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i6$2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i6$2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i6$2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i6$2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i6$2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i6$2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i6$2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i6$2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i6$2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i6$2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i6$2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i6$2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i6$2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i6$2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ztexteditor', template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"OnOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"OnOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"] }]
+            args: [{ selector: 'app-ztexteditor', template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"onOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"onOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i6.DialogService }, { type: i2.AlertService }, { type: i2.CompressImageService }, { type: i2.ToastService }]; }, propDecorators: { editor: [{
                 type: ViewChild,
                 args: ['editor']
@@ -12109,6 +12536,13 @@ class ZschedulerComponent {
         }
         //Set session values
         this.group["selectedDate"] = args.selectedDate;
+        if (this.data.OnDateChange) {
+            const func = ZComponentHelper.getGroupEvalValue.call(this, this.data.OnDateChange);
+            if (typeof func === 'function') {
+                const callFunc = func.bind(this.group.ctrlScope);
+                callFunc(args);
+            }
+        }
         console.log("zschedule component date-change selection: ", args.dateRange);
         // this.local.selectedDate = args.dateRange.start;
         this.group.subject.next({
@@ -14721,8 +15155,8 @@ class ZprogressbarComponent extends FieldBase {
     ngOnInit() {
         super.initComponent().subscribe(() => {
             this.value = this.group.zModel[this.data.Value];
-            this.minValue = this.data.MinValue || this.minValue;
-            this.maxValue = this.data.MaxValue || this.maxValue;
+            this.minValue = ZComponentHelper.getGroupEvalValue.call(this, this.data.MinValue) || this.minValue;
+            this.maxValue = ZComponentHelper.getGroupEvalValue.call(this, this.data.MaxValue) || this.maxValue;
             if (this.data.Options) {
                 const optionType = typeof (this.data.Options);
                 if (optionType === 'object') {