ecabs-components 1.0.18 → 1.0.19

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ecabs-components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ecabs-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,33 +1,25 @@
-{
-  "name": "ecabs-components",
-  "version": "1.0.18",
-  "peerDependencies": {
-    "@angular/common": "^16.0.4",
-    "@angular/core": "^16.0.4",
-    "@angular/cdk": "^16.0.3",
-    "@angular/material": "~16.0.3",
-    "date-fns": "^2.29.3",
-    "flag-icons": "^6.7.0",
-    "ngx-mat-intl-tel-input": "^5.0.0",
-    "ngx-mat-select-search": "^7.0.2",
-    "rxjs": "~7.5.0",
-    "vanilla-text-mask": "^5.1.1"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/ecabs-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ecabs-components.mjs",
-      "esm": "./esm2022/ecabs-components.mjs",
-      "default": "./fesm2022/ecabs-components.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "ecabs-components",
+  "version": "1.0.19",
+  "peerDependencies": {
+    "@angular/common": "^16.0.4",
+    "@angular/core": "^16.0.4",
+    "@angular/cdk": "^16.0.3",
+    "@angular/material": "~16.0.3",
+    "date-fns": "^2.29.3",
+    "flag-icons": "^6.7.0",
+    "ngx-mat-intl-tel-input": "^5.0.0",
+    "ngx-mat-select-search": "^7.0.2",
+    "rxjs": "~7.5.0",
+    "vanilla-text-mask": "^5.1.1"
+  },
+  "devDependencies": {
+    "@angular/cdk": "^16.0.3",
+    "@angular/material": "~16.0.3",
+    "ngx-mat-select-search": "^7.0.2",
+    "tailwindcss": "^3.3.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/src/assets/images/nothing-here.svg

@@ -0,0 +1,22 @@
+<svg width="482" height="410" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path opacity=".1" d="M479.79 282.683c-13.165-66.236-90.292-119.174-105.335-188.197C347.114 6.67 256.997-7.214 198.437 30.924c-92.788 60.431 6.198 75.427-175.73 218.403C-22.215 284.631-7.9 440.469 133.421 404.705c76.053-19.247 99.173-21.948 133.383-25.117 86.225-7.988 235.084 14.282 212.986-96.905Z" fill="#367CFF"/>
+  <path d="m376.783 299.284-133.27 70.229-133.069-70.229V193.233h266.339v106.051Z" fill="#fff"/>
+  <path d="M243.513 370.59a1.07 1.07 0 0 1-.505-.126l-133.065-70.229a1.073 1.073 0 0 1-.575-.947V193.233a1.08 1.08 0 0 1 1.079-1.077h266.336a1.08 1.08 0 0 1 1.08 1.077v106.051a1.082 1.082 0 0 1-.576.948l-133.27 70.229a1.07 1.07 0 0 1-.504.129Zm-131.99-71.953 131.99 69.658 132.19-69.66V194.311h-264.18v104.326Z" fill="#A6A6A6"/>
+  <path d="m376.783 170.477-133.27-70.229 59.886-28.8 133.27 70.229-59.886 28.8Z" fill="#fff"/>
+  <path d="M376.783 171.554c-.176 0-.349-.043-.504-.124l-133.27-70.23a1.078 1.078 0 0 1 .035-1.923l59.886-28.8a1.08 1.08 0 0 1 .974.017l133.27 70.23a1.073 1.073 0 0 1 .404 1.533c-.107.168-.26.302-.439.389l-59.887 28.801c-.146.07-.307.107-.469.107ZM245.908 100.29l130.898 68.979 57.469-27.638-130.898-68.977-57.469 27.636Z" fill="#A6A6A6"/>
+  <path d="m110.444 170.477 133.27-70.229-59.886-28.8-133.27 70.229 59.886 28.8Z" fill="#fff"/>
+  <path d="M110.444 171.554c-.162 0-.323-.037-.469-.107l-59.883-28.801a1.08 1.08 0 0 1-.61-.95 1.078 1.078 0 0 1 .575-.972l133.27-70.23a1.074 1.074 0 0 1 .973-.018l59.887 28.801a1.079 1.079 0 0 1 .035 1.923l-133.27 70.23a1.084 1.084 0 0 1-.508.124Zm-57.492-29.921 57.47 27.637 130.897-68.978-57.469-27.638-130.898 68.979Z" fill="#A6A6A6"/>
+  <path d="m110.444 170.477 133.27 70.229-68.523 37.417-133.27-70.228 68.523-37.418Z" fill="#fff"/>
+  <path d="M175.191 279.2a1.054 1.054 0 0 1-.504-.125l-133.27-70.229a1.08 1.08 0 0 1-.574-.944 1.077 1.077 0 0 1 .56-.952l68.523-37.418a1.082 1.082 0 0 1 1.022-.007l133.271 70.23a1.08 1.08 0 0 1 .425 1.497 1.089 1.089 0 0 1-.412.399l-68.523 37.418a1.077 1.077 0 0 1-.518.131Zm-130.99-71.322 130.981 69.023 66.253-36.179L110.453 171.7l-66.252 36.178Z" fill="#A6A6A6"/>
+  <path d="m376.783 170.477-133.27 70.229 68.523 37.417 133.27-70.228-68.523-37.418Z" fill="#fff"/>
+  <path d="M312.038 279.2c-.181 0-.36-.045-.519-.131l-68.523-37.418a1.093 1.093 0 0 1-.411-.399 1.067 1.067 0 0 1-.148-.553 1.07 1.07 0 0 1 .573-.944l133.27-70.23a1.09 1.09 0 0 1 1.023.007l68.523 37.418a1.079 1.079 0 0 1 .403 1.503 1.08 1.08 0 0 1-.417.393l-133.27 70.229a1.054 1.054 0 0 1-.504.125Zm-66.242-38.478 66.252 36.179 130.982-69.023-66.254-36.178-130.98 69.022Z" fill="#A6A6A6"/>
+  <path d="m243.714 100.248-133.27 70.229 133.069 70.229 133.27-70.229-133.069-70.229Z" fill="#A6A6A6"/>
+  <path d="M244.592 240.705h-2.159v128.808h2.159V240.705Z" fill="#A6A6A6"/>
+  <path d="M168.844 164.101a.856.856 0 0 1-.498-.16.86.86 0 0 1-.206-1.201c.16-.225 15.769-22.74-1.656-43.265a32.813 32.813 0 0 0-11.272-8.599 32.885 32.885 0 0 0-13.856-3.048h-.235c1.655 5.735 1.359 10.835-.984 14.747a10.905 10.905 0 0 1-4.254 4.2 10.937 10.937 0 0 1-5.833 1.332 8.682 8.682 0 0 1-4.617-1.794 8.66 8.66 0 0 1-2.879-4.024c-1.916-4.988.087-9.824 5.365-12.94a25.522 25.522 0 0 1 10.873-3.121 45.918 45.918 0 0 0-4.807-9.324c-6.292-9.588-17.759-16.224-31.461-18.209-11.613-1.681-22.742.299-28.357 5.044a.865.865 0 0 1-1.418-.73.86.86 0 0 1 .303-.586c5.974-5.049 17.64-7.183 29.719-5.429 14.193 2.056 26.096 8.97 32.659 18.97a46.772 46.772 0 0 1 5.155 10.182 34.586 34.586 0 0 1 14.998 3.024 34.534 34.534 0 0 1 12.215 9.195c18.303 21.559 1.914 45.14 1.747 45.376a.859.859 0 0 1-.701.36Zm-29.492-56.21a24.077 24.077 0 0 0-10.549 2.941c-4.557 2.691-6.244 6.643-4.632 10.841a6.99 6.99 0 0 0 2.311 3.256 7.019 7.019 0 0 0 3.721 1.463 9.234 9.234 0 0 0 4.896-1.153 9.208 9.208 0 0 0 3.56-3.547c2.15-3.594 2.347-8.37.691-13.801h.002ZM59.261 97.632c-1.467.44-3.049.29-4.408-.416a5.87 5.87 0 0 1-2.868-3.366 5.856 5.856 0 0 1 .298-4.408 5.876 5.876 0 0 1 3.296-2.95 5.893 5.893 0 0 1 4.425.18 5.873 5.873 0 0 1 3.044 3.208 5.855 5.855 0 0 1-.062 4.418 5.874 5.874 0 0 1-3.724 3.334Zm-2.871-9.576a4.132 4.132 0 0 0-2.616 2.346 4.12 4.12 0 0 0-.042 3.11 4.132 4.132 0 0 0 2.143 2.256 4.146 4.146 0 0 0 5.432-1.954 4.12 4.12 0 0 0 .207-3.102 4.13 4.13 0 0 0-2.021-2.367 4.146 4.146 0 0 0-3.103-.289ZM59.25 84.129c-1.387.413-2.88.3-4.19-.318a5.866 5.866 0 0 1-2.905-3.03A5.848 5.848 0 0 1 53.4 74.39a5.877 5.877 0 0 1 6.395-1.299 5.87 5.87 0 0 1 2.645 2.147 5.85 5.85 0 0 1 .029 6.511 5.87 5.87 0 0 1-3.217 2.38Zm-2.867-9.576a4.14 4.14 0 0 0-2.649 2.397 4.128 4.128 0 0 0 1.503 4.983 4.152 4.152 0 0 0 6.082-1.651 4.128 4.128 0 0 0-.604-4.463 4.147 4.147 0 0 0-4.332-1.267Z" fill="#6B6D73"/>
+  <path d="M57.575 90.223c4.24 0 7.68-2.292 7.68-5.118 0-2.826-3.44-5.118-7.68-5.118-4.242 0-7.68 2.292-7.68 5.118 0 2.826 3.438 5.118 7.68 5.118Z" fill="#fff"/>
+  <path d="M60.974 90.6a11.902 11.902 0 0 1-3.392.485c-4.791 0-8.55-2.62-8.55-5.972 0-3.353 3.748-5.982 8.537-5.987 2.089-.04 4.143.529 5.912 1.637a4.896 4.896 0 0 1 2.637 4.333 4.882 4.882 0 0 1-2.63 4.338 9.401 9.401 0 0 1-2.514 1.165Zm-6.272-9.34c-2.308.688-3.943 2.177-3.942 3.848 0 2.307 3.123 4.254 6.822 4.25A9.012 9.012 0 0 0 62.532 88a3.199 3.199 0 0 0 1.863-2.903 3.19 3.19 0 0 0-1.867-2.9 8.997 8.997 0 0 0-4.953-1.35c-.972-.002-1.94.136-2.873.412Z" fill="#6B6D73"/>
+  <path d="m59.458 90.067-.18-9.953-2.481-.1-.174 10.17 2.835-.117ZM47.386 87.27a.792.792 0 1 0 .002-1.583.792.792 0 0 0-.002 1.584ZM48.005 83.038a.792.792 0 1 0 .002-1.584.792.792 0 0 0-.002 1.584ZM304.545 114.406a.864.864 0 0 1-.825-.609 85.33 85.33 0 0 1-2.251-32.763c2.233-16.028 11.092-37.063 40.618-46.274a76.436 76.436 0 0 1 12.737-2.914c1.391-8.67 6.684-18.074 18.52-24.563C401.466-8.134 420.462 5.7 420.651 5.84a.86.86 0 0 1-.397 1.542.865.865 0 0 1-.64-.163c-.179-.135-18.333-13.285-45.437 1.576-11.06 6.064-16.123 14.767-17.563 22.846 13.023-1.28 19.26 3.055 22.059 6.329a13.323 13.323 0 0 1 1.998 14.595 10.43 10.43 0 0 1-4.184 4.56 10.464 10.464 0 0 1-6.037 1.393c-7.273-.426-13.292-6.53-15.332-15.552a29.25 29.25 0 0 1-.53-9.307 74.01 74.01 0 0 0-11.985 2.75c-23.012 7.179-36.273 22.275-39.424 44.867a83.392 83.392 0 0 0 2.192 32.021.865.865 0 0 1-.131.765.865.865 0 0 1-.695.349v-.005Zm51.804-80.962a27.537 27.537 0 0 0 .454 9.142c1.867 8.253 7.263 13.831 13.748 14.211a8.804 8.804 0 0 0 5.062-1.175 8.775 8.775 0 0 0 3.512-3.823 11.604 11.604 0 0 0-1.768-12.71c-4.039-4.727-11.408-6.637-21.008-5.645ZM440.769 14.55a6.18 6.18 0 0 1-3.286-.954 6.156 6.156 0 0 1-2.827-5.922 6.144 6.144 0 0 1 1.327-3.146 6.18 6.18 0 0 1 9.2-.444 6.15 6.15 0 0 1 1.626 3.004 6.156 6.156 0 0 1-1.235 5.17 6.18 6.18 0 0 1-4.805 2.291Zm.012-10.586c-.918 0-1.814.284-2.564.814a4.425 4.425 0 0 0-.223 7.065 4.448 4.448 0 0 0 6.873-1.715c.36-.843.448-1.777.253-2.673a4.401 4.401 0 0 0-1.547-2.515 4.42 4.42 0 0 0-2.792-.976ZM438.168 28.613a6.194 6.194 0 0 1-4.255-1.692 6.16 6.16 0 0 1-.456-8.478 6.197 6.197 0 0 1 8.46-.91 6.163 6.163 0 0 1 1.366 8.38 6.185 6.185 0 0 1-5.115 2.7Zm.021-10.586a4.413 4.413 0 0 0-3.655 1.931 4.395 4.395 0 0 0 .979 5.98 4.42 4.42 0 0 0 6.037-.652 4.4 4.4 0 0 0-.325-6.05 4.422 4.422 0 0 0-3.036-1.209Z" fill="#6B6D73"/>
+  <path d="M447.443 17.067c.545-2.943-2.595-5.989-7.011-6.802-4.417-.813-8.439.914-8.983 3.857-.544 2.944 2.595 5.989 7.012 6.802 4.416.813 8.438-.914 8.982-3.857Z" fill="#fff"/>
+  <path d="M440.635 21.988a12.945 12.945 0 0 1-2.331-.216 11.326 11.326 0 0 1-5.812-2.831 5.528 5.528 0 0 1-1.892-4.974 5.527 5.527 0 0 1 3.547-3.973 12.069 12.069 0 0 1 12.252 2.256 5.535 5.535 0 0 1 1.893 4.974 5.547 5.547 0 0 1-3.547 3.973c-1.303.537-2.7.806-4.11.79Zm-2.385-11.063a8.717 8.717 0 0 0-3.421.652 3.89 3.89 0 0 0-2.53 2.703 3.873 3.873 0 0 0 1.397 3.425 10.344 10.344 0 0 0 10.364 1.909 3.89 3.89 0 0 0 2.53-2.703 3.881 3.881 0 0 0-1.397-3.425 9.583 9.583 0 0 0-4.923-2.372 11.218 11.218 0 0 0-2.017-.189h-.003Z" fill="#6B6D73"/>
+  <path d="m438.449 10.067-1.737 10.397 2.562.583 2.149-10.555-2.974-.425ZM448.86 21.253a.838.838 0 1 0 .002-1.676.838.838 0 0 0-.002 1.676ZM450.323 16.965a.838.838 0 1 0 0-1.675.839.839 0 1 0 0 1.675Z" fill="#6B6D73"/>
+</svg>

package/src/lib/base/consts/date-mask.consts.ts

@@ -0,0 +1,70 @@
+const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createAutoCorrectedDatePipe(dateFormat = 'dd mm yyyy', { minYear = 1, maxYear = 9999 } = {}) {
+  const dateFormatArray = dateFormat
+    .split(/[^dmyHMS]+/)
+    .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
+
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  return function (conformedValue) {
+    const indexesOfPipedChars = [];
+    const maxValue = { dd: 31, mm: 12, yy: 99, yyyy: maxYear, HH: 23, MM: 59, SS: 59 };
+    const minValue = { dd: 1, mm: 1, yy: 0, yyyy: minYear, HH: 0, MM: 0, SS: 0 };
+    const conformedValueArr = conformedValue.split('');
+
+    // Check first digit
+    dateFormatArray.forEach((format) => {
+      const position = dateFormat.indexOf(format);
+      const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
+
+      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
+        conformedValueArr[position + 1] = conformedValueArr[position];
+        conformedValueArr[position] = 0;
+        indexesOfPipedChars.push(position);
+      }
+    });
+
+    // Check for invalid date
+    let month = 0;
+    const isInvalid = dateFormatArray.some((format) => {
+      const position = dateFormat.indexOf(format);
+      const length = format.length;
+      const textValue = conformedValue.substr(position, length).replace(/\D/g, '');
+      const value = parseInt(textValue, 10);
+
+      if (format === 'mm') {
+        // tslint:disable-next-line: strict-boolean-expressions
+        month = value || 0;
+      }
+
+      const maxValueForFormat = format === 'dd' ? maxValueMonth[month] : maxValue[format];
+
+      if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+
+      if (format === 'HH' || format === 'MM') {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+
+      return value > maxValueForFormat || (textValue.length === length && value < minValue[format]);
+    });
+
+    if (isInvalid) {
+      return false;
+    }
+
+    return {
+      value: conformedValueArr.join(''),
+      indexesOfPipedChars,
+    };
+  };
+}

package/src/lib/base/directives/date-mask.directive.module.ts

@@ -0,0 +1,14 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MaskDateDirective} from './date-mask.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    MaskDateDirective,
+  ],
+  exports: [
+    MaskDateDirective,
+  ],
+} )
+export class MaskDateDirectiveModule { }

