# @kelvininc/angular-ui-components

> Kelvin UI Components for Angular applications

Latest version **0.39.0** (published 2024-09-10) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @kelvininc/angular-ui-components
pnpm add @kelvininc/angular-ui-components
yarn add @kelvininc/angular-ui-components
bun add @kelvininc/angular-ui-components
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.39.0 |
| Published | 2024-09-10 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Kelvin Inc. |
| Maintainers | ricardogoncalves89, kv.daniel.carvalho, paulo.vieira, joshbode_kelvin, miguel.pinto, engineering_kelvin |
| Keywords | kelvin, kelvin ui components, kelvin angular ui components |

## Links

- npm: https://www.npmjs.com/package/@kelvininc/angular-ui-components
- Repository: https://github.com/kelvininc/ui-components
- Homepage: https://docs.kelvininc.com
- Issues: https://support.kelvininc.com
- npm.io page: https://npm.io/package/@kelvininc/angular-ui-components

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [@kelvininc/ui-components](https://npm.io/package/@kelvininc/ui-components.md) 0.39.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.39.0 (latest) — 2024-09-10
- 0.0.1 (canary) — 2022-02-21
- 0.38.0 — 2024-08-23
- 0.37.0 — 2024-07-26
- 0.36.1 — 2024-07-05
- 0.36.0 — 2024-07-04
- 0.35.0 — 2024-06-19
- 0.34.0 — 2024-06-07
- 0.33.1 — 2024-05-16
- 0.33.0 — 2024-05-06
- 0.32.0 — 2024-04-17
- 0.31.1 — 2024-03-28
- 0.31.0 — 2024-03-18
- 0.30.0 — 2024-03-12
- 0.29.1 — 2024-02-07
- … 29 more at https://npm.io/package/@kelvininc/angular-ui-components/versions

## README

# Kelvin Angular UI Components

Kelvin UI Components provides a set of reusable, high quality framework-agnostic UI components, this means you can use them with the current most popular Front-End Development Frameworks like React, Angular or if you prefer, the components are also available as W3C compliant WebComponents.

This is not just a library of UI components as it's also a style guide where you can see how the component looks and behaves by interacting with it, to showcase this we use [Storybook](https://storybook.js.org/), a free open-source tool.

Our Storybook is publicly available [here](https://kelvininc.github.io/ui-components/)

## Installation

From the command prompt go to your app's root folder and execute:

```
npm install @kelvininc/angular-ui-components --save
```

## Getting Started

Include the fonts in `angular.json`.

```json
"styles": [
	"node_modules/@kelvininc/angular-ui-components/assets/fonts/font-proxima-nova.css"
]
```

Include the icons in `angular.json`.

```json
"assets": [
	{
		"glob": "svg-symbols.svg",
		"input": "./node_modules/@kelvininc/angular-ui-components/assets",
		"output": "."
	}
]
```

Include the _`KvUIComponentsModule`_ in `app.module.ts`.

```ts
import { KvUIComponentsModule } from '@kelvininc/angular-ui-components';
...

@NgModule({
  ...
  imports: [
	...
    KvUIComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Now you are ready to use all available *Kelvin UI Components*. For example:

```html
...
<kv-action-button
	[type]="buttonType"
	[text]="'My Button'"
	[smallSize]="true"
	fixedWidth="250"
	(buttonClick)="onButtonClick($event)"
>
</kv-action-button>
...
```

Including the global style file you can access our foundation design system definitions like [colors](https://kelvininc.github.io/ui-components/?path=/story/foundation-colors--page), [spacings](https://kelvininc.github.io/ui-components/?path=/docs/foundation-spatial-system--page) and [typography](https://kelvininc.github.io/ui-components/?path=/docs/foundation-typography--page)

```css
@import "@kelvininc/angular-ui-components/assets/styles/globals.scss";
```

## Themes

Kelvin UI Components have two predefined themes `StyleMode.Night` and `StyleMode.Light` (`StyleMode.Night` is applied by default) that can be applied on library startup. For that you need
pass the desired theme to the library configuration in your `app.component.ts`.

```typescript
import { initialize, StyleMode } from '@kelvininc/angular-ui-components';

export class AppComponent {

	(...)

	constructor() {
		initialize({styleMode: StyleMode.Light});
	}
}
```

<br />
In addition, you can customize the theme by changing some CSS properties.

***Example***: Setting the *Primary Color*

```css
:root {
	--kv-primary: #005cc7;
	--kv-primary-rgb: 0, 92, 199;
	--kv-primary-contrast: #fff;
	--kv-primary-contrast-rgb: 255, 255, 255;
	--kv-primary-dark: #0051af;
	--kv-primary-light: #ccdef4;
}
```

## Caching

By default, the `KvIcon` and `KvIllustration` components require an SVG file with all the `kv-icons` available. The default file is `svg-symbols.svg` which is provided after installing this dependency. For caching purposes, it is also provided a `symbols.${checksum}.svg` file after installation. If you are caching those SVGs in your project you should provide the latter to the library configuration in your `app.component.ts`.

```typescript

import { initialize } from '@kelvininc/angular-ui-components';

export class AppComponent {

	(...)

	constructor() {
		initialize({ symbolsFileName: 'symbols.6e51ea0e37926eff2f3ef11e64be70fa.svg' });
	}
}
```

## Relative paths

By default the `KvIcon` and `KvIllustration` components will expect the `svg-symbols.svg` file to be served at the server root. This could not be your use-case if your application is being served on a relative path, e.g, `https://dashboard.com/clients/home`. In this case you will need to tell the library the base path to your assets url, which you can achieve by doing the following in your `app.component.ts`.

```typescript
import { initialize, StyleMode } from '@kelvininc/angular-ui-components';

export class AppComponent {

	(...)

	constructor() {
		initialize({ baseAssetsUrl: '/clients/' });
	}
}
```

For more information, visit our [Storybook](https://kelvininc.github.io/ui-components/).

---
_Source: https://npm.io/package/@kelvininc/angular-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._