# SingularityUi official components for SentinelOne

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![lint with eslint](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/eslint/eslint)
[![lint with stylelint_prettier](https://img.shields.io/badge/style_linted_with-stylelint-263238.svg?style=flat-square)](https://github.com/stylelint/stylelint)
[![Unit Tests](https://github.com/Sentinel-One/singularity-ui/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/Sentinel-One/singularity-ui/actions/workflows/unit-tests.yml)
[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

## Preliminary: Install packages peerDependencies

```angular2html
"@angular/common": ">= 14.0.3",
"@angular/core": ">= 14.0.3",
"@angular/material": ">= 14.0.3",
"@angular/animations": ">= 14.0.3",
"@angular/cdk": ">= 14.0.3",
"chart.js": "^2.9.4",
"@types/chart.js": "^2.9.31",
"@iplab/ngx-color-picker": "^2.2.0",
"@sentinel-one/ngx-monaco-editor": "^9.0.1",
"ngx-uploader": "^11.0.0",
"mark.js": "^8.11.1",
"ngx-device-detector": "^3.0.0",
"angular-imask": "^6.2.2",
"mydatepicker": "^9.0.2",
"mydaterangepicker": "^9.0.0",
"dayjs": "^1.10.4",
"lodash": "^4.17.20",
"ng2-nouislider": "^1.8.3"
```

## Installation

`npm i @sentinel-one/singularity-ui`

## Add Style

Update `angular.json` file by adding `"node_modules/@sentinel-one/singularity-ui/singularity-ui-style/_styles.scss"` to styles

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/@sentinel-one/singularity-ui/singularity-ui-style/_styles.scss"]
          }
        }
      }
    }
  }
}
```

## Install Angular Material

```angular2html
ng add @angular/material
```

### NOTE! once you run the command above you will be asked for:

- Choose a prebuilt theme name, or “custom” for a custom theme? `need to chose Indigo/Pink`