feat(stark-all): upgrade @nationalbankbelgium/code-style and `codel…

…yzer` dependencies and adapt code

BREAKING CHANGES: Due to the update of the `codelyzer` dependency, multiple rules have been renamed and new rules been added, as documented on [codelyzer/CHANGELOG.md](https://github.com/mgechev/codelyzer/blob/master/CHANGELOG.md#500-2019-03-27). We strongly recommend to upgrade your `tslint` configuration to use the new rules. The [@nationalbankbelgium/code-style](https://github.com/NationalBankBelgium/code-style) library contains the NBB recommended configuration for `codelyzer@5.2.x`.

package.json

@@ -35,10 +35,10 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@compodoc/compodoc": "~1.1.11",
-    "@nationalbankbelgium/code-style": "^1.0.1",
+    "@nationalbankbelgium/code-style": "^1.1.1",
     "@ngtools/json-schema": "^1.1.0",
     "@release-it/conventional-changelog": "^1.1.0",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.0",
     "commitizen": "^4.0.0",
     "conventional-changelog-cli": "^2.0.31",
     "core-js": "^3.6.4",

packages/stark-build/package.json

@@ -27,7 +27,7 @@
     "@types/webpack": "^4.4.24",
     "babel-loader": "^8.0.5",
     "base-href-webpack-plugin": "^2.0.0",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.0",
     "ejs-loader": "^0.3.1",
     "html-elements-webpack-plugin": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",

packages/stark-core/src/modules/session/components/app-container.component.ts

@@ -16,7 +16,7 @@ const componentName = "stark-app-container";
 	selector: "stark-app-container",
 	templateUrl: "./app-container.component.html",
 	encapsulation: ViewEncapsulation.None,
-	// tslint:disable-next-line: use-host-property-decorator
+	// tslint:disable-next-line: no-host-metadata-property
 	host: {
 		class: componentName
 	}

packages/stark-core/tslint.json

@@ -2,8 +2,8 @@
   "extends": [
     "tslint:latest",
     "tslint-sonarts",
-    "@nationalbankbelgium/code-style/codelyzer/4.5.x",
-    "@nationalbankbelgium/code-style/tslint/4.3.x",
+    "@nationalbankbelgium/code-style/codelyzer/5.2.x",
+    "@nationalbankbelgium/code-style/tslint/5.10.x",
     "tslint-config-prettier"
   ],
   "rules": {
@@ -30,6 +30,7 @@
         }
       }
     ],
-    "use-view-encapsulation": false
+    "use-component-view-encapsulation": false,
+    "use-injectable-provided-in": false
   }
 }

packages/stark-rbac/tslint.json

@@ -2,8 +2,8 @@
   "extends": [
     "tslint:latest",
     "tslint-sonarts",
-    "@nationalbankbelgium/code-style/codelyzer/4.5.x",
-    "@nationalbankbelgium/code-style/tslint/4.3.x",
+    "@nationalbankbelgium/code-style/codelyzer/5.2.x",
+    "@nationalbankbelgium/code-style/tslint/5.10.x",
     "tslint-config-prettier"
   ],
   "rules": {
@@ -30,6 +30,7 @@
         }
       }
     ],
-    "use-host-property-decorator": false
+    "use-host-property-decorator": false,
+    "use-injectable-provided-in": false
   }
 }

packages/stark-ui/src/modules/action-bar/components/_action-bar.component.scss

@@ -11,6 +11,12 @@
   overflow: hidden;
   transform-origin: bottom;
 
+  &.extended {
+    .stark-action-bar-action {
+      width: auto;
+    }
+  }
+
   .action-bar-wrapper {
     display: flex;
     align-items: center;
@@ -43,10 +49,17 @@
     .action-label {
       font-size: 13px;
       padding-left: 15px;
+      text-transform: none;
     }
   }
 }
 
