[
  {
    "path": ".all-contributorsrc",
    "content": "{\n  \"projectName\": \"content-loader\",\n  \"projectOwner\": \"NetanelBasal\",\n  \"repoType\": \"github\",\n  \"repoHost\": \"https://github.com\",\n  \"files\": [\n    \"README.md\"\n  ],\n  \"imageSize\": 100,\n  \"commit\": true,\n  \"commitConvention\": \"angular\",\n  \"contributors\": [\n    {\n      \"login\": \"NetanelBasal\",\n      \"name\": \"Netanel Basal\",\n      \"avatar_url\": \"https://avatars1.githubusercontent.com/u/6745730?v=4\",\n      \"profile\": \"https://www.netbasal.com\",\n      \"contributions\": [\n        \"code\",\n        \"content\",\n        \"doc\"\n      ]\n    },\n    {\n      \"login\": \"leo6104\",\n      \"name\": \"Heo\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/7777929?v=4\",\n      \"profile\": \"https://www.mapianist.com\",\n      \"contributions\": [\n        \"code\"\n      ]\n    },\n    {\n      \"login\": \"andreas-aeschlimann\",\n      \"name\": \"Andreas Aeschlimann\",\n      \"avatar_url\": \"https://avatars3.githubusercontent.com/u/2174826?v=4\",\n      \"profile\": \"http://www.andreas.ae\",\n      \"contributions\": [\n        \"doc\"\n      ]\n    },\n    {\n      \"login\": \"alexw10\",\n      \"name\": \"alexw10\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/9453636?v=4\",\n      \"profile\": \"https://github.com/alexw10\",\n      \"contributions\": [\n        \"code\",\n        \"doc\"\n      ]\n    },\n    {\n      \"login\": \"nonsocode\",\n      \"name\": \"Chinonso Chukwuogor\",\n      \"avatar_url\": \"https://avatars3.githubusercontent.com/u/12021370?v=4\",\n      \"profile\": \"https://github.com/nonsocode\",\n      \"contributions\": [\n        \"code\"\n      ]\n    },\n    {\n      \"login\": \"wynfred\",\n      \"name\": \"wynfred\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/9249564?v=4\",\n      \"profile\": \"https://github.com/wynfred\",\n      \"contributions\": [\n        \"code\"\n      ]\n    },\n    {\n      \"login\": \"irustm\",\n      \"name\": \"Rustam\",\n      \"avatar_url\": \"https://avatars1.githubusercontent.com/u/16316579?v=4\",\n      \"profile\": \"https://twitter.com/irustm\",\n      \"contributions\": [\n        \"code\"\n      ]\n    },\n    {\n      \"login\": \"gund\",\n      \"name\": \"Alex Malkevich\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/3644678?v=4\",\n      \"profile\": \"https://github.com/gund\",\n      \"contributions\": [\n        \"doc\"\n      ]\n    },\n    {\n      \"login\": \"danielsogl\",\n      \"name\": \"Daniel Sogl\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/15234844?v=4\",\n      \"profile\": \"https://github.com/danielsogl\",\n      \"contributions\": [\n        \"code\",\n        \"maintenance\",\n        \"platform\"\n      ]\n    },\n    {\n      \"login\": \"kreatemore\",\n      \"name\": \"Alex Szabó‮\",\n      \"avatar_url\": \"https://avatars1.githubusercontent.com/u/9606801?v=4\",\n      \"profile\": \"http://www.tailored.hu/\",\n      \"contributions\": [\n        \"code\"\n      ]\n    },\n    {\n      \"login\": \"donroyco\",\n      \"name\": \"Roy\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/1763537?v=4\",\n      \"profile\": \"http://codepen.io/donroyco/\",\n      \"contributions\": [\n        \"doc\"\n      ]\n    },\n    {\n      \"login\": \"RobinVdBroeck\",\n      \"name\": \"Robin Van den Broeck\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/3083785?v=4\",\n      \"profile\": \"https://robinvdb.me/\",\n      \"contributions\": [\n        \"code\",\n        \"maintenance\",\n        \"platform\"\n      ]\n    }\n  ],\n  \"contributorsPerLine\": 7\n}\n"
  },
  {
    "path": ".github/workflows/content-loader.yml",
    "content": "name: '@ngneat/content-loader'\n\non:\n  push:\n    branches:\n      - master\n  pull_request:\n\njobs:\n  build:\n    runs-on: ubuntu-18.04\n    strategy:\n      fail-fast: true\n\n    steps:\n      - uses: actions/checkout@v2\n\n      - uses: actions/cache@v1\n        id: npm-cache\n        with:\n          path: node_modules\n          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: ${{ runner.os }}-npm\n\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 14.15\n\n      - name: Install dependencies\n        if: steps.npm-cache.outputs.cache-hit != 'true'\n        env:\n          HUSKY_SKIP_INSTALL: 'true'\n        run: npm ci\n\n      - name: Build library\n        run: npm run build:lib\n\n      - name: Build integration app\n        run: npm run build:integration\n"
  },
  {
    "path": ".gitignore",
    "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# misc\n/.angular/cache\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n.angulardoc.json\n"
  },
  {
    "path": ".husky/.gitignore",
    "content": "_\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n## [6.2.0](https://github.com/ngneat/content-loader/compare/v6.1.0...v6.2.0) (2021-11-17)\n\n\n### Features\n\n* 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))\n\n## [6.1.0](https://github.com/ngneat/content-loader/compare/v6.0.0...v6.1.0) (2021-06-30)\n\n\n### Features\n\n* 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))\n\n\n### Bug Fixes\n\n* **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))\n\n## [6.0.0](https://github.com/ngneat/content-loader/compare/v5.0.0...v6.0.0) (2020-10-31)\n\n### ⚠ BREAKING CHANGES\n\n- 🧨 align the library with react and remove base url functionality\n\n### Features\n\n- 🎸 lib ([fb57f9a](https://github.com/ngneat/content-loader/commit/fb57f9a75aec60d4dae7f2ef1b229650949b1305))\n\n## [5.0.0](https://github.com/ngneat/content-loader/compare/v4.1.0...v5.0.0) (2020-07-23)\n\n### ⚠ BREAKING CHANGES\n\n- 🧨 support ng10\n\n### Features\n\n- 🎸 support ng 10 ([a26012e](https://github.com/ngneat/content-loader/commit/a26012ec00922048ebb6a7ce06495582c3ef291c))\n- **lib:** migrate to ng 10 ([#62](https://github.com/ngneat/content-loader/issues/62)) ([6efec6e](https://github.com/ngneat/content-loader/commit/6efec6e036aa08b4a504e55d8e2115fcdd5f6f38))\n\n## [4.0.0](https://github.com/ngneat/content-loader/compare/v3.0.0...v4.0.0) (2019-08-19)\n\n### Bug Fixes\n\n- **content-loader:** set baseUrl before setFillStyle, setClipStyle ([285c2b4](https://github.com/ngneat/content-loader/commit/285c2b4))\n\n### Features\n\n- 🎸 lib ([91ff5bb](https://github.com/ngneat/content-loader/commit/91ff5bb))\n- **content-loader:** set baseUrl to window.location.pathname in ngOnInit ([f88fde5](https://github.com/ngneat/content-loader/commit/f88fde5))\n\n### BREAKING CHANGES\n\n- move to ngneat\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn 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.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject 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.\n\nProject 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.\n\n## Scope\n\nThis 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.\n\n## Enforcement\n\nInstances 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.\n\nProject 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.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to Content Loader\n\n🙏 We would ❤️ for you to contribute to Content Loader and help make it even better than it is today!\n\n# Developing\n\nStart by installing all dependencies:\n\n```bash\nnpm i\n```\n\n## Building\n\n```bash\nnpm run build:lib\n```\n\n## <a name=\"rules\"></a> Coding Rules\n\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n- All features or bug fixes **must be tested** by one or more specs (unit-tests).\n- All public API methods **must be documented**.\n\n## <a name=\"commit\"></a> Commit Message Guidelines\n\nWe have very precise rules over how our git commit messages can be formatted. This leads to **more\nreadable messages** that are easy to follow when looking through the **project history**. But also,\nwe use the git commit messages to **generate the Akita changelog**.\n\n### Commit Message Format\n\nEach commit message consists of a **header**, a **body** and a **footer**. The header has a special\nformat that includes a **type**, a **scope** and a **subject**:\n\n```\n<type>(<scope>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer 100 characters! This allows the message to be easier\nto read on GitHub as well as in various git tools.\n\nThe footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.\n\nSamples: (even more [samples](https://github.com/angular/angular/commits/master))\n\n```\ndocs(changelog): update changelog to beta.5\n```\n\n```\nfix(release): need to depend on latest rxjs and zone.js\n\nThe version in our package.json gets copied to the one we publish, and users need the latest of these.\n```\n"
  },
  {
    "path": "ISSUE_TEMPLATE.md",
    "content": "<!--\nPLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.\n\nISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.\n-->\n\n## I'm submitting a...\n\n<!-- Check one of the following options with \"x\" -->\n<pre><code>\n[ ] Regression (a behavior that used to work and stopped working in a new release)\n[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->\n[ ] Performance issue\n[ ] Feature request\n[ ] Documentation issue or request\n[ ] Support request\n[ ] Other... Please describe:\n</code></pre>\n\n## Current behavior\n\n<!-- Describe how the issue manifests. -->\n\n## Expected behavior\n\n<!-- Describe what the desired behavior would be. -->\n\n## Minimal reproduction of the problem with instructions\n\nFor bug reports please provide the _STEPS TO REPRODUCE_ and if possible a _MINIMAL DEMO_ of the problem.\n\n## What is the motivation / use case for changing the behavior?\n\n<!-- Describe the motivation or the concrete use case. -->\n\n## Environment\n\n<pre><code>\nAngular version: X.Y.Z\n<!-- Check whether this is still an issue in the most recent Angular version -->\n\nBrowser:\n- [ ] Chrome (desktop) version XX\n- [ ] Chrome (Android) version XX\n- [ ] Chrome (iOS) version XX\n- [ ] Firefox version XX\n- [ ] Safari (desktop) version XX\n- [ ] Safari (iOS) version XX\n- [ ] IE version XX\n- [ ] Edge version XX\n \nFor Tooling issues:\n- Node version: XX  <!-- run `node --version` -->\n- Platform:  <!-- Mac, Linux, Windows -->\n\nOthers:\n<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->\n</code></pre>\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n"
  },
  {
    "path": "PULL_REQUEST_TEMPLATE.md",
    "content": "## PR Checklist\n\nPlease check if your PR fulfills the following requirements:\n\n- [ ] The commit message follows our guidelines: https://github.com/ngneat/content-loader/blob/master/CONTRIBUTING.md#commit\n- [ ] Tests for the changes have been added (for bug fixes / features)\n- [ ] Docs have been added / updated (for bug fixes / features)\n\n## PR Type\n\nWhat kind of change does this PR introduce?\n\n<!-- Please check the one that applies to this PR using \"x\". -->\n\n```\n[ ] Bugfix\n[ ] Feature\n[ ] Code style update (formatting, local variables)\n[ ] Refactoring (no functional changes, no api changes)\n[ ] Build related changes\n[ ] CI related changes\n[ ] Documentation content changes\n[ ] Other... Please describe:\n```\n\n## What is the current behavior?\n\n<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->\n\nIssue Number: N/A\n\n## What is the new behavior?\n\n## Does this PR introduce a breaking change?\n\n```\n[ ] Yes\n[ ] No\n```\n\n<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->\n\n## Other information\n"
  },
  {
    "path": "README.md",
    "content": "# Angular Content Loader\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)\n\n<p align=\"center\">\n  <img width=\"400\" alt=\"Example's react-content-loader\" src=\"https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif\" />\n</p>\n\nAngular component that uses SVG to create a collection of loaders which simulates the structure of the\ncontent that will be loaded, similar to Facebook cards loaders.\n\n[Live Demo](https://stackblitz.com/edit/ngx-content-loader)\n\n## Sponsoring ngneat\n\n[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.\n\n### Gold Sponsors\n\nElevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.\n\n### Silver Sponsors\n\nBoost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.\n\n### Bronze Sponsors\n\n<a href=\"https://houseofangular.io\" target=\"_blank\">\n  <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\" />\n</a>\n\nBecome a bronze sponsor and get your logo on our README on GitHub.\n\n## Features\n\nThis is an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n- :gear: **Completely customizable:** you can change the colors, speed and sizes;\n- :pencil2: **Create your own loading:** use the\n  [create-react-content-loader](https://danilowoz.github.io/create-react-content-loader/) to create\n  your custom loadings easily;\n- :ok_hand: **You can use right now:** there are a lot of presets to use the loader, see the\n  [options](#examples);\n- :rocket: **Performance:** uses pure SVG to work, so it works without any extra scripts,\n  canvas, etc;\n\n<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>\n\n## Install\n\n### Yarn\n\n```bash\nyarn add @ngneat/content-loader\n```\n\n## Usage\n\n```ts\nimport { ContentLoaderModule } from '@ngneat/content-loader';\n\n@NgModule({\n  imports: [ContentLoaderModule]\n})\nexport class AppModule {}\n```\n\n```html\n<content-loader>\n  <svg:rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n  <svg:rect x=\"20\" y=\"20\" rx=\"3\" ry=\"3\" width=\"220\" height=\"10\" />\n  <svg:rect x=\"20\" y=\"40\" rx=\"3\" ry=\"3\" width=\"170\" height=\"10\" />\n  <svg:rect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n  <svg:rect x=\"20\" y=\"80\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\" />\n  <svg:rect x=\"20\" y=\"100\" rx=\"3\" ry=\"3\" width=\"80\" height=\"10\" />\n</content-loader>\n```\n\n> Warning: Safari renders the SVG in black in case your Angular application uses the `<base href=\"/\" />` tag in the `<head/>` of your `index.html`.\n> Refer to the input property `baseUrl` below to fix this issue.\n\n### Examples\n\n#### Facebook Style\n\n```html\n<facebook-content-loader></facebook-content-loader>\n```\n\n![Facebook Style](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)\n\n#### List Style\n\n```html\n<list-content-loader></list-content-loader>\n```\n\n![List Style](https://user-images.githubusercontent.com/4838076/36352948-b8931430-149e-11e8-9f4b-3f00bc444a6d.gif)\n\n#### Bullet list Style\n\n```html\n<bullet-list-content-loader></bullet-list-content-loader>\n```\n\n![Bullet list Style](https://user-images.githubusercontent.com/4838076/31998372-59817bac-b96e-11e7-8ef8-07f61670ee18.gif)\n\n## API\n\n### @Inputs\n\n| <div style=\"width:250px\">Prop name and type</div>           | Environment | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`animate?: boolean`** <br/> Defaults to `true`            | -           | Opt-out of animations with `false`                                                                                                                                                                                                                                                                  |\n| **`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). |\n| **`speed?: number`** <br /> Defaults to `1.2`               | -           | Animation speed in seconds.                                                                                                                                                                                                                                                                         |\n| **`interval?: number`** <br /> Defaults to `0.25`           | -           | Interval of time between runs of the animation, <br/>as a fraction of the animation speed.                                                                                                                                                                                                          |\n| **`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/).                                                                                                                        |\n| **`gradientRatio?: number`** <br /> Defaults to `1.2`       | -           | Width of the animated gradient as a fraction of the view box width.                                                                                                                                                                                                                                 |\n| **`rtl?: boolean`** <br /> Defaults to `false`              | -           | Content right-to-left.                                                                                                                                                                                                                                                                              |\n| **`backgroundColor?: string`** <br /> Defaults to `#f5f6f7` | -           | Used as background of animation.                                                                                                                                                                                                                                                                    |\n| **`foregroundColor?: string`** <br /> Defaults to `#eee`    | -           | Used as the foreground of animation.                                                                                                                                                                                                                                                                |\n| **`backgroundOpacity?: number`** <br /> Defaults to `1`     | -           | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |\n| **`foregroundOpacity?: number`** <br /> Defaults to `1`     | -           | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |\n| **`style?: CSSProperties`** <br /> Defaults to `{}`         | -           |                                                                                                                                                                                                                                                                                                     |\n\n## Credits\n\nThis is basically an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n## License\n\nMIT &copy; [NetanelBasal](https://github.com/NetanelBasal)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n  </tr>\n  <tr>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n"
  },
  {
    "path": "angular.json",
    "content": "{\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"integration\": {\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"projectType\": \"application\",\n      \"prefix\": \"app\",\n      \"schematics\": {},\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/integration/browser\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"src/tsconfig.app.json\",\n            \"assets\": [\"src/favicon.ico\", \"src/assets\"],\n            \"styles\": [\"src/styles.css\"],\n            \"scripts\": [],\n            \"aot\": false,\n            \"vendorChunk\": true,\n            \"extractLicenses\": false,\n            \"buildOptimizer\": false,\n            \"sourceMap\": true,\n            \"optimization\": false,\n            \"namedChunks\": true\n          },\n          \"configurations\": {\n            \"development\": {\n              \"buildOptimizer\": false,\n              \"optimization\": false,\n              \"vendorChunk\": true,\n              \"extractLicenses\": false,\n              \"sourceMap\": true,\n              \"namedChunks\": true\n            },\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"options\": {\n            \"browserTarget\": \"integration:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"integration:build:production\"\n            }\n          }\n        },\n        \"server\": {\n          \"builder\": \"@angular-devkit/build-angular:server\",\n          \"options\": {\n            \"outputPath\": \"dist/integration/server\",\n            \"main\": \"src/server.ts\",\n            \"tsConfig\": \"src/tsconfig.server.json\",\n            \"inlineStyleLanguage\": \"scss\"\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true,\n              \"extractLicenses\": false\n            },\n            \"production\": {\n              \"sourceMap\": false,\n              \"optimization\": true,\n              \"outputHashing\": \"media\",\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ]\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"src/tsconfig.spec.json\",\n            \"karmaConfig\": \"src/karma.conf.js\",\n            \"styles\": [\"src/styles.css\"],\n            \"scripts\": [],\n            \"assets\": [\"src/favicon.ico\", \"src/assets\"]\n          }\n        }\n      }\n    },\n    \"@ngneat/content-loader\": {\n      \"root\": \"projects/ngneat/content-loader\",\n      \"sourceRoot\": \"projects/ngneat/content-loader/src\",\n      \"projectType\": \"library\",\n      \"prefix\": \"lib\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:ng-packagr\",\n          \"options\": {\n            \"tsConfig\": \"projects/ngneat/content-loader/tsconfig.lib.json\",\n            \"project\": \"projects/ngneat/content-loader/ng-package.json\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"project\": \"projects/ngneat/content-loader/ng-package.prod.json\"\n            }\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"projects/ngneat/content-loader/src/test.ts\",\n            \"tsConfig\": \"projects/ngneat/content-loader/tsconfig.spec.json\",\n            \"karmaConfig\": \"projects/ngneat/content-loader/karma.conf.js\"\n          }\n        }\n      }\n    }\n  },\n  \"defaultProject\": \"@ngneat/content-loader\",\n  \"cli\": {\n    \"analytics\": false\n  }\n}\n"
  },
  {
    "path": "commitlint.config.js",
    "content": "module.exports = { extends: ['@commitlint/config-conventional'] };\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"content-loader\",\n  \"version\": \"0.1.0\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"lint\": \"ng lint\",\n    \"build:lib\": \"ng build\",\n    \"build:integration\": \"ng build --project integration --configuration production\",\n    \"build:integration:ssr\": \"ng run integration:server --configuration production\",\n    \"serve:integration\": \"ng s --project integration\",\n    \"serve:integration:ssr\": \"node dist/integration/server/main\",\n    \"release\": \"cd projects/ngneat/content-loader && standard-version --infile ../../../CHANGELOG.md\",\n    \"commit\": \"git-cz\",\n    \"contributors:add\": \"all-contributors add\",\n    \"contributors:generate\": \"all-contributors init\",\n    \"postinstall\": \"ngcc && husky install\"\n  },\n  \"dependencies\": {\n    \"@angular/animations\": \"^13.0.1\",\n    \"@angular/common\": \"^13.0.1\",\n    \"@angular/compiler\": \"^13.0.1\",\n    \"@angular/core\": \"^13.0.1\",\n    \"@angular/forms\": \"^13.0.1\",\n    \"@angular/platform-browser\": \"^13.0.1\",\n    \"@angular/platform-browser-dynamic\": \"^13.0.1\",\n    \"@angular/platform-server\": \"^13.0.1\",\n    \"@angular/router\": \"^13.0.1\",\n    \"@nguniversal/express-engine\": \"^13.0.1\",\n    \"rxjs\": \"^7.1.0\",\n    \"zone.js\": \"~0.11.4\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"^13.0.2\",\n    \"@angular/cli\": \"^13.0.2\",\n    \"@angular/compiler-cli\": \"^13.0.1\",\n    \"@angular/language-service\": \"^13.0.1\",\n    \"@commitlint/cli\": \"^11.0.0\",\n    \"@commitlint/config-conventional\": \"^11.0.0\",\n    \"@types/jasmine\": \"~3.6.0\",\n    \"@types/jasminewd2\": \"^2.0.8\",\n    \"@types/node\": \"^14.14.20\",\n    \"all-contributors-cli\": \"^6.19.0\",\n    \"codelyzer\": \"^6.0.1\",\n    \"git-cz\": \"^4.7.6\",\n    \"husky\": \"^6.0.0\",\n    \"jasmine-core\": \"~3.6.0\",\n    \"jasmine-spec-reporter\": \"~5.0.0\",\n    \"karma\": \"~6.3.2\",\n    \"karma-chrome-launcher\": \"~3.1.0\",\n    \"karma-coverage-istanbul-reporter\": \"^2.1.1\",\n    \"karma-jasmine\": \"~4.0.0\",\n    \"karma-jasmine-html-reporter\": \"^1.5.0\",\n    \"license-webpack-plugin\": \"^4.0.0\",\n    \"lint-staged\": \"^11.0.0\",\n    \"ng-packagr\": \"^13.0.3\",\n    \"prettier\": \"^2.3.1\",\n    \"standard-version\": \"^9.1.0\",\n    \"tslib\": \"^2.2.0\",\n    \"tslint\": \"~6.1.2\",\n    \"typescript\": \"~4.4.4\"\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"commit-msg\": \"commitlint -e $GIT_PARAMS\",\n      \"pre-commit\": \"lint-staged\"\n    }\n  },\n  \"config\": {\n    \"commitizen\": {\n      \"path\": \"cz-conventional-changelog\"\n    }\n  },\n  \"lint-staged\": {\n    \"*.{js,json,css,scss,less,md,ts,html,component.html}\": [\n      \"prettier --write\"\n    ]\n  },\n  \"browserslist\": []\n}\n"
  },
  {
    "path": "prettier.config.js",
    "content": "module.exports = {\n  printWidth: 120,\n  tabWidth: 2,\n  useTabs: false,\n  semi: true,\n  singleQuote: true,\n  trailingComma: 'none',\n  bracketSpacing: true,\n  jsxBracketSameLine: false,\n  arrowParens: 'avoid',\n  rangeStart: 0,\n  rangeEnd: Infinity,\n  requirePragma: false,\n  insertPragma: false,\n  proseWrap: 'preserve'\n};\n"
  },
  {
    "path": "projects/ngneat/content-loader/CHANGELOG.md",
    "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n### [3.0.1](https://github.com/ngneat/content-loader/compare/v0.1.0...v3.0.1) (2019-08-18)\n"
  },
  {
    "path": "projects/ngneat/content-loader/karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, '../../../coverage'),\n      reports: ['html', 'lcovonly'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false\n  });\n};\n"
  },
  {
    "path": "projects/ngneat/content-loader/ng-package.json",
    "content": "{\n  \"$schema\": \"../../../node_modules/ng-packagr/ng-package.schema.json\",\n  \"dest\": \"../../../dist/ngneat/content-loader\",\n  \"lib\": {\n    \"entryFile\": \"src/public_api.ts\"\n  }\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/ng-package.prod.json",
    "content": "{\n  \"$schema\": \"../../../node_modules/ng-packagr/ng-package.schema.json\",\n  \"dest\": \"../../../dist/ngneat/content-loader\",\n  \"lib\": {\n    \"entryFile\": \"src/public_api.ts\"\n  }\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/package.json",
    "content": "{\n  \"name\": \"@ngneat/content-loader\",\n  \"version\": \"7.0.0\",\n  \"license\": \"MIT\",\n  \"description\": \"SVG component to create placeholder loading, like Facebook cards loading\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/ngneat/content-loader\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"keywords\": [\n    \"angular\",\n    \"content loader\",\n    \"loading\",\n    \"facebook loading\"\n  ],\n  \"peerDependencies\": {\n    \"@angular/core\": \">= 13.0.0\"\n  },\n  \"author\": {\n    \"name\": \"Netanel Basal\",\n    \"url\": \"https://netbasal.com\"\n  }\n}"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/bullet-list-loader.component.ts",
    "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ContentLoaderComponent } from './content-loader.component';\n\n@Component({\n  selector: 'bullet-list-content-loader',\n  template: `\n    <content-loader viewBox=\"0 0 245 125\">\n      <svg:circle cx=\"10\" cy=\"20\" r=\"8\" />\n      <svg:rect x=\"25\" y=\"15\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n      <svg:circle cx=\"10\" cy=\"50\" r=\"8\" />\n      <svg:rect x=\"25\" y=\"45\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n      <svg:circle cx=\"10\" cy=\"80\" r=\"8\" />\n      <svg:rect x=\"25\" y=\"75\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n      <svg:circle cx=\"10\" cy=\"110\" r=\"8\" />\n      <svg:rect x=\"25\" y=\"105\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n    </content-loader>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BulletListContentLoaderComponent extends ContentLoaderComponent {}\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/content-loader.component.html",
    "content": "<svg [attr.viewBox]=\"viewBox\" [ngStyle]=\"style\">\n  <rect role=\"presentation\" [attr.clip-path]=\"clipPath\" [ngStyle]=\"fillStyle\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" />\n\n  <defs role=\"presentation\">\n    <clipPath [attr.id]=\"idClip\">\n      <ng-content></ng-content>\n    </clipPath>\n\n    <linearGradient [attr.id]=\"idGradient\">\n      <stop offset=\"0%\" [attr.stop-color]=\"backgroundColor\" [attr.stop-opacity]=\"backgroundOpacity\">\n        <animate\n          *ngIf=\"animate\"\n          [attr.keyTimes]=\"keyTimes\"\n          attributeName=\"offset\"\n          [attr.values]=\"animationValues[0]\"\n          [attr.dur]=\"duration\"\n          repeatCount=\"indefinite\"\n        />\n      </stop>\n\n      <stop offset=\"50%\" [attr.stop-color]=\"foregroundColor\" [attr.stop-opacity]=\"foregroundOpacity\">\n        <animate\n          *ngIf=\"animate\"\n          attributeName=\"offset\"\n          [attr.keyTimes]=\"keyTimes\"\n          [attr.values]=\"animationValues[1]\"\n          [attr.dur]=\"duration\"\n          repeatCount=\"indefinite\"\n        />\n      </stop>\n\n      <stop offset=\"100%\" [attr.stop-color]=\"backgroundColor\" [attr.stop-opacity]=\"backgroundOpacity\">\n        <animate\n          *ngIf=\"animate\"\n          attributeName=\"offset\"\n          [attr.keyTimes]=\"keyTimes\"\n          [attr.values]=\"animationValues[2]\"\n          [attr.dur]=\"duration\"\n          repeatCount=\"indefinite\"\n        />\n      </stop>\n    </linearGradient>\n  </defs>\n</svg>\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/content-loader.component.ts",
    "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nfunction uid() {\n  return Math.random().toString(36).substring(2);\n}\n\n@Component({\n  selector: 'content-loader',\n  templateUrl: './content-loader.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `\n  ]\n})\nexport class ContentLoaderComponent {\n  private fixedId = uid();\n\n  idClip = `${this.fixedId}-diff`;\n  idGradient = `${this.fixedId}-animated-diff`;\n  idAria = `${this.fixedId}-aria`;\n\n  @Input() animate = true;\n\n  @Input() baseUrl = '';\n\n  @Input() speed = 1.2;\n\n  @Input() viewBox: string = '0 0 400 130';\n\n  @Input() gradientRatio = 2;\n\n  @Input() backgroundColor = '#f5f6f7';\n  @Input() backgroundOpacity = 1;\n\n  @Input() foregroundColor = '#eee';\n  @Input() foregroundOpacity = 1;\n\n  @Input() rtl = false;\n\n  @Input() interval = 0.25;\n\n  @Input() style = {};\n\n  animationValues = [];\n\n  clipPath: string;\n  fillStyle: object;\n  duration: string;\n  keyTimes: string;\n  rtlStyle: object | null;\n\n  ngOnInit() {\n    this.clipPath = `url(${this.baseUrl}#${this.idClip})`;\n    this.fillStyle = { fill: `url(${this.baseUrl}#${this.idGradient})` };\n    this.style = this.rtl ? { ...this.style, ...{ transform: 'scaleX(-1)' } } : this.style;\n\n    this.duration = `${this.speed}s`;\n    this.keyTimes = `0; ${this.interval}; 1`;\n    this.animationValues = [\n      `${-this.gradientRatio}; ${-this.gradientRatio}; 1`,\n      `${-this.gradientRatio / 2}; ${-this.gradientRatio / 2}; ${1 + this.gradientRatio / 2}`,\n      `0; 0; ${1 + this.gradientRatio}`\n    ];\n  }\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/content-loader.module.ts",
    "content": "import { CommonModule } from '@angular/common';\nimport { ModuleWithProviders, NgModule } from '@angular/core';\n\nimport { BulletListContentLoaderComponent } from './bullet-list-loader.component';\nimport { ContentLoaderComponent } from './content-loader.component';\nimport { FacebookContentLoaderComponent } from './facebook-loader.component';\nimport { ListContentLoaderComponent } from './list-loader.component';\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [\n    ContentLoaderComponent,\n    FacebookContentLoaderComponent,\n    BulletListContentLoaderComponent,\n    ListContentLoaderComponent\n  ],\n  exports: [\n    ContentLoaderComponent,\n    FacebookContentLoaderComponent,\n    BulletListContentLoaderComponent,\n    ListContentLoaderComponent\n  ]\n})\nexport class ContentLoaderModule {\n  static forRoot(): ModuleWithProviders<ContentLoaderModule> {\n    return {\n      ngModule: ContentLoaderModule\n    };\n  }\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/facebook-loader.component.ts",
    "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ContentLoaderComponent } from './content-loader.component';\n\n@Component({\n  selector: 'facebook-content-loader',\n  template: `\n    <content-loader viewBox=\"0 0 476 124\">\n      <svg:rect x=\"48\" y=\"8\" width=\"88\" height=\"6\" rx=\"3\" />\n      <svg:rect x=\"48\" y=\"26\" width=\"52\" height=\"6\" rx=\"3\" />\n      <svg:rect x=\"0\" y=\"56\" width=\"410\" height=\"6\" rx=\"3\" />\n      <svg:rect x=\"0\" y=\"72\" width=\"380\" height=\"6\" rx=\"3\" />\n      <svg:rect x=\"0\" y=\"88\" width=\"178\" height=\"6\" rx=\"3\" />\n      <svg:circle cx=\"20\" cy=\"20\" r=\"20\" />\n    </content-loader>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FacebookContentLoaderComponent extends ContentLoaderComponent {}\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/lib/list-loader.component.ts",
    "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ContentLoaderComponent } from './content-loader.component';\n\n@Component({\n  selector: 'list-content-loader',\n  template: `\n    <content-loader viewBox=\"0 0 400 110\">\n      <svg:rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n      <svg:rect x=\"20\" y=\"20\" rx=\"3\" ry=\"3\" width=\"220\" height=\"10\" />\n      <svg:rect x=\"20\" y=\"40\" rx=\"3\" ry=\"3\" width=\"170\" height=\"10\" />\n      <svg:rect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n      <svg:rect x=\"20\" y=\"80\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\" />\n      <svg:rect x=\"20\" y=\"100\" rx=\"3\" ry=\"3\" width=\"80\" height=\"10\" />\n    </content-loader>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ListContentLoaderComponent extends ContentLoaderComponent {}\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/public_api.ts",
    "content": "export * from './lib/content-loader.component';\nexport * from './lib/content-loader.module';\nexport * from './lib/facebook-loader.component';\nexport * from './lib/list-loader.component';\nexport * from './lib/bullet-list-loader.component';\n"
  },
  {
    "path": "projects/ngneat/content-loader/src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'core-js/es7/reflect';\nimport 'zone.js';\nimport 'zone.js/testing';\nimport { getTestBed } from '@angular/core/testing';\nimport { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {\n  teardown: { destroyAfterEach: true }\n});\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "projects/ngneat/content-loader/tsconfig.lib.json",
    "content": "{\n  \"extends\": \"../../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../../../out-tsc/lib\",\n    \"declarationMap\": true,\n    \"target\": \"es2015\",\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"declaration\": true,\n    \"sourceMap\": true,\n    \"inlineSources\": true,\n    \"experimentalDecorators\": true,\n    \"importHelpers\": true,\n    \"types\": [],\n    \"lib\": [\"dom\", \"es2018\"]\n  },\n  \"angularCompilerOptions\": {\n    \"compilationMode\": \"partial\",\n    \"annotateForClosureCompiler\": true,\n    \"skipTemplateCodegen\": true,\n    \"strictMetadataEmit\": true,\n    \"fullTemplateTypeCheck\": true,\n    \"strictInjectionParameters\": true,\n    \"enableResourceInlining\": true\n  },\n  \"exclude\": [\"src/test.ts\", \"**/*.spec.ts\"]\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"../../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../../../out-tsc/spec\",\n    \"types\": [\"jasmine\", \"node\"]\n  },\n  \"files\": [\"src/test.ts\"],\n  \"include\": [\"**/*.spec.ts\", \"**/*.d.ts\"]\n}\n"
  },
  {
    "path": "projects/ngneat/content-loader/tslint.json",
    "content": "{\n  \"extends\": \"../../../tslint.json\"\n}\n"
  },
  {
    "path": "src/app/app.component.css",
    "content": ""
  },
  {
    "path": "src/app/app.component.html",
    "content": "<h1>Content Loaders</h1>\n\n<bullet-list-content-loader></bullet-list-content-loader>\n\n<facebook-content-loader></facebook-content-loader>\n\n<list-content-loader></list-content-loader>\n\n<content-loader viewBox=\"0 0 340 84\">\n  <svg:rect x=\"0\" y=\"0\" width=\"67\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"76\" y=\"0\" width=\"140\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"127\" y=\"48\" width=\"53\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"187\" y=\"48\" width=\"72\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"18\" y=\"48\" width=\"100\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"0\" y=\"71\" width=\"37\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"18\" y=\"23\" width=\"140\" height=\"11\" rx=\"3\" />\n  <svg:rect x=\"166\" y=\"23\" width=\"173\" height=\"11\" rx=\"3\" />\n</content-loader>\n"
  },
  {
    "path": "src/app/app.component.ts",
    "content": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {}\n"
  },
  {
    "path": "src/app/app.module.ts",
    "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { ContentLoaderModule } from '@ngneat/content-loader';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [BrowserModule.withServerTransition({ appId: 'content-loader' }), ContentLoaderModule],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n"
  },
  {
    "path": "src/app/app.server.module.ts",
    "content": "import { NgModule } from '@angular/core';\nimport { ServerModule } from '@angular/platform-server';\n\nimport { AppModule } from './app.module';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [AppModule, ServerModule],\n  bootstrap: [AppComponent]\n})\nexport class AppServerModule {}\n"
  },
  {
    "path": "src/assets/.gitkeep",
    "content": ""
  },
  {
    "path": "src/environments/environment.prod.ts",
    "content": "export const environment = {\n  production: true\n};\n"
  },
  {
    "path": "src/environments/environment.ts",
    "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n  production: false\n};\n\n/*\n * In development mode, to ignore zone related error stack frames such as\n * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can\n * import the following file, but please comment it out in production mode\n * because it will have performance impact when throw error\n */\n// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.\n"
  },
  {
    "path": "src/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Content Loader</title>\n    <base href=\"/\" />\n\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\" />\n  </head>\n\n  <body>\n    <app-root></app-root>\n  </body>\n</html>\n"
  },
  {
    "path": "src/karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, '../coverage'),\n      reports: ['html', 'lcovonly', 'text-summary'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false\n  });\n};\n"
  },
  {
    "path": "src/main.server.ts",
    "content": "import '@angular/platform-server/init';\n\nimport { enableProdMode } from '@angular/core';\n\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nexport { AppServerModule } from './app/app.server.module';\nexport { renderModule } from '@angular/platform-server';\n"
  },
  {
    "path": "src/main.ts",
    "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .catch(err => console.error(err));\n"
  },
  {
    "path": "src/polyfills.ts",
    "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags.ts';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n *  with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n *  (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js'; // Included with Angular CLI.\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
  },
  {
    "path": "src/server.ts",
    "content": "import 'zone.js/dist/zone-node';\n\nimport * as express from 'express';\nimport { join } from 'path';\n\nimport { APP_BASE_HREF } from '@angular/common';\nimport { ngExpressEngine } from '@nguniversal/express-engine';\n\nimport { AppServerModule } from './main.server';\n\nexport function app(): express.Express {\n  const server = express();\n  const distFolder = join(process.cwd(), 'dist/integration/browser');\n\n  server.engine(\n    'html',\n    ngExpressEngine({\n      bootstrap: AppServerModule\n    })\n  );\n\n  server.set('view engine', 'html');\n  server.set('views', distFolder);\n\n  server.get(\n    '*.*',\n    express.static(distFolder, {\n      maxAge: '1y'\n    })\n  );\n\n  server.get('*', (req, res) => {\n    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });\n  });\n\n  return server;\n}\n\nfunction run(): void {\n  const port = process.env.PORT || 4200;\n\n  const server = app();\n  server.listen(port, () => {\n    console.log(`Node Express server listening on http://localhost:${port}`);\n  });\n}\n\n// Webpack will replace 'require' with '__webpack_require__'\n// '__non_webpack_require__' is a proxy to Node 'require'\n// The below code is to ensure that the server is run only when not requiring the bundle.\ndeclare const __non_webpack_require__: NodeRequire;\nconst mainModule = __non_webpack_require__.main;\nconst moduleFilename = (mainModule && mainModule.filename) || '';\nif (moduleFilename === __filename || moduleFilename.includes('iisnode')) {\n  run();\n}\n\nexport * from './main.server';\n"
  },
  {
    "path": "src/styles.css",
    "content": "/* You can add global styles to this file, and also import other style files */\n"
  },
  {
    "path": "src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'projects/ngneat/content-loader/src/node_modules/zone.js/dist/zone-testing';\nimport { getTestBed } from 'projects/ngneat/content-loader/src/node_modules/@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from 'projects/ngneat/content-loader/src/node_modules/@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "src/tsconfig.app.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"types\": []\n  },\n  \"files\": [\"main.ts\", \"polyfills.ts\"],\n  \"include\": [\"**/*.d.ts\"]\n}\n"
  },
  {
    "path": "src/tsconfig.server.json",
    "content": "{\n  \"extends\": \"./tsconfig.app.json\",\n  \"compilerOptions\": {\n    \"target\": \"es2019\",\n    \"types\": [\"node\"]\n  },\n  \"files\": [\"main.server.ts\", \"server.ts\"],\n  \"angularCompilerOptions\": {\n    \"entryModule\": \"./app/app.server.module#AppServerModule\"\n  }\n}\n"
  },
  {
    "path": "src/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/spec\",\n    \"types\": [\"jasmine\", \"node\"]\n  },\n  \"files\": [\"test.ts\", \"polyfills.ts\"],\n  \"include\": [\"**/*.spec.ts\", \"**/*.d.ts\"]\n}\n"
  },
  {
    "path": "src/tslint.json",
    "content": "{\n  \"extends\": \"../tslint.json\",\n  \"rules\": {\n    \"directive-selector\": [true, \"attribute\", \"app\", \"camelCase\"],\n    \"component-selector\": [true, \"element\", \"app\", \"kebab-case\"]\n  }\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"paths\": {\n      \"@ngneat/content-loader\": [\"projects/ngneat/content-loader/src/public_api.ts\"]\n    },\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"experimentalDecorators\": true,\n    \"importHelpers\": true,\n    \"target\": \"es2015\",\n    \"typeRoots\": [\"node_modules/@types\"],\n    \"lib\": [\"es2018\", \"dom\"]\n  }\n}\n"
  },
  {
    "path": "tslint.json",
    "content": "{\n  \"rules\": {\n    \"ban\": [\n      true,\n      { \"name\": \"fit\", \"message\": \"The fit is forbidden\" },\n      { \"name\": \"debugger\", \"message\": \"The debugger is forbidden\" },\n      { \"name\": \"fdescribe\", \"message\": \"The fdescribe is forbidden\" }\n    ]\n  }\n}\n"
  }
]