@net7/components 4.3.1 → 4.3.2

package/lib/components/text-viewer/text-viewer.d.ts

@@ -60,11 +60,12 @@ export interface TextViewerData {
      */
     facsimile?: {
         uri: string;
-        scans?: [];
+        scans?: string[];
         options?: {
             showHomeControl?: boolean;
             showFullPageControl?: boolean;
             showNavigator?: boolean;
+            showNavigationControl?: boolean;
         };
     };
     libOptions?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/components",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "dependencies": {
     "apexcharts": "^3.8.5",
     "d3": "^7.1.1",

package/src/lib/styles/components/_image-viewer.scss

@@ -12,6 +12,7 @@
 .n7-image-viewer {
     position: relative;
     background-color: $image-viewer-background-color;
+
     &__viewer {
         height: $image-viewer-height;
     }
@@ -30,9 +31,11 @@ For our custom thumbs please refer to ImageViewerTools. */
         transform: translateY(-50%);
         right: $space * 2;
     }
+
     &__thumb-list {
         list-style: none;
     }
+
     &__thumb-item {
         width: $image-viewer-thumb-width !important;
         height: $image-viewer-thumb-height !important;
@@ -42,12 +45,15 @@ For our custom thumbs please refer to ImageViewerTools. */
         background-repeat: none;
         border: 2px solid transparent;
         cursor: pointer;
+
         &:last-child {
             margin-bottom: 0;
         }
+
         &:hover:not(.is-active) {
             border: 2px solid $image-viewer-thumb-hover-border-color;
         }
+
         &.is-active {
             border: 2px solid $image-viewer-thumb-active-border-color;
         }
@@ -61,10 +67,12 @@ For our custom thumbs please refer to ImageViewerTools. */
     position: absolute;
     top: $space * 2;
     right: $space * 2;
+
     .n7-image-viewer__controls-list {
         margin: 0;
         padding: 0;
     }
+
     .n7-image-viewer__controls-item {
         display: flex !important;
         align-items: center;
@@ -73,19 +81,23 @@ For our custom thumbs please refer to ImageViewerTools. */
         height: $image-viewer-control-height;
         margin-bottom: $space !important;
         cursor: pointer;
-        background-color: rgba(#000000, 0.9);
+        background-color: rgba(#000, 0.9);
         border-radius: $border-radius;
+
         span {
             color: rgba($color-text-inverse, 0.8);
             font-size: $image-viewer-control-icon-size;
             transition: color $transition-durations;
         }
+
         &:hover {
-            background-color: rgba(#000000, 1);
+            background-color: rgba(#000, 1);
+
             span {
                 color: rgba($color-text-inverse, 1);
             }
         }
+
         &:last-child {
             margin-bottom: 0;
         }
@@ -100,20 +112,24 @@ For our custom thumbs please refer to ImageViewerTools. */
     position: absolute !important;
     top: 50%;
     transform: translateY(-50%);
+
     span {
         color: rgba($color-text-inverse, 0.8);
         font-size: $font-size-xxl * 2;
         transition: all $transition-durations;
         cursor: pointer !important;
-        text-shadow: 0 2px 4px rgba(#000000, 0.5);
+        text-shadow: 0 2px 4px rgba(#000, 0.5);
+
         &:hover {
             color: rgba($color-text-inverse, 1);
         }
     }
 }
+
 .n7-image-viewer__prev {
     left: 0;
 }
+
 .n7-image-viewer__next {
     right: 0;
 }
@@ -128,12 +144,19 @@ For our custom thumbs please refer to ImageViewerTools. */
         }
     }
 }
+
 .referencestrip {
     margin-bottom: -100px !important;
     transition: all $transition-durations * 2;
+
     > *,
-    .openseadragon-container,
-    .openseadragon-canvas,
+/*     .openseadragon-container
+    {
+        position: absolute;
+    }
+    .openseadragon-canvas {
+        background: black;
+    } */
     canvas,
     .displayregion {
         cursor: pointer !important;

package/src/lib/styles/components/_text-viewer.scss

@@ -363,7 +363,7 @@
         height: 70vh; //70vh
         overflow: auto;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
     }
     pb-view {
         flex: 1 0;
@@ -395,17 +395,29 @@
 
     //
     .content-body {
-        position: relative;
         display: flex;
         padding: 0 20px;
-        z-index: -1;
+        gap: 20px;
+
+        // Stili per ogni elemento che agisce come colonna
+        > .text-viewer-column {
+            flex: 1 1 0;
+
+            // Stili specifici se un elemento colonna è un pb-facsimile
+            &[id="facsimile"] {
+                background-color: #333333;
+                position: sticky;
+                top: 0;
+                height: 70vh;
+                overflow: hidden;
+                max-width: 50%;
+            }
 
-        .n7-text-viewer__docs-container {
-            display: flex;
-            flex: 2;
-            position: relative;
-            overflow: auto;
-            justify-content: center;
+            // Stili specifici se un elemento colonna è un pb-view
+            // Puoi usare selettori di attributo più specifici se necessario, es. &[id^="view"]
+            // & {
+            //   max-height: var(--pb-view-height); // Se vuoi limitare l'altezza dei pb-view
+            // }
         }
     }