+.stark-action-bar-menu-item {
+  .stark-small-icon {
+    margin-bottom: 4px;
+  }
+}
+
 @media #{$tablet-query} {
   .stark-action-bar {
     position: relative;

packages/stark-ui/src/modules/action-bar/components/action-bar.component.html

@@ -5,35 +5,29 @@
 	[id]="actionBarId"
 >
 	<div class="action-bar-wrapper">
-		<div
-			*ngFor="let action of actionBarConfig.actions; trackBy: trackAction"
-			[id]="actionBarId + '-' + action.id"
-			(click)="onClick(action, $event)"
-			class="stark-action-bar--action"
-		>
-			<ng-container *ngIf="action.isVisible !== false">
-				<button
-					[color]="action.buttonColor ? action.buttonColor : buttonColor"
-					[ngClass]="action.className"
-					[matTooltip]="action.labelSwitchFunction ? (action.labelActivated | translate) : (action.label | translate)"
-					[disabled]="!action.isEnabled"
-					mat-icon-button
-					type="button"
-				>
-					<mat-icon
-						[svgIcon]="action.iconSwitchFunction ? action.iconActivated : action.icon"
-						class="stark-small-icon"
-					></mat-icon>
-				</button>
-				<label
+		<ng-container *ngFor="let action of actionBarConfig.actions; trackBy: trackAction">
+			<button
+				[id]="actionBarId + '-' + action.id"
+				(click)="onClick(action, $event)"
+				*ngIf="action.isVisible !== false"
+				class="stark-action-bar-action"
+				[color]="action.buttonColor ? action.buttonColor : buttonColor"
+				[ngClass]="action.className"
+				[matTooltip]="action.labelSwitchFunction ? (action.labelActivated | translate) : (action.label | translate)"
+				[disabled]="!action.isEnabled"
+				mat-icon-button
+				type="button"
+			>
+				<mat-icon [svgIcon]="action.iconSwitchFunction ? action.iconActivated : action.icon" class="stark-small-icon"></mat-icon>
+				<span
 					[class]="'action-label ' + (action.buttonColor ? action.buttonColor : buttonColor)"
 					[ngClass]="{ disabled: !action.isEnabled }"
 					*ngIf="isExtended"
 				>
 					{{ action.label | translate }}
-				</label>
-			</ng-container>
-		</div>
+				</span>
+			</button>
+		</ng-container>
 	</div>
 
 	<div *ngIf="mode === 'full' || alternativeActions" class="alt-actions">
@@ -58,20 +52,20 @@
 			<mat-icon svgIcon="dots-vertical" class="stark-small-icon"></mat-icon>
 		</button>
 		<mat-menu #menu="matMenu" xPosition="before">
-			<div
-				*ngFor="let action of alternativeActions; trackBy: trackAction"
-				mat-menu-item
-				[id]="actionBarId + '-alt-' + action.id"
-				[disabled]="!action.isEnabled"
-				(click)="onClick(action, $event)"
-			>
-				<ng-container *ngIf="action.isVisible !== false">
-					<div [ngClass]="action.className">
-						<mat-icon [svgIcon]="action.icon" class="stark-small-icon"></mat-icon>
-						<span translate>{{ action.label }}</span>
-					</div>
-				</ng-container>
-			</div>
+			<ng-container *ngFor="let action of alternativeActions; trackBy: trackAction">
+				<button
+					*ngIf="action.isVisible !== false"
+					mat-menu-item
+					class="stark-action-bar-menu-item"
+					[ngClass]="action.className"
+					[id]="actionBarId + '-alt-' + action.id"
+					[disabled]="!action.isEnabled"
+					(click)="onClick(action, $event)"
+				>
+					<mat-icon [svgIcon]="action.icon" class="stark-small-icon"></mat-icon>
+					<span translate>{{ action.label }}</span>
+				</button>
+			</ng-container>
 		</mat-menu>
 	</div>
 </div>

packages/stark-ui/src/modules/action-bar/components/action-bar.component.spec.ts

@@ -1,4 +1,4 @@
-/* tslint:disable:completed-docs max-inline-declarations */
+/* tslint:disable:completed-docs component-max-inline-declarations */
 import { Component, NO_ERRORS_SCHEMA, ViewChild } from "@angular/core";
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 import { MatButtonModule } from "@angular/material/button";

packages/stark-ui/src/modules/app-data/components/app-data.component.spec.ts

@@ -1,4 +1,4 @@
-/* tslint:disable:completed-docs max-inline-declarations no-life-cycle-call */
+/* tslint:disable:completed-docs component-max-inline-declarations no-lifecycle-call */
 import { StarkAppDataComponent, StarkAppDataComponentMode } from "./app-data.component";
 import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { async, fakeAsync, inject, tick, ComponentFixture, TestBed } from "@angular/core/testing";

packages/stark-ui/src/modules/app-footer/components/app-footer.component.spec.ts

@@ -1,4 +1,4 @@
-/* tslint:disable:completed-docs no-life-cycle-call */
+/* tslint:disable:completed-docs no-lifecycle-call */
 import { async, ComponentFixture, inject, TestBed } from "@angular/core/testing";
 import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";