Full Code of NetanelBasal/ngx-content-loader for AI

Repository: NetanelBasal/ngx-content-loader
Branch: master
Commit: de69f1b4c2c4
Files: 53
Total size: 57.0 KB

Directory structure:
gitextract_04497wqc/

├── .all-contributorsrc
├── .github/
│   └── workflows/
│       └── content-loader.yml
├── .gitignore
├── .husky/
│   └── .gitignore
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── angular.json
├── commitlint.config.js
├── package.json
├── prettier.config.js
├── projects/
│   └── ngneat/
│       └── content-loader/
│           ├── CHANGELOG.md
│           ├── karma.conf.js
│           ├── ng-package.json
│           ├── ng-package.prod.json
│           ├── package.json
│           ├── src/
│           │   ├── lib/
│           │   │   ├── bullet-list-loader.component.ts
│           │   │   ├── content-loader.component.html
│           │   │   ├── content-loader.component.ts
│           │   │   ├── content-loader.module.ts
│           │   │   ├── facebook-loader.component.ts
│           │   │   └── list-loader.component.ts
│           │   ├── public_api.ts
│           │   └── test.ts
│           ├── tsconfig.lib.json
│           ├── tsconfig.spec.json
│           └── tslint.json
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── app.server.module.ts
│   ├── assets/
│   │   └── .gitkeep
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.server.ts
│   ├── main.ts
│   ├── polyfills.ts
│   ├── server.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.server.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json
└── tslint.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .all-contributorsrc
================================================
{
  "projectName": "content-loader",
  "projectOwner": "NetanelBasal",
  "repoType": "github",
  "repoHost": "https://github.com",
  "files": [
    "README.md"
  ],
  "imageSize": 100,
  "commit": true,
  "commitConvention": "angular",
  "contributors": [
    {
      "login": "NetanelBasal",
      "name": "Netanel Basal",
      "avatar_url": "https://avatars1.githubusercontent.com/u/6745730?v=4",
      "profile": "https://www.netbasal.com",
      "contributions": [
        "code",
        "content",
        "doc"
      ]
    },
    {
      "login": "leo6104",
      "name": "Heo",
      "avatar_url": "https://avatars0.githubusercontent.com/u/7777929?v=4",
      "profile": "https://www.mapianist.com",
      "contributions": [
        "code"
      ]
    },
    {
      "login": "andreas-aeschlimann",
      "name": "Andreas Aeschlimann",
      "avatar_url": "https://avatars3.githubusercontent.com/u/2174826?v=4",
      "profile": "http://www.andreas.ae",
      "contributions": [
        "doc"
      ]
    },
    {
      "login": "alexw10",
      "name": "alexw10",
      "avatar_url": "https://avatars0.githubusercontent.com/u/9453636?v=4",
      "profile": "https://github.com/alexw10",
      "contributions": [
        "code",
        "doc"
      ]
    },
    {
      "login": "nonsocode",
      "name": "Chinonso Chukwuogor",
      "avatar_url": "https://avatars3.githubusercontent.com/u/12021370?v=4",
      "profile": "https://github.com/nonsocode",
      "contributions": [
        "code"
      ]
    },
    {
      "login": "wynfred",
      "name": "wynfred",
      "avatar_url": "https://avatars2.githubusercontent.com/u/9249564?v=4",
      "profile": "https://github.com/wynfred",
      "contributions": [
        "code"
      ]
    },
    {
      "login": "irustm",
      "name": "Rustam",
      "avatar_url": "https://avatars1.githubusercontent.com/u/16316579?v=4",
      "profile": "https://twitter.com/irustm",
      "contributions": [
        "code"
      ]
    },
    {
      "login": "gund",
      "name": "Alex Malkevich",
      "avatar_url": "https://avatars0.githubusercontent.com/u/3644678?v=4",
      "profile": "https://github.com/gund",
      "contributions": [
        "doc"
      ]
    },
    {
      "login": "danielsogl",
      "name": "Daniel Sogl",
      "avatar_url": "https://avatars2.githubusercontent.com/u/15234844?v=4",
      "profile": "https://github.com/danielsogl",
      "contributions": [
        "code",
        "maintenance",
        "platform"
      ]
    },
    {
      "login": "kreatemore",
      "name": "Alex Szabó‮",
      "avatar_url": "https://avatars1.githubusercontent.com/u/9606801?v=4",
      "profile": "http://www.tailored.hu/",
      "contributions": [
        "code"
      ]
    },
    {
      "login": "donroyco",
      "name": "Roy",
      "avatar_url": "https://avatars2.githubusercontent.com/u/1763537?v=4",
      "profile": "http://codepen.io/donroyco/",
      "contributions": [
        "doc"
      ]
    },
    {
      "login": "RobinVdBroeck",
      "name": "Robin Van den Broeck",
      "avatar_url": "https://avatars2.githubusercontent.com/u/3083785?v=4",
      "profile": "https://robinvdb.me/",
      "contributions": [
        "code",
        "maintenance",
        "platform"
      ]
    }
  ],
  "contributorsPerLine": 7
}


