design-angular-kit 1.2.0 → 1.2.1

package/src/lib/utils/file-utils.ts

@@ -0,0 +1,80 @@
+import { Observable } from 'rxjs';
+
+export class ItFileUtils {
+  /**
+   * Return the file size string
+   * @param file the file
+   * @param decimals decimal to show
+   */
+  public static getFileSizeString(file: File, decimals = 2): string {
+    const bytes = file.size;
+    if (!+bytes) {
+      return '0 Bytes';
+    }
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+  }
+
+  /**
+   * Convert a file to base64 string
+   * @param file the base64 string
+   */
+  public static fileToBase64(file: File): Observable<string> {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+
+    return new Observable<string>(observer => {
+      reader.onload = e => {
+        const target = e.target;
+        if (!target?.result || target.result instanceof ArrayBuffer) {
+          return observer.error('Error on parse');
+        }
+        observer.next(target.result);
+        observer.complete();
+      };
+      reader.onerror = error => {
+        observer.error(error);
+      };
+    });
+  }
+
+  /**
+   * Convert base64 to Blob
+   * @param base64 the base64 string
+   * @param mimeType the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME type</a> (example 'application/pdf')
+   */
+  public static base64ToBlob(base64: string, mimeType: string): Blob {
+    const byteString = window.atob(base64);
+    const arrayBuffer = new ArrayBuffer(byteString.length);
+    const int8Array = new Uint8Array(arrayBuffer);
+    for (let i = 0; i < byteString.length; i++) {
+      int8Array[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([int8Array], { type: mimeType });
+  }
+
+  /**
+   * Convert base64 to File
+   * @param base64 the base64 string
+   * @param mimeType the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME type</a> (example 'application/pdf')
+   * @param filename the file name
+   */
+  public static base64ToFile(base64: string, mimeType: string, filename: string): File {
+    const fileBlob = ItFileUtils.base64ToBlob(base64, mimeType);
+    return new File([fileBlob], filename, { type: mimeType });
+  }
+
+  /**
+   * Extract the MIME type from base64 string
+   * @param base64 the base64 string
+   */
+  public static getMimeTypeFromBase64(base64: string): string | undefined {
+    const mime = base64.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
+    return mime?.length ? mime[1] : undefined;
+  }
+}

package/src/lib/utils/regex.ts

@@ -0,0 +1,44 @@
+/**
+ * General Email Regex (RFC 5322 Official Standard)
+ * http://emailregex.com/
+ */
+export const EMAIL_REGEX =
+  /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
+
+/**
+ * Phone number Regex
+ */
+export const PHONE_NUMBER_REGEX = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{3})(?: *x(\d+))?\s*$/;
+
+/**
+ * URL Regex
+ */
+export const URL_REGEX =
+  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
+
+/**
+ * The italian tax code Regex (Codice Fiscale)
+ */
+export const ITALIAN_TAX_CODE_REGEX = /^[A-Za-z]{6}[0-9]{2}[A-Za-z]{1}[0-9]{2}[A-Za-z]{1}[0-9]{3}[A-Za-z]{1}$/i;
+
+/**
+ * The VAT number Regex (Partita iva)
+ */
+export const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
+
+/**
+ * Italian CAP Regex
+ */
+export const CAP_REGEX = /^[0-9]{5}$/;
+
+/**
+ * Italian Plate Regex
+ */
+export const PLATE_REGEX = /^[A-Za-z]{2}\d{3}[A-Za-z]{2}$/i;
+
+/**
+ * IBAN Regex
+ * https://blog.marketto.it/en/2018/06/validate-any-country-iban/
+ */
+export const IBAN_REGEX =
+  /^(?:(?:IT|SM)\d{2}[A-Z]\d{22}|CY\d{2}[A-Z]\d{23}|NL\d{2}[A-Z]{4}\d{10}|LV\d{2}[A-Z]{4}\d{13}|(?:BG|BH|GB|IE)\d{2}[A-Z]{4}\d{14}|GI\d{2}[A-Z]{4}\d{15}|RO\d{2}[A-Z]{4}\d{16}|KW\d{2}[A-Z]{4}\d{22}|MT\d{2}[A-Z]{4}\d{23}|NO\d{13}|(?:DK|FI|GL|FO)\d{16}|MK\d{17}|(?:AT|EE|KZ|LU|XK)\d{18}|(?:BA|HR|LI|CH|CR)\d{19}|(?:GE|DE|LT|ME|RS)\d{20}|IL\d{21}|(?:AD|CZ|ES|MD|SA)\d{22}|PT\d{23}|(?:BE|IS)\d{24}|(?:FR|MR|MC)\d{25}|(?:AL|DO|LB|PL)\d{26}|(?:AZ|HU)\d{27}|(?:GR|MU)\d{28})$/i;

package/src/lib/validators/it-validators.ts

@@ -0,0 +1,193 @@
+import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import {
+  CAP_REGEX,
+  EMAIL_REGEX,
+  IBAN_REGEX,
+  ITALIAN_TAX_CODE_REGEX,
+  PHONE_NUMBER_REGEX,
+  PLATE_REGEX,
+  URL_REGEX,
+  VAT_NUMBER_REGEX,
+} from '../utils/regex';
+
+export class ItValidators {
+  public static SpecialCharacterPattern = '!@#$%&*_+=;:|,.';
+
+  /**
+   * Static pattern validator with custom error
+   * @param regex
+   * @param error
+   */
+  public static customPattern(regex: RegExp, error: ValidationErrors): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.value) {
+        // if control is empty return no error
+        return null;
+      }
+
+      // test the value of the control against the regexp supplied
+      const valid = regex.test(control.value);
+
+      // if true, return no error (no error), else return error passed in the second parameter
+      return valid ? null : error;
+    };
+  }
+
+  /**
+   * Set Validator if the condition is satisfied
+   * @param validator the validator to apply if the condition is true
+   * @param condition the condition
+   */
+  public static conditional(validator: ValidatorFn, condition: (control: AbstractControl) => boolean): ValidatorFn {
+    return formControl => {
+      if (!formControl.parent) {
+        return null;
+      }
+      if (condition(formControl)) {
+        return validator(formControl);
+      }
+      return null;
+    };
+  }
+
+  /**
+   * Check whether our password and confirm password are a match
+   * @param control
+   * @param passwordControlName the password formControlName
+   * @param confirmControlName the confirmPassword formControlName
+   */
+  public static passwordMatch(
+    control: AbstractControl,
+    passwordControlName = 'password',
+    confirmControlName = 'confirmPassword'
+  ): AbstractControl | null {
+    const confirmControl = control.get(confirmControlName); // confirmPassword form control
+    if (!confirmControl) {
+      return null;
+    }
+
+    const passwordControl = control.get(passwordControlName); // password form control
+    const password = passwordControl?.value; // get password from our password form control
+
+    // compare is the password match
+    if ((password && !confirmControl.value) || (confirmControl.value && password !== confirmControl.value)) {
+      // if they don't match, set an error in our confirmPassword form control
+      confirmControl?.setErrors({ noPasswordMatch: true });
+      confirmControl?.markAsTouched();
+      return control;
+    }
+
+    if (password && passwordControl?.touched) {
+      confirmControl?.markAsTouched();
+    }
+    return null;
+  }
+
+  /**
+   * Password validator
+   * @param minLength minimum password length - default 10
+   * @param hasNumber check whether the entered password has a number - default true
+   * @param hasCapitalCase check whether the entered password has upper case letter - default true
+   * @param hasSmallCase check whether the entered password has a lower-case letter - default true
+   * @param hasSpecialCharacters check whether the entered password has a special character - default true
+   * @param required the field is required - default true
+   */
+  public static password(
+    minLength = 10,
+    hasNumber = true,
+    hasCapitalCase = true,
+    hasSmallCase = true,
+    hasSpecialCharacters = true,
+    required = true
+  ): ValidatorFn {
+    const validators: Array<ValidatorFn> = [Validators.minLength(minLength)];
+    if (hasNumber) {
+      validators.push(ItValidators.customPattern(/\d/, { hasNumber }));
+    }
+    if (hasCapitalCase) {
+      validators.push(ItValidators.customPattern(/[A-Z]/, { hasCapitalCase }));
+    }
+    if (hasSmallCase) {
+      validators.push(ItValidators.customPattern(/[a-z]/, { hasSmallCase }));
+    }
+    if (hasSpecialCharacters) {
+      validators.push(ItValidators.customPattern(new RegExp(`[${ItValidators.SpecialCharacterPattern}]`), { hasSpecialCharacters }));
+    }
+    if (required) {
+      validators.push(Validators.required);
+    }
+    return <ValidatorFn>Validators.compose(validators);
+  }
+
+  /**
+   * Email validator
+   */
+  public static get email(): ValidatorFn {
+    return <ValidatorFn>Validators.compose([Validators.email, ItValidators.customPattern(EMAIL_REGEX, { invalidEmail: true })]);
+  }
+
+  /**
+   * Phone number validator
+   */
+  public static get tel(): ValidatorFn {
+    return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
+  }
+
+  /**
+   * URL validator
+   */
+  public static get url(): ValidatorFn {
+    return ItValidators.customPattern(URL_REGEX, { invalidUrl: true });
+  }
+
+  /**
+   * Italian Tax Code validator
+   */
+  public static get taxCode(): ValidatorFn {
+    return ItValidators.customPattern(ITALIAN_TAX_CODE_REGEX, { invalidTaxCode: true });
+  }
+
+  /**
+   * VAT Number validator
+   */
+  public static get vatNumber(): ValidatorFn {
+    return ItValidators.customPattern(VAT_NUMBER_REGEX, { invalidVatNumber: true });
+  }
+
+  /**
+   * Italian Postal Code validator (CAP)
+   */
+  public static get cap(): ValidatorFn {
+    return ItValidators.customPattern(CAP_REGEX, { invalidCap: true });
+  }
+
+  /**
+   * IBAN validator
+   */
+  public static get iban(): ValidatorFn {
+    return ItValidators.customPattern(IBAN_REGEX, { invalidIban: true });
+  }
+
+  /**
+   * Italian plate validator
+   */
+  public static get plate(): ValidatorFn {
+    return ItValidators.customPattern(PLATE_REGEX, { invalidPlate: true });
+  }
+
+  /**
+   * Check if value is a valid RegExp
+   */
+  public static get regExp(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      try {
+        if (control?.value) {
+          new RegExp(control.value);
+        }
+      } catch (e) {
+        return { invalidRegex: true };
+      }
+      return null;
+    };
+  }
+}

