# Class ViewerOptions

GcDocs PDF Viewer options class.

#### Hierarchy

- ViewerOptions

#####
Index

### Properties

allowModificationDateEdit
allowedTools
annotationDateTimeFormat
baseUrl
cMapPacked
cMapUrl
caret
coordinatesOrigin
coordinatesPrecision
customIcons
disableFeatures
disableHistory
disablePageLabels
documentListUrl
editorDefaults
enableXfa
externalLinkTarget
fieldsAppearance
file
formFiller
friendlyFileName
hideAnnotationPopups
hideAnnotationTypes
hidePopupTimestamp
ignoreInitialView
jsExecutionConfig
keepFileData
language
logLevel
maxCanvasPixels
navigation
newDocumentFileName
onBeforeCloseContextMenu
onBeforeOpenContextMenu
onInitialized
openParameters
pageDisplay
password
renderInteractiveForms
renderer
replyTool
requireTheme
restoreViewStateOnLoad
saveAsOptions
saveSettings
secondToolbar
sharing
shortcuts
showContextMenuOnSelection
signTool
snapAlignment
stamp
supportApi
tableDataExtraction
textMarkupContextMenu
theme
themes
undo
useCanvasForSelection
useFloatingSearchBar
useNativeContextMenu
userData
userName
workerSrc
zoomByMouseWheel
zoomOptions

## Properties

### `Optional` allowModificationDateEdit

allowModificationDateEdit?: boolean = false

Specifies whether the modification date of an annotation can be edited in the UI.

### Default

false

### Description

If set to `true`, the modification date field in the property grid UI will be editable. By default, it is set to `false`, making the modification date read-only.

### Example

    // Configure the Viewer to allow editing of the Modification Date in the Annotation Editor UI
    var viewer = new DsPdfViewer(selector, {
      allowModificationDateEdit: true
    });

### allowedTools

allowedTools: { annotationEditor?: string[] | "all" | "annotations" | "fields"; formEditor?: string[] | "all" | "annotations" | "fields"; viewer?: string[] | "all" | "annotations" | "fields" } = ...

Use this option to enable annotation tools from the form editor or field tools from the annotation editor.

### Default

    {
     annotationEditor: 'annotations',
           formEditor: 'fields'
    }

### Example

    viewer.options.allowedTools = { formEditor: 'all' };

#### Type declaration

- ##### `Optional` annotationEditor?: string[] | "all" | "annotations" | "fields"

- ##### `Optional` formEditor?: string[] | "all" | "annotations" | "fields"

- ##### `Optional` viewer?: string[] | "all" | "annotations" | "fields"

### `Optional` annotationDateTimeFormat

annotationDateTimeFormat?: string

Allows you to specify a custom format for displaying the date and time of annotations. By default, it uses a locale-based format. You can set your own format string (e.g., 'YYYY-MM-DD HH:mm:ss') to suit your preferences.

### Default

undefined

### Example

    // Example: set a custom date and time format:
    var viewer = new DsPdfViewer("#root", { annotationDateTimeFormat: 'YYYY-MM-DD HH:mm:ss' });

### `Optional` baseUrl

baseUrl?: string = ""

Used by form submission and for theme urls.

### Example

    var viewer = new DsPdfViewer("#root", { baseUrl: "http://localhost/mysite/" });

### `Optional` cMapPacked

cMapPacked?: boolean

Indicates if the viewer should look for a compressed version of the CMap file with the extension '.bin'.

### Default

true

### Example

    var viewer = new DsPdfViewer("#root", { cMapPacked: false } );

### `Optional` cMapUrl

cMapUrl?: string

The URI to a folder where the external font CMap tables are stored.

### Default

'resources/bcmaps/'

### Example

    var viewer = new DsPdfViewer("#root", { cMapUrl: "../data/cmaps/" } );

### `Optional` caret

caret?: boolean | { allowForPan: boolean; caretBlinkTime: number; caretStopBlinkTime: number; color: string; width: number } = ...

Text selection cursor settings.

### Description

    Settings description:
    caretBlinkTime - milliseconds, caret blink period
    caretStopBlinkTime - milliseconds, stop caret blink time, 0 - don't stop
    color - The caret color
    width - The caret width
    allowForPan - Allow to move caret using keys even when pan tool activated.

### Example

    // Hide the caret:
    var viewer = new DsPdfViewer("#root", { caret: false } );

### Example

    // Change the caret color and width:
    var viewer = new DsPdfViewer("#root", { caret: {"color": "#ff0000", "width": 2} } );

### `Optional` coordinatesOrigin

coordinatesOrigin?: "TopLeft" | "BottomLeft" = 'TopLeft'

Origin coordinates for the PDF page. The option is used for a properties panel of the Annotation and Form editor.

### Default

TopLeft

### Example

    // Change the coordinates origin to bottom/left point:
    var viewer = new DsPdfViewer("#root", { coordinatesOrigin: "BottomLeft" } );

### coordinatesPrecision

coordinatesPrecision: number

Annotation coordinates round precision. Used by the Annotation and Form editor.

### Default

1

### Example

    // Change the default rounding precision to 0.001:
    var viewer = new DsPdfViewer("#root", { coordinatesPrecision: 0.001 } );

### `Optional` customIcons

customIcons?: { [iconKey: string]: Element | string }

Use this option to change the default SVG icons to custom ones. Available icon keys: 'undo2', 'font-bold', 'font-italic', 'checkbox-checked', 'checkbox-unchecked', 'close', 'aspect-ratio', 'search', 'chevron', 'chevron-accent', 'animated-spinner', 'drag-handle', 'download', 'keyboard', 'brush', 'image', 'image-list', 'save', 'theme-change', 'single-page', 'continuous-view', 'view-mode', 'show-view-tools', 'show-edit-tools', 'show-form-editor', 'toggle-annotation-properties', 'toggle-form-properties', 'edit-converted-to-content', 'edit-free-text', 'edit-ink', 'edit-text', 'edit-square', 'edit-line', 'edit-link', 'edit-circle', 'edit-stamp', 'add-stamp-accent', 'edit-sign-tool', 'edit-file-attachment', 'edit-sound', 'edit-polyline', 'edit-polygon', 'edit-popup', 'edit-redact', 'edit-redact-apply', 'edit-redact-applied', 'edit-unknown-type', 'edit-widget-signature', 'edit-widget-tx-field', 'edit-widget-tx-text-area', 'edit-widget-tx-comb', 'edit-widget-tx-password', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-btn-submit', 'edit-widget-btn-reset', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-unknown-type', 'edit-undo', 'edit-redo', 'remove-attachment', 'edit-select', 'edit-erase', 'form-filler', 'field-invalid', 'new-document', 'new-page', 'delete-page', 'print', 'rotate', 'confirm-ok', 'confirm-cancel', 'open', 'open-pdf', 'text-selection', 'hide-annotations', 'pan', 'bookmarks', 'structure-tree', 'layers', 'thumbnails', 'articles', 'attachments', 'documents-list', 'share', 'shared-documents-list', 'view-mode-on', 'view-mode-off', 'edit-mode-on', 'edit-mode-off', 'remove-user', 'doc-properties', 'about', 'pdf-doc-title', 'close-icon-sm', 'menu-dots', 'comments-status-accepted', 'comments-status-cancelled', 'comments-status-completed', 'comments-status-rejected', 'context-copy', 'context-paste', 'context-cut', 'context-delete', 'move-to-top-page', 'move-to-bottom-page', 'arrow-expand-horizontal', 'arrow-expand-all', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', 'resize-handle-h'.

### Example

    var viewer = new DsPdfViewer(selector, {
      customIcons: {
        'open': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>',
        'search': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'
      }
    });

