open-index/open-npm huggingface dataset:
npm package: @kalidea/kaligraphi
Description: Agnostic Graphic Library based on angular CDK.
Latest version: 17.3.1

# Kaligraphi

Agnostic Graphic Library based on angular CDK.

Online Demo with last build available here : https://kalidea.github.io/kaligraphi/

[![npm version](https://badge.fury.io/js/%40kalidea%2Fkaligraphi.svg)](https://badge.fury.io/js/%40kalidea%2Fkaligraphi)
[![Build Status](https://travis-ci.org/kalidea/kaligraphi.svg?branch=master)](https://travis-ci.org/kalidea/kaligraphi)
[![Maintainability](https://api.codeclimate.com/v1/badges/2fcfe36810c6e928c806/maintainability)](https://codeclimate.com/github/kalidea/kaligraphi/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/2fcfe36810c6e928c806/test_coverage)](https://codeclimate.com/github/kalidea/kaligraphi/test_coverage)

## How To Use

### Installation

* install package and dependencies`npm i @kalidea/kaligraphi lodash-es luxon @angular/cdk`
* add main module to your app.module.ts : 
  ```
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { KaligraphiModule } from '@kalidea/kaligraphi';

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      KaligraphiModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  ```
* add library styles :
  * with library compiled stylesheet : 
    ```css
    @import '~@kalidea/kaligraphi/styles/styles.css'
    ```
  * with library mixin in sass/scss :
    ```sass  
    @import ~@kalidea/kaligraphi/styles/parameters
    @import ~@kalidea/kaligraphi/styles/kaligraphi
    
    +kaligraphi($kal-parameters)
    ```

### Customization

* override default sass $parameters :
  ```sass  
  @import ~@kalidea/kaligraphi/styles/parameters
  @import ~@kalidea/kaligraphi/styles/kaligraphi
  
  $parameters: deep-map-merge($parameters, ( 'input': ('border' : ('radius': '5px' ))))
  
  +kaligraphi($parameters)
  ```
* use only some composants style
  ```sass  
  @import ~@kalidea/kaligraphi/styles/parameters
  @import ~@kalidea/kaligraphi/styles/kaligraphi
  
  +kal-input($parameters)
  +kal-select($parameters)
  +kal-checkbox($parameters)
  +kal-textarea($parameters)
  ```

## Development

### Code style
use [typescript-code-style.xml](./blob/master/typescript-code-style.xml) file to provide consistency accross development

### Playground

* `npm run serve:playground` for a dev server. Navigate to `http://localhost:4200/`
* `npm run build:playground` for a production build

### Library

* `npm run build:lib` to build library
* `npm run dev:lib` to build library with hot reload

## Link

#### Kaligraphi

* ng build @kalidea/kaligraphi --watch
* npm run copy:styles
* cd dist/kalidea/kaligraphi
* npm link

#### Project

* npm link @kalidea/kaligraphi
npm package: @kalidea/sds-angular
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
Latest version: 0.0.15

# SdsAngular

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.

## Code scaffolding

Run `ng generate component component-name --project sds-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sds-angular`.
> Note: Don't forget to add `--project sds-angular` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build sds-angular` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build sds-angular`, go to the dist folder `cd dist/sds-angular` and run `npm publish`.

## Running unit tests

Run `ng test sds-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.