@hmcts/media-viewer 4.2.41 → 4.2.42-CME-776-dart-angular-20-rc1

package/README.md

@@ -495,14 +495,14 @@ Add these styles to your component.scss if you need them.
 If you're writing your own toolbar styles then do not import those
 
 ```
-// Import GOV.UK Frontend
-@import "~govuk-frontend/govuk/all";
-// Import Media Viewer Styles
-@import "~media-viewer/src/assets/all"; // use this to import all the styles 
+// Load GOV.UK Frontend
+@use "govuk-frontend/govuk/all" as *;
+// Load Media Viewer Styles
+@use "media-viewer/src/assets/all"; // use this to load all the styles
 ```
 Alternatively, it is possible to import file by file as required from ```assets/sass``` directory 
 
-eg. ```~media-viewer/assets/sass/toolbar/main```
+eg. ```media-viewer/assets/sass/toolbar/main```
 
 ## Customisations
 ### Toolbar

package/assets/all.scss

@@ -1,36 +1,34 @@
 // CDK overlays require a small set of structural styles to work correctly
 // As the component is not yet using Angular Material we have to include the style ourself
 // see https://material.angular.io/cdk/overlay/overview
-@import 'node_modules/@angular/cdk/overlay-prebuilt';
+@use '@angular/cdk/overlay-prebuilt';
 
-@import 'sass/settings';
-@import "sass/annotation-set";
-@import 'sass/bookmarks.scss';
-@import "sass/box-highlight";
-@import "sass/bookmarks";
-@import "sass/comment";
-@import "sass/comment-search";
-@import "sass/comment-set-header";
-@import "sass/comment-set-panel";
-@import "sass/comment-set-toggle";
-@import "sass/comments-summary-dialog";
-@import "sass/confirm-action-dialog";
-@import 'sass/document';
-@import "sass/image-viewer";
-@import 'sass/media-viewer';
-@import 'sass/outline-attachment';
-@import 'sass/participants-list';
-@import "sass/pdf-viewer";
-@import "sass/popup-toolbar";
-@import "sass/rectangle";
-@import "sass/tags";
-@import "sass/toolbar/main";
-@import 'sass/tabs';
-@import 'sass/tooltip';
-@import 'sass/comment-filter';
-@import 'sass/angular-tree-component';
-@import 'sass/redaction';
-@import 'pdfjs/pdf_viewer';
+@use 'sass/annotation-set';
+@use 'sass/bookmarks';
+@use 'sass/box-highlight';
+@use 'sass/comment';
+@use 'sass/comment-search';
+@use 'sass/comment-set-header';
+@use 'sass/comment-set-panel';
+@use 'sass/comment-set-toggle';
+@use 'sass/comments-summary-dialog';
+@use 'sass/confirm-action-dialog';
+@use 'sass/document';
+@use 'sass/image-viewer';
+@use 'sass/media-viewer';
+@use 'sass/outline-attachment';
+@use 'sass/participants-list';
+@use 'sass/pdf-viewer';
+@use 'sass/popup-toolbar';
+@use 'sass/rectangle';
+@use 'sass/tags';
+@use 'sass/toolbar/main';
+@use 'sass/tabs';
+@use 'sass/tooltip';
+@use 'sass/comment-filter';
+@use 'sass/angular-tree-component';
+@use 'sass/redaction';
+@use 'pdfjs/pdf_viewer';
 div.govuk-prose-scope, p {
   white-space: pre-wrap;
 }

package/assets/sass/comment-filter.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 .comment-filter {
   border: none;
   margin-bottom: 20px;
@@ -72,8 +74,10 @@
   font-weight: bold;
   position: relative;
   @include govuk-font($size: 19);
-  color: govuk-colour("blue");
-  cursor: pointer;
+  & {
+    color: govuk-colour("blue");
+    cursor: pointer;
+  }
 
 }
 

