@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

package/css/white/controls/pdf-viewer/pdf-viewer.css

@@ -0,0 +1,635 @@
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/viewer.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/sketchpad.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/zoom.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/form.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/compare-side-by-side.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/compare.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/custom.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/viewer-theme.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/print.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/debugger.css');
+
+html[dir='ltr'] body {
+    background-color: #F5F6FA;
+}
+
+html[dir='ltr'] select, html[dir='ltr'] span, html[dir='ltr'] div, html[dir='ltr'] input {
+    font-family: 'GraphikRegular' !important;
+}
+
+#viewerContainer {
+    margin-right: 4px;
+}
+
+#viewerContainer::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+#viewerContainer::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 8px;
+}
+
+#viewerContainer::-webkit-scrollbar-thumb {
+    background: #BDBDBD;
+    border-radius: 4px;
+}
+
+#viewerContainer::-webkit-scrollbar-thumb:hover {
+    background: #828282;
+}
+
+#loadingBar .progress {
+    background-color: #ff5b2d;
+}
+
+#loadingBar {
+    border-bottom: 1px solid #e0e0e0;
+    background: #F5F6FA;
+}
+
+#toolbarContainer, .findbar, .secondaryToolbar, .editorParamsToolbar {
+    background-color: #fff;
+}
+
+#toolbarSidebar {
+    background-color: #fff;
+    box-shadow: none;
+    border-right: 1px solid #e0e0e0;
+}
+
+#toolbarContainer, .findbar, .secondaryToolbar, .editorParamsToolbar {
+    box-shadow: none; 
+    border-bottom: 1px solid #e0e0e0;
+}
+
+#sidebarContainer {
+    border-top: 1px solid #e0e0e0;
+}
+
+#sidebarContent {
+    background: #E0E0E0;
+    box-shadow: none;
+    border-right: 1px solid #e0e0e0;
+}
+
+input#pageNumber {
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+.horizontalToolbarSeparator {
+    background: #e0e0e0;
+}
+
+.toolbarButton.toggled, .splitToolbarButton.toggled > .toolbarButton.toggled, .secondaryToolbarButton.toggled {
+    background: #BDBDBD;
+    color: #222d44;
+}
+
+.toolbarButton.toggled::before, .secondaryToolbarButton.toggled::before {
+    background: #4F4F4F;
+}
+
+.toolbarButton::before, .secondaryToolbarButton::before, .dropdownToolbarButton::after, .treeItemToggler::before {
+    background: #4F4F4F;
+    opacity: 1;
+}
+
+.toolbarButton:hover::before, .toolbarButton:focus-visible::before, .secondaryToolbarButton:hover::before, .secondaryToolbarButton:focus-visible::before {
+    background: #4F4F4F;
+    opacity: 1;
+}
+
+.toolbarButton, .dropdownToolbarButton, .secondaryToolbarButton, .dialogButton {
+    color: #222d44;
+}
+
+#thumbnailView::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+#thumbnailView::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 8px;
+}
+
+#thumbnailView::-webkit-scrollbar-thumb {
+    background: #BDBDBD;
+    border-radius: 4px;
+}
+
+#thumbnailView::-webkit-scrollbar-thumb:hover {
+    background: #828282;
+}
+
+.thumbnail.selected > .thumbnailSelectionRing {
+    background-color: #BDBDBD;
+}
+
+.dropdownToolbarButton > select {
+    background: #F5F6FA;
+}
+
+[dir="ltr"] .secondaryToolbar, [dir="ltr"] .editorParamsToolbar {
+    box-shadow: 0 4px 16px rgba(0,0,0,.1);
+    border-radius: 8px;
+}
+
+[dir="ltr"] .doorHangerRight:after {
+    right: 14px;
+}
+
+[dir="ltr"] .doorHangerRight:before {
+    display: none;
+}
+
+.dlg-overlay {
+    background: rgba(34, 45, 68, .2);
+}
+
+.compare-dlg-wrap {
+    font-family: 'GraphikRegular';
+    background: #fff;
+    padding: 24px;
+    border-radius: 8px;
+    width: 600px;
+    border: none;
+    user-select: none;
+}
+
+.compare-dlg-header, .compare-panel_header {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    background: transparent;
+    border-bottom: none;
+    padding: 0;
+}
+
+.compare-panel_header {
+    margin-bottom: 12px;
+}
+
+.compare-dlg-footer {
+    border-top: none;
+    padding: 0;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.close {
+    opacity: 1;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' stroke-width='2px' stroke='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32.333l16-16m0 0l-16-16m16 16l16 16m-16-16l16-16'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.compare-dlg-wrap .close {
+    width: 32px;
+    height: 32px;
+    top: -24px;
+    right: -72px;
+}
+
+.close::before, .close::after  {
+    display: none;
+}
+
+.select {
+    position: relative;
+}
+
+.select:before {
+    content: '';
+    position: absolute;
+    border: 2px solid #0097ff;
+    border-radius: 10px;
+    left: -5px;
+    right: -5px;
+    top: -5px;
+    bottom: -5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: .1s;
+}
+
+.select.active:before {
+    opacity: .2;
+    visibility: visible;
+}
+
+.select > input {
+    width: 100%;
+    height: 32px;
+    border-radius: 8px;
+    border: none;
+    background: #fff;
+    cursor: pointer;
+    position: relative;
+    font-size: 10pt;
+    padding: 0 12px 0 12px;
+    box-sizing: border-box;
+}
+
+.select > input:disabled {
+    background: #fff !important;
+    user-select: none;
+}
+
+.select::after {
+    content: '';
+    display: block;
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12 8' style='enable-background:new 0 0 12 8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23BDBDBD;stroke-width:1;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='0.7,0.7 6,6.5 11.3,0.7 '/%3E%3C/svg%3E%0A");
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: calc(50% - 5px);
+    right: 12px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: all .3s ease;
+}
+
+.select.active::after {
+    transform: rotate(-180deg);
+    transition: all .3s ease;
+}
+
+.select ul {
+    background: #fff;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    border-radius: 8px;
+    font-size: 10pt;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+.select > div {
+    overflow: hidden;
+    display: none;
+    position: absolute;
+    background: #fff;
+    width: 100%;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,.1);
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: 10000;
+}
+
+.select.active > div {
+    display: block;  
+}
+
+.select ul > li {
+    line-height: 24px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.select ul > li:hover {
+    background: #F5F6FA;
+}
+
+#toolbarViewerMiddle .select {
+    min-width: 165px;
+    margin: 2px 6px 0;
+}
+
+#toolbarViewerMiddle .select > input:disabled {
+    background: #F5F6FA  !important;
+    height: 28px !important;
+}
+
+#toolbarViewerMiddle .select.active:before {
+    visibility: hidden;
+}
+
+#toolbarViewerMiddle .select > div {
+    top: calc(100% + 3px);
+}
+
+#toolbarViewerMiddle .select ul {
+    max-height: unset;
+    overflow: hidden;
+}
+
+.select ul::-webkit-scrollbar {
+    width: 4px;
+}
+
+.select ul::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 8px;
+}
+
+.select ul::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 2px;
+    height: 20px;
+}
+
+.select ul::-webkit-scrollbar-thumb:hover {
+    background: #BDBDBD;
+}
+
+.compare-dlg-wrap .uk-button {
+    font-family: 'GraphikRegular';
+    font-size: 14px;
+    outline: none;
+    height: 32px;
+    font-weight: 500;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    position: relative;
+    border-radius: 8px;
+    padding: 0;
+    background: #fff;
+    color: #0097ff;
+    border: 1px solid #0097ff;
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    min-width: 96px;
+    justify-content: center;
+    margin-left: 8px;
+    margin-right: 0;
+}
+
+.compare-dlg-wrap .uk-button:hover {
+    -webkit-transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease;
+}
+
+.compare-dlg-wrap .uk-button-primary:active, .compare-dlg-wrap .uk-button-primary:focus, .compare-dlg-wrap .uk-button-primary:hover {
+    background: rgba(0, 151, 255, .8);
+    border-color: transparent;
+}
+
+.compare-dlg-wrap .uk-button:active:before {
+    opacity: .2;
+    visibility: visible;
+}
+
+.compare-dlg-wrap .uk-button:before {
+    content: '';
+    position: absolute;
+    border: 2px solid #0097ff;
+    border-radius: 10px;
+    left: -5px;
+    right: -5px;
+    top: -5px;
+    bottom: -5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: .1s;
+}
+
+.compare-dlg-wrap .uk-button-primary {
+    background: #0097ff;
+    color: #fff;
+}
+
+.compare-dlg-wrap .wrap-inner {
+    width: unset;
+}
+
+.compare-dlg-wrap .wrap-inner-bg {
+    background: #F5F6FA;
+    border-radius: 8px;
+    border: none;
+}
+
+
+.compare-viewer-title {
+    background: #222d44;
+}
+
+.compare-viewer-title .close {
+    height: 20px;
+    width: 20px;
+    top: calc(50% - 10px);
+    z-index: 1000;
+    opacity: 1;
+}
+
+.compare-ui-label {
+    background-color: rgba(34, 45, 68,.75);
+}
+
+.compare-panel {
+    box-shadow: 0 0 16px rgba(0,0,0,.1);
+    border-radius: 8px;
+    border: none;
+    padding: 24px;
+    background: #fff;
+}
+
+.compare-panel_items, .compare-panel_item-row {
+    padding: 0;
+}
+
+.compare-panel_item-row.selected {
+    border: 1px solid #E0E0E0;
+}
+
+.compare-panel .close {
+    width: 20px;
+    height: 20px;
+    top: 0;
+    right: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' stroke-width='2px' stroke='%23e0e0e0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32.333l16-16m0 0l-16-16m16 16l16 16m-16-16l16-16'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.compare-panel_toolbar {
+    padding: 0;
+    margin-bottom: 18px;
+    background-color: transparent;
+}
+
+.compare-toolbar-btn {
+    margin: 0;
+    margin-right: 8px;
+    border: 1px solid #bdbdbd;
+}
+
+.compare-toolbar-btn.active {
+    border: 1px solid #0097ff;
+}
+
+.compare-panel_doc-color.docA {
+    border-left: 5px solid #ff5b2d;
+}
+
+.compare-panel_doc-color.docB {
+    border-left: 5px solid #0097ff;
+}
+
+.compare-viewer-toolbar .control-grp {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 16px rgba(0,0,0,.1);
+}
+
+#panelCompareType {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 16px rgba(0,0,0,.1);
+}
+
+#documentPropertiesDialog {
+    text-align: left;
+    width: 360px;
+    color: #222d44;
+    border-radius: 8px;
+    padding: 24px;
+    font-size: 13px;
+    border: none;
+}
+
+.row > * {
+    padding: 0;
+    margin: 0;
+}
+
+#documentPropertiesDialog .row > * {
+    min-width: 135px;
+    padding: 0;
+}
+
+#documentPropertiesDialog .row > p {
+    padding-left: 8px;
+}
+
+dialog .separator {
+    background: #e0e0e0;
+}
+
+.dialogButton {
+    font-family: 'GraphikRegular';
+    font-size: 14px;
+    outline: none;
+    height: 32px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    position: relative;
+    border-radius: 8px;
+    padding: 0;
+    text-transform: none;
+    min-width: 96px;
+    background: #0097ff;
+    color: #fff;
+    margin: 0 !important;
+}
+
+.dialogButton:active, .dialogButton:focus, .dialogButton:hover {
+    background: rgba(0, 151, 255, .8);
+    border-color: transparent;
+}
+
+.dialogButton:active:before {
+    opacity: .2;
+    visibility: visible;
+}
+
+.dialogButton:before {
+    content: '';
+    position: absolute;
+    border: 2px solid #0097ff;
+    border-radius: 10px;
+    left: -5px;
+    right: -5px;
+    top: -5px;
+    bottom: -5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: .1s;
+}
+
+#printServiceDialog {
+    width: 260px;
+    border: none;
+    border-radius: 8px;
+    padding: 24px;
+}
+
+#printServiceDialog span {
+    padding: 0;
+    padding-left: 8px;
+    font-size: 13px;
+    color: #222d44;
+}
+
+#printServiceDialog > .row:first-child > span, #printServiceDialog #printCancel span {
+    padding: 0;
+}
+
+#printServiceDialog #printCancel {
+    background: #fff;
+    border: 1px solid #0097ff !important;
+}
+
+#printServiceDialog #printCancel span {
+    color: #0097ff;
+}
+
+#printServiceDialog .buttonRow {
+    margin-top: 8px;
+}
+
+.context-menu-list {
+    border-radius: 8px;
+    background: #fff;
+    border: none;
+    box-shadow: 0 0 16px rgba(0,0,0,.1);
+    overflow: hidden;
+    padding: 0;
+}
+
+.context-menu-separator {
+    margin: 0;
+    border-bottom: 1px solid #E0E0E0;
+}
+
+.context-menu-item {
+    line-height: 32px;
+    padding: 0 2em;
+    color: #222d44;
+}
+
+.context-menu-item.context-menu-hover {
+    background-color: #F5F6FA;
+    color: #222d44;
+}
+
+.context-menu-icon::before {
+    color: #BDBDBD;
+}
+
+.context-menu-item.context-menu-hover::before {
+    color: #222d44;
+}
+
+.treeItem a {
+    color: #222d44;
+}
+
+.treeItem.selected > a {
+    background: #828282;
+    color: #fff;
+    border-radius: 4px;
+}
+
+.treeItemToggler:hover, .treeItemToggler:hover + a, .treeItemToggler:hover ~ .treeItems, .treeItem > a:hover {
+    color: #222d44;
+    background-color: #BDBDBD;
+    border-radius: 4px;
+}

