├── .editorconfig ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── ci.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── angular.json ├── commitlint.config.js ├── package-lock.json ├── package.json ├── prettier.config.js ├── projects ├── demo │ ├── .gitignore │ ├── angular.json │ ├── karma.conf.js │ ├── package.json │ ├── server.ts │ ├── src │ │ ├── app │ │ │ ├── app.browser.module.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.less │ │ │ ├── app.component.ts │ │ │ ├── app.routes.ts │ │ │ └── app.server.module.ts │ │ ├── assets │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-512x512.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon.ico │ │ │ ├── logo.svg │ │ │ ├── mstile-144x144.png │ │ │ ├── mstile-150x150.png │ │ │ ├── mstile-310x150.png │ │ │ ├── mstile-310x310.png │ │ │ ├── mstile-70x70.png │ │ │ ├── safari-pinned-tab.svg │ │ │ ├── site.webmanifest │ │ │ └── web-api.svg │ │ ├── index.html │ │ ├── main.browser.ts │ │ ├── main.server.ts │ │ ├── polyfills.ts │ │ └── styles.css │ ├── tsconfig.demo.json │ ├── tsconfig.json │ ├── tsconfig.server.json │ └── tsconfig.spec.json └── resize-observer │ ├── LICENSE │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── directives │ │ ├── resize-observer.directive.ts │ │ └── tests │ │ │ └── resize-observer.spec.ts │ ├── module.ts │ ├── public-api.ts │ ├── services │ │ ├── resize-observer.service.ts │ │ └── tests │ │ │ └── resize-observer.service.spec.ts │ ├── test.ts │ └── tokens │ │ ├── resize-option-box.ts │ │ ├── support.ts │ │ └── tests │ │ └── support.spec.ts │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── scripts ├── postbuild.js └── syncVersions.js ├── tsconfig.eslint.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('eslint').Linter.Config} 3 | */ 4 | module.exports = { 5 | root: true, 6 | extends: [ 7 | // TODO: warning No cached ProjectGraph is available. The rule will be skipped. @nrwl/nx/enforce-module-boundaries 8 | // If you encounter this error as part of running standard `nx` commands then please open an issue on 9 | // https://github.com/nrwl/nx 10 | // './scripts/eslint/nx.js', 11 | '@tinkoff/eslint-config-angular', 12 | '@tinkoff/eslint-config-angular/html', 13 | '@tinkoff/eslint-config-angular/imports', 14 | '@tinkoff/eslint-config-angular/line-statements', 15 | '@tinkoff/eslint-config-angular/member-ordering', 16 | ], 17 | ignorePatterns: [ 18 | 'projects/**/test.ts', 19 | 'projects/**/icons/all.ts', 20 | '*.js', 21 | '*.json', 22 | '*.less', 23 | '*.md', 24 | ], 25 | parserOptions: { 26 | ecmaVersion: 'latest', 27 | sourceType: 'module', 28 | project: [require.resolve('./tsconfig.eslint.json')], 29 | }, 30 | parser: '@typescript-eslint/parser', 31 | rules: { 32 | 'dot-notation': 'off', 33 | '@typescript-eslint/dot-notation': [ 34 | 'error', 35 | { 36 | allowPrivateClassPropertyAccess: true, 37 | allowProtectedClassPropertyAccess: true, 38 | allowIndexSignaturePropertyAccess: true, 39 | }, 40 | ], 41 | '@typescript-eslint/no-useless-constructor': 'off', 42 | 'no-prototype-builtins': 'off', 43 | '@typescript-eslint/no-unnecessary-type-constraint': 'error', 44 | '@typescript-eslint/prefer-includes': 'error', 45 | 'prefer-template': 'error', 46 | '@typescript-eslint/explicit-function-return-type': [ 47 | 'error', 48 | { 49 | allowExpressions: true, 50 | allowTypedFunctionExpressions: true, 51 | allowHigherOrderFunctions: true, 52 | allowDirectConstAssertionInArrowFunctions: true, 53 | allowConciseArrowFunctionExpressionsStartingWithVoid: true, 54 | }, 55 | ], 56 | '@typescript-eslint/no-base-to-string': 'error', 57 | '@typescript-eslint/ban-types': 'error', 58 | '@typescript-eslint/no-for-in-array': 'error', 59 | '@typescript-eslint/prefer-nullish-coalescing': 'error', 60 | '@typescript-eslint/prefer-optional-chain': 'error', 61 | }, 62 | }; 63 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | 2 | # ================================================================================== 3 | # ================================================================================== 4 | # @ng-web-apis/resize-observer codeowners 5 | # ================================================================================== 6 | # ================================================================================== 7 | # 8 | # Configuration of code ownership and review approvals for the @ng-web-apis/resize-observer repo. 9 | # 10 | # More info: https://help.github.com/articles/about-codeowners/ 11 | # 12 | 13 | * @vladimirpotekhin @MarsiBarsi @waterplea 14 | # will be requested for review when someone opens a pull request 15 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | open_collective: ng-web-apis 4 | issuehunt: ng-web-apis 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐞 Bug report 3 | about: Create a report to help us improve 4 | title: '[BUG] ' 5 | labels: '' 6 | assignee: vladimirpotekhin 7 | --- 8 | 9 | # 🐞 Bug report 10 | 11 | ### Description 12 | 13 | 14 | 15 | ### Reproduction 16 | 17 | 18 | 19 | http://www.stackblitz.com/... 20 | 21 | ### Expected behavior 22 | 23 | 24 | 25 | ### Versions 26 | 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Angular [e.g. 8] 30 | 31 | ### Additional context 32 | 33 | 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🚀 Feature request 3 | about: Suggest an idea for this project 4 | title: '[FEATURE]' 5 | labels: '' 6 | assignee: vladimirpotekhin 7 | --- 8 | 9 | # 🚀 Feature request 10 | 11 | ### Is your feature request related to a problem? 12 | 13 | 14 | I'm always frustrated when... 15 | 16 | ### Describe the solution you'd like 17 | 18 | 19 | 20 | 21 | ### Describe alternatives you've considered 22 | 23 | 24 | 25 | 26 | ### Additional context 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## PR Checklist 2 | 3 | Please check if your PR fulfills the following requirements: 4 | 5 | - [ ] The commit message follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) 6 | - [ ] Tests for the changes have been added (for bug fixes / features) 7 | - [ ] Docs have been added / updated (for bug fixes / features) 8 | 9 | ## PR Type 10 | 11 | What kind of change does this PR introduce? 12 | 13 | 14 | 15 | - [ ] Bugfix 16 | - [ ] Feature 17 | - [ ] Refactoring (no functional changes, no api changes) 18 | - [ ] Other... Please describe: 19 | 20 | ## What is the current behavior? 21 | 22 | 23 | 24 | Issue Number: N/A 25 | 26 | ## What is the new behavior? 27 | 28 | ## Does this PR introduce a breaking change? 29 | 30 | - [ ] Yes 31 | - [ ] No 32 | 33 | 34 | 35 | ## Other information 36 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Web APIs CI 2 | 3 | on: push 4 | 5 | jobs: 6 | ci: 7 | # Setup part 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - name: Use Node.js 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: '12.x' 15 | - name: Cache Node.js modules 16 | uses: actions/cache@v2 17 | with: 18 | path: ~/.npm 19 | key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }} 20 | restore-keys: | 21 | ${{ runner.OS }}-node- 22 | ${{ runner.OS }}- 23 | - name: Install dependencies 24 | run: npm ci 25 | # End of setup 26 | - run: | 27 | npm run build 28 | npm run test 29 | npm run lint 30 | - name: Coveralls 31 | uses: coverallsapp/github-action@master 32 | with: 33 | github-token: ${{ secrets.GITHUB_TOKEN }} 34 | path-to-lcov: ./coverage/resize-observer/lcov.info -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # compiled schematics 2 | schematics/library-starter/*.js 3 | schematics/library-starter/*.js.map 4 | schematics/library-starter/*.d.ts 5 | 6 | # compiled output 7 | /dist 8 | /tmp 9 | /out-tsc 10 | # Only exists if Bazel was run 11 | /bazel-out 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # profiling files 17 | chrome-profiler-events.json 18 | speed-measure-plugin.json 19 | 20 | # IDEs and editors 21 | /.idea 22 | .project 23 | .classpath 24 | .c9/ 25 | *.launch 26 | .settings/ 27 | *.sublime-workspace 28 | 29 | # IDE - VSCode 30 | .vscode/* 31 | !.vscode/settings.json 32 | !.vscode/tasks.json 33 | !.vscode/launch.json 34 | !.vscode/extensions.json 35 | .history/* 36 | 37 | # misc 38 | /.sass-cache 39 | /connect.lock 40 | /coverage 41 | /libpeerconnection.log 42 | npm-debug.log 43 | yarn-error.log 44 | testem.log 45 | /typings 46 | 47 | # System Files 48 | .DS_Store 49 | Thumbs.db 50 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # shellcheck disable=SC1090 3 | . "$(dirname "$0")/_/husky.sh" 4 | 5 | npx commitlint --edit $1 6 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # shellcheck disable=SC1090 3 | . "$(dirname "$0")/_/husky.sh" 4 | 5 | npx lint-staged 6 | npm run typecheck 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See 4 | [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 5 | 6 | ## 2.0.0 (2022-07-15) 7 | 8 | ### ⚠ BREAKING CHANGES 9 | 10 | - update to Angular 12 and Ivy distribution 11 | ([bec5796](https://github.com/ng-web-apis/resize-observer/commit/bec579645b306e0f8fa815ea102cbe18917881c6)) 12 | 13 | ### 1.0.2 (2020-06-04) 14 | 15 | ### Bug Fixes 16 | 17 | - **service:** fix warnings if the observer is not supported 18 | ([#7](https://github.com/ng-web-apis/resize-observer/issues/7)) 19 | ([427f28b](https://github.com/ng-web-apis/resize-observer/commit/427f28b)) 20 | 21 | ### 1.0.1 (2020-05-16) 22 | 23 | ### Bug Fixes 24 | 25 | - **directive:** fix box factory for IVY support 26 | ([b956f4e](https://github.com/ng-web-apis/resize-observer/commit/b956f4e)) 27 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project at ng.web.apis@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | > Thank you for considering contributing to our project. Your help if very welcome! 4 | 5 | When contributing, it's better to first discuss the change you wish to make via issue, 6 | email, or any other method with the owners of this repository before making a change. 7 | 8 | All members of our community are expected to follow our [Code of Conduct](CODE_OF_CONDUCT.md). 9 | Please make sure you are welcoming and friendly in all of our spaces. 10 | 11 | ## Getting started 12 | 13 | In order to make your contribution please make a fork of the repository. After you've pulled 14 | the code, follow these steps to kick start the development: 15 | 16 | 1. Run `npm ci` to install dependencies 17 | 2. Run `npm start` to launch demo project where you could test your changes 18 | 3. Use following commands to ensure code quality 19 | 20 | ``` 21 | npm run lint 22 | npm run build 23 | npm run test 24 | ``` 25 | 26 | ## Pull Request Process 27 | 28 | 1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) 29 | in our commit messages, i.e. `feat(core): improve typing` 30 | 2. Update [README.md](README.md) to reflect changes related to public API and everything relevant 31 | 3. Make sure you cover all code changes with unit tests 32 | 4. When you are ready, create Pull Request of your fork into original repository 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vladimir Potekhin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ___ 2 | ___ 3 | **Attention!** This repository is archived and the library has been moved to [tinkoff/ng-web-apis](https://github.com/Tinkoff/ng-web-apis) monorepository 4 | ___ 5 | ___ 6 | # ![ng-web-apis logo](projects/demo/src/assets/logo.svg) Resize Observer API for Angular 7 | 8 | > Part of > 9 | > [Web APIs for Angular](https://ng-web-apis.github.io/) 10 | 11 | [![npm version](https://img.shields.io/npm/v/@ng-web-apis/resize-observer.svg)](https://npmjs.com/package/@ng-web-apis/resize-observer) 12 | [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/resize-observer)](https://bundlephobia.com/result?p=@ng-web-apis/resize-observer) 13 | [![.github/workflows/ci.yml](https://github.com/ng-web-apis/resize-observer/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/ng-web-apis/resize-observer/actions/workflows/ci.yml) 14 | [![Coveralls github](https://img.shields.io/coveralls/github/ng-web-apis/resize-observer)](https://coveralls.io/github/ng-web-apis/resize-observer?branch=master) 15 | [![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) 16 | 17 | This is a library for declarative use of 18 | [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) with Angular. 19 | 20 | ## Install 21 | 22 | If you do not have [@ng-web-apis/common](https://github.com/ng-web-apis/common): 23 | 24 | ``` 25 | npm i @ng-web-apis/common 26 | ``` 27 | 28 | Now install the package: 29 | 30 | ``` 31 | npm i @ng-web-apis/resize-observer 32 | ``` 33 | 34 | ## Usage 35 | 36 | 1. Import `ResizeObserverModule` to the module where you plan to use it. 37 | 2. Use `waResizeObserver` directive to observe an element: 38 | 39 | ```html 40 |
41 |

I'm being observed

42 |
43 | ``` 44 | 45 | Use `waResizeBox` to configure 46 | [ResizeObserver options](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe) 47 | 48 | **NOTE:** Keep in mind these are used one time in constructor so you cannot use binding, only strings. 49 | 50 | ## Service 51 | 52 | Alternatively you can use `Observable`-based `ResizeObserverService` and provide token `RESIZE_OPTION_BOX` manually: 53 | 54 | ```typescript 55 | @Component({ 56 | selector: 'my-component', 57 | providers: [ 58 | ResizeObserverService, 59 | { 60 | provide: RESIZE_OPTION_BOX, 61 | useValue: 'border-box', 62 | }, 63 | ], 64 | }) 65 | export class MyComponent { 66 | constructor(@Inject(ResizeObserverService) entries$: ResizeObserverService) { 67 | entries$.subscribe(entries => { 68 | // This will trigger when the component resizes 69 | // Don't forget to unsubscribe 70 | console.log(entries); 71 | }); 72 | } 73 | } 74 | ``` 75 | 76 | ## Browser support 77 | 78 | | [IE / Edge](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/)
| [iOS Safari](http://godban.github.io/browsers-support-badges/)
| 79 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 80 | | 79+ | 69+ | 64+ | 13.1+ | 13.4+ | 81 | 82 | > You can use [polyfill](https://www.npmjs.com/package/resize-observer-polyfill) to support older browsers 83 | 84 | ## Demo 85 | 86 | You can [try online demo here](https://ng-web-apis.github.io/resize-observer) 87 | 88 | ## See also 89 | 90 | Other [Web APIs for Angular](https://ng-web-apis.github.io/) by [@ng-web-apis](https://github.com/ng-web-apis) 91 | 92 | ## Open-source 93 | 94 | Do you also want to open-source something, but hate the collateral work? Check out this 95 | [Angular Open-source Library Starter](https://github.com/TinkoffCreditSystems/angular-open-source-starter) we’ve created 96 | for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code 97 | coverage and all that jazz. 98 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "demo": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "projects/demo", 10 | "sourceRoot": "projects/demo/src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "baseHref": "/resize-observer/", 17 | "deployUrl": "/resize-observer/", 18 | "outputPath": "dist/demo/browser", 19 | "index": "projects/demo/src/index.html", 20 | "main": "projects/demo/src/main.browser.ts", 21 | "polyfills": "projects/demo/src/polyfills.ts", 22 | "tsConfig": "tsconfig.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "projects/demo/src/assets/", 27 | "output": "./assets/" 28 | }, 29 | "projects/demo/src/favicon.ico" 30 | ], 31 | "styles": ["projects/demo/src/styles.css"], 32 | "showCircularDependencies": false, 33 | "vendorChunk": true, 34 | "extractLicenses": false, 35 | "buildOptimizer": false, 36 | "sourceMap": true, 37 | "optimization": false, 38 | "namedChunks": true, 39 | "scripts": [] 40 | }, 41 | "configurations": { 42 | "production": { 43 | "baseHref": "/resize-observer/", 44 | "deployUrl": "/resize-observer/", 45 | "optimization": true, 46 | "outputHashing": "all", 47 | "sourceMap": false, 48 | "namedChunks": false, 49 | "buildOptimizer": true, 50 | "statsJson": false, 51 | "progress": false, 52 | "budgets": [ 53 | { 54 | "type": "initial", 55 | "maximumWarning": "2mb", 56 | "maximumError": "5mb" 57 | } 58 | ] 59 | }, 60 | "development": { 61 | "baseHref": "/", 62 | "deployUrl": "/" 63 | } 64 | }, 65 | "defaultConfiguration": "production" 66 | }, 67 | "serve": { 68 | "builder": "@angular-devkit/build-angular:dev-server", 69 | "options": { 70 | "browserTarget": "demo:build" 71 | }, 72 | "configurations": { 73 | "production": { 74 | "browserTarget": "demo:build:production" 75 | } 76 | } 77 | }, 78 | "server": { 79 | "builder": "@angular-devkit/build-angular:server", 80 | "options": { 81 | "outputPath": "dist/demo/server", 82 | "main": "projects/demo/server.ts", 83 | "tsConfig": "projects/demo/tsconfig.server.json", 84 | "inlineStyleLanguage": "less" 85 | }, 86 | "configurations": { 87 | "production": { 88 | "outputHashing": "media", 89 | "fileReplacements": [ 90 | { 91 | "replace": "projects/demo/src/environments/environment.ts", 92 | "with": "projects/demo/src/environments/environment.prod.ts" 93 | } 94 | ] 95 | }, 96 | "development": { 97 | "optimization": false, 98 | "sourceMap": true, 99 | "extractLicenses": false 100 | } 101 | }, 102 | "defaultConfiguration": "production" 103 | }, 104 | "serve-ssr": { 105 | "builder": "@nguniversal/builders:ssr-dev-server", 106 | "configurations": { 107 | "development": { 108 | "browserTarget": "demo:build:development", 109 | "serverTarget": "demo:server:development" 110 | }, 111 | "production": { 112 | "browserTarget": "demo:build:production", 113 | "serverTarget": "demo:server:production" 114 | } 115 | }, 116 | "defaultConfiguration": "development" 117 | }, 118 | "prerender": { 119 | "builder": "@nguniversal/builders:prerender", 120 | "options": { 121 | "routes": ["/"] 122 | }, 123 | "configurations": { 124 | "production": { 125 | "browserTarget": "demo:build:production", 126 | "serverTarget": "demo:server:production" 127 | }, 128 | "development": { 129 | "browserTarget": "demo:build:development", 130 | "serverTarget": "demo:server:development" 131 | } 132 | }, 133 | "defaultConfiguration": "production" 134 | } 135 | } 136 | }, 137 | "resize-observer": { 138 | "projectType": "library", 139 | "root": "projects/resize-observer", 140 | "sourceRoot": "projects/resize-observer/src", 141 | "architect": { 142 | "build": { 143 | "builder": "@angular-devkit/build-angular:ng-packagr", 144 | "options": { 145 | "tsConfig": "projects/resize-observer/tsconfig.lib.json", 146 | "project": "projects/resize-observer/ng-package.json" 147 | } 148 | }, 149 | "test": { 150 | "builder": "@angular-devkit/build-angular:karma", 151 | "options": { 152 | "main": "projects/resize-observer/src/test.ts", 153 | "tsConfig": "projects/resize-observer/tsconfig.spec.json", 154 | "karmaConfig": "projects/resize-observer/karma.conf.js", 155 | "codeCoverage": true, 156 | "browsers": "ChromeHeadless" 157 | } 158 | } 159 | } 160 | } 161 | }, 162 | "defaultProject": "resize-observer" 163 | } 164 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']}; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ng-web-apis/resize-observer", 3 | "version": "2.0.0", 4 | "description": "A library for declarative use of Resize Observer API with Angular", 5 | "keywords": [ 6 | "angular", 7 | "ng", 8 | "resize", 9 | "observer" 10 | ], 11 | "homepage": "https://github.com/ng-web-apis/resize-observer#README", 12 | "bugs": "https://github.com/ng-web-apis/resize-observer/issues", 13 | "repository": "https://github.com/ng-web-apis/resize-observer", 14 | "license": "MIT", 15 | "author": { 16 | "name": "Vladimir Potekhin", 17 | "email": "vladimir.potekh@gmail.com" 18 | }, 19 | "contributors": [ 20 | "Roman Sedov <79601794011@ya.ru>", 21 | "Alexander Inkin " 22 | ], 23 | "scripts": { 24 | "postinstall": "husky install", 25 | "ng": "ng", 26 | "start": "ng serve", 27 | "start:ssr": "ng run demo:serve-ssr", 28 | "serve:ssr": "node dist/demo/server/main.js", 29 | "build:ssr": "ng build && ng run demo:server", 30 | "prerender": "ng run demo:prerender", 31 | "build": "ng build", 32 | "postbuild": "node scripts/postbuild.js", 33 | "test": "ng test", 34 | "stylelint": "stylelint '**/*.{less,css}'", 35 | "lint": "eslint --cache --cache-location node_modules/.cache/eslint", 36 | "typecheck": "tsc --noEmit --skipLibCheck", 37 | "release": "standard-version", 38 | "release:patch": "npm run release -- --release-as patch", 39 | "release:minor": "npm run release -- --release-as minor", 40 | "release:major": "npm run release -- --release-as major", 41 | "publish": "npm run build && npm publish ./dist/resize-observer" 42 | }, 43 | "lint-staged": { 44 | "*.{js,ts,html,md,less,json}": [ 45 | "npm run lint -- --fix", 46 | "prettier --write", 47 | "git add" 48 | ], 49 | "*.less": [ 50 | "stylelint --fix", 51 | "git add" 52 | ] 53 | }, 54 | "dependencies": { 55 | "@angular/common": "12.2.16", 56 | "@angular/compiler": "12.2.16", 57 | "@angular/core": "12.2.16", 58 | "@angular/forms": "12.2.16", 59 | "@angular/platform-browser": "12.2.16", 60 | "@angular/platform-browser-dynamic": "12.2.16", 61 | "@angular/platform-server": "12.2.16", 62 | "@angular/router": "12.2.16", 63 | "@ng-web-apis/common": "^2.0.0", 64 | "@ng-web-apis/universal": "^2.0.0", 65 | "@nguniversal/express-engine": "12.1.3", 66 | "core-js": "3.20.3", 67 | "rxjs": "7.5.2", 68 | "tslib": "2.3.1", 69 | "zone.js": "0.11.4" 70 | }, 71 | "devDependencies": { 72 | "@angular-devkit/build-angular": "12.2.16", 73 | "@angular-devkit/core": "12.2.16", 74 | "@angular/cli": "12.2.16", 75 | "@angular/compiler-cli": "12.2.16", 76 | "@angular/language-service": "12.2.16", 77 | "@commitlint/cli": "^11.0.0", 78 | "@commitlint/config-conventional": "^11.0.0", 79 | "@nguniversal/builders": "12.1.3", 80 | "@tinkoff/eslint-config": "1.36.1", 81 | "@tinkoff/eslint-config-angular": "1.36.1", 82 | "@tinkoff/prettier-config": "1.32.1", 83 | "@types/estree": "1.0.0", 84 | "@types/express": "4.17.13", 85 | "@types/jasmine": "3.10.3", 86 | "@types/jasminewd2": "2.0.10", 87 | "@types/node": "18.0.4", 88 | "coveralls": "3.1.1", 89 | "husky": "7.0.4", 90 | "jasmine-core": "4.0.0", 91 | "jasmine-spec-reporter": "7.0.0", 92 | "karma": "6.3.11", 93 | "karma-chrome-launcher": "3.1.0", 94 | "karma-coverage-istanbul-reporter": "3.0.3", 95 | "karma-jasmine": "4.0.1", 96 | "karma-jasmine-html-reporter": "1.7.0", 97 | "lint-staged": "12.2.1", 98 | "ng-packagr": "12.2.6", 99 | "prettier": "2.5.1", 100 | "standard-version": "9.3.2", 101 | "ts-node": "9.0.0", 102 | "tslint": "6.1.3", 103 | "typescript": "4.3.5" 104 | }, 105 | "engines": { 106 | "node": ">= 10", 107 | "npm": ">= 3" 108 | }, 109 | "standard-version": { 110 | "scripts": { 111 | "postbump": "node scripts/syncVersions.js && git add **/package.json" 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@tinkoff/prettier-config/angular'); 2 | 3 | module.exports = { 4 | ...base, 5 | singleAttributePerLine: true, 6 | overrides: [ 7 | ...base.overrides, 8 | { 9 | files: ['*.js', '*.ts'], 10 | options: {printWidth: 90, parser: 'typescript'}, 11 | }, 12 | { 13 | files: ['*.html'], 14 | options: {printWidth: 120, parser: 'angular'}, 15 | }, 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /projects/demo/.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | /tmp 4 | /out-tsc 5 | # Only exists if Bazel was run 6 | /bazel-out 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # profiling files 12 | chrome-profiler-events.json 13 | speed-measure-plugin.json 14 | 15 | # IDEs and editors 16 | /.idea 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # IDE - VSCode 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # misc 33 | /.sass-cache 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | npm-debug.log 38 | yarn-error.log 39 | testem.log 40 | /typings 41 | 42 | # System Files 43 | .DS_Store 44 | Thumbs.db 45 | -------------------------------------------------------------------------------- /projects/demo/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "demo": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/demo", 17 | "index": "src/index.html", 18 | "main": "src/main.browser.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.demo.json", 21 | "aot": false, 22 | "assets": [ 23 | { 24 | "glob": "**/*", 25 | "input": "projects/demo/src/assets/", 26 | "output": "./assets/" 27 | }, 28 | "src/favicon.ico" 29 | ], 30 | "styles": ["src/styles.css"], 31 | "scripts": [] 32 | }, 33 | "configurations": { 34 | "production": { 35 | "optimization": true, 36 | "outputHashing": "all", 37 | "sourceMap": false, 38 | "extractCss": true, 39 | "namedChunks": false, 40 | "aot": true, 41 | "extractLicenses": true, 42 | "vendorChunk": false, 43 | "buildOptimizer": true 44 | } 45 | } 46 | }, 47 | "serve": { 48 | "builder": "@angular-devkit/build-angular:dev-server", 49 | "options": { 50 | "browserTarget": "demo:build" 51 | }, 52 | "configurations": { 53 | "production": { 54 | "browserTarget": "demo:build:production" 55 | } 56 | } 57 | } 58 | } 59 | } 60 | }, 61 | "defaultProject": "demo" 62 | } 63 | -------------------------------------------------------------------------------- /projects/demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma'), 14 | ], 15 | client: { 16 | clearContext: false, // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/demo'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true, 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['ChromeHeadless'], 29 | singleRun: true, 30 | customLaunchers: { 31 | ChromeHeadless: { 32 | base: 'Chrome', 33 | flags: [ 34 | '--no-sandbox', 35 | '--headless', 36 | '--disable-gpu', 37 | '--remote-debugging-port=9222', 38 | ], 39 | }, 40 | }, 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /projects/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "2.0.0", 4 | "private": true, 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build" 9 | }, 10 | "dependencies": { 11 | "@angular/common": "12.2.16", 12 | "@angular/compiler": "12.2.16", 13 | "@angular/core": "12.2.16", 14 | "@angular/forms": "12.2.16", 15 | "@angular/platform-browser": "12.2.16", 16 | "@angular/platform-browser-dynamic": "12.2.16", 17 | "@angular/router": "12.2.16", 18 | "@ng-web-apis/common": "latest", 19 | "@ng-web-apis/resize-observer": "latest", 20 | "core-js": "3.20.3", 21 | "resize-observer": "^0.7.0", 22 | "rxjs": "7.5.2", 23 | "zone.js": "0.11.4" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "12.2.16", 27 | "@angular-devkit/core": "12.2.16", 28 | "@angular/cli": "12.2.16", 29 | "@angular/compiler-cli": "12.2.16", 30 | "@angular/language-service": "12.2.16", 31 | "@types/node": "18.0.4", 32 | "ts-node": "9.0.0", 33 | "tslint": "6.1.3", 34 | "typescript": "4.3.5" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/demo/server.ts: -------------------------------------------------------------------------------- 1 | import '@ng-web-apis/universal/mocks'; 2 | import 'zone.js/node'; 3 | 4 | import {APP_BASE_HREF} from '@angular/common'; 5 | import {provideLocation, provideUserAgent} from '@ng-web-apis/universal'; 6 | import {ngExpressEngine} from '@nguniversal/express-engine'; 7 | import * as express from 'express'; 8 | import {existsSync} from 'fs'; 9 | import {join} from 'path'; 10 | 11 | import {AppServerModule} from './src/main.server'; 12 | 13 | // The Express app is exported so that it can be used by serverless Functions. 14 | export function app(): express.Express { 15 | const server = express(); 16 | const distFolder = join(process.cwd(), 'dist/demo/browser'); 17 | const indexHtml = existsSync(join(distFolder, 'index.original.html')) 18 | ? 'index.original.html' 19 | : 'index'; 20 | 21 | // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) 22 | server.engine( 23 | 'html', 24 | ngExpressEngine({ 25 | bootstrap: AppServerModule, 26 | }), 27 | ); 28 | 29 | server.set('view engine', 'html'); 30 | server.set('views', distFolder); 31 | 32 | // Example Express Rest API endpoints 33 | // server.get('/api/**', (req, res) => { }); 34 | // Serve static files from /browser 35 | server.get( 36 | '*.*', 37 | express.static(distFolder, { 38 | maxAge: '1y', 39 | }), 40 | ); 41 | 42 | // All regular routes use the Universal engine 43 | server.get('*', (req, res) => { 44 | res.render(indexHtml, { 45 | req, 46 | providers: [ 47 | {provide: APP_BASE_HREF, useValue: req.baseUrl}, 48 | provideLocation(req), 49 | provideUserAgent(req), 50 | ], 51 | }); 52 | }); 53 | 54 | return server; 55 | } 56 | 57 | function run(): void { 58 | const port = process.env.PORT || 4000; 59 | const server = app(); 60 | 61 | server.listen(port, () => { 62 | console.info(`Node Express server listening on http://localhost:${port}`); 63 | }); 64 | } 65 | 66 | // Webpack will replace 'require' with '__webpack_require__' 67 | // '__non_webpack_require__' is a proxy to Node 'require' 68 | // The below code is to ensure that the server is run only when not requiring the bundle. 69 | declare const __non_webpack_require__: NodeRequire; 70 | const mainModule = __non_webpack_require__.main; 71 | const moduleFilename = mainModule?.filename || ''; 72 | 73 | if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { 74 | run(); 75 | } 76 | 77 | export * from './src/main.server'; 78 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.browser.module.ts: -------------------------------------------------------------------------------- 1 | import { 2 | APP_BASE_HREF, 3 | CommonModule, 4 | LocationStrategy, 5 | PathLocationStrategy, 6 | } from '@angular/common'; 7 | import {NgModule} from '@angular/core'; 8 | import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 9 | import {BrowserModule} from '@angular/platform-browser'; 10 | import {ResizeObserverModule} from 'projects/resize-observer/src/public-api'; 11 | import {AppComponent} from './app.component'; 12 | import {AppRoutingModule} from './app.routes'; 13 | 14 | @NgModule({ 15 | bootstrap: [AppComponent], 16 | imports: [ 17 | CommonModule, 18 | FormsModule, 19 | BrowserModule.withServerTransition({appId: 'demo'}), 20 | AppRoutingModule, 21 | ResizeObserverModule, 22 | ReactiveFormsModule, 23 | ], 24 | declarations: [AppComponent], 25 | providers: [ 26 | { 27 | provide: LocationStrategy, 28 | useClass: PathLocationStrategy, 29 | }, 30 | { 31 | provide: APP_BASE_HREF, 32 | useValue: '', 33 | }, 34 | ], 35 | }) 36 | export class AppBrowserModule {} 37 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

9 | Resizable box 10 |

11 | 22 |
23 | 24 | Your browser does not support Resize Observer API 25 | 26 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.less: -------------------------------------------------------------------------------- 1 | :host { 2 | perspective: 150vw; 3 | user-select: none; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .width-slider { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | } 13 | 14 | .slider { 15 | margin: 10px; 16 | } 17 | 18 | .wrapper { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | position: relative; 23 | width: 80vw; 24 | box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2); 25 | } 26 | 27 | .element { 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | text-align: center; 32 | padding: 10px; 33 | width: 80%; 34 | min-width: 124px; 35 | height: 200px; 36 | transition: background 0.1s; 37 | 38 | &[data-ratio='1'] { 39 | background: #e885eb; 40 | } 41 | 42 | &[data-ratio='2'] { 43 | background: #c685eb; 44 | } 45 | 46 | &[data-ratio='3'] { 47 | background: #ac85eb; 48 | } 49 | 50 | &[data-ratio='4'] { 51 | background: #9885eb; 52 | } 53 | 54 | &[data-ratio='5'] { 55 | background: #8591eb; 56 | } 57 | 58 | &[data-ratio='6'] { 59 | background: #85a0eb; 60 | } 61 | 62 | &[data-ratio='7'] { 63 | background: #84aeeb; 64 | } 65 | 66 | &[data-ratio='8'] { 67 | background: #83beeb; 68 | } 69 | 70 | &[data-ratio='9'] { 71 | background: #86d2eb; 72 | } 73 | 74 | &[data-ratio='10'] { 75 | background: #87ddeb; 76 | } 77 | 78 | &[data-ratio='11'] { 79 | background: #8ae5eb; 80 | } 81 | 82 | &[data-ratio='12'] { 83 | background: #8bebdf; 84 | } 85 | 86 | &[data-ratio='13'] { 87 | background: #83ebc8; 88 | } 89 | 90 | &[data-ratio='14'] { 91 | background: #6beb99; 92 | } 93 | 94 | &[data-ratio='15'] { 95 | background: #4ceb60; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; 2 | import {RESIZE_OBSERVER_SUPPORT} from 'projects/resize-observer/src/public-api'; 3 | 4 | @Component({ 5 | selector: 'main', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.less'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class AppComponent { 11 | ratio = 0; 12 | widthPercent = 50; 13 | 14 | constructor(@Inject(RESIZE_OBSERVER_SUPPORT) readonly support: boolean) {} 15 | 16 | onResize(entry: ResizeObserverEntry[]) { 17 | this.ratio = Math.round(entry[0].contentRect.width / 110); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {RouterModule} from '@angular/router'; 3 | import {AppComponent} from './app.component'; 4 | 5 | export const appRoutes = [ 6 | { 7 | path: '**', 8 | component: AppComponent, 9 | }, 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forRoot(appRoutes)], 14 | exports: [RouterModule], 15 | }) 16 | export class AppRoutingModule {} 17 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.server.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ServerModule} from '@angular/platform-server'; 3 | 4 | import {AppBrowserModule} from './app.browser.module'; 5 | import {AppComponent} from './app.component'; 6 | 7 | @NgModule({ 8 | imports: [AppBrowserModule, ServerModule], 9 | bootstrap: [AppComponent], 10 | }) 11 | export class AppServerModule {} 12 | -------------------------------------------------------------------------------- /projects/demo/src/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /projects/demo/src/assets/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/android-chrome-512x512.png -------------------------------------------------------------------------------- /projects/demo/src/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /projects/demo/src/assets/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2b5797 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/demo/src/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/favicon-16x16.png -------------------------------------------------------------------------------- /projects/demo/src/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/favicon-32x32.png -------------------------------------------------------------------------------- /projects/demo/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/favicon.ico -------------------------------------------------------------------------------- /projects/demo/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /projects/demo/src/assets/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/mstile-144x144.png -------------------------------------------------------------------------------- /projects/demo/src/assets/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/mstile-150x150.png -------------------------------------------------------------------------------- /projects/demo/src/assets/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/mstile-310x150.png -------------------------------------------------------------------------------- /projects/demo/src/assets/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/mstile-310x310.png -------------------------------------------------------------------------------- /projects/demo/src/assets/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-web-apis/resize-observer/2d2780a4e494f3af182abac6e4fa1a9584a22fd4/projects/demo/src/assets/mstile-70x70.png -------------------------------------------------------------------------------- /projects/demo/src/assets/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /projects/demo/src/assets/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/resize-observer/assets/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/resize-observer/assets/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /projects/demo/src/assets/web-api.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Resize Observer API for Angular 4 | 9 | 15 | 21 | 22 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 |
38 | 46 |
47 |

Resize Observer API for Angular

48 | Part of 49 | 50 | Web APIs logo 58 | Web APIs for Angular 59 | 60 |
61 |
62 |
loading
63 |
64 | Get it here: 65 | GitHub | 66 | NPM 67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /projects/demo/src/main.browser.ts: -------------------------------------------------------------------------------- 1 | import './polyfills'; 2 | 3 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 4 | import {AppBrowserModule} from './app/app.browser.module'; 5 | 6 | platformBrowserDynamic() 7 | .bootstrapModule(AppBrowserModule) 8 | .then(ref => { 9 | const windowRef: any = window; 10 | 11 | // Ensure Angular destroys itself on hot reloads for Stackblitz 12 | if (windowRef['ngRef']) { 13 | windowRef['ngRef'].destroy(); 14 | } 15 | 16 | windowRef['ngRef'] = ref; 17 | }) 18 | .catch(err => console.error(err)); 19 | -------------------------------------------------------------------------------- /projects/demo/src/main.server.ts: -------------------------------------------------------------------------------- 1 | export {AppServerModule} from './app/app.server.module'; 2 | -------------------------------------------------------------------------------- /projects/demo/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js'; 2 | -------------------------------------------------------------------------------- /projects/demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /* Base demo styles */ 2 | body, 3 | html { 4 | display: flex; 5 | flex-direction: column; 6 | margin: 0; 7 | height: 100%; 8 | font-family: Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 9 | 'Lucida Grande', sans-serif; 10 | color: #444; 11 | } 12 | 13 | header { 14 | display: flex; 15 | width: 100%; 16 | max-width: 800px; 17 | margin: 0 auto; 18 | padding: 40px 10px; 19 | box-sizing: border-box; 20 | border-bottom: 1px solid gainsboro; 21 | } 22 | 23 | main { 24 | flex: 1; 25 | display: flex; 26 | justify-content: center; 27 | padding: 40px 0; 28 | } 29 | 30 | footer { 31 | padding: 16px; 32 | font-size: 12px; 33 | border-top: 1px solid gainsboro; 34 | text-align: center; 35 | } 36 | 37 | a { 38 | color: #1976D2; 39 | text-decoration: none; 40 | } 41 | 42 | .logo { 43 | margin-right: 20px; 44 | } 45 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "typeRoots": [], 6 | "paths": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.server.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | }, 6 | "angularCompilerOptions": { 7 | "entryModule": "src/app/app.server.module#AppServerModule" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/resize-observer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vladimir Potekhin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /projects/resize-observer/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma'), 14 | ], 15 | client: { 16 | clearContext: false, // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/resize-observer'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true, 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['ChromeHeadless'], 29 | singleRun: true, 30 | customLaunchers: { 31 | ChromeHeadless: { 32 | base: 'Chrome', 33 | flags: [ 34 | '--no-sandbox', 35 | '--headless', 36 | '--disable-gpu', 37 | '--disable-web-security', 38 | '--remote-debugging-port=9222', 39 | ], 40 | }, 41 | }, 42 | }); 43 | }; 44 | -------------------------------------------------------------------------------- /projects/resize-observer/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/resize-observer", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/resize-observer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ng-web-apis/resize-observer", 3 | "version": "2.0.0", 4 | "description": "A library for declarative use of Resize Observer API with Angular", 5 | "keywords": [ 6 | "angular", 7 | "ng", 8 | "resize", 9 | "observer" 10 | ], 11 | "homepage": "https://github.com/ng-web-apis/resize-observer#README", 12 | "bugs": "https://github.com/ng-web-apis/resize-observer/issues", 13 | "repository": "https://github.com/ng-web-apis/resize-observer", 14 | "license": "MIT", 15 | "author": { 16 | "name": "Vladimir Potekhin", 17 | "email": "vladimir.potekh@gmail.com" 18 | }, 19 | "contributors": [ 20 | "Roman Sedov <79601794011@ya.ru>", 21 | "Alexander Inkin " 22 | ], 23 | "peerDependencies": { 24 | "@angular/core": ">=12.0.0", 25 | "@ng-web-apis/common": ">=2.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/resize-observer/src/directives/resize-observer.directive.ts: -------------------------------------------------------------------------------- 1 | import {Attribute, Directive, ElementRef, Inject, Output} from '@angular/core'; 2 | import {Observable} from 'rxjs'; 3 | 4 | import {ResizeObserverService} from '../services/resize-observer.service'; 5 | import {RESIZE_OPTION_BOX, RESIZE_OPTION_BOX_DEFAULT} from '../tokens/resize-option-box'; 6 | 7 | // TODO switch to Attribute once https://github.com/angular/angular/issues/36479 is fixed 8 | export function boxExtractor({ 9 | nativeElement, 10 | }: ElementRef): ResizeObserverBoxOptions { 11 | const attribute = nativeElement.getAttribute( 12 | 'waResizeBox', 13 | ) as ResizeObserverBoxOptions; 14 | 15 | return boxFactory(attribute); 16 | } 17 | 18 | export function boxFactory( 19 | box: ResizeObserverBoxOptions | null, 20 | ): ResizeObserverBoxOptions { 21 | return box || RESIZE_OPTION_BOX_DEFAULT; 22 | } 23 | 24 | @Directive({ 25 | selector: '[waResizeObserver]', 26 | providers: [ 27 | ResizeObserverService, 28 | { 29 | provide: RESIZE_OPTION_BOX, 30 | deps: [ElementRef], 31 | useFactory: boxExtractor, 32 | }, 33 | ], 34 | }) 35 | export class ResizeObserverDirective { 36 | @Output() 37 | readonly waResizeObserver: Observable; 38 | 39 | constructor( 40 | @Inject(ResizeObserverService) 41 | entries$: Observable, 42 | @Attribute('waResizeBox') _box: ResizeObserverBoxOptions, 43 | ) { 44 | this.waResizeObserver = entries$; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/resize-observer/src/directives/tests/resize-observer.spec.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {ComponentFixture, TestBed} from '@angular/core/testing'; 3 | import {ResizeObserverModule} from '../../module'; 4 | 5 | describe('ResizeObserverDirective', () => { 6 | @Component({ 7 | template: ` 8 |
9 |

14 | I'm being observed 15 |

16 |
17 | `, 18 | }) 19 | class TestComponent { 20 | onResize = jasmine.createSpy('onResize'); 21 | observe = true; 22 | } 23 | 24 | let fixture: ComponentFixture; 25 | let testComponent: TestComponent; 26 | 27 | beforeEach(() => { 28 | TestBed.configureTestingModule({ 29 | imports: [ResizeObserverModule], 30 | declarations: [TestComponent], 31 | }); 32 | 33 | fixture = TestBed.createComponent(TestComponent); 34 | testComponent = fixture.componentInstance; 35 | fixture.detectChanges(); 36 | testComponent.onResize.calls.reset(); 37 | }); 38 | 39 | it('Emits resizes', done => { 40 | document.querySelector('#resize_elem')!.scrollTop = 350; 41 | fixture.detectChanges(); 42 | 43 | setTimeout(() => { 44 | expect(testComponent.onResize).toHaveBeenCalled(); 45 | testComponent.observe = false; 46 | fixture.detectChanges(); 47 | done(); 48 | }, 100); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /projects/resize-observer/src/module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ResizeObserverDirective} from './directives/resize-observer.directive'; 3 | 4 | @NgModule({ 5 | declarations: [ResizeObserverDirective], 6 | exports: [ResizeObserverDirective], 7 | }) 8 | export class ResizeObserverModule {} 9 | -------------------------------------------------------------------------------- /projects/resize-observer/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Public API Surface of @ng-web-apis/resize-observer 3 | */ 4 | 5 | /* Directives */ 6 | export * from './directives/resize-observer.directive'; 7 | 8 | /* Modules */ 9 | export * from './module'; 10 | 11 | /* Services */ 12 | export * from './services/resize-observer.service'; 13 | 14 | /* Tokens */ 15 | export * from './tokens/resize-option-box'; 16 | export * from './tokens/support'; 17 | -------------------------------------------------------------------------------- /projects/resize-observer/src/services/resize-observer.service.ts: -------------------------------------------------------------------------------- 1 | import {ElementRef, Inject, Injectable, NgZone} from '@angular/core'; 2 | import {Observable} from 'rxjs'; 3 | import {share} from 'rxjs/operators'; 4 | 5 | import {RESIZE_OPTION_BOX} from '../tokens/resize-option-box'; 6 | import {RESIZE_OBSERVER_SUPPORT} from '../tokens/support'; 7 | 8 | @Injectable() 9 | export class ResizeObserverService extends Observable { 10 | constructor( 11 | @Inject(ElementRef) {nativeElement}: ElementRef, 12 | @Inject(NgZone) ngZone: NgZone, 13 | @Inject(RESIZE_OBSERVER_SUPPORT) support: boolean, 14 | @Inject(RESIZE_OPTION_BOX) box: ResizeObserverBoxOptions, 15 | ) { 16 | let observer: ResizeObserver; 17 | 18 | super(subscriber => { 19 | if (!support) { 20 | subscriber.error('ResizeObserver is not supported in your browser'); 21 | 22 | return; 23 | } 24 | 25 | observer = new ResizeObserver(entries => { 26 | ngZone.run(() => { 27 | subscriber.next(entries); 28 | }); 29 | }); 30 | observer.observe(nativeElement, {box}); 31 | 32 | return () => { 33 | observer.disconnect(); 34 | }; 35 | }); 36 | 37 | return this.pipe(share()); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/resize-observer/src/services/tests/resize-observer.service.spec.ts: -------------------------------------------------------------------------------- 1 | import {ElementRef} from '@angular/core'; 2 | import {TestBed} from '@angular/core/testing'; 3 | import {catchError} from 'rxjs/operators'; 4 | 5 | import {RESIZE_OBSERVER_SUPPORT} from '../../tokens/support'; 6 | import {ResizeObserverService} from '../resize-observer.service'; 7 | 8 | describe('Resize Observer token', () => { 9 | let service: ResizeObserverService; 10 | 11 | beforeEach(() => { 12 | TestBed.configureTestingModule({ 13 | providers: [ 14 | ResizeObserverService, 15 | { 16 | provide: ElementRef, 17 | useValue: { 18 | nativeElement: document.createElement('DIV'), 19 | }, 20 | }, 21 | ], 22 | }); 23 | 24 | service = TestBed.inject(ResizeObserverService).pipe( 25 | catchError((_err, caught) => caught), 26 | ); 27 | }); 28 | 29 | it('defined', () => { 30 | expect(service).toBeDefined(); 31 | }); 32 | 33 | it('disconnect', () => { 34 | service.subscribe().unsubscribe(); 35 | expect(service).toBeDefined(); 36 | }); 37 | }); 38 | 39 | describe('throws when not supported', () => { 40 | it('Throws an error if ResizeObserver is not supported', done => { 41 | TestBed.configureTestingModule({ 42 | providers: [ 43 | ResizeObserverService, 44 | { 45 | provide: ElementRef, 46 | useValue: { 47 | nativeElement: document.createElement('DIV'), 48 | }, 49 | }, 50 | { 51 | provide: RESIZE_OBSERVER_SUPPORT, 52 | useValue: false, 53 | }, 54 | ], 55 | }); 56 | 57 | const service$: ResizeObserverService = TestBed.get(ResizeObserverService); 58 | 59 | service$.subscribe({ 60 | error: err => { 61 | expect(err).toBe('ResizeObserver is not supported in your browser'); 62 | 63 | done(); 64 | }, 65 | }); 66 | }); 67 | }); 68 | -------------------------------------------------------------------------------- /projects/resize-observer/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | import 'zone.js'; 3 | import 'zone.js/testing'; 4 | 5 | import {getTestBed} from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting, 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: any; 12 | 13 | // First, initialize the Angular testing environment. 14 | getTestBed().initTestEnvironment( 15 | BrowserDynamicTestingModule, 16 | platformBrowserDynamicTesting(), 17 | ); 18 | 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | 22 | // And load the modules. 23 | context.keys().map(context); 24 | -------------------------------------------------------------------------------- /projects/resize-observer/src/tokens/resize-option-box.ts: -------------------------------------------------------------------------------- 1 | import {InjectionToken} from '@angular/core'; 2 | 3 | export const RESIZE_OPTION_BOX_DEFAULT = 'content-box'; 4 | 5 | export const RESIZE_OPTION_BOX = new InjectionToken( 6 | 'Box model to observe changes', 7 | { 8 | providedIn: 'root', 9 | factory: () => RESIZE_OPTION_BOX_DEFAULT, 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /projects/resize-observer/src/tokens/support.ts: -------------------------------------------------------------------------------- 1 | import {inject, InjectionToken} from '@angular/core'; 2 | import {WINDOW} from '@ng-web-apis/common'; 3 | 4 | export const RESIZE_OBSERVER_SUPPORT = new InjectionToken( 5 | 'Resize Observer API support', 6 | { 7 | providedIn: 'root', 8 | factory: () => !!(inject(WINDOW) as any).ResizeObserver, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /projects/resize-observer/src/tokens/tests/support.spec.ts: -------------------------------------------------------------------------------- 1 | import {TestBed} from '@angular/core/testing'; 2 | 3 | import {RESIZE_OBSERVER_SUPPORT} from '../support'; 4 | 5 | describe('RESIZE_OBSERVER_SUPPORT', () => { 6 | it('true in modern browsers', () => { 7 | TestBed.configureTestingModule({}); 8 | 9 | expect(TestBed.inject(RESIZE_OBSERVER_SUPPORT)).toBe(true); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/resize-observer/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "declaration": true, 7 | "inlineSources": true, 8 | "lib": ["dom", "es2018"] 9 | }, 10 | "angularCompilerOptions": { 11 | "annotateForClosureCompiler": true, 12 | "skipTemplateCodegen": true, 13 | "strictMetadataEmit": true, 14 | "fullTemplateTypeCheck": true, 15 | "strictInjectionParameters": true, 16 | "enableResourceInlining": true, 17 | "enableIvy": true, 18 | "compilationMode": "partial" 19 | }, 20 | "exclude": ["src/test.ts", "**/*.spec.ts"] 21 | } 22 | -------------------------------------------------------------------------------- /projects/resize-observer/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /scripts/postbuild.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | const DIST_LIB_PATH = 'dist/resize-observer/'; 4 | const README_PATH = 'README.md'; 5 | const PATH_TO_README = DIST_LIB_PATH + README_PATH; 6 | 7 | copyExtraFiles(); 8 | 9 | function copyExtraFiles() { 10 | if (!fs.existsSync(README_PATH)) { 11 | throw new Error('Requested files do not exit'); 12 | } else { 13 | copyReadmeIntoDistFolder(README_PATH, PATH_TO_README); 14 | } 15 | } 16 | 17 | function copyReadmeIntoDistFolder(srcPath, toPath) { 18 | const fileBody = fs.readFileSync(srcPath).toString(); 19 | const withoutLogos = fileBody 20 | .replace('![ng-web-apis logo](projects/demo/src/assets/logo.svg) ', '') 21 | .replace(' ', ''); 22 | 23 | fs.writeFileSync(toPath, withoutLogos); 24 | } 25 | -------------------------------------------------------------------------------- /scripts/syncVersions.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const glob = require('glob'); 3 | const JSON_INDENTATION_LEVEL = 4; 4 | const {version} = require('../package.json'); 5 | 6 | // Sync libraries package.json versions with main package.json 7 | syncVersions('projects'); 8 | 9 | function syncVersions(root) { 10 | glob(root + '/**/package.json', (_, files) => { 11 | files.forEach(file => { 12 | const packageJson = JSON.parse(fs.readFileSync(file)); 13 | 14 | fs.writeFileSync( 15 | file, 16 | JSON.stringify( 17 | { 18 | ...packageJson, 19 | version, 20 | }, 21 | null, 22 | JSON_INDENTATION_LEVEL, 23 | ), 24 | ); 25 | }); 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.eslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "baseUrl": ".", 6 | "strict": false, 7 | "incremental": true 8 | }, 9 | "include": ["projects", "scripts"], 10 | "exclude": ["**/node_modules", "**/schematics/**", "**/.*/", "*.js"] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "strict": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "noImplicitReturns": true, 16 | "noUnusedParameters": true, 17 | "noUnusedLocals": true, 18 | "target": "es5", 19 | "typeRoots": ["node_modules/@types"], 20 | "lib": ["es2018", "dom"], 21 | "paths": { 22 | "@ng-web-apis/resize-observer": [ 23 | "projects/resize-observer/src/public-api" 24 | ] 25 | } 26 | } 27 | } 28 | --------------------------------------------------------------------------------