#### Type declaration

- ##### [iconKey: string]: Element | string

### `Optional` disableFeatures

disableFeatures?: ViewerFeatureName[]

Use the disableFeatures option to disable certain features of the DsPdfViewer depending on your company security policy. Note, you can specify the disableFeatures option only during the DsPdfViewer initialization.

### Example

    // Disable DragAndDrop operations, JavaScript actions, File and Sound attachments:
    var viewer = new DsPdfViewer("#root", { disableFeatures: ['DragAndDrop', 'JavaScript', 'AllAttachments'] } );

### Example

    // Disable DragAndDrop for the DsPdfViewer:
    var viewer = new DsPdfViewer(selector, {
      disableFeatures: ['DragAndDrop']
    });

### disableHistory

disableHistory: boolean

If set to true, disables browser history during navigation inside PDF document.

### Example

    var viewer = new DsPdfViewer(selector, {
      disableHistory: true
    });

### `Optional` disablePageLabels

disablePageLabels?: boolean = false

Set this option to true if you wish to disable page labels.

### Example

    var viewer = new DsPdfViewer("#root", { disablePageLabels: true } );

### documentListUrl

documentListUrl: string | DocumentListItem[] = "/documents"

URL to document list service used by DocumentListPanel (see addDocumentListPanel method). The service should return JSON string with available documents array, e.g.: [{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}] or ["pdf1.pdf", "pdf2.pdf"]

### Default

"/documents"

### Example

    // Load document list from external service:
    var viewer = new DsPdfViewer("#root", { documentListUrl: "documents.json" } );

Here is the content of the documents.json file:

    [
     {
       "path": "/sample1.pdf",
       "name": "Simple text",
       "title": "Sample 1"
     },
     {
       "path": "/sample2.pdf",
       "previewContent": "<b>Preview HTML content</b> goes here.",
       "title": "Sample 2"
     },
     {
       "path": "/sample3.pdf",
       "name": "Open sample3.pdf",
       "title": "Sample 3"
     }
    ]

### Example

    // Load document list using DATA URI:
    var viewer = new DsPdfViewer("#root", { documentListUrl: 'data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]' } );

### Example

    // Use predefined document list:
    var options = {};
    options.documentListUrl = [
      {
         path: "/sample1.pdf",
         name: "Open sample1.pdf",
         title: "Sample 1"
      },
      {
         path: "/sample2.pdf",
         name: "Open sample2.pdf",
         title: "Sample 2"
      },
      {
         path: "/sample3.pdf",
         name: "Open sample3.pdf",
         title: "Sample 3"
      }
    ];
    var viewer = new DsPdfViewer("#root", options);

### Example

    // Use predefined document list with custom preview content:
      var options = {};
      options.documentListUrl = [
      {
            path: "/sample1.pdf",
            title: "Sample 1",
            previewContent: `<div class="card" style="position: relative;">
      <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 17 24" style="position: absolute;top: 3px;left: 0px;"><path class="gc-icon-color--text" d="M15.429 3.429h-13.714v16.634l6.857-6.576 1.192 1.138 5.665 5.438v-16.634zM15.589 1.714c0.201 0 0.402 0.040 0.589 0.121 0.589 0.228 0.964 0.777 0.964 1.379v17.263c0 0.603-0.375 1.152-0.964 1.379-0.188 0.080-0.388 0.107-0.589 0.107-0.415 0-0.804-0.147-1.112-0.429l-5.906-5.679-5.906 5.679c-0.308 0.281-0.696 0.442-1.112 0.442-0.201 0-0.402-0.040-0.589-0.121-0.589-0.228-0.964-0.777-0.964-1.379v-17.263c0-0.603 0.375-1.152 0.964-1.379 0.188-0.080 0.388-0.121 0.589-0.121h14.036z"></path></svg><span style="padding-left: 10px; width: 100%; text-align: center;">Sample 1</span>
      </h2>
      <div class="container">
      <p>Long sample 1 description goes here.</p><div style="width: 100%;text-align: center;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" style="
          border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;
      ">
      <title>eye</title>
      <path d="M25 9.375c-10.904 0-20.356 6.35-25 15.625 4.644 9.275 14.096 15.625 25 15.625s20.355-6.35 25-15.625c-4.644-9.275-14.096-15.625-25-15.625zM37.327 17.661c2.938 1.874 5.427 4.383 7.297 7.339-1.87 2.955-4.359 5.465-7.297 7.339-3.691 2.354-7.954 3.599-12.327 3.599s-8.636-1.244-12.327-3.599c-2.937-1.874-5.427-4.383-7.296-7.339 1.87-2.955 4.359-5.465 7.297-7.339 0.191-0.122 0.385-0.24 0.579-0.356-0.486 1.334-0.752 2.775-0.752 4.277 0 6.903 5.596 12.5 12.5 12.5s12.5-5.597 12.5-12.5c0-1.503-0.266-2.943-0.752-4.277 0.194 0.116 0.388 0.234 0.579 0.357v0zM25 20.313c0 2.589-2.099 4.688-4.688 4.688s-4.688-2.099-4.688-4.688 2.099-4.688 4.688-4.688 4.688 2.099 4.688 4.688z"></path>
      </svg>
      <p></p></div>
      </div>
      </div>`
      },
      {
            path: "/sample2.pdf",
            title: "Sample 2",
            previewContent: `<div class="card" style="position: relative;">
      <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 17 24" style="position: absolute;top: 3px;left: 0px;"><path class="gc-icon-color--text" d="M15.429 3.429h-13.714v16.634l6.857-6.576 1.192 1.138 5.665 5.438v-16.634zM15.589 1.714c0.201 0 0.402 0.040 0.589 0.121 0.589 0.228 0.964 0.777 0.964 1.379v17.263c0 0.603-0.375 1.152-0.964 1.379-0.188 0.080-0.388 0.107-0.589 0.107-0.415 0-0.804-0.147-1.112-0.429l-5.906-5.679-5.906 5.679c-0.308 0.281-0.696 0.442-1.112 0.442-0.201 0-0.402-0.040-0.589-0.121-0.589-0.228-0.964-0.777-0.964-1.379v-17.263c0-0.603 0.375-1.152 0.964-1.379 0.188-0.080 0.388-0.121 0.589-0.121h14.036z"></path></svg><span style="padding-left: 10px;width: 100%;text-align: center;">Sample 2</span>
      </h2>
      <div class="container">
      <p>Long sample 2 description goes here.</p><div style="width: 100%;text-align: center;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" style="
          border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;">
      <title>eye</title>
      <path d="M25 9.375c-10.904 0-20.356 6.35-25 15.625 4.644 9.275 14.096 15.625 25 15.625s20.355-6.35 25-15.625c-4.644-9.275-14.096-15.625-25-15.625zM37.327 17.661c2.938 1.874 5.427 4.383 7.297 7.339-1.87 2.955-4.359 5.465-7.297 7.339-3.691 2.354-7.954 3.599-12.327 3.599s-8.636-1.244-12.327-3.599c-2.937-1.874-5.427-4.383-7.296-7.339 1.87-2.955 4.359-5.465 7.297-7.339 0.191-0.122 0.385-0.24 0.579-0.356-0.486 1.334-0.752 2.775-0.752 4.277 0 6.903 5.596 12.5 12.5 12.5s12.5-5.597 12.5-12.5c0-1.503-0.266-2.943-0.752-4.277 0.194 0.116 0.388 0.234 0.579 0.357v0zM25 20.313c0 2.589-2.099 4.688-4.688 4.688s-4.688-2.099-4.688-4.688 2.099-4.688 4.688-4.688 4.688 2.099 4.688 4.688z"></path>
      </svg>
      <p></p></div>
      </div>
      </div>`
         },
         {
            path: "/sample3.pdf",
            name: "Open sample3.pdf",
            title: "Sample 3 without custom preview content"
         }
      ];

      var viewer = new DsPdfViewer("#root", options);
      viewer.addDefaultPanels();
      const documentListPanelHandle = viewer.addDocumentListPanel();
      viewer.onAfterOpen.register(function() {
          viewer.leftSidebar.menu.panels.open(documentListPanelHandle.id);
      });