package/{public_api.d.ts → src/public_api.ts}

@@ -1,32 +1,47 @@
+/*
+ * Public API Surface of design-angular-kit
+ */
+
 export * from './lib/design-angular-kit.module';
 export * from './lib/provide-design-angular-kit';
+
+// Core components
 export * from './lib/components/core/accordion/accordion.component';
 export * from './lib/components/core/alert/alert.component';
+
 export * from './lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component';
 export * from './lib/components/core/avatar/avatar-group/avatar-group.component';
 export * from './lib/components/core/avatar/avatar.directive';
 export * from './lib/components/core/avatar/avatar.module';
+
 export * from './lib/components/core/badge/badge.directive';
 export * from './lib/components/core/button/button.directive';
 export * from './lib/components/core/callout/callout.component';
 export * from './lib/components/core/card/card.component';
+
 export * from './lib/components/core/carousel/carousel-item/carousel-item.component';
 export * from './lib/components/core/carousel/carousel.module';
 export * from './lib/components/core/carousel/carousel/carousel.component';
+
 export * from './lib/components/core/chip/chip.component';
 export * from './lib/components/core/collapse/collapse.component';
+
 export * from './lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component';
 export * from './lib/components/core/dimmer/dimmer-icon/dimmer-icon.component';
 export * from './lib/components/core/dimmer/dimmer.component';
 export * from './lib/components/core/dimmer/dimmer.module';