package/assets/sass/comment-search.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 a.disabledLink {
   pointer-events: none;
   cursor: default;

package/assets/sass/comment-set-header.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 .commentSummaryHeader {
   .has-scroll-bar & {
     right: 14px

package/assets/sass/comment.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 mv-anno-comment {
   .aui-comment {
     width: 85%;
@@ -100,14 +102,18 @@ mv-anno-comment {
 
   .aui-comment__author {
     @include govuk-font($size: 19);
-    display: block;
-    font-weight: bold;
+    & {
+      display: block;
+      font-weight: bold;
+    }
   }
 
 
   .aui-comment__meta {
     @include govuk-font($size: 16);
-    color: $govuk-secondary-text-colour;
+    & {
+      color: $govuk-secondary-text-colour;
+    }
   }
 
   .aui-comment__footer {

package/assets/sass/comments-summary-dialog.scss

@@ -33,11 +33,11 @@
 mv-confirm-action,
 mv-comments-summary {
   .dates {
+    overflow: hidden;
+    clear: both;
     * {
       font-size: 16px;
     }
-    overflow: hidden;
-    clear: both;
     .dates__from, .dates__to, .dates__tags {
       float: left;
     }

package/assets/sass/document.scss

@@ -1,3 +1,6 @@
+@use "govuk-frontend/govuk/base" as *;
+@use "settings" as *;
+
 .aui {
 
   &--show-comments {
@@ -57,28 +60,32 @@
 
 .aui__toolbar-container {
   @include aui-width-container;
-  border-left:1px solid govuk-colour("light-grey");
-  border-right: 1px solid govuk-colour("light-grey");
-  height: 100%;
-  position: relative;
-  left: 0; top: 0;
-  z-index: 1;
+  & {
+    border-left:1px solid govuk-colour("light-grey");
+    border-right: 1px solid govuk-colour("light-grey");
+    height: 100%;
+    position: relative;
+    left: 0; top: 0;
+    z-index: 1;
+  }
 }
 
 
 .aui__toolbar-button {
   @include govuk-font($size: 19);
-  background-color: govuk-colour("white");
-  border: 0 none;
-  border: 1px solid #f00;
-  color: govuk-colour("black");
-  cursor: pointer;
-  float: left;
-  height: 50px;
-  margin: 0;
-  padding-left: 15px;
-  padding-right: 15px;
-  position: relative;
+  & {
+    background-color: govuk-colour("white");
+    border: 0 none;
+    border: 1px solid #f00;
+    color: govuk-colour("black");
+    cursor: pointer;
+    float: left;
+    height: 50px;
+    margin: 0;
+    padding-left: 15px;
+    padding-right: 15px;
+    position: relative;
+  }
   &:first-child {
     &::after {
       background-color: #DEE0E2;
@@ -161,7 +168,9 @@
 .aui__window-container {
   @include aui-width-container;
   @include govuk-clearfix;
-  position: relative;
+  & {
+    position: relative;
+  }
 }
 
 
@@ -190,7 +199,9 @@
 
 .aui__document-page {
   @include aspect-ratio(1,1.414); // True A4 aspect ratio
-  margin-top: govuk-spacing(4);
+  & {
+    margin-top: govuk-spacing(4);
+  }
 
   &:first-child {
     margin-top: 0;
@@ -198,11 +209,13 @@
 
   &[data-page]::after {
     @include govuk-font(16);
-    color: $govuk-secondary-text-colour;
-    content: attr(data-page);
-    line-height: 1;
-    position: absolute; right: govuk-spacing(4);
-    bottom: govuk-spacing(4);
+    & {
+      color: $govuk-secondary-text-colour;
+      content: attr(data-page);
+      line-height: 1;
+      position: absolute; right: govuk-spacing(4);
+      bottom: govuk-spacing(4);
+    }
   }
 
   img {
@@ -239,4 +252,3 @@
   }
 
 }
-

package/assets/sass/participants-list.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 mv-participants-list {
 
   .participant__card {
@@ -21,8 +23,10 @@ mv-participants-list {
     border-bottom: 1px solid #ddd;
     margin-bottom: govuk-spacing(1);
     @include govuk-font($size: 16);
-    display: block;
-    font-weight: bold;
+    & {
+      display: block;
+      font-weight: bold;
+    }
   }
 
   .participant__name {

package/assets/sass/settings.scss

@@ -2,15 +2,23 @@
    #GENERAL CONFIGURATIONS
    ========================================================================== */
 
+@use "sass:math";
+@use "govuk-frontend/govuk/base" as *;
+
 $aui-page-width: 1220px;
 $aui-gutter: govuk-spacing(6);
-$aui-gutter-half: $govuk-gutter / 2;
+$aui-gutter-half: math.div($govuk-gutter, 2);
 
 // Assets path
 $aui-assets-path : "/public/images/";
 
 @mixin aspect-ratio($ratio-or-width, $height: null) {
-  $padding: if($height, percentage($height/$ratio-or-width), percentage(1/$ratio-or-width));
+  $padding: null;
+  @if $height {
+    $padding: math.percentage(math.div($height, $ratio-or-width));
+  } @else {
+    $padding: math.percentage(math.div(1, $ratio-or-width));
+  }
   &:before { content:''; float: left; padding-bottom: $padding;  }
   &:after  { content:''; display: table; clear: both;  }
 }

package/assets/sass/tabs.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 .govuk-tabs {
   p{
     @include govuk-font($size: 16);

package/assets/sass/tags.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "node_modules/ngx-chips/core/styles/core/core" as *;
+
 .tags {
   margin-bottom: 10px;
   &__renderer {
@@ -18,10 +21,8 @@
 }
 
 
-@import "node_modules/ngx-chips/core/styles/core/core";
-
 $foundation-primary: #1779ba;
-$foundation-primary-dark: darken($foundation-primary, 10%);
+$foundation-primary-dark: color.adjust($foundation-primary, $lightness: -10%);
 
 $foundation-theme: (
   container-border-bottom: 1px solid $foundation-primary
@@ -84,4 +85,3 @@ button {
 
   }
 }
-

package/assets/sass/toolbar/main.scss

@@ -1,18 +1,18 @@
-@import "buttons";
-@import "side-bar";
-@import "search-bar";
-@import "sub-toolbar";
-@import "thumbnail";
-@import "dialog-overlay";
-@import "field-label";
-@import "loading-bar";
-@import "debugging";
-@import "text-selection";
-@import "media";
-@import "redaction-toolbar";
-@import "icp-buttons";
-@import "icp-toolbar";
-@import "main-toolbar";
+@use "buttons";
+@use "side-bar";
+@use "search-bar";
+@use "sub-toolbar";
+@use "thumbnail";
+@use "dialog-overlay";
+@use "field-label";
+@use "loading-bar";
+@use "debugging";
+@use "text-selection";
+@use "media";
+@use "redaction-toolbar";
+@use "icp-buttons";
+@use "icp-toolbar";
+@use "main-toolbar";
 
 .hidden {
   display: none !important;

package/assets/sass/toolbar/search-bar.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/govuk/base" as *;
+
 .searchbar {
   z-index: 100;
   position: absolute;
@@ -14,8 +16,10 @@
   }
   span {
     @include govuk-font($size: 16);
-    color: $govuk-secondary-text-colour;
-    min-width: 110px;
+    & {
+      color: $govuk-secondary-text-colour;
+      min-width: 110px;
+    }
   }
 }