@syncfusion/ej2-pdf 24.1.44 → 24.1.48

package/src/pdf/core/form/field.js

@@ -39,6 +39,7 @@ import { PdfAnnotationCollection } from '../annotations/annotation-collection';
 var PdfField = /** @class */ (function () {
     function PdfField() {
         this._visible = true;
+        this._isTransparentBackColor = false;
         this._defaultFont = new PdfStandardFont(PdfFontFamily.helvetica, 8);
         this._appearanceFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
         this._defaultItemFont = new PdfStandardFont(PdfFontFamily.timesRoman, 12);
@@ -597,7 +598,7 @@ var PdfField = /** @class */ (function () {
     });
     Object.defineProperty(PdfField.prototype, "backColor", {
         /**
-         * Gets the back color of the field.
+         * Gets the background color of the field.
          *
          * @returns {number[]} R, G, B color values in between 0 to 255.
          * ```typescript
@@ -605,7 +606,7 @@ var PdfField = /** @class */ (function () {
          * let document: PdfDocument = new PdfDocument(data, password);
          * // Access the form field at index 0
          * let field: PdfField = document.form.fieldAt(0);
-         * // Gets the back color of the field.
+         * // Gets the background color of the field.
          * let backColor: number[] = field.backColor;
          * // Save the document
          * document.save('output.pdf');
@@ -614,27 +615,10 @@ var PdfField = /** @class */ (function () {
          * ```
          */
         get: function () {
-            var value;
-            var widget = this.itemAt(this._defaultIndex);
-            if (widget && widget.backColor) {
-                value = widget.backColor;
-            }
-            else if (this._mkDictionary) {
-                var mkDict = this._mkDictionary;
-                if (mkDict && mkDict.has('BG')) {
-                    var bgArray = mkDict.getArray('BG');
-                    if (bgArray) {
-                        value = _parseColor(bgArray);
-                    }
-                }
-            }
-            if (typeof value === 'undefined' || value === null) {
-                value = [255, 255, 255];
-            }
-            return value;
+            return this._parseBackColor(false);
         },
         /**
-         * Sets the back color of the field.
+         * Sets the background color of the field.
          *
          * @param {number[]} value R, G, B color values in between 0 to 255.
          * ```typescript
@@ -642,7 +626,7 @@ var PdfField = /** @class */ (function () {
          * let document: PdfDocument = new PdfDocument(data, password);
          * // Access the form field at index 0
          * let field: PdfField = document.form.fieldAt(0);
-         * // Sets the back color of the field.
+         * // Sets the background color of the field.
          * field.backColor = [255, 0, 0];
          * // Save the document
          * document.save('output.pdf');
@@ -651,27 +635,7 @@ var PdfField = /** @class */ (function () {
          * ```
          */
         set: function (value) {
-            var widget = this.itemAt(this._defaultIndex);
-            if (widget && widget.backColor !== value) {
-                widget.backColor = value;
-            }
-            else {
-                var mkDictionary = this._mkDictionary;
-                if (typeof mkDictionary === 'undefined') {
-                    var dictionary = new _PdfDictionary(this._crossReference);
-                    dictionary.update('BG', [Number.parseFloat((value[0] / 255).toFixed(3)),
-                        Number.parseFloat((value[1] / 255).toFixed(3)),
-                        Number.parseFloat((value[2] / 255).toFixed(3))]);
-                    this._dictionary.update('MK', dictionary);
-                }
-                else if (!mkDictionary.has('BG') || _parseColor(mkDictionary.getArray('BG')) !== value) {
-                    mkDictionary.update('BG', [Number.parseFloat((value[0] / 255).toFixed(3)),
-                        Number.parseFloat((value[1] / 255).toFixed(3)),
-                        Number.parseFloat((value[2] / 255).toFixed(3))]);
-                    this._dictionary._updated = true;
-                }
-            }
-            this._backColorSet = true;
+            this._updateBackColor(value);
         },
         enumerable: true,
         configurable: true
@@ -1328,6 +1292,88 @@ var PdfField = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfField.prototype, "_hasBackColor", {
+        get: function () {
+            if (this._isLoaded) {
+                var mkDictionary = this._mkDictionary;
+                if (!mkDictionary) {
+                    var item = this.itemAt(this._defaultIndex);
+                    if (item && item._dictionary.has('MK')) {
+                        mkDictionary = item._dictionary.get('MK');
+                    }
+                }
+                return (mkDictionary && mkDictionary.has('BG'));
+            }
+            else {
+                return !this._isTransparentBackColor;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PdfField.prototype._parseBackColor = function (hasTransparency) {
+        var value;
+        if ((!hasTransparency) || ((this._isLoaded && this._hasBackColor) || (!this._isLoaded && !this._isTransparentBackColor))) {
+            var widget = this.itemAt(this._defaultIndex);
+            if (widget && widget.backColor) {
+                value = widget.backColor;
+            }
+            else if (this._mkDictionary) {
+                var mkDict = this._mkDictionary;
+                if (mkDict && mkDict.has('BG')) {
+                    var bgArray = mkDict.getArray('BG');
+                    if (bgArray) {
+                        value = _parseColor(bgArray);
+                    }
+                }
+            }
+            if (typeof value === 'undefined' || value === null) {
+                value = [255, 255, 255];
+            }
+        }
+        return value;
+    };
+    PdfField.prototype._updateBackColor = function (value, hasTransparency) {
+        if (hasTransparency === void 0) { hasTransparency = false; }
+        if (hasTransparency && value.length === 4 && value[3] !== 255) {
+            this._isTransparentBackColor = true;
+            if (this._dictionary.has('BG')) {
+                delete this._dictionary._map.BG;
+            }
+            var mkDictionary = this._mkDictionary;
+            if (mkDictionary && mkDictionary.has('BG')) {
+                delete mkDictionary._map.BG;
+                this._dictionary._updated = true;
+            }
+            var item = this.itemAt(this._defaultIndex);
+            if (item) {
+                item.backColor = value;
+            }
+        }
+        else {
+            this._isTransparentBackColor = false;
+            var widget = this.itemAt(this._defaultIndex);
+            if (widget && widget.backColor !== value) {
+                widget.backColor = value;
+            }
+            else {
+                var mkDictionary = this._mkDictionary;
+                if (typeof mkDictionary === 'undefined') {
+                    var dictionary = new _PdfDictionary(this._crossReference);
+                    dictionary.update('BG', [Number.parseFloat((value[0] / 255).toFixed(3)),
+                        Number.parseFloat((value[1] / 255).toFixed(3)),
+                        Number.parseFloat((value[2] / 255).toFixed(3))]);
+                    this._dictionary.update('MK', dictionary);
+                }
+                else if (!mkDictionary.has('BG') || _parseColor(mkDictionary.getArray('BG')) !== value) {
+                    mkDictionary.update('BG', [Number.parseFloat((value[0] / 255).toFixed(3)),
+                        Number.parseFloat((value[1] / 255).toFixed(3)),
+                        Number.parseFloat((value[2] / 255).toFixed(3))]);
+                    this._dictionary._updated = true;
+                }
+            }
+        }
+    };
     /**
      * Gets the field item as `PdfWidgetAnnotation` at the specified index.
      *
@@ -1755,42 +1801,44 @@ var PdfField = /** @class */ (function () {
         var width = parameter.bounds[2] + (2 * inflateValue);
         var height = parameter.bounds[3] + (2 * inflateValue);
         var shadowBrush = parameter.shadowBrush;
-        var shadowColor = shadowBrush._color;
-        var leftTop;
-        var rightBottom;
-        switch (parameter.borderStyle) {
-            case PdfBorderStyle.beveled:
-                switch (state) {
-                    case _PdfCheckFieldState.pressedChecked:
-                    case _PdfCheckFieldState.pressedUnchecked:
-                        leftTop = new PdfPen(shadowColor, borderWidth);
-                        rightBottom = new PdfPen([255, 255, 255], borderWidth);
-                        break;
-                    case _PdfCheckFieldState.checked:
-                    case _PdfCheckFieldState.unchecked:
-                        leftTop = new PdfPen([255, 255, 255], borderWidth);
-                        rightBottom = new PdfPen(shadowColor, borderWidth);
-                        break;
-                }
-                break;
-            case PdfBorderStyle.inset:
-                switch (state) {
-                    case _PdfCheckFieldState.pressedChecked:
-                    case _PdfCheckFieldState.pressedUnchecked:
-                        leftTop = new PdfPen([0, 0, 0], borderWidth);
-                        rightBottom = new PdfPen([0, 0, 0], borderWidth);
-                        break;
-                    case _PdfCheckFieldState.checked:
-                    case _PdfCheckFieldState.unchecked:
-                        leftTop = new PdfPen([128, 128, 128], borderWidth);
-                        rightBottom = new PdfPen([192, 192, 192], borderWidth);
-                        break;
-                }
-                break;
-        }
-        if (leftTop && rightBottom) {
-            graphics.drawArc(x, y, width, height, 135, 180, leftTop);
-            graphics.drawArc(x, y, width, height, -45, 180, rightBottom);
+        if (shadowBrush) {
+            var shadowColor = shadowBrush._color;
+            var leftTop = void 0;
+            var rightBottom = void 0;
+            switch (parameter.borderStyle) {
+                case PdfBorderStyle.beveled:
+                    switch (state) {
+                        case _PdfCheckFieldState.pressedChecked:
+                        case _PdfCheckFieldState.pressedUnchecked:
+                            leftTop = new PdfPen(shadowColor, borderWidth);
+                            rightBottom = new PdfPen([255, 255, 255], borderWidth);
+                            break;
+                        case _PdfCheckFieldState.checked:
+                        case _PdfCheckFieldState.unchecked:
+                            leftTop = new PdfPen([255, 255, 255], borderWidth);
+                            rightBottom = new PdfPen(shadowColor, borderWidth);
+                            break;
+                    }
+                    break;
+                case PdfBorderStyle.inset:
+                    switch (state) {
+                        case _PdfCheckFieldState.pressedChecked:
+                        case _PdfCheckFieldState.pressedUnchecked:
+                            leftTop = new PdfPen([0, 0, 0], borderWidth);
+                            rightBottom = new PdfPen([0, 0, 0], borderWidth);
+                            break;
+                        case _PdfCheckFieldState.checked:
+                        case _PdfCheckFieldState.unchecked:
+                            leftTop = new PdfPen([128, 128, 128], borderWidth);
+                            rightBottom = new PdfPen([192, 192, 192], borderWidth);
+                            break;
+                    }
+                    break;
+            }
+            if (leftTop && rightBottom) {
+                graphics.drawArc(x, y, width, height, 135, 180, leftTop);
+                graphics.drawArc(x, y, width, height, -45, 180, rightBottom);
+            }
         }
     };
     PdfField.prototype._drawCheckBox = function (graphics, parameter, checkSymbol, state, font) {
@@ -2781,6 +2829,54 @@ var PdfTextBoxField = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfTextBoxField.prototype, "backColor", {
+        /**
+         * Gets the background color of the field.
+         *
+         * @returns {number[]} R, G, B color values in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the form field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Gets the background color of the field.
+         * let backColor: number[] = field.backColor;
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor(true);
+        },
+        /**
+         * Sets the background color of the field.
+         *
+         * @param {number[]} value Array with R, G, B, A color values in between 0 to 255. For optional A (0-254), it signifies transparency.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the text box field at index 0
+         * let firstName: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field.
+         * firstName.backColor = [255, 0, 0];
+         * // Access the text box field at index 1
+         * let secondName: PdfField = document.form.fieldAt(1);
+         * // Sets the background color of the field to transparent.
+         * secondName.backColor = [0, 0, 0, 0];
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        set: function (value) {
+            this._updateBackColor(value, true);
+        },
+        enumerable: true,
+        configurable: true
+    });
     PdfTextBoxField.prototype._initialize = function (page, name, bounds) {
         this._crossReference = page._crossReference;
         this._page = page;
@@ -2910,7 +3006,7 @@ var PdfTextBoxField = /** @class */ (function (_super) {
         var parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         var backcolor = widget.backColor;
-        if (isFlatten) {
+        if (isFlatten && backcolor) {
             parameter.backBrush = new PdfBrush(backcolor);
         }
         parameter.foreBrush = new PdfBrush(widget.color);
@@ -2918,11 +3014,13 @@ var PdfTextBoxField = /** @class */ (function (_super) {
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-            shadowColor[1] >= 0 ? shadowColor[1] : 0,
-            shadowColor[2] >= 0 ? shadowColor[2] : 0];
-        parameter.shadowBrush = new PdfBrush(color);
+        if (backcolor) {
+            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                shadowColor[2] >= 0 ? shadowColor[2] : 0];
+            parameter.shadowBrush = new PdfBrush(color);
+        }
         parameter.rotationAngle = widget.rotate;
         parameter.insertSpaces = this.insertSpaces;
         var text = this.text;
@@ -3404,6 +3502,54 @@ var PdfButtonField = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfButtonField.prototype, "backColor", {
+        /**
+         * Gets the background color of the field.
+         *
+         * @returns {number[]} R, G, B color values in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the form field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Gets the background color of the field.
+         * let backColor: number[] = field.backColor;
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor(true);
+        },
+        /**
+         * Sets the background color of the field.
+         *
+         * @param {number[]} value Array with R, G, B, A color values in between 0 to 255. For optional A (0-254), it signifies transparency.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the button field at index 0
+         * let submitButton: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field.
+         * submitButton.backColor = [255, 0, 0];
+         * // Access the button field at index 1
+         * let cancelButton: PdfField = document.form.fieldAt(1);
+         * // Sets the background color of the field to transparent.
+         * cancelButton.backColor = [0, 0, 0, 0];
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        set: function (value) {
+            this._updateBackColor(value, true);
+        },
+        enumerable: true,
+        configurable: true
+    });
     PdfButtonField.prototype._assignText = function (fieldDictionary, value) {
         var dictionary;
         if (fieldDictionary.has('MK')) {
@@ -3564,17 +3710,21 @@ var PdfButtonField = /** @class */ (function (_super) {
         var parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         var backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         var border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-            shadowColor[1] >= 0 ? shadowColor[1] : 0,
-            shadowColor[2] >= 0 ? shadowColor[2] : 0];
-        parameter.shadowBrush = new PdfBrush(color);
+        if (backcolor) {
+            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                shadowColor[2] >= 0 ? shadowColor[2] : 0];
+            parameter.shadowBrush = new PdfBrush(color);
+        }
         parameter.rotationAngle = widget.rotate;
         if (typeof this._font === 'undefined' || this._font === null) {
             this._font = this._defaultFont;
@@ -3988,6 +4138,54 @@ var PdfCheckBoxField = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfCheckBoxField.prototype, "backColor", {
+        /**
+         * Gets the background color of the field.
+         *
+         * @returns {number[]} R, G, B color values in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the form field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Gets the background color of the field.
+         * let backColor: number[] = field.backColor;
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor(true);
+        },
+        /**
+         * Sets the background color of the field.
+         *
+         * @param {number[]} value Array with R, G, B, A color values in between 0 to 255. For optional A (0-254), it signifies transparency.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the check box field at index 0
+         * let checkBox1: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field.
+         * checkBox1.backColor = [255, 0, 0];
+         * // Access the check box field at index 1
+         * let checkBox2: PdfField = document.form.fieldAt(1);
+         * // Sets the background color of the field to transparent.
+         * checkBox2.backColor = [0, 0, 0, 0];
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        set: function (value) {
+            this._updateBackColor(value, true);
+        },
+        enumerable: true,
+        configurable: true
+    });
     PdfCheckBoxField.prototype._initialize = function (page, name, bounds) {
         this._crossReference = page._crossReference;
         this._page = page;
@@ -4075,17 +4273,21 @@ var PdfCheckBoxField = /** @class */ (function (_super) {
         var parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         var backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         var border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-            shadowColor[1] >= 0 ? shadowColor[1] : 0,
-            shadowColor[2] >= 0 ? shadowColor[2] : 0];
-        parameter.shadowBrush = new PdfBrush(color);
+        if (backcolor) {
+            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                shadowColor[2] >= 0 ? shadowColor[2] : 0];
+            parameter.shadowBrush = new PdfBrush(color);
+        }
         parameter.rotationAngle = widget.rotate;
         var template = new PdfTemplate(parameter.bounds, this._crossReference);
         var graphics = template.graphics;
@@ -4563,17 +4765,21 @@ var PdfRadioButtonListField = /** @class */ (function (_super) {
         var parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         var backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         var border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-            shadowColor[1] >= 0 ? shadowColor[1] : 0,
-            shadowColor[2] >= 0 ? shadowColor[2] : 0];
-        parameter.shadowBrush = new PdfBrush(color);
+        if (backcolor) {
+            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                shadowColor[2] >= 0 ? shadowColor[2] : 0];
+            parameter.shadowBrush = new PdfBrush(color);
+        }
         parameter.rotationAngle = widget.rotate;
         var template = new PdfTemplate(parameter.bounds, this._crossReference);
         var graphics = template.graphics;
@@ -5297,6 +5503,54 @@ var PdfListField = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfListField.prototype, "backColor", {
+        /**
+         * Gets the background color of the field.
+         *
+         * @returns {number[]} R, G, B color values in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the form field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Gets the background color of the field.
+         * let backColor: number[] = field.backColor;
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor(true);
+        },
+        /**
+         * Sets the background color of the field.
+         *
+         * @param {number[]} value Array with R, G, B, A color values in between 0 to 255. For optional A (0-254), it signifies transparency.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the list field at index 0
+         * let list1: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field.
+         * list1.backColor = [255, 0, 0];
+         * // Access the list field at index 1
+         * let list2: PdfField = document.form.fieldAt(1);
+         * // Sets the background color of the field to transparent.
+         * list2.backColor = [0, 0, 0, 0];
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        set: function (value) {
+            this._updateBackColor(value, true);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PdfListField.prototype, "_options", {
         get: function () {
             if (!this._optionArray) {
@@ -5928,17 +6182,21 @@ var PdfComboBoxField = /** @class */ (function (_super) {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             var backcolor = item.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(item.color);
             var border = item.border;
             parameter.borderPen = new PdfPen(item.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-                shadowColor[1] >= 0 ? shadowColor[1] : 0,
-                shadowColor[2] >= 0 ? shadowColor[2] : 0];
-            parameter.shadowBrush = new PdfBrush(color);
+            if (backcolor) {
+                var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                    shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                    shadowColor[2] >= 0 ? shadowColor[2] : 0];
+                parameter.shadowBrush = new PdfBrush(color);
+            }
             parameter.rotationAngle = item.rotate;
             var alignment = typeof item.textAlignment !== 'undefined' ? item.textAlignment : PdfTextAlignment.left;
             var verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -5958,17 +6216,21 @@ var PdfComboBoxField = /** @class */ (function (_super) {
                 }
             }
             var backcolor = this.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(this.color);
             var border = this.border;
             parameter.borderPen = new PdfPen(this.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-                shadowColor[1] >= 0 ? shadowColor[1] : 0,
-                shadowColor[2] >= 0 ? shadowColor[2] : 0];
-            parameter.shadowBrush = new PdfBrush(color);
+            if (backcolor) {
+                var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                    shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                    shadowColor[2] >= 0 ? shadowColor[2] : 0];
+                parameter.shadowBrush = new PdfBrush(color);
+            }
             parameter.rotationAngle = this.rotationAngle;
             var alignment = typeof this.textAlignment !== 'undefined' ? this.textAlignment : PdfTextAlignment.left;
             var verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -6307,17 +6569,21 @@ var PdfListBoxField = /** @class */ (function (_super) {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             var backcolor = item.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(item.color);
             var border = item.border;
             parameter.borderPen = new PdfPen(item.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-                shadowColor[1] >= 0 ? shadowColor[1] : 0,
-                shadowColor[2] >= 0 ? shadowColor[2] : 0];
-            parameter.shadowBrush = new PdfBrush(color);
+            if (backcolor) {
+                var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                    shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                    shadowColor[2] >= 0 ? shadowColor[2] : 0];
+                parameter.shadowBrush = new PdfBrush(color);
+            }
             parameter.rotationAngle = item.rotate;
             var alignment = typeof item.textAlignment !== 'undefined' ? item.textAlignment : PdfTextAlignment.left;
             var verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -6335,17 +6601,21 @@ var PdfListBoxField = /** @class */ (function (_super) {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             var backcolor = this.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(this.color);
             var border = this.border;
             parameter.borderPen = new PdfPen(this.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-                shadowColor[1] >= 0 ? shadowColor[1] : 0,
-                shadowColor[2] >= 0 ? shadowColor[2] : 0];
-            parameter.shadowBrush = new PdfBrush(color);
+            if (backcolor) {
+                var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                    shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                    shadowColor[2] >= 0 ? shadowColor[2] : 0];
+                parameter.shadowBrush = new PdfBrush(color);
+            }
             parameter.rotationAngle = this.rotationAngle;
             var alignment = typeof this.textAlignment !== 'undefined' ? this.textAlignment : PdfTextAlignment.left;
             var verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -6559,6 +6829,54 @@ var PdfSignatureField = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfSignatureField.prototype, "backColor", {
+        /**
+         * Gets the background color of the field.
+         *
+         * @returns {number[]} R, G, B color values in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the form field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Gets the background color of the field.
+         * let backColor: number[] = field.backColor;
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor(true);
+        },
+        /**
+         * Sets the background color of the field.
+         *
+         * @param {number[]} value Array with R, G, B, A color values in between 0 to 255. For optional A (0-254), it signifies transparency.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Access the signature field at index 0
+         * let field1: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field.
+         * field1.backColor = [255, 0, 0];
+         * // Access the signature field at index 1
+         * let field2: PdfField = document.form.fieldAt(1);
+         * // Sets the background color of the field to transparent.
+         * field2.backColor = [0, 0, 0, 0];
+         * // Save the document
+         * document.save('output.pdf');
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        set: function (value) {
+            this._updateBackColor(value, true);
+        },
+        enumerable: true,
+        configurable: true
+    });
     PdfSignatureField._load = function (form, dictionary, crossReference, reference) {
         var field = new PdfSignatureField();
         field._isLoaded = true;
@@ -6642,7 +6960,7 @@ var PdfSignatureField = /** @class */ (function (_super) {
         var parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         var backcolor = widget.backColor;
-        if (isFlatten) {
+        if (isFlatten && backcolor) {
             parameter.backBrush = new PdfBrush(backcolor);
         }
         parameter.foreBrush = new PdfBrush(widget.color);
@@ -6650,11 +6968,13 @@ var PdfSignatureField = /** @class */ (function (_super) {
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
-            shadowColor[1] >= 0 ? shadowColor[1] : 0,
-            shadowColor[2] >= 0 ? shadowColor[2] : 0];
-        parameter.shadowBrush = new PdfBrush(color);
+        if (backcolor) {
+            var shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            var color = [shadowColor[0] >= 0 ? shadowColor[0] : 0,
+                shadowColor[1] >= 0 ? shadowColor[1] : 0,
+                shadowColor[2] >= 0 ? shadowColor[2] : 0];
+            parameter.shadowBrush = new PdfBrush(color);
+        }
         parameter.rotationAngle = widget.rotate;
         graphics.save();
         graphics._initializeCoordinates();