diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 4efce83..9d518b2 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -2,7 +2,7 @@ version: 2 updates: - package-ecosystem: npm directory: / - target-branch: main + target-branch: master schedule: { interval: weekly } groups: angular: { patterns: ["@angular/*", "angular-eslint", "@angular-eslint/*", "ng-packagr", "typescript"] } @@ -24,6 +24,8 @@ updates: update-types: ["version-update:semver-major"] - dependency-name: "typescript-eslint" update-types: ["version-update:semver-major"] + - dependency-name: "plotly.js-dist" + update-types: ["version-update:semver-major"] - package-ecosystem: npm directory: / target-branch: v20 @@ -48,6 +50,10 @@ updates: update-types: ["version-update:semver-major"] - dependency-name: "typescript-eslint" update-types: ["version-update:semver-major"] + - dependency-name: "plotly.js-dist" + update-types: ["version-update:semver-major"] + - dependency-name: "zone.js" + update-types: ["version-update:semver-minor"] - package-ecosystem: npm directory: / target-branch: v21 @@ -72,3 +78,5 @@ updates: update-types: ["version-update:semver-major"] - dependency-name: "typescript-eslint" update-types: ["version-update:semver-major"] + - dependency-name: "plotly.js-dist" + update-types: ["version-update:semver-major"] diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d61e85a..6c15d3f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,10 +1,11 @@ name: CI on: + workflow_dispatch: pull_request: - branches: [main, v20, v21, "v*"] + branches: [master, v20, v21, "v*"] push: - branches: [main, v20, v21, "v*"] + branches: [master, v20, v21, "v*"] permissions: contents: read @@ -18,8 +19,8 @@ jobs: runs-on: ubuntu-latest timeout-minutes: 20 steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - uses: actions/checkout@v7 + - uses: actions/setup-node@v7 with: node-version: 24.15.0 cache: npm @@ -30,7 +31,7 @@ jobs: - run: npm audit --omit=dev --audit-level=high - run: npm run verify:package - run: npm run verify:consumer - - uses: actions/upload-artifact@v4 + - uses: actions/upload-artifact@v7 with: name: angular-plotly-package-${{ github.sha }} path: dist/plotly diff --git a/CHANGELOG.md b/CHANGELOG.md index 4092f34..fc1a224 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [21.0.1] - 2026-08-20 +### Fixed +- Added `[innerStyle]` as the preferred plot container styling input while + retaining `[style]` as a deprecated compatibility alias. + + ## [21.0.0] - 2026-08-20 ### Changed - Added Angular 21 support using the official Angular 20→21 migrations. diff --git a/MAINTENANCE.md b/MAINTENANCE.md index a241aa7..29a8c10 100644 --- a/MAINTENANCE.md +++ b/MAINTENANCE.md @@ -1,13 +1,13 @@ # Maintenance and release policy -The package major identifies its supported Angular major. `main` tracks the +The package major identifies its supported Angular major. `master` tracks the latest Angular major; older supported majors use `vN` maintenance branches. | Package line | Angular | Branch | npm tag | Status | | --- | --- | --- | --- | --- | | 20.x | 20.x | `v20` | `angular20` | LTS through 2026-11-28 | | 21.x | 21.x | `v21` | `angular21` | LTS | -| 22.x | 22.x | `main` | `angular22`, `latest` | Active | +| 22.x | 22.x | `master` | `angular22`, `latest` | Active | ## Changes and forward ports @@ -16,7 +16,7 @@ commit in ascending major order with `git cherry-pick -x`, one linked pull request per branch. Do not forward-port Angular migrations, dependency-major changes, package versions, or release metadata. -`main` has no duplicate current-major branch. Before upgrading `main` to a new +`master` has no duplicate current-major branch. Before upgrading `master` to a new Angular major, create `vN` from its final commit and protect that branch. ## Releases diff --git a/README.md b/README.md index e79b835..5d09003 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,7 @@ > A [plotly.js](https://github.com/plotly/plotly.js) Angular component from > [Plotly](https://plot.ly/). -[![CircleCI](https://circleci.com/gh/plotly/angular-plotly.js.svg?style=svg)](https://circleci.com/gh/plotly/angular-plotly.js) -[![Coverage Status](https://coveralls.io/repos/github/plotly/angular-plotly.js/badge.svg?branch=master&i=1)](https://coveralls.io/github/plotly/angular-plotly.js?branch=master&i=1) +[![CI](https://github.com/plotly/angular-plotly.js/actions/workflows/ci.yml/badge.svg)](https://github.com/plotly/angular-plotly.js/actions/workflows/ci.yml)
@@ -22,7 +21,7 @@ major. Install the matching package line: | angular-plotly.js | Angular | Branch | Support | | --- | --- | --- | --- | -| 22.x | 22.x | `main` | Active | +| 22.x | 22.x | `master` | Active | | 21.x | 21.x | `v21` | LTS | | 20.x | 20.x | `v20` | LTS through 2026-11-28 | @@ -123,18 +122,19 @@ For a full description of Plotly chart types and attributes see the following re | `(error)` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects | | `[divId]` | `string` | `undefined` | id assigned to the `
` into which the plot is rendered. | | `[className]` | `string` | `undefined` | applied to the `
` into which the plot is rendered | -| `[style]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[innerStyle]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[style]` | `Object` | `undefined` | deprecated compatibility alias for `[innerStyle]` | | `[debug]` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging | | `[useResizeHandler]` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler | -**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ +**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `innerStyle` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ ```typescript @Component({ selector: 'plotly-example', template: ` + [useResizeHandler]="true" [innerStyle]="{position: 'relative', width: '100%', height: '100%'}"> `, }) export class PlotlyExampleComponent { diff --git a/package-lock.json b/package-lock.json index 1961ab9..69a964c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "dependencies": { "@angular/common": "21.2.21", @@ -15,7 +15,7 @@ "plotly.js-dist": "2.35.3", "rxjs": "7.8.2", "tslib": "2.8.1", - "zone.js": "0.15.1" + "zone.js": "0.16.2" }, "devDependencies": { "@angular/build": "21.2.21", @@ -311,6 +311,24 @@ } } }, + "node_modules/@angular-devkit/architect/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-devkit/architect/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -324,6 +342,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@angular-devkit/architect/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-devkit/architect/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -381,6 +415,24 @@ } } }, + "node_modules/@angular-devkit/schematics/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-devkit/schematics/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -394,6 +446,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@angular-devkit/schematics/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-devkit/schematics/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -448,6 +516,24 @@ } } }, + "node_modules/@angular-eslint/builder/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-eslint/builder/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -461,6 +547,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@angular-eslint/builder/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-eslint/builder/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -562,6 +664,24 @@ } } }, + "node_modules/@angular-eslint/schematics/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-eslint/schematics/node_modules/ignore": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", @@ -585,6 +705,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@angular-eslint/schematics/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular-eslint/schematics/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -1294,6 +1430,24 @@ } } }, + "node_modules/@angular/cli/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular/cli/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -1307,6 +1461,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@angular/cli/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular/cli/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -4889,6 +5059,24 @@ } } }, + "node_modules/@schematics/angular/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@schematics/angular/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -4902,6 +5090,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@schematics/angular/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@schematics/angular/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -5784,6 +5988,24 @@ } } }, + "node_modules/angular-eslint/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/angular-eslint/node_modules/picomatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", @@ -5797,6 +6019,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/angular-eslint/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/angular-eslint/node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -12689,9 +12927,10 @@ } }, "node_modules/zone.js": { - "version": "0.15.1", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz", - "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==" + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.16.2.tgz", + "integrity": "sha512-Eky7p2Z1Ig3NnbfodSPoARCjKBSTFMnE/ACsP1L/XJEfY4SdOFce19BsUCWVwL6K5ABZFy5J3bjcMWffX+YM3Q==", + "license": "MIT" } } } diff --git a/package.json b/package.json index 9a98aec..c80f8a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "scripts": { "ng": "ng", @@ -21,7 +21,7 @@ "plotly.js-dist": "2.35.3", "rxjs": "7.8.2", "tslib": "2.8.1", - "zone.js": "0.15.1" + "zone.js": "0.16.2" }, "devDependencies": { "@angular/build": "21.2.21", diff --git a/projects/plotly/package.json b/projects/plotly/package.json index 0f09c4a..7d099fe 100644 --- a/projects/plotly/package.json +++ b/projects/plotly/package.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "peerDependencies": { "@angular/common": ">=21.0.0 <22.0.0", diff --git a/projects/plotly/src/lib/plotly.component.spec.ts b/projects/plotly/src/lib/plotly.component.spec.ts index 483b1f6..52568ef 100644 --- a/projects/plotly/src/lib/plotly.component.spec.ts +++ b/projects/plotly/src/lib/plotly.component.spec.ts @@ -41,12 +41,25 @@ describe('PlotlyComponent', () => { expect(component.plotEl.nativeElement).toBeDefined(); }); - it('should receive the style from the property', () => { + it('should receive the inner style from the property', () => { + componentRef.setInput('innerStyle', { 'background-color': 'red' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); + }); + + it('should retain style as a deprecated compatibility alias', () => { componentRef.setInput('style', { 'background-color': 'red' }); fixture.detectChanges(); expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); }); + it('should prefer innerStyle when both style inputs are provided', () => { + componentRef.setInput('style', { 'background-color': 'red' }); + componentRef.setInput('innerStyle', { 'background-color': 'blue' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('blue'); + }); + it('should add the id in the #plotEl', () => { expect(component.plotEl.nativeElement.id).toBe(''); componentRef.setInput('divId', 'some-id'); diff --git a/projects/plotly/src/lib/plotly.component.ts b/projects/plotly/src/lib/plotly.component.ts index 5deb195..232b23d 100644 --- a/projects/plotly/src/lib/plotly.component.ts +++ b/projects/plotly/src/lib/plotly.component.ts @@ -29,7 +29,7 @@ import { Plotly } from './plotly.interface'; selector: 'plotly-plot', standalone: true, imports: [CommonModule], - template: `
+ template: `
`, providers: [PlotlyService], @@ -49,6 +49,10 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { layout = input>(); config = input>(); frames = input[]>(); + innerStyle = input<{ [key: string]: string }>(); + /** + * @deprecated Use `innerStyle` to avoid conflicting with Angular's global style binding. + */ style = input<{ [key: string]: string }>(); divId = input();