open-index/open-npm huggingface dataset:
npm package: @oleksa/sx-focus-listener
Description: [![npm version](https://badge.fury.io/js/%40oleksa%2Fsx-focus-listener.svg)](https://www.npmjs.com/@oleksa/sx-focus-listener)
Author: Oleksa Novyk
Latest version: 10.0.0

[![npm version](https://badge.fury.io/js/%40oleksa%2Fsx-focus-listener.svg)](https://www.npmjs.com/@oleksa/sx-focus-listener)

# sx-focus-listener

### 🕸 Advanced focus listener for Angular

Register element in the service and use focus/blur observables.

The service handles focus/blur for one or a group of elements.

If focus moves among elements in a defined group, blur event will not be fired.

Be aware, click on non-focusable elements will cause blur event (focus switch to `<body>`).


## Installation

```
$ npm i @oleksa/sx-focus-listener
```


## Usage

### In templates

```html
<div #group="sxFocusGroup" sxFocusGroup>
  <h4>Group focused: {{ group.focusListener.focused | json }}</h4>
  <button sxFocusEl>In group!</button>
  <button sxFocusEl>In group!</button>
  <button sxFocusEl>In group!</button>
  <button>Out of group</button>
</div>
<div>
  <h4>Manual registration in group.</h4>
  <button [focusListener]="group.focusListener" sxFocusEl>Button in group!</button>
  <button>Out of group</button>
</div>
```

### As a service

```typescript
...
@Component({
  ...
  providers: [SxFocusListener],
})
export class MyComponent {
  constructor(
    private focusListener: SxFocusListener,
    ...
  ) {
  }
  
  ...

  this.focusListener.add(nativeElement1);
  this.focusListener.add(nativeElement2);
  this.focusListener.add(nativeElement3);
  this.focusListener.focus.subscribe((event: any) => {});
  this.focusListener.blur.subscribe((event: any) => {});
```


## License

MIT
npm package: @oleksandroleniuk/ngrx-toolkit
Description: <img src="https://raw.githubusercontent.com/angular-architects/ngrx-toolkit/main/logo.png" width="320" />
Latest version: 21.0.1-events.1

# NgRx Toolkit

<img src="https://raw.githubusercontent.com/angular-architects/ngrx-toolkit/main/logo.png" width="320" />

NgRx Toolkit is a set of extensions to the NgRx Signals Store, like

- Devtools: Integration into Redux Devtools
- Redux: Possibility to use the Redux Pattern (Reducer, Actions, Effects)
- Storage Sync: Synchronize the Store with Web Storage
- Redux Connector: Map NgRx Store Actions to a present Signal Store

For a more detailed guide on installation, setup, and usage, head to the [**Documentation**](https://ngrx-toolkit.angulararchitects.io//).

## https://ngrx-toolkit.angulararchitects.io/
npm package: @oleksii-lavka/grocee-icons
Description: Grocee icons
Author: Oleksii Lavka
Latest version: 1.1.0

# Welcome to `@oleksii-lavka/grocee-icons`

## Overview

`@oleksii-lavka/grocee-icons` is a powerful collection of beautifully crafted icons designed to enhance the visual appeal of your projects. Whether you're working on a website, web application, or any other frontend project, these icons are here to add a touch of elegance and creativity to your user interfaces.

## Features

- **Smaller Bundle Size:** We've optimized our icons to minimize the impact on your application's bundle size, ensuring efficient performance.
- **mapIcon Function:** The `mapIcon` function provides flexibility for your project by allowing you to easily map icon names to components of your choice.
- **Fix for Linux OS:** We've addressed the issue of repeating icon names on Linux OS, ensuring a seamless experience across all platforms.

## Installation

To get started, install `@oleksii-lavka/grocee-icons` using your package manager of choice:

```sh
npm install @oleksii-lavka/grocee-icons
```

## Usage

### Basic Usage

```javascript
import { Mail } from '@oleksii-lavka/grocee-icons/icons';

const MyComponent = () => (
  <div>
    <Mail />
    {/* ... */}
  </div>
);
```

### Dynamic icons
```javascript
import { mapIcon } from '@oleksii-lavka/grocee-icons';

const Icon = mapIcon('Mail')

const MyComponent = () => (
  <div>
    {/* Will render mail icon */}
    <Icon />
  </div>
);
```

**Note**: The `mapIcon` function allows you to dynamically create icon components by passing their names as arguments. This provides flexibility in rendering icons based on runtime conditions.

### Accessing All Icon Names
You can access an array of all icon names using the iconNames export:

```javascript
import { iconNames } from '@oleksii-lavka/grocee-icons';

console.log(iconNames); <!-- An array of all available icon names -->
```
This array includes all the icon names you can use with the mapIcon function. It's useful for various scenarios where you need to work with icon names programmatically.
npm package: @oleksii_gontar/nest-telegraf
Description: ![NPM Version](https://img.shields.io/npm/v/%40oleksii_gontar%2Fnest-telegraf)
Latest version: 0.1.6

# nest-telegraf

![NPM Version](https://img.shields.io/npm/v/%40oleksii_gontar%2Fnest-telegraf)