feat: add innerStyle input without breaking style compatibility (#289)

Adds innerStyle as the preferred input while retaining style as a deprecated compatibility alias. Updates documentation, demo usage, and tests.\n\nCloses #287.

(cherry picked from commit f0d03d8)
(cherry picked from commit 6a350f2)

Author: bzh2610

README.md

@@ -122,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 `<div>` into which the plot is rendered.                                                                                                           |
 | `[className]`              | `string`                     | `undefined`                                       | applied to the `<div>` into which the plot is rendered                                                                                                                |
-| `[style]`                  | `Object`                     | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered                                                                                                             |
+| `[innerStyle]`             | `Object`                     | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` 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: `
     <plotly-plot [data]="graph.data" [layout]="graph.layout"
-       [useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}">
+       [useResizeHandler]="true" [innerStyle]="{position: 'relative', width: '100%', height: '100%'}">
     </plotly-plot>`,
 })
 export class PlotlyExampleComponent {

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');

projects/plotly/src/lib/plotly.component.ts

@@ -29,7 +29,7 @@ import { Plotly } from './plotly.interface';
     selector: 'plotly-plot',
     standalone: true,
     imports: [CommonModule],
-    template: `<div #plot [attr.id]="divId()" [ngClass]="getClassName()" [ngStyle]="style()">
+    template: `<div #plot [attr.id]="divId()" [ngClass]="getClassName()" [ngStyle]="innerStyle() ?? style()">
       <ng-content></ng-content>
     </div>`,
     providers: [PlotlyService],
@@ -49,6 +49,10 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     layout = input<Partial<Plotly.Layout>>();
     config = input<Partial<Plotly.Config>>();
     frames = input<Partial<Plotly.Config>[]>();
+    innerStyle = input<{ [key: string]: string }>();
+    /**
+     * @deprecated Use `innerStyle` to avoid conflicting with Angular's global style binding.
+     */
     style = input<{ [key: string]: string }>();
 
     divId = input<string>();