open-index/open-npm huggingface dataset:
npm package: @flosportsinc/ng-ad-block
Description: Provides a service to detect if an ad-blocker is in use.
Author: Patrick Michalina
Latest version: 13.3.0

# Ad-Block Detection Service
Provides a service to detect if an ad-blocker is in use.

## Installation
```sh
npm i @flosportsinc/ng-ad-block
```

Inside your `BrowserModule` (or `AppModule` if you are not using a universal server) install `FloAdBlockBrowserModule` like so:

```js
import { NgModule } from '@angular/core'
import { FloAdBlockBrowserModule } from '@flosportsinc/ng-universal-services/ad-block'

@NgModule({
  imports: [
    FloAdBlockBrowserModule.usingUrl('http://mysite.com/ads.js')
  ]
})
export class AppBrowserModule { }
```

You will need to provide an API endpoint that return a simple 200 response object. In this example we use "http://mysite.com/ads.js". It is important to have the word "ad" somewhere in the url.

If you have a Universal app you will need to include the `FloAdBlockServerModule` in `AppServerModule` like so:

```js
import { NgModule } from '@angular/core'
import { FloAdBlockServerModule } from '@flosportsinc/ng-universal-services/ad-block'

@NgModule({
  imports: [
    FloAdBlockServerModule
  ]
})
export class AppServerModule { }
```

## Usage

### Programmatic
```js
import { NgComponent } from '@angular/core'
import { AdBlockService } from '@flosportsinc/ng-ad-block'

@NgModule()
export class SomeComponent { 
  constructor(ads: AdBlockService) {
    ads.isAnAdBlockerActive.subscribe(isBlocked => {
      // access the boolean here
    })
  }
}
```

### Stuctural HTML
To hide or show content depending on ad-blocker detection status simply decorate your html like so:

```html
<!-- Show content if an ad blocker is NOT detected -->
<div *floIfNotAdBlocked>I am an ad that can likely be shown to the user</div>

<!-- Show content if an ad blocker is detected -->
<div *floIfAdBlocked>Hey, turn off your ad-blocker</div>
```
npm package: @flosportsinc/ng-fullscreen
Description: ## Installation ```sh npm i @flosportsinc/ng-fullscreen ```
Author: Patrick Michalina
Latest version: 13.3.0

# Fullscreen

## Installation
```sh
npm i @flosportsinc/ng-fullscreen
```

Import `FloFullscreenModule`:

```js
import { NgModule } from '@angular/core'
import { FloFullscreenModule } from '@flosportsinc/ng-fullscreen'

@NgModule({
  imports: [
    FloFullscreenModule
  ]
})
export class AppModule { }
```

## Usage
`floClickToExitFullscreen` will listen for click events on a given element and leave fullscreen.
`floClickToEnterFullscreen` will listen for click events on a given element and enter fullscreen on the document body or a provided reference to another html element.
`*floIfFullscreen` renders its element if the document is in fullscreen
`*floIfNotFullscreen` renders its element if the document is _NOT_ in fullscreen

```html
<div #takeMeFullscreen>
  <h3>I am content you can see when fullscreen</h3>
  <button *floIfFullscreen floClickToExitFullscreen>Exit Fullscreen</button>
  <button *floIfNotFullscreen [floClickToEnterFullscreen]="takeMeFullscreen">Enter Fullscreen</button>
</div>
```
npm package: @flosportsinc/ng-grid-list
Description: A simple media grid layout for Angular Universal projects.
Author: Patrick Michalina
Latest version: 13.3.0

# Grid List
A simple media grid layout for Angular Universal projects.

## Installation
```sh
npm i @flosportsinc/ng-grid-list
```

Import `FloGridListModule`:

```js
import { NgModule } from '@angular/core'
import { FloGridListModule } from '@flosportsinc/ng-grid-list'

@NgModule({
  imports: [
    FloGridListModule
  ]
})
export class AppModule { }
```

With configured values:

```js
import { NgModule } from '@angular/core'
import { FloGridListModule } from '@flosportsinc/ng-grid-list'

// Available options, defaults are shown.
// When configured these values become the defaults when 
// no @input property is provided for the same property 
@NgModule({
  imports: [
    FloGridListModule.config({
      selectNextEmptyOnCount: false,
      selectNextEmptyOnAdd: false
      selectFromLowerIndicesFirst: false,
      containerIdPrefix: '__fs_grid__',
      fillToFit: true,
      items: [],
      count: 4,
      max: 25,
      min: 1,
      maxHeight: 600,
      selectedIndex: 0,
      dragDrop: {
        enabled: true,
        allowedFromLists: true,
        dragOverBgEnabled: true,
        dragOverBgColor: '#808080',
        dragOverBgOpacity: 0.70
      },
      overlay: {
        throttle: 30,
        static: false,
        start: true,
        ngStyle: {},
        ngClass: {},
        fadeout: 2000,
        enabled: true
      }
    })
  ]
})
export class AppModule { }
```

## Usage
```html
<!-- GRID VIEWPORT -->
<!-- Available items are defined from N number of flo-grid-list -->
<flo-grid-list-view #gridRef>
  <div *floGridListOverlay> <!-- optional: an overylay can be marked like so -->
    <button (click)="gridRef.setCount(1)">1</button> <!-- notice the use of the grid's api via #gridRef variable -->
    <button (click)="gridRef.setCount(2)">2</button>
    <button (click)="gridRef.setCount(4)">4</button>
  </div>
  <div *floGridListItemNone> <!-- when a square is shown but has no item value, use a template here -->
    Something goes here when items are EMPTY!
  </div>
  <div *floGridListItemSome="let item"> <!-- Magic -->
    Show some html or components here complete with values from the list.
    ex: {{ item.id }}
  </div>
</flo-grid-list-view>

<!-- LIST -->
<!-- [gridTileRef] is required to send the items to a grid  -->
<!-- [items] is where your data model comes in and fills the lists  -->
<flo-grid-list [gridTileRef]="gridRef" [items]="items"> <!-- Magic -->
  <div *floGridListItem="let item">
    {{ item.src }}
  </div>
</flo-grid-list>
```
npm package: @flosportsinc/ng-http-cache-tags
Description: Provides a way expose http-cache headers in your responses when using HttpClient in Angular Universal applications.
Author: Patrick Michalina
Latest version: 13.3.0

# HTTP Cache Tag
Provides a way expose http-cache headers in your responses when using HttpClient in Angular Universal applications.

This module is only to be used on the server side. It servers no purpose for browser environmnets.

## Installation
```sh
npm i @flosportsinc/ng-http-cache-tag
```