+
 export * from './lib/components/core/dropdown/dropdown-item/dropdown-item.component';
 export * from './lib/components/core/dropdown/dropdown.module';
 export * from './lib/components/core/dropdown/dropdown/dropdown.component';
+
 export * from './lib/components/core/forward/forward.directive';
 export * from './lib/components/core/link/link.component';
+
 export * from './lib/components/core/list/list-item/list-item.component';
 export * from './lib/components/core/list/list.module';
 export * from './lib/components/core/list/list/list.component';
+
 export * from './lib/components/core/modal/modal.component';
 export * from './lib/components/core/notifications/notifications.component';
 export * from './lib/components/core/pagination/pagination.component';
@@ -34,20 +49,27 @@ export * from './lib/components/core/popover/popover.directive';
 export * from './lib/components/core/progress-bar/progress-bar.component';
 export * from './lib/components/core/progress-button/progress-button.component';
 export * from './lib/components/core/spinner/spinner.component';
+
 export * from './lib/components/core/steppers/steppers-container/steppers-container.component';
 export * from './lib/components/core/steppers/steppers-item/steppers-item.component';
 export * from './lib/components/core/steppers/steppers.module';
+
 export * from './lib/components/core/tab/tab-container/tab-container.component';
 export * from './lib/components/core/tab/tab-item/tab-item.component';
 export * from './lib/components/core/tab/tab.module';
