# ngx-i24-color-picker

> A lightweight plugin to pick a color.

Latest version **0.0.3** (published 2022-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-i24-color-picker
pnpm add ngx-i24-color-picker
yarn add ngx-i24-color-picker
bun add ngx-i24-color-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-10-29 |
| First published | 2022-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 63.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | YASEEN ALREFAEE |
| Maintainers | yaseenref |
| Keywords | color, picker, color picker, angular, ng, ngx, i24, icode24 |

## Links

- npm: https://www.npmjs.com/package/ngx-i24-color-picker
- Repository: https://github.com/yasref/ngx-i24-color-picker-lib
- Issues: https://github.com/yasref/ngx-i24-color-picker-lib/issues
- npm.io page: https://npm.io/package/ngx-i24-color-picker

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-10-29
- 0.0.2 — 2022-07-09
- 0.0.1 — 2022-07-06

## README

# NgxI24ColorPickerLib
[![](https://img.shields.io/npm/v/ngx-i24-color-picker)](https://www.npmjs.com/package/ngx-i24-color-picker)
[![](https://img.shields.io/npm/l/ngx-i24-color-picker)](https://www.npmjs.com/package/ngx-i24-color-picker)
> A lightweight plugin to pick a color.

## Features

- highly customizable
- very easy to implement

## Demo

[![](https://raw.githubusercontent.com/yasref/ngx-i24-color-picker-lib/master/projects/demo/images/ngx-i24-color-picker.PNG)](https://stackblitz.com/edit/ngx-i24-color-picker-demo)

- [Link](https://stackblitz.com/edit/ngx-i24-color-picker-demo)

## Get started

#### Installation

```
$ npm i ngx-i24-color-picker
```

#### Example

##### TS

###### Module

```typescript
import { NgxI24ColorPickerModule } from "ngx-i24-color-picker";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxI24ColorPickerModule],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

###### Component

```typescript
import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  o1 = {
    boxBg: "#303030",
    showBox: true,
  };
}
```

##### HTML

```html
<ngx-i24-color-picker
  [boxBg]="o1.boxBg"
  [showBox]="o1.showBox"
></ngx-i24-color-picker>
```

## Options

| Property            | Default                                 | Description                                     |
| ------------------- | --------------------------------------- | ----------------------------------------------- |
| ds                  | [ '#f44336', '#e91e63', '#9c27b0', ...] | The list of colors                              |
| position            | 'right'                                 | The position of selection box ('right', 'left') |
| value               | '#2196f3'                               | The initial value of the preview box            |
| previewWidth        | '20px'                                  | The width of the preview box                    |
| previewHeight       | '20px'                                  | The height of the preview box                   |
| previewBorderRadius | '3px'                                   | The border radios of the preview box            |
| boxGap              | '10px'                                  | The distance between the colors items           |
| boxWidth            | '164'                                   | The width of the colors box                     |
| boxBg               | '#fafafa'                               | The background color of the colors box          |
| boxPadding          | '10px'                                  | The padding of the colors box                   |
| boxBorderRadius     | '4px'                                   | The border radios of the colors box             |
| arrowWidth          | '6px'                                   | The width of the arrow                          |
| itemWidth           | '12px'                                  | The width of the color item                     |
| itemHeight          | '12px'                                  | The height of the color item                    |
| itemBorderRadius    | '3px'                                   | The border radios of the color item             |
| showBox             | false                                   | The initial value of the colors box             |

## Events

- `selectedChanged` - triggered on change the selection

## Other Projects
| Name | Link | Description|
| - | - | - |
| ngx-i24-circular-progress | [Link](https://www.npmjs.com/package/ngx-i24-circular-progress) | A lightweight plugin to render a simple, animated circular progress bar.      |
| ngx-i24-progress-bar      | [Link](https://www.npmjs.com/package/ngx-i24-progress-bar)      | A lightweight plugin to render a simple, animated progress bar.               |
| ngx-weekday-picker        | [Link](https://www.npmjs.com/package/ngx-weekday-picker)        | Lightweight plugin to a pick weekday.                                         |
| ngx-i24-color-picker      | [Link](https://www.npmjs.com/package/ngx-i24-color-picker)      | A lightweight plugin to pick a color.                                         |
| ngx-i24-checkbox          | [Link](https://www.npmjs.com/package/ngx-i24-checkbox)      | A lightweight plugin to display a modern checkbox.                                |

## Support

[![](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://www.buymeacoffee.com/yaseenref)

## Copyright
Copyright (c) 2022 Yaseen Alrefaee, contributors. Released under the MIT
 
<!-- 
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 ngx-i24-color-picker` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-i24-color-picker`.
> Note: Don't forget to add `--project ngx-i24-color-picker` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build ngx-i24-color-picker` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build ngx-i24-color-picker`, go to the dist folder `cd dist/ngx-i24-color-picker` and run `npm publish`.

## Running unit tests

Run `ng test ngx-i24-color-picker` 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. -->

---
_Source: https://npm.io/package/ngx-i24-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._