@net7/components 3.2.0 → 3.5.0

package/lib/components/footer/footer.d.ts

@@ -1,3 +1,4 @@
+import { InputSelectData } from '../input-select/input-select';
 import { Anchor } from '../../shared-interfaces';
 import * as i0 from "@angular/core";
 /**
@@ -75,6 +76,10 @@ export interface FooterColumn {
      * column's images
      */
     images?: FooterImage[];
+    /**
+     * HTMLSelect with some options
+     */
+    selects?: InputSelectData[];
     /**
      * column's text
      */

package/lib/components/header/header.d.ts

@@ -1,3 +1,4 @@
+import { InputSelectData } from '../input-select/input-select';
 import { Anchor } from '../../shared-interfaces';
 import * as i0 from "@angular/core";
 /**
@@ -202,6 +203,11 @@ export interface HeaderData {
      * buttons items
      */
     buttons?: ButtonItem[];
+    /**
+     * Select elements with some options
+     * useful for the header's language selector
+     */
+    selects?: InputSelectData[];
     /**
      * user parameters
      */

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

@@ -15,6 +15,7 @@ export interface TextViewerData {
         view: string;
         channel?: string;
         translation?: boolean;
+        download?: string;
     }[];
     facsimile?: any;
     /**

package/package.json

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

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

@@ -15,7 +15,7 @@
         max-width: $page-max-width;
         margin-right: auto;
         margin-left: auto;
-        padding: $space*3 0;
+        padding: $space * 4 0 $space * 2 0;
     }
 
     &__column {
@@ -31,6 +31,10 @@
         }
     }
 
+    &__column-nav {
+        margin-bottom: $space * 2;
+    }
+
     &__column-nav-list {
         padding-left: 0;
         list-style: none;
@@ -41,27 +45,55 @@
         margin-bottom: calc($space/2);
     }
 
-    &__column-nav-link {
+    &__column-nav-list {
+        margin: 0;
         text-decoration: underline;
         cursor: pointer;
     }
 
-    &__column-title,
+    &__column-title {
+        margin-bottom: $space;
+        font-size: $font-size-s;
+    }
+
     &__column-text {
+        margin-bottom: $space * 2;
         font-size: $font-size-xs;
     }
 
     &__column-images {
-        padding-top: $space;
-        
+        margin-bottom: $space * 2;
+
         img {
             width: auto;
             height: $footer-image-height;
             margin-right: calc($space/2);
         }
     }
-}
 
+    /* Select */
+    &__column-selects {
+        margin-bottom: $space * 2;
+
+        > * {
+            display: block;
+        }
+
+        > *:not(:last-child) {
+            margin-bottom: $space;
+        }
+
+        label {
+            display: block;
+            margin-bottom: $space * 0.5;
+            font-size: $font-size-s;
+        }
+
+        .n7-facet__input-select {
+            font-size: $font-size-s;
+        }
+    }
+}
 
 /* ------------------------------------ *\
    #MEDIA-QUERIES
@@ -69,7 +101,6 @@
 @media all and (max-width: $footer-breakpoint-desktop) {
     .n7-footer {
         &__column {
-            
             &:first-of-type {
                 padding-left: calc($grid-gutter-h/2);
             }
@@ -85,7 +116,6 @@
 }
 
 @media all and (max-width: $footer-breakpoint-mobile) {
-    
     .n7-footer {
         &__content {
             flex-flow: column nowrap;
@@ -93,7 +123,7 @@
 
         &__column {
             padding-bottom: calc($grid-gutter-h/2);
-        
+
             &:last-of-type {
                 padding-bottom: 0;
             }
@@ -108,7 +138,6 @@
             margin-top: 0;
         }
     }
-
 }
 
 /* Retina */

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

@@ -136,7 +136,7 @@
 
     &__subnav-link {
         display: block;
-        padding: $space*1.5;
+        padding: $space * 1.5;
         border-bottom: 1px solid $color-border-light;
         color: $color-text;
     }
@@ -158,7 +158,7 @@
         justify-content: flex-end;
         height: 100%;
         margin-left: auto;
-        padding: 0 0 0 $space*2;
+        padding: 0 0 0 $space * 2;
     }
 
     /* Search */
@@ -235,6 +235,31 @@
         }
     }
 