### editorDefaults

editorDefaults: { checkBoxButton?: Partial<ButtonWidget>; circleAnnotation?: Partial<CircleAnnotation>; combTextField?: Partial<TextWidget>; comboChoice?: Partial<ChoiceWidget>; dotHandleSize?: number; fileAttachmentAnnotation?: Partial<FileAttachmentAnnotation>; fontNames?: { name: string; value: string }[]; freeTextAnnotation?: Partial<FreeTextAnnotation>; hideFloatingBar?: boolean; highlightAnnotation?: Partial<HighlightAnnotation>; inkAnnotation?: Partial<InkAnnotation>; lastValueKeys?: string[]; lineAnnotation?: Partial<LineAnnotation>; linkAnnotation?: Partial<LinkAnnotation>; listBoxChoice?: Partial<ChoiceWidget>; moveHandleSize?: number; passwordField?: Partial<TextWidget>; polyLineAnnotation?: Partial<PolyLineAnnotation>; polygonAnnotation?: Partial<PolygonAnnotation>; popupAnnotation?: Partial<PopupAnnotation>; printResolution?: number; printSingleJobMode?: boolean; pushButton?: Partial<ButtonWidget>; radioButton?: Partial<ButtonWidget>; redactAnnotation?: Partial<RedactAnnotation>; rememberLastValues?: boolean; resetButton?: Partial<ButtonWidget>; resizeHandleSize?: number; richMediaAnnotation?: Partial<RichMediaAnnotation>; signatureField?: Partial<SignatureAnnotation>; soundAnnotation?: Partial<SoundAnnotation>; squareAnnotation?: Partial<SquareAnnotation>; squigglyAnnotation?: Partial<SquigglyAnnotation>; stampAnnotation?: Partial<StampAnnotation>; standardFontDataUrl?: string; stickyNote?: { color?: string; contents?: string }; strikeOutAnnotation?: Partial<StrikeOutAnnotation>; submitButton?: Partial<ButtonWidget>; textAnnotation?: Partial<TextAnnotation>; textArea?: Partial<TextWidget>; textField?: Partial<TextWidget>; underlineAnnotation?: Partial<UnderlineAnnotation> } = ...

Contains default values for a new annotations and fields.

### Example

    // Change the default sticky note and text annotation color to Red:
    var viewer = new DsPdfViewer("#root", {
         editorDefaults: {
           stickyNote: { color: "#ff0000" },
           textAnnotation: {color: "#ff0000" }
         },
         supportApi: 'api/pdf-viewer'
    });

### Example

    // Change the default square annotation appearance:
    var viewer = new DsPdfViewer("#root", {
         editorDefaults: {
           squareAnnotation:  {
              annotationType: 5, // AnnotationTypeCode.SQUARE
              subtype: "Square",
              borderStyle: { width: 5, style: 1, horizontalCornerRadius: 0, verticalCornerRadius: 0 },
              color: [0, 0, 0],
              interiorColor: [255, 0, 0],
            }
         },
         supportApi: 'api/pdf-viewer'
    });

#### Type declaration

- ##### `Optional` checkBoxButton?: Partial<ButtonWidget>

  Default properties for CheckBox button widget.

- ##### `Optional` circleAnnotation?: Partial<CircleAnnotation>

  Default properties for Circle annotation.

- ##### `Optional` combTextField?: Partial<TextWidget>

  Default properties for Comb Text field widget.

- ##### `Optional` comboChoice?: Partial<ChoiceWidget>

  Default properties for Combo choice widget.

- ##### `Optional` dotHandleSize?: number

  Dot handle size in pixels. Used for callout points.

  ### Default

  8

  ### Example

      var viewer = new DsPdfViewer("#root", {
          editorDefaults: {
              dotHandleSize: 20
          },
          supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
      });

- ##### `Optional` fileAttachmentAnnotation?: Partial<FileAttachmentAnnotation>

  Default properties for FileAttachment annotation.

- ##### `Optional` fontNames?: { name: string; value: string }[]

  Array of the available font names.

  ### Default

  [ { value: 'Helv', name: 'Helvetica' }, { value: 'HelveticaRegular', name: 'Helvetica-Oblique' }, { value: 'HelveticaBold', name: 'Helvetica-Bold' }, { value: 'HelveticaBoldItalic', name: 'Helvetica-BoldOblique' }, { value: 'TimesRegular', name: 'Times-Roman' }, { value: 'TimesItalic', name: 'Times-Italic' }, { value: 'TimesBold', name: 'Times-Bold' }, { value: 'TimesBoldItalic', name: 'Times-BoldItalic' }, { value: 'CourierRegular', name: 'Courier' }, { value: 'CourierItalic', name: 'Courier-Oblique' }, { value: 'CourierBold', name: 'Courier-Bold' }, { value: 'CourierBoldItalic', name: 'Courier-BoldOblique' }, { value: 'Symbol', name: 'Symbol' } ]

  ### Example

      var viewer = new DsPdfViewer("#root", {
          editorDefaults: { fontNames: [{value: 'Arial', name: 'Arial'}, {value: 'Verdana', name: 'Verdana'}] },
          supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
      });

- ##### `Optional` freeTextAnnotation?: Partial<FreeTextAnnotation>

  Default properties for FreeText annotation.

- ##### `Optional` hideFloatingBar?: boolean

  Set this setting to true if you do not want to display an additional floating bar for editor mode.

  ### Example

      var viewer = new DsPdfViewer("#root", {
          editorDefaults: { hideFloatingBar: true },
          supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
      });

- ##### `Optional` highlightAnnotation?: Partial<HighlightAnnotation>

  Default properties for Highlight annotation.

- ##### `Optional` inkAnnotation?: Partial<InkAnnotation>

  Default properties for Ink annotation.

- ##### `Optional` lastValueKeys?: string[]

  Determines which annotation properties should persist during editing operations.

  ### Remarks

  When enabled, these property values will be remembered and automatically applied:

  - When creating new annotations of the same type
  - When adding form widgets
  - During subsequent editing sessions

  This creates a consistent editing experience by maintaining property values between annotation actions.

  ### Default Value

      [
        "appearanceColor", "borderStyle", "color", "interiorColor",
        "backgroundColor", "borderColor", "opacity", "textAlignment",
        "printableFlag", "open", "lineStart", "lineEnd",
        "markBorderColor", "markFillColor", "overlayFillColor",
        "overlayText", "overlayTextJustification", "newWindow",
        "calloutLineEnd", "fontSize", "fontName", "name",
        "readOnly", "required", "hasEditFlag"
      ]

  ### Example

  Remember only the borderStyle property:

      const viewer = new DsPdfViewer("#root", {
        editorDefaults: {
          rememberLastValues: true,
          lastValueKeys: ["borderStyle"]
        }
      });

- ##### `Optional` lineAnnotation?: Partial<LineAnnotation>

  Default properties for Line annotation.

- ##### `Optional` linkAnnotation?: Partial<LinkAnnotation>

  Default properties for Link annotation.

- ##### `Optional` listBoxChoice?: Partial<ChoiceWidget>

  Default properties for ListBox choice widget.

