@progress/kendo-pdfviewer-common 0.4.2-develop.1 → 0.5.0-develop.2

package/dist/es/annotations/annotation-layer.js

@@ -17,8 +17,7 @@ import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib
 import { AnnotationEditorType, DOMSVGFactory, FeatureTest, PDFDateString, setLayerDimensions, shadow, Util, XfaLayer } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { AnnotationBorderStyleType, AnnotationPrefix, AnnotationType, LINE_FACTOR } from "./shared/utils";
 import { ColorConverters } from "./shared/scripting_utils";
-// import { AnnotationStorage } from "pdfjs-dist/types/src/display/annotation_storage";
-// import { AnnotationStorage } from "pdfjs-dist/types/src/display/annotation_storage";
+import { AnnotationStorage } from "./helpers/annotation-storage";
 // const DEFAULT_TAB_INDEX = 1000;
 // it is unclear why the value 1000 is chosen by pdf.js
 // kendo a11y tests fail if this is not 0
@@ -48,15 +47,16 @@ class AnnotationElementFactory {
                 switch (fieldType) {
                     case "Tx":
                         return new TextWidgetAnnotationElement(parameters);
-                    // case "Btn":
-                    //     if (parameters.data.radioButton) {
-                    //         return new RadioButtonWidgetAnnotationElement(parameters);
-                    //     } else if (parameters.data.checkBox) {
-                    //         return new CheckboxWidgetAnnotationElement(parameters);
-                    //     }
-                    //     return new PushButtonWidgetAnnotationElement(parameters);
-                    // case "Ch":
-                    //     return new ChoiceWidgetAnnotationElement(parameters);
+                    case "Btn":
+                        if (parameters.data.radioButton) {
+                            return new RadioButtonWidgetAnnotationElement(parameters);
+                        }
+                        else if (parameters.data.checkBox) {
+                            return new CheckboxWidgetAnnotationElement(parameters);
+                        }
+                        return new PushButtonWidgetAnnotationElement(parameters);
+                    case "Ch":
+                        return new ChoiceWidgetAnnotationElement(parameters);
                     // case "Sig":
                     //     return new SignatureWidgetAnnotationElement(parameters);
                     default:
@@ -1382,89 +1382,107 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
 //         super(parameters, { isRenderable: !!parameters.data.hasOwnCanvas });
 //     }
 // }
-// class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
-//     constructor(parameters) {
-//         super(parameters, { isRenderable: parameters.renderForms });
-//     }
-//     render() {
-//         const storage = this.annotationStorage;
-//         const data = this.data;
-//         const id = data.id;
-//         let value = storage.getValue(id, {
-//             value: data.exportValue === data.fieldValue,
-//         }).value;
-//         if (typeof value === "string") {
-//             // The value has been changed through js and set in annotationStorage.
-//             value = value !== "Off";
-//             storage.setValue(id, { value });
-//         }
-//         this.container.classList.add("buttonWidgetAnnotation", "checkBox");
-//         const element = document.createElement("input");
-//         GetElementsByNameSet.add(element);
-//         element.setAttribute("data-element-id", id);
-//         element.disabled = data.readOnly;
-//         this._setRequired(element, this.data.required);
-//         element.type = "checkbox";
-//         element.name = data.fieldName;
-//         if (value) {
-//             element.setAttribute("checked", (true).toString());
-//         }
-//         element.setAttribute("exportValue", data.exportValue);
-//         element.tabIndex = DEFAULT_TAB_INDEX;
-//         element.addEventListener("change", event => {
-//             const { name, checked } = event.target as any;
-//             for (const checkbox of this._getElementsByName(name, /* skipId = */ id)) {
-//                 const curChecked = checked && checkbox.exportValue === data.exportValue;
-//                 if (checkbox.domElement) {
-//                     checkbox.domElement.checked = curChecked;
-//                 }
-//                 storage.setValue(checkbox.id, { value: curChecked });
-//             }
-//             storage.setValue(id, { value: checked });
-//         });
-//         element.addEventListener("resetform", event => {
-//             const defaultValue = data.defaultFieldValue || "Off";
-//             // @ts-expect-error(TS)
-//             event.target.checked = defaultValue === data.exportValue;
-//         });
-//         if (this.enableScripting && this.hasJSActions) {
-//             element.addEventListener("updatefromsandbox", jsEvent => {
-//                 const actions = {
-//                     value(event) {
-//                         event.target.checked = event.detail.value !== "Off";
-//                         storage.setValue(id, { value: event.target.checked });
-//                     },
-//                 };
-//                 this._dispatchEventFromSandbox(actions, jsEvent);
-//             });
-//             this._setEventListeners(
-//                 element,
-//                 null,
-//                 [
-//                     ["change", "Validate"],
-//                     ["change", "Action"],
-//                     ["focus", "Focus"],
-//                     ["blur", "Blur"],
-//                     ["mousedown", "Mouse Down"],
-//                     ["mouseenter", "Mouse Enter"],
-//                     ["mouseleave", "Mouse Exit"],
-//                     ["mouseup", "Mouse Up"],
-//                 ],
-//                 event => event.target.checked
-//             );
-//         }
-//         this._setBackgroundColor(element);
-//         this._setDefaultPropertiesFromJS(element);
-//         this.container.append(element);
-//         return this.container;
-//     }
-// }
+class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
+    constructor(parameters) {
+        super(parameters, { isRenderable: parameters.renderForms });
+    }
+    render() {
+        const storage = this.annotationStorage;
+        const data = this.data;
+        const id = data.id;
+        let value = storage.getValue(id, {
+            value: data.exportValue === data.fieldValue
+        }).value;
+        if (typeof value === "string") {
+            // The value has been changed through js and set in annotationStorage.
+            value = value !== "Off";
+            storage.setValue(id, { value });
+        }
+        // this.container.classList.add("buttonWidgetAnnotation", "checkBox");
+        this.container.classList.add("k-button-widget-annotation", "k-checkbox-widget-annotation");
+        const element = document.createElement("input");
+        GetElementsByNameSet.add(element);
+        element.setAttribute("data-element-id", id);
+        element.disabled = data.readOnly;
+        this._setRequired(element, this.data.required);
+        element.type = "checkbox";
+        element.name = data.fieldName;
+        if (value) {
+            element.setAttribute("checked", (true).toString());
+        }
+        element.setAttribute("exportValue", data.exportValue);
+        element.tabIndex = DEFAULT_TAB_INDEX;
+        element.addEventListener("change", event => {
+            const { name, checked } = event.target;
+            for (const checkbox of this._getElementsByName(name, /* skipId = */ id)) {
+                const curChecked = checked && checkbox.exportValue === data.exportValue;
+                if (checkbox.domElement) {
+                    checkbox.domElement.checked = curChecked;
+                }
+                storage.setValue(checkbox.id, { value: curChecked });
+            }
+            storage.setValue(id, { value: checked });
+        });
+        element.addEventListener("resetform", event => {
+            const defaultValue = data.defaultFieldValue || "Off";
+            // @ts-expect-error(TS)
+            event.target.checked = defaultValue === data.exportValue;
+        });
+        if (this.enableScripting && this.hasJSActions) {
+            element.addEventListener("updatefromsandbox", jsEvent => {
+                const actions = {
+                    value(event) {
+                        event.target.checked = event.detail.value !== "Off";
+                        storage.setValue(id, { value: event.target.checked });
+                    }
+                };
+                this._dispatchEventFromSandbox(actions, jsEvent);
+            });
+            this._setEventListeners(element, null, [
+                ["change", "Validate"],
+                ["change", "Action"],
+                ["focus", "Focus"],
+                ["blur", "Blur"],
+                ["mousedown", "Mouse Down"],
+                ["mouseenter", "Mouse Enter"],
+                ["mouseleave", "Mouse Exit"],
+                ["mouseup", "Mouse Up"]
+            ], event => event.target.checked);
+        }
+        if (this.enableScripting && this.hasJSActions) {
+            element.addEventListener("updatefromsandbox", jsEvent => {
+                const actions = {
+                    value(event) {
+                        event.target.checked = event.detail.value !== "Off";
+                        storage.setValue(id, { value: event.target.checked });
+                    }
+                };
+                this._dispatchEventFromSandbox(actions, jsEvent);
+            });
+            this._setEventListeners(element, null, [
+                ["change", "Validate"],
+                ["change", "Action"],
+                ["focus", "Focus"],
+                ["blur", "Blur"],
+                ["mousedown", "Mouse Down"],
+                ["mouseenter", "Mouse Enter"],
+                ["mouseleave", "Mouse Exit"],
+                ["mouseup", "Mouse Up"]
+            ], event => event.target.checked);
+        }
+        this._setBackgroundColor(element);
+        this._setDefaultPropertiesFromJS(element);
+        this.container.append(element);
+        return this.container;
+    }
+}
 class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
     constructor(parameters) {
         super(parameters, { isRenderable: parameters.renderForms });
     }
     render() {
-        this.container.classList.add("buttonWidgetAnnotation", "radioButton");
+        //this.container.classList.add("buttonWidgetAnnotation", "radioButton");
+        this.container.classList.add("k-button-widget-annotation", "k-radio-button-widget-annotation");
         const storage = this.annotationStorage;
         const data = this.data;
         const id = data.id;
@@ -1548,253 +1566,250 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
         return this.container;
     }
 }