package/src/lib/base/directives/date-mask.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
+import { createAutoCorrectedDatePipe } from '../consts/date-mask.consts';
+
+@Directive({
+  selector: '[appMaskDate]',
+})
+export class MaskDateDirective implements OnInit, OnDestroy {
+  @Input() isDateTimeMask = false;
+  @Input() considerSeconds = false;
+
+  maskedInputController;
+  mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
+  maskDateTime = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ',', ' ', /\d/, /\d/, ':', /\d/, /\d/]; // dd/mm/yyyy, hh:mm
+  maskDateTimeWithSeconds = [
+    /\d/,
+    /\d/,
+    '/',
+    /\d/,
+    /\d/,
+    '/',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ',',
+    ' ',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+  ]; // dd/mm/yyyy, hh:mm:ss
+
+  constructor(private readonly element: ElementRef) {}
+
+  ngOnInit(): void {
+    this.maskedInputController = textMask.maskInput({
+      inputElement: this.element.nativeElement,
+      guide: true,
+      showMask: false,
+      pipe: this.isDateTimeMask
+        ? this.considerSeconds
+          ? createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM:SS')
+          : createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM')
+        : createAutoCorrectedDatePipe('dd/mm/yyyy'),
+      keepCharPositions: true,
+      mask: this.isDateTimeMask ? (this.considerSeconds ? this.maskDateTimeWithSeconds : this.maskDateTime) : this.mask,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.maskedInputController.destroy();
+  }
+}

package/src/lib/base/directives/digits-only.directive.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DigitsOnlyDirective } from './digits-only.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    DigitsOnlyDirective,
+  ],
+  exports: [
+    DigitsOnlyDirective,
+  ],
+} )
+export class DigitsOnlyDirectivesModule { }

