[ { "path": ".editorconfig", "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 4\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false" }, { "path": ".eslintrc.js", "content": "/**\n * @type {import('eslint').Linter.Config}\n */\nmodule.exports = {\n root: true,\n extends: [\n // TODO: warning No cached ProjectGraph is available. The rule will be skipped. @nrwl/nx/enforce-module-boundaries\n // If you encounter this error as part of running standard `nx` commands then please open an issue on\n // https://github.com/nrwl/nx\n // './scripts/eslint/nx.js',\n '@tinkoff/eslint-config-angular',\n '@tinkoff/eslint-config-angular/html',\n '@tinkoff/eslint-config-angular/imports',\n '@tinkoff/eslint-config-angular/line-statements',\n '@tinkoff/eslint-config-angular/member-ordering',\n ],\n ignorePatterns: ['projects/**/test.ts', '*.js', '*.json', '*.less', '*.md'],\n parserOptions: {\n ecmaVersion: 'latest',\n sourceType: 'module',\n project: [require.resolve('./tsconfig.eslint.json')],\n },\n parser: '@typescript-eslint/parser',\n rules: {\n 'dot-notation': 'off',\n '@typescript-eslint/dot-notation': [\n 'error',\n {\n allowPrivateClassPropertyAccess: true,\n allowProtectedClassPropertyAccess: true,\n allowIndexSignaturePropertyAccess: true,\n },\n ],\n '@typescript-eslint/no-useless-constructor': 'off',\n 'no-prototype-builtins': 'off',\n '@typescript-eslint/no-unnecessary-type-constraint': 'error',\n '@typescript-eslint/prefer-includes': 'error',\n 'prefer-template': 'error',\n '@typescript-eslint/explicit-function-return-type': [\n 'error',\n {\n allowExpressions: true,\n allowTypedFunctionExpressions: true,\n allowHigherOrderFunctions: true,\n allowDirectConstAssertionInArrowFunctions: true,\n allowConciseArrowFunctionExpressionsStartingWithVoid: true,\n },\n ],\n '@typescript-eslint/no-base-to-string': 'error',\n '@typescript-eslint/ban-types': 'error',\n '@typescript-eslint/no-for-in-array': 'error',\n '@typescript-eslint/prefer-nullish-coalescing': 'error',\n '@typescript-eslint/prefer-optional-chain': 'error',\n },\n};\n" }, { "path": ".github/CODEOWNERS", "content": "\n# ==================================================================================\n# ==================================================================================\n# @ng-web-apis/intersection-observer codeowners\n# ==================================================================================\n# ==================================================================================\n#\n# Configuration of code ownership and review approvals for the @ng-web-apis/intersection-observer repo.\n#\n# More info: https://help.github.com/articles/about-codeowners/\n#\n\n* @waterplea @MarsiBarsi\n# will be requested for review when someone opens a pull request\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\nopen_collective: ng-web-apis\nissuehunt: ng-web-apis\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: 🐞 Bug report\nabout: Create a report to help us improve\ntitle: '[BUG] '\nlabels: ''\nassignee: waterplea\n---\n\n# 🐞 Bug report\n\n### Description\n\n\n\n### Reproduction\n\n\n\nhttp://www.stackblitz.com/...\n\n### Expected behavior\n\n\n\n### Versions\n\n- OS: [e.g. iOS]\n- Browser [e.g. chrome, safari]\n- Angular [e.g. 8]\n\n### Additional context\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: 🚀 Feature request\nabout: Suggest an idea for this project\ntitle: '[FEATURE]'\nlabels: ''\nassignee: waterplea\n---\n\n# 🚀 Feature request\n\n### Is your feature request related to a problem?\n\n\n I'm always frustrated when...\n\n### Describe the solution you'd like\n\n\n\n\n### Describe alternatives you've considered\n\n\n\n\n### Additional context\n\n\n\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## PR Checklist\n\nPlease check if your PR fulfills the following requirements:\n\n- [ ] The commit message follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/)\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\n\n- [ ] Bugfix\n- [ ] Feature\n- [ ] Refactoring (no functional changes, no api changes)\n- [ ] Other... Please describe:\n\n## What is the current behavior?\n\n\n\nIssue Number: N/A\n\n## What is the new behavior?\n\n## Does this PR introduce a breaking change?\n\n- [ ] Yes\n- [ ] No\n\n\n\n## Other information\n" }, { "path": ".github/workflows/ci.yml", "content": "name: Web APIs CI\n\non: push\n\njobs:\n ci:\n # Setup part\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js\n uses: actions/setup-node@v1\n with:\n node-version: '12.x'\n - name: Cache Node.js modules\n uses: actions/cache@v2\n with:\n path: ~/.npm \n key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.OS }}-node-\n ${{ runner.OS }}-\n - name: Install dependencies\n run: npm ci\n # End of setup\n - run: |\n npm run build\n npm run test\n npm run lint\n - name: Coveralls\n uses: coverallsapp/github-action@master\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n path-to-lcov: ./coverage/intersection-observer/lcov.info" }, { "path": ".gitignore", "content": "# compiled schematics\nschematics/library-starter/*.js\nschematics/library-starter/*.js.map\nschematics/library-starter/*.d.ts\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events.json\nspeed-measure-plugin.json\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.history/*\n\n# misc\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" }, { "path": ".husky/commit-msg", "content": "#!/bin/sh\n# shellcheck disable=SC1090\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx commitlint --edit $1\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n# shellcheck disable=SC1090\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\nnpm run typecheck\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See\n[standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n### [3.0.1](https://github.com/ng-web-apis/intersection-observer/compare/v3.0.0...v3.0.1) (2023-05-25)\n\n- add missing README\n\n## [3.0.0](https://github.com/ng-web-apis/intersection-observer/compare/v2.1.0...v3.0.0) (2022-07-15)\n\n### ⚠ BREAKING CHANGES\n\n- update to Angular 12 and Ivy distribution\n ([90e166b](https://github.com/ng-web-apis/intersection-observer/commit/90e166b7404f2e6edac8713dfbb56cd344e861f7))\n\n## [2.1.0](https://github.com/ng-web-apis/intersection-observer/compare/v2.0.1...v2.1.0) (2020-09-19)\n\n### Features\n\n- **directive:** add `exportAs` ([8341df3](https://github.com/ng-web-apis/intersection-observer/commit/8341df3))\n\n### [2.0.1](https://github.com/ng-web-apis/intersection-observer/compare/v2.0.0...v2.0.1) (2020-08-26)\n\n### Bug Fixes\n\n- **service:** fix exception in Internet Explorer\n ([5f28df4](https://github.com/ng-web-apis/intersection-observer/commit/5f28df4))\n\n## [2.0.0](https://github.com/ng-web-apis/intersection-observer/compare/v1.1.3...v2.0.0) (2020-05-15)\n\n### Features\n\n- **observer:** Add new directives and service to create single observer and observe multiple elements, rename old\n directive ([c2de2ff](https://github.com/ng-web-apis/intersection-observer/commit/c2de2ff))\n\nBREAKING CHANGE: New directives names and mechanics\n\n### [1.1.3](https://github.com/ng-web-apis/intersection-observer/compare/v1.1.2...v1.1.3) (2020-04-24)\n\n- add default values for tokens and remove @Optional\n\n### [1.1.2](https://github.com/ng-web-apis/intersection-observer/compare/v1.1.1...v1.1.2) (2020-04-06)\n\n### Bug Fixes\n\n- **directive:** add attributes to constructor to make code completion work in IDE\n ([ec3c25a](https://github.com/ng-web-apis/intersection-observer/commit/ec3c25a))\n\n### [1.1.1](https://github.com/ng-web-apis/intersection-observer/compare/v1.1.0...v1.1.1) (2020-03-30)\n\n### Bug Fixes\n\n- **service:** only observe when there are subscriptions\n ([2a8e267](https://github.com/ng-web-apis/intersection-observer/commit/2a8e267))\n\n## [1.1.0](https://github.com/ng-web-apis/intersection-observer/compare/v1.0.0...v1.1.0) (2020-03-26)\n\n### Features\n\n- **service:** add `IntersectionObserverService`\n ([65e79aa](https://github.com/ng-web-apis/intersection-observer/commit/65e79aa))\n\n## 1.0.0 (2020-03-25)\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\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\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\n 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\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project at ng.web.apis@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\n> Thank you for considering contributing to our project. Your help if very welcome!\n\nWhen contributing, it's better to first discuss the change you wish to make via issue,\nemail, or any other method with the owners of this repository before making a change.\n\nAll members of our community are expected to follow our [Code of Conduct](CODE_OF_CONDUCT.md).\nPlease make sure you are welcoming and friendly in all of our spaces.\n\n## Getting started\n\nIn order to make your contribution please make a fork of the repository. After you've pulled\nthe code, follow these steps to kick start the development:\n\n1. Run `npm ci` to install dependencies\n2. Run `npm start` to launch demo project where you could test your changes\n3. Use following commands to ensure code quality\n\n```\nnpm run lint\nnpm run build\nnpm run test\n```\n\n## Pull Request Process\n\n1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/)\n in our commit messages, i.e. `feat(core): improve typing`\n2. Update [README.md](README.md) to reflect changes related to public API and everything relevant\n3. Make sure you cover all code changes with unit tests\n4. When you are ready, create Pull Request of your fork into original repository\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2020 Alexander Inkin \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 all\ncopies 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 THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "___\n___\n**Attention!** This repository is archived and the library has been moved to [tinkoff/ng-web-apis](https://github.com/Tinkoff/ng-web-apis) monorepository\n___\n___\n# ![ng-web-apis logo](projects/demo/src/assets/logo.svg) Intersection Observer API for Angular\n\n> Part of [Web APIs for Angular](https://ng-web-apis.github.io/)\n\n[![npm version](https://img.shields.io/npm/v/@ng-web-apis/intersection-observer.svg)](https://npmjs.com/package/@ng-web-apis/intersection-observer)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/intersection-observer)](https://bundlephobia.com/result?p=@ng-web-apis/intersection-observer)\n[![.github/workflows/ci.yml](https://github.com/ng-web-apis/intersection-observer/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/ng-web-apis/intersection-observer/actions/workflows/ci.yml)\n[![Coveralls github](https://img.shields.io/coveralls/github/ng-web-apis/intersection-observer)](https://coveralls.io/github/ng-web-apis/intersection-observer?branch=master)\n[![angular-open-source-starter](https://img.shields.io/badge/made%20with-angular--open--source--starter-d81676?logo=angular)](https://github.com/TinkoffCreditSystems/angular-open-source-starter)\n\nThis is a library for declarative use of\n[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\nwith Angular.\n\n## Install\n\nIf you do not have [@ng-web-apis/common](https://github.com/ng-web-apis/common):\n\n```\nnpm i @ng-web-apis/common\n```\n\nNow install the package:\n\n```\nnpm i @ng-web-apis/intersection-observer\n```\n\n## Usage\n\n1. Import `IntersectionObserverModule` for directives to work\n2. Create [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) with `waIntersectionObserver` directive\n3. Observe elements with `waIntersectionObservee` directive\n4. _Optional:_ provide root element with `waIntersectionRoot` directive and\n use `waIntersectionThreshold` and `waIntersectionRootMargin` attributes to configure\n [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)\n\n > **NOTE:** Keep in mind these are used one time in constructor so you cannot use binding, only strings. Pass comma separated numbers to set an array of thresholds.\n\n### Usage with Jest\n\nDOM environment provided by Jest does not emulate IntersectionObserver API and need to be mocked. You can add the following line to your `setup.ts`:\n\n```ts\n// setup.ts\nimport '@ng-web-apis/universal/mocks';\n```\n\nto use mocks from [@ng-web-apis/universal](https://github.com/ng-web-apis/universal) package.\n\n## Examples\n\nObserving multiple elements intersecting with viewport using single observer\n\n```html\n
\n
\n I'm being observed\n
\n
\n I'm being observed\n
\n
\n```\n\nObserving elements intersecting with parent element,\neach having different configuration therefore using individual observers:\n\n```html\n
\n \n I'm being observed\n \n \n I'm being observed\n \n
\n```\n\n## Services\n\nAlternatively you can use `Observable`-based services:\n\n1. `IntersectionObserveeService` can be used to observe elements under `waIntersectionObserver`\n directive in the DI tree\n\n2. `IntersectionObserverService` can be used to observe single element independently.\n Provide tokens manually to configure it:\n\n```typescript\n@Component({\n selector: 'my-component',\n providers: [\n IntersectionObserverService,\n {\n provide: INTERSECTION_THRESHOLD,\n useValue: 0.5,\n },\n {\n provide: INTERSECTION_ROOT_MARGIN,\n useValue: '10px',\n },\n ],\n})\nexport class MyComponent {\n constructor(\n @Inject(IntersectionObserverService) entries$: IntersectionObserverService,\n ) {\n entries$.subscribe(entries => {\n // Don't forget to unsubscribe\n console.log(entries);\n });\n }\n}\n```\n\n> In this case provide `INTERSECTION_ROOT` up the DI tree if you\n> want to observe intersection with a particular parent element\n\n## Browser support\n\n| [\"IE](http://godban.github.io/browsers-support-badges/) | [\"Firefox\"](http://godban.github.io/browsers-support-badges/) | [\"Chrome\"](http://godban.github.io/browsers-support-badges/) | [\"Safari\"](http://godban.github.io/browsers-support-badges/) |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| 15+ | 55+ | 51+ | 12.2+ |\n\n> You can use [polyfill](https://www.npmjs.com/package/intersection-observer) to support older browsers\n\n## Angular Universal\n\nIf you want to use this package with SSR, you need to mock `IntersectionObserver` class on the server.\nYou can use our Universal package for this, see [this example](https://github.com/ng-web-apis/universal#mocks).\n\n## Demo\n\nYou can [try online demo here](https://ng-web-apis.github.io/intersection-observer)\n\n## See also\n\nOther [Web APIs for Angular](https://ng-web-apis.github.io/) by [@ng-web-apis](https://github.com/ng-web-apis)\n\n## Open-source\n\nDo you also want to open-source something, but hate the collateral work?\nCheck out this [Angular Open-source Library Starter](https://github.com/TinkoffCreditSystems/angular-open-source-starter)\nwe’ve created for our projects. It got you covered on continuous integration,\npre-commit checks, linting, versioning + changelog, code coverage and all that jazz.\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"demo\": {\n \"projectType\": \"application\",\n \"schematics\": {},\n \"root\": \"projects/demo\",\n \"sourceRoot\": \"projects/demo/src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:browser\",\n \"options\": {\n \"baseHref\": \"/intersection-observer/\",\n \"deployUrl\": \"/intersection-observer/\",\n \"outputPath\": \"dist/demo/browser\",\n \"index\": \"projects/demo/src/index.html\",\n \"main\": \"projects/demo/src/main.browser.ts\",\n \"polyfills\": \"projects/demo/src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [\n {\n \"glob\": \"**/*\",\n \"input\": \"projects/demo/src/assets/\",\n \"output\": \"./assets/\"\n },\n \"projects/demo/src/favicon.ico\"\n ],\n \"styles\": [\"projects/demo/src/styles.css\"],\n \"showCircularDependencies\": false,\n \"vendorChunk\": true,\n \"extractLicenses\": false,\n \"buildOptimizer\": false,\n \"sourceMap\": true,\n \"optimization\": false,\n \"namedChunks\": true,\n \"scripts\": []\n },\n \"configurations\": {\n \"production\": {\n \"baseHref\": \"/intersection-observer/\",\n \"deployUrl\": \"/intersection-observer/\",\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"namedChunks\": false,\n \"buildOptimizer\": true,\n \"statsJson\": false,\n \"progress\": false,\n \"budgets\": [\n {\n \"type\": \"initial\",\n \"maximumWarning\": \"2mb\",\n \"maximumError\": \"5mb\"\n }\n ]\n },\n \"development\": {\n \"baseHref\": \"/\",\n \"deployUrl\": \"/\"\n }\n },\n \"defaultConfiguration\": \"production\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"browserTarget\": \"demo:build\"\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"demo:build:production\"\n }\n }\n },\n \"server\": {\n \"builder\": \"@angular-devkit/build-angular:server\",\n \"options\": {\n \"outputPath\": \"dist/demo/server\",\n \"main\": \"projects/demo/server.ts\",\n \"tsConfig\": \"projects/demo/tsconfig.server.json\",\n \"inlineStyleLanguage\": \"less\"\n },\n \"configurations\": {\n \"production\": {\n \"outputHashing\": \"media\",\n \"fileReplacements\": [\n {\n \"replace\": \"projects/demo/src/environments/environment.ts\",\n \"with\": \"projects/demo/src/environments/environment.prod.ts\"\n }\n ]\n },\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true,\n \"extractLicenses\": false\n }\n },\n \"defaultConfiguration\": \"production\"\n },\n \"serve-ssr\": {\n \"builder\": \"@nguniversal/builders:ssr-dev-server\",\n \"configurations\": {\n \"development\": {\n \"browserTarget\": \"demo:build:development\",\n \"serverTarget\": \"demo:server:development\"\n },\n \"production\": {\n \"browserTarget\": \"demo:build:production\",\n \"serverTarget\": \"demo:server:production\"\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"prerender\": {\n \"builder\": \"@nguniversal/builders:prerender\",\n \"options\": {\n \"routes\": [\"/\"]\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"demo:build:production\",\n \"serverTarget\": \"demo:server:production\"\n },\n \"development\": {\n \"browserTarget\": \"demo:build:development\",\n \"serverTarget\": \"demo:server:development\"\n }\n },\n \"defaultConfiguration\": \"production\"\n }\n }\n },\n \"intersection-observer\": {\n \"projectType\": \"library\",\n \"root\": \"projects/intersection-observer\",\n \"sourceRoot\": \"projects/intersection-observer/src\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:ng-packagr\",\n \"options\": {\n \"tsConfig\": \"projects/intersection-observer/tsconfig.lib.json\",\n \"project\": \"projects/intersection-observer/ng-package.json\"\n }\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"main\": \"projects/intersection-observer/src/test.ts\",\n \"tsConfig\": \"projects/intersection-observer/tsconfig.spec.json\",\n \"karmaConfig\": \"projects/intersection-observer/karma.conf.js\",\n \"codeCoverage\": true,\n \"browsers\": \"ChromeHeadless\"\n }\n }\n }\n }\n },\n \"defaultProject\": \"intersection-observer\"\n}\n" }, { "path": "commitlint.config.js", "content": "module.exports = {extends: ['@commitlint/config-conventional']};\n" }, { "path": "package.json", "content": "{\n \"name\": \"@ng-web-apis/intersection-observer\",\n \"version\": \"3.0.1\",\n \"description\": \"A library for declarative use of Intersection Observer API with Angular\",\n \"keywords\": [\n \"angular\",\n \"ng\",\n \"intersection\",\n \"observer\"\n ],\n \"homepage\": \"https://github.com/ng-web-apis/intersection-observer#README\",\n \"bugs\": \"https://github.com/ng-web-apis/intersection-observer/issues\",\n \"repository\": \"https://github.com/ng-web-apis/intersection-observer\",\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"Alexander Inkin\",\n \"email\": \"alexander@inkin.ru\"\n },\n \"contributors\": [\n \"Roman Sedov <79601794011@ya.ru>\"\n ],\n \"scripts\": {\n \"postinstall\": \"husky install\",\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"start:ssr\": \"ng run demo:serve-ssr\",\n \"serve:ssr\": \"node dist/demo/server/main.js\",\n \"build:ssr\": \"ng build && ng run demo:server\",\n \"prerender\": \"ng run demo:prerender\",\n \"build\": \"ng build\",\n \"postbuild\": \"node scripts/postbuild.js\",\n \"test\": \"ng test\",\n \"stylelint\": \"stylelint '**/*.{less,css}'\",\n \"lint\": \"eslint --cache --cache-location node_modules/.cache/eslint\",\n \"typecheck\": \"tsc --noEmit --skipLibCheck\",\n \"release\": \"standard-version\",\n \"release:patch\": \"npm run release -- --release-as patch\",\n \"release:minor\": \"npm run release -- --release-as minor\",\n \"release:major\": \"npm run release -- --release-as major\",\n \"publish\": \"npm run build && npm publish ./dist/intersection-observer\"\n },\n \"lint-staged\": {\n \"*.{js,ts,html,md,less,json}\": [\n \"npm run lint -- --fix\",\n \"prettier --write\",\n \"git add\"\n ],\n \"*.less\": [\n \"stylelint --fix\",\n \"git add\"\n ]\n },\n \"dependencies\": {\n \"@angular/common\": \"12.2.16\",\n \"@angular/compiler\": \"12.2.16\",\n \"@angular/core\": \"12.2.16\",\n \"@angular/forms\": \"12.2.16\",\n \"@angular/platform-browser\": \"12.2.16\",\n \"@angular/platform-browser-dynamic\": \"12.2.16\",\n \"@angular/platform-server\": \"12.2.16\",\n \"@angular/router\": \"12.2.16\",\n \"@ng-web-apis/common\": \"^2.0.0\",\n \"@ng-web-apis/universal\": \"^2.0.0\",\n \"@nguniversal/express-engine\": \"12.1.3\",\n \"core-js\": \"3.20.3\",\n \"intersection-observer\": \"^0.12.2\",\n \"rxjs\": \"7.5.2\",\n \"tslib\": \"2.3.1\",\n \"zone.js\": \"0.11.4\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"12.2.16\",\n \"@angular-devkit/core\": \"12.2.16\",\n \"@angular/cli\": \"12.2.16\",\n \"@angular/compiler-cli\": \"12.2.16\",\n \"@angular/language-service\": \"12.2.16\",\n \"@commitlint/cli\": \"^11.0.0\",\n \"@commitlint/config-conventional\": \"^11.0.0\",\n \"@nguniversal/builders\": \"12.1.3\",\n \"@tinkoff/eslint-config\": \"1.36.1\",\n \"@tinkoff/eslint-config-angular\": \"1.36.1\",\n \"@tinkoff/prettier-config\": \"1.32.1\",\n \"@types/estree\": \"1.0.0\",\n \"@types/express\": \"4.17.13\",\n \"@types/jasmine\": \"3.10.3\",\n \"@types/jasminewd2\": \"2.0.10\",\n \"@types/node\": \"18.0.4\",\n \"coveralls\": \"3.1.1\",\n \"husky\": \"7.0.4\",\n \"jasmine-core\": \"4.0.0\",\n \"jasmine-spec-reporter\": \"7.0.0\",\n \"karma\": \"6.3.11\",\n \"karma-chrome-launcher\": \"3.1.0\",\n \"karma-coverage-istanbul-reporter\": \"3.0.3\",\n \"karma-jasmine\": \"4.0.1\",\n \"karma-jasmine-html-reporter\": \"1.7.0\",\n \"lint-staged\": \"12.2.1\",\n \"ng-packagr\": \"12.2.6\",\n \"prettier\": \"2.5.1\",\n \"standard-version\": \"9.3.2\",\n \"ts-node\": \"9.0.0\",\n \"tslint\": \"6.1.3\",\n \"typescript\": \"4.3.5\"\n },\n \"engines\": {\n \"node\": \">= 10\",\n \"npm\": \">= 3\"\n },\n \"standard-version\": {\n \"scripts\": {\n \"postbump\": \"node scripts/syncVersions.js && git add **/package.json\"\n }\n }\n}\n" }, { "path": "prettier.config.js", "content": "const base = require('@tinkoff/prettier-config/angular');\n\nmodule.exports = {\n ...base,\n singleAttributePerLine: true,\n overrides: [\n ...base.overrides,\n {\n files: ['*.js', '*.ts'],\n options: {printWidth: 90, parser: 'typescript'},\n },\n {\n files: ['*.html'],\n options: {printWidth: 120, parser: 'angular'},\n },\n ],\n};\n" }, { "path": "projects/demo/.gitignore", "content": "# compiled output\n/dist\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events.json\nspeed-measure-plugin.json\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.history/*\n\n# misc\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" }, { "path": "projects/demo/angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"demo\": {\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/demo\",\n \"index\": \"src/index.html\",\n \"main\": \"src/main.browser.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.demo.json\",\n \"aot\": false,\n \"assets\": [\n {\n \"glob\": \"**/*\",\n \"input\": \"projects/demo/src/assets/\",\n \"output\": \"./assets/\"\n },\n \"src/favicon.ico\"\n ],\n \"styles\": [\"src/styles.css\"],\n \"scripts\": []\n },\n \"configurations\": {\n \"production\": {\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"extractCss\": true,\n \"namedChunks\": false,\n \"aot\": true,\n \"extractLicenses\": true,\n \"vendorChunk\": false,\n \"buildOptimizer\": true\n }\n }\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"browserTarget\": \"demo:build\"\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"demo:build:production\"\n }\n }\n }\n }\n }\n },\n \"defaultProject\": \"demo\"\n}\n" }, { "path": "projects/demo/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/demo'),\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: ['ChromeHeadless'],\n singleRun: true,\n customLaunchers: {\n ChromeHeadless: {\n base: 'Chrome',\n flags: [\n '--no-sandbox',\n '--headless',\n '--disable-gpu',\n '--remote-debugging-port=9222',\n ],\n },\n },\n });\n};\n" }, { "path": "projects/demo/package.json", "content": "{\n \"name\": \"demo\",\n \"version\": \"3.0.1\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"@angular/common\": \"12.2.16\",\n \"@angular/compiler\": \"12.2.16\",\n \"@angular/core\": \"12.2.16\",\n \"@angular/forms\": \"12.2.16\",\n \"@angular/platform-browser\": \"12.2.16\",\n \"@angular/platform-browser-dynamic\": \"12.2.16\",\n \"@angular/router\": \"12.2.16\",\n \"@ng-web-apis/common\": \"latest\",\n \"@ng-web-apis/intersection-observer\": \"latest\",\n \"core-js\": \"3.20.3\",\n \"intersection-observer\": \"^0.12.2\",\n \"rxjs\": \"7.5.2\",\n \"zone.js\": \"0.11.4\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"12.2.16\",\n \"@angular-devkit/core\": \"12.2.16\",\n \"@angular/cli\": \"12.2.16\",\n \"@angular/compiler-cli\": \"12.2.16\",\n \"@angular/language-service\": \"12.2.16\",\n \"@types/node\": \"18.0.4\",\n \"ts-node\": \"9.0.0\",\n \"tslint\": \"6.1.3\",\n \"typescript\": \"4.3.5\"\n }\n}\n" }, { "path": "projects/demo/server.ts", "content": "import '@ng-web-apis/universal/mocks';\nimport 'zone.js/node';\n\nimport {APP_BASE_HREF} from '@angular/common';\nimport {provideLocation, provideUserAgent} from '@ng-web-apis/universal';\nimport {ngExpressEngine} from '@nguniversal/express-engine';\nimport * as express from 'express';\nimport {existsSync} from 'fs';\nimport {join} from 'path';\n\nimport {AppServerModule} from './src/main.server';\n\n// The Express app is exported so that it can be used by serverless Functions.\nexport function app(): express.Express {\n const server = express();\n const distFolder = join(process.cwd(), 'dist/demo/browser');\n const indexHtml = existsSync(join(distFolder, 'index.original.html'))\n ? 'index.original.html'\n : 'index';\n\n // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)\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 // Example Express Rest API endpoints\n // server.get('/api/**', (req, res) => { });\n // Serve static files from /browser\n server.get(\n '*.*',\n express.static(distFolder, {\n maxAge: '1y',\n }),\n );\n\n // All regular routes use the Universal engine\n server.get('*', (req, res) => {\n res.render(indexHtml, {\n req,\n providers: [\n {provide: APP_BASE_HREF, useValue: req.baseUrl},\n provideLocation(req),\n provideUserAgent(req),\n ],\n });\n });\n\n return server;\n}\n\nfunction run(): void {\n const port = process.env.PORT || 4000;\n const server = app();\n\n server.listen(port, () => {\n console.info(`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?.filename || '';\n\nif (moduleFilename === __filename || moduleFilename.includes('iisnode')) {\n run();\n}\n\nexport * from './src/main.server';\n" }, { "path": "projects/demo/src/app/app.browser.module.ts", "content": "import {\n APP_BASE_HREF,\n CommonModule,\n LocationStrategy,\n PathLocationStrategy,\n} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {IntersectionObserverModule} from '@ng-web-apis/intersection-observer';\nimport {AppComponent} from './app.component';\nimport {AppRoutingModule} from './app.routes';\n\n@NgModule({\n bootstrap: [AppComponent],\n imports: [\n CommonModule,\n FormsModule,\n BrowserModule.withServerTransition({appId: 'demo'}),\n AppRoutingModule,\n IntersectionObserverModule,\n ],\n declarations: [AppComponent],\n providers: [\n {\n provide: LocationStrategy,\n useClass: PathLocationStrategy,\n },\n {\n provide: APP_BASE_HREF,\n useValue: '',\n },\n ],\n})\nexport class AppBrowserModule {}\n" }, { "path": "projects/demo/src/app/app.component.html", "content": "\n \n I'm being observed\n \n\n\n Your browser does not support Intersection Observer API\n\n" }, { "path": "projects/demo/src/app/app.component.less", "content": ":host {\n perspective: 150vw;\n user-select: none;\n flex-direction: column;\n align-items: center;\n}\n\n.wrapper {\n position: relative;\n height: 200px;\n width: 80vw;\n overflow: auto;\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);\n\n &:before {\n content: '';\n display: block;\n height: 900px;\n }\n}\n\n.element {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n top: 300px;\n left: 10vw;\n width: 60vw;\n height: 200px;\n transition: background 0.1s;\n\n &[data-ratio='0'] {\n background: #8591eb;\n }\n\n &[data-ratio='1'] {\n background: #85a0eb;\n }\n\n &[data-ratio='2'] {\n background: #84aeeb;\n }\n\n &[data-ratio='3'] {\n background: #83beeb;\n }\n\n &[data-ratio='4'] {\n background: #86d2eb;\n }\n\n &[data-ratio='5'] {\n background: #87ddeb;\n }\n\n &[data-ratio='6'] {\n background: #8ae5eb;\n }\n\n &[data-ratio='7'] {\n background: #8bebdf;\n }\n\n &[data-ratio='8'] {\n background: #83ebc8;\n }\n\n &[data-ratio='9'] {\n background: #6beb99;\n }\n\n &[data-ratio='10'] {\n background: #4ceb60;\n }\n}\n" }, { "path": "projects/demo/src/app/app.component.ts", "content": "import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';\nimport {INTERSECTION_OBSERVER_SUPPORT} from '@ng-web-apis/intersection-observer';\n\n@Component({\n selector: 'main',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppComponent {\n ratio = 0;\n\n constructor(@Inject(INTERSECTION_OBSERVER_SUPPORT) readonly support: boolean) {}\n\n onIntersection(intersections: IntersectionObserverEntry[]) {\n this.ratio = Math.round(intersections[0].intersectionRatio * 10);\n }\n}\n" }, { "path": "projects/demo/src/app/app.routes.ts", "content": "import {NgModule} from '@angular/core';\nimport {RouterModule} from '@angular/router';\nimport {AppComponent} from './app.component';\n\nexport const appRoutes = [\n {\n path: '**',\n component: AppComponent,\n },\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(appRoutes)],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n" }, { "path": "projects/demo/src/app/app.server.module.ts", "content": "import {NgModule} from '@angular/core';\nimport {ServerModule} from '@angular/platform-server';\n\nimport {AppBrowserModule} from './app.browser.module';\nimport {AppComponent} from './app.component';\n\n@NgModule({\n imports: [AppBrowserModule, ServerModule],\n bootstrap: [AppComponent],\n})\nexport class AppServerModule {}\n" }, { "path": "projects/demo/src/assets/browserconfig.xml", "content": "\n\n \n \n \n #2d89ef\n \n \n\n" }, { "path": "projects/demo/src/assets/site.webmanifest", "content": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/intersection-observer/assets/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/intersection-observer/assets/android-chrome-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"display\": \"standalone\"\n}\n" }, { "path": "projects/demo/src/index.html", "content": "\n \n Intersection Observer API for Angular\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n

Intersection Observer API for Angular

\n Part of\n \n \n Web APIs for Angular\n \n
\n
\n
loading
\n \n \n\n" }, { "path": "projects/demo/src/main.browser.ts", "content": "import './polyfills';\n\nimport {platformBrowserDynamic} from '@angular/platform-browser-dynamic';\nimport {AppBrowserModule} from './app/app.browser.module';\n\nplatformBrowserDynamic()\n .bootstrapModule(AppBrowserModule)\n .then(ref => {\n const windowRef: any = window;\n\n // Ensure Angular destroys itself on hot reloads for Stackblitz\n if (windowRef['ngRef']) {\n windowRef['ngRef'].destroy();\n }\n\n windowRef['ngRef'] = ref;\n })\n .catch(err => console.error(err));\n" }, { "path": "projects/demo/src/main.server.ts", "content": "export {AppServerModule} from './app/app.server.module';\n" }, { "path": "projects/demo/src/polyfills.ts", "content": "import 'intersection-observer';\nimport 'zone.js';\n" }, { "path": "projects/demo/src/styles.css", "content": "/* Base demo styles */\nbody,\nhtml {\n display: flex;\n flex-direction: column;\n margin: 0;\n height: 100%;\n font-family: Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,\n 'Lucida Grande', sans-serif;\n color: #444;\n}\n\nheader {\n display: flex;\n width: 100%;\n max-width: 800px;\n margin: 0 auto;\n padding: 40px 10px;\n box-sizing: border-box;\n border-bottom: 1px solid gainsboro;\n}\n\nmain {\n flex: 1;\n display: flex;\n justify-content: center;\n padding: 40px 0;\n}\n\nfooter {\n padding: 16px;\n font-size: 12px;\n border-top: 1px solid gainsboro;\n text-align: center;\n}\n\na {\n color: #1976D2;\n text-decoration: none;\n}\n\n.logo {\n margin-right: 20px;\n}\n" }, { "path": "projects/demo/src/typings.d.ts", "content": "declare module '*';\n" }, { "path": "projects/demo/tsconfig.demo.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"typeRoots\": [],\n \"paths\": {}\n }\n}\n" }, { "path": "projects/demo/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\"\n}\n" }, { "path": "projects/demo/tsconfig.server.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"module\": \"commonjs\"\n },\n \"angularCompilerOptions\": {\n \"entryModule\": \"src/app/app.server.module#AppServerModule\"\n }\n}\n" }, { "path": "projects/demo/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/intersection-observer/LICENSE", "content": "MIT License\n\nCopyright (c) 2020 Alexander Inkin \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 all\ncopies 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 THE\nSOFTWARE.\n" }, { "path": "projects/intersection-observer/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/intersection-observer'),\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: ['ChromeHeadless'],\n singleRun: true,\n customLaunchers: {\n ChromeHeadless: {\n base: 'Chrome',\n flags: [\n '--no-sandbox',\n '--headless',\n '--disable-gpu',\n '--disable-web-security',\n '--remote-debugging-port=9222',\n ],\n },\n },\n });\n};\n" }, { "path": "projects/intersection-observer/ng-package.json", "content": "{\n \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n \"dest\": \"../../dist/intersection-observer\",\n \"lib\": {\n \"entryFile\": \"src/public-api.ts\"\n }\n}\n" }, { "path": "projects/intersection-observer/package.json", "content": "{\n \"name\": \"@ng-web-apis/intersection-observer\",\n \"version\": \"3.0.1\",\n \"description\": \"A library for declarative use of Intersection Observer API with Angular\",\n \"keywords\": [\n \"angular\",\n \"ng\",\n \"intersection\",\n \"observer\"\n ],\n \"homepage\": \"https://github.com/ng-web-apis/intersection-observer#README\",\n \"bugs\": \"https://github.com/ng-web-apis/intersection-observer/issues\",\n \"repository\": \"https://github.com/ng-web-apis/intersection-observer\",\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"Alexander Inkin\",\n \"email\": \"alexander@inkin.ru\"\n },\n \"contributors\": [\n \"Roman Sedov <79601794011@ya.ru>\"\n ],\n \"peerDependencies\": {\n \"@angular/core\": \">=12.0.0\",\n \"@ng-web-apis/common\": \">=2.0.0\"\n }\n}\n" }, { "path": "projects/intersection-observer/src/directives/intersection-observee.directive.ts", "content": "import {Directive, Inject} from '@angular/core';\nimport {Observable} from 'rxjs';\n\nimport {IntersectionObserveeService} from '../services/intersection-observee.service';\n\n@Directive({\n selector: '[waIntersectionObservee]',\n outputs: ['waIntersectionObservee'],\n providers: [IntersectionObserveeService],\n})\nexport class IntersectionObserveeDirective {\n constructor(\n @Inject(IntersectionObserveeService)\n readonly waIntersectionObservee: Observable,\n ) {}\n}\n" }, { "path": "projects/intersection-observer/src/directives/intersection-observer.directive.ts", "content": "import {\n Attribute,\n Directive,\n ElementRef,\n Inject,\n OnDestroy,\n Optional,\n} from '@angular/core';\nimport {INTERSECTION_ROOT} from '../tokens/intersection-root';\nimport {rootMarginFactory} from '../utils/root-margin-factory';\nimport {thresholdFactory} from '../utils/threshold-factory';\n\n@Directive({\n selector: '[waIntersectionObserver]',\n exportAs: 'IntersectionObserver',\n})\nexport class IntersectionObserverDirective extends IntersectionObserver\n implements OnDestroy {\n private readonly callbacks = new Map();\n\n constructor(\n @Optional() @Inject(INTERSECTION_ROOT) root: ElementRef | null,\n @Attribute('waIntersectionRootMargin') rootMargin: string | null,\n @Attribute('waIntersectionThreshold') threshold: string | null,\n ) {\n super(\n entries => {\n this.callbacks.forEach((callback, element) => {\n const filtered = entries.filter(({target}) => target === element);\n\n return filtered.length && callback(filtered, this);\n });\n },\n {\n root: root && root.nativeElement,\n rootMargin: rootMarginFactory(rootMargin),\n threshold: thresholdFactory(threshold),\n },\n );\n }\n\n observe(target: Element, callback: IntersectionObserverCallback = () => {}) {\n super.observe(target);\n this.callbacks.set(target, callback);\n }\n\n unobserve(target: Element) {\n super.unobserve(target);\n this.callbacks.delete(target);\n }\n\n ngOnDestroy() {\n this.disconnect();\n }\n}\n" }, { "path": "projects/intersection-observer/src/directives/intersection-root.directive.ts", "content": "import {Directive, ElementRef} from '@angular/core';\nimport {INTERSECTION_ROOT} from '../tokens/intersection-root';\n\n@Directive({\n selector: '[waIntersectionRoot]',\n providers: [\n {\n provide: INTERSECTION_ROOT,\n useExisting: ElementRef,\n },\n ],\n})\nexport class IntersectionRootDirective {}\n" }, { "path": "projects/intersection-observer/src/directives/tests/intersection-observee.spec.ts", "content": "import {Component, ViewChild} from '@angular/core';\nimport {ComponentFixture, TestBed} from '@angular/core/testing';\nimport {IntersectionObserverModule} from '../../module';\nimport {INTERSECTION_ROOT_MARGIN} from '../../tokens/intersection-root-margin';\nimport {INTERSECTION_THRESHOLD} from '../../tokens/intersection-threshold';\nimport {IntersectionObserverDirective} from '../intersection-observer.directive';\n\ndescribe('IntersectionObserveeDirective', () => {\n @Component({\n template: `\n
Hello
\n \n
Height expander
\n \n I'm being observed\n \n \n Default values\n \n \n `,\n })\n class TestComponent {\n @ViewChild('root', {read: IntersectionObserverDirective})\n observer!: IntersectionObserverDirective;\n\n onIntersection = jasmine.createSpy('onIntersection');\n observe = true;\n }\n\n let fixture: ComponentFixture;\n let testComponent: TestComponent;\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [IntersectionObserverModule],\n declarations: [TestComponent],\n });\n\n fixture = TestBed.createComponent(TestComponent);\n testComponent = fixture.componentInstance;\n fixture.detectChanges();\n testComponent.onIntersection.calls.reset();\n });\n\n it('Emits intersections', done => {\n document.querySelector('#observer_root')!.scrollTop = 350;\n fixture.detectChanges();\n\n setTimeout(() => {\n expect(testComponent.onIntersection).toHaveBeenCalled();\n document.querySelector('#observer_root')!.scrollTop = 0;\n fixture.detectChanges();\n testComponent.observe = false;\n fixture.detectChanges();\n done();\n }, 100);\n });\n\n it('Compatible with native method signature', () => {\n expect(() =>\n testComponent.observer.observe(document.querySelector('#manual_observee')!),\n ).not.toThrow();\n });\n\n it('Default options', () => {\n // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver\n expect(TestBed.get(INTERSECTION_ROOT_MARGIN)).toBe('0px 0px 0px 0px');\n expect(TestBed.get(INTERSECTION_THRESHOLD)).toBe(0);\n });\n});\n" }, { "path": "projects/intersection-observer/src/module.ts", "content": "import {NgModule} from '@angular/core';\nimport {IntersectionObserveeDirective} from './directives/intersection-observee.directive';\nimport {IntersectionObserverDirective} from './directives/intersection-observer.directive';\nimport {IntersectionRootDirective} from './directives/intersection-root.directive';\n\n@NgModule({\n declarations: [\n IntersectionObserverDirective,\n IntersectionObserveeDirective,\n IntersectionRootDirective,\n ],\n exports: [\n IntersectionObserverDirective,\n IntersectionObserveeDirective,\n IntersectionRootDirective,\n ],\n})\nexport class IntersectionObserverModule {}\n" }, { "path": "projects/intersection-observer/src/public-api.ts", "content": "/**\n * Public API Surface of @ng-web-apis/intersection-observer\n */\n\n/* Directives */\nexport * from './directives/intersection-observee.directive';\nexport * from './directives/intersection-observer.directive';\nexport * from './directives/intersection-root.directive';\n\n/* Modules */\nexport * from './module';\n\n/* Services */\nexport * from './services/intersection-observee.service';\nexport * from './services/intersection-observer.service';\n\n/* Tokens */\nexport * from './tokens/intersection-root';\nexport * from './tokens/intersection-root-margin';\nexport * from './tokens/intersection-threshold';\nexport * from './tokens/support';\n" }, { "path": "projects/intersection-observer/src/services/intersection-observee.service.ts", "content": "import {ElementRef, Inject, Injectable} from '@angular/core';\nimport {Observable} from 'rxjs';\nimport {share} from 'rxjs/operators';\nimport {IntersectionObserverDirective} from '../directives/intersection-observer.directive';\n\n@Injectable()\nexport class IntersectionObserveeService extends Observable {\n constructor(\n @Inject(ElementRef) {nativeElement}: ElementRef,\n @Inject(IntersectionObserverDirective)\n observer: IntersectionObserverDirective,\n ) {\n super(subscriber => {\n observer.observe(nativeElement, entries => {\n subscriber.next(entries);\n });\n\n return () => {\n observer.unobserve(nativeElement);\n };\n });\n\n return this.pipe(share());\n }\n}\n" }, { "path": "projects/intersection-observer/src/services/intersection-observer.service.ts", "content": "import {ElementRef, Inject, Injectable, Optional} from '@angular/core';\nimport {Observable} from 'rxjs';\nimport {share} from 'rxjs/operators';\nimport {INTERSECTION_ROOT} from '../tokens/intersection-root';\nimport {INTERSECTION_ROOT_MARGIN} from '../tokens/intersection-root-margin';\nimport {INTERSECTION_THRESHOLD} from '../tokens/intersection-threshold';\nimport {INTERSECTION_OBSERVER_SUPPORT} from '../tokens/support';\n\n@Injectable()\nexport class IntersectionObserverService extends Observable {\n constructor(\n @Inject(ElementRef) {nativeElement}: ElementRef,\n @Inject(INTERSECTION_OBSERVER_SUPPORT) support: boolean,\n @Inject(INTERSECTION_ROOT_MARGIN) rootMargin: string,\n @Inject(INTERSECTION_THRESHOLD) threshold: number | number[],\n @Optional() @Inject(INTERSECTION_ROOT) root: ElementRef | null,\n ) {\n super(subscriber => {\n if (!support) {\n subscriber.error('IntersectionObserver is not supported in your browser');\n\n return;\n }\n\n const observer = new IntersectionObserver(\n entries => {\n subscriber.next(entries);\n },\n {\n root: root && root.nativeElement,\n rootMargin,\n threshold,\n },\n );\n\n observer.observe(nativeElement);\n\n return () => {\n observer.disconnect();\n };\n });\n\n return this.pipe(share());\n }\n}\n" }, { "path": "projects/intersection-observer/src/services/tests/intersection-observer.service.spec.ts", "content": "import {take} from 'rxjs/operators';\nimport {IntersectionObserverService} from '../intersection-observer.service';\n\ndescribe('IntersectionObserverService', () => {\n it('works', done => {\n let called = false;\n\n const nativeElement = document.createElement('div');\n const service = new IntersectionObserverService(\n {\n nativeElement,\n },\n true,\n '0px 0px 0px 0px',\n 0,\n {\n nativeElement: document.body,\n },\n );\n\n service.pipe(take(1)).subscribe({\n next: () => {\n called = true;\n },\n });\n\n document.body.appendChild(nativeElement);\n\n setTimeout(() => {\n expect(called).toBe(true);\n done();\n });\n });\n\n it('throws when not supported', () => {\n let error = false;\n const service = new IntersectionObserverService(\n {\n nativeElement: document.createElement('DIV'),\n },\n false,\n '0px 0px 0px 0px',\n 0,\n null,\n );\n\n service.subscribe({\n error: () => {\n error = true;\n },\n });\n\n expect(error).toBe(true);\n });\n});\n" }, { "path": "projects/intersection-observer/src/test.ts", "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\nimport 'zone.js';\nimport 'zone.js/testing';\n\nimport {getTestBed} from '@angular/core/testing';\nimport {\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting,\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting(),\n);\n\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n\n// And load the modules.\ncontext.keys().map(context);\n" }, { "path": "projects/intersection-observer/src/tokens/intersection-root-margin.ts", "content": "import {InjectionToken} from '@angular/core';\n\nexport const INTERSECTION_ROOT_MARGIN_DEFAULT = '0px 0px 0px 0px';\nexport const INTERSECTION_ROOT_MARGIN = new InjectionToken(\n 'rootMargin for IntersectionObserver',\n {\n providedIn: 'root',\n factory: () => INTERSECTION_ROOT_MARGIN_DEFAULT,\n },\n);\n" }, { "path": "projects/intersection-observer/src/tokens/intersection-root.ts", "content": "import {ElementRef, InjectionToken} from '@angular/core';\n\nexport const INTERSECTION_ROOT = new InjectionToken>(\n 'Root element for IntersectionObserver',\n);\n" }, { "path": "projects/intersection-observer/src/tokens/intersection-threshold.ts", "content": "import {InjectionToken} from '@angular/core';\n\nexport const INTERSECTION_THRESHOLD_DEFAULT = 0;\nexport const INTERSECTION_THRESHOLD = new InjectionToken(\n 'threshold for IntersectionObserver',\n {\n providedIn: 'root',\n factory: () => INTERSECTION_THRESHOLD_DEFAULT,\n },\n);\n" }, { "path": "projects/intersection-observer/src/tokens/support.ts", "content": "import {inject, InjectionToken} from '@angular/core';\nimport {WINDOW} from '@ng-web-apis/common';\n\nexport const INTERSECTION_OBSERVER_SUPPORT = new InjectionToken(\n 'Intersection Observer API support',\n {\n providedIn: 'root',\n factory: () => !!(inject(WINDOW) as any).IntersectionObserver,\n },\n);\n" }, { "path": "projects/intersection-observer/src/tokens/tests/support.spec.ts", "content": "import {TestBed} from '@angular/core/testing';\nimport {INTERSECTION_OBSERVER_SUPPORT} from '../support';\n\ndescribe('INTERSECTION_OBSERVER_SUPPORT', () => {\n it('true in modern browsers', () => {\n TestBed.configureTestingModule({});\n\n expect(TestBed.get(INTERSECTION_OBSERVER_SUPPORT)).toBe(true);\n });\n});\n" }, { "path": "projects/intersection-observer/src/utils/root-margin-factory.ts", "content": "import {INTERSECTION_ROOT_MARGIN_DEFAULT} from '../tokens/intersection-root-margin';\n\nexport function rootMarginFactory(rootMargin: string | null): string {\n return rootMargin || INTERSECTION_ROOT_MARGIN_DEFAULT;\n}\n" }, { "path": "projects/intersection-observer/src/utils/threshold-factory.ts", "content": "import {INTERSECTION_THRESHOLD_DEFAULT} from '../tokens/intersection-threshold';\n\nexport function thresholdFactory(threshold: string | null): number | number[] {\n return threshold?.split(',').map(parseFloat) || INTERSECTION_THRESHOLD_DEFAULT;\n}\n" }, { "path": "projects/intersection-observer/tsconfig.lib.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/lib\",\n \"target\": \"es2015\",\n \"declaration\": true,\n \"inlineSources\": true,\n \"lib\": [\"dom\", \"es2018\"]\n },\n \"angularCompilerOptions\": {\n \"annotateForClosureCompiler\": true,\n \"skipTemplateCodegen\": true,\n \"strictMetadataEmit\": true,\n \"fullTemplateTypeCheck\": true,\n \"strictInjectionParameters\": true,\n \"enableResourceInlining\": true,\n \"enableIvy\": true,\n \"compilationMode\": \"partial\"\n },\n \"exclude\": [\"src/test.ts\", \"**/*.spec.ts\"]\n}\n" }, { "path": "projects/intersection-observer/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": "scripts/postbuild.js", "content": "const fs = require('fs');\n\nconst DIST_LIB_PATH = 'dist/intersection-observer/';\nconst README_PATH = 'README.md';\nconst PATH_TO_README = DIST_LIB_PATH + README_PATH;\n\ncopyExtraFiles();\n\nfunction copyExtraFiles() {\n if (!fs.existsSync(README_PATH)) {\n throw new Error('Requested files do not exit');\n } else {\n copyReadmeIntoDistFolder(README_PATH, PATH_TO_README);\n }\n}\n\nfunction copyReadmeIntoDistFolder(srcPath, toPath) {\n const fileBody = fs.readFileSync(srcPath).toString();\n const withoutLogos = fileBody\n .replace('![ng-web-apis logo](projects/demo/src/assets/logo.svg) ', '')\n .replace(' ', '');\n\n fs.writeFileSync(toPath, withoutLogos);\n}\n" }, { "path": "scripts/syncVersions.js", "content": "const fs = require('fs');\nconst glob = require('glob');\nconst JSON_INDENTATION_LEVEL = 4;\nconst {version} = require('../package.json');\n\n// Sync libraries package.json versions with main package.json\nsyncVersions('projects');\n\nfunction syncVersions(root) {\n glob(root + '/**/package.json', (_, files) => {\n files.forEach(file => {\n const packageJson = JSON.parse(fs.readFileSync(file));\n\n fs.writeFileSync(\n file,\n JSON.stringify(\n {\n ...packageJson,\n version,\n },\n null,\n JSON_INDENTATION_LEVEL,\n ),\n );\n });\n });\n}\n" }, { "path": "tsconfig.eslint.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"rootDir\": \".\",\n \"baseUrl\": \".\",\n \"strict\": false,\n \"incremental\": true\n },\n \"include\": [\"projects\", \"scripts\"],\n \"exclude\": [\"**/node_modules\", \"**/schematics/**\", \"**/.*/\", \"*.js\"]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"importHelpers\": true,\n \"strict\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noImplicitReturns\": true,\n \"noUnusedParameters\": true,\n \"noUnusedLocals\": true,\n \"target\": \"es5\",\n \"typeRoots\": [\"node_modules/@types\"],\n \"lib\": [\"es2018\", \"dom\"],\n \"paths\": {\n \"@ng-web-apis/intersection-observer\": [\n \"projects/intersection-observer/src/public-api\"\n ]\n }\n }\n}\n" } ]