Merge pull request #1309 from christophercr/feature/svgviewbox-cleanup

refactor(stark-all): remove usages of starkSvgViewBox directive where it is no longer needed
NationalBankBelgium · Jun 3, 2019 · 2801685 · 2801685
2 parents 21b5fdf + e95fdd3
commit 2801685
Show file tree

Hide file tree

Showing 43 changed files with 184 additions and 239 deletions.
diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@angular/material-moment-adapter": "^7.0.0",
-    "@mdi/angular-material": "^3.3.92",
+    "@mdi/angular-material": "^3.6.95",
     "@types/lodash-es": "^4.17.1",
     "@types/nouislider": "^9.0.4",
     "@types/prismjs": "^1.16.0",

diff --git a/packages/stark-ui/src/modules/action-bar/action-bar.module.ts b/packages/stark-ui/src/modules/action-bar/action-bar.module.ts
@@ -4,13 +4,12 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { StarkSvgViewBoxModule } from "../svg-view-box/svg-view-box.module";
 import { StarkActionBarComponent } from "./components";
 import { TranslateModule } from "@ngx-translate/core";
 
 @NgModule({
 	declarations: [StarkActionBarComponent],
-	imports: [CommonModule, StarkSvgViewBoxModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule],
+	imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule],
 	exports: [StarkActionBarComponent]
 })
 export class StarkActionBarModule {}
diff --git a/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html b/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html
@@ -21,7 +21,6 @@
 					type="button"
 				>
 					<mat-icon
-						starkSvgViewBox
 						[svgIcon]="action.iconSwitchFunction ? action.iconActivated : action.icon"
 						class="stark-small-icon"
 					></mat-icon>
@@ -46,7 +45,7 @@
 			(click)="toggleExtendedActionBar()"
 			type="button"
 		>
-			<mat-icon starkSvgViewBox svgIcon="dots-horizontal" class="stark-small-icon"></mat-icon>
+			<mat-icon svgIcon="dots-horizontal" class="stark-small-icon"></mat-icon>
 		</button>
 		<button
 			class="open-alt-actions"
@@ -56,7 +55,7 @@
 			[matMenuTriggerFor]="menu"
 			type="button"
 		>
-			<mat-icon starkSvgViewBox svgIcon="dots-vertical" class="stark-small-icon"></mat-icon>
+			<mat-icon svgIcon="dots-vertical" class="stark-small-icon"></mat-icon>
 		</button>
 		<mat-menu #menu="matMenu" xPosition="before">
 			<div
@@ -68,7 +67,7 @@
 			>
 				<ng-container *ngIf="action.isVisible !== false">
 					<div [ngClass]="action.className">
-						<mat-icon starkSvgViewBox [svgIcon]="action.icon" class="stark-small-icon"></mat-icon>
+						<mat-icon [svgIcon]="action.icon" class="stark-small-icon"></mat-icon>
 						<span translate>{{ action.label }}</span>
 					</div>
 				</ng-container>

diff --git a/packages/stark-ui/src/modules/app-data/app-data.module.ts b/packages/stark-ui/src/modules/app-data/app-data.module.ts
@@ -10,11 +10,10 @@ import { mergeUiTranslations } from "../../common/translations";
 import { translationsEn } from "./assets/translations/en";
 import { translationsNl } from "./assets/translations/nl";
 import { StarkLocale } from "@nationalbankbelgium/stark-core";
