Design System

Getting started

Install with NPM

npm i alexvb1990-design-system

The library contains all the necessary dependencies to work with your project, however you need to add them into your project; please follow the next steps so you can use them all around your project.

package.json

You need to add the next lines into the dependencies (YOU DON'T NEED TO INSTALL THIS PACKAGE).

"bootstrap": "^5.1.2",
"bootstrap-icons": "^1.5.0",
"font-awesome": "^4.7.0",
"jquery": "^3.6.0",
"@angular/material": "^12.2.5"
"sweetalert2": "^11.1.9",
"@angular/service-worker": "~12.2.0"

To use the Service Worker you need to transform your app into a PWA to do this you need to run this command.

ng add @angular/pwa

angular.json

You need to add the next lines into the scripts and styles.

"styles": [
"./node_modules/alexvb1990-design-system/src/assets/styles/main.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

app.module.ts

You need to add the next line into the main module or if you have a shred module you need to put it there.

import {DesignSystemModule} from "alexvb1990-design-system";

Usage

Angular material

Input

To use the input component of the Angular Material Framework you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.

<design-system-input [am_type]="amInput[0].type" [am_label]="amInput[0].label" [am_icon]="amInput[0].icon" [am_placeholder]="amInput[0].placeholder" [am_prefix]="amInput[0].prefix" [am_clearIcon]="amInput[0].clearIcon" [am_sHint]="amInput[0].sHint" [am_eHint]="amInput[0].eHint"></design-system-input>

To make things easy we already create a Model Class for you. Use this class to give the input their attributes value, some of them attributes are optional so be free to play with them.

public label: string;
public type: string;
public placeholder: string;
public icon?: string;
public prefix?: string;
public clearIcon?: boolean;
public sHint?: string;
public eHint?: string;

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {Input} from "alexvb1990-design-system";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public amInput: Input[];

  constructor() {
    this.amInput = [
      new Input({
        label: 'Field type text',
        type: 'text',
        placeholder: 'Placeholder type text',
        icon: 'mode_edit',
        clearIcon: true,
      }), new Input({
        label: 'Field type color',
        type: 'color',
        placeholder: 'Placeholder type text'
      }), new Input({
        label: 'Field type search',
        type: 'search',
        placeholder: 'Placeholder type search',
        icon: 'search',
        sHint: 'Búscaremos tu RFC en todo nuestro sistema',
      }), new Input({
        label: 'Field type tel',
        type: 'tel',
        placeholder: 'Placeholder type tel',
        icon: 'mode_edit',
        prefix: '+55',
        clearIcon: true,
        sHint: 'No info personal',
        eHint: 'Warning'
      }), new Input({
        label: 'Field type password',
        type: 'password',
        placeholder: 'Placeholder type password',
        clearIcon: true
      })
    ];
  }
}

Button

To use the button component of the Angular Material Framework you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.

<design-system-button class="rounded-0" [am_label]="amButton[0].label" [am_type]="amButton[0].type" [am_color]="amButton[0].color" [am_disabled]="amButton[0].disabled"></design-system-button>

To make things easy we already create a Model Class for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.

public label: string;
public type?: string;
public color?: string;
public disabled?: boolean;

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {Button} from "alexvb1990-design-system";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public amButton: Button[];

  constructor() {
    this.amButton = [
      new Button({
        label: 'Button label',
        color: 'primary'
      }), new Button({
        label: 'Button label',
        type: 'flat'
      }), new Button({
        label: 'Button label',
        type: 'flat',
        color: 'accent'
      }), new Button({
        label: 'Button label',
        type: 'raised',
        color: 'warn'
      }), new Button({
        label: 'Button label',
        type: 'stroked',
        color: 'primary'
      }), new Button({
        label: 'Button label',
        type: 'flat',
        color: 'primary',
        disabled: true
      })
    ];
  }
}

Table

To use the table component of the Angular Material Framework you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.

<design-system-table [am_filter]="amTable[0].filter" [am_sorting]="amTable[0].sorting" [am_pagination]="amTable[0].pagination" [am_columns]="amTable[0].displayedColumns" [am_columnsName]="amTable[0].displayedColumnsName" [am_source]="amTable[0].dataSource" [am_paginationSizes]="amTable[0].paginationSizes"></design-system-table>

