@syncfusion/ej2-pdf 24.1.47 → 24.2.3

package/dist/es6/ej2-pdf.es5.js

@@ -7231,6 +7231,7 @@ var __extends$3 = (undefined && undefined.__extends) || (function () {
 var PdfField = /** @__PURE__ @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);
@@ -7789,7 +7790,7 @@ var PdfField = /** @__PURE__ @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
@@ -7797,7 +7798,7 @@ var PdfField = /** @__PURE__ @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');
@@ -7806,27 +7807,10 @@ var PdfField = /** @__PURE__ @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
@@ -7834,7 +7818,7 @@ var PdfField = /** @__PURE__ @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');
@@ -7843,27 +7827,7 @@ var PdfField = /** @__PURE__ @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
@@ -8520,6 +8484,88 @@ var PdfField = /** @__PURE__ @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.
      *
@@ -8947,42 +8993,44 @@ var PdfField = /** @__PURE__ @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) {
@@ -9972,6 +10020,54 @@ var PdfTextBoxField = /** @__PURE__ @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;
@@ -10101,7 +10197,7 @@ var PdfTextBoxField = /** @__PURE__ @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);
@@ -10109,11 +10205,13 @@ var PdfTextBoxField = /** @__PURE__ @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;
@@ -10594,6 +10692,54 @@ var PdfButtonField = /** @__PURE__ @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')) {
@@ -10754,17 +10900,21 @@ var PdfButtonField = /** @__PURE__ @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;
@@ -11177,6 +11327,54 @@ var PdfCheckBoxField = /** @__PURE__ @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;
@@ -11264,17 +11462,21 @@ var PdfCheckBoxField = /** @__PURE__ @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;
@@ -11751,17 +11953,21 @@ var PdfRadioButtonListField = /** @__PURE__ @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;
@@ -12484,6 +12690,54 @@ var PdfListField = /** @__PURE__ @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) {
@@ -13114,17 +13368,21 @@ var PdfComboBoxField = /** @__PURE__ @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;
@@ -13144,17 +13402,21 @@ var PdfComboBoxField = /** @__PURE__ @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;
@@ -13492,17 +13754,21 @@ var PdfListBoxField = /** @__PURE__ @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;
@@ -13520,17 +13786,21 @@ var PdfListBoxField = /** @__PURE__ @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;
@@ -13743,6 +14013,54 @@ var PdfSignatureField = /** @__PURE__ @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;
@@ -13826,7 +14144,7 @@ var PdfSignatureField = /** @__PURE__ @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);
@@ -13834,11 +14152,13 @@ var PdfSignatureField = /** @__PURE__ @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();
@@ -24158,7 +24478,7 @@ var PdfSoundAnnotation = /** @__PURE__ @class */ (function (_super) {
  * // Get the first page
  * let page: PdfPage = document.getPage(0) as PdfPage;
  * // Create a new free text annotation
- * const annotation: PdfFreeTextAnnotation = new PdfFreeTextAnnotation (50, 100, 100, 50);
+ * const annotation: PdfFreeTextAnnotation = new PdfFreeTextAnnotation(50, 100, 100, 50);
  * // Add annotation to the page
  * page.annotations.add(annotation);
  * // Destroy the document
@@ -25973,6 +26293,7 @@ var PdfWidgetAnnotation = /** @__PURE__ @class */ (function (_super) {
         _this._isAutoResize = false;
         _this._visibility = PdfFormFieldVisibility.visible;
         _this._isFont = false;
+        _this._isTransparentBackColor = false;
         _this._isWidget = true;
         _this._type = _PdfAnnotationType.widgetAnnotation;
         return _this;
@@ -26087,44 +26408,30 @@ var PdfWidgetAnnotation = /** @__PURE__ @class */ (function (_super) {
          * ```typescript
          * // Load an existing PDF document
          * let document: PdfDocument = new PdfDocument(data, password);
-         * // Get the first page
-         * let page: PdfPage = document.getPage(0) as PdfPage;
-         * // Get the first annotation of the page
-         * let annotation: PdfWidgetAnnotation = page.annotations.at(0) as PdfWidgetAnnotation;
+         * // Access the text box field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
          * // Gets the back color of the annotation
-         * let backColor: number[] = annotation.backColor;
+         * let backColor: number[] = field.itemAt(0).backColor;
          * // Destroy the document
          * document.destroy();
          * ```
          */
         get: function () {
-            if (typeof this._backColor === 'undefined') {
-                var dictionary = this._mkDictionary;
-                if (dictionary && dictionary.has('BG')) {
-                    var colorArray = dictionary.getArray('BG');
-                    if (colorArray) {
-                        this._backColor = _parseColor(colorArray);
-                    }
-                }
-            }
-            if (typeof this._backColor === 'undefined' || this._backColor === null) {
-                this._backColor = [255, 255, 255];
-            }
-            return this._backColor;
+            return this._parseBackColor();
         },
         /**
          * Sets the back color of the annotation.
          *
-         * @param {number[]} value Color as R, G, B color array in between 0 to 255.
+         * @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);
-         * // Get the first page
-         * let page: PdfPage = document.getPage(0) as PdfPage;
-         * // Get the first annotation of the page
-         * let annotation: PdfWidgetAnnotation = page.annotations.at(0) as PdfWidgetAnnotation;
-         * // Sets the back color of the annotation.
-         * annotation.backColor = [255,255,255];
+         * // Access the text box field at index 0
+         * let field: PdfField = document.form.fieldAt(0);
+         * // Sets the background color of the field item
+         * field.itemAt(0).backColor = [255, 0, 0];
+         * // Sets the background color of the field item to transparent
+         * field.itemAt(1).backColor = [0, 0, 0, 0];
          * // Save the document
          * document.save('output.pdf');
          * // Destroy the document
@@ -26132,14 +26439,19 @@ var PdfWidgetAnnotation = /** @__PURE__ @class */ (function (_super) {
          * ```
          */
         set: function (value) {
-            if (typeof this.backColor === 'undefined' || this.backColor !== value) {
-                if (typeof this._mkDictionary === 'undefined') {
-                    this._dictionary.update('MK', new _PdfDictionary(this._crossReference));
-                }
-                this._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._backColor = value;
+            this._updateBackColor(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PdfWidgetAnnotation.prototype, "_hasBackColor", {
+        get: function () {
+            if (this._isLoaded) {
+                var mkDictionary = this._mkDictionary;
+                return (mkDictionary && mkDictionary.has('BG'));
+            }
+            else {
+                return !this._isTransparentBackColor;
             }
         },
         enumerable: true,
@@ -26816,6 +27128,59 @@ var PdfWidgetAnnotation = /** @__PURE__ @class */ (function (_super) {
             this._dictionary.update('Rect', _getUpdatedBounds([value.x, value.y, value.width, value.height], this._page));
         }
     };
+    PdfWidgetAnnotation.prototype._parseBackColor = function () {
+        var value;
+        if ((this._isLoaded && this._hasBackColor) || (!this._isLoaded && !this._isTransparentBackColor)) {
+            if (typeof this._backColor === 'undefined') {
+                var dictionary = this._mkDictionary;
+                if (dictionary && dictionary.has('BG')) {
+                    var colorArray = dictionary.getArray('BG');
+                    if (colorArray) {
+                        this._backColor = _parseColor(colorArray);
+                    }
+                }
+            }
+            if (typeof this._backColor === 'undefined' || this._backColor === null) {
+                this._backColor = [255, 255, 255];
+            }
+            value = this._backColor;
+        }
+        return value;
+    };
+    PdfWidgetAnnotation.prototype._updateBackColor = function (value, setAppearance) {
+        if (setAppearance === void 0) { setAppearance = false; }
+        var isChanged = false;
+        if (value.length === 4 && value[3] !== 255) {
+            this._isTransparentBackColor = true;
+            if (this._dictionary.has('BG')) {
+                delete this._dictionary._map.BG;
+                isChanged = true;
+            }
+            var mkDictionary = this._mkDictionary;
+            if (mkDictionary && mkDictionary.has('BG')) {
+                delete mkDictionary._map.BG;
+                this._dictionary._updated = true;
+                isChanged = true;
+            }
+        }
+        else {
+            this._isTransparentBackColor = false;
+            if (typeof this.backColor === 'undefined' || this._backColor !== value) {
+                if (typeof this._mkDictionary === 'undefined') {
+                    this._dictionary.update('MK', new _PdfDictionary(this._crossReference));
+                }
+                this._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._backColor = [value[0], value[1], value[2]];
+                this._dictionary._updated = true;
+                isChanged = true;
+            }
+        }
+        if (setAppearance && isChanged && this._field) {
+            this._field._setAppearance = true;
+        }
+    };
     return PdfWidgetAnnotation;
 }(PdfAnnotation));
 /**
@@ -27167,6 +27532,56 @@ var PdfRadioButtonListItem = /** @__PURE__ @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PdfRadioButtonListItem.prototype, "backColor", {
+        /**
+         * Gets the back color of the annotation.
+         *
+         * @returns {number[]} Color as R, G, B color array in between 0 to 255.
+         * ```typescript
+         * // Load an existing PDF document
+         * let document: PdfDocument = new PdfDocument(data, password);
+         * // Get the first page
+         * let page: PdfPage = document.getPage(0) as PdfPage;
+         * // Get the first annotation of the page
+         * let annotation: PdfWidgetAnnotation = page.annotations.at(0) as PdfWidgetAnnotation;
+         * // Gets the back color of the annotation
+         * let backColor: number[] = annotation.backColor;
+         * // Destroy the document
+         * document.destroy();
+         * ```
+         */
+        get: function () {
+            return this._parseBackColor();
+        },
+        /**
+         * Sets the back color of the annotation.
+         *
+         * @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);
+         * // Gets the first page of the document
+         * let page: PdfPage = document.getPage(0);
+         * // Access the PDF form
+         * let form: PdfForm = document.form;
+         * // Access the radio button list field
+         * let field: PdfRadioButtonListField = form.fieldAt(0) as PdfRadioButtonListField;
+         * // Sets the back color of the radio button list item
+         * field.itemAt(0).backColor = [255, 255, 255];
+         * // Sets the background color of the field item to transparent
+         * field.itemAt(1).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
+    });
     PdfRadioButtonListItem.prototype._initializeItem = function (value, bounds, page, field) {
         this._optionValue = value;
         this._page = page;