@syncfusion/ej2-pdf 24.1.47 → 24.1.48

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

@@ -6933,6 +6933,7 @@ var _PathPointType;
 class PdfField {
     constructor() {
         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);
@@ -7450,7 +7451,7 @@ class PdfField {
         }
     }
     /**
-     * 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
@@ -7458,7 +7459,7 @@ class PdfField {
      * 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');
@@ -7467,27 +7468,10 @@ class PdfField {
      * ```
      */
     get backColor() {
-        let value;
-        const widget = this.itemAt(this._defaultIndex);
-        if (widget && widget.backColor) {
-            value = widget.backColor;
-        }
-        else if (this._mkDictionary) {
-            const mkDict = this._mkDictionary;
-            if (mkDict && mkDict.has('BG')) {
-                const 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
@@ -7495,7 +7479,7 @@ class PdfField {
      * 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');
@@ -7504,27 +7488,7 @@ class PdfField {
      * ```
      */
     set backColor(value) {
-        const widget = this.itemAt(this._defaultIndex);
-        if (widget && widget.backColor !== value) {
-            widget.backColor = value;
-        }
-        else {
-            const mkDictionary = this._mkDictionary;
-            if (typeof mkDictionary === 'undefined') {
-                const 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);
     }
     /**
      * Gets the border color of the field.
@@ -8118,6 +8082,83 @@ class PdfField {
     get _kidsCount() {
         return this._kids ? this._kids.length : 0;
     }
+    get _hasBackColor() {
+        if (this._isLoaded) {
+            let mkDictionary = this._mkDictionary;
+            if (!mkDictionary) {
+                const 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;
+        }
+    }
+    _parseBackColor(hasTransparency) {
+        let value;
+        if ((!hasTransparency) || ((this._isLoaded && this._hasBackColor) || (!this._isLoaded && !this._isTransparentBackColor))) {
+            const widget = this.itemAt(this._defaultIndex);
+            if (widget && widget.backColor) {
+                value = widget.backColor;
+            }
+            else if (this._mkDictionary) {
+                const mkDict = this._mkDictionary;
+                if (mkDict && mkDict.has('BG')) {
+                    const bgArray = mkDict.getArray('BG');
+                    if (bgArray) {
+                        value = _parseColor(bgArray);
+                    }
+                }
+            }
+            if (typeof value === 'undefined' || value === null) {
+                value = [255, 255, 255];
+            }
+        }
+        return value;
+    }
+    _updateBackColor(value, hasTransparency = false) {
+        if (hasTransparency && value.length === 4 && value[3] !== 255) {
+            this._isTransparentBackColor = true;
+            if (this._dictionary.has('BG')) {
+                delete this._dictionary._map.BG;
+            }
+            const mkDictionary = this._mkDictionary;
+            if (mkDictionary && mkDictionary.has('BG')) {
+                delete mkDictionary._map.BG;
+                this._dictionary._updated = true;
+            }
+            const item = this.itemAt(this._defaultIndex);
+            if (item) {
+                item.backColor = value;
+            }
+        }
+        else {
+            this._isTransparentBackColor = false;
+            const widget = this.itemAt(this._defaultIndex);
+            if (widget && widget.backColor !== value) {
+                widget.backColor = value;
+            }
+            else {
+                const mkDictionary = this._mkDictionary;
+                if (typeof mkDictionary === 'undefined') {
+                    const 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.
      *
@@ -8533,42 +8574,44 @@ class PdfField {
         const width = parameter.bounds[2] + (2 * inflateValue);
         const height = parameter.bounds[3] + (2 * inflateValue);
         const shadowBrush = parameter.shadowBrush;
-        const shadowColor = shadowBrush._color;
-        let leftTop;
-        let 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) {
+            const shadowColor = shadowBrush._color;
+            let leftTop;
+            let 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);
+            }
         }
     }
     _drawCheckBox(graphics, parameter, checkSymbol, state, font) {
@@ -9507,6 +9550,50 @@ class PdfTextBoxField extends PdfField {
             this._initializeFont(value);
         }
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     _initialize(page, name, bounds) {
         this._crossReference = page._crossReference;
         this._page = page;
@@ -9635,7 +9722,7 @@ class PdfTextBoxField extends PdfField {
         const parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         const backcolor = widget.backColor;
-        if (isFlatten) {
+        if (isFlatten && backcolor) {
             parameter.backBrush = new PdfBrush(backcolor);
         }
         parameter.foreBrush = new PdfBrush(widget.color);
@@ -9643,11 +9730,13 @@ class PdfTextBoxField extends PdfField {
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        const 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) {
+            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            const 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;
         let text = this.text;
@@ -10109,6 +10198,50 @@ class PdfButtonField extends PdfField {
             this._initializeFont(value);
         }
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     _assignText(fieldDictionary, value) {
         let dictionary;
         if (fieldDictionary.has('MK')) {
@@ -10267,17 +10400,21 @@ class PdfButtonField extends PdfField {
         const parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         const backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         const border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        const 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) {
+            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            const 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;
@@ -10675,6 +10812,50 @@ class PdfCheckBoxField extends PdfField {
             this._setTextAlignment(value);
         }
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     _initialize(page, name, bounds) {
         this._crossReference = page._crossReference;
         this._page = page;
@@ -10761,17 +10942,21 @@ class PdfCheckBoxField extends PdfField {
         const parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         const backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         const border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        const 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) {
+            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            const 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;
         const template = new PdfTemplate(parameter.bounds, this._crossReference);
         const graphics = template.graphics;
@@ -11236,17 +11421,21 @@ class PdfRadioButtonListField extends PdfField {
         const parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         const backcolor = widget.backColor;
-        parameter.backBrush = new PdfBrush(backcolor);
+        if (backcolor) {
+            parameter.backBrush = new PdfBrush(backcolor);
+        }
         parameter.foreBrush = new PdfBrush(widget.color);
         const border = widget.border;
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        const 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) {
+            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            const 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;
         const template = new PdfTemplate(parameter.bounds, this._crossReference);
         const graphics = template.graphics;
@@ -11929,6 +12118,50 @@ class PdfListField extends PdfField {
             this._setTextAlignment(value);
         }
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     get _options() {
         if (!this._optionArray) {
             if (this._dictionary.has('Opt')) {
@@ -12546,17 +12779,21 @@ class PdfComboBoxField extends PdfListField {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             const backcolor = item.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(item.color);
             const border = item.border;
             parameter.borderPen = new PdfPen(item.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            const 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) {
+                const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                const 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;
             const alignment = typeof item.textAlignment !== 'undefined' ? item.textAlignment : PdfTextAlignment.left;
             const verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -12576,17 +12813,21 @@ class PdfComboBoxField extends PdfListField {
                 }
             }
             const backcolor = this.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(this.color);
             const border = this.border;
             parameter.borderPen = new PdfPen(this.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            const 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) {
+                const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                const 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;
             const alignment = typeof this.textAlignment !== 'undefined' ? this.textAlignment : PdfTextAlignment.left;
             const verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -12921,17 +13162,21 @@ class PdfListBoxField extends PdfListField {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             const backcolor = item.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(item.color);
             const border = item.border;
             parameter.borderPen = new PdfPen(item.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            const 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) {
+                const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                const 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;
             const alignment = typeof item.textAlignment !== 'undefined' ? item.textAlignment : PdfTextAlignment.left;
             const verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -12949,17 +13194,21 @@ class PdfListBoxField extends PdfListField {
                 parameter.bounds = [0, 0, bounds.width, bounds.height];
             }
             const backcolor = this.backColor;
-            parameter.backBrush = new PdfBrush(backcolor);
+            if (backcolor) {
+                parameter.backBrush = new PdfBrush(backcolor);
+            }
             parameter.foreBrush = new PdfBrush(this.color);
             const border = this.border;
             parameter.borderPen = new PdfPen(this.borderColor, border.width);
             parameter.borderStyle = border.style;
             parameter.borderWidth = border.width;
-            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-            const 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) {
+                const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+                const 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;
             const alignment = typeof this.textAlignment !== 'undefined' ? this.textAlignment : PdfTextAlignment.left;
             const verticalAlignment = this.multiSelect ? PdfVerticalAlignment.top : PdfVerticalAlignment.middle;
@@ -13161,6 +13410,50 @@ class PdfSignatureField extends PdfField {
         }
         return this._isSigned;
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     static _load(form, dictionary, crossReference, reference) {
         const field = new PdfSignatureField();
         field._isLoaded = true;
@@ -13243,7 +13536,7 @@ class PdfSignatureField extends PdfField {
         const parameter = new _PaintParameter();
         parameter.bounds = [0, 0, bounds.width, bounds.height];
         const backcolor = widget.backColor;
-        if (isFlatten) {
+        if (isFlatten && backcolor) {
             parameter.backBrush = new PdfBrush(backcolor);
         }
         parameter.foreBrush = new PdfBrush(widget.color);
@@ -13251,11 +13544,13 @@ class PdfSignatureField extends PdfField {
         parameter.borderPen = new PdfPen(widget.borderColor, border.width);
         parameter.borderStyle = border.style;
         parameter.borderWidth = border.width;
-        const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
-        const 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) {
+            const shadowColor = [backcolor[0] - 64, backcolor[1] - 64, backcolor[2] - 64];
+            const 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();
@@ -23231,7 +23526,7 @@ class PdfSoundAnnotation extends PdfComment {
  * // 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
@@ -24977,6 +25272,7 @@ class PdfWidgetAnnotation extends PdfAnnotation {
         this._isAutoResize = false;
         this._visibility = PdfFormFieldVisibility.visible;
         this._isFont = false;
+        this._isTransparentBackColor = false;
         this._isWidget = true;
         this._type = _PdfAnnotationType.widgetAnnotation;
     }
@@ -25081,44 +25377,30 @@ class PdfWidgetAnnotation extends PdfAnnotation {
      * ```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 backColor() {
-        if (typeof this._backColor === 'undefined') {
-            const dictionary = this._mkDictionary;
-            if (dictionary && dictionary.has('BG')) {
-                const 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
@@ -25126,14 +25408,15 @@ class PdfWidgetAnnotation extends PdfAnnotation {
      * ```
      */
     set backColor(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);
+    }
+    get _hasBackColor() {
+        if (this._isLoaded) {
+            const mkDictionary = this._mkDictionary;
+            return (mkDictionary && mkDictionary.has('BG'));
+        }
+        else {
+            return !this._isTransparentBackColor;
         }
     }
     /**
@@ -25769,6 +26052,58 @@ class PdfWidgetAnnotation extends PdfAnnotation {
             this._dictionary.update('Rect', _getUpdatedBounds([value.x, value.y, value.width, value.height], this._page));
         }
     }
+    _parseBackColor() {
+        let value;
+        if ((this._isLoaded && this._hasBackColor) || (!this._isLoaded && !this._isTransparentBackColor)) {
+            if (typeof this._backColor === 'undefined') {
+                const dictionary = this._mkDictionary;
+                if (dictionary && dictionary.has('BG')) {
+                    const 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;
+    }
+    _updateBackColor(value, setAppearance = false) {
+        let isChanged = false;
+        if (value.length === 4 && value[3] !== 255) {
+            this._isTransparentBackColor = true;
+            if (this._dictionary.has('BG')) {
+                delete this._dictionary._map.BG;
+                isChanged = true;
+            }
+            const 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;
+        }
+    }
 }
 /**
  * `PdfStateItem` class represents the check box field item objects.
@@ -26099,6 +26434,52 @@ class PdfRadioButtonListItem extends PdfStateItem {
     set value(option) {
         this._optionValue = option;
     }
+    /**
+     * 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 backColor() {
+        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 backColor(value) {
+        this._updateBackColor(value, true);
+    }
     _initializeItem(value, bounds, page, field) {
         this._optionValue = value;
         this._page = page;