package/src/lib/base/directives/digits-only.directive.ts

@@ -0,0 +1,129 @@
+import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[appDigitsOnly]',
+})
+export class DigitsOnlyDirective implements OnInit {
+  @Input()
+  digitsOnly = false;
+
+  @Input()
+  allowHyphen = false;
+
+  @Input() decimal? = false;
+  @Input() decimalSeparator? = '.';
+  @Input() unit? = 0;
+
+  inputElement: HTMLInputElement;
+  minus = '-';
+  minusCounter = 0;
+  regex!: RegExp;
+
+  private decimalCounter = 0;
+  private readonly navigationKeys = [
+    'Backspace',
+    'Delete',
+    'Tab',
+    'Escape',
+    'Enter',
+    'Home',
+    'End',
+    'ArrowLeft',
+    'ArrowRight',
+    'Clear',
+    'Copy',
+    'Paste',
+  ];
+
+  constructor(public el: ElementRef) {
+    this.inputElement = el.nativeElement;
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(e: KeyboardEvent): void {
+    if (this.digitsOnly) {
+      if (
+        this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
+        (e.key === 'a' && e.ctrlKey) || // Allow: Ctrl+A
+        (e.key === 'c' && e.ctrlKey) || // Allow: Ctrl+C
+        (e.key === 'v' && e.ctrlKey) || // Allow: Ctrl+V
+        (e.key === 'x' && e.ctrlKey) || // Allow: Ctrl+X
+        (e.key === 'a' && e.metaKey) || // Allow: Cmd+A (Mac)
+        (e.key === 'c' && e.metaKey) || // Allow: Cmd+C (Mac)
+        (e.key === 'v' && e.metaKey) || // Allow: Cmd+V (Mac)
+        (e.key === 'x' && e.metaKey) || // Allow: Cmd+X (Mac)
+        (this.decimal && e.key === this.decimalSeparator && this.decimalCounter < 1) || // Allow: only one decimal point
+        (this.decimal && e.key === this.minus && this.minusCounter < 1) // Allow: only one minus
+      ) {
+        return;
+      }
+
+      // Ensure that it is a number and stop the keypress
+      if (e.key === ' ' || !this.regex.test(e.key)) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  @HostListener('keyup', ['$event'])
+  onKeyUp(): void {
+    if (this.digitsOnly) {
+      if (!this.decimal) {
+        return;
+      }
+
+      this.decimalCounter = this.el.nativeElement.value.split(this.decimalSeparator).length - 1;
+      this.minusCounter = this.el.nativeElement.value.split(this.minus).length - 1;
+
+      if (isNaN(+this.inputElement.value)) {
+        this.inputElement.value = this.sanitizeInput(this.inputElement.value);
+      }
+    }
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: ClipboardEvent): void {
+    if (this.digitsOnly) {
+      const pastedInput = event.clipboardData?.getData('text/plain') as string;
+      this.pasteData(pastedInput);
+      event.preventDefault();
+    }
+  }
+
+  ngOnInit(): void {
+    this.regex = new RegExp(this.allowHyphen ? '^[\\d -]+$' : '\\d');
+  }
+
+  private pasteData(pastedContent: string): void {
+    const sanitizedContent = isNaN(+pastedContent) ? this.sanitizeInput(pastedContent) : pastedContent;
+    const pasted = document.execCommand('insertText', false, sanitizedContent);
+    if (!pasted) {
+      const { selectionStart: start, selectionEnd: end } = this.inputElement;
+      this.inputElement.setRangeText(sanitizedContent, start as number, end as number, 'end');
+    }
+  }
+
+  private sanitizeInput(input: string): string {
+    let result = '';
+    if (this.decimal && this.isValidDecimal(input)) {
+      const regex = new RegExp(`^[\d -${this.decimalSeparator}]+$`, 'g');
+      result = input.replace(regex, '');
+    } else {
+      result = input.replace(`/${this.regex}/g`, '');
+    }
+
+    const maxLength = this.inputElement.maxLength;
+
+    if (maxLength > 0) {
+      // the input element has maxLength limit
+      const allowedLength = maxLength - this.inputElement.value.length;
+      result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
+    }
+
+    return result;
+  }
+
+  private isValidDecimal(inputString: string): boolean {
+    return inputString.split(this.decimalSeparator as string).length <= 2;
+  }
+}

package/src/lib/base/directives/number-border.directive.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NumberBorderDirective } from './number-border.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    NumberBorderDirective,
+  ],
+  exports: [
+    NumberBorderDirective,
+  ],
+} )
+export class NumberBorderDirectiveModule { }

