open-index/open-npm huggingface dataset:
npm package: @senior-hcm-service-tower/hst-card
Description: Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 1.0.0

# HCM Service Tower Senior - Card 🚀
Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.

## 📝 Requisitos  
- Angular: 18.0.1

## Objetivo
Disponibilizar um card para agrupamento de componentes dentro do contexto. 

## Como utilizar
O card irá servir para dividir os agrupamentos, podendo colocar o título de duas formas:

1. Texto simples:
```html
<hst-card titulo="Exemplo de título no card">
    <p>Conteúdo!</p>
</hst-card>
```

2. Texto com template:
```html
<hst-card>
    <div titulo> 
        <i class="pi pi-info-circle"></i>
        Título do card
    </div>
    <p>Conteúdo!</p>
</hst-card>
```

_Obs.: A prioridade do título é no formato simples, se informado os dois, apenas irá renderizar o texto do input_

## Parâmetro de entrada
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| noBorder  | boolean | false | Caso seja utilizado dentro de outro card para subdivisão, poderá ser removido as bordas
| noTitle  | boolean | false | Caso deseja esconder o título
| upperCase  | boolean | true | Título totalmente em uppercase
| titulo  | string | '' | Título simples para o card (prioridade em relação à template)
| corTitulo  | string | #00c99a | Cor do título
| style  | string | '' | Possibilidade de injetar o style no card
npm package: @senior-hcm-service-tower/hst-dados
Description: Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 1.0.1

# HCM Service Tower Senior - Dados 🚀
Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.

## 📝 Requisitos  
- Angular: 18.0.1
- primeflex: 3.3.1
- primeng: 17.18.9

## Objetivo
Disponibilizar um card com dados mapeados por um array, possível utilização tanto em BPMs quanto em telas customizadas. Esse componente tem como premissa ser utilizado para demonstrar dados de colaborador, como por exemplo: solicitante, subordinado e etc, mas também pode ser utilizado apenas para demonstrar os dados dentro de um array seguindo o objeto "Campo Model".

O componente contem dois setores, uma demonstrando a foto, matricula e nome do colaborador (caso não enviado a foto ou nome, será feito a busca pelo usuário logado no Senior X), e no lado direito os dados contidos no array. Caso a tela for aberto em um dispositivo movel, irá unificar os dados dos dois lados (Mostrando a matricula com o nome em um campo junto aos dados), como padrão o label é "Dados do solicitante", mas podendo ser alterado pelo atributo: "labelMobile".

## Parâmetro de entrada
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| campos  | CampoModel[]  | [] | Array de campos que será demonstrado
| nomeCompleto  | String | null | Nome do solicitante, caso for diferente do usuário logado no Senior X
| matricula  | String | null | Matrícula do XT
| photoUrl  | String | null | Caso a photo seja diferente do Senior X
| labelMobile  | String | Dados do solicitante | Label que irá aparecer para os dispositivos mobile (caso o atributo "apenasCampos" seja false)
| escondeFoto  | boolean | false | Esconde a foto (caso o atributo "apenasCampos" seja false)
| apenasCampos  | boolean | false | mostra apenas os campos do array passados no atributo "campos"

### Modelo CampoModel:
| Campo  | Tipo | Obrigatório | Valores |
| -------------  | ------------- | ------------- | ------------- |
| label  | String  | Sim | Texto |
| valor  | String | Sim | Texto |
| tamanho  | String | Não | "P", "M" e "G" |
npm package: @senior-hcm-service-tower/hst-loader
Description: Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 1.0.0


  # HCM Service Tower Senior - Loader 🚀
  Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
  
  ## 📝 Requisitos  
  - Angular: 18.0.1
  - primeng: 17.18.9
  
  ## 🛠️ Configuração
  Após importar o componente, há duas opções de loader para utilização: spinner ou dots. Para utilizá-los:

<strong>Configuração:</strong>
No template que utiliza essa biblioteca é só adicionar o componente de loader conforme exemplos abaixo.

Exemplo:

```html
<hst-loader [loading]="true" size="small" message="Loading..."></hst-loader>
<hst-loader [loading]="true" size="medium" message="Loading..."></hst-loader>
<hst-loader [loading]="true" size="large" message="Loading..."></hst-loader>
<hst-loader [loading]="true" [spinner]="false" message="Loading..."></hst-loader>
```


## 🔧 Inputs

