open-index/open-npm huggingface dataset:
npm package: @ngx-jc-tools/effects
Description: Angular nasty effects
Author: Jhon Sebastian Cubillos Gonzalez
Latest version: 1.0.11

# @ngx-jc-tools/effects

Angular fancy effects library

## Installation

Install the pacjage with npm

```shell
  npm add @ngx-jc-tools/effects
```

## Effects

### Glow

Glow effect Angular component inspired by [react-glow]((https://codaworks.com)).

#### Usage

Use the custom tag `<glow-effect>`

##### params

|name|condition|default|
|-|-|-|
|border-radius|optional||
|background|required||
|border-color|required||
|border-size|optional|5px|
|color|required||
|size|required||
|transition-speed|optional|150ms|

##### typescript

```ts
import { Glow } from '@ngx-jc-tools/effects';

@Component({
  ...,
  standalone: true,
  imports: [
    ...,
    Glow
  ]
})
(...)
```

##### html

```html
<div class="flex flex-col justify-center items-center min-h-screen bg-[#232323]">
  <!--
    @tag glow-effect
    @attr size set de glow aura size
    @attr transition-speed glow aura transition duration
    @attr border-color passive border color
  -->
  <glow-effect
    border-radius="10px"
    color="#db80e7"
    size="200px"
    transition-speed="2.2s"
    background="#232323"
    border-color="#b0b0b05e"
    border-size="2px"
  >
    <!-- content -->
    ...
  </glow-effect>
</div>
```

#### result

![glow effect gif](./media/glow-ex.gif)

### Skew

Skew effect Angular directive inspired by [github]((https://github.com)).

#### Usage

Use the directive `<element skew-effect>`

##### params

|name|condition|default|
|-|-|-|
|skew-perspective|optional|700px|
|x-range|optional|2|
|y-range|optional|2|

##### typescript

```ts
import { Skew } from '@ngx-jc-tools/effects';

@Component({
  ...,
  standalone: true,
  imports: [
    ...,
    Skew
  ]
})
(...)
```

##### html

```html
<div class="flex flex-col justify-center items-center min-h-screen bg-[#232323]">
  <!--
    @tag element[skew-effect]
    @attr x-range range of degrees on the x axe
    @attr y-range range of degrees on the y axe
    @attr skew-perspective
  -->
  <div skew-effect [x-range]="8" [x-range]="6" class="rounded-md border-2 border-gray-400 sm:py-32 py-24">
    <!-- content -->
    ...
  </div>
</div>
```
npm package: @ngx-k-panel/auth
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# Auth

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test auth` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/core
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# Core

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test core` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/dashboard
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# Dashboard

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test dashboard` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/data-table
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# DataTable

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test data-table` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/entity-manager
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# EntityManager

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test entity-manager` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/form-builder
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# FormBuilder

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test form-builder` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k-panel/users-manager
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.30

# UsersManager

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test users-manager` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/auth
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.43

# Auth

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test auth` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/components
Description: Angular Kican Components
Author: Kican Contributers
Latest version: 0.0.43

# Components

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test components` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/components-bootstrap
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.43

# ComponentsBootstrap

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test components-bootstrap` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/core
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.43

# Core

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test core` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/form-builder
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.43

# FormBuilder

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test form-builder` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-k/form-builder-bootstrap
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
Latest version: 0.0.43

# FormBuilderBootstrap

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

## Code scaffolding

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

## Build

Run `ng build form-builder-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

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

## Running unit tests

Run `ng test form-builder-bootstrap` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).