- ##### `Optional` moveHandleSize?: number

  Move handle size in pixels.

  ### Default

  14

  ### Example

      var viewer = new DsPdfViewer("#root", {
          editorDefaults: {
              moveHandleSize: 40
          },
          supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
      });

- ##### `Optional` passwordField?: Partial<TextWidget>

  Default properties for Password field widget.

- ##### `Optional` polyLineAnnotation?: Partial<PolyLineAnnotation>

  Default properties for PolyLine annotation.

- ##### `Optional` polygonAnnotation?: Partial<PolygonAnnotation>

  Default properties for Polygon annotation.

- ##### `Optional` popupAnnotation?: Partial<PopupAnnotation>

  Default properties for Popup annotation.

- ##### `Optional` printResolution?: number

  The `printResolution` option specifies the resolution (in dots per inch - DPI) used for printing PDF documents. It determines the quality and detail of the rendered images during the printing process. Higher DPI values produce sharper and more detailed printed output but may also increase memory usage and rendering time.

  ### Default

  150 - If not specified, the default resolution is 150 DPI.

  ### Example

      // Example: Set the print resolution to 300 DPI
      var viewer = new DsPdfViewer("#root", {
          printResolution: 300
      });

- ##### `Optional` printSingleJobMode?: boolean

  The `printSingleJobMode` option controls whether all pages are printed as a single print job, regardless of their individual orientation. When set to `true`, the viewer sends all pages as a single print task, which may cause pages with different orientations to be printed incorrectly. When set to `false` (the default), pages with different orientations are printed separately to preserve their intended layout.

  ### Default

  false

  ### Example

      // Example: Enable single print job mode to force all pages to be printed together
      var viewer = new DsPdfViewer("#root", {
          printSingleJobMode: true
      });

- ##### `Optional` pushButton?: Partial<ButtonWidget>

  Default properties for Push button widget.

- ##### `Optional` radioButton?: Partial<ButtonWidget>

  Default properties for Radio button widget.

- ##### `Optional` redactAnnotation?: Partial<RedactAnnotation>

  Default properties for Redact annotation.

- ##### `Optional` rememberLastValues?: boolean

  When the rememberLastValues setting is set to true (or undefined), the last used property values will be used as default values for new annotations.

  ### Default

  undefined

  ### Example

      // Do not use the last used property values as defaults:
      var viewer = new DsPdfViewer("#root", { editorDefaults: { rememberLastValues: false } });

- ##### `Optional` resetButton?: Partial<ButtonWidget>

  Default properties for Reset button widget.

- ##### `Optional` resizeHandleSize?: number

  Resize handle size in pixels.

  ### Default

  8

  ### Example

      var viewer = new DsPdfViewer("#root", {
          editorDefaults: {
              resizeHandleSize: 20,
              moveHandleSize: 40
          },
          supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
      });

- ##### `Optional` richMediaAnnotation?: Partial<RichMediaAnnotation>

  Default properties for Rich Media annotation.

- ##### `Optional` signatureField?: Partial<SignatureAnnotation>

  Default properties for Signature field widget.

- ##### `Optional` soundAnnotation?: Partial<SoundAnnotation>

  Default properties for Sound annotation.

- ##### `Optional` squareAnnotation?: Partial<SquareAnnotation>

  Default properties for Square annotation.

- ##### `Optional` squigglyAnnotation?: Partial<SquigglyAnnotation>

  Default properties for Squiggly annotation.

- ##### `Optional` stampAnnotation?: Partial<StampAnnotation>

  Default properties for Stamp annotation.

- ##### `Optional` standardFontDataUrl?: string

  The URL where the standard font files are located. Include the trailing slash.

  ### Example

       // Example with relative URL:
       var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "resources/standard_fonts/" });

       // Example with absolute URL:
       var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "http://localhost:8080/resources/standard_fonts/" });

- ##### `Optional` stickyNote?: { color?: string; contents?: string }

  Default properties for Sticky note.

  - ##### `Optional` color?: string

  - ##### `Optional` contents?: string

- ##### `Optional` strikeOutAnnotation?: Partial<StrikeOutAnnotation>

  Default properties for StrikeOut annotation.

- ##### `Optional` submitButton?: Partial<ButtonWidget>

  Default properties for Submit button widget.

- ##### `Optional` textAnnotation?: Partial<TextAnnotation>

  Default properties for Text annotation.

- ##### `Optional` textArea?: Partial<TextWidget>

  Default properties for TextArea widget.

- ##### `Optional` textField?: Partial<TextWidget>

  Default properties for Text field widget.

- ##### `Optional` underlineAnnotation?: Partial<UnderlineAnnotation>

  Default properties for Underline annotation.

### `Optional` enableXfa

enableXfa?: boolean = true

Render dynamic Xfa forms if any.

### Default

The default value is true.

### Example

    // Turn off XFA forms rendering.
    var viewer = new DsPdfViewer(selector, { enableXfa: false });

### `Optional` externalLinkTarget

externalLinkTarget?: "none" | "top" | "blank" | "self" | "parent"

The externalLinkTarget option sets the value of the target attribute of a link annotation. The externalLinkTarget option specifies where to open the linked document. Possible values are: 'blank', 'self', 'parent', 'top', 'none'.

### Default

'none'

### Example

    var viewer = new DsPdfViewer("#root", { externalLinkTarget: "blank" } );

### fieldsAppearance

fieldsAppearance: { checkBoxButton?: FieldAppearanceRenderingType; pushButton?: FieldAppearanceRenderingType; radioButton?: FieldAppearanceRenderingType } = ...

Form fields appearance rendering settings. Use this option to customize a specific rendering type for the appearance of form fields. Available appearance rendering types:

- "Custom" - Default. The custom appearance has some improvements over the web appearance, for example you can specify background / border colors.
- "Web" - Standard form field appearance using platform-native styling. See https://developer.mozilla.org/en-US/docs/Web/CSS/appearance for details.
- "Predefined" - Predefined appearance stream from PDF when available, if appearance stream is not available, custom appearance will be used.

### Example

    // Use standard form field appearance using platform-native styling for radio, checkbox and push buttons.
    var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Web", checkBoxButton: "Web", pushButton: "Web" } });

### Example

    // Use predefined appearance stream from PDF when available:
    var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Predefined", checkBoxButton: "Predefined", pushButton: "Predefined" } });

#### Type declaration

- ##### `Optional` checkBoxButton?: FieldAppearanceRenderingType

  Check-box button appearance rendering type.

- ##### `Optional` pushButton?: FieldAppearanceRenderingType

  Push button appearance rendering type.

- ##### `Optional` radioButton?: FieldAppearanceRenderingType

  Radio button appearance rendering type.

### `Optional` file

file?: any = ""

Specifies the PDF file name, URL, or binary data to be loaded in the Viewer.

### Example

    var viewer = new DsPdfViewer("#root", { file: 'GcPdf.pdf' } );

### `Optional` formFiller

formFiller?: FormFillerSettings

Form filler dialog settings.

### Example

    var formFiller = {
       mapping: {
           'UserNameField1': {
               title: 'User Name',
               displayname: 'username',
               placeholder: 'Enter here...',
               validateoninput: true,
               validator: function(fieldValue, field) {
                   if(fieldValue.length >= 3)
                       return true;
                   else
                       return 'username must be at least 3 characters';
               }
           },
           'fld2': { hidden: true },
           'Country Combo Box': {
               displayname: 'Country',
               required: true
            },
           'fld3': { displayName: 'First name!',
               title: 'Please enter your first name.',
               rowCustomCSS: 'given-name-row'
            }
       }
    };
    var viewer = new DsPdfViewer('#root', { formFiller: formFiller });
    viewer.addDefaultPanels();