package/css/white/controls/pdf-viewer/print.css

@@ -0,0 +1,52 @@
+@media print {
+    body > .body__sidebar {
+        display: none !important;
+    }
+
+    #printContainer .body__sidebar {
+        display: block !important;
+        position: static !important;
+        width: 100% !important;
+        height: auto !important;
+        overflow: visible !important;
+        page-break-before: always !important;
+        border: none !important;
+        right: 0 !important;
+    }
+
+    #printContainer .notes-print-header {
+        display: block !important;
+        font-size: 18px !important;
+        padding: 20px 5px 20px 5px;
+        font-weight: bold;
+    }
+
+    #printContainer .body__sidebar .body__sidebar-note-date {
+        font-size: 14px !important;
+    }
+
+    #printContainer .body__sidebar .body__sidebar-note-name,
+    #printContainer .body__sidebar .body__sidebar-note-body {
+        font-size: 16px !important;
+    }
+
+    #printContainer .body__sidebar-note-body {
+        white-space: pre-wrap;
+    }
+
+    #printContainer .body__sidebar-note-body textarea {
+        display: none;
+    }
+
+    #printContainer .body__sidebar .body__sidebar-note-expand-btn {
+        display: none !important;
+    }
+
+    #printContainer .body__sidebar-close {
+        display: none !important;
+    }
+
+    #printContainer canvas.zoom {
+        display: none;
+    }
+}

package/css/white/controls/pdf-viewer/sketchpad.css

@@ -0,0 +1,16 @@
+.textLayer {
+    z-index: 100;
+}
+
+.svgsketch-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 50;
+}
+
+.svgsketch-wrap.active {
+    z-index: 150;
+}