refactor(showcase): reformat code with Prettier after Prettier upgrade

NationalBankBelgium · Mar 10, 2021 · dc3a3fb · dc3a3fb
1 parent ad66386
commit dc3a3fb
Show file tree

Hide file tree

Showing 24 changed files with 57 additions and 66 deletions.
diff --git a/showcase/README.md b/showcase/README.md
@@ -179,8 +179,8 @@ Most of the time you won't need to change these, but they allow you to customize
 
 What you need to run this app:
 
--   `node` and `npm`
--   Ensure you're running the latest versions Node `v8.x.x`+ and NPM `5.8.x`+
+- `node` and `npm`
+- Ensure you're running the latest versions Node `v8.x.x`+ and NPM `5.8.x`+
 
 > If you have `nvm` installed, which is highly recommended you can do a `nvm install --lts && nvm use` in `$` to run with the latest Node LTS.
 > You can also have this `zsh` done for you [automatically](https://github.com/creationix/nvm#calling-nvm-use-automatically-in-a-directory-with-a-nvmrc-file)
@@ -189,7 +189,7 @@ What you need to run this app:
 
 Once you have those, you should install these globals with `npm install --global`:
 
--   Windows only: `npm install -g node-pre-gyp`
+- Windows only: `npm install -g node-pre-gyp`
 
 TODO review/complete; see #34
 
@@ -302,12 +302,12 @@ For more details, refer to the deployment section below.
 
 The following are some things that will make AoT compile fail.
 
--   Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
--   Don’t use default exports.
--   Don’t use `form.controls.controlName`, use `form.get(‘controlName’)`
--   Don’t use `control.errors?.someError`, use `control.hasError(‘someError’)`
--   Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
--   @Inputs, @Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public
+- Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
+- Don’t use default exports.
+- Don’t use `form.controls.controlName`, use `form.get(‘controlName’)`
+- Don’t use `control.errors?.someError`, use `control.hasError(‘someError’)`
+- Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
+- @Inputs, @Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public
 
 ### Type definitions
 
@@ -325,7 +325,7 @@ For example:
 
 ```typescript
 declare module "my-module" {
-	export function doesSomething(value: string): string;
+  export function doesSomething(value: string): string;
 }
 ```
 
@@ -353,11 +353,11 @@ TODO explain how stylesheets are loaded.
 
 We have good experience using these editors:
 
--   [Visual Studio Code](https://code.visualstudio.com/)
--   [IntelliJ IDEA](https://www.jetbrains.com/idea/download/)
--   [Webstorm](https://www.jetbrains.com/webstorm/download/)
--   [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
--   [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [IntelliJ IDEA](https://www.jetbrains.com/idea/download/)
+- [Webstorm](https://www.jetbrains.com/webstorm/download/)
+- [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
+- [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
 
 ### Visual Studio Code + Debugger for Chrome
 

diff --git a/showcase/e2e/protractor.browserstack.conf.js b/showcase/e2e/protractor.browserstack.conf.js
@@ -55,7 +55,6 @@ const CAPABILITIES = [
 	}
 ];
 
-
 /**
  * The config object for protractor. @see {@link https://github.com/angular/protractor/blob/master/lib/config.ts}
  * This combines the default config from stark-build and configurations needed to run on {@link https://automate.browserstack.com}
@@ -91,11 +90,11 @@ const config = {
 	/**
 	 * Specifies all the different environments in which the tests are ran.
 	 */
-	multiCapabilities: CAPABILITIES,
+	multiCapabilities: CAPABILITIES
 };
 
 exports.config = {
 	...config,
 	// Map the common capabilities to all the multi capabilities
-	multiCapabilities: config.multiCapabilities.map(caps => ({ ...config.commonCapabilities, ...caps }))
+	multiCapabilities: config.multiCapabilities.map((caps) => ({ ...config.commonCapabilities, ...caps }))
 };
diff --git a/showcase/ghpages-adapt-angular-json.js b/showcase/ghpages-adapt-angular-json.js
@@ -11,7 +11,7 @@ let replacements = [
 replaceValuesInFile("angular.json", replacements);
 
 function replaceValuesInFile(fileName, valueReplacements) {
-	fs.readFile(fileName, "utf8", function(err, data) {
+	fs.readFile(fileName, "utf8", function (err, data) {
 		if (err) {
 			return console.error("Error while reading file => " + err);
 		}
@@ -23,7 +23,7 @@ function replaceValuesInFile(fileName, valueReplacements) {
 			result = result.replace(searchValueRegex, replacement.replaceValue);
 		}
 
-		fs.writeFile(fileName, result, "utf8", function(err) {
+		fs.writeFile(fileName, result, "utf8", function (err) {
 			if (err) {
 				return console.error(err);
 			} else {

diff --git a/showcase/ghpages-adapt-bundle-urls.js b/showcase/ghpages-adapt-bundle-urls.js
@@ -33,7 +33,7 @@ if (process.argv[3]) {
 
 let outputDir = "showcase" + path.sep + "dist";
 
-fs.readdir(outputDir, function(err, items) {
+fs.readdir(outputDir, function (err, items) {
 	if (err) {
 		return console.error("Error while reading directory => " + err);
 	}
@@ -51,7 +51,7 @@ fs.readdir(outputDir, function(err, items) {
 });
 
 function replaceValuesInFile(fileName, valueReplacements) {
-	fs.readFile(fileName, "utf8", function(err, data) {
+	fs.readFile(fileName, "utf8", function (err, data) {
 		if (err) {
 			return console.error("Error while reading file => " + err);
 		}
@@ -68,7 +68,7 @@ function replaceValuesInFile(fileName, valueReplacements) {
 		}
 
 		if (replacementsDone) {
-			fs.writeFile(fileName, result, "utf8", function(err) {
+			fs.writeFile(fileName, result, "utf8", function (err) {
 				if (err) {
 					return console.error(err);
 				} else {

diff --git a/showcase/karma.conf.ci.js b/showcase/karma.conf.ci.js
@@ -10,6 +10,6 @@ const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaCIConfi
 });
 
 // export the configuration function that karma expects and simply return the stark configuration
-module.exports = config => {
+module.exports = (config) => {
 	return config.set(starkShowcaseSpecificConfiguration);
 };
diff --git a/showcase/karma.conf.js b/showcase/karma.conf.js
@@ -19,7 +19,7 @@ const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaConfig,
 
 // export the configuration function that karma expects and simply return the stark configuration
 module.exports = {
-	default: function(config) {
+	default: function (config) {
 		return config.set(starkShowcaseSpecificConfiguration);
 	},
 	karmaTypescriptExclusions: karmaTypescriptExclusions

diff --git a/...demo-ui/components/table-with-collapsible-rows/table-with-collapsible-rows.component.html b/...demo-ui/components/table-with-collapsible-rows/table-with-collapsible-rows.component.html
@@ -1,4 +1,10 @@
-<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [expandedRows]="expandedRows" (rowClicked)="handleRowClicked($event)">
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[expandedRows]="expandedRows"
+	(rowClicked)="handleRowClicked($event)"
+>
 	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_COLLAPSIBLE_ROWS</h1></header>
 	<ng-container *starkTableExpandDetail="let row">
 		<div class="expand-detail-example">

diff --git a/...p/demo-ui/components/table-with-collapsible-rows/table-with-collapsible-rows.component.ts b/...p/demo-ui/components/table-with-collapsible-rows/table-with-collapsible-rows.component.ts
@@ -15,7 +15,7 @@ const DUMMY_DATA: object[] = [
 export class TableWithCollapsibleRowsComponent {
 	public data: object[] = DUMMY_DATA;
 
-	public expandedRows: object[] = []; 
+	public expandedRows: object[] = [];
 
 	public columns: StarkTableColumnProperties[] = [
 		{ name: "id", label: "Id" },

diff --git a/showcase/src/app/demo-ui/pages/generic-search/demo-generic-search-page.component.ts b/showcase/src/app/demo-ui/pages/generic-search/demo-generic-search-page.component.ts
@@ -15,7 +15,8 @@ import { DemoGenericService } from "./services";
 	selector: "demo-generic-search",
 	templateUrl: "./demo-generic-search-page.component.html"
 })
-export class DemoGenericSearchPageComponent extends AbstractStarkSearchComponent<HeroMovie, HeroMovieSearchCriteria>
+export class DemoGenericSearchPageComponent
+	extends AbstractStarkSearchComponent<HeroMovie, HeroMovieSearchCriteria>
 	implements OnInit, OnDestroy {
 	public hideSearch = false;
 

diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html
@@ -10,9 +10,7 @@ <h2 class="mat-display-2" translate>SHOWCASE.STYLEGUIDE.LAYOUT.ANGULAR_FLEX_LAYO
 >
 	<div class="layout-demo" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="10px">
 		<div fxFlex>1</div>
-		<div class="accent" fxFlex fxFlex.gt-md="75%">
-			2
-		</div>
+		<div class="accent" fxFlex fxFlex.gt-md="75%">2</div>
 		<div fxFlex>3</div>
 		<div fxFlex>4</div>
 	</div>
@@ -30,9 +28,7 @@ <h2 class="mat-display-2" translate>SHOWCASE.STYLEGUIDE.LAYOUT.ANGULAR_FLEX_LAYO
 	</div>
 	<div class="layout-demo" gdAuto="row" gdAuto.gt-sm="column" gdGap="10px">
 		<div>1</div>
-		<div class="accent" gdRow.gt-md="1" gdColumn.gt-md="1">
-			2
-		</div>
+		<div class="accent" gdRow.gt-md="1" gdColumn.gt-md="1">2</div>
 		<div>3</div>
 		<div>4</div>
 	</div>

diff --git a/showcase/src/app/welcome/pages/getting-started/getting-started-page.component.html b/showcase/src/app/welcome/pages/getting-started/getting-started-page.component.html
@@ -134,9 +134,7 @@ <h2 id="polyfills_import" class="custom-subtitle">Polyfills</h2>
 			An empty file called <span class="custom-code">polyfills.browser.ts</span> should be created at the following location:
 			<span class="custom-code"> src > polyfills.browser.ts</span>
 		</p>
-		<p>
-			The following polyfills are suitable for most of the cases, especially when targeting Internet Explorer:
-		</p>
+		<p>The following polyfills are suitable for most of the cases, especially when targeting Internet Explorer: </p>
 		<stark-pretty-print [data]="polyfillsBrowsersContent" format="typescript" [enableHighlighting]="true"></stark-pretty-print>
 		<p>
 			For more information about which polyfills are required to support the Angular feature you want to use, feel free to refer to

diff --git a/showcase/src/app/welcome/pages/news/news-page.component.html b/showcase/src/app/welcome/pages/news/news-page.component.html
@@ -1,4 +1,4 @@
-<div class="mat-display-3 ">What's new in Stark?</div>
+<div class="mat-display-3">What's new in Stark?</div>
 
 <div class="top-news">
 	<news-item [release]="'10.0.0-beta.3'" [newsDate]="'06/02/2019'">

diff --git a/showcase/src/assets/examples/collapsible/collapsible-default.html b/showcase/src/assets/examples/collapsible/collapsible-default.html
@@ -2,8 +2,6 @@
 	Any HTML content
 </stark-collapsible>
 
-<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible()" mat-raised-button>
-	Toggle collapsible
-</button>
+<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible()" mat-raised-button>Toggle collapsible</button>
 
 <span class="collapsible-demo-status">{{ collapsed ? "Open" : "Closed" }}</span>
diff --git a/showcase/src/assets/examples/date-picker/ng-model.html b/showcase/src/assets/examples/date-picker/ng-model.html
@@ -19,7 +19,5 @@
 	</mat-error>
 </mat-form-field>
 <div>
-	<mat-checkbox (change)="disabled = !disabled" [value]="disabled">
-		Disabled
-	</mat-checkbox>
+	<mat-checkbox (change)="disabled = !disabled" [value]="disabled">Disabled</mat-checkbox>
 </div>
diff --git a/showcase/src/assets/examples/date-picker/reactive-form.html b/showcase/src/assets/examples/date-picker/reactive-form.html
@@ -17,7 +17,5 @@
 	</mat-error>
 </mat-form-field>
 <div>
-	<mat-checkbox (change)="toggleFormControlState(formControl)" [value]="formControl.disabled">
-		Disabled
-	</mat-checkbox>
+	<mat-checkbox (change)="toggleFormControlState(formControl)" [value]="formControl.disabled">Disabled</mat-checkbox>
 </div>
diff --git a/showcase/src/assets/examples/dropdown/reactive-form-dropdown.html b/showcase/src/assets/examples/dropdown/reactive-form-dropdown.html
@@ -9,9 +9,7 @@
 		required
 	>
 	</stark-dropdown>
-	<mat-error *ngIf="serviceFormControl.touched && serviceFormControl.hasError('required')">
-		This field is required
-	</mat-error>
+	<mat-error *ngIf="serviceFormControl.touched && serviceFormControl.hasError('required')">This field is required</mat-error>
 </mat-form-field>
 
 <br />

diff --git a/showcase/src/assets/examples/flex-layout/flex.html b/showcase/src/assets/examples/flex-layout/flex.html
@@ -1,8 +1,6 @@
 <div class="layout-demo" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="10px">
 	<div fxFlex>1</div>
-	<div class="accent" fxFlex fxFlex.gt-md="75%">
-		2
-	</div>
+	<div class="accent" fxFlex fxFlex.gt-md="75%">2</div>
 	<div fxFlex>3</div>
 	<div fxFlex>4</div>
 </div>
diff --git a/showcase/src/assets/examples/flex-layout/grid.html b/showcase/src/assets/examples/flex-layout/grid.html
@@ -1,8 +1,6 @@
 <div class="layout-demo" gdAuto="row" gdAuto.gt-sm="column" gdGap="10px">
 	<div>1</div>
-	<div class="accent" gdRow.gt-md="1" gdColumn.gt-md="1">
-		2
-	</div>
+	<div class="accent" gdRow.gt-md="1" gdColumn.gt-md="1">2</div>
 	<div>3</div>
 	<div>4</div>
 </div>
diff --git a/showcase/src/assets/examples/generic-search/demo-generic-search-page.component.ts b/showcase/src/assets/examples/generic-search/demo-generic-search-page.component.ts
@@ -14,7 +14,8 @@ import { DemoGenericService } from "./services";
 	selector: "demo-generic-search",
 	templateUrl: "./demo-generic-search.component.html"
 })
-export class DemoGenericSearchComponent extends AbstractStarkSearchComponent<HeroMovie, HeroMovieSearchCriteria>
+export class DemoGenericSearchComponent
+	extends AbstractStarkSearchComponent<HeroMovie, HeroMovieSearchCriteria>
 	implements OnInit, OnDestroy {
 	public hideSearch = false;
 

diff --git a/showcase/src/assets/examples/message-pane/message-pane.html b/showcase/src/assets/examples/message-pane/message-pane.html
@@ -9,9 +9,7 @@
 	<fieldset>
 		<legend>Display alignment</legend>
 		<div class="button-group set-msg-position">
-			<button [ngClass]="{ active: messagePanePosition === 'left' }" (click)="changeMessagePanePosition('left')">
-				Left
-			</button>
+			<button [ngClass]="{ active: messagePanePosition === 'left' }" (click)="changeMessagePanePosition('left')">Left</button>
 			<button [ngClass]="{ active: messagePanePosition === 'center' }" (click)="changeMessagePanePosition('center')">Center</button>
 			<button [ngClass]="{ active: messagePanePosition === 'right' }" (click)="changeMessagePanePosition('right')">Right</button>
 		</div>

diff --git a/showcase/src/assets/examples/table/with-collapsible-rows/table.html b/showcase/src/assets/examples/table/with-collapsible-rows/table.html
@@ -1,4 +1,10 @@
-<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [expandedRows]="expandedRows" (rowClicked)="handleRowClicked($event)">
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[expandedRows]="expandedRows"
+	(rowClicked)="handleRowClicked($event)"
+>
 	<header><h1 class="mb0" translate>Table with collapsible rows</h1></header>
 	<ng-container *starkTableExpandDetail="let row">
 		<!-- can be anything here -->

diff --git a/showcase/src/assets/examples/table/with-collapsible-rows/table.ts b/showcase/src/assets/examples/table/with-collapsible-rows/table.ts
@@ -15,7 +15,7 @@ const DUMMY_DATA: object[] = [
 export class TableWithCollapsibleRowsComponent {
 	public data: object[] = DUMMY_DATA;
 
-	public expandedRows: object[] = []; 
+	public expandedRows: object[] = [];
 
 	public columns: StarkTableColumnProperties[] = [
 		{ name: "id", label: "Id" },

diff --git a/showcase/src/assets/examples/toast/toast.html b/showcase/src/assets/examples/toast/toast.html
@@ -1,9 +1,7 @@
 <button class="toast-demo-button" color="primary" mat-raised-button (click)="openToast(exampleMessage)">Info</button>
 <button class="toast-demo-button" color="alert" mat-raised-button (click)="openErrorToast(exampleMessage)">Error</button>
 <button class="toast-demo-button" color="warn" mat-raised-button (click)="openWarningToast(exampleMessage)">Warning</button>
-<button class="toast-demo-button" color="primary" mat-stroked-button (click)="openToast(exampleMessage, 0, 'dismiss')">
-	Action
-</button>
+<button class="toast-demo-button" color="primary" mat-stroked-button (click)="openToast(exampleMessage, 0, 'dismiss')">Action</button>
 <button class="toast-demo-button" color="alt" (click)="openToast(exampleMessage, 8000)" mat-stroked-button>Long Delay</button>
 <button class="toast-demo-button" color="alt" (click)="openToast(exampleMessage, 2000)" mat-stroked-button>Short Delay</button>
 <button class="toast-demo-button" color="alt" [disabled]="hideDisabled" (click)="hideToast()" mat-stroked-button>Hide the toast</button>

diff --git a/showcase/src/index.html b/showcase/src/index.html
@@ -6,7 +6,7 @@
 		<meta charset="utf-8" />
 
 		<script>
-			(function() {
+			(function () {
 				var redirect = sessionStorage.redirect;
 				delete sessionStorage.redirect;
 				if (redirect && redirect != location.href) {