### Example

    var viewer = new DsPdfViewer(selector, {
         renderInteractiveForms: true,
         formFiller: {
             validator: function(val) {return (val ? null : 'The field cannot be empty'); }
         }
    });

### `Optional` friendlyFileName

friendlyFileName?: string = ""

Used when file name not available.

### Example

    viewer.options.friendlyFileName = "myFileName.pdf";
    viewer.applyOptions();

### `Optional` hideAnnotationPopups

hideAnnotationPopups?: boolean | "None" | AnnotationTypeName | "All"

Use this option if you want to hide annotation popups. Possible values are:

- ['Text', 'Link', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine',
  'Ink', 'Popup', 'FileAttachment', 'Sound', 'Redact', 'Stamp']
- true (to hide popups for all annotations)
- 'All' (same behavior as true)
- 'None' (to show all popups)

### Default

undefined

### Example

    // Example: hide popups for all annotations
    var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: true });

    // Example: hide popups for specific annotation types (Redact, Circle, and Square)
    var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: ["Redact", "Circle", "Square"] });

    // Example: show all annotation popups
    var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: 'None' });

### `Optional` hideAnnotationTypes

hideAnnotationTypes?: boolean | "None" | "All" | AnnotationTypeName[] = ...

Specifies annotation types which will be hidden when 'hide-annotations' button is checked. Possible values are: ['Text', 'Link', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'FileAttachment', 'Sound', 'ThreadBead', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'] or true or 'All' (true and 'All' have the same behavior).

### Default

['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'];

### Example

    // Hide all possible annotations.
    let options = { hideAnnotationTypes: 'All' };

### Example

    // Hide Push button and Redact annotations only.
    let options = { hideAnnotationTypes: ['PushButton', 'Redact'] };

### `Optional` hidePopupTimestamp

hidePopupTimestamp?: boolean

Set this option to hide the timestamp in annotation popups.

### Default

false

### Example

    // Example: hide timestamps in annotation popups
    var viewer = new DsPdfViewer("#root", { hidePopupTimestamp: true });

### `Optional` ignoreInitialView

ignoreInitialView?: boolean = false

Set this option to true if you wish to disable initial view settings specified in a PDF document.

### Default

false

### Example

    var viewer = new DsPdfViewer("#root", { ignoreInitialView: true } );

### `Optional` jsExecutionConfig

jsExecutionConfig?: JsExecutionConfig

Optional JS actions execution configuration.

### Example

Execute long operation before JS execution and repaint visible pages after JS execution.

    viewer.options.jsExecutionConfig = {
      before: function() {
          // Returned promise will be awaited before further JS execution.
          return new Promise(function(resolve) {
                 setTimeout(resolve, 1000);
          });
      },
      after: function() {
          viewer.repaint();
      }
    }

### Example

Adjust jsCode before execution

    viewer.options.jsExecutionConfig = {
      before: function(args) {
          args.jsCode = args.jsCode.replace("app.alert", "app.showMessage");
      },
    }

### Example

Cancel JS execution

    viewer.options.jsExecutionConfig = {
      before: function(args) {
          args.cancel = true;
      },
    }

### keepFileData

keepFileData: boolean = false

Set this option to true if you want to use the fileData property even if the document cannot be parsed as a valid PDF document.

### Example

    // Below is an example of how to display invalid file data when an error occurs:
    var viewer = new DsPdfViewer('#root', { keepFileData: true });
    viewer.onError.register(function(eventArgs) {
      var message = eventArgs.message;
      if (message.indexOf("Invalid PDF structure") !== -1) {
        console.log('Unable to load pdf document, pdf document is broken.');
        console.log("File data:");
        // Output file data to console:
        console.log(viewer.fileData);
      } else {
        console.log('Unexpected error: ' + message);
      }
    });
    viewer.open('sample.pdf');

### `Optional` language

language?: string

User interface language. Note, in order to use the language option, you must specify the language option value during the viewer initialization phase.

### Example

    // Set UI language to Japanese:
    var viewer = new DsPdfViewer(selector, { language: 'ja' });
    viewer.addDefaultPanels();

### Example

    function loadPdfViewer(selector) {
      // Define custom translations:
      var myTranslations = {
            "toolbar": {
                "open-document": "Open MY document",
                "pan": "My Pan tool",
            }
       };
       // Initialize translations:
       DsPdfViewer.i18n.init({
         resources: { myLang: { translation: myTranslations } }
       }).then(function(t) {
         // Translations initialized and ready to go.
         // Now create PDF viewer:
         var viewer = new DsPdfViewer(selector, { language: 'myLang' });
         viewer.addDefaultPanels();
         //viewer.open("sample.pdf");
       });
    }
    loadPdfViewer('#root');

### `Optional` logLevel

logLevel?: LogLevel

The logging level used for persistent connections using signalr client. Note that the ASP .NET version of the signalr client supports only 'Trace' log level.

### Example

Turn on logging.

    var viewer = new DsPdfViewer('#root', { logLevel: 'Trace' } );

### `Optional` maxCanvasPixels

maxCanvasPixels?: number

The maximum supported canvas size in total pixels, i.e. width * height. When the canvas scaling exceeds the maxCanvasPixels option, the CSS scaling will be used instead of re-rendering page to the canvas.

### Default

The default value for PC/Mac is 4096 * 4096 = 16777216 (16 mega-pixels). The default value for iOS/Android is 2560 x 2048 = 5242880 (5 mega-pixels).

### `Optional` navigation

navigation?: NavigationControlOptions

Configuration options for the PDF viewer's navigation toolbar component.

### Remarks

Provides fine-grained control over the navigation controls in the PDF viewer toolbar, allowing customization of which buttons appear and their behavior. The navigation controls include page navigation buttons and page number display/input.

### Example

Basic usage showing only previous/next buttons:

    var viewer = new DsPdfViewer("#root", {
      navigation: {
        showFirstButton: false,
        showLastButton: false,
        showPageInput: false
      }
    });

### Example

Custom page input width and format:

    var viewer = new DsPdfViewer("#root", {
      navigation: {
        pageInputWidth: 100,
        pageCounterFormat: "Page {{current}} of {{total}}",
        showFirstButton: true,
        showLastButton: true
      }
    });

### Example

Complete configuration with all options:

    var viewer = new DsPdfViewer("#root", {
      navigation: {
        showFirstButton: true,      // Show first page button
        showPrevButton: true,       // Show previous page button
        showPageInput: true,        // Show page number input
        showNextButton: true,       // Show next page button
        showLastButton: true,       // Show last page button
        pageInputWidth: 90,         // Width of page input in pixels
        pageCounterFormat: "{{current}}/{{total}}" // Custom page counter format
      }
    });

### See

NavigationControlOptions for the complete interface definition.

### `Optional` newDocumentFileName

newDocumentFileName?: string = "new-document.pdf"

Specifies the default file name to be used when creating a new document within the viewer. This option is different from `friendlyFileName` as it specifically sets the name for newly created documents, rather than naming an existing document.

### Default

"new-document.pdf"

### Example

    // Initialize the viewer with a custom file name for new documents
    var viewer = new DsPdfViewer("#root", { newDocumentFileName: "sample.pdf" });

### `Optional` onBeforeCloseContextMenu

onBeforeCloseContextMenu?: Function

This function will be called when context menu is about to be hidden. Return false if you want to prevent close context menu action.

### Default

undefined

### Example

    viewer.options.onBeforeCloseContextMenu = function(e) {
      console.log("The context menu will be closed soon.");
      return true;
    };

### Default

undefined

### Example

    viewer.options.onBeforeCloseContextMenu = function(e) {
      if(!confirm("Do you want to close context menu?")) {
          console.log("The context menu will not be closed.");
          return false;
      }
      console.log("The context menu will be closed.");
      return true;
    };

### `Optional` onBeforeOpenContextMenu

onBeforeOpenContextMenu?: Function

This function will be called when context menu is about to be shown. You can use this function to customize context menu. Return false if you want to prevent open context menu action.

### Default

undefined

### Example

     // This code shows how to modify the context menu and
     // add search using Google and Bing search engines:
     viewer.options.onBeforeOpenContextMenu = function (items, mousePosition, viewer) {
      var selectedText = viewer.getSelectedText();
      if (selectedText) {
        // Remove existent items:
        items.splice(0, items.length);
        // Add own menu items:
        items.push({
           type: 'button',
           text: 'Search using Google',
           onClick: function () {
                 window.open('http://www.google.com/search?q=' + encodeURI(selectedText), '_blank');
           }
        });
        items.push({
           type: 'button',
           text: 'Search using Bing',
           onClick: function () {
               window.open('https://www.bing.com/search?q=' + encodeURI(selectedText), '_blank');
          }
        });
       }
       return true;
     };

### `Optional` onInitialized

onInitialized?: ((viewer: any) => void)

#### Type declaration

- - (viewer: any): void

  - The onInitialized handler will be called immediately after the viewer is instantiated.

    ### Example

        var viewer = new DsPdfViewer("#root", {
          onInitialized: (viewer)=> {
             // put viewer initialization code here.
          }
        });

    #### Parameters

    - ##### viewer: any

    #### Returns void

### `Optional` openParameters

openParameters?: OpenParameters

Parameters object used by the "open" method.

### Example

    // Include Basic Authentication headers:
    var viewer = new DsPdfViewer('#root', {
      openParameters: {
        headers: {
           "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
           "CustomHeader": "Custom header value"
        }
      }
    });

### Example

Example of initializing the PDF viewer with stream loading disabled. This forces the PDF to load entirely at once instead of using Range requests (chunked loading). Useful if the server does not support partial content (206) or for debugging.

    // Create a new PDF viewer instance bound to the DOM element with ID 'root'
    var viewer = new DsPdfViewer('#root', {
      // Viewer configuration options
      openParameters: {
        // Disables streaming behavior - loads the entire PDF in one request
        disableStream: true // Set to 'false' to enable Range requests (default)
      }
    });

### `Optional` pageDisplay

pageDisplay?: PageDisplayType

Page display type.

### Example

    // Example: Switch the page display mode to "TwoPage".
    var viewer = new DsPdfViewer("#root", {
      pageDisplay: "TwoPage"
    });

### password

password: string = ""

A predefined password for protected pdf documents.

### Example

    viewer.options.password = "abc123";
    viewer.open("protected.pdf");

### renderInteractiveForms

renderInteractiveForms: boolean = true

Render interactive form elements.

### Example

    // Do not render interactive form:
    var viewer = new DsPdfViewer("#root", { renderInteractiveForms: false } );

### renderer

renderer: "canvas" | "svg" = 'canvas'

PDF document renderer type - canvas or svg.

### Example

    var viewer = new DsPdfViewer("#root", { renderer: "svg" } );

### `Optional` replyTool

replyTool?: ReplyToolSettings

The Reply Tool settings.

### Default

Default settings are:

- readOnly: false,
- allowAddNote: true,
- allowChangeUserName: true,
- allowAddReply: true,
- allowDelete: true,
- allowStatus: true,
- allowChangeOtherUser: true,
- allowDeleteOtherUser: true,
- allowStatusOtherUser: true,
- allowAddReplyOtherUser: true

     // Prevent changing or deleting another user's comments:
     var viewer = new DsPdfViewer('#root', { replyTool: {  allowChangeOtherUser: false,
                                                           allowDeleteOtherUser: false },
                                             userName: 'John', supportApi: 'api/pdf-viewer' });
     viewer.addReplyTool('expanded');

### Example

    // Disallow change author name (allowChangeUserName is false)
    // and disallow add changes to comments of other users (allowChangeOtherUser is false):
    var viewer = new DsPdfViewer('#root', { replyTool: { allowChangeOtherUser: false,
                                            allowChangeUserName: false },
                                            userName: 'John', supportApi: 'api/pdf-viewer' });
    viewer.addReplyTool('expanded');

### Example

    // Add read-only reply tool:
    var viewer = new DsPdfViewer('#root', {
       replyTool: { readOnly: true },
       userName: 'John',
       supportApi: 'api/pdf-viewer' });
    viewer.addReplyTool('expanded');

### Example

    // Hide "Add Sticky Note" item from context menu:
    var viewer = new DsPdfViewer('#root', { replyTool: {  allowAddNote: false },
                                            userName: 'John', supportApi: 'api/pdf-viewer' });
    viewer.addReplyTool();

### `Optional` requireTheme

requireTheme?: null | "themes/dark-yellow" | "light" | "dark" | "viewer" | "light-blue" | "gc-blue"

Use the requireTheme option to apply built-in CSS theme, the option will inject theme styles directly into the page head. Note, only known built-in theme can be specified, otherwise the viewer will fail. Available built-in themes: "viewer", "dark", "dark-yellow", "gc-blue", "light", "light-blue". This option takes precedence over the "theme" option which can be used to specify custom theme.

### Example

    var viewer = new DsPdfViewer(selector, {
      *   requireTheme: "light"
    });

### `Optional` restoreViewStateOnLoad

restoreViewStateOnLoad?: boolean | { trackFile?: boolean; trackFullScreen?: boolean; trackMouseMode?: boolean; trackPageRotation?: boolean; trackScale?: boolean; trackSidebar?: boolean; trackSidebarWidth?: boolean; trackTheme?: boolean; trackViewMode?: boolean } = ...

Track view changes and restore previous state on next page load. Note for trackFile - we are tracking opened file only when you open document using URI, not binary data.

### Default

    {
        trackViewMode: true, trackMouseMode: true, trackScale: true, trackSidebar: true, trackSidebarWidth: true,
        trackPageRotation: false, trackFullScreen: false, trackTheme: false, trackFile: false,
    };

### Example

    // disable tracking view changes:
    var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: false } );

