myrta-ui 17.0.19 → 17.0.20

package/src/lib/components/pdf-viewer/assets/pdf-viewer__sidebar.less

@@ -0,0 +1,173 @@
+::ng-deep {
+  mrx-pdf-viewer {
+    ngx-extended-pdf-viewer {
+      &.mrx-pdf-viewer {
+        pdf-sidebar {
+          pdf-sidebar-toolbar {
+            #toolbarSidebar {
+              background-color: var(--neutral-bg-island-default, #F8F9FA);
+              padding: var(--spacing-1, 4px);
+              height: 28px !important;
+              box-sizing: border-box;
+              width: 100%;
+
+              button.toolbarButton {
+                margin-top: 0;
+                margin-bottom: 0;
+                width: var(--sizing-6, 24px);
+                max-width: var(--sizing-6, 24px);
+                height: 20px;
+                padding: 0;
+                font-family: 'mrx-icon-font' !important;
+                color: var(--neutral-icon-default, #33373C);
+                line-height: 1;
+                font-size: var(--body-lg-font-size, 16px);
+                box-sizing: border-box;
+                border-radius: var(--sizing-1, 4px);
+                outline: none;
+                border: 1px solid transparent;
+
+                &:focus {
+                  border: none;
+                }
+
+                &:hover {
+                  background: var(--brand-bg-tertiary-hover, #edf5ff);
+                }
+
+                &.toggled {
+                  border: 1px solid var(--brand-bg-primary-default, #2A6AB8);
+                  background: var(--brand-bg-secondary-default, #EDF5FF);
+                }
+
+                svg {
+                  display: none;
+                }
+
+                &#viewThumbnail {
+                  &::after {
+                    content: "\e968";
+                  }
+                }
+
+                &#viewOutline {
+                  &::after {
+                    content: "\ea1b";
+                  }
+                }
+
+                &#viewLayers {
+                  &::after {
+                    content: "\e935";
+                  }
+                }
+              }
+            }
+          }
+
+          pdf-sidebar-content {
+            #sidebarContent {
+              top: 28px !important;
+              background-color: var(--neutral-bg-island-default, #F8F9FA);
+            }
+          }
+        }
+
+        .html {
+          #thumbnailView,
+          #outlineView,
+          #layersView {
+            &::-webkit-scrollbar {
+              width: var(--sizing-2, 8px);
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background: var(--neutral-bg-stroke-default, #BFC5CC);
+              border-radius: var(--sizing-1, 4px);
+            }
+
+            &::-webkit-scrollbar-thumb:hover {
+              background: var(--neutral-bg-stroke-default, #BFC5CC);
+            }
+          }
+
+          #thumbnailView {
+            padding: var(--spacing-3, 16px) var(--sizing-10, 40px);
+            width: calc(100% - var(--sizing-20, 80px));
+
+            .thumbnail {
+              margin: 0;
+              border: var(--spacing-1) solid rgba(0, 0, 0, 0);
+              border-radius: 0;
+
+              &.selected {
+                border: var(--spacing-1, 4px) solid var(--brand-bg-secondary-selected, #BED6F1) !important;
+              }
+            }
+          }
+
+          #layersView {
+            padding: var(--spacing-3, 16px);
+            width: calc(100% - var(--spacing-6, 64px));
+          }
+
+          #layersView,
+          #outlineView.treeWithDeepNesting {
+            .treeItem {
+              outline: none;
+
+              &:focus, &:hover {
+                outline: none;
+              }
+
+              & > a {
+                color: var(--neutral-text-primary, #262626);
+                font-size: var(--body-sm-font-size, 12px);
+                line-height: var(--body-lg-bold-font-size, 16px);
+                outline: none;
+                border: none;
+                padding: calc(var(--spacing-1, 4px) / 2) var(--spacing-1, 4px);
+                min-width: calc(100% - var(--sizing-3, 12px));
+
+                &:focus {
+                  outline: none;
+                }
+              }
+
+              &.selected {
+                & > a {
+                  border-radius: var(--spacing-1, 4px);
+                  border: 1px solid var(--brand-bg-primary-default, #2A6AB8);
+                }
+              }
+
+              input[type=checkbox]:checked {
+                accent-color: var(--brand-bg-primary-default, #2A6AB8) !important;
+              }
+            }
+
+            .treeItemToggler {
+              font-family: 'mrx-icon-font' !important;
+              color: var(--neutral-icon-default, 33373C);
+              line-height: 1;
+              font-size: var(--body-lg-font-size, 16px);
+              box-sizing: border-box;
+              cursor: pointer;
+
+              &:before {
+                content: "\e926";
+              }
+
+              &.treeItemsHidden {
+                &:before {
+                  content: "\e925";
+                }
+              }
+            }
+          }
+        }
+      }
+
+    }
+  }
+}

package/src/lib/components/pdf-viewer/assets/pdf-viewer__toolbar.less

@@ -0,0 +1,210 @@
+.mrx-pdf-viewer {
+  &__toolbar {
+    display: flex;
+    padding: var(--spacing-1, 4px);
+    justify-content: space-between;
+    align-items: center;
+    background: var(--neutral-bg-island-default, #F8F9FA);
+    box-shadow: 0px 1px 4px 0px rgba(59, 67, 87, 0.10);
+    font-family: var(--body-sm-font-family, 'PT Sans');
+    font-size: var(--body-sm-font-size, 12px);
+    font-style: normal;
+    font-weight: var(--body-extra-sm-font-weight, 400);
+    line-height: var(--body-lg-bold-font-size, 16px);
+
+    ::ng-deep {
+      .mrx-input-select {
+        .ng-select.mrx-input-select-md {
+          .ng-select-container {
+            min-height: 28px !important;
+            min-width: var(--sizing-10);
+            padding: 2px;
+            padding-left: var(--spacing-1);
+            padding-right: var(--spacing-2);
+
+            .ng-value-container {
+              padding-left: var(--spacing-1) !important;
+
+              .ng-input {
+                padding-left: var(--spacing-1) !important;
+              }
+
+              .ng-value .ng-value-label {
+                font-size: var(--body-sm-font-size);
+                line-height: var(--body-sm-line-height);
+              }
+            }
+          }
+
+          .ng-value .ng-value-label {
+            font-size: var(--body-sm-font-size);
+            line-height: var(--body-sm-line-height);
+          }
+
+          .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+            min-height: var(--sizing-5);
+            padding: calc(var(--spacing-1) / 2) var(--spacing-2);
+
+            span {
+              font-size: var(--body-sm-font-size);
+              line-height: var(--body-sm-line-height);
+            }
+
+            &.ng-option-selected {
+              &:before {
+                content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3336 4.6665L6.00032 11.9998L2.66699 8.66649' stroke='%23000' stroke-width='0.999998' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+                right: var(--spacing-2);
+              }
+            }
+          }
+        }
+      }
+
+      .mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input {
+        padding: var(--spacing-1, 4px) var(--spacing-2, 8px) !important;
+        min-height: 28px;
+        border: var(--border-width-default, 1px) solid var(--neutral-bg-stroke-default, #BFC5CC);
+        text-align: right;
+        font-size: var(--body-sm-font-size, 12px) !important;
+      }
+
+      .mrx-icon {
+        color: var(--neutral-icon-default);
+
+        &.icon-font-20 {
+          font-size: 20px !important;
+        }
+
+        &.icon-font-24 {
+          font-size: 24px !important;
+        }
+      }
+
+      .mrx-icon-button {
+        position: relative;
+        max-width: 36px;
+        max-height: 28px;
+        box-sizing: border-box;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: var(--border-radius-1, 4px);
+          border: 1px solid transparent;
+          transition: .2s;
+        }
+
+        &--toggled {
+          .mrx-icon-button {
+            background: var(--brand-bg-secondary-default, #EDF5FF);
+
+            &:after {
+              border-color: var(--brand-bg-primary-default, #2A6AB8);
+            }
+          }
+        }
+
+        &:active {
+          &:after {
+            border-color: var(--brand-bg-primary-default, #2A6AB8);
+          }
+          background: var(--brand-bg-secondary-default, #EDF5FF);
+        }
+
+        &.icon-search {
+          &.mrx-pdf-viewer__find-button {
+            position: relative;
+          }
+        }
+      }
+
+      .mrx-pdf-viewer__findbar {
+        .mrx-input-text.mrx-input-text-lg input {
+          font-size: var(--body-sm-font-size, 12px) !important;
+        }
+
+        mrx-input-text {
+          width: 100%;
+
+          .mrx-input-text {
+            box-shadow: 0px 1px 4px 0px rgba(58, 58, 58, 0.30);
+            border-radius: var(--border-radius-1);
+          }
+        }
+
+        mrx-icon-button {
+          .mrx-icon-button {
+            max-width: unset;
+            max-height: unset;
+          }
+        }
+
+        &-result {
+          display: flex;
+          padding: 6px var(--spacing-2, 8px);
+          justify-content: center;
+          align-items: center;
+          gap: 10px;
+          border-radius: var(--sizing-1, 4px);
+          background: var(--brand-bg-secondary-default, #EDF5FF);
+          white-space: nowrap;
+        }
+      }
+    }
+
+    &--nav {
+      display: flex;
+      align-items: center;
+
+      span {
+        color: var(--neutral-text-tertiary, #71767E);
+      }
+    }
+
+    &__find-button {
+      position: relative;
+    }
+  }
+
+  &__findbar {
+    position: absolute;
+    top: 47px;
+    left: 35px;
+    z-index: 100;
+    background: white;
+    width: auto;
+    display: flex;
+    padding: var(--spacing-2, 8px);
+    border-radius: var(--sizing-1, 4px);
+    box-shadow: 0px 1px 4px 0px rgba(58, 58, 58, 0.30);
+    max-height: 44px;
+    box-sizing: border-box;
+
+    &:before {
+      position: absolute;
+      content: "";
+      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2012%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M24%2012H0L12%200L24%2012Z%22%20fill%3D%22white%22/%3E%0A%3C/svg%3E");
+      background-repeat: no-repeat;
+      top: -12px;
+      left: 12px;
+      width: 24px;
+      height: 12px;
+    }
+
+    .searchText {
+      position: absolute;
+      top: 20px;
+    }
+
+    ::ng-deep {
+      .mrx-input-text.mrx-input-text {
+        max-width: 279px;
+        min-width: 279px;
+      }
+    }
+  }
+}

package/src/lib/components/pdf-viewer/pdf-viewer.component.html

@@ -0,0 +1,188 @@
+<ng-template #customToolbar>
+  <div class="mrx-pdf-viewer__toolbar" id="toolbarViewer">
+    <div class="d-flex">
+      <mrx-icon-button
+          *ngIf="showSidebarButton"
+          [iconClass]="'icon-burger'"
+          [size]="'medium'"
+          [state]="'default'"
+          (mrxClick)="onSidebarViewClick()"
+          [ngClass]="{'mrx-icon-button--toggled': sidebarVisible}"
+          [customClasses]="'py-1 px-2'"
+          [title]="'test'"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          *ngIf="showFindbarButton"
+          [iconClass]="'icon-search'"
+          [size]="'medium'"
+          [state]="'default'"
+          (mrxClick)="onSearchClick()"
+          [customClasses]="'py-1 px-2 mrx-pdf-viewer__find-button'"
+          [ngClass]="{'mrx-icon-button--toggled': isSearchPanelVisible}"
+      ></mrx-icon-button>
+      <div *ngIf="isSearchPanelVisible" class="mrx-pdf-viewer__findbar" #findMenu>
+        <mrx-input-text
+          [customClasses]="findState === 1 ? 'mrx-input-error' :''+'searchText'"
+          placeholder="Найти в документе..."
+          [ngModel]="searchQuery"
+          (ngModelChange)="onSearch($event)">
+        </mrx-input-text>
+        <mrx-icon-button
+          [iconClass]="'icon-chevron-left'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'p-1'"
+          (mrxClick)="findPrevious()"
+        ></mrx-icon-button>
+        <mrx-icon-button
+          [iconClass]="'icon-chevron-right'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'p-1'"
+          (mrxClick)="findNext()"
+        ></mrx-icon-button>
+        <div *ngIf="findState === 0 || findState === 2" class="mrx-pdf-viewer__findbar-result">
+          {{currentFind}} из {{totalFound}} совпадений
+        </div>
+        <div *ngIf="findState === 1" class="color-negative d-flex align-items-center">Фраза не найдена</div>
+      </div>
+      <div class="mrx-pdf-viewer__toolbar--nav">
+        <mrx-icon-button
+          [iconClass]="'icon-in-the-end-left'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+          (mrxClick)="onPageChange(1)"
+        ></mrx-icon-button>
+        <mrx-icon-button
+          [iconClass]="'icon-chevron-left'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+          (mrxClick)="onPageChange(page - 1 || 1)"
+        ></mrx-icon-button>
+        <mrx-input-number [size]="'small'" [customClasses]="'wpx-56'"
+          [ngModel]="page"
+          [numberType]="'int'"
+          [minValue]="1"
+          [maxValue]="pageCount"
+          [isAutoCorrectingValue]="true"
+          (ngModelChange)="onPageChange($event)"
+        ></mrx-input-number>
+        <span class="mx-1">из {{pageCount}}</span>
+        <mrx-icon-button
+          [iconClass]="'icon-chevron-right'"
+          [size]="'medium'"
+          [state]="'default'"
+          (mrxClick)="onNextPage()"
+          [customClasses]="'py-1 px-2'"
+        ></mrx-icon-button>
+        <mrx-icon-button
+          [iconClass]="'icon-in-the-end-right'"
+          [size]="'medium'"
+          [state]="'default'"
+          (mrxClick)="onLastPage()"
+          [customClasses]="'py-1 px-2'"
+        ></mrx-icon-button>
+      </div>
+    </div>
+
+    <div class="d-flex">
+      <mrx-icon-button
+        (mrxClick)="zoomClick(false)"
+        [iconClass]="'icon-minus'"
+        [size]="'medium'"
+        [state]="'default'"
+        [customClasses]="'py-1 px-2'"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          (mrxClick)="zoomClick(true)"
+          [iconClass]="'icon-plus'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+      ></mrx-icon-button>
+      <mrx-input-select
+        [size]="'medium'"
+        [customClasses]="'wpx-156'"
+        [items]="zoomOptions"
+        (ngModelChange)="onZoomLevelSelect($event)"
+        [ngModel]="selectedZoom"
+        [clearable]="false">
+      </mrx-input-select>
+    </div>
+
+    <div class="d-flex">
+      <mrx-icon-button
+        [iconClass]="'icon-fc-text'"
+        [size]="'medium'"
+        *ngIf="showHandToolButton"
+        [ngClass]="{'mrx-icon-button--toggled': !handTool}"
+        [state]="'default'"
+        (mrxClick)="onHandToolClick()"
+        [customClasses]="'py-1 px-2'"
+      ></mrx-icon-button>
+      <mrx-icon-button
+        [iconClass]="'icon-reload'"
+        [size]="'medium'"
+        *ngIf="showRotateButton"
+        [state]="'default'"
+        (mrxClick)="onRotate(1)"
+        [customClasses]="'py-1 px-2'"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          [iconClass]="'icon-return'"
+          [size]="'medium'"
+          *ngIf="showRotateButton"
+          [state]="'default'"
+          (mrxClick)="onRotate(-1)"
+          [customClasses]="'py-1 px-2'"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          [iconClass]="'icon-arrow-expand'"
+          *ngIf="showExpandButton"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+          (mrxClick)="onExpandModeClick()"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          [iconClass]="'icon-print'"
+          *ngIf="showPrintButton"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+          (mrxClick)="onPrintClick()"
+      ></mrx-icon-button>
+      <mrx-icon-button
+          *ngIf="showDownloadButton"
+          [iconClass]="'icon-download'"
+          [size]="'medium'"
+          [state]="'default'"
+          [customClasses]="'py-1 px-2'"
+          (mrxClick)="onDownloadClick()"
+      ></mrx-icon-button>
+    </div>
+
+  </div>
+</ng-template>
+
+<ngx-extended-pdf-viewer
+    #pdfViewer
+    class="mrx-pdf-viewer"
+    [page]="page"
+    [sidebarVisible]="showSidebarButton && sidebarVisible"
+    (sidebarVisibleChange)="onSidebarVisibleChange($event)"
+    [customToolbar]="customToolbar"
+    [showSidebarButton]="true"
+    (pagesLoaded)="onPagesLoaded($event)"
+    [zoom]="selectedZoom.value"
+    (zoomChange)="onZoomChange($event)"
+    [textLayer]="true"
+    (pageChange)="onPageChange($event)"
+    [handTool]="handTool"
+    [rotation]="rotation"
+    (updateFindMatchesCount)="onUpdateMatchCase($event)"
+    (updateFindState)="onFindStateChanged($event)"
+    [src]="src">
+</ngx-extended-pdf-viewer>

package/src/lib/components/pdf-viewer/pdf-viewer.component.less

@@ -0,0 +1,4 @@
+@import "assets/pdf-viewer__toolbar";
+@import "assets/pdf-viewer__sidebar";
+@import "assets/pdf-viewer__container";
+@import "assets/pdf-viewer__print-dialog";