package/src/lib/base/directives/number-border.directive.ts

@@ -0,0 +1,57 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appNumberBorder]',
+})
+export class NumberBorderDirective {
+  @Input() maxValue: number;
+  @Input() minValue: number;
+
+  inputElement: HTMLInputElement;
+
+  constructor(public el: ElementRef) {
+    this.inputElement = el.nativeElement;
+  }
+
+  @HostListener('keyup', ['$event'])
+  onKeyUp(e): void {
+    const value = +e.target.value;
+
+    if (isNaN(value)) {
+      this.inputElement.value = this.sanitizeInput(e.target.value);
+
+      return;
+    }
+
+    if (this.maxValue) {
+      if (value > this.maxValue) {
+        this.inputElement.value = this.sanitizeInput(this.maxValue.toString());
+
+        return;
+      }
+    }
+
+    if (this.minValue && this.minValue !== value) {
+      if (value < this.minValue) {
+        this.inputElement.value = this.sanitizeInput(this.minValue.toString());
+
+        return;
+      }
+    }
+  }
+
+  private sanitizeInput(input: string): string {
+    let result = '';
+    const regex = new RegExp(`/\d+/g`);
+    result = input.replace(regex, '');
+
+    const maxLength = this.inputElement.maxLength;
+
+    if (maxLength > 0) {
+      const allowedLength = maxLength - this.inputElement.value.length;
+      result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
+    }
+
+    return result;
+  }
+}

