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.

Author: bzh2610

README.md

@@ -120,18 +120,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/demo_app/src/app/pages/dashboard/dashboard.component.html

@@ -10,19 +10,19 @@
   <section class="dashboard-grid" aria-label="Analytics dashboard">
     <article class="dashboard-card dashboard-wide">
       <header><div><p>Revenue</p><h2>Monthly performance</h2></div><span class="status-pill">USD</span></header>
-      <div class="dashboard-plot"><plotly-plot [data]="revenueData" [layout]="revenueLayout" [config]="config" [style]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
+      <div class="dashboard-plot"><plotly-plot [data]="revenueData" [layout]="revenueLayout" [config]="config" [innerStyle]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
     </article>
     <article class="dashboard-card">
       <header><div><p>Customers</p><h2>Plan mix</h2></div></header>
-      <div class="dashboard-plot"><plotly-plot [data]="segmentData" [layout]="segmentLayout" [config]="config" [style]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
+      <div class="dashboard-plot"><plotly-plot [data]="segmentData" [layout]="segmentLayout" [config]="config" [innerStyle]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
     </article>
     <article class="dashboard-card">
       <header><div><p>Acquisition</p><h2>Channel comparison</h2></div></header>
-      <div class="dashboard-plot"><plotly-plot [data]="channelData" [layout]="channelLayout" [config]="config" [style]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
+      <div class="dashboard-plot"><plotly-plot [data]="channelData" [layout]="channelLayout" [config]="config" [innerStyle]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
     </article>
     <article class="dashboard-card dashboard-wide">
       <header><div><p>Engagement</p><h2>Sessions by weekday</h2></div></header>
-      <div class="dashboard-plot"><plotly-plot [data]="heatmapData" [layout]="heatmapLayout" [config]="config" [style]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
+      <div class="dashboard-plot"><plotly-plot [data]="heatmapData" [layout]="heatmapLayout" [config]="config" [innerStyle]="plotStyle" [useResizeHandler]="true"></plotly-plot></div>
     </article>
   </section>
 

projects/demo_app/src/app/pages/events/events.component.html

@@ -10,7 +10,7 @@
           [data]="data"
           [layout]="layout"
           [config]="config"
-          [style]="plotStyle"
+          [innerStyle]="plotStyle"
           [useResizeHandler]="true"
           (plotlyClick)="capture('plotlyClick', $event)"
           (hover)="capture('hover', $event)"

projects/demo_app/src/app/pages/getting-started/getting-started.component.html

@@ -10,7 +10,7 @@
           [data]="data"
           [layout]="layout"
           [config]="config"
-          [style]="plotStyle"
+          [innerStyle]="plotStyle"
           [useResizeHandler]="true">
         </plotly-plot>
       </div>

projects/demo_app/src/app/pages/getting-started/getting-started.component.ts

@@ -55,7 +55,7 @@ export class GettingStartedComponent {
   [data]="data"
   [layout]="layout"
   [config]="config"
-  [style]="plotStyle"
+  [innerStyle]="plotStyle"
   [useResizeHandler]="true">
 </plotly-plot>`;
 

projects/demo_app/src/app/pages/home/home.component.html

@@ -35,7 +35,7 @@ <h1>Interactive charts.<br><span>Angular-native.</span></h1>
             [data]="data"
             [layout]="layout"
             [config]="config"
-            [style]="plotStyle"
+            [innerStyle]="plotStyle"
             [useResizeHandler]="true">
           </plotly-plot>
         </div>

projects/demo_app/src/app/pages/lifecycle/lifecycle.component.html

@@ -21,7 +21,7 @@
               [data]="data"
               [layout]="layout"
               [config]="config"
-              [style]="plotStyle"
+              [innerStyle]="plotStyle"
               [useResizeHandler]="true"
               [debug]="debugEnabled"
               (initialized)="record('initialized')"

projects/demo_app/src/app/pages/reactive-updates/reactive-updates.component.html

@@ -20,7 +20,7 @@
         [data]="data"
         [layout]="layout"
         [config]="config"
-        [style]="plotStyle"
+        [innerStyle]="plotStyle"
         [useResizeHandler]="true"
         [revision]="revision"
         [updateOnlyWithRevision]="true"

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

@@ -30,7 +30,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>`,
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -51,6 +51,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>();