-import { StarkSvgViewBoxModule } from "../svg-view-box";
 
 @NgModule({
 	declarations: [StarkAppDataComponent],
-	imports: [CommonModule, StarkSvgViewBoxModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule],
+	imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule],
 	exports: [StarkAppDataComponent]
 })
 export class StarkAppDataModule {

diff --git a/packages/stark-ui/src/modules/app-data/components/app-data.component.html b/packages/stark-ui/src/modules/app-data/components/app-data.component.html
@@ -10,7 +10,7 @@
 	</div>
 
 	<button mat-icon-button aria-label="Application Data" (click)="toggleDetail()" [ngClass]="{ 'is-open': !isDetailHidden }" mat-button>
-		<mat-icon svgIcon="menu-down" starkSvgViewBox></mat-icon>
+		<mat-icon svgIcon="menu-down"></mat-icon>
 	</button>
 	<div class="stark-app-data-detail stark-fade-animation" *ngIf="!isDetailHidden">
 		<ng-container *ngTemplateOutlet="appDataDetail"></ng-container>
@@ -25,7 +25,7 @@
 		mat-button
 		[matTooltip]="'STARK.ICONS.APP_DATA' | translate"
 	>
-		<mat-icon svgIcon="dots-vertical" starkSvgViewBox></mat-icon>
+		<mat-icon svgIcon="dots-vertical"></mat-icon>
 	</button>
 	<div class="stark-app-data-detail animate-show-hide" *ngIf="!isDetailHidden">
 		<ng-container *ngTemplateOutlet="appDataDetail"></ng-container>

diff --git a/packages/stark-ui/src/modules/app-logout/app-logout.module.ts b/packages/stark-ui/src/modules/app-logout/app-logout.module.ts
@@ -5,7 +5,6 @@ import { MatButtonModule } from "@angular/material/button";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { StarkLocale } from "@nationalbankbelgium/stark-core";
 import { StarkAppLogoutComponent } from "./components";
-import { StarkSvgViewBoxModule } from "../svg-view-box/svg-view-box.module";
 import { translationsEn } from "./assets/translations/en";
 import { translationsFr } from "./assets/translations/fr";
 import { translationsNl } from "./assets/translations/nl";
@@ -14,7 +13,7 @@ import { mergeUiTranslations } from "../../common/translations";
 @NgModule({
 	declarations: [StarkAppLogoutComponent],
 	exports: [StarkAppLogoutComponent],
-	imports: [MatIconModule, StarkSvgViewBoxModule, TranslateModule, MatTooltipModule, MatButtonModule]
+	imports: [MatIconModule, TranslateModule, MatTooltipModule, MatButtonModule]
 })
 export class StarkAppLogoutModule {
 	/**

diff --git a/packages/stark-ui/src/modules/app-logout/components/app-logout.component.html b/packages/stark-ui/src/modules/app-logout/components/app-logout.component.html
@@ -1,3 +1,3 @@
 <button mat-mini-fab color="alert" (click)="logout()" [matTooltip]="'STARK.APP_LOGOUT.TITLE' | translate">
-	<mat-icon starkSvgViewBox [svgIcon]="icon"></mat-icon>
+	<mat-icon [svgIcon]="icon"></mat-icon>
 </button>
diff --git a/packages/stark-ui/src/modules/app-menu/app-menu.module.ts b/packages/stark-ui/src/modules/app-menu/app-menu.module.ts
@@ -7,20 +7,10 @@ import { MatListModule } from "@angular/material/list";
 import { TranslateModule } from "@ngx-translate/core";
 import { UIRouterModule } from "@uirouter/angular";
 import { StarkAppMenuComponent, StarkAppMenuItemComponent } from "./components";
-import { StarkSvgViewBoxModule } from "../svg-view-box/svg-view-box.module";
 
 @NgModule({
 	declarations: [StarkAppMenuComponent, StarkAppMenuItemComponent],
-	imports: [
-		CommonModule,
-		MatListModule,
-		MatDividerModule,
-		MatExpansionModule,
-		MatIconModule,
-		StarkSvgViewBoxModule,
-		TranslateModule,
-		UIRouterModule
-	],
+	imports: [CommonModule, MatListModule, MatDividerModule, MatExpansionModule, MatIconModule, TranslateModule, UIRouterModule],
 	exports: [StarkAppMenuComponent, StarkAppMenuItemComponent]
 })
 export class StarkAppMenuModule {}
diff --git a/packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.html b/packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.html
@@ -7,13 +7,7 @@
 	[disableRipple]="!menuGroup.isEnabled"
 	(click)="onClick()"
 >
-	<mat-icon
-		*ngIf="menuGroup.icon"
-		[color]="isActive ? 'primary' : ''"
-		starkSvgViewBox
-		[svgIcon]="menuGroup.icon"
-		class="stark-small-icon"
-	></mat-icon>
+	<mat-icon *ngIf="menuGroup.icon" [color]="isActive ? 'primary' : ''" [svgIcon]="menuGroup.icon" class="stark-small-icon"></mat-icon>
 	<span matLine translate>{{ menuGroup.label }}</span>
 </mat-list-item>
 <mat-expansion-panel *ngIf="menuGroup.entries" #menuGroupsPanel>

diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html
@@ -1,7 +1,7 @@
 <mat-expansion-panel class="stark-collapsible" id="{{ htmlId }}" [expanded]="isExpanded" hideToggle>
 	<mat-expansion-panel-header (click)="toggleCollapsible()">
 		<mat-panel-title>
-			<mat-icon [ngClass]="{ spin: _isDefaultIcon }" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
+			<mat-icon [ngClass]="{ spin: _isDefaultIcon }" class="stark-collapsible-icon" [svgIcon]="icon"></mat-icon>
 			<span class="stark-collapsible-title" translate>{{ titleLabel }}</span>
 		</mat-panel-title>
 	</mat-expansion-panel-header>

diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html b/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html
@@ -1,5 +1,5 @@
 <h2 mat-dialog-title>
-	<mat-icon svgIcon="alert" starkSvgViewBox></mat-icon>&nbsp;
+	<mat-icon svgIcon="alert"></mat-icon>&nbsp;
 	<span>{{ content.title || "" | translate }}</span>
 </h2>
 

diff --git a/...ark-ui/src/modules/generic-search/components/generic-search/generic-search.component.html b/...ark-ui/src/modules/generic-search/components/generic-search/generic-search.component.html
@@ -25,7 +25,6 @@
 			<mat-icon
 				*ngIf="normalizedFormButtonsConfig.new.icon"
 				[matTooltip]="normalizedFormButtonsConfig.new.label | translate"
-				starkSvgViewBox
 				[svgIcon]="normalizedFormButtonsConfig.new.icon"
 			></mat-icon>
 			<span translate>{{ normalizedFormButtonsConfig.new.label }}</span>
@@ -42,7 +41,6 @@
 			<mat-icon
 				*ngIf="normalizedFormButtonsConfig.reset.icon"
 				[matTooltip]="normalizedFormButtonsConfig.reset.label | translate"
-				starkSvgViewBox
 				[svgIcon]="normalizedFormButtonsConfig.reset.icon"
 			></mat-icon>
 			<span translate>{{ normalizedFormButtonsConfig.reset.label }}</span>
@@ -57,7 +55,6 @@
 			<mat-icon
 				*ngIf="normalizedFormButtonsConfig.search.icon"
 				[matTooltip]="normalizedFormButtonsConfig.search.label | translate"
-				starkSvgViewBox
 				[svgIcon]="normalizedFormButtonsConfig.search.icon"
 			></mat-icon>
 			<span translate>{{ normalizedFormButtonsConfig.search.label }}</span>
@@ -72,12 +69,7 @@
 				(click)="formButton.onClick()"
 				type="button"
 			>
-				<mat-icon
-					*ngIf="formButton.icon"
-					[matTooltip]="formButton.label | translate"
-					starkSvgViewBox
-					[svgIcon]="formButton.icon"
-				></mat-icon>
+				<mat-icon *ngIf="formButton.icon" [matTooltip]="formButton.label | translate" [svgIcon]="formButton.icon"></mat-icon>
 				<span>{{ formButton.label | translate }}</span>
 			</button>
 		</ng-container>

diff --git a/packages/stark-ui/src/modules/message-pane/components/message-pane.component.html b/packages/stark-ui/src/modules/message-pane/components/message-pane.component.html
@@ -80,9 +80,9 @@
 		<ng-container *ngIf="currentNavItem === 'errors'">
 			<div
 				class="stark-message-pane-item stark-message-pane-item-error errors"
-				*ngFor="let message of (errorMessages$ | async); trackBy: trackItemFn"
+				*ngFor="let message of errorMessages$ | async; trackBy: trackItemFn"
 			>
-				<mat-icon starkSvgViewBox svgIcon="alert-circle"></mat-icon>
+				<mat-icon svgIcon="alert-circle"></mat-icon>
 				<div translate="{{ message.key }}" translate-values="message.interpolateValues"></div>
 				<button
 					mat-icon-button
@@ -98,9 +98,9 @@
 		<ng-container *ngIf="currentNavItem === 'warnings'">
 			<div
 				class="stark-message-pane-item stark-message-pane-item-warning warnings"
-				*ngFor="let message of (warningMessages$ | async); trackBy: trackItemFn"
+				*ngFor="let message of warningMessages$ | async; trackBy: trackItemFn"
 			>
-				<mat-icon starkSvgViewBox svgIcon="alert"></mat-icon>
+				<mat-icon svgIcon="alert"></mat-icon>
 				<div translate="{{ message.key }}" translate-values="message.interpolateValues"></div>
 				<button
 					mat-icon-button
@@ -116,9 +116,9 @@
 		<ng-container *ngIf="currentNavItem === 'infos'">
 			<div
 				class="stark-message-pane-item stark-message-pane-item-info infos"
-				*ngFor="let message of (infoMessages$ | async); trackBy: trackItemFn"
+				*ngFor="let message of infoMessages$ | async; trackBy: trackItemFn"
 			>
-				<mat-icon starkSvgViewBox svgIcon="information"></mat-icon>
+				<mat-icon svgIcon="information"></mat-icon>
 				<div translate="{{ message.key }}" translate-values="message.interpolateValues"></div>
 				<button
 					mat-icon-button

diff --git a/packages/stark-ui/src/modules/minimap/components/minimap.component.html b/packages/stark-ui/src/modules/minimap/components/minimap.component.html
@@ -4,8 +4,8 @@
 	</div>
 </div>
 <button mat-icon-button #minimapMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="minimapMenu" [color]="color">
-	<mat-icon *ngIf="mode === 'compact'" svgIcon="view-column" starkSvgViewBox></mat-icon>
-	<mat-icon *ngIf="mode !== 'compact'" [class.open]="minimapMenuTrigger.menuOpen" svgIcon="menu-down" starkSvgViewBox></mat-icon>
+	<mat-icon *ngIf="mode === 'compact'" svgIcon="view-column"></mat-icon>
+	<mat-icon *ngIf="mode !== 'compact'" [class.open]="minimapMenuTrigger.menuOpen" svgIcon="menu-down"></mat-icon>
 </button>
 <mat-menu #minimapMenu="matMenu">
 	<div class="stark-minimap-menu-item" mat-menu-item *ngFor="let item of items; trackBy: trackItemFn">

diff --git a/packages/stark-ui/src/modules/minimap/minimap.module.ts b/packages/stark-ui/src/modules/minimap/minimap.module.ts
@@ -8,7 +8,6 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 import { CommonModule } from "@angular/common";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatMenuModule } from "@angular/material/menu";
-import { StarkSvgViewBoxModule } from "../svg-view-box";
 
 @NgModule({
 	declarations: [StarkMinimapComponent],
@@ -20,7 +19,6 @@ import { StarkSvgViewBoxModule } from "../svg-view-box";
 		MatIconModule,
 		MatTooltipModule,
 		MatMenuModule,
-		StarkSvgViewBoxModule,
 		TranslateModule
 	],
 	exports: [StarkMinimapComponent]

diff --git a/packages/stark-ui/src/modules/pagination/components/pagination.component.html b/packages/stark-ui/src/modules/pagination/components/pagination.component.html
@@ -2,13 +2,13 @@
 	<ul *ngIf="paginationConfig.pageNavIsPresent !== false">
 		<li class="first-page" aria-label="First page" *ngIf="!paginationConfig.isExtended">
 			<button mat-icon-button (click)="goToFirst()" [disabled]="!hasPrevious()" aria-label="First page">
-				<mat-icon starkSvgViewBox svgIcon="page-first"></mat-icon>
+				<mat-icon svgIcon="page-first"></mat-icon>
 			</button>
 		</li>
 
 		<li class="previous" aria-label="Previous">
 			<button mat-icon-button (click)="goToPrevious()" [disabled]="!hasPrevious()" aria-label="Previous">
-				<mat-icon starkSvgViewBox svgIcon="chevron-left"></mat-icon>
+				<mat-icon svgIcon="chevron-left"></mat-icon>
 			</button>
 		</li>
 
@@ -27,13 +27,13 @@
 
 		<li class="next" aria-label="Next">
 			<button mat-icon-button type="button" (click)="goToNext()" [disabled]="!hasNext()">
-				<mat-icon starkSvgViewBox svgIcon="chevron-right"></mat-icon>
+				<mat-icon svgIcon="chevron-right"></mat-icon>
 			</button>
 		</li>
 
 		<li class="last-page" aria-label="Last page" *ngIf="!paginationConfig.isExtended">
 			<button mat-icon-button type="button" (click)="goToLast()" [disabled]="!hasNext()" aria-label="Last page">
-				<mat-icon starkSvgViewBox svgIcon="page-last"></mat-icon>
+				<mat-icon svgIcon="page-last"></mat-icon>
 			</button>
 		</li>
 	</ul>
@@ -68,13 +68,13 @@
 	<ul *ngIf="paginationConfig.pageNavIsPresent !== false">
 		<li class="first-page" aria-label="First page">
 			<button mat-icon-button (click)="goToFirst()" [disabled]="!hasPrevious()" aria-label="First page">
-				<mat-icon starkSvgViewBox svgIcon="page-first"></mat-icon>
+				<mat-icon svgIcon="page-first"></mat-icon>
 			</button>
 		</li>
 
 		<li class="previous" aria-label="Previous">
 			<button mat-icon-button (click)="goToPrevious()" [disabled]="!hasPrevious()" aria-label="Previous">
-				<mat-icon starkSvgViewBox svgIcon="chevron-left"></mat-icon>
+				<mat-icon svgIcon="chevron-left"></mat-icon>
 			</button>
 		</li>
 
@@ -91,13 +91,13 @@
 
 		<li class="next" aria-label="Next">
 			<button mat-icon-button (click)="goToNext()" [disabled]="!hasNext()">
-				<mat-icon starkSvgViewBox svgIcon="chevron-right"></mat-icon>
+				<mat-icon svgIcon="chevron-right"></mat-icon>
 			</button>
 		</li>
 
 		<li class="last-page" aria-label="Last page">
 			<button mat-icon-button (click)="goToLast()" [disabled]="!hasNext()" aria-label="Last page">
-				<mat-icon starkSvgViewBox svgIcon="page-last"></mat-icon>
+				<mat-icon svgIcon="page-last"></mat-icon>
 			</button>
 		</li>
 	</ul>

diff --git a/packages/stark-ui/src/modules/pagination/pagination.module.ts b/packages/stark-ui/src/modules/pagination/pagination.module.ts
@@ -7,7 +7,6 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatPaginatorModule } from "@angular/material/paginator";
 import { StarkPaginationComponent } from "./components";
-import { StarkSvgViewBoxModule } from "../svg-view-box/svg-view-box.module";
 import { StarkRestrictInputDirectiveModule } from "../restrict-input-directive/restrict-input-directive.module";
 import { StarkDropdownModule } from "../dropdown/dropdown.module";
 
@@ -23,7 +22,6 @@ import { StarkDropdownModule } from "../dropdown/dropdown.module";
 		MatPaginatorModule,
 		MatTooltipModule,
 		StarkRestrictInputDirectiveModule,
-		StarkSvgViewBoxModule,
 		StarkDropdownModule
 	]
 })

diff --git a/packages/stark-ui/src/modules/route-search/components/route-search.component.html b/packages/stark-ui/src/modules/route-search/components/route-search.component.html
@@ -7,7 +7,7 @@
 		(click)="show()"
 		[matTooltip]="'STARK.ROUTE_SEARCH.ABOUT' | translate"
 	>
-		<mat-icon [svgIcon]="icon" starkSvgViewBox></mat-icon>
+		<mat-icon [svgIcon]="icon"></mat-icon>
 	</button>
 	<div [ngClass]="{ hide: hide }" class="route-search-input-wrapper">
 		<mat-form-field floatLabel="never" class="search-field">
@@ -21,7 +21,7 @@
 			<mat-autocomplete #autocompleteComp="matAutocomplete" autoActiveFirstOption class="search-route-autocomplete">
 				<mat-option
 					(onSelectionChange)="redirect(option)"
-					*ngFor="let option of (filteredRouteEntries | async); trackBy: trackPath"
+					*ngFor="let option of filteredRouteEntries | async; trackBy: trackPath"
 					[value]="option.label"
 				>
 					<p>{{ option.label }}</p>

diff --git a/packages/stark-ui/src/modules/svg-view-box/directives/svg-view-box.directive.spec.ts b/packages/stark-ui/src/modules/svg-view-box/directives/svg-view-box.directive.spec.ts
@@ -16,13 +16,13 @@ describe("SvgViewBoxDirective", () => {
 	let fixture: ComponentFixture<TestComponent>;
 
 	function getTemplate(svgViewBoxDirective: string, viewBoxAttribute?: string): string {
-		return (`
+		return `
 <div ${svgViewBoxDirective}>
 	<svg xmlns="http://www.w3.org/2000/svg" ${viewBoxAttribute}>
 		<text font-size="8" font-family="serif" y="6"><![CDATA[dummy icon]]></text>
 	</svg>
 </div>
-`);
+`;
 	}
 
 	function initializeComponentFixture(): void {