@net7/components 3.12.1 → 3.12.3

package/lib/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { Button, Icon } from 'dv-components-lib';
+import { Button, Icon } from '../../shared-interfaces';
 import * as i0 from "@angular/core";
 export interface ButtonData extends Button {
     isDisabled?: boolean;

package/lib/components/input-select/input-select.d.ts

@@ -1,4 +1,32 @@
 import * as i0 from "@angular/core";
+export interface InputSelectOption {
+    /**
+     * The rendered text for the <option> element
+     */
+    label: string;
+    /**
+     * The event value for the <option> element.
+     * If the value is empty string, the option will
+     * be rendered as placeholder.
+     */
+    value: string | number;
+    /**
+     * Sets the option as default (selected)
+     */
+    selected?: boolean;
+    /**
+     * Prevents the user from selecting this option
+     */
+    disabled?: boolean;
+    /**
+     * Prevents the option from appearing in the list
+     */
+    hidden?: boolean;
+    /**
+     * Additional HTML classes for the option
+     */
+    classes?: string;
+}
 /**
  * Interface for InputSelect
  *
@@ -19,24 +47,7 @@ export interface InputSelectData {
     /**
      * The array of <option> elements
      */
-    options: Array<{
-        /**
-         * The rendered text for the <option> element
-         */
-        label: string;
-        /**
-         * The event value for the <option> element
-         */
-        value: string | number;
-        /**
-         * Sets the option as default (selected)
-         */
-        selected?: boolean;
-        /**
-         * Prevents the user from selecting this option
-         */
-        disabled?: boolean;
-    }>;
+    options: Array<InputSelectOption>;
     /**
      * Label for the <select> element
      */
@@ -45,6 +56,10 @@ export interface InputSelectData {
      * Prevents the user from changing any option
      */
     disabled?: boolean;
+    /**
+     * Forces the user to select an option
+     */
+    required?: boolean;
     /**
      * Payload for the select's change event
      */

package/package.json

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

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

@@ -11,31 +11,24 @@
 .n7-btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
 }
 
 .n7-btn.is-loading {
     min-width: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
-    .n7-btn__loader {
-        width: 10px !important;
-        height: 10px !important;
-        border-width: 3px;
+    .n7-loader {
+        width: 18px;
+        height: 18px;
+        border: 3px solid $loader-color-back;
+        border-bottom-color: $loader-color-front;
     }
 }
 
-.n7-btn-cta {
-    .n7-btn__loader {
-        width: 10px !important;
-        height: 10px !important;
-        position: relative;
-        border-top: 1.1em solid rgb(200 212 255 / 30%);
-        border-right: 1.1em solid rgb(200 212 255 / 30%);
-        border-bottom: 1.1em solid rgb(200 212 255 / 30%);
-        border-left: 1.1em solid #ffffff;
-        border-width: 3px;
+.n7-btn.n7-btn-cta {
+    .n7-loader {
+        border: 3px solid rgb(200 212 255 / 30%);
+        border-bottom-color: $color-gray-00;
     }
 }
 
@@ -49,6 +42,10 @@
     margin: 0 $space * 0.5;
 }
 
+n7-loader {
+    display: inline-flex;
+}
+
 
 
 /* ------------------------------------ *\

package/src/lib/styles/components/_input-select.scss

@@ -1,13 +1,27 @@
 /* ------------------------------------ *\
    #SELECT
 \* ------------------------------------ */
+
 .n7-input-select {
-    display: inline-block;
-    margin-bottom: calc($space/2);
-    margin-right: $space;
+   
+    select:required:invalid {
+        color: $color-gray-04;
+    }
+    option[value=""][disabled] {
+        display: none;
+    }
+    option {
+        color: $color-gray-05;
+    }
+
+    option[disabled] {
+        background-color: $color-gray-03;
+        color: $color-gray-04;
+    }
 }
 
 
+
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */

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

@@ -7,48 +7,26 @@
 /* ------------------------------------ *\
     LOADER
 \* ------------------------------------ */
-.n7-loader {
-    position: relative;
-    text-indent: -9999em;
-    border-top: 1.1em solid $loader-color-back;
-    border-right: 1.1em solid $loader-color-back;
-    border-bottom: 1.1em solid $loader-color-back;
-    border-left: 1.1em solid $loader-color-front;
-    border-width: $loader-thickness;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation: load8 1s infinite linear;
-    animation: load8 1s infinite linear;
 
-    &, &:after {
-        border-radius: 50%;
-        width: $loader-size !important;
-        height: $loader-size !important;
-    }
+.n7-loader {
+    width: $loader-size;
+    height: $loader-size;
+    border: 5px solid $loader-color-back;
+    border-bottom-color: $loader-color-front;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
 }
 
-
 /* ------------------------------------ *\
     ANIMATION
 \* ------------------------------------ */
-@-webkit-keyframes load8 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-@keyframes load8 {
+@keyframes rotation {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
-}
+}