================================================
FILE: .github/workflows/content-loader.yml
================================================
name: '@ngneat/content-loader'

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  build:
    runs-on: ubuntu-18.04
    strategy:
      fail-fast: true

    steps:
      - uses: actions/checkout@v2

      - uses: actions/cache@v1
        id: npm-cache
        with:
          path: node_modules
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-npm

      - uses: actions/setup-node@v1
        with:
          node-version: 14.15

      - name: Install dependencies
        if: steps.npm-cache.outputs.cache-hit != 'true'
        env:
          HUSKY_SKIP_INSTALL: 'true'
        run: npm ci

      - name: Build library
        run: npm run build:lib

      - name: Build integration app
        run: npm run build:integration


================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db
.angulardoc.json


================================================
FILE: .husky/.gitignore
================================================
_


================================================
FILE: CHANGELOG.md
================================================
# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [6.2.0](https://github.com/ngneat/content-loader/compare/v6.1.0...v6.2.0) (2021-11-17)


### Features

* upgrade to Angular 13 and switch to modern APF ([#99](https://github.com/ngneat/content-loader/issues/99)) ([3cafc3b](https://github.com/ngneat/content-loader/commit/3cafc3bb3d6583bdc9e42a77aac20dbdd1996c12))

## [6.1.0](https://github.com/ngneat/content-loader/compare/v6.0.0...v6.1.0) (2021-06-30)


### Features

* enable `OnPush` for all components and setup server-side rendering ([#90](https://github.com/ngneat/content-loader/issues/90)) ([c2fea90](https://github.com/ngneat/content-loader/commit/c2fea90913fc415eb6e7d26a419e4235aad435e2))


### Bug Fixes

* **lib:** default size for content loader viewbox ([#76](https://github.com/ngneat/content-loader/issues/76)) ([a749240](https://github.com/ngneat/content-loader/commit/a7492409eb47655ede8b38ad07b13084a68ecc5e))

## [6.0.0](https://github.com/ngneat/content-loader/compare/v5.0.0...v6.0.0) (2020-10-31)

### ⚠ BREAKING CHANGES

- 🧨 align the library with react and remove base url functionality

### Features

- 🎸 lib ([fb57f9a](https://github.com/ngneat/content-loader/commit/fb57f9a75aec60d4dae7f2ef1b229650949b1305))

## [5.0.0](https://github.com/ngneat/content-loader/compare/v4.1.0...v5.0.0) (2020-07-23)

### ⚠ BREAKING CHANGES

- 🧨 support ng10

### Features

- 🎸 support ng 10 ([a26012e](https://github.com/ngneat/content-loader/commit/a26012ec00922048ebb6a7ce06495582c3ef291c))
- **lib:** migrate to ng 10 ([#62](https://github.com/ngneat/content-loader/issues/62)) ([6efec6e](https://github.com/ngneat/content-loader/commit/6efec6e036aa08b4a504e55d8e2115fcdd5f6f38))

## [4.0.0](https://github.com/ngneat/content-loader/compare/v3.0.0...v4.0.0) (2019-08-19)

### Bug Fixes

- **content-loader:** set baseUrl before setFillStyle, setClipStyle ([285c2b4](https://github.com/ngneat/content-loader/commit/285c2b4))

### Features

- 🎸 lib ([91ff5bb](https://github.com/ngneat/content-loader/commit/91ff5bb))
- **content-loader:** set baseUrl to window.location.pathname in ngOnInit ([f88fde5](https://github.com/ngneat/content-loader/commit/f88fde5))

### BREAKING CHANGES

- move to ngneat


================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment include:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at netanel7799@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]

[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Content Loader

🙏 We would ❤️ for you to contribute to Content Loader and help make it even better than it is today!

# Developing

Start by installing all dependencies:

```bash
npm i
```

## Building

```bash
npm run build:lib
```

## <a name="rules"></a> Coding Rules

To ensure consistency throughout the source code, keep these rules in mind as you are working:

- All features or bug fixes **must be tested** by one or more specs (unit-tests).
- All public API methods **must be documented**.

## <a name="commit"></a> Commit Message Guidelines

We have very precise rules over how our git commit messages can be formatted. This leads to **more
readable messages** that are easy to follow when looking through the **project history**. But also,
we use the git commit messages to **generate the Akita changelog**.

### Commit Message Format

Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
format that includes a **type**, a **scope** and a **subject**:

```
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

The **header** is mandatory and the **scope** of the header is optional.

Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
to read on GitHub as well as in various git tools.

The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.

Samples: (even more [samples](https://github.com/angular/angular/commits/master))

```
docs(changelog): update changelog to beta.5
```

```
fix(release): need to depend on latest rxjs and zone.js

The version in our package.json gets copied to the one we publish, and users need the latest of these.
```


================================================
FILE: ISSUE_TEMPLATE.md
================================================
<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...

<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
</code></pre>

## Current behavior

<!-- Describe how the issue manifests. -->

## Expected behavior

<!-- Describe what the desired behavior would be. -->

## Minimal reproduction of the problem with instructions

For bug reports please provide the _STEPS TO REPRODUCE_ and if possible a _MINIMAL DEMO_ of the problem.

## What is the motivation / use case for changing the behavior?

<!-- Describe the motivation or the concrete use case. -->

## Environment

<pre><code>
Angular version: X.Y.Z
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>


================================================
FILE: LICENSE
================================================
The MIT License

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.



================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] The commit message follows our guidelines: https://github.com/ngneat/content-loader/blob/master/CONTRIBUTING.md#commit
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

```
[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:
```

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

```
[ ] Yes
[ ] No
```

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

## Other information


================================================
FILE: README.md
================================================
# Angular Content Loader

[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)

<p align="center">
  <img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
</p>

Angular component that uses SVG to create a collection of loaders which simulates the structure of the
content that will be loaded, similar to Facebook cards loaders.

[Live Demo](https://stackblitz.com/edit/ngx-content-loader)

## Sponsoring ngneat

[Sponsorships](https://github.com/sponsors/ngneat) aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.

### Gold Sponsors

Elevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.

### Silver Sponsors

Boost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.

### Bronze Sponsors

<a href="https://houseofangular.io" target="_blank">
  <img src="https://github.com/ngrx/platform/blob/main/projects/ngrx.io/src/assets/images/sponsors/house-of-angular.png" width="50px" height="50px" alt="House of Angular" />
</a>

Become a bronze sponsor and get your logo on our README on GitHub.

## Features

This is an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).

- :gear: **Completely customizable:** you can change the colors, speed and sizes;
- :pencil2: **Create your own loading:** use the
  [create-react-content-loader](https://danilowoz.github.io/create-react-content-loader/) to create
  your custom loadings easily;
- :ok_hand: **You can use right now:** there are a lot of presets to use the loader, see the
  [options](#examples);
- :rocket: **Performance:** uses pure SVG to work, so it works without any extra scripts,
  canvas, etc;

<a href="https://www.buymeacoffee.com/basalnetanel" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

## Install

### Yarn

```bash
yarn add @ngneat/content-loader
```

## Usage

```ts
import { ContentLoaderModule } from '@ngneat/content-loader';

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

```html
<content-loader>
  <svg:rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
  <svg:rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
  <svg:rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
  <svg:rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
  <svg:rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
  <svg:rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</content-loader>
```

> Warning: Safari renders the SVG in black in case your Angular application uses the `<base href="/" />` tag in the `<head/>` of your `index.html`.
> Refer to the input property `baseUrl` below to fix this issue.

### Examples

#### Facebook Style

```html
<facebook-content-loader></facebook-content-loader>
```

![Facebook Style](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)

#### List Style

```html
<list-content-loader></list-content-loader>
```

![List Style](https://user-images.githubusercontent.com/4838076/36352948-b8931430-149e-11e8-9f4b-3f00bc444a6d.gif)

#### Bullet list Style

```html
<bullet-list-content-loader></bullet-list-content-loader>
```

![Bullet list Style](https://user-images.githubusercontent.com/4838076/31998372-59817bac-b96e-11e7-8ef8-07f61670ee18.gif)

## API

### @Inputs

| <div style="width:250px">Prop name and type</div>           | Environment | Description                                                                                                                                                                                                                                                                                         |
| ----------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`animate?: boolean`** <br/> Defaults to `true`            | -           | Opt-out of animations with `false`                                                                                                                                                                                                                                                                  |
| **`baseUrl?: string`**<br /> Defaults to an empty string    | -           | Required if you're using `<base url="/" />` document `<head/>`. <br/>This prop is common used as: <br/>`<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |
| **`speed?: number`** <br /> Defaults to `1.2`               | -           | Animation speed in seconds.                                                                                                                                                                                                                                                                         |
| **`interval?: number`** <br /> Defaults to `0.25`           | -           | Interval of time between runs of the animation, <br/>as a fraction of the animation speed.                                                                                                                                                                                                          |
| **`viewBox?: string`** <br /> Defaults to `undefined`       | -           | Use viewBox props to set a custom viewBox value, <br/>for more information about how to use it, <br/>read the article [How to Scale SVG](https://css-tricks.com/scale-svg/).                                                                                                                        |
| **`gradientRatio?: number`** <br /> Defaults to `1.2`       | -           | Width of the animated gradient as a fraction of the view box width.                                                                                                                                                                                                                                 |
| **`rtl?: boolean`** <br /> Defaults to `false`              | -           | Content right-to-left.                                                                                                                                                                                                                                                                              |
| **`backgroundColor?: string`** <br /> Defaults to `#f5f6f7` | -           | Used as background of animation.                                                                                                                                                                                                                                                                    |
| **`foregroundColor?: string`** <br /> Defaults to `#eee`    | -           | Used as the foreground of animation.                                                                                                                                                                                                                                                                |
| **`backgroundOpacity?: number`** <br /> Defaults to `1`     | -           | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |
| **`foregroundOpacity?: number`** <br /> Defaults to `1`     | -           | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |
| **`style?: CSSProperties`** <br /> Defaults to `{}`         | -           |                                                                                                                                                                                                                                                                                                     |

## Credits

This is basically an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).

## License

MIT &copy; [NetanelBasal](https://github.com/NetanelBasal)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://www.netbasal.com"><img src="https://avatars1.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=NetanelBasal" title="Code">💻</a> <a href="#content-NetanelBasal" title="Content">🖋</a> <a href="https://github.com/NetanelBasal/content-loader/commits?author=NetanelBasal" title="Documentation">📖</a></td>
    <td align="center"><a href="https://www.mapianist.com"><img src="https://avatars0.githubusercontent.com/u/7777929?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Heo</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=leo6104" title="Code">💻</a></td>
    <td align="center"><a href="http://www.andreas.ae"><img src="https://avatars3.githubusercontent.com/u/2174826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andreas Aeschlimann</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=andreas-aeschlimann" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/alexw10"><img src="https://avatars0.githubusercontent.com/u/9453636?v=4?s=100" width="100px;" alt=""/><br /><sub><b>alexw10</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=alexw10" title="Code">💻</a> <a href="https://github.com/NetanelBasal/content-loader/commits?author=alexw10" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/nonsocode"><img src="https://avatars3.githubusercontent.com/u/12021370?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chinonso Chukwuogor</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=nonsocode" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/wynfred"><img src="https://avatars2.githubusercontent.com/u/9249564?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wynfred</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=wynfred" title="Code">💻</a></td>
    <td align="center"><a href="https://twitter.com/irustm"><img src="https://avatars1.githubusercontent.com/u/16316579?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rustam</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=irustm" title="Code">💻</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://github.com/gund"><img src="https://avatars0.githubusercontent.com/u/3644678?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Malkevich</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=gund" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/danielsogl"><img src="https://avatars2.githubusercontent.com/u/15234844?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Sogl</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=danielsogl" title="Code">💻</a> <a href="#maintenance-danielsogl" title="Maintenance">🚧</a> <a href="#platform-danielsogl" title="Packaging/porting to new platform">📦</a></td>
    <td align="center"><a href="http://www.tailored.hu/"><img src="https://avatars1.githubusercontent.com/u/9606801?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Szabó‮</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=kreatemore" title="Code">💻</a></td>
    <td align="center"><a href="http://codepen.io/donroyco/"><img src="https://avatars2.githubusercontent.com/u/1763537?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roy</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=donroyco" title="Documentation">📖</a></td>
    <td align="center"><a href="https://robinvdb.me/"><img src="https://avatars2.githubusercontent.com/u/3083785?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Robin Van den Broeck</b></sub></a><br /><a href="https://github.com/NetanelBasal/content-loader/commits?author=RobinVdBroeck" title="Code">💻</a></td>
  </tr>
</table>

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

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!


================================================
FILE: angular.json
================================================
{
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "integration": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/integration/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": [],
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "integration:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "integration:build:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/integration/server",
            "main": "src/server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "inlineStyleLanguage": "scss"
          },
          "configurations": {
            "development": {
              "optimization": false,
              "sourceMap": true,
              "extractLicenses": false
            },
            "production": {
              "sourceMap": false,
              "optimization": true,
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "development"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["src/styles.css"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        }
      }
    },
    "@ngneat/content-loader": {
      "root": "projects/ngneat/content-loader",
      "sourceRoot": "projects/ngneat/content-loader/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/ngneat/content-loader/tsconfig.lib.json",
            "project": "projects/ngneat/content-loader/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "projects/ngneat/content-loader/ng-package.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/ngneat/content-loader/src/test.ts",
            "tsConfig": "projects/ngneat/content-loader/tsconfig.spec.json",
            "karmaConfig": "projects/ngneat/content-loader/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "@ngneat/content-loader",
  "cli": {
    "analytics": false
  }
}


================================================
FILE: commitlint.config.js
================================================
module.exports = { extends: ['@commitlint/config-conventional'] };


================================================
FILE: package.json
================================================
{
  "name": "content-loader",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "ng lint",
    "build:lib": "ng build",
    "build:integration": "ng build --project integration --configuration production",
    "build:integration:ssr": "ng run integration:server --configuration production",
    "serve:integration": "ng s --project integration",
    "serve:integration:ssr": "node dist/integration/server/main",
    "release": "cd projects/ngneat/content-loader && standard-version --infile ../../../CHANGELOG.md",
    "commit": "git-cz",
    "contributors:add": "all-contributors add",
    "contributors:generate": "all-contributors init",
    "postinstall": "ngcc && husky install"
  },
  "dependencies": {
    "@angular/animations": "^13.0.1",
    "@angular/common": "^13.0.1",
    "@angular/compiler": "^13.0.1",
    "@angular/core": "^13.0.1",
    "@angular/forms": "^13.0.1",
    "@angular/platform-browser": "^13.0.1",
    "@angular/platform-browser-dynamic": "^13.0.1",
    "@angular/platform-server": "^13.0.1",
    "@angular/router": "^13.0.1",
    "@nguniversal/express-engine": "^13.0.1",
    "rxjs": "^7.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.2",
    "@angular/cli": "^13.0.2",
    "@angular/compiler-cli": "^13.0.1",
    "@angular/language-service": "^13.0.1",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.20",
    "all-contributors-cli": "^6.19.0",
    "codelyzer": "^6.0.1",
    "git-cz": "^4.7.6",
    "husky": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "license-webpack-plugin": "^4.0.0",
    "lint-staged": "^11.0.0",
    "ng-packagr": "^13.0.3",
    "prettier": "^2.3.1",
    "standard-version": "^9.1.0",
    "tslib": "^2.2.0",
    "tslint": "~6.1.2",
    "typescript": "~4.4.4"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "*.{js,json,css,scss,less,md,ts,html,component.html}": [
      "prettier --write"
    ]
  },
  "browserslist": []
}


================================================
FILE: prettier.config.js
================================================
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  rangeStart: 0,
  rangeEnd: Infinity,
  requirePragma: false,
  insertPragma: false,
  proseWrap: 'preserve'
};


================================================
FILE: projects/ngneat/content-loader/CHANGELOG.md
================================================
# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

### [3.0.1](https://github.com/ngneat/content-loader/compare/v0.1.0...v3.0.1) (2019-08-18)


================================================
FILE: projects/ngneat/content-loader/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};


================================================
FILE: projects/ngneat/content-loader/ng-package.json
================================================
{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/ngneat/content-loader",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}


================================================
FILE: projects/ngneat/content-loader/ng-package.prod.json
================================================
{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/ngneat/content-loader",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}


================================================
FILE: projects/ngneat/content-loader/package.json
================================================
{
  "name": "@ngneat/content-loader",
  "version": "7.0.0",
  "license": "MIT",
  "description": "SVG component to create placeholder loading, like Facebook cards loading",
  "repository": {
    "type": "git",
    "url": "https://github.com/ngneat/content-loader"
  },
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "angular",
    "content loader",
    "loading",
    "facebook loading"
  ],
  "peerDependencies": {
    "@angular/core": ">= 13.0.0"
  },
  "author": {
    "name": "Netanel Basal",
    "url": "https://netbasal.com"
  }
}

================================================
FILE: projects/ngneat/content-loader/src/lib/bullet-list-loader.component.ts
================================================
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ContentLoaderComponent } from './content-loader.component';

@Component({
  selector: 'bullet-list-content-loader',
  template: `
    <content-loader viewBox="0 0 245 125">
      <svg:circle cx="10" cy="20" r="8" />
      <svg:rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
      <svg:circle cx="10" cy="50" r="8" />
      <svg:rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
      <svg:circle cx="10" cy="80" r="8" />
      <svg:rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
      <svg:circle cx="10" cy="110" r="8" />
      <svg:rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
    </content-loader>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BulletListContentLoaderComponent extends ContentLoaderComponent {}


================================================
FILE: projects/ngneat/content-loader/src/lib/content-loader.component.html
================================================
<svg [attr.viewBox]="viewBox" [ngStyle]="style">
  <rect role="presentation" [attr.clip-path]="clipPath" [ngStyle]="fillStyle" x="0" y="0" width="100%" height="100%" />

  <defs role="presentation">
    <clipPath [attr.id]="idClip">
      <ng-content></ng-content>
    </clipPath>

    <linearGradient [attr.id]="idGradient">
      <stop offset="0%" [attr.stop-color]="backgroundColor" [attr.stop-opacity]="backgroundOpacity">
        <animate
          *ngIf="animate"
          [attr.keyTimes]="keyTimes"
          attributeName="offset"
          [attr.values]="animationValues[0]"
          [attr.dur]="duration"
          repeatCount="indefinite"
        />
      </stop>

      <stop offset="50%" [attr.stop-color]="foregroundColor" [attr.stop-opacity]="foregroundOpacity">
        <animate
          *ngIf="animate"
          attributeName="offset"
          [attr.keyTimes]="keyTimes"
          [attr.values]="animationValues[1]"
          [attr.dur]="duration"
          repeatCount="indefinite"
        />
      </stop>

      <stop offset="100%" [attr.stop-color]="backgroundColor" [attr.stop-opacity]="backgroundOpacity">
        <animate
          *ngIf="animate"
          attributeName="offset"
          [attr.keyTimes]="keyTimes"
          [attr.values]="animationValues[2]"
          [attr.dur]="duration"
          repeatCount="indefinite"
        />
      </stop>
    </linearGradient>
  </defs>
</svg>


================================================
FILE: projects/ngneat/content-loader/src/lib/content-loader.component.ts
================================================
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

function uid() {
  return Math.random().toString(36).substring(2);
}

@Component({
  selector: 'content-loader',
  templateUrl: './content-loader.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      :host {
        display: block;
      }
    `
  ]
})
export class ContentLoaderComponent {
  private fixedId = uid();

  idClip = `${this.fixedId}-diff`;
  idGradient = `${this.fixedId}-animated-diff`;
  idAria = `${this.fixedId}-aria`;

  @Input() animate = true;

  @Input() baseUrl = '';

  @Input() speed = 1.2;

  @Input() viewBox: string = '0 0 400 130';

  @Input() gradientRatio = 2;

  @Input() backgroundColor = '#f5f6f7';
  @Input() backgroundOpacity = 1;

  @Input() foregroundColor = '#eee';
  @Input() foregroundOpacity = 1;

  @Input() rtl = false;

  @Input() interval = 0.25;

  @Input() style = {};

  animationValues = [];

  clipPath: string;
  fillStyle: object;
  duration: string;
  keyTimes: string;
  rtlStyle: object | null;

  ngOnInit() {
    this.clipPath = `url(${this.baseUrl}#${this.idClip})`;
    this.fillStyle = { fill: `url(${this.baseUrl}#${this.idGradient})` };
    this.style = this.rtl ? { ...this.style, ...{ transform: 'scaleX(-1)' } } : this.style;

    this.duration = `${this.speed}s`;
    this.keyTimes = `0; ${this.interval}; 1`;
    this.animationValues = [
      `${-this.gradientRatio}; ${-this.gradientRatio}; 1`,
      `${-this.gradientRatio / 2}; ${-this.gradientRatio / 2}; ${1 + this.gradientRatio / 2}`,
      `0; 0; ${1 + this.gradientRatio}`
    ];
  }
}


================================================
FILE: projects/ngneat/content-loader/src/lib/content-loader.module.ts
================================================
import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';

import { BulletListContentLoaderComponent } from './bullet-list-loader.component';
import { ContentLoaderComponent } from './content-loader.component';
import { FacebookContentLoaderComponent } from './facebook-loader.component';
import { ListContentLoaderComponent } from './list-loader.component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    ContentLoaderComponent,
    FacebookContentLoaderComponent,
    BulletListContentLoaderComponent,
    ListContentLoaderComponent
  ],
  exports: [
    ContentLoaderComponent,
    FacebookContentLoaderComponent,
    BulletListContentLoaderComponent,
    ListContentLoaderComponent
  ]
})
export class ContentLoaderModule {
  static forRoot(): ModuleWithProviders<ContentLoaderModule> {
    return {
      ngModule: ContentLoaderModule
    };
  }
}


================================================
FILE: projects/ngneat/content-loader/src/lib/facebook-loader.component.ts
================================================
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ContentLoaderComponent } from './content-loader.component';

@Component({
  selector: 'facebook-content-loader',
  template: `
    <content-loader viewBox="0 0 476 124">
      <svg:rect x="48" y="8" width="88" height="6" rx="3" />
      <svg:rect x="48" y="26" width="52" height="6" rx="3" />
      <svg:rect x="0" y="56" width="410" height="6" rx="3" />
      <svg:rect x="0" y="72" width="380" height="6" rx="3" />
      <svg:rect x="0" y="88" width="178" height="6" rx="3" />
      <svg:circle cx="20" cy="20" r="20" />
    </content-loader>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FacebookContentLoaderComponent extends ContentLoaderComponent {}


================================================
FILE: projects/ngneat/content-loader/src/lib/list-loader.component.ts
================================================
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ContentLoaderComponent } from './content-loader.component';

@Component({
  selector: 'list-content-loader',
  template: `
    <content-loader viewBox="0 0 400 110">
      <svg:rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
      <svg:rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
      <svg:rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
      <svg:rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
      <svg:rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
      <svg:rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
    </content-loader>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListContentLoaderComponent extends ContentLoaderComponent {}


================================================
FILE: projects/ngneat/content-loader/src/public_api.ts
================================================
export * from './lib/content-loader.component';
export * from './lib/content-loader.module';
export * from './lib/facebook-loader.component';
export * from './lib/list-loader.component';
export * from './lib/bullet-list-loader.component';


================================================
FILE: projects/ngneat/content-loader/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'core-js/es7/reflect';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
  teardown: { destroyAfterEach: true }
});
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);


================================================
FILE: projects/ngneat/content-loader/tsconfig.lib.json
================================================
{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/lib",
    "declarationMap": true,
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
  "angularCompilerOptions": {
    "compilationMode": "partial",
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": ["src/test.ts", "**/*.spec.ts"]
}


================================================
FILE: projects/ngneat/content-loader/tsconfig.spec.json
================================================
{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/spec",
    "types": ["jasmine", "node"]
  },
  "files": ["src/test.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}


================================================
FILE: projects/ngneat/content-loader/tslint.json
================================================
{
  "extends": "../../../tslint.json"
}


================================================
FILE: src/app/app.component.css
================================================


================================================
FILE: src/app/app.component.html
================================================
<h1>Content Loaders</h1>

<bullet-list-content-loader></bullet-list-content-loader>

<facebook-content-loader></facebook-content-loader>

<list-content-loader></list-content-loader>

<content-loader viewBox="0 0 340 84">
  <svg:rect x="0" y="0" width="67" height="11" rx="3" />
  <svg:rect x="76" y="0" width="140" height="11" rx="3" />
  <svg:rect x="127" y="48" width="53" height="11" rx="3" />
  <svg:rect x="187" y="48" width="72" height="11" rx="3" />
  <svg:rect x="18" y="48" width="100" height="11" rx="3" />
  <svg:rect x="0" y="71" width="37" height="11" rx="3" />
  <svg:rect x="18" y="23" width="140" height="11" rx="3" />
  <svg:rect x="166" y="23" width="173" height="11" rx="3" />
</content-loader>


================================================
FILE: src/app/app.component.ts
================================================
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}


================================================
FILE: src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ContentLoaderModule } from '@ngneat/content-loader';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule.withServerTransition({ appId: 'content-loader' }), ContentLoaderModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}


================================================
FILE: src/app/app.server.module.ts
================================================
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent]
})
export class AppServerModule {}


================================================
FILE: src/assets/.gitkeep
================================================


================================================
FILE: src/environments/environment.prod.ts
================================================
export const environment = {
  production: true
};


================================================
FILE: src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

/*
 * In development mode, to ignore zone related error stack frames such as
 * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
 * import the following file, but please comment it out in production mode
 * because it will have performance impact when throw error
 */
// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.


================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Content Loader</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>

  <body>
    <app-root></app-root>
  </body>
</html>


================================================
FILE: src/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};


================================================
FILE: src/main.server.ts
================================================
import '@angular/platform-server/init';

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule } from '@angular/platform-server';


================================================
FILE: src/main.ts
================================================
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));


================================================
FILE: src/polyfills.ts
================================================
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js'; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */


================================================
FILE: src/server.ts
================================================
import 'zone.js/dist/zone-node';

import * as express from 'express';
import { join } from 'path';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';

import { AppServerModule } from './main.server';

export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/integration/browser');

  server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule
    })
  );

  server.set('view engine', 'html');
  server.set('views', distFolder);

  server.get(
    '*.*',
    express.static(distFolder, {
      maxAge: '1y'
    })
  );

  server.get('*', (req, res) => {
    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4200;

  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule && mainModule.filename) || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './main.server';


================================================
FILE: src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */


================================================
FILE: src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'projects/ngneat/content-loader/src/node_modules/zone.js/dist/zone-testing';
import { getTestBed } from 'projects/ngneat/content-loader/src/node_modules/@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from 'projects/ngneat/content-loader/src/node_modules/@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);


================================================
FILE: src/tsconfig.app.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": []
  },
  "files": ["main.ts", "polyfills.ts"],
  "include": ["**/*.d.ts"]
}


================================================
FILE: src/tsconfig.server.json
================================================
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es2019",
    "types": ["node"]
  },
  "files": ["main.server.ts", "server.ts"],
  "angularCompilerOptions": {
    "entryModule": "./app/app.server.module#AppServerModule"
  }
}


================================================
FILE: src/tsconfig.spec.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": ["jasmine", "node"]
  },
  "files": ["test.ts", "polyfills.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}


================================================
FILE: src/tslint.json
================================================
{
  "extends": "../tslint.json",
  "rules": {
    "directive-selector": [true, "attribute", "app", "camelCase"],
    "component-selector": [true, "element", "app", "kebab-case"]
  }
}


================================================
FILE: tsconfig.json
================================================
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@ngneat/content-loader": ["projects/ngneat/content-loader/src/public_api.ts"]
    },
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  }
}


================================================
FILE: tslint.json
================================================
{
  "rules": {
    "ban": [
      true,
      { "name": "fit", "message": "The fit is forbidden" },
      { "name": "debugger", "message": "The debugger is forbidden" },
      { "name": "fdescribe", "message": "The fdescribe is forbidden" }
    ]
  }
}