-// class PushButtonWidgetAnnotationElement extends LinkAnnotationElement {
-//     constructor(parameters) {
-//         super(parameters, { ignoreBorder: parameters.data.hasAppearance });
-//     }
-//     render() {
-//         // The rendering and functionality of a push button widget annotation is
-//         // equal to that of a link annotation, but may have more functionality, such
-//         // as performing actions on form fields (resetting, submitting, et cetera).
-//         const container = super.render();
-//         container.classList.add("buttonWidgetAnnotation", "pushButton");
-//         const linkElement = container.lastChild;
-//         if (this.enableScripting && this.hasJSActions && linkElement) {
-//             this._setDefaultPropertiesFromJS(linkElement);
-//             linkElement.addEventListener("updatefromsandbox", jsEvent => {
-//                 this._dispatchEventFromSandbox({}, jsEvent);
-//             });
-//         }
-//         return container;
-//     }
-// }
-// class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
-//     constructor(parameters) {
-//         super(parameters, { isRenderable: parameters.renderForms });
-//     }
-//     render() {
-//         this.container.classList.add("choiceWidgetAnnotation");
-//         const storage = this.annotationStorage;
-//         const id = this.data.id;
-//         const storedData = storage.getValue(id, {
-//             value: this.data.fieldValue,
-//         });
-//         const selectElement = document.createElement("select");
-//         GetElementsByNameSet.add(selectElement);
-//         selectElement.setAttribute("data-element-id", id);
-//         selectElement.disabled = this.data.readOnly;
-//         this._setRequired(selectElement, this.data.required);
-//         selectElement.name = this.data.fieldName;
-//         selectElement.tabIndex = DEFAULT_TAB_INDEX;
-//         let addAnEmptyEntry = this.data.combo && this.data.options.length > 0;
-//         if (!this.data.combo) {
-//             // List boxes have a size and (optionally) multiple selection.
-//             selectElement.size = this.data.options.length;
-//             if (this.data.multiSelect) {
-//                 selectElement.multiple = true;
-//             }
-//         }
-//         selectElement.addEventListener("resetform", () => {
-//             const defaultValue = this.data.defaultFieldValue;
-//             for (const option of (selectElement as any).options) {
-//                 option.selected = option.value === defaultValue;
-//             }
-//         });
-//         // Insert the options into the choice field.
-//         for (const option of this.data.options) {
-//             const optionElement = document.createElement("option");
-//             optionElement.textContent = option.displayValue;
-//             optionElement.value = option.exportValue;
-//             if (storedData.value.includes(option.exportValue)) {
-//                 optionElement.setAttribute("selected", (true).toString());
-//                 addAnEmptyEntry = false;
-//             }
-//             selectElement.append(optionElement);
-//         }
-//         let removeEmptyEntry = null;
-//         if (addAnEmptyEntry) {
-//             const noneOptionElement = document.createElement("option");
-//             noneOptionElement.value = " ";
-//             noneOptionElement.setAttribute("hidden", (true).toString());
-//             noneOptionElement.setAttribute("selected", (true).toString());
-//             selectElement.prepend(noneOptionElement);
-//             removeEmptyEntry = () => {
-//                 noneOptionElement.remove();
-//                 selectElement.removeEventListener("input", removeEmptyEntry);
-//                 removeEmptyEntry = null;
-//             };
-//             selectElement.addEventListener("input", removeEmptyEntry);
-//         }
-//         const getValue = isExport => {
-//             const name = isExport ? "value" : "textContent";
-//             const { options, multiple } = selectElement;
-//             if (!multiple) {
-//                 return options.selectedIndex === -1
-//                     ? null
-//                     : options[options.selectedIndex][name];
-//             }
-//             return Array.prototype.filter
-//                 .call(options, option => option.selected)
-//                 .map(option => option[name]);
-//         };
-//         let selectedValues = getValue(/* isExport */ false);
-//         const getItems = event => {
-//             const options = event.target.options;
-//             return Array.prototype.map.call(options, option => ({
-//                 displayValue: option.textContent,
-//                 exportValue: option.value,
-//             }));
-//         };
-//         if (this.enableScripting && this.hasJSActions) {
-//             selectElement.addEventListener("updatefromsandbox", jsEvent => {
-//                 const actions = {
-//                     value(event) {
-//                         removeEmptyEntry?.();
-//                         const value = event.detail.value;
-//                         const values = new Set(Array.isArray(value) ? value : [value]);
-//                         for (const option of (selectElement as any).options) {
-//                             option.selected = values.has(option.value);
-//                         }
-//                         storage.setValue(id, {
-//                             value: getValue(/* isExport */ true),
-//                         });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     multipleSelection() {
-//                         selectElement.multiple = true;
-//                     },
-//                     remove(event) {
-//                         const options = selectElement.options;
-//                         const index = event.detail.remove;
-//                         options[index].selected = false;
-//                         selectElement.remove(index);
-//                         if (options.length > 0) {
-//                             const i = Array.prototype.findIndex.call(
-//                                 options,
-//                                 option => option.selected
-//                             );
-//                             if (i === -1) {
-//                                 options[0].selected = true;
-//                             }
-//                         }
-//                         storage.setValue(id, {
-//                             value: getValue(/* isExport */ true),
-//                             items: getItems(event),
-//                         });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     clear() {
-//                         while (selectElement.length !== 0) {
-//                             selectElement.remove(0);
-//                         }
-//                         storage.setValue(id, { value: null, items: [] });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     insert(event) {
-//                         const { index, displayValue, exportValue } = event.detail.insert;
-//                         const selectChild = selectElement.children[index];
-//                         const optionElement = document.createElement("option");
-//                         optionElement.textContent = displayValue;
-//                         optionElement.value = exportValue;
-//                         if (selectChild) {
-//                             selectChild.before(optionElement);
-//                         } else {
-//                             selectElement.append(optionElement);
-//                         }
-//                         storage.setValue(id, {
-//                             value: getValue(/* isExport */ true),
-//                             items: getItems(event),
-//                         });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     items(event) {
-//                         const { items } = event.detail;
-//                         while (selectElement.length !== 0) {
-//                             selectElement.remove(0);
-//                         }
-//                         for (const item of items) {
-//                             const { displayValue, exportValue } = item;
-//                             const optionElement = document.createElement("option");
-//                             optionElement.textContent = displayValue;
-//                             optionElement.value = exportValue;
-//                             selectElement.append(optionElement);
-//                         }
-//                         if (selectElement.options.length > 0) {
-//                             selectElement.options[0].selected = true;
-//                         }
-//                         storage.setValue(id, {
-//                             value: getValue(/* isExport */ true),
-//                             items: getItems(event),
-//                         });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     indices(event) {
-//                         const indices = new Set(event.detail.indices);
-//                         for (const option of event.target.options) {
-//                             option.selected = indices.has(option.index);
-//                         }
-//                         storage.setValue(id, {
-//                             value: getValue(/* isExport */ true),
-//                         });
-//                         selectedValues = getValue(/* isExport */ false);
-//                     },
-//                     editable(event) {
-//                         event.target.disabled = !event.detail.editable;
-//                     },
-//                 };
-//                 this._dispatchEventFromSandbox(actions, jsEvent);
-//             });
-//             selectElement.addEventListener("input", event => {
-//                 const exportValue = getValue(/* isExport */ true);
-//                 const change = getValue(/* isExport */ false);
-//                 storage.setValue(id, { value: exportValue });
-//                 event.preventDefault();
-//                 this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
-//                     source: this,
-//                     detail: {
-//                         id,
-//                         name: "Keystroke",
-//                         value: selectedValues,
-//                         change,
-//                         changeEx: exportValue,
-//                         willCommit: false,
-//                         commitKey: 1,
-//                         keyDown: false,
-//                     },
-//                 });
-//             });
-//             this._setEventListeners(
-//                 selectElement,
-//                 null,
-//                 [
-//                     ["focus", "Focus"],
-//                     ["blur", "Blur"],
-//                     ["mousedown", "Mouse Down"],
-//                     ["mouseenter", "Mouse Enter"],
-//                     ["mouseleave", "Mouse Exit"],
-//                     ["mouseup", "Mouse Up"],
-//                     ["input", "Action"],
-//                     ["input", "Validate"],
-//                 ],
-//                 event => event.target.value
-//             );
-//         } else {
-//             selectElement.addEventListener("input", function () {
-//                 storage.setValue(id, { value: getValue(/* isExport */ true) });
-//             });
-//         }
-//         if (this.data.combo) {
-//             this._setTextStyle(selectElement);
-//         } else {
-//             // Just use the default font size...
-//             // it's a bit hard to guess what is a good size.
-//         }
-//         this._setBackgroundColor(selectElement);
-//         this._setDefaultPropertiesFromJS(selectElement);
-//         this.container.append(selectElement);
-//         return this.container;
-//     }
-// }
+class PushButtonWidgetAnnotationElement extends LinkAnnotationElement {
+    constructor(parameters) {
+        super(parameters, { ignoreBorder: parameters.data.hasAppearance });
+    }
+    render() {
+        // The rendering and functionality of a push button widget annotation is
+        // equal to that of a link annotation, but may have more functionality, such
+        // as performing actions on form fields (resetting, submitting, et cetera).
+        const container = super.render();
+        //container.classList.add("buttonWidgetAnnotation", "pushButton");
+        this.container.classList.add("k-button-widget-annotation", "k-push-button-widget-annotation");
+        const linkElement = container.lastChild;
+        if (this.enableScripting && this.hasJSActions && linkElement) {
+            this._setDefaultPropertiesFromJS(linkElement);
+            linkElement.addEventListener("updatefromsandbox", jsEvent => {
+                this._dispatchEventFromSandbox({}, jsEvent);
+            });
+        }
+        return container;
+    }
+}
+class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
+    constructor(parameters) {
+        super(parameters, { isRenderable: parameters.renderForms });
+    }
+    render() {
+        this.container.classList.add("choiceWidgetAnnotation");
+        const storage = this.annotationStorage;
+        const id = this.data.id;
+        const storedData = storage.getValue(id, {
+            value: this.data.fieldValue
+        });
+        const selectElement = document.createElement("select");
+        GetElementsByNameSet.add(selectElement);
+        selectElement.setAttribute("data-element-id", id);
+        selectElement.disabled = this.data.readOnly;
+        this._setRequired(selectElement, this.data.required);
+        selectElement.name = this.data.fieldName;
+        selectElement.tabIndex = DEFAULT_TAB_INDEX;
+        let addAnEmptyEntry = this.data.combo && this.data.options.length > 0;
+        if (!this.data.combo) {
+            // List boxes have a size and (optionally) multiple selection.
+            selectElement.size = this.data.options.length;
+            if (this.data.multiSelect) {
+                selectElement.multiple = true;
+            }
+        }
+        selectElement.addEventListener("resetform", () => {
+            const defaultValue = this.data.defaultFieldValue;
+            for (const option of selectElement.options) {
+                option.selected = option.value === defaultValue;
+            }
+        });
+        // Insert the options into the choice field.
+        for (const option of this.data.options) {
+            const optionElement = document.createElement("option");
+            optionElement.textContent = option.displayValue;
+            optionElement.value = option.exportValue;
+            if (storedData.value.includes(option.exportValue)) {
+                optionElement.setAttribute("selected", (true).toString());
+                addAnEmptyEntry = false;
+            }
+            selectElement.append(optionElement);
+        }
+        let removeEmptyEntry = null;
+        if (addAnEmptyEntry) {
+            const noneOptionElement = document.createElement("option");
+            noneOptionElement.value = " ";
+            noneOptionElement.setAttribute("hidden", (true).toString());
+            noneOptionElement.setAttribute("selected", (true).toString());
+            selectElement.prepend(noneOptionElement);
+            removeEmptyEntry = () => {
+                noneOptionElement.remove();
+                selectElement.removeEventListener("input", removeEmptyEntry);
+                removeEmptyEntry = null;
+            };
+            selectElement.addEventListener("input", removeEmptyEntry);
+        }
+        const getValue = isExport => {
+            const name = isExport ? "value" : "textContent";
+            const { options, multiple } = selectElement;
+            if (!multiple) {
+                return options.selectedIndex === -1
+                    ? null
+                    : options[options.selectedIndex][name];
+            }
+            return Array.prototype.filter
+                .call(options, option => option.selected)
+                .map(option => option[name]);
+        };
+        let selectedValues = getValue(/* isExport */ false);
+        const getItems = event => {
+            const options = event.target.options;
+            return Array.prototype.map.call(options, option => ({
+                displayValue: option.textContent,
+                exportValue: option.value
+            }));
+        };
+        if (this.enableScripting && this.hasJSActions) {
+            selectElement.addEventListener("updatefromsandbox", jsEvent => {
+                const actions = {
+                    value(event) {
+                        removeEmptyEntry === null || removeEmptyEntry === void 0 ? void 0 : removeEmptyEntry();
+                        const value = event.detail.value;
+                        const values = new Set(Array.isArray(value) ? value : [value]);
+                        for (const option of selectElement.options) {
+                            option.selected = values.has(option.value);
+                        }
+                        storage.setValue(id, {
+                            value: getValue(/* isExport */ true)
+                        });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    multipleSelection() {
+                        selectElement.multiple = true;
+                    },
+                    remove(event) {
+                        const options = selectElement.options;
+                        const index = event.detail.remove;
+                        options[index].selected = false;
+                        selectElement.remove(index);
+                        if (options.length > 0) {
+                            const i = Array.prototype.findIndex.call(options, option => option.selected);
+                            if (i === -1) {
+                                options[0].selected = true;
+                            }
+                        }
+                        storage.setValue(id, {
+                            value: getValue(/* isExport */ true),
+                            items: getItems(event)
+                        });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    clear() {
+                        while (selectElement.length !== 0) {
+                            selectElement.remove(0);
+                        }
+                        storage.setValue(id, { value: null, items: [] });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    insert(event) {
+                        const { index, displayValue, exportValue } = event.detail.insert;
+                        const selectChild = selectElement.children[index];
+                        const optionElement = document.createElement("option");
+                        optionElement.textContent = displayValue;
+                        optionElement.value = exportValue;
+                        if (selectChild) {
+                            selectChild.before(optionElement);
+                        }
+                        else {
+                            selectElement.append(optionElement);
+                        }
+                        storage.setValue(id, {
+                            value: getValue(/* isExport */ true),
+                            items: getItems(event)
+                        });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    items(event) {
+                        const { items } = event.detail;
+                        while (selectElement.length !== 0) {
+                            selectElement.remove(0);
+                        }
+                        for (const item of items) {
+                            const { displayValue, exportValue } = item;
+                            const optionElement = document.createElement("option");
+                            optionElement.textContent = displayValue;
+                            optionElement.value = exportValue;
+                            selectElement.append(optionElement);
+                        }
+                        if (selectElement.options.length > 0) {
+                            selectElement.options[0].selected = true;
+                        }
+                        storage.setValue(id, {
+                            value: getValue(/* isExport */ true),
+                            items: getItems(event)
+                        });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    indices(event) {
+                        const indices = new Set(event.detail.indices);
+                        for (const option of event.target.options) {
+                            option.selected = indices.has(option.index);
+                        }
+                        storage.setValue(id, {
+                            value: getValue(/* isExport */ true)
+                        });
+                        selectedValues = getValue(/* isExport */ false);
+                    },
+                    editable(event) {
+                        event.target.disabled = !event.detail.editable;
+                    }
+                };
+                this._dispatchEventFromSandbox(actions, jsEvent);
+            });
+            selectElement.addEventListener("input", event => {
+                var _a;
+                const exportValue = getValue(/* isExport */ true);
+                const change = getValue(/* isExport */ false);
+                storage.setValue(id, { value: exportValue });
+                event.preventDefault();
+                (_a = this.linkService.eventBus) === null || _a === void 0 ? void 0 : _a.dispatch("dispatcheventinsandbox", {
+                    source: this,
+                    detail: {
+                        id,
+                        name: "Keystroke",
+                        value: selectedValues,
+                        change,
+                        changeEx: exportValue,
+                        willCommit: false,
+                        commitKey: 1,
+                        keyDown: false
+                    }
+                });
+            });
+            this._setEventListeners(selectElement, null, [
+                ["focus", "Focus"],
+                ["blur", "Blur"],
+                ["mousedown", "Mouse Down"],
+                ["mouseenter", "Mouse Enter"],
+                ["mouseleave", "Mouse Exit"],
+                ["mouseup", "Mouse Up"],
+                ["input", "Action"],
+                ["input", "Validate"]
+            ], event => event.target.value);
+        }
+        else {
+            selectElement.addEventListener("input", function () {
+                storage.setValue(id, { value: getValue(/* isExport */ true) });
+            });
+        }
+        if (this.data.combo) {
+            this._setTextStyle(selectElement);
+        }
+        else {
+            // Just use the default font size...
+            // it's a bit hard to guess what is a good size.
+        }
+        this._setBackgroundColor(selectElement);
+        this._setDefaultPropertiesFromJS(selectElement);
+        this.container.append(selectElement);
+        return this.container;
+    }
+}
 class PopupAnnotationElement extends AnnotationElement {
     // todo: props
     constructor(parameters) {
@@ -2679,7 +2694,7 @@ class AnnotationLayer {
             imageResourcesPath: params.imageResourcesPath || "",
             renderForms: params.renderForms !== false,
             svgFactory: new DOMSVGFactory(),
-            annotationStorage: params.annotationStorage,
+            annotationStorage: params.annotationStorage || new AnnotationStorage(),
             enableScripting: params.enableScripting === true,
             hasJSActions: params.hasJSActions,
             fieldObjects: params.fieldObjects,
@@ -2751,6 +2766,12 @@ class AnnotationLayer {
     getEditableAnnotation(id) {
         return __classPrivateFieldGet(this, _AnnotationLayer_editableAnnotations, "f").get(id);
     }
+    destroy() {
+        var _a, _b;
+        (_a = __classPrivateFieldGet(this, _AnnotationLayer_annotationCanvasMap, "f")) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = this.div) === null || _b === void 0 ? void 0 : _b.remove();
+        this.div = null;
+    }
 }
 _AnnotationLayer_accessibilityManager = new WeakMap(), _AnnotationLayer_annotationCanvasMap = new WeakMap(), _AnnotationLayer_editableAnnotations = new WeakMap(), _AnnotationLayer_instances = new WeakSet(), _AnnotationLayer_appendElement = function _AnnotationLayer_appendElement(element, id) {
     var _a;