ngx-vector-components 0.0.13 → 2.0.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
-## [0.0.2] (21/02/2022)
+## [2.0.0] (01/03/2022)
+
+### Bug Fixes
+
+### Features
+
+### Breaking Changes
+
+- CSS variables changed declaration form.
+
+## [1.0.2] (01/03/2022)
+
+### Bug Fixes
+
+- Changed text field filter to validate only when on "only text" mode.
+
+## [1.0.1] (27/02/2022)
 
 ### Bug Fixes
 

package/README.md

@@ -1,35 +1,35 @@
-# NgxVectorComponents
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
-
-## Summary
-
-Library generated in order to share code between projects in the Vector ecosystem. Any component, styling, injectable, useful class or other types of code that would need to be copied between projects should be added here to be shared, avoiding duplication and improving their maintainability.
-
-# IMPORTANT
-
-Any changes made to the library must be properly documented in the `CHANGELOG.md` file, using the proper semantic versioning as explained below:
-
-Versions must be defined following the semantic versioning pattern, where the version number is divided into 3 segments, `major`, `minor` and `patch` versions, as in the example:
-
-- `2.5.3`, where:
-  - `3` = Patch (incremented when the new version is generated with FIXES only);
-  - `5` = Minor (incremented when the new version receives NEW FEATURES);
-  - `2` = Major (incremented when new version gets ANY BREAKING CHANGE).
-
-Example of a breaking change: an `input` of some component has changed its typing or a change in behavior where it is necessary to make changes to the client code to continue working as expected).
-
-- Always keep the `inputs`, `outputs` and `parameters` of exported components/methods with proper TYPE.
-- 3 providers must be defined on the root level of the project: `environment`, `appName`, `menuOptions`. As shown below:
-
-## Generating version
-
-After documenting the changes made, use the semantic versioning criteria to define the new version number and add this number to the library's `CHANGELOG.md` and `package.json` in the `version` field.
-
-## Build
-
-After setting the version number in both files mentioned above: run `npm run build` in the root folder of the project, the command will generate the build of the library and place it in the `dist` folder of the root of the project.
-
-## Publishing
-
-After successfully building the library, enter the `dist` folder and run `npm publish`.
+# NgxVectorComponents
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
+
+## Summary
+
+Library generated in order to share code between projects in the Vector ecosystem. Any component, styling, injectable, useful class or other types of code that would need to be copied between projects should be added here to be shared, avoiding duplication and improving their maintainability.
+
+# IMPORTANT
+
+Any changes made to the library must be properly documented in the `CHANGELOG.md` file, using the proper semantic versioning as explained below:
+
+Versions must be defined following the semantic versioning pattern, where the version number is divided into 3 segments, `major`, `minor` and `patch` versions, as in the example:
+
+- `2.5.3`, where:
+  - `3` = Patch (incremented when the new version is generated with FIXES only);
+  - `5` = Minor (incremented when the new version receives NEW FEATURES);
+  - `2` = Major (incremented when new version gets ANY BREAKING CHANGE).
+
+Example of a breaking change: an `input` of some component has changed its typing or a change in behavior where it is necessary to make changes to the client code to continue working as expected).
+
+- Always keep the `inputs`, `outputs` and `parameters` of exported components/methods with proper TYPE.
+- 3 providers must be defined on the root level of the project: `environment`, `appName`, `menuOptions`. As shown below:
+
+## Generating version
+
+After documenting the changes made, use the semantic versioning criteria to define the new version number and add this number to the library's `CHANGELOG.md` and `package.json` in the `version` field.
+
+## Build
+
+After setting the version number in both files mentioned above: run `npm run build` in the root folder of the project, the command will generate the build of the library and place it in the `dist` folder of the root of the project.
+
+## Publishing
+
+After successfully building the library, enter the `dist` folder and run `npm publish`.

package/assets/styles/_primeng-custom-theme.scss

@@ -13,8 +13,22 @@
   width: 100% !important;
 }
 
+p-calendar.ng-touched.ng-invalid input {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+
+  &:focus {
+    border-color: var(--theme-dark) !important;
+    background-color: #fff !important;
+  }
+}
+p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
 .p-calendar .p-inputtext {
-  color: $theme-dark !important;
+  color: var(--theme-dark) !important;
   font-weight: 600 !important;
   margin-left: -1px !important;
   border-top-right-radius: 0px !important;
@@ -24,22 +38,22 @@
     border-right: none !important;
 
     + .p-datepicker-trigger {
-      border-right: 2px solid $theme-dark !important;
-      border-top: 2px solid $theme-dark !important;
-      border-bottom: 2px solid $theme-dark !important;
+      border-right: 2px solid var(--theme-dark) !important;
+      border-top: 2px solid var(--theme-dark) !important;
+      border-bottom: 2px solid var(--theme-dark) !important;
       background-color: #ffffff !important;
     }
   }
 }
 
 .p-datepicker-trigger {
-  background-color: $grey-light !important;
+  background-color: var(--grey-light) !important;
   border: none !important;
-  border-top-right-radius: $border-radius !important;
-  border-bottom-right-radius: $border-radius !important;
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
 
   .p-button-icon {
-    color: $theme-dark !important;
+    color: var(--theme-dark) !important;
   }
 }
 