+
 export * from './lib/components/core/table/sort/sort-header/sort-header.component';
 export * from './lib/components/core/table/sort/sort.directive';
 export * from './lib/components/core/table/table.component';
 export * from './lib/components/core/table/table.module';
+
 export * from './lib/components/core/timeline/timeline-item/timeline-item.component';
 export * from './lib/components/core/timeline/timeline.component';
 export * from './lib/components/core/timeline/timeline.module';
+
 export * from './lib/components/core/tooltip/tooltip.directive';
+
+// Forms components
 export * from './lib/components/form/autocomplete/autocomplete.component';
 export * from './lib/components/form/checkbox/checkbox.component';
 export * from './lib/components/form/form.module';
@@ -62,36 +84,57 @@ export * from './lib/components/form/transfer/transfer.component';
 export * from './lib/components/form/transfer/transfer.model';
 export * from './lib/components/form/upload-drag-drop/upload-drag-drop.component';
 export * from './lib/components/form/upload-file-list/upload-file-list.component';
+
+// Navigation components
 export * from './lib/components/navigation/back-button/back-button.component';
 export * from './lib/components/navigation/back-to-top/back-to-top.component';
+
 export * from './lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component';
 export * from './lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component';
 export * from './lib/components/navigation/breadcrumbs/breadcrumbs.module';
+
 export * from './lib/components/navigation/header/header.component';
 export * from './lib/components/navigation/megamenu/megamenu.component';
+
 export * from './lib/components/navigation/navbar/navbar-item/navbar-item.component';
 export * from './lib/components/navigation/navbar/navbar.module';
 export * from './lib/components/navigation/navbar/navbar/navbar.component';
+
 export * from './lib/components/navigation/navscroll/navscroll.component';
 export * from './lib/components/navigation/navscroll/navscroll.model';
+
 export * from './lib/components/navigation/sidebar/sidebar.component';
+
 export * from './lib/components/navigation/skiplink/skiplink/skiplink.component';
 export * from './lib/components/navigation/skiplink/skiplink-item/skiplink-item.component';
 export * from './lib/components/navigation/skiplink/skiplink.module';
+
+// Utils components
 export * from './lib/components/utils/error-page/error-page.component';
 export * from './lib/components/utils/icon/icon.component';
 export * from './lib/components/utils/language-switcher/language-switcher.component';
+
+// Services
 export * from './lib/services/notification/notification.service';
+
+// Pipes
 export * from './lib/pipes/date-ago.pipe';
 export * from './lib/pipes/duration.pipe';
 export * from './lib/pipes/mark-matching-text.pipe';
+
+// Interfaces
 export * from './lib/interfaces/design-angular-kit-config';
 export * from './lib/interfaces/sortable-table';
+
 export * from './lib/interfaces/core';
 export * from './lib/interfaces/form';
 export * from './lib/interfaces/icon';
 export * from './lib/interfaces/utils';
+
+// Utils
 export * from './lib/utils/date-utils';
 export * from './lib/utils/file-utils';
 export * from './lib/utils/regex';
+
+// Validators
 export * from './lib/validators/it-validators';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { importProvidersFrom } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { IT_ASSET_BASE_PATH } from './lib/interfaces/design-angular-kit-config'; // First, initialize the Angular testing environment.
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false },
+});
+
+export const tb_base = {
+  imports: [RouterTestingModule], //FormsModule,ReactiveFormsModule
+  providers: [
+    importProvidersFrom(TranslateModule.forRoot()),
+    {
+      provide: IT_ASSET_BASE_PATH,
+      useValue: './bootstrap-italia',
+    },
+  ],
+};

package/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.schematics.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["es2018", "dom"],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/design-angular-kit/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": ["jasmine", "node"]
+  },
+  "include": ["schematics/**/*"],
+  "exclude": ["schematics/*/files/**/*"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine", "node"]
+  },
+  "files": ["src/test.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

package/esm2022/design-angular-kit.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public_api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduLWFuZ3VsYXIta2l0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9kZXNpZ24tYW5ndWxhci1raXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==