To make things easy we already create a Model Class for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.

public filter?: boolean;
public sorting?: boolean;
public pagination?: boolean;
public dataSource: Array<any>;
public displayedColumns: Array<any>;
public displayedColumnsName: Array<any>;
public paginationSizes?: Array<any>;

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {Table} from "alexvb1990-design-system";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public amTable: Table[];

  constructor() {
    this.amTable = [
      new Table({
        filter: true,
        sorting: true,
        pagination: true,
        dataSource: [
          {id: '1', name: 'John', lastname: 'Doe', age: 31, dob: '09/08/1990'},
          {id: '2', name: 'Lurch', lastname: 'Schpellchek', age: 30, dob: '17/02/1991'}
        ],
        displayedColumns: ['id', 'name', 'lastname', 'age', 'dob'],
        displayedColumnsName: ['id', 'Name', 'Last name', 'Age', 'Date of birth'],
        paginationSizes: [5, 10, 25, 50, 100]
      }), new Table({
        dataSource: [
          {id: '1', name: 'John', lastname: 'Doe', age: 31, dob: '09/08/1990'},
          {id: '2', name: 'Lurch', lastname: 'Schpellchek', age: 30, dob: '17/02/1991'}
        ],
        displayedColumns: ['id', 'name', 'lastname', 'age', 'dob'],
        displayedColumnsName: ['id', 'Name', 'Last name', 'Age', 'Date of birth']
      })
    ];
  }
}

Chips

To use the chips component of the Angular Material Framework you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.

<design-system-chips [am_chipsArr]="amChips[0].chips" [am_chipsFilter]="amChips[0].filter"></design-system-chips>

To make things easy we already create a Model Class for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.

public chips: Chip[]
public filter: boolean;

public label: string
public color?: string;

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {Chips} from "alexvb1990-design-system";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public amChips: Chips[];

  constructor() {
    this.amChips = [
      new Chips({
        chips: [
          {label: 'Front-End'},
          {label: 'Back-End'},
          {label: 'UX/UI'}
        ],
        filter: false
      }), new Chips({
        chips: [
          {label: 'Front-End', color: 'primary'},
          {label: 'Back-End', color: 'accent'},
          {label: 'UX/UI', color: 'warn'}
        ],
        filter: true
      }), new Chips({
        chips: [
          {label: 'Front-End'},
          {label: 'Back-End'},
          {label: 'UX/UI'}
        ],
        filter: true
      })
    ];
  }
}

Datepicker

To use the datepicker component of the Angular Material Framework you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.

<design-system-datepicker [am_touchUI]="amDatepickers[0].touchUI" [am_midweek]="amDatepickers[0].midweek"></design-system-datepicker>

To make things easy we already create a Model Class for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.

public midweek?: boolean
public touchUI: boolean;

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {Datepicker} from "alexvb1990-design-system";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public amDatepickers: Datepicker[];

  constructor() {
    this.amDatepickers = [
      new Datepicker({
        touchUI: false
      }),
      new Datepicker({
        touchUI: true
      }),
      new Datepicker({
        touchUI: false,
        midweek: true
      })
    ];
  }
}

Pipes

Ordinal number

Pipe to transform a regular number into ordinal number (example: 1 to 1st).

Example of implementation in the HTML file.

<p>{{user.ranking | ordinalNumber}}</p>

Truncate Ellipsis

Pipe that will add ... to the end of a string if this string it's larger than 50 characters.

Example of implementation in the HTML file.

<p>{{user.bio | truncateEllipsis:50}}</p>

Services

SwUpdateCheckNewVersionService

This service will check if there's a new version of the site, to prevent cache or an older version on the client side. When the service detects a new version it will trigger a sweet alert modal to let the user know and if the user wants to upgrade the site it only needs to click on the upgrade option of the modal.

Example of implementation in the typescript file.

import {Component} from '@angular/core';
import {SwUpdateCheckNewVersionService} from "alexvb1990-design-system";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent {
  constructor(private swUpdateCheckNewVersionService: SwUpdateCheckNewVersionService) {
      this.swUpdateCheckNewVersionService.checkForUpdates();
  }
}

Feedback

If you have any feedback, please reach out to us at sing [email protected]