@@ -53,13 +67,13 @@
 }
 
 .p-button.p-button-link {
-  color: $theme-dark;
+  color: var(--theme-dark);
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover {
   background: transparent;
-  color: $theme-dark;
+  color: var(--theme-dark);
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:hover .p-button-label {
@@ -72,7 +86,7 @@
 }
 .p-button.p-button-link:enabled:active {
   background: transparent;
-  color: $theme-dark;
+  color: var(--theme-dark);
   border-color: transparent;
 }
 
@@ -84,41 +98,41 @@
 
   &:focus + .p-autocomplete-dropdown {
     background-color: #ffffff !important;
-    border-right: 2px solid $theme-dark !important;
-    border-top: 2px solid $theme-dark !important;
-    border-bottom: 2px solid $theme-dark !important;
+    border-right: 2px solid var(--theme-dark) !important;
+    border-top: 2px solid var(--theme-dark) !important;
+    border-bottom: 2px solid var(--theme-dark) !important;
   }
 }
 
 .p-inputwrapper-focus .p-autocomplete-dropdown {
   background-color: #ffffff !important;
-  border-right: 2px solid $theme-dark !important;
-  border-top: 2px solid $theme-dark !important;
-  border-bottom: 2px solid $theme-dark !important;
+  border-right: 2px solid var(--theme-dark) !important;
+  border-top: 2px solid var(--theme-dark) !important;
+  border-bottom: 2px solid var(--theme-dark) !important;
 }
 
 .p-autocomplete-dropdown {
-  background-color: $grey-light !important;
+  background-color: var(--grey-light) !important;
   border: none !important;
   margin-left: -1px !important;
-  border-top-right-radius: $border-radius !important;
-  border-bottom-right-radius: $border-radius !important;
-  color: $grey-dark !important;
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+  color: var(--grey-dark) !important;
   padding-bottom: 5px !important;
 }
 
 input.p-inputtext:not(.currency-input) {
   border: none;
-  background-color: $grey-light;
+  background-color: var(--grey-light);
   width: 100%;
   padding: 6px 12px 6px 12px;
-  border-top-right-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
   height: 40px;
   font-size: 0.9em !important;
-  color: $theme-dark !important;
+  color: var(--theme-dark) !important;
   font-weight: 500;
 
   &:disabled {
@@ -129,35 +143,35 @@ input.p-inputtext:not(.currency-input) {
   &:focus {
     outline: 0 !important;
     box-shadow: none !important;
-    border: 2px solid $theme-dark;
+    border: 2px solid var(--theme-dark);
     background-color: #ffffff;
   }
 
   &:hover,
   &:focus:not(.ng-invalid):not(.p-inputmask) {
-    border-color: $theme-dark !important;
+    border-color: var(--theme-dark) !important;
   }
 
   &::placeholder {
-    color: $theme-dark;
+    color: var(--theme-dark);
     opacity: 0.8;
   }
 
   &.ng-touched.ng-invalid {
-    border-color: $error-color !important;
-    background-color: $error-color-transparent !important;
+    border-color: var(--error-color) !important;
+    background-color: var(--error-color-transparent) !important;
   }
 
   &:not(.ng-invalid) {
-    border-color: $theme-dark !important;
+    border-color: var(--theme-dark) !important;
   }
 }
 p-inputmask {
   flex: 1;
 }
 p-inputmask.ng-touched.ng-invalid input {
-  border-color: $error-color !important;
-  background-color: $error-color-transparent !important;
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
 }
 
 p-inputnumber:not(.currency-input),
@@ -171,7 +185,7 @@ p-inputnumber.outlined {
 
 p-inputnumber.currency-input:not(.outlined) {
   &.ng-touched.ng-invalid input.p-inputnumber-input {
-    color: $error-color !important;
+    color: var(--error-color) !important;
   }
 
   input.p-inputnumber-input {
@@ -179,7 +193,7 @@ p-inputnumber.currency-input:not(.outlined) {
     font-size: 2em !important;
     font-weight: 600 !important;
     background-color: #ffffff !important;
-    color: $theme-dark !important;
+    color: var(--theme-dark) !important;
     width: 100% !important;
 
     &:focus {
@@ -189,8 +203,8 @@ p-inputnumber.currency-input:not(.outlined) {
   }
 }
 .p-radiobutton-box.p-highlight {
-  background-color: $success-color !important;
-  border-color: $success-color !important;
+  background-color: var(--success-color) !important;
+  border-color: var(--success-color) !important;
 
   // &::before {
   //   content: '\f00c';
@@ -200,17 +214,17 @@ p-inputnumber.currency-input:not(.outlined) {
   //   height: 10px;
   // }
   // .p-radiobutton-icon {
-  //   background-color: $success-color !important;
+  //   background-color: var(--success-color) !important;
   // }
 }
 
 .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: $success-color !important;
+  border-color: var(--success-color) !important;
 }
 
 .p-highlight {
-  background-color: $theme-primary !important;
-  border-color: $theme-primary !important;
+  background-color: var(--theme-primary) !important;
+  border-color: var(--theme-primary) !important;
 }
 
 .p-button:focus {
@@ -236,16 +250,16 @@ p-inputnumber.currency-input:not(.outlined) {
 }
 
 .p-datepicker table td > span {
-  color: $font-color !important;
+  color: var(--font-color) !important;
 }
 
 .p-datepicker {
-  border: 2px solid $theme-dark !important;
-  border-radius: $border-radius !important;
+  border: 2px solid var(--theme-dark) !important;
+  border-radius: var(--border-radius) !important;
   z-index: 15000 !important;
 
   .p-datepicker-calendar thead tr th span {
-    color: $theme-dark !important;
+    color: var(--theme-dark) !important;
   }
 }
 
@@ -301,7 +315,7 @@ p-inputnumber.currency-input:not(.outlined) {
 }
 
 .p-selectbutton {
-  background-color: $grey-light !important;
+  background-color: var(--grey-light) !important;
   border-radius: 10px !important;
   width: fit-content !important;
 
@@ -311,7 +325,7 @@ p-inputnumber.currency-input:not(.outlined) {
     border-radius: 8px !important;
 
     .p-button-label {
-      color: $theme-dark !important;
+      color: var(--theme-dark) !important;
       font-weight: 500 !important;
     }
 
@@ -320,7 +334,7 @@ p-inputnumber.currency-input:not(.outlined) {
     }
 
     &.p-highlight {
-      background-color: $theme-dark !important;
+      background-color: var(--theme-dark) !important;
 
       .p-button-label {
         color: #ffffff !important;
@@ -330,7 +344,7 @@ p-inputnumber.currency-input:not(.outlined) {
 }
 
 .p-multiselect {
-  border: 2px solid $theme-dark !important;
+  border: 2px solid var(--theme-dark) !important;
 }
 
 .p-multiselect-header {
@@ -344,7 +358,7 @@ p-inputnumber.currency-input:not(.outlined) {
 }
 
 .p-multiselect-label {
-  color: $theme-dark !important;
+  color: var(--theme-dark) !important;
   font-weight: 600 !important;
 }
 
@@ -355,7 +369,7 @@ p-inputnumber.currency-input:not(.outlined) {
 
 .p-multiselect-item {
   box-shadow: unset !important;
-  color: $theme-dark !important;
+  color: var(--theme-dark) !important;
 }
 
 .p-multiselect-trigger-icon {
@@ -365,7 +379,7 @@ p-inputnumber.currency-input:not(.outlined) {
 .rounded-checkbox .p-checkbox-box {
   border-radius: 20px !important;
   border: none !important;
-  background-color: $grey-light !important;
+  background-color: var(--grey-light) !important;
 
   .p-checkbox-icon {
     font-size: 0.8em !important;
@@ -373,16 +387,16 @@ p-inputnumber.currency-input:not(.outlined) {
 }
 
 .p-checkbox-box.p-highlight {
-  background: $success-color !important;
-  border-color: $success-color !important;
+  background: var(--success-color) !important;
+  border-color: var(--success-color) !important;
 }
 
 .p-checkbox-box {
   border-width: 2px !important;
-  border-color: $grey-dark !important;
+  border-color: var(--grey-dark) !important;
 
   &:hover:not(.p-highlight) {
-    border-color: $grey-dark !important;
+    border-color: var(--grey-dark) !important;
   }
 }
 
@@ -391,12 +405,21 @@ p-inputnumber.currency-input:not(.outlined) {
   width: 100%;
 }
 
+p-autocomplete.ng-touched.ng-invalid input {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
 .p-dropdown-panel,
 .p-autocomplete-panel {
   max-width: 250px !important;
-  border: 2px solid $theme-dark !important;
+  border: 2px solid var(--theme-dark) !important;
   margin-top: -2px !important;
-  border-radius: $border-radius !important;
+  border-radius: var(--border-radius) !important;
 
   & .p-autocomplete-items {
     padding-top: 0px !important;
@@ -409,54 +432,54 @@ p-inputnumber.currency-input:not(.outlined) {
   }
 
   &::-webkit-scrollbar-track {
-    background: $grey-light;
+    background: var(--grey-light);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $theme-dark;
+    background: var(--theme-dark);
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: $theme-dark;
+    background: var(--theme-dark);
   }
 }
 
 .p-dropdown-item,
 .p-autocomplete-item {
   text-overflow: ellipsis;
-  color: $theme-dark !important;
+  color: var(--theme-dark) !important;
 
   &:hover {
-    background-color: $theme-dark !important;
+    background-color: var(--theme-dark) !important;
     color: #ffffff !important;
   }
 }
 
 .p-dropdown {
   // background-color: #ffffff;
-  background-color: $grey-light !important;
+  background-color: var(--grey-light) !important;
   border: none !important;
   .p-highlight {
     background-color: #ffffff !important;
   }
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  background-color: $theme-dark !important;
+  background-color: var(--theme-dark) !important;
   color: #ffffff !important;
 }
 
 .p-slider {
   background-color: #01529b;
   .p-slider-range {
-    background-color: $success-color !important;
+    background-color: var(--success-color) !important;
     border-radius: inherit !important;
   }
   .p-slider-handle {
-    border-color: $success-color !important;
+    border-color: var(--success-color) !important;
 
     &:hover {
-      background-color: $success-color !important;
+      background-color: var(--success-color) !important;
     }
     &:focus {
       box-shadow: unset !important;
@@ -470,11 +493,11 @@ p-inputnumber.currency-input:not(.outlined) {
   }
   .p-fileupload-choose {
     background: transparent !important;
-    border: 2px solid $theme-dark !important;
-    border-radius: $border-radius !important;
+    border: 2px solid var(--theme-dark) !important;
+    border-radius: var(--border-radius) !important;
 
     .p-button-label {
-      color: $theme-dark !important;
+      color: var(--theme-dark) !important;
       max-width: 200px !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -507,11 +530,11 @@ vector-data-table {
         white-space: normal !important;
 
         .boolean-value-positive {
-          color: $success-color;
+          color: var(--success-color);
         }
 
         .boolean-value-negative {
-          color: $error-color;
+          color: var(--error-color);
         }
 
         .status-table-field {
@@ -519,13 +542,13 @@ vector-data-table {
         }
 
         .success {
-          color: $success-color;
+          color: var(--success-color);
         }
         .error {
-          color: $error-color;
+          color: var(--error-color);
         }
         .warning {
-          color: $warning-color;
+          color: var(--warning-color);
         }
       }
     }
@@ -580,3 +603,45 @@ p-tabview {
   border: none !important;
   background: transparent !important;
 }
+
+.p-chip {
+  display: inline-block;
+  padding: 0 16px !important;
+  height: 40px;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 40px;
+  border-radius: 25px !important;
+  background-color: #e5e5ea !important;
+  color: #002463 !important;
+  opacity: 0.5;
+
+  span {
+    border: 2px solid;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    margin-left: 5px;
+    margin-top: 7px;
+    color: #abaab5;
+
+    i {
+      position: relative;
+      top: -11px;
+      left: -6px;
+      font-size: 12px;
+    }
+  }
+
+  .closebtn {
+    padding-left: 10px;
+    font-weight: bold;
+    float: right;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .closebtn:hover {
+    color: #000;
+  }
+}

package/assets/styles/_spinner.scss

@@ -7,17 +7,17 @@ p-progressSpinner .p-progress-spinner-circle {
 @keyframes custom-progress-spinner-color {
   100%,
   0% {
-    stroke: $theme-primary;
+    stroke: var(--theme-primary);
   }
   40% {
-    stroke: $theme-primary;
+    stroke: var(--theme-primary);
   }
   66% {
-    stroke: $theme-primary;
+    stroke: var(--theme-primary);
   }
   80%,
   90% {
-    stroke: $theme-primary;
+    stroke: var(--theme-primary);
   }
 }
 

package/assets/styles/_styles.scss

@@ -10,14 +10,14 @@ body {
 
 body,
 body .p-component {
-  color: $font-color;
+  color: var(--font-color);
   font-size: 13px;
   font-family: Poppins;
 }
 
 i {
   font-size: 13px;
-  color: $font-color;
+  color: var(--font-color);
 }
 
 @media screen and (max-width: 640px) {
@@ -31,14 +31,14 @@ i {
 }
 
 a {
-  color: $theme-dark;
+  color: var(--theme-dark);
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
 
   &:hover,
   &:visited {
-    color: $theme-dark;
+    color: var(--theme-dark);
   }
 }
 
@@ -64,7 +64,7 @@ ul {
 }
 
 ::-webkit-scrollbar-track {
-  background: $grey-light;
+  background: var(--grey-light);
   border-radius: 7px;
 }
 
@@ -93,7 +93,7 @@ ul {
 }
 
 .form-container {
-  color: $form-labels-color;
+  color: var(--form-labels-color);
 }
 
 .dump-field {