+    /* Selects */
+    &__selects {
+        margin-left: $space;
+        flex-shrink: 0;
+
+        > *:not(:last-child) {
+            margin-right: $space;
+        }
+
+        .n7-input-select {
+            margin: 0;
+
+            label {
+                margin-right: $space * 0.5;
+                color: $color-text;
+                font-size: $font-size-s;
+            }
+        }
+
+        .n7-facet__input-select {
+            height: $button-normal-height;
+            font-size: $font-size-s;
+        }
+    }
+
     /* Buttons */
     &__buttons {
         flex-shrink: 0;
@@ -306,8 +331,8 @@
         z-index: 2;
         width: 30px;
         height: 30px;
-        top: $space*3;
-        right: $space*3;
+        top: $space * 3;
+        right: $space * 3;
         font-size: $font-size-xl;
         color: $color-text;
         cursor: pointer;
@@ -318,12 +343,10 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
 @media all and (max-width: $header-breakpoint-mobile) {
-
     .n7-header {
         &__nav-content {
             display: none;
@@ -382,7 +405,7 @@
         &__nav-item {
             display: block;
             height: auto;
-            padding: $space*2 0;
+            padding: $space * 2 0;
         }
 
         &__nav-link {
@@ -404,7 +427,7 @@
             display: block;
             position: relative;
             left: auto;
-            margin-top: $space*2;
+            margin-top: $space * 2;
             background-color: transparent;
             text-align: center;
         }
@@ -419,7 +442,7 @@
 
         &__subnav-link {
             border-bottom: 0;
-            padding: $space*2;
+            padding: $space * 2;
         }
 
         &__subnav-icon {
@@ -430,11 +453,9 @@
             font-size: $font-size-l;
         }
     }
-
 }
 
 @media all and (max-width: $header-breakpoint-mobile-small) {
-
     .n7-header {
         height: $header-height-mobile;
 
@@ -470,5 +491,4 @@
             height: $header-height-mobile;
         }
     }
-    
-}
+}

package/src/lib/styles/components/_item-preview.scss

@@ -3,7 +3,7 @@
  *
  * Component used to preview any kind of element with image, title, text, metadata and icons.
  */
- 
+
 /* ------------------------------------ *\
    #ITEM-PREVIEW
 \* ------------------------------------ */
@@ -13,7 +13,7 @@
         cursor: default;
         position: relative;
     }
-    
+
     &__title {
         margin-bottom: $space;
         font-family: $font-family-headings;
@@ -29,7 +29,7 @@
         font-weight: $font-weight-normal;
         color: $color-text;
     }
-    
+
     /* Metadata */
     &__metadata-group {
         margin-bottom: $space;
@@ -69,7 +69,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #HAS-IMAGE, #HAS-COLOR
 \* ------------------------------------ */
@@ -79,10 +78,11 @@
         display: flex;
     }
 
-    .n7-item-preview__image { /* Color background here */
+    .n7-item-preview__image {
+        /* Color background here */
         width: $item-preview-image-width;
         height: $item-preview-image-height;
-        margin-right: $space*1.5;
+        margin-right: $space * 1.5;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center center;
@@ -93,7 +93,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #IS-VERTICAL
 \* ------------------------------------ */
@@ -102,8 +101,9 @@
     .n7-item-preview__inner {
         display: block;
     }
-    
-    .n7-item-preview__image { /* Color background here */
+
+    .n7-item-preview__image {
+        /* Color background here */
         width: 100%;
         height: $item-preview-vertical-image-height;
         margin-bottom: $space;
@@ -113,6 +113,26 @@
     }
 }
 
+/* ------------------------------------ *\
+   #IS-FRONTPAGE
+\* ------------------------------------ */
+.n7-item-preview.is-frontpage.has-image,
+.n7-item-preview.is-frontpage.has-color {
+    .n7-item-preview__inner {
+        display: block;
+    }
+
+    .n7-item-preview__image {
+        /* Color background here */
+        width: 100%;
+        height: auto;
+        aspect-ratio: $item-preview-frontpage-aspect-ratio;
+        margin-bottom: $space;
+        margin-right: 0;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
 
 /* ------------------------------------ *\
    #IS-OVERLAY
@@ -123,8 +143,9 @@
         display: block;
         height: $item-preview-height;
     }
-    
-    .n7-item-preview__image { /* Color background here */
+
+    .n7-item-preview__image {
+        /* Color background here */
         position: absolute;
         top: 0;
         bottom: 0;
@@ -147,9 +168,9 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: $space*2;
+        padding: $space * 2;
     }
-    
+
     .n7-item-preview__title,
     .n7-item-preview__text,
     .n7-item-preview__metadata-group-title {
@@ -170,7 +191,8 @@
 
 /* Dark overlay behind the text only with image (not with color bg only) */
 .n7-item-preview.is-overlay.has-image {
-    .n7-item-preview__image { /* Color background here */
+    .n7-item-preview__image {
+        /* Color background here */
         &:after {
             content: " ";
             position: absolute;
@@ -179,12 +201,11 @@
             bottom: 0;
             left: 0;
             right: 0;
-            background-color: rgba(0,0,0,0.5);
+            background-color: rgba(0, 0, 0, 0.5);
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #HOVER
 \* ------------------------------------ */
@@ -215,4 +236,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}