### Example

    // Track only scale (zoom):
    var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: { trackScale: true } });

### `Optional` saveAsOptions

saveAsOptions?: SaveAsFormat | SaveAsOptions

"Save As" dropdown button options.

### Example

    // Limit the save as options available in the dropdown menu to "PDF" and "PNG".
    var viewer = new DsPdfViewer("#root", { saveAsOptions: { availableFormats: ["PDF", "PNG"] } });

    // Show the "Save As" button dropdown with default available formats.
    var viewer = new DsPdfViewer("#root", { saveAsOptions: { showSaveAsButton: true } });

    // Hide the "Save As" dropdown button.
    var viewer = new DsPdfViewer("#root", { saveAsOptions: { showSaveAsButton: false } });

### saveSettings

saveSettings: SaveSettings

Default viewer's save settings, used when user clicks the Save button.

### Example

    // Save the document in PDF format with a custom progress message.
    var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PDF", progressMessage: "Saving PDF..." } });

    // Save only the first three pages of the document in PNG format.
    var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PNG", pages: "0-2" } });

    // Save the document with a signature and reload it in the viewer.
    var viewer = new DsPdfViewer("#root", { saveSettings: { sign: { ...signatureDetails }, reload: true } });

    // Save the document with a zoom factor of 2.0 when saving as PNG.
    var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PNG", zoomFactor: 2.0 } });

    // Save the document in linearized PDF format for fast web viewing.
    var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PDF", saveMode: "Linearized" } });

