open-index/open-npm huggingface dataset:
npm package: @mckit/auth
Description: Core para integrar facilmente Auth en tu plataforma. Incluye paginas de login ya maquetadas.
Latest version: 20.0.3

# Auth - MC Kit

Core para integrar facilmente Auth en tu plataforma. Incluye paginas de login ya maquetadas.

## Table of Contents

- [Installation](#installation)
  - [1. Install MIA Core](#1-install-mia-core)
  - [1. Install libraries](#1-install-libraries)
  - [2. Add Styles](#2-add-styles)
- [Use Login Page Layout](#use-login-page-layout)
  - [1. Create component](#1-create-component)
  - [1. Install libraries](#1-install-libraries)
  - [2. Add Styles](#2-add-styles)

## Installation

### Use Schematics

```bash
ng g @mckit/schematics:add-login-page
```

### 1. Install MIA Core

[Instalar MIA Core](https://github.com/matiascamiletti/mc-kit/blob/main/projects/mckit/core/README.md#1-install-libraries)

### 2. Install libraries

```bash
npm install --save @ngx-pwa/local-storage@19 @mckit/auth
```

## Use Login Page Layout

### 1. Create component

```html
<mc-auth-basic #authComp [config]="config" (submit)="onLogin($event)"></mc-auth-basic>
```

```typescript
onLogin(data: MCAuthModel) {
  console.log(data);
}

loadConfig() {
  this.config = new MCAuthBasicConfig();
  this.config.title = 'Inicio de sesión';
  this.config.subtitle = 'Por favor, inicie sesión para continuar';
  this.config.emailPlaceholder = 'Correo electrónico';
  this.config.passwordPlaceholder = 'Contraseña';
  this.config.submitButton = 'Iniciar sesión';
  this.config.resetPassword = '¿Olvidaste tu contraseña?';
  this.config.resetPasswordLink = '/reset-password';
  this.config.register = '¿No tienes una cuenta?';
  this.config.registerLink = '/register';
}
```
npm package: @mckit/chat
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
Latest version: 20.0.7

# Chat

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build chat
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/chat
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @mckit/core
Description: Core de todo el paquete de librerias de MC Kit, incluye servicios, componentes y herramientas para facilitar el uso.
Latest version: 20.0.4

# Core - MC Kit

Core de todo el paquete de librerias de MC Kit, incluye servicios, componentes y herramientas para facilitar el uso.

## Table of Contents

- [Installation](#installation)
  - [1. Install libraries](#1-install-libraries)
  - [2. Add Styles](#2-add-styles)
- [Components](#components)
  - [Loaded Object](#loaded-object)

## Installation

### Auto install with Schematics

```bash
ng g @mckit/schematics:init
```

Esto se encarga de ejecutar todos los pasos, si no hubo error, ya ha dejado todo listo.

### 1. Install libraries

```bash
npm install --save @mckit/core primeng @primeuix/themes primeicons @ngx-pwa/local-storage@20
npm install tailwindcss @tailwindcss/postcss postcss --force
npm i tailwindcss-primeui --save
```

Configure PostCSS Plugins: ".postcssrc.json"
```json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}
```

### 2. Add Styles

**File**: ./src/styles.scss

```scss
@use "tailwindcss";
@use "primeicons/primeicons.css";

body, html {
    height: 100%;
    margin: 0;
    min-height: 100%;
}
```

### 3. Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
    // ...
    plugins: [require('tailwindcss-primeui')]
};
```

### 4. Configure PrimeNg

Open the "app.config.ts" and add lines:

```ts

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    // Others providers
    // ....

    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          prefix: 'p',
          darkModeSelector: '.my-app-dark',
          cssLayer: false
        }
      }
    })
  ]
};


```

## Components

### Loaded Object

Componente para implementar facilmente que obtenga un item a traves de un endpoint, se puede asignar el nombre del parametro a tener en cuenta desde el path.

#### - Import component

```ts
imports: [MCLoadedObject],
```

#### - Init service

```ts
itemService = inject(ItemService);

onLoaded(item: any) {
  // Set in signal
  // ...
}
```

#### - HTML

```html
<mc-loaded-object [key]="'id'" [httpService]="itemService" (onLoaded)="onLoaded($event)">

  <h1>Title item</h1>

</mc-loaded-object>
```
npm package: @mckit/cron
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
Latest version: 20.0.1

# Cron

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test cron` 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.dev/tools/cli) page.
npm package: @mckit/form
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
Latest version: 20.0.7

# Form

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build form
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/form
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @mckit/layout
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
Latest version: 20.0.1

# Layout

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test layout` 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.dev/tools/cli) page.
npm package: @mckit/layout-core
Description: ng g @mckit/schematics:install-layout-fuse
Latest version: 20.0.2

ng g @mckit/schematics:install-layout-fuse



# LayoutCore

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test layout-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 Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @mckit/layout-fuse
Description: Para utilizar tailwind css v4, agregar en el styles.scss del proyecto:
Latest version: 20.0.2

Para utilizar tailwind css v4, agregar en el styles.scss del proyecto:

@use "tailwindcss";
@source "../node_modules/@mckit/layout-fuse";

# LayoutFuse

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build layout-fuse
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/layout-fuse
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @mckit/layout-sakai
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
Latest version: 20.0.1

# LayoutSakai

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

## Code scaffolding

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

## Build

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

## Publishing

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

## Running unit tests

Run `ng test layout-sakai` 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.dev/tools/cli) page.
npm package: @mckit/loader
Description: The Loader library provides a service and components to manage and display loading states in your Angular application.
Latest version: 20.0.2

# Loader

## Functionality

The Loader library provides a service and components to manage and display loading states in your Angular application.

### Services

#### MCLoaderService

This service is used to control the loading state of the application.

- **isLoading**: A signal that indicates whether the loading state is active.
- **show()**: Sets the loading state to true.
- **hide()**: Sets the loading state to false.

### Resolvers

#### mcLoaderResolver

This resolver hides the loading state when a route is resolved.

### Components

#### MCSpinnerFullScreenComponent

This component displays a full-screen spinner when the loading state is active.

- **isLoading**: Binds to the `isLoading` signal from `MCLoaderService`.

### Usage

1. **Inject the MCLoaderService** in your components or services to control the loading state.

```typescript
import { MCLoaderService } from '@mckit/loader';

constructor(private loaderService: MCLoaderService) {}

someMethod() {
  this.loaderService.show();
  // Perform some action
  this.loaderService.hide();
}
```

2. **Use the MCSpinnerFullScreenComponent** in your templates to display the loading spinner.

```html
<mc-spinner-full-screen></mc-spinner-full-screen>
```
npm package: @mckit/monaco-field
Description: 1. Agregar assets ´´´ "assets": [   { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "/assets/monaco/" },   {     "glob": "**/*",     "input": "public"   } ], ´´´
Latest version: 20.0.2

# Monaco Field

## Steps
1. Agregar assets
´´´
"assets": [
  { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "/assets/monaco/" },
  {
    "glob": "**/*",
    "input": "public"
  }
],
´´´
npm package: @mckit/odata
Description: ng g @mckit/schematics:add-table --name Person --component src/app/features/person/pages/PersonListPage
Latest version: 20.0.3

# MC Odata Library

## Generar desde Schematics

ng g @mckit/schematics:add-table --name Person --component src/app/features/person/pages/PersonListPage

Donde --name es la clase/entidad/modelo
y --component es la ruta y nombre del componente

## Components

### MCOdataTableComponent

This abstract component provides a base for creating tables that interact with OData services. It includes functionalities for pagination, sorting, filtering, and searching.

### MCOdataSignalTableComponent

Similar to `MCOdataTableComponent`, but uses Angular signals for state management.

### OdataMultiselectComponent

A multi-select component that interacts with OData services. It supports searching and selecting multiple items.

## Entities

### MCOdata

Represents the OData query parameters such as top, skip, orderBy, filters, and expands. It includes methods for setting pagination and converting the parameters to a query string.

### MCFilterProcessor

Handles the conversion of table filters to OData filter strings. It supports various filter operations like equals, notEquals, startsWith, contains, and endsWith.
npm package: @mckit/quill-field
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 19.0.2

# QuillField

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build quill-field
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/quill-field
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.