@net7/components 3.12.2 → 3.12.4

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

@@ -15,6 +15,10 @@ export interface InputCheckbox {
      * Unique ID for the checkbox
      */
     id: string;
+    /**
+     * The name of the control.
+     */
+    name?: string;
     /**
      * Label for the checkbox
      */

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
  *
@@ -16,27 +44,14 @@ export interface InputSelectData {
      * A unique ID for the select item
      */
     id: string;
+    /**
+     * The name of the control.
+     */
+    name?: string;
     /**
      * 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 +60,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/lib/components/input-text/input-text.d.ts

@@ -1,3 +1,4 @@
+import { OnOff } from '../../shared-interfaces';
 import * as i0 from "@angular/core";
 /**
  * Interface for InputTextData
@@ -24,7 +25,11 @@ export interface InputTextData {
      */
     type?: 'text' | 'number';
     /**
-     * Placeholder text inside the input box
+     * The name of the control.
+     */
+    name?: string;
+    /**
+     * A hint to the user of what can be entered in the control.
      */
     placeholder?: string;
     /**
@@ -63,6 +68,19 @@ export interface InputTextData {
      * Input maximun allowed value (only for type=number)
      */
     max?: number;
+    /**
+     * The maximum number of characters (UTF-16 code units) that the user can enter.
+     * If this value isn't specified, the user can enter an unlimited number of characters.
+     */
+    maxlength?: number;
+    /**
+     * The minimum number of characters (UTF-16 code units) required that the user should enter.
+     */
+    minlength?: number;
+    /** Indicates whether the value of the control can be automatically completed by the browser. */
+    autocomplete?: OnOff;
+    /** Specifies that the user must fill in a value before submitting a form. */
+    required?: boolean;
     /**
      * Additional HTML Classes
      */

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

@@ -1,16 +1,52 @@
+import { OnOff } from '../../shared-interfaces';
 import * as i0 from "@angular/core";
 export declare type InputTextareaData = {
     /** Unique ID for the text input element */
     id: string;
-    /** Placeholder text inside the textarea */
+    /** A hint to the user of what can be entered in the control. */
     placeholder?: string;
     /** Default value of the textarea */
     value?: string | number | null;
     /** Label for the textarea */
     label?: string;
-    /** Prevents the user from changing the input's value */
+    /**
+     * Indicates that the user cannot interact with the control.
+     * If this attribute is not specified, the control inherits its setting
+     * from the containing element.
+     */
     disabled?: boolean;
-    /** Optional icon to render inside the textarea (eg. n7-icon-search) */
+    /** Indicates whether the value of the control can be automatically completed by the browser. */
+    autocomplete?: OnOff;
+    /**
+     * Lets you specify that a form control should have input focus when the page loads.
+     * Only one form-associated element in a document can have this attribute specified.
+     */
+    autofocus?: boolean;
+    /**
+     * The maximum number of characters (UTF-16 code units) that the user can enter.
+     * If this value isn't specified, the user can enter an unlimited number of characters.
+     */
+    maxlength?: number;
+    /**
+     * The minimum number of characters (UTF-16 code units) required that the user should enter.
+     */
+    minlength?: number;
+    /** The name of the control. */
+    name?: string;
+    /** Specifies that the user must fill in a value before submitting a form. */
+    required?: boolean;
+    /**
+     * The number of visible text lines for the control.
+     * If it is specified, it must be a positive integer.
+     * @defaultValue 2
+     */
+    rows?: number;
+    /**
+     * The visible width of the text control, in average character widths.
+     * If it is specified, it must be a positive integer.
+     * @defaultValue 20
+     */
+    cols?: number;
     /** Payload that is sent when the user changes the value */
     inputPayload?: any;
     /** Payload that is sent when the user presses the "Enter" key */

package/lib/shared-interfaces.d.ts

@@ -65,3 +65,4 @@ export declare type Image = {
     /** Optional classes */
     classes?: string;
 };
+export declare type OnOff = 'on' | 'off';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/components",
-  "version": "3.12.2",
+  "version": "3.12.4",
   "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);
     }
-}
+}