open-index/open-npm huggingface dataset:
npm package: @ngbasics/theme-selector
Description: Switch global styles at runtime
Author: Benjamin Montazer
Latest version: 13.0.5

# @ngbasics/theme-selector

Switch global styles at runtime.

![demo](https://github.com/fruchtzwerg/ngbasics/raw/master/libs/theme-selector/demo.gif)

---

## Installation

```sh
npm i @ngbasics/theme-selector
```

## Preparation

Build your stylesheets:

```scss
// src/themes/dark.scss
body {
  background-color: black;
  color: white;
}

// src/themes/light.scss
body {
  background-color: white;
  color: black;
}
```

Add to `angular.json` (dev-server needs to be restarted):

```json
"styles": [
  "src/styles.scss",
  {
    "bundleName": "dark", // <- produces 'dark.css'
    "input": "src/themes/dark.scss",
    "inject": false
  },
  {
    "bundleName": "light",
    "input": "src/themes/light.scss",
    "inject": false
  }
]
```

---

## Usage

### Configure the Module:

Add a link-tag to your `index.html` and provide a selector to the config.

```html
<!-- index.html -->
<link rel="stylesheet" id="theme" href="dark.css" />
```

```ts
// app.module.ts
const themeConfig: ThemeSelectorConfig = {
  selector: () => querySelector('#theme'),
};

@NgModule({
  imports: [ThemeSelectorModule.forRoot(themeConfig)],
})
export class AppModule {}
```

Alternatively, if it doesn't matter whether the initial style is loaded asynchronously or not, you can provide it's name in the config and let the service inject it into your html.

```ts
type Theme = 'light' | 'dark';

@NgModule({
  imports: [ThemeSelectorModule.forRoot<Theme>({ initialTheme: 'dark' })],
})
export class AppModule {}
```

### Use the service:

```ts
@Component({
  selector: 'app-theme',
  template: `<div>{{ themeService.theme$ | async }}</div>
    <button (click)="themeService.selectTheme('dark')">dark</button>
    <button (click)="themeService.selectTheme('light')">light</button>`,
})
export class ThemeComponent {
  constructor(public themeService: ThemeSelectorService<Theme>) {}
}
```

---

## Persistence

By default the selected theme is NOT persisted.

If you want to persist the selection provide a storage to the config:

```ts
const themeConfig: ThemeSelectorConfig = {
  storage: localStorage,
};
```

The storage must implement the `Storage` interface.

## OS light/dark listener

You can select a theme based on whether the user's operating system is light or dark by listening to `osIsDark$`:

```ts
@Component({
  selector: 'app-theme',
  templateUrl: './theme.component.html',
  styleUrls: ['./theme.component.scss'],
})
export class ThemeComponent {
  constructor(themeService: ThemeSelectorService<Theme>) {
    themeService.osIsDark$
      // respect user selected theme on reload
      .pipe(skip(localStorage.getItem(THEME_KEY) ? 1 : 0))
      .subscribe(dark => themeService.selectTheme(dark ? 'dark' : 'light'));
  }
}
```
npm package: @ngbites/reactive-enum
Description: A tool to automatically generate a typed reactive enum with Rx
Author: Giancarlo Buomprisco
Latest version: 0.0.2

---

# Reactive Enum

### A tool to automatically generate a typed reactive enum with Rx

Not yet production ready.

## Install

```bash
npm i @ngbites/reactive-enum
```

## Usage

This utility is particularly useful with framework such as Angular to 
automatically generate a set of reactive streams, so that you can use them 
in your template effortlessly.

This basically replaces using a `BehaviorSubject` property followed by auxiliary 
methods such as:

```typescript
import { BehaviorSubject } from 'rxjs';

class MyComponent {
  private readonly status$ = new BehaviorSubject<Status>(Status.Initial);
  
  private readonly initial$ = this.status$.pipe(map(status => status === 
    Status.Initial));
  
  private readonly pending$ = this.status$.pipe(map(status => status ===
    Status.Pending));
}

```

### Basic Usage

```typescript
// declare an enum
enum Status {
  Initial,
  Pending,
  Success,
  Error
}

// pass your enum to "reactiveEnum"
const status = reactiveEnum(Status);

// "status" has now autmatically generated a method for each value of the enum
status.initial$.subscribe(); // false ... // true
status.pending$.subscribe(); // false
status.success$.subscribe(); // false
status.error$.subscribe(); // false

status.set(Status.Initial);
```

### Passing an initial value
```typescript
const status = reactiveEnum(Status, {
  initialValue: Status.Initial,
});

status.value$.subscribe(console.log); // Status.Initial
```

### Updating the value
```typescript
const status = reactiveEnum(Status);

status.value$.subscribe(console.log); // Status.Success

status.set(Status.Success);
```

### Resetting to the original value
```typescript
const status = reactiveEnum(Status, {
  initialValue: Status.Initial
});

status.value$.subscribe(console.log); 
// 1. Status.Initial
// 2. Status.Success
// 3. Status.Initial

status.set(Status.Success);
status.reset();
```
npm package: @ngbits/ngbits
Description: Useful bits of Angular for everyday use
Latest version: 0.4.1

# Ngbits

Small bits of Angular for everyday use. This project contains a number of small libraries with more to be added over time. It is not another feature complete components library but instead aims to add additional features rarely found in frontend libraries out of the box.

## Getting started

Visit the [Docs](https://philister16.github.io/ngbits) for more detailed usage instructions.

Install the package:

`npm install --save @ngbits/ngbits`

Each individual ngbit feature consists of a separate module. Import the respective feature's module and add it to the imports array of a module in your application. For example to use the Flash feature do the following:

```typescript
import { NgbitFlashModule } from '@ngbits/ngbits';

@NgModule({
    // ... module declarations etc.
    imports: [
    NgbitFlashModule
    ],
    // ... rest of module
})
export class AppModule { }
```

> Take note that the package name is in plural `@ngbits/ngbits` whereas the individual features use the singular form like `Ngbit[SomeFeature]Module)`.

### Optional

The library comes with a number of default stylings which make use of the popular [Bootstrap CSS](https://getbootstrap.com) framework. For these to work, you need to also install and import boostrap.

`npm install --save bootstrap`

```scss
// styles.scss
@import '~bootstrap/scss/bootstrap`;
```

## Docs

You can find the full documentation [here](https://philister16.github.io/ngbits).

## License

Copyright 2020 Philister16

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @ngblaylock/extract-gsheet
Description: Quickly get public Google Sheet data as JSON for use on any website.
Author: Nathan Blaylock
Latest version: 0.3.1

<img src="https://ngblaylock.github.io/extract-gsheet/img/EGS-Logo.png" alt="Extract GSheet Logo" />

# Extract GSheet

Extract GSheet allows developers to pull data out of a published (public) Google Sheet, and convert it to JSON. You could do about whatever you want with it from there.

This currently only works in the browser and not in a server environment.

## Quick Links

- [Test Drive](https://ngblaylock.github.io/extract-gsheet/)
- [Documentation](https://ngblaylock.github.io/extract-gsheet/documentation/)
- [GitHub](https://github.com/ngblaylock/extract-gsheet)
- [NPM](https://www.npmjs.com/package/@ngblaylock/extract-gsheet)
- [jsDelivr](https://www.jsdelivr.com/package/npm/@ngblaylock/extract-gsheet)

### Basic Examples
- [Alpine](https://ngblaylock.github.io/extract-gsheet/examples/alpine/)
- [Angular JS](https://ngblaylock.github.io/extract-gsheet/examples/angularjs/)
- [Handlebars](https://ngblaylock.github.io/extract-gsheet/examples/handlebars/)
- [jQuery](https://ngblaylock.github.io/extract-gsheet/examples/jquery/)
- [React](https://ngblaylock.github.io/extract-gsheet/examples/react/)
- [Vue](https://ngblaylock.github.io/extract-gsheet/examples/vue/)
npm package: @ngbox/signal-utils
Description: Powerful library to interact with Angular Signals API
Latest version: 0.0.1-beta.0

# Signal Utils

The utility library for Angular Signals API

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://raw.githubusercontent.com/ngbox/signal-utils/main/LICENSE)
[![MIT License](https://img.shields.io/badge/tested_with-jest-red)](https://jestjs.io/)
[![All Contributors](https://img.shields.io/github/all-contributors/ngbox/signal-utils?color=ee8449&style=flat-square)](#contributors)

[![Netlify Status](https://api.netlify.com/api/v1/badges/c6c7d8eb-16a6-4f7c-baa7-e9d66eb93527/deploy-status)](https://app.netlify.com/sites/signal-utils/deploys)

## :closed_book: Docs

[Docs](https://ngbox.github.io/signal-utils/)

## Demo

[Demo](https://signal-utils.netlify.app/)

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://nevzatopcu.medium.com"><img src="https://avatars.githubusercontent.com/u/33401667?v=4?s=100" width="100px;" alt="Nevzat Topçu"/><br /><sub><b>Nevzat Topçu</b></sub></a><br /><a href="#code-nevzatopcu" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@mehmeterim"><img src="https://avatars.githubusercontent.com/u/34455572?v=4?s=100" width="100px;" alt="Mehmet Erim"/><br /><sub><b>Mehmet Erim</b></sub></a><br /><a href="#code-mehmet-erim" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->
npm package: @ngbracket/ngx-layout
Description: ngbracket/ngx-layout =======
Latest version: 21.0.0

# @ngbracket/ngx-layout

This project is a continuation of the original, open-source Angular project, @angular/flex-layout, which is no longer maintained. Please consider collaborating with us rather than creating your own, private flex libraries. Many hands make light work!

If you would like to contribute to the project please get in touch with us on twitter [Duncan](https://x.com/duncanfaulkner) / [Sonu](https://x.com/SonuKapoor1978). Alternatively, if you would like to sponsor the project details can be found on our [GitHub page](https://github.com/sponsors/ngbracket).

Thank you for your support.

### Getting Started

Start by installing the ngx-layout library from `npm`

```
npm i -s @ngbracket/ngx-layout @angular/cdk
```

Next, you'll need to import the Layout module in your app's module.

**app.module.ts**

```ts

import { FlexLayoutModule } from '@ngbracket/ngx-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});
```

After that is configured, you can use the ngx-layout attributes in your HTML tags for flex layout:

```html
<div fxLayout="row" fxLayoutAlign="space-between"></div>
```

---

License: MIT