+
+
diff --git a/Toolbar/Custom Toolbar/src/index.css b/Toolbar/Custom Toolbar/src/index.css
new file mode 100644
index 0000000..ca02031
--- /dev/null
+++ b/Toolbar/Custom Toolbar/src/index.css
@@ -0,0 +1,1122 @@
+#pdfviewer {
+ height: 640px;
+}
+
+#linear-pdfviewer {
+ width: fit-content;
+}
+
+#uploader-pdfviewer {
+ display: none;
+}
+
+.content-wrapper-pdfviewer {
+ border: 1px dashed #c3c3cc;
+ position: relative;
+ text-align: center;
+ padding: 20px 0 10px;
+}
+
+.e-pv-e-sign.control-section {
+ margin-top: 0px !important;
+}
+
+#e-pv-e-sign-userMenu .e-input-value {
+ width: 84% !important;
+}
+
+.e-pv-e-sign-user-dropdown .e-input-group-icon.e-ddl-icon.e-search-icon {
+ padding: 0px ;
+}
+
+.e-pv-sign-hide-toolbar {
+ display: none;
+}
+
+.e-pv-sign-show-toolbar {
+ display: block;
+}
+
+.e-pv-fit-page-icon::before {
+ content: '\e91b';
+ font-family: "e-icons-pv";
+}
+
+@font-face {
+ font-family: "e-icons-pv";
+ font-style: normal;
+ font-weight: normal;
+ src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8wS0QAAAEoAAAAVmNtYXDSeNLMAAABuAAAAFZnbHlmok0NtwAAAjAAAAPkaGVhZBN3pEcAAADQAAAANmhoZWEHrwNhAAAArAAAACRobXR4NsgAAAAAAYAAAAA4bG9jYQdkBmQAAAIQAAAAHm1heHABHAAwAAABCAAAACBuYW1lD0oZXgAABhQAAALBcG9zdFG4mE4AAAjYAAAAyAABAAADUv9qAFoEAAAA/+gEAAABAAAAAAAAAAAAAAAAAAAADgABAAAAAQAAxsly1F8PPPUACwPoAAAAANgsr7EAAAAA2CyvsQAAAAAEAAQAAAAACAACAAAAAAAAAAEAAAAOACQABAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6RDpHQNS/2oAWgQAAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEIAAAAGAAQAAQAC6RLpHf//AADpEOkU//8AAAAAAAEABgAKAAAAAQACAAMABQAGAAcACAAJAAoACwAMAA0ABAAAAAAAAAAUACoAZACkAL4A7gEuAVwBcAGEAZ4ByAHyAAAAAQAAAAAD6gMuAAUAAAkBBwkBJwIAAet0/on+iXQDL/4VcwF3/olzAAEAAAAAA+oDLgAFAAATCQEXCQGJAXcBd3T+Ff4VAy/+iQF3c/4VAesAAAAAAwAAAAAEAAQAAAMADwAbAAABITUhBQ4BBy4BJz4BNx4BBRYAFzYANyYAJwYAAQACAP4AAoAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAcCAQKPZBATZo6PZBATZo9n+3wYGASHZ2QEhBgb+3wAAAAADAAAAAAQABAAACwAXACMAAAEjFTMVMzUzNSM1IwEOAQcuASc+ATceAQUWABc2ADcmACcGAAHAwMCAwMCAAcAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAkCAwMCAwP8Ao9kEBNmjo9kEBNmj2f7fBgYBIdnZASEGBv7fAAIAAAAAAwAEAAADAAoAADEhNSEBIQkBIREhAwD9AAEA/wABgAGA/wD/AIACAP6AAYABgAACAAAAAANABAAADgAaAAABMh4CFRElBRE0Nz4BMycGFRElBRE0JiMhIgKdCwwHBf7g/uAJBAwKdC8BoAGgX0T+BkQDgAYGCwr9YHZ2AqAOCQQGUS9D/KGrqwNfRlsAAAACAAAAAAP/BAAACwAjAAABDgEHLgEnPgE3HgEFHgEXMjY/ARcVATcBIyc3PgE1LgEnDgECgAOQbW2QAwOQbW2Q/YME2aNGfDIDJAEEYf78MyMCKi4E2aOj2QKAbZADA5BtbZADA5Bto9kELioDJDP+/GEBBCQDMnxGo9kEBNkAAAQAAAAABAAEAAADAAcAFQAZAAABFSE1JRUjNSERMxUhNTMRLgEnIQ4BNyE1IQLA/oACQID9AMACgMABSDf9ADdIvwKA/YABwMDAwICA/sDAwAFAN0gBAUmKwAAAAQAAAAACQAQAAAUAABEBNwkBJwHsU/6HAXpSAmD+YGIBPgE+YgAAAAEAAAAAAkAEAAAFAAARCQEXCQEBev6HUwHs/hMDnv7C/sJiAaABoAABAAAAAAKABAAACwAAERcHFzcXNyc3Jwcn9fVM9PVL9PRL9fQDtfX0TPX1TPT0TPT0AAAABAAAAAAD8APwAAUACwARABcAACEzNTM1IQUzFTMRISUhNSM1IwUjFSERIwJ2fvz+hv2K/H7+hgJ2AXr8fv6G/AF6fvx+fvwBevx+/Px+AXoAAAAAAgAAAAAEAAQAAAMAFgAAAREhEScGFREUFhchPgE1ETQmIyEnIQYDgP0AYh48LQMuLTw8Lf5pa/7ULQMA/gACAN8eLf1YLTwDAzwtAigvPYACAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAUAAEAAQAAAAAAAgAHABUAAQAAAAAAAwAUABwAAQAAAAAABAAUADAAAQAAAAAABQALAEQAAQAAAAAABgAUAE8AAQAAAAAACgAsAGMAAQAAAAAACwASAI8AAwABBAkAAAACAKEAAwABBAkAAQAoAKMAAwABBAkAAgAOAMsAAwABBAkAAwAoANkAAwABBAkABAAoAQEAAwABBAkABQAWASkAAwABBAkABgAoAT8AAwABBAkACgBYAWcAAwABBAkACwAkAb8gY3VzdG9tLXRvb2xiYXJbMTkwOF1SZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
+}
+
+.e-pv-e-sign-form-field-property {
+ width: 72px;
+ height: 72px;
+ margin: 9px;
+ border: 1px solid lightgrey !important;
+ border-radius: 8px;
+ display: grid;
+ place-content: center;
+ font-size: 12px;
+}
+
+#e-pv-e-sign-download {
+ width: 115px;
+ height: 32px;
+ flex-shrink: 0;
+ border-radius: 16px;
+ border: 1px solid var(--Color-variables-outline, #79747E);
+}
+
+#e-pv-e-sign-finishbtn {
+ width: 115px !important;
+ height: 28px;
+ padding: 0;
+ font-size: 12px;
+ flex-shrink: 0;
+ border-radius: 16px;
+}
+
+.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
+.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after {
+ width: 0px;
+}
+
+#e-pv-e-sign-user-field {
+ color: #222933;
+ font-family: Heebo, open sans, "sans-serif", -apple-system, BlinkMacSystemFont;
+ border-radius: 4px;
+ display: flex;
+ position: relative;
+
+}
+
+#e-pv-e-sign-toolbar-user-viewer.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
+ margin-left: 0px !important;
+}
+
+#e-pv-e-sign-toolbar-user-viewer {
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.30);
+ z-index: 1111;
+}
+
+.e-pv-e-sign-form-field-property-mob {
+ border: none !important;
+ box-shadow: none;
+}
+
+.e-pv-e-sign-toolbar-user-viewer,
+.e-pv-e-sign-toolbar-user-viewer-mob {
+ z-index: 1001;
+ width: 100% !important;
+ height: 48px !important;
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+}
+
+#e-pv-e-sign-defaultSidebar {
+ height: 640px;
+ position: absolute;
+ box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+}
+
+.e-pv-e-sign-user-dropdown> :first-child {
+ border: none !important;
+}
+
+#magnificationToolbar {
+ background: transparent;
+ height: auto;
+ min-height: 56px;
+ width: auto;
+ border: none;
+ position: absolute;
+ z-index: 900;
+ top: calc(100% - 140px);
+ left: calc(100% - 150px);
+ transform: rotate(90deg);
+}
+
+div#magnificationToolbar.e-toolbar .e-toolbar-items {
+ background: transparent;
+ padding: 2px 3px 2px 2px;
+}
+
+#magnificationToolbar.e-toolbar .e-tbar-btn {
+ border-radius: 50%;
+ min-height: 30px;
+ min-width: 30px;
+ border: 1px solid #c8c8c8;
+ transform: rotate(90deg);
+}
+
+#customToolbar {
+ top: 20px;
+ z-index: 900;
+}
+
+.e-bookmark-popup {
+ height: 300px;
+ max-width: 300px;
+}
+
+.e-text-search-popup {
+ height: 104px;
+ max-width: 348px;
+}
+
+.e-custom-search-input {
+ width: 234px;
+}
+
+.e-text-search-popup .e-footer-content,
+.e-bookmark-popup .e-footer-content {
+ padding: 0;
+ height: 0;
+}
+
+.search-button,
+.search-button:disabled,
+.search-button:focus,
+.search-button:hover {
+ background: transparent;
+ box-shadow: none;
+}
+
+#popup .e-dlg-content {
+ padding-left: 0;
+ padding-bottom: 0;
+}
+
+.e-pv-bookmarks {
+ min-width: 234px;
+}
+
+.e-pv-current-page-number {
+ width: 46px;
+ height: 28px;
+ text-align: center;
+}
+
+.material .e-pv-current-page-number {
+ border-width: 1px;
+}
+
+.e-btn-icon.e-pv-zoom-out-icon.e-icons {
+ transform: rotate(90deg);
+}
+
+.flex-container {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.e-pv-flex-container{
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.render-mode-info {
+ background: none;
+ border: none;
+ padding-left: 0px;
+}
+
+.render-mode-info .render-mode-info-icon {
+ height: 16px;
+ width: 16px;
+}
+
+.switchLabel {
+ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.24px;
+ text-align: right;
+ font-size: 14px;
+ margin-bottom: 3px;
+}
+
+.e-pv-switchLabel{
+ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.24px;
+ text-align: right;
+ font-size: 14px;
+}
+
+.render-mode-info .render-mode-info-icon::before {
+ line-height: normal;
+}
+
+.buttonSwitch {
+ Width: 40px;
+ Height: 24px;
+}
+
+.e-pv-buttonSwitch {
+ Width: 40px;
+ Height: 24px;
+}
+
+.pdfviewer-property-section {
+ padding: 20px 15px;
+}
+
+.pdfviewer-contextmenu-checkbox-label {
+ padding: 10px;
+}
+
+.pdfviewer-control-section {
+ border-right: 1px solid #D7D7D7;
+}
+
+.e-pv-pdfviewer-control-section {
+ border-right: 1px solid #D7D7D7;
+}
+
+.pdfviewer-property-container {
+ padding: 20px 15px;
+}
+
+.pdfviewer-document-list {
+
+ #defaultDialog {
+ left: 23%;
+ top: 0% ! important;
+ }
+
+ #targetElement .dlgbtn {
+ margin-right: 10px;
+ }
+
+ @media screen and (min-width: 150px) and (max-width: 480px) {
+ .control-section {
+ margin-bottom: 30px;
+ }
+
+ .control-wrapper {
+ margin-bottom: 0px;
+ }
+ }
+
+ #defaultDialog .form-title {
+ width: 100%;
+ text-align: center;
+ padding: 10px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.70);
+ }
+
+ #defaultDialog .e-error,
+ #defaultDialog .e-float-text {
+ font-weight: 500;
+ }
+
+ #defaultDialog .e-custom-label {
+ font-size: 14px;
+ font-weight: 500;
+ margin-left: 20px;
+ }
+
+ #defaultDialog #formId {
+ padding-top: 10px;
+ border: 1px solid #ccc;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
+ border-radius: 5px;
+ background: #f9f9f9;
+ height: 250px;
+ overflow-y: scroll;
+ }
+
+ .material-dark #defaultDialog #formId,
+ .material3-dark #defaultDialog #formId,
+ .bootstrap5-dark #defaultDialog #formId {
+ background: #212529;
+ }
+
+ .bootstrap-dark #defaultDialog #formId {
+ background: #1a1a1a;
+ }
+
+ .fabric-dark #defaultDialog #formId {
+ background: #201f1f;
+ }
+
+ .tailwind-dark #defaultDialog #formId {
+ background: #1f2937;
+ }
+
+ .fluent-dark #defaultDialog #formId {
+ background: #111111;
+ }
+
+ .e-pv-fit-page-icon::before {
+ content: '\e91b';
+ font-family: "e-icons";
+ }
+
+
+ .material-dark #defaultDialog .form-title,
+ .material3-dark #defaultDialog .form-title,
+ .bootstrap-dark #defaultDialog .form-title,
+ .fabric-dark #defaultDialog .form-title,
+ .tailwind-dark #defaultDialog .form-title,
+ .bootstrap5-dark #defaultDialog .form-title,
+ .fluent-dark #defaultDialog .form-title {
+ color: rgb(249 249 249);
+ }
+
+ .highcontrast #defaultDialog form,
+ .highcontrast #defaultDialog .header {
+ color: #fff;
+ background: #000000;
+ }
+
+ #defaultDialog .header {
+ color: rgba(0, 0, 0, 0.7);
+ }
+
+ #defaultDialog .form-horizontal .form-group {
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-bottom: 5px;
+ }
+
+ #defaultDialog .e-submit-btn {
+ height: 40px;
+ width: 150px;
+ }
+
+ #defaultDialog .e-reset-btn {
+ height: 40px;
+ width: 150px;
+ }
+
+ #defaultDialog .submitRow {
+ width: 320px;
+ margin: 0px auto;
+ height: 100px;
+ padding-top: 25px;
+ }
+
+ #defaultDialog #DialogChart {
+ text-align: center;
+ }
+
+ #defaultDialog {
+ max-height: 500px;
+ }
+
+ .file-name-container {
+ display: flex;
+ justify-content: left;
+ }
+
+ .file-name-content {
+ display: flex;
+ align-items: center;
+ }
+
+ .icon-and-text {
+ display: flex;
+ align-items: left;
+ }
+
+ .file-name-text {
+ text-align: center;
+ margin-left: 8px;
+ margin-top: 5px;
+ }
+}
+
+/*redaction style*/
+#e-pv-redact-sb-toolbar-secondary .e-input-group {
+ border: none !important;
+}
+
+#e-pv-redact-sb-panel.control-section .e-appbar {
+ height: 36px;
+ font-size: 14px !important;
+}
+
+#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn {
+ flex-direction: column;
+}
+
+#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
+ font-size: 18px;
+ padding: 4px !important;
+}
+
+#e-pv-redact-sb-toolbar {
+ height: 72px !important;
+}
+
+#e-pv-redact-sb-toolbar .e-toolbar-items {
+ gap: 5px;
+}
+
+#e-pv-redact-sb-toolbar .e-toolbar-item.e-separator {
+ height: 48px !important;
+}
+
+#e-pv-redact-sb-toolbar,
+#e-pv-redact-sb-toolbar.e-toolbar,
+#e-pv-redact-sb-toolbar-secondary {
+ border-left-width: 1px !important;
+ border-right-width: 1px !important;
+}
+
+.e-pv-redact-sb-toolbar,
+#e-pv-redact-sb-toolbar-secondary {
+ border-top-width: 1px !important;
+ border: 0 solid var(--color-sf-border-light);
+ --color-sf-border-light: #e0e0e0;
+}
+
+.e-pv-current-page-number {
+ font-size: 12px;
+}
+
+.e-pv-total-page-number {
+ font-weight: 400;
+}
+
+.e-pv-redact-sb-black-out-container .black-out {
+ background-color: black;
+ width: 18px !important;
+ height: 18px !important;
+ border: 1px solid white;
+ border-radius: 3px;
+ margin: 4px !important;
+}
+
+.e-pv-redact-sb-white-out-container .white-out {
+ background-color: white;
+ width: 18px !important;
+ height: 18px !important;
+ border: 1px solid black;
+ border-radius: 3px;
+ margin: 4px !important;
+}
+
+.e-bigger .e-pv-redact-sb-black-out-container .black-out,
+.e-bigger .e-pv-redact-sb-black-out-container .white-out {
+ position: relative;
+ top: -4px;
+}
+
+.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-black-out-container .e-tbar-btn.e-btn,
+.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-white-out-container .e-tbar-btn.e-btn {
+ padding-top: 5px !important;
+}
+
+.e-bigger .e-pv-redact-sb-black-out-container .e-tbar-btn .e-tbar-btn-text,
+.e-bigger .e-pv-white-out-container .e-tbar-btn .e-tbar-btn-text {
+ padding: 2px 4px 7px 4px !important;
+}
+
+/*upload image*/
+#e-pv-redact-sb-dialog.e-dialog #e-pv-redact-sb-defaultfileupload.e-upload-files {
+ border: none !important;
+}
+
+#e-pv-redact-sb-panel.control-section #file-uploader {
+ display: flex;
+ border: 1px dashed #c8c6c4;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 6px;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content {
+ border-bottom: 1px solid #C4C7C5 !important;
+ padding: 15px !important;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-footer-content {
+ border-top: 1px solid #C4C7C5 !important;
+ padding: 10px !important;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content+.e-dlg-content {
+ padding: 20px !important;
+}
+
+#e-pv-redact-sb-panel.control-section .e-file-select-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-footer-content .e-btn {
+ background: rgba(0, 0, 0, 0);
+ border-color: rgba(0, 0, 0, 0);
+ box-shadow: none;
+ color: #242424;
+}
+
+#e-pv-redact-sb-defaultfileupload .e-upload-files {
+ border: none !important;
+}
+
+.e-pv-redact-sb-image-source {
+ width: 70px;
+ height: 70px;
+}
+
+.e-pv-redact-sb-image-container {
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px;
+ gap: 5px;
+ border-radius: 4px;
+}
+
+.e-pv-redact-sb-image-list {
+ display: flex;
+ justify-content: center;
+ padding: 24px 15px;
+ gap: 35px;
+}
+
+.e-pv-redact-sb-image-container-selected {
+ border: 1px solid #757575 !important;
+}
+
+.e-pv-redact-sb-image-container:hover {
+ border: 1px solid #757575;
+}
+
+#e-pv-redact-sb-drop-area-wrap {
+ display: flex;
+ border: 1px dashed #c8c6c4;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 6px;
+}
+
+#e-pv-redact-sb-defaultfileupload .e-upload {
+ border: none;
+ margin-top: 10px;
+ width: 100%;
+ height: 100%;
+}
+
+.e-icons.e-redaction:before {
+ content: "\e740";
+}
+
+#e-pv-redact-sb-panel.control-section .e-dlg-overlay {
+ background: none;
+ backdrop-filter: blur(2px) !important;
+}
+
+.e-pv-header-panel {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: sticky;
+ top: 0px;
+ z-index: 2;
+ background-color: white;
+ border-bottom: 1px solid #D7D7D7;
+ padding-bottom: 5px;
+ margin-bottom: 16px;
+}
+
+.e-pv-annot-inner-table td {
+ text-wrap: nowrap;
+ padding: 12px 12px 0 12px;
+ width: 50%;
+}
+
+.e-pv-main-panel {
+ border-left: 1px solid #D7D7D7;
+ height: 700px;
+ overflow-y: scroll;
+ padding-bottom: 0px;
+}
+
+.e-pv-input-item {
+ margin-top: 0px;
+}
+
+.e-pv-annot-inner-container {
+ margin-top: 15px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 12px;
+}
+
+.e-pv-annot-inner-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.e-pv-pdfViewer-coordinate-table {
+ border-spacing: 0px;
+}
+
+.e-pv-pdfViewer-coordinate-table td {
+ border: 1px solid rgba(196, 199, 197, 1);
+ font-size: 11px;
+ text-align: center;
+ width: auto;
+ padding: 4px 0px;
+}
+
+.e-pv-property-panel-footer {
+ padding: 10px 0px 16px 0px;
+ position: sticky;
+ bottom: 0;
+ background-color: white;
+ z-index: 1;
+ border-top: 1px solid #D7D7D7;
+ margin-top: 16px;
+}
+
+.e-pv-annot-button-section {
+ text-align: center;
+ display: flex;
+ justify-content: end;
+ gap: 12px;
+ flex-wrap: wrap-reverse;
+}
+
+.e-pv-pdfviewer-input-title .e-pv-check-box-row {
+ padding: 5px;
+ margin-top: 16px;
+}
+.fluent2 .e-pv-pdfviewer-input-title .e-pv-check-box-row,
+.fluent2-dark .e-pv-pdfviewer-input-title .e-pv-check-box-row,
+.fluent2-highcontrast .e-pv-pdfviewer-input-title .e-pv-check-box-row {
+ padding: 0;
+ margin-top: 16px;
+}
+.e-pv-pdfviewer-input-title {
+ margin-top: 12px;
+ font-size: 12px;
+}
+
+.e-pv-table-items {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ gap: 2px;
+}
+
+.e-pv-pdfviewer-table-input-title {
+ margin-top: 6px;
+ font-size: 11px;
+}
+
+.e-pv-pdfviewer-text-content {
+ font-size: 12px;
+}
+
+.e-pv-annot-bounds-list {
+ border: 1px solid rgba(196, 199, 197, 1);
+ border-spacing: 0px;
+}
+
+.e-pv-annot-bounds-list td {
+ font-size: 11px;
+ text-align: center;
+ width: auto;
+ padding: 4px 0px;
+ border-bottom: 1px solid rgba(196, 199, 197, 1);
+}
+
+.e-pv-reply-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ justify-content: space-between;
+ padding: 12px;
+}
+.e-pv-reply-main-container {
+ flex-grow: 1;
+}
+.e-pv-replies {
+ overflow-y: auto;
+ max-height: 180px;
+ padding: 0px !important;
+}
+
+.inner-container {
+ margin-top: 15px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 12px;
+}
+
+.reply-text {
+ width: 100%;
+ font-size: 12px;
+ word-break: break-word;
+}
+
+.upload-image {
+ width: 80px;
+ height: 80px;
+ margin: 12px;
+ border-radius: 5px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 4px;
+}
+
+div .file-name {
+ font-size: 14px;
+ padding: 0px 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 500;
+ width: 90px;
+ white-space: nowrap;
+}
+.wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.fluent-dark .e-pv-property-panel-footer, .fluent-dark .e-pv-header-panel {
+ background-color: #1B1A19;
+}
+
+.bootstrap5_3-dark .e-pv-property-panel-footer, .bootstrap5_3-dark .e-pv-header-panel{
+ background-color: #212529;
+}
+
+.highcontrast .e-pv-property-panel-footer, .highcontrast .e-pv-header-panel {
+ background-color: #000000;
+}
+
+.fluent2-highcontrast .e-pv-property-panel-footer, .fluent2-highcontrast .e-pv-header-panel,
+.material3-dark .e-pv-property-panel-footer, .material3-dark .e-pv-header-panel,
+.fluent2-dark .e-pv-property-panel-footer, .fluent2-dark .e-pv-header-panel {
+ background-color: #1C1B1F;
+}
+
+.tailwind3-dark .e-pv-property-panel-footer, .tailwind3-dark .e-pv-header-panel {
+ background: #111827;
+}
+
+.tailwind3-dark .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon,
+.tailwind3 .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon{
+ font-size: 18px;
+}
+
+.e-pv-visible-sign-input-item {
+ margin-top: 4px;
+}
+
+.e-pv-visible-sign-group h4 {
+ margin-bottom: 10px;
+}
+
+.e-pv-visible-sign-tab {
+ flex: 1 1 auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 12px 12px 16px;
+}
+
+.e-view.e-bigger .e-pv-visible-sign-tab {
+ padding: 12px 16px 16px;
+}
+
+.e-pv-visible-sign-tab hr {
+ border-color: #D7D7D7;
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+
+.e-pv-visible-sign-tab-content-footer {
+ display: flex;
+ justify-content: flex-end;
+ position: sticky;
+ padding-right: 12px;
+ padding-top: 12px;
+ margin-bottom: 12px;
+ bottom: -1px;
+ z-index: 1;
+ flex-shrink: 0;
+ background-color: var(--color-sf-content-bg-color);
+ border-top: 1px solid var(--color-sf-border);
+ flex: 0 0 auto;
+}
+
+#visibleSign_button_signDocument {
+ width: 160px;
+}
+
+.material3 .e-pv-visible-sign-tab-content-footer,
+.material3-dark .e-pv-visible-sign-tab-content-footer {
+ background: rgba(var(--color-sf-background));
+ border-top: 1px solid rgba(var(--color-sf-outline));
+}
+
+.fluent2-highcontrast .e-pv-visible-sign-tab-content-footer,
+.fluent2-highcontrast .e-pv-visible-sign-tab-header {
+ background-color: #1C1B1F;
+}
+
+.fluent2 .e-pv-visible-sign-tab-content-footer,
+.fluent2 .e-pv-visible-sign-tab-header {
+ background-color: #FFF;
+}
+
+.e-pv-visible-sign-uploaded-images {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 15px;
+}
+
+.e-pv-visible-sign-tab-panel {
+ display: flex;
+ flex-direction: column;
+ border-left: 1px solid #D7D7D7;
+ padding: 0 !important;
+ height: 610px;
+ overflow-x: hidden;
+}
+
+.e-pv-visible-sign-tab-content {
+ flex-grow: 1;
+}
+
+.e-pv-visible-sign-header-title {
+ padding: 12px;
+}
+
+.e-pv-visible-sign-tab-header {
+ display: flex;
+ border-bottom: 1px solid var(--color-sf-border);
+ background: var(--color-sf-content-bg-color);
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ flex: 0 0 auto;
+}
+
+.material3 .e-pv-visible-sign-tab-header,
+.material3-dark .e-pv-visible-sign-tab-header {
+ background: rgba(var(--color-sf-background));
+ border-bottom: 1px solid rgba(var(--color-sf-outline));
+}
+
+.e-pv-visible-sign-tab-header-item {
+ position: relative;
+ padding: 0 15px;
+ cursor: pointer;
+ border-bottom: 3px solid transparent;
+ color: var(--color-sf-content-text-color-alt3);
+}
+
+.material3 .e-pv-visible-sign-tab-header-item,
+.material3-dark .e-pv-visible-sign-tab-header-item {
+ color: rgba(var(--color-sf-on-surface-variant));
+}
+
+.e-pv-visible-sign-tab-header-item:hover {
+ color: var(--color-sf-content-text-color-hover);
+}
+
+.material3 .e-pv-visible-sign-tab-header-item:hover {
+ color: rgba(var(--color-sf-black));
+}
+.material3-dark .e-pv-visible-sign-tab-header-item:hover {
+ color: rgba(var(--color-sf-white));
+}
+
+.fluent2-highcontrast .e-pv-visible-sign-tab-header-item:hover {
+ color: var(--color-sf-white);
+}
+
+.e-pv-visible-sign-tab-header-item.active {
+ font-weight: 600;
+ border-bottom: 3px solid var(--color-sf-primary);
+ color: var(--color-sf-primary);
+}
+
+.e-pv-visible-sign-tab-header-item.active::after {
+ content: '';
+ position: absolute;
+ bottom: -3px;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background-color: var(--color-sf-primary);
+}
+
+.material3 .e-pv-visible-sign-tab-header-item.active::after,
+.material3-dark .e-pv-visible-sign-tab-header-item.active::after {
+ background-color: rgba(var(--color-sf-primary));
+}
+
+.material3 .e-pv-visible-sign-tab-header-item.active,
+.material3-dark .e-pv-visible-sign-tab-header-item.active {
+ border-bottom: 3px solid rgba(var(--color-sf-primary));
+ color: rgba(var(--color-sf-primary));
+}
+
+.e-pv-visible-sign-tab-header-item.active:hover {
+ color: var(--color-sf-primary);
+}
+
+.material3 .e-pv-visible-sign-tab-header-item.active:hover,
+.material3-dark .e-pv-visible-sign-tab-header-item.active:hover {
+ color: rgba(var(--color-sf-primary));
+}
+
+.e-pv-visible-sign-tab-header-item-text {
+ height: 48px;
+ display: inline-flex;
+ align-items: center;
+}
+
+.e-pv-visible-sign-group-title,
+.e-pv-visible-sign-dropdown-label {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.e-pv-visible-sign-text-content {
+ font-size: 14px;
+}
+
+.e-view.e-bigger .e-pv-visible-sign-group-title,
+.e-view.e-bigger .e-pv-visible-sign-dropdown-label {
+ font-size: 16px;
+ font-weight: 600;
+}
+.e-view.e-bigger .e-pv-visible-sign-text-content,
+.e-view.e-bigger .e-pv-visible-sign-tab-header-item-text {
+ font-size: 16px;
+}
+
+.e-pv-visible-sign-inner-table,
+.e-pv-visible-sign-position-table,
+.e-pv-visible-sign-size-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.e-pv-visible-sign-position-table,
+.e-pv-visible-sign-size-table {
+ table-layout: auto;
+}
+
+.e-pv-visible-sign-inner-table td,
+.e-pv-visible-sign-position-table td,
+.e-pv-visible-sign-size-table td {
+ text-wrap: nowrap;
+ padding: 6px;
+}
+
+.e-pv-visible-sign-inner-table td:first-child,
+.e-pv-visible-sign-position-table td:first-child,
+.e-pv-visible-sign-size-table td:first-child {
+ padding-left: 0;
+}
+
+.e-pv-visible-sign-inner-table td:last-child,
+.e-pv-visible-sign-position-table td:last-child,
+.e-pv-visible-sign-size-table td:last-child {
+ padding-right: 0;
+}
+
+.e-pv-visible-sign-inner-table td:first-child {
+ width: 40%;
+}
+
+.e-pv-visible-sign-inner-table td:last-child {
+ width: 60%;
+}
+
+.e-pv-visible-sign-signature-image-group {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 40px;
+}
+
+.e-pv-visible-sign-signature-image-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.e-pv-visible-sign-image-wrapper {
+ position: relative;
+ border: 2px solid;
+ border-color: lightgray;
+ cursor: pointer;
+ height: 60px;
+ width: 60px;
+ background-color: #fff;
+}
+
+.e-pv-visible-sign-image-wrapper.selected {
+ border-color: #0078d4;
+}
+
+.e-pv-visible-sign-image-wrapper img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.e-pv-visible-sign-image-wrapper .e-pv-visible-sign-image-delete {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+}
+
+.tailwind3-dark .e-pv-visible-sign-image-delete,
+.tailwind3-dark .e-pv-visible-sign-image-delete:hover {
+ color: #000;
+}
+
+#e-pv-visible-sign-image-uploader {
+ display: none;
+}
+
+.e-pv-visible-sign-tab-panel .e-tab .e-tab-header {
+ position: sticky;
+ z-index: 1;
+ top: 0;
+ background-color: var(--color-sf-content-bg-color);
+}
+
+.e-pv-visible-sign-pdfviewer-tab-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+}
+
+.e-pv-visible-sign-pdfviewer-tab-container .e-pv-visible-sign-toolbar,
+.e-pv-visible-sign-pdfviewer-tab-container .e-pv-visible-sign-message {
+ flex-shrink: 0;
+}
+
+.e-pv-visible-sign-pdfviewer-tab-container .e-pv-visible-sign-pdfviewer-container {
+ flex-shrink: 1;
+ flex-grow: 1;
+}
\ No newline at end of file
diff --git a/Toolbar/Custom Toolbar/src/index.js b/Toolbar/Custom Toolbar/src/index.js
new file mode 100644
index 0000000..f0f84b8
--- /dev/null
+++ b/Toolbar/Custom Toolbar/src/index.js
@@ -0,0 +1,866 @@
+// Import necessary dependencies from React and ReactDOM
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import * as React from 'react';
+
+// Import PDF viewer components and features from Syncfusion
+import { PdfViewerComponent, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, FormFields, FormDesigner, ThumbnailView, Print, TextSelection, TextSearch, PageOrganizer, Inject, StandardBusinessStampItem, SignStampItem, DynamicStampItem, } from '@syncfusion/ej2-react-pdfviewer';
+
+// Import navigation components for toolbar and menu
+import { ToolbarComponent, ItemsDirective, ItemDirective, MenuComponent } from '@syncfusion/ej2-react-navigations';
+
+
+// CustomToolbar component for implementing a custom toolbar in the PDF viewer
+function CustomToolbar() {
+ // Initialize state variables for the toolbar functionality
+ let viewer; // Reference to the PDF viewer instance
+ let matchCase; // Flag for case-sensitive search
+ let searchText = ''; // Current search text
+ let prevMatchCase = false; // Previous state of case-sensitive search
+ let toolbar; // Reference to toolbar component
+ let currentPageNumber = '1'; // Current page number in the PDF
+ let fileName = ''; // Name of the current PDF file
+ let isInkEnabled = false; // Flag for ink annotation mode
+ let searchActive = false; // Flag for active search state
+ // Configuration for stamp menu items with hierarchical structure
+ const data = [
+ {
+ iconCss: 'e-icons e-stamp', // Icon for stamp button
+ items: [
+ {
+ text: 'Dynamic', // Dynamic stamps submenu
+ items: [
+ { text: 'Revised', id: 'Dynamic' },
+ { text: 'Reviewed', id: 'Dynamic' },
+ { text: 'Received', id: 'Dynamic' },
+ { text: 'Confidential', id: 'Dynamic' },
+ { text: 'Approved', id: 'Dynamic' },
+ { text: 'Not Approved', id: 'Dynamic' },
+ ],
+ },
+ {
+ text: 'Sign Here',
+ items: [
+ { text: 'Witness', id: 'Sign Here' },
+ { text: 'Initial Here', id: 'Sign Here' },
+ { text: 'Sign Here', id: 'Sign Here' },
+ { text: 'Accepted', id: 'Sign Here' },
+ { text: 'Rejected', id: 'Sign Here' },
+ ],
+ },
+ {
+ text: 'Standard Business',
+ items: [
+ { text: 'Approved', id: 'Standard Business' },
+ { text: 'Not Approved', id: 'Standard Business' },
+ { text: 'Draft', id: 'Standard Business' },
+ { text: 'Final', id: 'Standard Business' },
+ { text: 'Completed', id: 'Standard Business' },
+ { text: 'Confidential', id: 'Standard Business' },
+ { text: 'For Public Release', id: 'Standard Business' },
+ { text: 'Not For Public Release', id: 'Standard Business' },
+ { text: 'For Comment', id: 'Standard Business' },
+ { text: 'Void', id: 'Standard Business' },
+ { text: 'Preliminary Results', id: 'Standard Business' },
+ { text: 'Information Only', id: 'Standard Business' },
+ ],
+ },
+ ],
+ },
+ ];
+ // Configuration for signature menu with signature-related options
+ const signMenu = [{
+ iconCss: "e-icons e-signature", // Icon for signature button
+ items: [
+ { text: "Add Signature" }, // Option to add a full signature
+ { text: "Add Initial" }, // Option to add initials
+ ]
+ }];
+ // Initialize the viewer when component mounts
+ function componentDidMount() {
+ viewer = document.getElementById('container').ej2_instances[0];
+ }
+
+ // Template function for rendering the stamp menu
+ function stampTemplate() {
+ return (
);
+ }
+
+ // Template function for rendering the signature menu
+ function signTemplate() {
+ return (
);
+ }
+
+ // Template function for rendering the form field signature menu
+ function formFieldSignTemplate() {
+ return (
);
+ }
+ // Handler for stamp menu item selection
+ function onItemSelect(args) {
+ // Hide form field toolbar if it's visible
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+
+ // Hide text search toolbar if it's visible
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+
+ // Get the selected stamp type and text
+ var stampId = args.element.id;
+ var stampText = args.element.innerText;
+
+ // Handle dynamic stamp selections
+ if (stampId === 'Dynamic' && stampText != null) {
+ if (stampText === 'Revised') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Revised);
+ }
+ else if (stampText == 'Reviewed') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Reviewed);
+ }
+ // Handle additional dynamic stamp types
+ else if (stampText == 'Received') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Received);
+ }
+ else if (stampText == 'Confidential') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Confidential);
+ }
+ else if (stampText == 'Approved') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Approved);
+ }
+ else if (stampText == 'NotApproved') {
+ viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.NotApproved);
+ }
+ }
+ // Handle signature-related stamp selections
+ if (stampId === 'Sign Here' && stampText != null) {
+ // Set different signature stamp modes based on selection
+ if (stampText === 'Witness') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.Witness);
+ }
+ else if (stampText == 'Initial Here') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.InitialHere);
+ }
+ else if (stampText == 'Sign Here') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.SignHere);
+ }
+ else if (stampText == 'Accepted') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.Accepted);
+ }
+ else if (stampText == 'Rejected') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.Rejected);
+ }
+ }
+ // Handle standard business stamp selections
+ if (stampId === 'Standard Business' && stampText != null) {
+ // Set different standard business stamp modes based on selection
+ if (stampText === 'Approved') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Approved);
+ }
+ else if (stampText == 'Not Approved') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.NotApproved);
+ }
+ else if (stampText == 'Draft') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Draft);
+ }
+ else if (stampText == 'Final') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Final);
+ }
+ else if (stampText == 'Completed') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Completed);
+ }
+ else if (stampText == 'Confidential') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Confidential);
+ }
+ else if (stampText == 'For Public Release') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.ForPublicRelease);
+ }
+ else if (stampText == 'Not For Public Release') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.NotForPublicRelease);
+ }
+ else if (stampText == 'For Comment') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.ForComment);
+ }
+ else if (stampText == 'Void') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Void);
+ }
+ else if (stampText == 'Preliminary Results') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.PreliminaryResults);
+ }
+ else if (stampText == 'Information Only') {
+ viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.InformationOnly);
+ }
+ }
+ }
+ // Callback function when rendering is complete
+ function rendereComplete() {
+ wireEvent(); // Wire up event handlers after rendering
+ }
+
+ // Template function for rendering the total page number display
+ function template() {
+ return (
of 0
);
+ }
+ // Template function for the current page number input field
+ function inputTemplate() {
+ return (
);
+ }
+
+ // Main component render method
+ return (
+
+
+ {/* Main PDF viewer toolbar */}
+
+ { toolbar = scope; }} clicked={clickHandler.bind(this)}>
+
+ {/* File operation buttons */}
+
+
+
+ {/* Annotation editing toolbar - Hidden by default */}
+
+
+
+ {/* Text markup annotation tools */}
+
+
+
+ {/* Form fields toolbar - Hidden by default */}
+
+
+
+ {/* Form input field types */}
+
+
+
+ {/* Text search toolbar - Hidden by default */}
+
+
+
+ {/* Search input container */}
+
+
+
+
+
+
+
+
+
+
+ Match case
+
+
+
+
+
+ {/* Render the PDF Viewer */}
+
{ viewer = scope; }} enableToolbar={false} enableNavigationToolbar={false} enableAnnotationToolbar={false} enableCommentPanel={false} documentLoad={documentLoaded} pageChange={onPageChange} resourceUrl="https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf" style={{ 'display': 'block', 'height': '640px' }}>
+
+
+
+
+
+
+
+
+
+
+
);
+ // Wire up event listeners for page navigation input
+ function wireEvent() {
+ let inputElement = document.getElementById('currentPage');
+ inputElement.addEventListener('click', currentPageClicked.bind(this));
+ inputElement.addEventListener('keypress', onCurrentPageBoxKeypress.bind(this));
+ inputElement.value = currentPageNumber;
+ }
+
+ // Handle page change events in the PDF viewer
+ function onPageChange() {
+ currentPageNumber = viewer.currentPageNumber.toString();
+ let inputElement = document.getElementById('currentPage');
+ inputElement.value = currentPageNumber;
+ updatePageNavigation(); // Update navigation buttons state
+ }
+ // Initialize viewer when document is loaded
+ function documentLoaded() {
+ // Set up click listener for search functionality
+ document.addEventListener('click', checkSearchActive.bind(this));
+
+ // Update total page count display
+ var pageCount = document.getElementById('totalPage');
+ pageCount.textContent = 'of ' + viewer.pageCount;
+
+ // Initialize navigation and page input
+ updatePageNavigation();
+ let inputElement = document.getElementById('currentPage');
+ inputElement.addEventListener('click', currentPageClicked.bind(this));
+ inputElement.addEventListener('keypress', onCurrentPageBoxKeypress.bind(this));
+ inputElement.value = "1";
+ }
+
+ // Update the state of navigation buttons based on current page
+ function updatePageNavigation() {
+ if (viewer.currentPageNumber === 1) {
+ // Disable previous page button on first page
+ toolbar.enableItems(document.getElementById('previous_page').parentElement, false);
+ toolbar.enableItems(document.getElementById('next_page').parentElement, true);
+ }
+ else if (viewer.currentPageNumber === viewer.pageCount) {
+ toolbar.enableItems(document.getElementById('previous_page').parentElement, true);
+ toolbar.enableItems(document.getElementById('next_page').parentElement, false);
+ }
+ else {
+ toolbar.enableItems(document.getElementById('previous_page').parentElement, true);
+ toolbar.enableItems(document.getElementById('next_page').parentElement, true);
+ }
+ }
+ // Handle keypress events in the page number input box
+ function onCurrentPageBoxKeypress(event) {
+ let currentPageBox = document.getElementById('currentPage');
+
+ // Allow only numbers, backspace and enter keys
+ if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+ event.preventDefault();
+ return false;
+ }
+ else {
+ var currentPageNumber = parseInt(currentPageBox.value);
+ // Handle Enter key press
+ if (event.which === 13) {
+ // Navigate to page if number is valid
+ if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
+ viewer.navigation.goToPage(currentPageNumber);
+ }
+ else {
+ // Reset to current page if invalid number
+ currentPageBox.value = viewer.currentPageNumber.toString();
+ }
+ }
+ return true;
+ }
+ }
+ function currentPageClicked() {
+ let currentPage = document.getElementById('currentPage');
+ currentPage.select();
+ }
+ function readFile(evt) {
+ let uploadedFiles = evt.target.files;
+ let uploadedFile = uploadedFiles[0];
+ fileName = uploadedFile.name;
+ let reader = new FileReader();
+ reader.readAsDataURL(uploadedFile);
+ let uploadedFileName = fileName;
+ reader.onload = function (e) {
+ let uploadedFileUrl = e.currentTarget.result;
+ viewer.documentPath = uploadedFileUrl;
+ viewer.downloadFileName = viewer.fileName = uploadedFileName;
+ var pageCount = document.getElementById('totalPage');
+ pageCount.textContent = 'of ' + viewer.pageCount;
+ };
+ }
+ function onsignatureCilck(event) {
+ let signatureText = event.element.innerText;
+ let editAnnotationToolbar = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbar.style.display === 'block') {
+ if (signatureText === 'Add Signature') {
+ viewer.annotation.setAnnotationMode('HandWrittenSignature');
+ }
+ else if (signatureText === 'Add Initial') {
+ viewer.annotation.setAnnotationMode('Initial');
+ }
+ }
+ let formFieldToolbar = document.getElementById('formFieldToolbar');
+ if (formFieldToolbar.style.display === 'block') {
+ if (signatureText === 'Add Signature') {
+ viewer.formDesignerModule.setFormFieldMode('SignatureField');
+ }
+ else if (signatureText === 'Add Initial') {
+ viewer.formDesignerModule.setFormFieldMode('InitialField');
+ }
+ }
+ }
+ function searchInputKeypressed(event) {
+ if (event.key === 'Enter') {
+ initiateTextSearch();
+ }
+ }
+ function initiateTextSearch() {
+ const textsearchPrevElement = document.getElementById('container_prev_occurrence');
+ const textsearchNextElement = document.getElementById('container_next_occurrence');
+ var textsearchElement = document.getElementById('container_search_box-icon');
+ if (textsearchNextElement && textsearchPrevElement && textsearchElement) {
+ textsearchPrevElement.disabled = false;
+ textsearchNextElement.disabled = false;
+ textsearchElement.classList.add('e-close');
+ textsearchElement.classList.remove('e-search');
+ textsearchPrevElement.addEventListener("click", previousTextSearch);
+ textsearchNextElement.addEventListener("click", nextTextSearch);
+ if (searchText !== document.getElementById('container_search_input').value || prevMatchCase !== matchCase) {
+ viewer.textSearch.cancelTextSearch();
+ searchText = document.getElementById('container_search_input').value;
+ searchActive = true;
+ viewer.textSearch.searchText(searchText, matchCase);
+ prevMatchCase = matchCase;
+ }
+ else {
+ nextTextSearch();
+ }
+ }
+ }
+ function checkSearchActive() {
+ if (viewer && viewer.textSearchModule && !searchActive) {
+ viewer.textSearchModule.clearAllOccurrences();
+ }
+ }
+ function inputChange() {
+ viewer.textSearchModule.clearAllOccurrences();
+ searchActive = false;
+ if (document.getElementById('container_search_input').value == '') {
+ updateSearchInputIcon(true);
+ viewer.textSearch.cancelTextSearch();
+ searchText = '';
+ }
+ }
+ function searchClickHandler() {
+ var searchBtn = document.getElementById('container_search_box-icon');
+ if (searchBtn.classList.contains('e-search')) {
+ viewer.textSearch.cancelTextSearch();
+ initiateTextSearch();
+ updateSearchInputIcon(false);
+ searchText = '';
+ }
+ else if (searchBtn.classList.contains('e-close')) {
+ var searchInput = document.getElementById('container_search_input');
+ updateSearchInputIcon(true);
+ searchInput.value = '';
+ searchInput.focus();
+ viewer.textSearch.cancelTextSearch();
+ viewer.textSearch.resetVariablesTextSearch();
+ searchText = '';
+ }
+ }
+ function updateSearchInputIcon(isEnable) {
+ var searchBtn = document.getElementById('container_search_box-icon');
+ if (isEnable) {
+ searchBtn.classList.add('e-search');
+ searchBtn.classList.remove('e-close');
+ }
+ else {
+ searchBtn.classList.add('e-close');
+ searchBtn.classList.remove('e-search');
+ }
+ }
+ function nextTextSearch() {
+ disableInkAnnotation();
+ viewer.textSearchModule.searchNext();
+ this.searchActive = true;
+ }
+ function previousTextSearch() {
+ disableInkAnnotation();
+ viewer.textSearchModule.searchPrevious();
+ this.searchActive = true;
+ }
+ function disableInkAnnotation() {
+ if (isInkEnabled) {
+ viewer.annotation.setAnnotationMode('None');
+ isInkEnabled = false;
+ }
+ }
+ function checkBoxChanged(event) {
+ const target = event.target;
+ if (target.checked) {
+ const matchcaseElement = document.getElementById('container_match_case');
+ if (matchcaseElement) {
+ matchcaseElement.checked = true;
+ }
+ matchCase = true;
+ const checkboxSpanElement = document.getElementById('checkboxSpan');
+ if (checkboxSpanElement) {
+ checkboxSpanElement.classList.add('e-check');
+ }
+ }
+ else {
+ matchCase = false;
+ const checkboxSpanElement = document.getElementById('checkboxSpan');
+ if (checkboxSpanElement) {
+ checkboxSpanElement.classList.remove('e-check');
+ }
+ }
+ }
+ function onPageChanged() {
+ disableInkAnnotation();
+ let currentPageNumber = viewer.currentPageNumber;
+ let inputElement = document.getElementById('currentPage');
+ inputElement.value = currentPageNumber.toString();
+ }
+ function onDocumentLoaded() {
+ let pageCount = viewer.pageCount;
+ let totalPageElement = document.getElementById('totalPage');
+ totalPageElement.textContent = 'of ' + pageCount;
+ let inputElement = document.getElementById('currentPage');
+ inputElement.value = '1';
+ let fileName = viewer.fileName;
+ let fileNameElement = document.getElementById('documentFileName');
+ fileNameElement.textContent = fileName;
+ }
+ function clickHandler(args) {
+ switch (args.item.id) {
+ case 'file_Open':
+ {
+ disableInkAnnotation();
+ let fileUpload = document.getElementById('fileUpload');
+ fileUpload.click();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'save':
+ {
+ disableInkAnnotation();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display == 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display == 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display == 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ viewer.download();
+ }
+ break;
+ case 'previous_page':
+ disableInkAnnotation();
+ viewer.navigation.goToPreviousPage();
+ break;
+ case 'next_page':
+ disableInkAnnotation();
+ viewer.navigation.goToNextPage();
+ break;
+ case 'fit_to_page':
+ disableInkAnnotation();
+ viewer.magnification.fitToPage();
+ break;
+ case 'zoom_in':
+ {
+ disableInkAnnotation();
+ viewer.magnification.zoomIn();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'zoom_out':
+ {
+ disableInkAnnotation();
+ viewer.magnification.zoomOut();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'text_selection_tool':
+ {
+ disableInkAnnotation();
+ viewer.interactionMode = 'TextSelection';
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'pan_tool':
+ {
+ disableInkAnnotation();
+ viewer.interactionMode = 'Pan';
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'find_text': {
+ disableInkAnnotation();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display === 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ else
+ textSearchToolbarElement.style.display = 'block';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ break;
+ }
+ case 'print':
+ {
+ disableInkAnnotation();
+ viewer.print.print();
+ let editAnnotationToolbarElement = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbarElement.style.display == 'block')
+ editAnnotationToolbarElement.style.display = 'none';
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display == 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display == 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ }
+ break;
+ case 'highlights':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Highlight');
+ break;
+ case 'underline':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Underline');
+ break;
+ case 'strikethrough':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Strikethrough');
+ break;
+ case 'squiggly':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Squiggly');
+ break;
+ case 'edit_annotation':
+ disableInkAnnotation();
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block')
+ textSearchToolbarElement.style.display = 'none';
+ let editAnnotationToolbar = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbar !== null) {
+ if (editAnnotationToolbar.style.display === 'block') {
+ editAnnotationToolbar.style.display = 'none';
+ }
+ else {
+ editAnnotationToolbar.style.display = 'block';
+ }
+ }
+ break;
+ case 'line':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Line');
+ break;
+ case 'arrow':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Arrow');
+ break;
+ case 'rectangle':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Rectangle');
+ break;
+ case 'circle':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Circle');
+ break;
+ case 'polygon':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Polygon');
+ break;
+ case 'calibrate_distance':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('Distance');
+ break;
+ case 'calibrate_perimeter':
+ disableInkAnnotation();
+ viewer.annotation.setAnnotationMode('Perimeter');
+ break;
+ case 'calibrate_area':
+ disableInkAnnotation();
+ viewer.annotation.setAnnotationMode('Area');
+ break;
+ case 'calibrate_radius':
+ disableInkAnnotation();
+ viewer.annotation.setAnnotationMode('Radius');
+ break;
+ case 'calibrate_volume':
+ disableInkAnnotation();
+ viewer.annotation.setAnnotationMode('Volume');
+ break;
+ case 'freeText':
+ disableInkAnnotation();
+ viewer.annotationModule.setAnnotationMode('FreeText');
+ break;
+ case 'signature':
+ case 'formField_signature':
+ {
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block') {
+ textSearchToolbarElement.style.display = 'none';
+ }
+ }
+ break;
+ case 'ink':
+ if (!isInkEnabled) {
+ viewer.annotationModule.setAnnotationMode("Ink");
+ isInkEnabled = true;
+ }
+ else {
+ viewer.annotationModule.setAnnotationMode('None');
+ isInkEnabled = false;
+ }
+ break;
+ case 'textbox':
+ viewer.formDesignerModule.setFormFieldMode('Textbox');
+ break;
+ case 'password':
+ viewer.formDesignerModule.setFormFieldMode('Password');
+ break;
+ case 'checkbok':
+ viewer.formDesignerModule.setFormFieldMode('CheckBox');
+ break;
+ case 'radio_button':
+ viewer.formDesignerModule.setFormFieldMode('RadioButton');
+ break;
+ case 'drop_down':
+ viewer.formDesignerModule.setFormFieldMode('DropDown');
+ break;
+ case 'list_box':
+ viewer.formDesignerModule.setFormFieldMode('ListBox');
+ break;
+ case 'add_form_field':
+ {
+ disableInkAnnotation();
+ let editAnnotationToolbar = document.getElementById('editAnnotationToolbar');
+ if (editAnnotationToolbar.style.display === 'block') {
+ editAnnotationToolbar.style.display = 'none';
+ }
+ let textSearchToolbarElement = document.getElementById('textSearchToolbar');
+ if (textSearchToolbarElement.style.display === 'block') {
+ textSearchToolbarElement.style.display = 'none';
+ }
+ let formFieldToolbarElement = document.getElementById('formFieldToolbar');
+ if (formFieldToolbarElement.style.display === 'block') {
+ formFieldToolbarElement.style.display = 'none';
+ viewer.designerMode = false;
+ }
+ else {
+ formFieldToolbarElement.style.display = 'block';
+ viewer.designerMode = true;
+ }
+ }
+ break;
+ }
+ }
+}
+export default CustomToolbar;
+
+const root = createRoot(document.getElementById('sample'));
+root.render(
);
\ No newline at end of file