<strong>Spinner</strong>
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| loading  | Boolean  | false | Define visibilidade do loader
| message  | String | '' | Mensagem abaixo do loader
| size  | String  | medium | Tamanho do spinner. Valores aceitos: small, medium e large
| type  | String  | spinner | Define se será exibido spinner ou dots

<strong>Dots</strong>
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| loading  | Boolean  | false | Define visibilidade do loader
| message  | String | '' | Mensagem abaixo do loader
| type  | String  | spinner | Define se será exibido spinner ou dots

## 📚 Loaders disponíveis
![loader gif](loaders.gif)
npm package: @senior-hcm-service-tower/hst-lookup
Description: Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 2.0.5


  # HCM Service Tower Senior - Lookup 🚀
  Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
  
  ## 📝 Requisitos  
  - Angular: 18.0.1
  - primeflex: 3.3.1
  - primeicons: 7.0.0
  - primeng: 17.18.9
  
  ## 🛠️Configuração
  Após importar o componente, será necessário:

<strong>Serviço:</strong> Criar um serviço implementando _ServiceSearch_ da biblioteca, onde será necessário adicionar a função _find_ recebendo: top, skip e filter e retornando um objeto do tipo: _Observable<ResultListInterface< T >>_ 
Obs.: Após o parâmetro "filter", podemos adicionar um objeto contendo parâmetros adicioneis para uso em buscas personalizadas

Exemplo:

```javascript
export class CollaboratorsService implements ServiceSearch<CollaboratorModel> {
  constructor(private http: HttpClient) { }

  find(top = 10, skip = 0, filter: string, args?: Record<string, string>): Observable<ResultListInterface<CollaboratorModel>> {
    return this.http.get<ResultListInterface<CollaboratorModel>>(`${url}?top=${top}&${skip}&${filter}`);
  }
}
```

<strong>Configuração:</strong> No componente que utiliza essa biblioteca será necessário criar uma configuração do tipo _SearchConfigModel_ informando:
- filterType: Lista de objeto _FilterType_ onde será parametrizado os campos disponíveis para visualização na tabela de busca.
Exemplo: 
```javascript
filterType: [
  { label: 'Matrícula', field: 'matricula_do_colaborador' } as FilterType,
  { label: 'Nome', field: 'nome_do_colaborador' } as FilterType
],
```

- patternField: Informação que será exibida no campo após seleção do objeto, parametrizad via string utilizando as variáveis por chave ${}.
Exemplo:
```javascript
patternField: '${matricula_do_colaborador} - ${nome_do_colaborador}',
```
- service: Serviço criado no item anterior
- initialValue (opcional): Valor inicial do componente (Objeto).

## 🔧 Inputs

| Input  | Entrada | Descrição |
| ------------- | ------------- | ------------- |
| config  | SearchConfigModel  | Configuração para uso
| title  | String  | Título (opcional) do modal de busca

OBs.: Por implementar ControlValueAccessor, você pode informar o control por formControlName, além de implementar as funções de input.
npm package: @senior-hcm-service-tower/hst-message
Description: Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 1.0.2

# HCM Service Tower Senior - Message 🚀
Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.

## 📝 Requisitos  
- Angular: 18.0.1
- primeflex: 3.3.1
- primeng: 17.18.9

## 📝 Objetivo
O objetivo desse componente é padronizar as mensagens que serão demonstrado para o usuário. Essa mensagem poderá ter quatro tipos: Primário, alerta, sucesso, info e erro, possibilitando remover icone, permitir fechamento e inserir um footer na mensagem.

## 🛠️ Como usar
O tipo é definido pelo atributo: "type", sendo o "primario" o tipo padrão, não necessitando informar. 

```html
<hst-message type="alerta">
    Mensagem informativa padrão do sistema
</hst-message>
```
Obs.: Se desejar alterar o icone padrão, basta informar no input "icone", e colocar de acordo com a lista do primeNg: https://v17.primeng.org/icons

```html
<hst-message type="alerta" icone="pi-bell">
    Mensagem informativa padrão do sistema com icone de sino
</hst-message>
```


Pode ser removido o icone da mensagem informado o atributo: "noIcon", assim como possibilitar o fechamento utilizando o atributo "closable":

```html
<hst-message noIcon closable>
    Mensagem informativa padrão do sistema
</hst-message>
```

E para adicionar um _footer_, basta adicionar o atributo "footer" no conteúdo:

```html
<hst-message>
    Informativo com um checkbox de aceite

    <form footer class="flex align-items-center gap-1 mt-2">
        <p-checkbox value="ck" inputId="ck" /> <span for="ck">Declaro que li e estou de acordo.</span>
    </form>  
</hst-message>
```
npm package: @senior-hcm-service-tower/hst-selectable-table
Description: Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 0.0.3

  # HCM Service Tower Senior - Selectable Table 🚀
  Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
  
  ## 📝 Requisitos  
  - Angular: 18.0.1
  - primeflex: 3.3.1
  
  ## 🛠️Configuração
  Após importar o componente, será necessário:

<strong>Configuração:</strong> 
No componente que utiliza essa biblioteca será necessário criar uma configuração dos parâmetros dos componentes:
- records: A lista que será mostrada na tabela. Deve ser compatível com a interface Record da bilioteca.
Exemplo: 
```javascript
[
  { nome: 'João da Silva', matricula: 1 },
  { nome: 'Pedro Costa', matricula: 2 }
]
```
- selectedRecords: lista de objetos que armazenará os itens selecionados na tabela.
- columnsConfig: Configuração da coluna contendo o nome do header, o campo que esse header faz referência e o tamanho da coluna. Deve ser compatível com a ionterface ColumnConfig da bilioteca;
Exemplo: 
```javascript
[
  { field: 'nome', header: 'Nome', size: '60%' },
  { field: 'matricula', header: 'Matrícula', size: '40%' }
]
```
- loading: variável booleana para indicar se a tabela deve mostrar estado de loading;
- scrollHeight: valor em pixels para definir o tamanho da tabela. Valor padrão é 300px.
- totalRecords: número total de registros.

## 🔧 Inputs

| Input  | Entrada | Descrição |
| ------------- | ------------- | ------------- |
| records  | Record[]  | Lista mostrada na tabela
| selectedRecords  | Record[]  | Itens selecionados na tabela
| columnsConfig  | ColumnConfig  | Configuração do cabeçalho de colunas
| loading  | boolean | Propriedade para ativar o estado de loading da tabela
| scrollHeight  | string | Tamanho em pixel da tabela. Valor padrão: 300px
| totalRecords  | number | Número total de registros a serem carregados

## 🔧 Outputs

| Output  | Saída | Descrição |
| ------------- | ------------- | ------------- |
| onSelectedChange  | SelectedChange | Emite um evento sempre que a seleção de dados da tabela é altrada
| onLazyLoad  | onLazyLoad[]  | Emite um evento ao realizar o scroll da tabela solicitando novos dados que devem ser preenchidos no Input records
npm package: @senior-hcm-service-tower/hst-simple-table
Description: Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 0.0.4

  # HCM Service Tower Senior - Simple Table 🚀
  Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
  
  ## 📝 Requisitos  
  - Angular: 18.0.1
  - primeflex: 3.3.1
  
  ## 🛠️Configuração
  Após importar o componente, será necessário:

<strong>Configuração:</strong> 
No componente que utiliza essa biblioteca será necessário criar uma configuração dos parâmetros dos componentes:
- records: A lista que será mostrada na tabela. Deve ser compatível com a interface Record da bilioteca.
Exemplo: 
```javascript
[
  { nome: 'João da Silva', matricula: 1 },
  { nome: 'Pedro Costa', matricula: 2 }
]
```
- columnsConfig: Configuração da coluna contendo o nome do header, o campo que esse header faz referência e o tamanho da coluna. Deve ser compatível com a ionterface ColumnConfig da bilioteca;
Exemplo: 
```javascript
[
  { field: 'nome', header: 'Nome', size: '60%' },
  { field: 'matricula', header: 'Matrícula', size: '40%' }
]
```
- loading: variável booleana para indicar se a tabela deve mostrar estado de loading;

## 🔧 Inputs

| Input  | Entrada | Descrição |
| ------------- | ------------- | ------------- |
| records  | Record[]  | Lista mostrada na tabela
| columnsConfig  | ColumnConfig  | Configuração do cabeçalho de colunas
| loading  | boolean | Propriedade para ativar o estado de loading da tabela

## 🔧 Outputs

| Output  | Saída | Descrição |
| ------------- | ------------- | ------------- |
| onLazyLoad  | onLazyLoad[]  | Emite um evento ao realizar a mudança de página da tabela solicitando novos dados que devem ser preenchidos no Input records