### `Optional` secondToolbar

secondToolbar?: { render?: ((toolbarKey: string) => null | any[]) }

Second toolbar options.

### Example

    // Create custom second toolbar with key "custom-toolbar-key":
    var React = viewer.getType("React");
    var toolbarControls =[React.createElement("label", null, "Custom toolbar"),
    React.createElement("button", { onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
    // Register custom second toolbar for key "custom-toolbar-key":
    viewer.options.secondToolbar = {
      render: function(toolbarKey) {
        if(toolbarKey === "custom-toolbar-key")
          return toolbarControls;
        return null;
      }
    };
    // Show custom second toolbar:
    viewer.showSecondToolbar("custom-toolbar-key");

#### Type declaration

- ##### `Optional` render?: ((toolbarKey: string) => null | any[])

  - - (toolbarKey: string): null | any[]

    - Handler method which can be used to render custom second toolbar controls. The method should return array of the JSX.Element controls or null.

      #### Parameters

      - ##### toolbarKey: string

      #### Returns null | any[]

### `Optional` sharing

sharing?: { disallowUnknownUsers?: boolean; knownUserNames?: string[]; presenceColors?: { [userName: string]: string }; presenceMode: boolean | "on" | "off" | "others" }

Document's sharing settings. The sharing is used only when the document is open in collaboration mode using the Share dialog box or from the Shared documents panel.

### Example

    // Disallow user names unknown to the server:
    var viewer = new DsPdfViewer("#root", { sharing: { disallowUnknownUsers: true }, supportApi: "api/pdf-viewer" } );

### Example

    // Specify known user names, and disallow other user names:
    var viewer = new DsPdfViewer("#root", {
         sharing: {
             knownUserNames: ["Jaime Smith", "Jane Smith"],
             disallowUnknownUsers: true,
         },
         supportApi: "api/pdf-viewer"
    });

#### Type declaration

- ##### `Optional` disallowUnknownUsers?: boolean

  Prevent sharing the document with users which are not known by the Server Api or not specified in the knownUserNames setting.

  ### Default

  false

- ##### `Optional` knownUserNames?: string[]

  Known user names. If specified, these user names will appear as suggestions in the Sharing dialog, otherwise the Sharing dialog will display the user names loaded from the Support Api.

- ##### `Optional` presenceColors?: { [userName: string]: string }

  If specified, these colors will be used as color for presence indicators. key - user name, value = color.

  ### Example

      var viewer = new DsPdfViewer("#root", {
           sharing: {
               knownUserNames: ['Jame Smith', 'Lisa'],
               presenceColors: { 'Anonymous': '#999999', 'Jame Smith': 'red',  'Lisa': 'blue' }
           },
           supportApi: "api/pdf-viewer"
      });

  - ##### [userName: string]: string

- ##### presenceMode: boolean | "on" | "off" | "others"

  Determines the type of presence for collaboration users.

  - 'on' - the presence of all users, including the active one, will be shown.
  - 'others' - all users except the active user will be shown.
  - 'off' - presence will not be shown.

  ### Default

  'on'

  ### Example

      // Change presence mode to 'others':
      var viewer = new DsPdfViewer("#root", {
           sharing: {
               presenceMode: 'others'
           },
           supportApi: "api/pdf-viewer"
      });

  ### Example

      // Turn off presence indicators:
      var viewer = new DsPdfViewer("#root", {
           sharing: {
               presenceMode: 'off'
           },
           supportApi: "api/pdf-viewer"
      });

### shortcuts

shortcuts: { [keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[] } = ...

Keyboard shortcut definitions. Available built-in action tools: "zoomin" | "zoomout" | "zoom_pagesize" | "zoom_clientsize" | "select_all" | "rotate" | "pan" | "holdToPan" | "selection" | "open" | "search" | "print" | "move_caret_left" | "move_caret_right" | "move_caret_up" | "move_caret_down" | "move_caret_document_start" | "move_caret_document_end" | "move_caret_sequence_start" | "move_caret_sequence_end" | "confirm-ok" | "confirm-cancel" | "scrollUp" | "scrollDown".

### Example

Override keyboard shortcut "Ctrl +"

    var viewer = new DsPdfViewer("#root", {
      shortcuts: {
        107: {
          ctrl: true,
          tool: function(event) {
              DsPdfViewer.findControl("#root").zoomValue += 10;
              event.preventDefault();
          }
        }
      }
    });

### Example

Remove all default shortcuts

    var viewer = new DsPdfViewer("#root");
    viewer.options.shortcuts = {};

### Example

Disable grab when space is pressed

    viewer.options.shortcuts["32"] = () => { };

### Example

Redefine and disable Ctrl+Z. Ctrl+Y

    var viewer = new DsPdfViewer("#viewer", {
      shortcuts: {
           "Z": {
             ctrl: true,
             tool: function(e) { }
           },
        "Y": {
             ctrl: true,
             tool: function(e) { }
           }
      }
    });

### Example

Bind the "P" shortcut to the holdToPan action, leave the Ctrl+P shortcut for the "print" action

    viewer.options.shortcuts["P"] = [{ ctrl: true, tool: "print" }, { tool: "holdToPan" }];

### Example

Create custom shortcut

    viewer.options.shortcuts["E"] = {
      ctrl: true,
      alt: true,
      tool: function(e) { alert("Ctrl+Alt+E pressed."); }
    };

#### Type declaration

- ##### [keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[]

### `Optional` showContextMenuOnSelection

showContextMenuOnSelection?: boolean | "Auto" | "On" | "Off" = "Auto"

Controls the display of the context menu when text is selected.

- "Auto": Automatically determines whether to show the context menu based on the device type.
- "On": Always show the context menu when text is selected.
- "Off": Never show the context menu when text is selected. Default value is "Auto". On systems with mice, "Auto" behaves like "Off". On small devices (phones, tablets) without mice, "Auto" behaves like "On".

### Example

    // Configure the viewer to always show the context menu when text is selected
    var viewer = new DsPdfViewer(selector, {
      showContextMenuOnSelection: "On"
    });

### Example

    // Configure the viewer to never show the context menu when text is selected
    var viewer = new DsPdfViewer(selector, {
      showContextMenuOnSelection: "Off"
    });

### `Optional` signTool

signTool?: SignToolSettings

Configuration options for the signature tool. Allows customizing the appearance and behavior of the signing tool.

### Example

    var viewer = new DsPdfViewer(selector, {
         signTool: {
             title: 'Sign document', // Custom title for the signature tool
             penColor: '#ff0000', // Color of the signature pen
             penWidth: 5 // Thickness of the signature stroke
         }
    });

### snapAlignment

snapAlignment: boolean | { center: boolean | { horizontal: boolean; vertical: boolean }; margin: number | boolean | { horizontal: number | boolean; vertical: number | boolean }; tolerance: number | { horizontal: number | false; vertical: number | false } }

The Snap Alignment feature customization settings. The tolerance setting is the distance between the edges of two objects within which the object that is being moved or resized snaps to the other object. Margin is the extra space before or after the edge of a field or page. The margin setting is the distance from the target object to which the edge of the object being moved or resized snaps. The center setting allows to snap objects to centers of other objects (in addition to edges).

### Default

    { snapAlignment: true }
    By default, snap tolerance is 5pt,
    snap margin between objects and page edges is 10pt,
    snap to center is true.

### Example

    // Enable vertical snap margin:
    var viewer = new DsPdfViewer("#root", { snapAlignment: { margin: { vertical: 10, horizontal: false} }, supportApi: 'api/pdf-viewer'});

### Example

    // Change tolerance and snap margins:
    viewer.options.snapAlignment = { tolerance: 5, margin: 20  };

### stamp

stamp: { dpi?: number; selectedImageUrl?: string; stampCategories?: boolean | StampCategory[] }

Use the stamp option to configure Stamp button settings.

### Default

undefined

### Example

    // Specify your own set of predefined stamps.
    var viewer = new DsPdfViewer("#root", {
      stamp: {
        stampCategories: [
               { name: 'Nature', stampImageUrls: ['http://localhost:8080/150/160/nature.png', 'http://localhost:8080/250/140/nature.png', 'http://localhost:8080/250/150/nature.png'] },
               { name: 'Nature 2', stampImageUrls: ['http://localhost:8080/170/150/nature.png', 'http://localhost:8080/210/130/nature.png', 'http://localhost:8080/250/120/nature.png'] }
        ]
      }
    });

### Example

    // Disable predefined stamps drop-down.
    var viewer = new DsPdfViewer("#root", {
      stamp: {
        stampCategories: false
      }
    });

#### Type declaration

- ##### `Optional` dpi?: number

  Optional. Default image resolution(DPI) for stamp images without DPI.

- ##### `Optional` selectedImageUrl?: string

  Optional. Selected image url.

- ##### `Optional` stampCategories?: boolean | StampCategory[]

  Stamp categories.

### `Optional` supportApi

supportApi?: string | SupportApiSettings

URL to an external Web API service which will be used to enable PDF editing features.

### Example

    var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );

### Example

Turn on debug logging for persistent connections.

    var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer', logLevel: 'Debug' } );

### `Optional` tableDataExtraction

tableDataExtraction?: TableDataExtractionSettings

Configuration settings for table data extraction.
Defines options for extraction behavior, UI customization, and export formats.

### `Optional` textMarkupContextMenu

textMarkupContextMenu?: false | TextMarkupContextMenuSettings

Configuration options for the text markup context sub-menu.

### Example

    // Disable the text markup context sub-menu:
    var viewer = new DsPdfViewer(selector, {
      textMarkupContextMenu: false
    });

### Example

    // Customize the available colors in the text markup context menu:
    var viewer = new DsPdfViewer(selector, {
      textMarkupContextMenu: {
        colors: [
          { value: "#ff0000", displayName: "Red" },
          { value: "#000000", displayName: "Black" }
        ]
      }
    });

### Example

    // Define different colors for specific text markup types:
    var viewer = new DsPdfViewer(selector, {
      textMarkupContextMenu: {
        colors: {
          highlight: [
            { value: "#ff0000", displayName: "Red" },
            { value: "#000000", displayName: "Black" }
          ],
          underline: [
            { value: "#ff0000", displayName: "Red" }
          ]
        }
      }
    });

### Example

    // Hide all color options in the text markup context menu:
    var viewer = new DsPdfViewer(selector, {
      textMarkupContextMenu: { colors: [] }
    });

### theme

theme: string | false = "themes/viewer"

Use theme option to change default viewer theme. Set this option to false if you want to disable the loading of the built-in theme - this can be useful when you are already has theme css reference.

### Example

    // Load dark-yellow theme:
    var viewer = new DsPdfViewer("#root", { theme: "dark-yellow.css", themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );

### Example

    // <link href="~/Content/light-blue.css" rel="stylesheet" />
    // Don't load built-in theme:
    var viewer = new DsPdfViewer("#root", { theme: false } );

### themes

themes: string[] = ...

Available viewer themes.

### Example

    var viewer = new DsPdfViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );

### `Optional` undo

undo?: false | UndoStorageOptions = ...

Undo state storage options.

### Example

    // Disable undo storage:
    var viewer = new DsPdfViewer(selector, {
      undo: false
    });

### Example

    // Do not track "Open" and "Close" commands:
    var viewer = new DsPdfViewer(selector, {
      undo: { skipCommands: "Open" }
    });

### useCanvasForSelection

useCanvasForSelection: any = ...

Color settings for text selection and for active / inactive search result highlight.

- selectionColor: Changes the default color used to highlight the currently selected search result from the search results list, in the document.
- inactiveHighlightColor: Changes the default color used to highlight all the search results in the document.
- selectionColor: Changes the default color used to mark the selected text in the document.

### Example

    var options = {
      useCanvasForSelection: {
        selectionColor: "rgba(0, 0, 0, 0.25)",
        highlightColor: "rgba(255, 94, 255, 0.35)",
        inactiveHighlightColor: "rgba(125, 30, 176, 0.35)"
      }
    };
    var viewer = new DsPdfViewer("#root", options );
    viewer.addSearchPanel();
    viewer.open("sample.pdf");

### useFloatingSearchBar

useFloatingSearchBar: boolean = true

Enable a floating search bar instead of the sidebar search panel.

### Default

Default value is true.

### Example

    var viewer = new DsPdfViewer("#root", { useFloatingSearchBar: false });

### useNativeContextMenu

useNativeContextMenu: boolean = false

By default, the viewer uses its own context menu. Set this option to true if you want to use the browser context menu. Please, note, if you set this option to true, some functions of the context menu will not be available (for example, actions of the Editor and Reply tool).

### Default

false

### Example

    // Enable native browser context menu:
    var viewer = new DsPdfViewer("#root", { useNativeContextMenu: true } );

### userData

userData: any

Arbitrary data associated with the viewer. This data is sent to the server when the document is saved.

### Example

    var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
    viewer.options.userData = { secretNumber: 5, innerData: { innerContent: 'content' } };
    viewer.applyOptions();
    viewer.open('sample.pdf');

### `Optional` userName

userName?: string = ""

Author's user name. This option is used by the Annotation Editor and Reply Tool as the default for the Author field.

### Example

    var viewer = new DsPdfViewer('#root', { userName: 'John', supportApi: 'api/pdf-viewer' });

### workerSrc

workerSrc: string = WORKER_SRC_NAME

URL to the Web Worker script. The Web Worker script runs in the background and is used to load and render PDF documents in a parallel background thread. Please, note, that rendering a PDF on the main thread (without a Web Worker script) can slow down the performance of the PDF viewer when loading large PDF files.

### Example

    var viewer = new DsPdfViewer("#root", { workerSrc: "http://localhost:5000/dspdfviewer.worker.js" } );

### zoomByMouseWheel

zoomByMouseWheel: { always: boolean; ctrlKey: boolean; metaKey: boolean } = ...

Zoom by mouse wheel settings.

### Example

    // Enable zoom with the mouse wheel without pressing the Control or Meta keys:
    var viewer = new DsPdfViewer("#root", { zoomByMouseWheel: { always: true } } );

#### Type declaration

- ##### always: boolean

- ##### ctrlKey: boolean

- ##### metaKey: boolean

### `Optional` zoomOptions

zoomOptions?: { dropdownZoomFactorValues?: number[]; maxZoom?: number; minZoom?: number }

Zoom control options.

### Example

    var viewer = new DsPdfViewer("#root", {
      zoomOptions: {
        minZoom: 0.5,
        maxZoom: 1.5,
        dropdownZoomFactorValues: [0.5, 0.7, 1, 1.5]
      }
    });

#### Type declaration

- ##### `Optional` dropdownZoomFactorValues?: number[]

  Defines zoom factor array to show in Zoom Control Dropdown in Toolbar

  ### Default

  [0.5, 1, 1.5, 2, 3]

- ##### `Optional` maxZoom?: number

  Defines max zoom factor

  ### Default

  3 (300%)

- ##### `Optional` minZoom?: number

  Defines min zoom factor

  ### Default

  0.25 (25%)