build: set up tooling to ensure consistent prefixes for CSS classes (#13563)

Enables the `selector-class-pattern` Stylelint rule and fixes everything that wasn't consistent. Fixes #13545.
2026-09-14 13:54:52 +08:00 · 2018-10-15 19:35:35 +03:00
parent b2e2dde200
commit 85f04db62a
38 changed files with 121 additions and 125 deletions
@@ -21,7 +21,7 @@ class MyTel {
 }

@Component({
-  selector: 'my-tel-input',
+  selector: 'example-tel-input',
  template: `
    <div [formGroup]="parts">
      <input class="area" formControlName="area" size="3">
@@ -134,7 +134,7 @@ element and just generate a unique ID for it.
 ```ts
 static nextId = 0;

-@HostBinding() id = `my-tel-input-${MyTelInput.nextId++}`;
+@HostBinding() id = `example-tel-input-${MyTelInput.nextId++}`;
 ```

 #### `placeholder`
@@ -313,11 +313,11 @@ errorState = false;
 This property allows us to specify a unique string for the type of control in form field. The
 `<mat-form-field>` will add an additional class based on this type that can be used to easily apply
 special styles to a `<mat-form-field>` that contains a specific type of control. In this example
-we'll use `my-tel-input` as our control type which will result in the form field adding the class
-`mat-form-field-my-tel-input`.
+we'll use `example-tel-input` as our control type which will result in the form field adding the
+class `mat-form-field-example-tel-input`.

 ```ts
-controlType = 'my-tel-input';
+controlType = 'example-tel-input';
 ```

 #### `setDescribedByIds(ids: string[])`
@@ -356,7 +356,7 @@ do is place it inside of a `<mat-form-field>`

 ```html
 <mat-form-field>
-  <my-tel-input></my-tel-input>
+  <example-tel-input></example-tel-input>
 </mat-form-field>
 ```

@@ -366,7 +366,7 @@ the error state).

 ```html
 <mat-form-field>
-  <my-tel-input placeholder="Phone number" required></my-tel-input>
+  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matPrefix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
 </mat-form-field>
@@ -114,7 +114,7 @@ export class DemoApp {
  }

  toggleTheme() {
-    const darkThemeClass = 'unicorn-dark-theme';
+    const darkThemeClass = 'demo-unicorn-dark-theme';

    this.dark = !this.dark;

@@ -1,5 +1,5 @@
 <div>
-  <div class="list">
+  <div class="demo-list">
    <h2>To do</h2>
    <div
      cdkDrop
@@ -15,7 +15,7 @@
    </div>
  </div>

-  <div class="list">
+  <div class="demo-list">
    <h2>Done</h2>
    <div
      cdkDrop
@@ -33,7 +33,7 @@
 </div>

 <div>
-  <div class="list horizontal">
+  <div class="demo-list demo-list-horizontal">
    <h2>Horizontal list</h2>
    <div
      cdkDrop
@@ -49,9 +49,9 @@
  </div>
 </div>

-<div class="list">
+<div class="demo-list">
  <h2>Free dragging</h2>
-  <div cdkDrag class="free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
+  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
 </div>

 <div>
@@ -1,4 +1,4 @@
-.list {
+.demo-list {
  width: 500px;
  max-width: 100%;
  margin-bottom: 25px;
@@ -10,12 +10,12 @@
    margin-right: 0;
    margin-left: 25px;
  }
+}

-  &.horizontal {
-    width: 1000px;
-    margin-right: 0;
-    margin-left: 0;
-  }
+.demo-list-horizontal {
+  width: 1000px;
+  margin-right: 0;
+  margin-left: 0;
 }

 .cdk-drop {
@@ -23,7 +23,7 @@
  min-height: 60px;
  display: block;

-  .horizontal & {
+  .demo-list-horizontal & {
    display: flex;
    flex-direction: row;
  }
@@ -42,7 +42,7 @@
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

-  .horizontal & {
+  .demo-list-horizontal & {
    border: none;
    border-right: solid 1px #ccc;
    flex-grow: 1;
@@ -72,10 +72,6 @@
  opacity: 0;
 }

-.wrapper {
-  border: solid 1px red;
-}
-
 .cdk-drag-handle {
  cursor: move;

@@ -88,7 +84,7 @@ pre {
  white-space: normal;
 }

-.free-draggable {
+.demo-free-draggable {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
@@ -1,27 +1,27 @@
 <h2>Screen Type</h2>

 <mat-grid-list cols="6" rowHeight="1:2">
-  <mat-grid-tile [class.active]="(isHandset | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isHandset | async)?.matches"
                colspan="2">
    <mat-icon>smartphone</mat-icon>
    <p>Handset</p>
  </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isTablet | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isTablet | async)?.matches"
                colspan="2">
    <mat-icon>tablet_android</mat-icon>
    <p>Tablet</p>
  </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isWeb | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isWeb | async)?.matches"
                colspan="2">
    <mat-icon>laptop</mat-icon>
    <p>Web</p>
  </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isPortrait | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isPortrait | async)?.matches"
                colspan="3">
    <mat-icon>stay_current_portrait</mat-icon>
    <p>Portrait</p>
  </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isLandscape | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isLandscape | async)?.matches"
                colspan="3">
    <mat-icon>stay_current_landscape</mat-icon>
    <p>Landscape</p>
@@ -10,10 +10,10 @@
  .mat-figure {
    flex-direction: column;
  }
+}

-  &.active {
-    background: rgba(0, 0, 0, 0.12);
-  }
+.demo-tile-active {
+  background: rgba(0, 0, 0, 0.12);
 }

 h2 {
@@ -24,7 +24,8 @@ $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

 // Include the alternative theme styles inside of a block with a CSS class. You can make this
 // CSS class whatever you want. In this example, any component inside of an element with
-// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
-.unicorn-dark-theme {
+// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
+// default theme.
+.demo-unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
 }
@@ -1,19 +1,19 @@
-.spacer {
+.demo-spacer {
  background: #3f51b5;
  margin-bottom: 10px;
 }

-.spacer.vertical {
+.demo-spacer-vertical {
  width: 100px;
  height: 3000px;
 }

-.spacer.horizontal {
+.demo-spacer-horizontal {
  width: 3000px;
  height: 100px;
 }

-.scroller {
+.demo-scroller {
  width: 100px;
  height: 100px;
  overflow: auto;
@@ -22,7 +22,7 @@
  left: 200px;
 }

-.scroller-spacer {
+.demo-scroller-spacer {
  width: 200px;
  height: 200px;
  background: #ff4081;
@@ -2,9 +2,9 @@
  <button id="enable" (click)="scrollStrategy.enable()">Enable scroll blocking</button>
  <button id="disable" (click)="scrollStrategy.disable()">Disable scroll blocking</button>
 </p>
-<div class="spacer vertical"></div>
+<div class="demo-spacer demo-spacer-vertical"></div>
 <!-- this one needs a tabindex so protractor can trigger key presses inside it -->
-<div class="scroller" id="scroller" tabindex="-1">
-  <div class="scroller-spacer"></div>
+<div class="demo-scroller" id="scroller" tabindex="-1">
+  <div class="demo-scroller-spacer"></div>
 </div>
-<div class="spacer horizontal"></div>
+<div class="demo-spacer demo-spacer-horizontal"></div>
@@ -1,4 +1,4 @@
-.button-row button,
-.button-row a {
+.example-button-row button,
+.example-button-row a {
  margin-right: 8px;
 }
@@ -1,5 +1,5 @@
 <h3>Basic Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
@@ -9,7 +9,7 @@
 </div>

 <h3>Raised Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
@@ -19,7 +19,7 @@
 </div>

 <h3>Stroked Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
@@ -29,7 +29,7 @@
 </div>

 <h3>Flat Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-flat-button>Basic</button>
  <button mat-flat-button color="primary">Primary</button>
  <button mat-flat-button color="accent">Accent</button>
@@ -39,7 +39,7 @@
 </div>

 <h3>Icon Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-icon-button>
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
@@ -58,7 +58,7 @@
 </div>

 <h3>Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
@@ -71,7 +71,7 @@
 </div>

 <h3>Mini Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
@@ -81,4 +81,4 @@
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
-</div>
+</div>
@@ -1,4 +1,4 @@
-.box {
+.example-box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
@@ -19,7 +19,7 @@
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

-.box:active {
+.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
@@ -1,7 +1,7 @@
-<div class="box" cdkDragLockAxis="y" cdkDrag>
+<div class="example-box" cdkDragLockAxis="y" cdkDrag>
  I can only be dragged up/down
 </div>

-<div class="box" cdkDragLockAxis="x" cdkDrag>
+<div class="example-box" cdkDragLockAxis="x" cdkDrag>
  I can only be dragged left/right
 </div>
@@ -1,4 +1,4 @@
-.container {
+.example-container {
  width: 400px;
  max-width: 100%;
  margin: 0 25px 25px 0;
@@ -6,7 +6,7 @@
  vertical-align: top;
 }

-.list {
+.example-list {
  border: solid 1px #ccc;
  min-height: 60px;
  background: white;
@@ -15,7 +15,7 @@
  display: block;
 }

-.box {
+.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
@@ -45,10 +45,10 @@
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

-.box:last-child {
+.example-box:last-child {
  border: none;
 }

-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="example-container">
  <h2>To do</h2>

  <div
@@ -6,13 +6,13 @@
    #todoList="cdkDrop"
    [cdkDropData]="todo"
    [cdkDropConnectedTo]="[doneList]"
-    class="list"
+    class="example-list"
    (cdkDropDropped)="drop($event)">
-    <div class="box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
 </div>

-<div class="container">
+<div class="example-container">
  <h2>Done</h2>

  <div
@@ -20,9 +20,9 @@
    #doneList="cdkDrop"
    [cdkDropData]="done"
    [cdkDropConnectedTo]="[todoList]"
-    class="list"
+    class="example-list"
    (cdkDropDropped)="drop($event)">
-    <div class="box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
 </div>

@@ -1,4 +1,4 @@
-.list {
+.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
@@ -9,7 +9,7 @@
  overflow: hidden;
 }

-.box {
+.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
@@ -39,10 +39,10 @@
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

-.box:last-child {
+.example-box:last-child {
  border: none;
 }

-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
@@ -1,5 +1,5 @@
-<div cdkDrop class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let movie of movies" cdkDrag>
+<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    {{movie.title}}
    <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
  </div>
@@ -1,4 +1,4 @@
-.box {
+.example-box {
  width: 200px;
  height: 200px;
  padding: 10px;
@@ -19,13 +19,13 @@
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

-.box:active {
+.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }

-.handle {
+.example-handle {
  position: absolute;
  top: 10px;
  right: 10px;
@@ -1,7 +1,7 @@
-<div class="box" cdkDrag>
+<div class="example-box" cdkDrag>
  I can only be dragged using the handle

-  <div class="handle" cdkDragHandle>
+  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
@@ -1,4 +1,4 @@
-.list {
+.example-list {
  width: 1000px;
  max-width: 100%;
  border: solid 1px #ccc;
@@ -10,7 +10,7 @@
  overflow: hidden;
 }

-.box {
+.example-box {
  padding: 20px 10px;
  border-right: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
@@ -42,10 +42,10 @@
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

-.box:last-child {
+.example-box:last-child {
  border: none;
 }

-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
@@ -1,3 +1,3 @@
-<div cdkDrop cdkDropOrientation="horizontal" class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
+<div cdkDrop cdkDropOrientation="horizontal" class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
 </div>
@@ -1,4 +1,4 @@
-.box {
+.example-box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
@@ -18,7 +18,7 @@
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

-.box:active {
+.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
@@ -1,3 +1,3 @@
-<div class="box" cdkDrag>
+<div class="example-box" cdkDrag>
  Drag me around
 </div>
@@ -1,4 +1,4 @@
-.dialog-content {
+.example-dialog-content {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
@@ -15,7 +15,7 @@
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

-.dialog-content:active {
+.example-dialog-content:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
@@ -1,7 +1,7 @@
 <button (click)="openDialog()">Open a draggable dialog</button>

 <ng-template>
-  <div class="dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+  <div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
    Drag the dialog around!
  </div>
 </ng-template>
@@ -1,4 +1,4 @@
-.list {
+.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
@@ -9,7 +9,7 @@
  overflow: hidden;
 }

-.box {
+.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
@@ -39,10 +39,10 @@
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

-.box:last-child {
+.example-box:last-child {
  border: none;
 }

-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
@@ -1,3 +1,3 @@
-<div cdkDrop class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
+<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
 </div>
@@ -1,8 +1,8 @@
-.my-tel-input-container {
+.example-tel-input-container {
  display: flex;
 }

-.my-tel-input-element {
+.example-tel-input-element {
  border: none;
  background: none;
  padding: 0;
@@ -11,11 +11,11 @@
  text-align: center;
 }

-.my-tel-input-spacer {
+.example-tel-input-spacer {
  opacity: 0;
  transition: opacity 200ms;
 }

-:host.floating .my-tel-input-spacer {
+:host.example-floating .example-tel-input-spacer {
  opacity: 1;
 }
@@ -0,0 +1,7 @@
+<div [formGroup]="parts" class="example-tel-input-container">
+  <input class="example-tel-input-element" formControlName="area" size="3">
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element" formControlName="exchange" size="3">
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element" formControlName="subscriber" size="4">
+</div>
@@ -1,5 +1,5 @@
 <mat-form-field>
-  <my-tel-input placeholder="Phone number" required></my-tel-input>
+  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
 </mat-form-field>
@@ -20,12 +20,12 @@ export class MyTel {

 /** Custom `MatFormFieldControl` for telephone number input. */
@Component({
-  selector: 'my-tel-input',
-  templateUrl: 'my-tel-input-example.html',
-  styleUrls: ['my-tel-input-example.css'],
+  selector: 'example-tel-input',
+  templateUrl: 'example-tel-input-example.html',
+  styleUrls: ['example-tel-input-example.css'],
  providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
  host: {
-    '[class.floating]': 'shouldLabelFloat',
+    '[class.example-floating]': 'shouldLabelFloat',
    '[id]': 'id',
    '[attr.aria-describedby]': 'describedBy',
  }
@@ -38,8 +38,8 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
  focused = false;
  ngControl = null;
  errorState = false;
-  controlType = 'my-tel-input';
-  id = `my-tel-input-${MyTelInput.nextId++}`;
+  controlType = 'example-tel-input';
+  id = `example-tel-input-${MyTelInput.nextId++}`;
  describedBy = '';

  get empty() {
@@ -1,7 +0,0 @@
-<div [formGroup]="parts" class="my-tel-input-container">
-  <input class="my-tel-input-element" formControlName="area" size="3">
-  <span class="my-tel-input-spacer">&ndash;</span>
-  <input class="my-tel-input-element" formControlName="exchange" size="3">
-  <span class="my-tel-input-spacer">&ndash;</span>
-  <input class="my-tel-input-element" formControlName="subscriber" size="4">
-</div>
@@ -1,3 +0,0 @@
-.kitchen-sink {
-  color: lightsteelblue;
-}
@@ -67,7 +67,6 @@ export class TestEntryComponent {}
@Component({
  selector: 'kitchen-sink',
  templateUrl: './kitchen-sink.html',
-  styleUrls: ['./kitchen-sink.css'],
 })
 export class KitchenSink {

@@ -88,6 +88,9 @@
    "no-missing-end-of-source-newline": true,
    "no-eol-whitespace": true,
    "max-line-length": 100,
-    "linebreaks": "unix"
+    "linebreaks": "unix",
+    "selector-class-pattern": ["^_?(mat-|cdk-|example-|demo-|dashboard-|ng-)", {
+      "resolveNestedSelectors": true
+    }]
  }
 }
@@ -15,7 +15,7 @@
  [autoScale]="true">
 </ngx-charts-line-chart>

-<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+<mat-spinner *ngIf="!chartData.length" class="dashboard-panel-loading-indicator"
             [diameter]="50"
             [strokeWidth]="5">
 </mat-spinner>
@@ -15,7 +15,7 @@
  [autoScale]="true">
 </ngx-charts-line-chart>

-<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+<mat-spinner *ngIf="!chartData.length" class="dashboard-panel-loading-indicator"
             [diameter]="50"
             [strokeWidth]="5">
 </mat-spinner>
@@ -6,7 +6,7 @@ body, html {
  min-height: 100vh;
 }

-.panel-loading-indicator {
+.dashboard-panel-loading-indicator {
  position: absolute;

  top: calc(50% - #{$panel-loading-indicator-diameter});