@net7/components 3.3.0 → 3.5.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/components",
-  "version": "3.3.0",
+  "version": "3.5.2",
   "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/_image-viewer-tools.scss

@@ -71,6 +71,7 @@
         color: rgba($color-text-inverse, .8);
         font-size: $image-viewer-control-icon-size;
         transition: color $transition-durations;
+        padding: 10px;
     }
 
     &__control-btn.is-active {