package/src/lib/base/element-base.ts

@@ -0,0 +1,72 @@
+import { Input, Output, EventEmitter, Component } from '@angular/core';
+import { AbstractControl, UntypedFormControl } from '@angular/forms';
+
+@Component({
+  template: '',
+})
+export default class ElementBaseComponent {
+  @Input() type!:string;
+  @Input() name!:string;
+  @Input() label!:string;
+  @Input() placeholder = '';
+  @Input() validationLabel!:string;
+  @Input() disabled = false;
+  @Input() showValidation = true;
+  @Input() showValidationOnNotTouched = false;
+  @Input() hideValidationMessage = false;
+  @Input() iconClass = '';
+  @Input() loading = false;
+  @Input() showHint: boolean = false;
+  @Input() maxLength!: number;
+  @Input() tooltip!: string;
+  @Input() showAsterisk: boolean = true;
+
+  @Output() focused = new EventEmitter<any>();
+  @Output() focusOuted = new EventEmitter<any>();
+
+  control!: UntypedFormControl;
+  required: boolean = false;
+
+  getData(): any {
+    return {
+      type: this.type || 'text',
+      label: this.label,
+      placeholder: this.placeholder,
+      validationLabel: this.validationLabel,
+      disabled: this.disabled,
+      showValidation: this.showValidation,
+      showValidationOnNotTouched: this.showValidationOnNotTouched,
+      hideValidationMessage: this.hideValidationMessage,
+      iconClass: this.iconClass,
+      control: this.control,
+      loading: this.loading,
+      showHint: this.showHint,
+      maxLength: this.maxLength,
+      tooltip: this.tooltip,
+      name: this.name,
+      required: this.isRequired(this.control),
+      showAsterisk: this.showAsterisk,
+    };
+  }
+
+  private isRequired = (ctrl: any): boolean => {
+    if (ctrl?.validator) {
+      const validator = ctrl.validator({} as AbstractControl);
+      if (validator && validator['required']) {
+        return true;
+      }
+    }
+
+    if (ctrl?.['controls']) {
+      for (const name in ctrl['controls']) {
+        if (ctrl['controls'][name]) {
+          if (this.isRequired(ctrl['controls'][name])) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+}

package/src/lib/base/element-wrapper/element-wrapper.component.html

@@ -0,0 +1,30 @@
+<div
+  class="form-field"
+  [ngClass]="{
+    'form-field--invalid':
+      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,
+    disabled: data?.disabled,
+    'form-field--required': data?.required && data?.showAsterisk
+  }"
+>
+  <div>
+    <label class="form-field__label" [attr.for]="data?.name" *ngIf="data?.label">
+      <span [innerHTML]="data?.label"></span>
+      <mat-icon class="icon" *ngIf="data?.tooltip" [matTooltip]="data?.tooltip">error_outline</mat-icon>
+    </label>
+  </div>
+
+  <ng-content></ng-content>
+
+  <ecabs-loading-spinner class="spinner" size="tiny" *ngIf="data.loading"></ecabs-loading-spinner>
+
+  <app-hint [element]="data?.control" [showHint]="data?.showHint" [maxValue]="data?.maxLength"></app-hint>
+
+  <app-validations-messages
+    *ngIf="data?.showValidation && !data?.hideValidationMessage"
+    [element]="data?.control"
+    [label]="data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel"
+    [showValidationOnNotTouched]="data?.showValidationOnNotTouched"
+  >
+  </app-validations-messages>
+</div>

package/src/lib/base/element-wrapper/element-wrapper.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-element-wrapper',
+  templateUrl: './element-wrapper.component.html',
+})
+export class ElementWrapperComponent {
+  @Input() data!:any;
+  @Input() showCloseIcon!:boolean;
+  @Input() focusedFlag!:any;
+  @Input() showPassword!:boolean;
+  @Input() control!:any;
+  @Output() showHidePassword = new EventEmitter<any>();
+  @Output() clear = new EventEmitter<any>();
+  @Output() increase = new EventEmitter<any>();
+  @Output() decrease = new EventEmitter<any>();
+
+  showHidePasswordFn(event:any): void {
+    this.showHidePassword.emit(event);
+  }
+
+  clearFn(): void {
+    this.clear.emit();
+  }
+
+  increaseFn(): void {
+    this.increase.emit();
+  }
+
+  decreaseFn(): void {
+    this.decrease.emit();
+  }
+}