@net7/components 4.3.0 → 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/lib/components/timeline/timeline.d.ts

@@ -6,6 +6,9 @@ export interface LibOptions extends TimelineOptions {
      * Higher zooming friction will slow zooming speed */
     zoomFriction?: number;
 }
+export interface DataItemCustom extends Omit<DataItem, 'content'> {
+    content?: string;
+}
 export interface TimelineData {
     /** ID for the HTML container element */
     containerID: string;
@@ -13,8 +16,12 @@ export interface TimelineData {
     libOptions: LibOptions;
     /** Sets the timeline instance to the given parameter */
     _setInstance?: any;
-    /** Dadaset in vis-js format, full ref: https://visjs.github.io/vis-timeline/docs/timeline/#Data_Format */
-    dataSet: DataItem[];
+    /** Dataset in vis-js format, full ref: https://visjs.github.io/vis-timeline/docs/timeline/#Data_Format */
+    dataSet: DataItemCustom[];
+    groups?: Array<{
+        id: number;
+        content: string;
+    }>;
 }
 export declare class TimelineComponent implements AfterContentChecked {
     data: TimelineData;

package/lib/components/timeline/timeline_group.mock.d.ts

@@ -0,0 +1,2 @@
+import { TimelineData } from './timeline';
+export declare const TIMELINE_GROUP_MOCK: TimelineData;

package/package.json

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

package/public-api.d.ts

@@ -92,6 +92,7 @@ export * from './lib/components/tag/tag.mock';
 export * from './lib/components/text-viewer/text-viewer.mock';
 export * from './lib/components/text-viewer/text-viewer.mock_petrarca';
 export * from './lib/components/timeline/timeline.mock';
+export * from './lib/components/timeline/timeline_group.mock';
 export * from './lib/components/toast/toast.mock';
 export * from './lib/components/tooltip-content/tooltip-content.mock';
 export * from './lib/components/tree/tree.mock';

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
+            // }
         }
     }
 

package/src/lib/styles/components/_timeline.scss

@@ -9,6 +9,31 @@
 \* ------------------------------------ */
 .n7-timeline {
     // TODO
+
+    /*    .vis-item.vis-background.positive {
+      background-color: rgba(105, 255, 98, 0.2);
+   }
+
+   .vis-item.red {
+      background-color: red;
+      border-color: darkred;
+      color: white;
+      font-family: monospace;
+      box-shadow: 0 0 10px gray;
+    }
+    .vis-item.vis-dot.red {
+      border-radius: 10px;
+      border-width: 10px;
+    }
+    .vis-item.vis-line.red {
+      border-width: 5px;
+    }
+    .vis-item.vis-box.red {
+      border-radius: 0;
+      border-width: 2px;
+      font-size: 24pt;
+      font-weight: bold;
+    } */
 }
 
 /* ------------------------------------ *\