open-index/open-npm huggingface dataset:
npm package: @ngspot/ng-superclass-material
Description: This package features class `FormComponentMaterialSuperclass`. Extend from this class to make it easy to write custom form controls compatible with [Material Form Field](https://material.angular.io/components/form-field/overview).
Author: Dmitry Efimenko
Latest version: 1.0.1

# ng-superclass-material

This package features class `FormComponentMaterialSuperclass`. Extend from this class to make it easy to write custom form controls compatible with [Material Form Field](https://material.angular.io/components/form-field/overview).

[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()
[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()
[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Installation

### NPM

```sh
npm install @ngspot/ng-superclass-material
```

### Yarn

```sh
yarn add @ngspot/ng-superclass-material
```

## Overview

Writing a custom control can be [quite a bit work](https://blog.angular-university.io/angular-custom-form-controls#demoofafullyfunctionalcustomformcontrol). Writing a custom control compatible with Material Form Field is [even more work](https://material.angular.io/guide/creating-a-custom-form-field-control).

The work associated with writing a custom control is simplified via `FormComponentSuperclass` class from [@ngspot/ng-superclass](https://www.npmjs.com/package/@ngspot/ng-superclass) package. You are welcome.

`@ngspot/ng-superclass-material` package presents a layer on top of it. It features `FormComponentMaterialSuperclass` that extends from `FormComponentSuperclass` and makes it much easier to author form components compatible with **Material Form Field**.

Take a look at the exactly the same component built by hand vs when `FormComponentMaterialSuperclass` was used:

![code comparison](https://github.com/DmitryEfimenko/ngspot/blob/main/packages/ng-superclass-material/package/assets/comparison.png?raw=true)

See the full code for this example in [the Demo](https://dmitryefimenko.github.io/ngspot/ng-superclass-material)

## Usage:

- Extend your component class from the `FormComponentMaterialSuperclass`
- Implement `MatFormFieldControl`
- Make sure to add `MatFormFieldControl` to providers
- The rest is the same as for the `FormComponentSuperclass`. See [docs here](https://github.com/DmitryEfimenko/ngspot/blob/main/packages/ng-superclass/package/README.md#formcomponentsuperclass).

```ts
@Component({
  // ...
  providers: [{ provide: MatFormFieldControl, useExisting: MyComponent }],
})
class MyComponent
  extends FormComponentMaterialSuperclass<ValueType>
  implements MatFormFieldControl<ValueType> {
  // ...
}
```

## License

MIT © [Dmitry Efimenko](mailto:dmitrief@gmail.com)
npm package: @ngspot/ngx-errors-material
Description: <p align="center">  <img width="20%" height="20%" src="https://github.com/DmitryEfimenko/ngspot/blob/main/packages/ngx-errors/package/assets/logo.png?raw=true"> </p>
Author: Dmitry Efimenko
Latest version: 5.0.0

<p align="center">
 <img width="20%" height="20%" src="https://github.com/DmitryEfimenko/ngspot/blob/main/packages/ngx-errors/package/assets/logo.png?raw=true">
</p>

<br />

[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()
[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()
[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

> Reactive forms validation for pros

Angular Material inputs have [their own way](https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown) of setting logic for determining if the input needs to be highlighted red or not. If custom behavior is needed, a developer needs to provide appropriate configuration. @ngspot/ngx-errors configures this functionality for the developer under the hood. Use package `@ngspot/ngx-errors-material` for this configuration to integrate with @angular/material inputs smoothly.

This package is expected to be installed together with the package `@ngspot/ngx-errors` when using `@angular/material` inputs.

## Installation

`npm install @ngspot/ngx-errors-material`

## Usage
Import library into application module:

```ts
import { NGX_ERRORS_MATERIAL_DECLARATIONS } from '@ngspot/ngx-errors-material'; // <-- import the declarations

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    ...NGX_ERRORS_MATERIAL_DECLARATIONS, // <-- include imported declarations
  ],
  template: `
    <form [formGroup]="form">
      <mat-form-field>
        <mat-label>Name</mat-label>

        <input matInput formControlName="name" />

        <!-- 
          Note: there's no parent ngxErrors directive.
          mat-form-field serves the purpose ngxErrors directive.
        -->
        <mat-error *ngxError="'required'">Name is required</mat-error>
      </mat-form-field>
    </form>
  `
})
export class MyComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    name: this.fb.control('', { validators: [Validators.required] }),
  });
}
```

[Optional] Provide errors configuration at the application level or at a component level:

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideNgxErrorsConfig({
      // optional configuration object
      showErrorsWhenInput: 'dirty',
      showMaxErrors: 1,
    })
  ]
}).catch((err) =>
  console.error(err)
);
```
npm package: @ngspot/rxjs
Description: A library providing a few useful RxJS operators.
Author: Dmitry Efimenko
Latest version: 1.0.3

# @ngspot/rxjs

A library providing a few useful RxJS operators.

## Installation

### NPM

```sh
npm install @ngspot/rxjs
```

### Yarn

```sh
yarn add @ngspot/rxjs
```

## Operators:

- `filterOutNullish` - type safe operator for filtering out nullish values
- `deferredStartWith` - the same as `startWith`, but takes the first value in a callback, which allows to evaluate it lazily
- `conditionalStartWith` - the same as `deferredStartWith`, but the first argument is a callback returning a boolean. If boolean is evaluated to true, `startWith` is applied with a result of a callback of the second argument
- `log$` - logs values passing through this operator
- `mutationObserver` - observable creator. Wraps native `MutationObserver`
- `resizeObserver` - observable creator. Wraps native `ResizeObserver`
- `zoneFull` - enters the stream into Angular Zone
- `zoneFree` - exits the stream from Angular Zone

### Usage

```ts
import { filterOutNullish } from '@ngspot/rxjs/operators';

myObservable$.pipe(filterOutNullish());
```

## Decorators


### @Share()

This decorator comes handy when you expect a function that returns a completable observable to share that observable for a unique set of parameters of the function.

In the example below only 2 http network requests will be made.

```ts
import { Share } from '@ngspot/rxjs/decorators';

class MyApi {
  constructor(private http: HttpClient) {}

  @Share()
  makeCall(param1: number, param2: number) {
    return this.http.get(`/api/${param1}/${param2}`);
  }
}

class BusinessLogic {
  constructor(private api: MyApi) {
    api.makeCall(1, 2).subscribe();
    api.makeCall(1, 2).subscribe();
    api.makeCall(1, 3).subscribe();
  }
}
```

There might be a use-case when you'd want to disable the functionality of `@Share` decorator based on the function arguments.
To achieve this you can provide the `when` option to specify the condition when the observable should be shared:

In the example below the observable will only be shared when the `param1` is not equal to `param2`.

```ts
@Share({ when: (param1, param2) => param1 !== param2 })
makeCall(param1: number, param2: number) {
  return this.http.get(`/api/${param1}/${param2}`);
}
```
The context of the `when` callback function is the context of the class instance. The signature of the of `when` callback has the same signature as the method that the decorator is applied to.

With the implementation above, two HTTP requests will be made in the example below:
```ts
class BusinessLogic {
  constructor(private api: MyApi) {
    api.makeCall(1, 1).subscribe();
    api.makeCall(1, 1).subscribe();
  }
}
```

## License

MIT © [Dmitry Efimenko](mailto:dmitrief@gmail.com)
npm package: @ngstack/electron
Description: Angular library that provides integration with Electron
Author: Denys Vuika
Latest version: 0.2.2

# @ngstack/electron

Angular library that provides integration with Electron.

## Installing

```sh
npm install @ngstack/electron
```

Then import the `ElectronModule` into your application

```ts
import { ElectronModule } from '@ngstack/electron';

@NgModule({
  imports: [
    ...,
    ElectronModule
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

## Features

### Electron Service

* detects when application is running with Electron
* provides access to `IpcRenderer` and cross-process communication
* runs channel listeners within `NgZone`
* does not affect the traditional Web applications

#### Properties

| Name         | Type    | Description                                                 |
| ------------ | ------- | ----------------------------------------------------------- |
| isDesktopApp | boolean | Detect whether service is running in a packaged desktop app |
| isWebApp     | boolean | Detect whether service is running in a traditional browser  |

#### Listening to messages

Inject the `ElectronService` instance into your component and use `ElectronService.on` method:

```ts
@Component({...})
export class AppComponent implements OnInit {

  constructor(private router: Router,
              private electron: ElectronService) {
  }

  ngOnInit() {
    this.electron.on('app:navigateRoute', (event: any, ...args: string[]) => {
      this.router.navigate([...args]);
    });
  }

}
```

Example above setups an `app:navigateRoute` channel listener,
and uses `Router` to navigate to the requested route automatically.

Now, in the Electron application shell you can request navigation like in the following example:

```js
BrowserWindow.getFocusedWindow().webContents.send(
  'app:navigateRoute',
  '/about'
);
```

Note that the `ElectronService.on` method has no effect in the traditional Web apps,
but you can still use it to have source code compatibility with the packaged scenarios.

#### Sending messages

Inject the `ElectronService` instance into your component and use `ElectronService.send` method:

```ts
@Component({...})
export class AppComponent {

  constructor(private electron: ElectronService) {}

  onButtonClicked(event: any, parameter: string) {
    this.electron.send('app:doSomething', parameter);
  }

}
```

Now, in the Electron application shell you can request navigation like in the following example:

```js
ipcMain.on('app:doSomething', (event, parameter) => {
  // your custom code with optional access to parameter passed from the web app
});
```

Note that the `ElectronService.send` method has no effect in the traditional Web apps,
but you can still use it to have source code compatibility with the packaged scenarios.
npm package: @ngstarter/bootswatch-extension
Description: Extends Angular 2 Starter with Bootswatch tasks
Author: Antony Budianto
Latest version: 1.0.0-rc.10

# bootswatch-extension
Extends Angular 2 Starter with Bootswatch specific tasks

[![npm version](https://badge.fury.io/js/%40ngstarter%2Fbootswatch-extension.svg)](https://badge.fury.io/js/%40ngstarter%2Fbootswatch-extension)

## Getting started
1. Install Bootswatch and the starter extension
  ```bash
  npm install bootswatch @ngstarter/bootswatch-extension --save
  ```

2. Then require it somewhere in your [Angular 2 Starter](https://github.com/antonybudianto/angular2-starter) tasks
  ```js
  // Load gulp config
  var config = require('../config')();

  // Load extension with config
  require('@ngstarter/bootswatch-extension')(config);
  ```

3. Change your starter `bootstrap.scss` to something like
  ```scss
  @import '../../../node_modules/bootswatch/paper/variables';
  @import 'bootstrap.variables';
  @import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
  @import '../../../node_modules/bootswatch/paper/bootswatch';
  ```

4. Try it out, it's ready!
  ```bash
  gulp set-theme --name=darkly
  ```

## Credits
[Bootswatch](https://bootswatch.com/) for providing nice themes!

## License
MIT
npm package: @ngstarter/gzip-extension
Description: Gzipped build and serve for your Angular 2 Starter
Author: Antony Budianto
Latest version: 1.0.0-rc.2

# gzip-extension
Gzipped build and serve for your Angular 2 Starter

Perfect for tracking your build size with gzip compression :heart:

[![npm version](https://badge.fury.io/js/%40ngstarter%2Fgzip-extension.svg)](https://badge.fury.io/js/%40ngstarter%2Fgzip-extension)

## Getting started
1. Install the extension
    ```bash
    npm install @ngstarter/gzip-extension --save-dev
    ```

2. Require the extension in any tasks file, for example in `tasks/serve.js`
    ```js
    // Load gulp config
    var config = require('../config')();

    // Load extension with config
    require('@ngstarter/gzip-extension')(config);
    ```

3. Try running
    ```bash
    gulp serve-build-gzip
    ```

4. Now check the network requests in your browser, HTML/CSS/JS files should be gzipped already

## License
MIT
npm package: @ngstarter/systemjs-extension
Description: SystemJS build extension for Angular Starter
Author: Antony Budianto
Latest version: 2.0.1

# systemjs-extension
SystemJS build extension for Angular 2 Starter

[![npm version](https://badge.fury.io/js/%40ngstarter%2Fsystemjs-extension.svg)](https://badge.fury.io/js/%40ngstarter%2Fsystemjs-extension)

## Getting started
1. Make sure you have `systemjs.conf.js` in the starter root

2. Install the extension
    ```bash
    npm install @ngstarter/systemjs-extension --save
    ```

3. Open `gulp.config.js` in the starter and add the following builder config
    ```js
    var systemJs = {
        builder: {
            normalize: true,
            minify: true,
            mangle: true,
            runtime: false,
            globalDefs: { DEBUG: false, ENV: 'production' }
        }
    };
    ```

4. Go to tasks/build.js in your starter, require the extension
    ```js
    // Get the starter gulp config
    var config = require('../config')();

    // Load the extension with the config
    require('@ngstarter/systemjs-extension')(config);
    ```

    and then set the second param to `build-systemjs`
    ```js
    gulp.task('build', function (done) {
        runSequence('test', 'build-systemjs', 'build-assets', done);
    });
    ```

5. Done! Try to build it!

## API
### Use own systemjs config
```js
// Get gulp config
var config = require('../config')();

// Get SystemJs config path
var systemJsConfig = 'src/systemjs.config.js';

// Load extension with config and SystemJsConfig
require('@ngstarter/systemjs-extension')(config, systemJsConfig);
```

## License
MIT
npm package: @ngstarter/webpack-extension
Description: Angular 2 Starter extension for Webpack build
Author: Antony Budianto
Latest version: 1.0.0-rc.3

# webpack-extension
Extends https://github.com/antonybudianto/angular2-starter to have Webpack build

[![npm version](https://badge.fury.io/js/%40ngstarter%2Fwebpack-extension.svg)](https://badge.fury.io/js/%40ngstarter%2Fwebpack-extension)

## Getting started
1. Copy `webpack.config.js` in this repo to the root of your starter.

2. Install webpack-stream and the extension in your starter
    ```bash
    npm install webpack-stream @ngstarter/webpack-extension --save
    ```

3. Go to `tasks/build.js` in your starter, require the extension
    ```js
    // Get gulp config
    var config = require('../config')();

    // Load extension with config
    require('@ngstarter/webpack-extension')(config);
    ```

    and then change `build-systemjs` to `build-webpack`
    ```js
    gulp.task('build', function (done) {
        runSequence('test', 'build-webpack', 'build-assets', done);
    });
    ```

4. Done! Try to build it!

## API
### Use own webpack config
```js
// Get gulp config
var config = require('../config')();

// Get webpack config
var webpackConfig = require('../webpack/webpack.config.js');

// Load extension with config and webpackConfig
require('@ngstarter/webpack-extension')(config, webpackConfig);
```

## License
MIT
npm package: @ngstato/eslint-plugin
Description: ESLint rules for ngStato — catch common mistakes, enforce best practices
Author: becher
Latest version: 0.4.0

<div align="center">

# @ngstato/eslint-plugin

### Catch mistakes before they reach production.

**3 rules for ngStato best practices. Zero config with `recommended` preset.**

[![npm](https://img.shields.io/badge/npm-v0.3.0-blue)](https://www.npmjs.com/package/@ngstato/eslint-plugin)
[![ESLint](https://img.shields.io/badge/ESLint-8%2B-4B32C3)](https://eslint.org)
[![license](https://img.shields.io/badge/license-MIT-lightgrey)](#)

</div>

---

## Install

```bash
npm install -D @ngstato/eslint-plugin
```

## Setup (flat config)

```js
// eslint.config.js
import ngstato from '@ngstato/eslint-plugin'

export default [
  ngstato.configs.recommended
]
```

## Rules

| Rule | Default | Description |
|------|---------|-------------|
| `ngstato/no-state-mutation-outside-action` | `error` | Prevent direct state mutation outside actions |
| `ngstato/no-async-without-error-handling` | `warn` | Require try/catch in async actions |
| `ngstato/require-devtools` | `warn` | Suggest `connectDevTools()` after `createStore()` |

### `no-state-mutation-outside-action`

```ts
// ❌ Error
this.store.count = 5

// ✅ OK
actions: {
  setCount(state, n: number) { state.count = n }
}
```

### `no-async-without-error-handling`

```ts
// ⚠️ Warning
actions: {
  async loadUsers(state) {
    state.users = await http.get('/users')  // no try/catch
  }
}

// ✅ OK — try/catch
actions: {
  async loadUsers(state) {
    try {
      state.users = await http.get('/users')
    } catch (e) {
      state.error = (e as Error).message
    }
  }
}

// ✅ OK — wrapped in retryable
actions: {
  loadUsers: retryable(async (state) => {
    state.users = await http.get('/users')
  }, { attempts: 3 })
}
```

### `require-devtools`

```ts
// ⚠️ Warning
const store = createStore({ count: 0 })
// missing: connectDevTools(store, 'Counter')

// ✅ OK
const store = createStore({ count: 0 })
connectDevTools(store, 'Counter')
```

## License

MIT
npm package: @ngstato/schematics
Description: Angular CLI schematics for ngStato — generate stores, features, and entities
Author: becher
Latest version: 0.4.0

<div align="center">

# @ngstato/schematics

### `ng generate @ngstato/schematics:store users` — done.

**Scaffold stores, features, and tests in seconds.**

[![npm](https://img.shields.io/badge/npm-v0.3.0-blue)](https://www.npmjs.com/package/@ngstato/schematics)
[![Angular CLI](https://img.shields.io/badge/Angular_CLI-17%2B-dd0031)](https://angular.dev)
[![license](https://img.shields.io/badge/license-MIT-lightgrey)](#)

</div>

---

## Install

```bash
npm install -D @ngstato/schematics
```

## Generate a store

```bash
ng generate @ngstato/schematics:store users
# or shorthand
ng g @ngstato/schematics:s users
```

Creates:
```
src/app/stores/users/
├── users.store.ts       # Store with CRUD actions, selectors, hooks, DevTools
└── users.store.spec.ts  # Test file with createMockStore
```

### Options

| Option | Default | Description |
|--------|---------|-------------|
| `--name` | (required) | Store name (e.g. `users`, `products`) |
| `--crud` | `true` | Generate CRUD actions (load, create, update, delete) |
| `--entity` | `false` | Use `createEntityAdapter` for normalized collections |
| `--devtools` | `true` | Connect to DevTools with `connectDevTools` |
| `--spec` | `true` | Generate test file |
| `--flat` | `false` | Create file directly in path (no subdirectory) |
| `--path` | `src/app/stores` | Target directory |

### Examples

```bash
# Basic CRUD store
ng g @ngstato/schematics:s products

# Entity-based store with adapter
ng g @ngstato/schematics:s orders --entity

# Flat file, no tests
ng g @ngstato/schematics:s settings --flat --no-spec

# Custom path
ng g @ngstato/schematics:s auth --path src/app/core/auth
```

## Generate a feature

```bash
ng generate @ngstato/schematics:feature loading
# or shorthand
ng g @ngstato/schematics:f pagination
```

Creates a reusable store feature:

```ts
// loading.feature.ts
export function withLoading(): FeatureConfig {
  return {
    state:    { loading: false, error: null },
    actions:  { /* ... */ },
    computed: { /* ... */ }
  }
}

// Usage in any store
const store = createStore({
  items: [],
  ...mergeFeatures(withLoading(), withPagination()),
  actions: { ... }
})
```

## License

MIT
npm package: @ngstato/testing
Description: ngStato — Test utilities: createMockStore, state overrides, action spies
Author: becher
Latest version: 0.4.0

<div align="center">

# @ngstato/testing

### Unit test your stores without HTTP, timers, or side effects.

**`createMockStore()` — real store mechanics, full test control.**

[![npm](https://img.shields.io/badge/npm-v0.3.0-blue)](https://www.npmjs.com/package/@ngstato/testing)
[![gzip](https://img.shields.io/badge/gzip-<%201KB-brightgreen)](#)
[![license](https://img.shields.io/badge/license-MIT-lightgrey)](#)

[Documentation](https://becher.github.io/ngStato/guide/testing) · [API Reference](https://becher.github.io/ngStato/api/testing)

</div>

---

## Install

```bash
npm install -D @ngstato/testing
```

## Usage

```ts
import { createMockStore } from '@ngstato/testing'

const store = createMockStore({
  count: 0,
  actions: {
    inc(state)             { state.count++ },
    add(state, n: number)  { state.count += n }
  },
  selectors: {
    doubled: (s) => s.count * 2
  }
})

// Test actions
await store.inc()
expect(store.count).toBe(1)
expect(store.doubled).toBe(2)

// Set state directly — skip actions
store.__setState({ count: 100 })
expect(store.doubled).toBe(200)

// Dispatch by name
await store.__dispatch('add', 5)
expect(store.count).toBe(105)
```

## Mock actions for isolation

```ts
import { vi } from 'vitest'

const store = createMockStore(config, {
  initialState: { users: [{ id: 1 }] },
  actions: { loadUsers: vi.fn() }    // no HTTP call
})

await store.loadUsers()
expect(store.loadUsers).toHaveBeenCalled()
```

## API

| Method | Description |
|:--|:--|
| `createMockStore(config, opts?)` | Create a real store with test helpers |
| `store.__setState(partial)` | Set state directly (bypass actions) |
| `store.__dispatch(name, ...args)` | Dispatch action by string name |
| `store.getState()` | Get full state snapshot |
| `store.subscribe(fn)` | Subscribe to state changes |

## 📖 [Full documentation →](https://becher.github.io/ngStato/guide/testing)

## License

MIT