chore: Update to Prettier 1.15, run on all ts & html files

Closes #38. Now all HTML templates in the admin-ui are now being formatted by Prettier. Looks weird in certain cases but overall should be better.

.lintstagedrc.yml

@@ -3,6 +3,9 @@ linters:
     - yarn lint:admin-ui
     - yarn format
     - git add
+  admin-ui/**/*.html:
+    - yarn format
+    - git add
   server/**/*.ts:
     - yarn lint:server
     - yarn format

admin-ui/src/app/catalog/components/apply-facet-dialog/apply-facet-dialog.component.html

@@ -3,13 +3,13 @@
 <vdr-facet-value-selector (selectedValuesChange)="selectedValues = $event"></vdr-facet-value-selector>
 
 <ng-template vdrDialogButtons>
-    <button type="button"
-            class="btn"
-            (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button type="submit"
-            (click)="selectValues()"
-            [disabled]="selectedValues.length === 0"
-            class="btn btn-primary">
+    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
+    <button
+        type="submit"
+        (click)="selectValues()"
+        [disabled]="selectedValues.length === 0"
+        class="btn btn-primary"
+    >
         {{ 'catalog.apply-facets' | translate }}
     </button>
 </ng-template>

admin-ui/src/app/catalog/components/asset-file-input/asset-file-input.component.html

@@ -1,22 +1,20 @@
-<input type="file"
-       class="file-input"
-       #fileInput
-       (change)="select($event)" multiple>
+<input type="file" class="file-input" #fileInput (change)="select($event)" multiple />
 <button class="btn btn-primary" (click)="fileInput.click()">
     <clr-icon shape="upload-cloud"></clr-icon>
     {{ 'catalog.upload-assets' | translate }}
 </button>
-<div class="drop-zone"
-     [ngStyle]="dropZoneStyle"
-     [class.visible]="dragging"
-     [class.dragging-over]="overDropZone"
-     (dragenter)="overDropZone = true"
-     (dragleave)="overDropZone = false"
-     (dragover)="onDragOver($event)"
-     (drop)="onDrop($event)"
-     #dropZone>
-    <div class="drop-label"
-         (dragenter)="overDropZone = true">
+<div
+    class="drop-zone"
+    [ngStyle]="dropZoneStyle"
+    [class.visible]="dragging"
+    [class.dragging-over]="overDropZone"
+    (dragenter)="overDropZone = true"
+    (dragleave)="overDropZone = false"
+    (dragover)="onDragOver($event)"
+    (drop)="onDrop($event)"
+    #dropZone
+>
+    <div class="drop-label" (dragenter)="overDropZone = true">
         <clr-icon shape="upload-cloud" size="32"></clr-icon>
         {{ 'catalog.drop-files-to-upload' | translate }}
     </div>

admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.html

@@ -1,44 +1,48 @@
 <div class="gallery">
-    <div class="card"
-         *ngFor="let asset of assets"
-         (click)="toggleSelection($event, asset)"
-         [class.selected]="isSelected(asset)">
+    <div
+        class="card"
+        *ngFor="let asset of assets"
+        (click)="toggleSelection($event, asset)"
+        [class.selected]="isSelected(asset)"
+    >
         <div class="card-img">
-            <div class="selected-checkbox">
-                <clr-icon shape="check-circle" size="32"></clr-icon>
-            </div>
-            <img [src]="asset.preview + '?preset=thumb'">
-        </div>
-        <div class="detail">
-            {{ asset.name }}
+            <div class="selected-checkbox"><clr-icon shape="check-circle" size="32"></clr-icon></div>
+            <img [src]="asset.preview + '?preset=thumb'" />
         </div>
+        <div class="detail">{{ asset.name }}</div>
     </div>
 </div>
 <div class="info-bar">
     <div class="card">
         <div class="card-img">
             <div class="placeholder" *ngIf="selection.length === 0">
-                <clr-icon shape="image"
-                          size="128"></clr-icon>
+                <clr-icon shape="image" size="128"></clr-icon>
                 <div>{{ 'catalog.no-selection' | translate }}</div>
             </div>
-            <img class="preview"
-                 *ngIf="selection.length >= 1"
-                 [src]="lastSelected().preview + '?preset=medium'">
+            <img
+                class="preview"
+                *ngIf="selection.length >= 1"
+                [src]="lastSelected().preview + '?preset=medium'"
+            />
         </div>
-        <div class="card-block details"
-             *ngIf="selection.length >= 1">
+        <div class="card-block details" *ngIf="selection.length >= 1">
             <div class="name">{{ lastSelected().name }}</div>
-            <div>{{ 'catalog.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>
             <div>
-                <a [href]="lastSelected().source" target="_blank">{{ 'catalog.open-asset-source' | translate }}</a>
+                {{ 'catalog.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}
+            </div>
+            <div>
+                <a [href]="lastSelected().source" target="_blank">
+                    {{ 'catalog.open-asset-source' | translate }}
+                </a>
             </div>
         </div>
     </div>
     <div class="card stack" [class.visible]="selection.length > 1"></div>
     <div class="selection-count" [class.visible]="selection.length > 1">
         <clr-tooltip>
-            <div clrTooltipTrigger class="trigger">{{ 'catalog.assets-selected-count' | translate: { count: selection.length } }}</div>
+            <div clrTooltipTrigger class="trigger">
+                {{ 'catalog.assets-selected-count' | translate: { count: selection.length } }}
+            </div>
             <clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
                 <ul>
                     <li *ngFor="let asset of selection">{{ asset.name }}</li>

admin-ui/src/app/catalog/components/asset-list/asset-list.component.html

@@ -1,19 +1,27 @@
 <vdr-action-bar>
     <vdr-ab-right>
-        <vdr-asset-file-input (selectFiles)="filesSelected($event)"
-                              dropZoneTarget=".content-area"></vdr-asset-file-input>
+        <vdr-asset-file-input
+            (selectFiles)="filesSelected($event)"
+            dropZoneTarget=".content-area"
+        ></vdr-asset-file-input>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-asset-gallery [assets]="items$ | async | paginate : (paginationConfig$ | async) || {}"
-                   [multiSelect]="true"></vdr-asset-gallery>
+<vdr-asset-gallery
+    [assets]="items$ | async | paginate: (paginationConfig$ | async) || {}"
+    [multiSelect]="true"
+></vdr-asset-gallery>
 
 <div class="paging-controls">
-    <vdr-items-per-page-controls [itemsPerPage]="itemsPerPage$ | async"
-                                 (itemsPerPageChange)="setItemsPerPage($event)"></vdr-items-per-page-controls>
+    <vdr-items-per-page-controls
+        [itemsPerPage]="itemsPerPage$ | async"
+        (itemsPerPageChange)="setItemsPerPage($event)"
+    ></vdr-items-per-page-controls>
 
-    <vdr-pagination-controls [currentPage]="currentPage$ | async"
-                             [itemsPerPage]="itemsPerPage$ | async"
-                             [totalItems]="totalItems$ | async"
-                             (pageChange)="setPageNumber($event)"></vdr-pagination-controls>
+    <vdr-pagination-controls
+        [currentPage]="currentPage$ | async"
+        [itemsPerPage]="itemsPerPage$ | async"
+        [totalItems]="totalItems$ | async"
+        (pageChange)="setPageNumber($event)"
+    ></vdr-pagination-controls>
 </div>

admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html

@@ -1,33 +1,36 @@
 <ng-template vdrDialogTitle>
     <div class="title-row">
-    {{ 'catalog.select-assets' | translate }}
-    <vdr-asset-file-input (selectFiles)="createAssets($event)"
-                          dropZoneTarget=".modal-content"></vdr-asset-file-input>
+        {{ 'catalog.select-assets' | translate }}
+        <vdr-asset-file-input
+            (selectFiles)="createAssets($event)"
+            dropZoneTarget=".modal-content"
+        ></vdr-asset-file-input>
     </div>
 </ng-template>
 
-<vdr-asset-gallery [assets]="assets$ | async | paginate: paginationConfig"
-                   [multiSelect]="true"
-                   (selectionChange)="selection = $event"></vdr-asset-gallery>
+<vdr-asset-gallery
+    [assets]="assets$ | async | paginate: paginationConfig"
+    [multiSelect]="true"
+    (selectionChange)="selection = $event"
+></vdr-asset-gallery>
 
 <div class="paging-controls">
-    <vdr-items-per-page-controls [itemsPerPage]="paginationConfig.itemsPerPage"
-                                 (itemsPerPageChange)="itemsPerPageChange($event)"></vdr-items-per-page-controls>
+    <vdr-items-per-page-controls
+        [itemsPerPage]="paginationConfig.itemsPerPage"
+        (itemsPerPageChange)="itemsPerPageChange($event)"
+    ></vdr-items-per-page-controls>
 
-    <vdr-pagination-controls [currentPage]="paginationConfig.currentPage"
-                             [itemsPerPage]="paginationConfig.itemsPerPage"
-                             [totalItems]="paginationConfig.totalItems"
-                             (pageChange)="pageChange($event)"></vdr-pagination-controls>
+    <vdr-pagination-controls
+        [currentPage]="paginationConfig.currentPage"
+        [itemsPerPage]="paginationConfig.itemsPerPage"
+        [totalItems]="paginationConfig.totalItems"
+        (pageChange)="pageChange($event)"
+    ></vdr-pagination-controls>
 </div>
 
 <ng-template vdrDialogButtons>
-    <button type="button"
-            class="btn"
-            (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button type="submit"
-            (click)="select()"
-            class="btn btn-primary"
-            [disabled]="selection.length === 0">
+    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
+    <button type="submit" (click)="select()" class="btn btn-primary" [disabled]="selection.length === 0">
         {{ 'catalog.add-asset-to-product' | translate: { count: selection.length } }}
     </button>
 </ng-template>

admin-ui/src/app/catalog/components/create-option-group-dialog/create-option-group-dialog.component.html

@@ -1,18 +1,21 @@
 <ng-template vdrDialogTitle>{{ 'catalog.create-new-option-group' | translate }}</ng-template>
 
-<vdr-create-option-group-form #createOptionGroupForm
-                              [productId]="productId"
-                              [productName]="productName"></vdr-create-option-group-form>
+<vdr-create-option-group-form
+    #createOptionGroupForm
+    [productId]="productId"
+    [productName]="productName"
+></vdr-create-option-group-form>
 
 <ng-template vdrDialogButtons>
-    <button type="button"
-            class="btn"
-            (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button type="submit"
-            (click)="createOptionGroup()"
-            class="btn btn-primary"
-            [disabled]="createOptionGroupForm.optionGroupForm.invalid || createOptionGroupForm.optionGroupForm.pristine">
+    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
+    <button
+        type="submit"
+        (click)="createOptionGroup()"
+        class="btn btn-primary"
+        [disabled]="
+            createOptionGroupForm.optionGroupForm.invalid || createOptionGroupForm.optionGroupForm.pristine
+        "
+    >
         {{ 'catalog.create-group' | translate }}
     </button>
 </ng-template>
-

admin-ui/src/app/catalog/components/create-option-group-form/create-option-group-form.component.html

@@ -1,14 +1,18 @@
 <form class="form" [formGroup]="optionGroupForm">
     <section class="form-block">
         <vdr-form-field [label]="'catalog.option-group-name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)">
+            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
         </vdr-form-field>
         <vdr-form-field [label]="'catalog.option-group-code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
-        <vdr-form-field [label]="'catalog.option-group-options-label' | translate"
-                        [tooltip]="'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }"
-                        for="options">
+        <vdr-form-field
+            [label]="'catalog.option-group-options-label' | translate"
+            [tooltip]="
+                'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }
+            "
+            for="options"
+        >
             <textarea id="options" type="text" formControlName="options" rows="10"></textarea>
         </vdr-form-field>
     </section>

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -1,88 +1,101 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <vdr-language-selector [availableLanguageCodes]="availableLanguages$ | async"
-                               [currentLanguageCode]="languageCode$ | async"
-                               (languageCodeChange)="setLanguage($event)"></vdr-language-selector>
+        <vdr-language-selector
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="languageCode$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
 
-
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="facetForm.invalid || facetForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="facetForm.invalid || facetForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="facetForm.invalid || facetForm.pristine">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="facetForm.invalid || facetForm.pristine"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="facetForm" >
+<form class="form" [formGroup]="facetForm">
     <section class="form-block" formGroupName="facet">
         <label>{{ 'catalog.facet' | translate }}</label>
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)">
+            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
         </vdr-form-field>
         <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
 
         <section formGroupName="customFields" *ngIf="customFields.length">
             <label>{{ 'catalog.custom-fields' }}</label>
             <ng-container *ngFor="let customField of customFields">
-                <vdr-custom-field-control *ngIf="customFieldIsSet(customField.name)"
-                                          [customFieldsFormGroup]="facetForm.get(['facet', 'customFields'])"
-                                          [customField]="customField"></vdr-custom-field-control>
+                <vdr-custom-field-control
+                    *ngIf="customFieldIsSet(customField.name)"
+                    [customFieldsFormGroup]="facetForm.get(['facet', 'customFields'])"
+                    [customField]="customField"
+                ></vdr-custom-field-control>
             </ng-container>
         </section>
     </section>
 
     <section class="form-block" *ngIf="!(isNew$ | async)">
-
         <label>{{ 'catalog.facet-values' | translate }}</label>
 
         <table class="facet-values-list table" formArrayName="values" *ngIf="0 < getValuesFormArray().length">
             <thead>
-            <tr>
-                <th>{{ 'common.name' | translate }}</th>
-                <th>{{ 'common.code' | translate }}</th>
-                <ng-container *ngFor="let customField of customValueFields">
-                    <th>{{ customField.name }}</th>
-                </ng-container>
-            </tr>
+                <tr>
+                    <th>{{ 'common.name' | translate }}</th>
+                    <th>{{ 'common.code' | translate }}</th>
+                    <ng-container *ngFor="let customField of customValueFields">
+                        <th>{{ customField.name }}</th>
+                    </ng-container>
+                </tr>
             </thead>
             <tbody>
-            <tr class="variant"
-                *ngFor="let value of getValuesFormArray().controls; let i = index"
-                [formGroupName]="i">
-                <td>
-                    <input type="text" formControlName="name" (input)="updateValueCode($event.target.value, i)">
-                </td>
-                <td>
-                    <input type="text" formControlName="code" readonly>
-                </td>
-                <ng-container *ngFor="let customField of customValueFields">
+                <tr
+                    class="variant"
+                    *ngFor="let value of getValuesFormArray().controls; let i = index"
+                    [formGroupName]="i"
+                >
                     <td>
-                        <vdr-custom-field-control *ngIf="customValueFieldIsSet(i, customField.name)"
-                                                  [showLabel]="false"
-                                                  [customFieldsFormGroup]="facetForm.get(['values', i, 'customFields'])"
-                                                  [customField]="customField"></vdr-custom-field-control>
+                        <input
+                            type="text"
+                            formControlName="name"
+                            (input)="updateValueCode($event.target.value, i)"
+                        />
                     </td>
-                </ng-container>
-            </tr>
+                    <td><input type="text" formControlName="code" readonly /></td>
+                    <ng-container *ngFor="let customField of customValueFields">
+                        <td>
+                            <vdr-custom-field-control
+                                *ngIf="customValueFieldIsSet(i, customField.name)"
+                                [showLabel]="false"
+                                [customFieldsFormGroup]="facetForm.get(['values', i, 'customFields'])"
+                                [customField]="customField"
+                            ></vdr-custom-field-control>
+                        </td>
+                    </ng-container>
+                </tr>
             </tbody>
         </table>
 
         <div>
-            <button type="button"
-                    class="btn btn-primary"
-                    (click)="addFacetValue()">
+            <button type="button" class="btn btn-primary" (click)="addFacetValue()">
                 <clr-icon shape="add"></clr-icon>
                 {{ 'catalog.add-facet-value' | translate }}
             </button>
         </div>
-
     </section>
 </form>

admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
@@ -26,10 +28,11 @@
             <vdr-chip *ngFor="let value of facet.values">{{ value.name }}</vdr-chip>
         </td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', facet.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', facet.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/catalog/components/facet-value-selector/facet-value-selector.component.html

@@ -1,10 +1,11 @@
-<ng-select [items]="facetValues$ | async"
-           [addTag]="true"
-           [hideSelected]="true"
-           groupBy="facetName"
-           bindValue="value"
-           multiple="true"
-           appendTo="body"
-           bindLabel="name"
-           (change)="onChange($event)">
-</ng-select>
+<ng-select
+    [items]="facetValues$ | async"
+    [addTag]="true"
+    [hideSelected]="true"
+    groupBy="facetName"
+    bindValue="value"
+    multiple="true"
+    appendTo="body"
+    bindLabel="name"
+    (change)="onChange($event)"
+></ng-select>

admin-ui/src/app/catalog/components/generate-product-variants/generate-product-variants.component.html

@@ -5,14 +5,13 @@
         <clr-icon shape="caret down"></clr-icon>
     </button>
     <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button"
-                clrDropdownItem
-                (click)="generateProductVariants()">{{ 'catalog.generate-variants-default-only' | translate }}</button>
-        <button type="button"
-                clrDropdownItem
-                (click)="startProductVariantsWizard()">{{ 'catalog.generate-variants-with-options' | translate }}</button>
+        <button type="button" clrDropdownItem (click)="generateProductVariants()">
+            {{ 'catalog.generate-variants-default-only' | translate }}
+        </button>
+        <button type="button" clrDropdownItem (click)="startProductVariantsWizard()">
+            {{ 'catalog.generate-variants-with-options' | translate }}
+        </button>
     </clr-dropdown-menu>
 </clr-dropdown>
 
-<vdr-product-variants-wizard #productVariantsWizard
-                             [product]="product"></vdr-product-variants-wizard>
+<vdr-product-variants-wizard #productVariantsWizard [product]="product"></vdr-product-variants-wizard>

admin-ui/src/app/catalog/components/product-assets/product-assets.component.html

@@ -1,11 +1,9 @@
 <div class="card">
     <div class="card-img">
         <div class="featured-asset">
-            <img *ngIf="featuredAsset"
-                 [src]="featuredAsset!.preview + '?preset=small'">
+            <img *ngIf="featuredAsset" [src]="featuredAsset!.preview + '?preset=small'" />
             <div class="placeholder" *ngIf="!featuredAsset">
-                <clr-icon shape="image"
-                          size="128"></clr-icon>
+                <clr-icon shape="image" size="128"></clr-icon>
                 <div>{{ 'catalog.no-featured-asset' | translate }}</div>
             </div>
         </div>
@@ -14,27 +12,35 @@
         <div class="all-assets">
             <ng-container *ngFor="let asset of assets">
                 <clr-dropdown>
-                    <div class="asset-thumb"
-                         clrDropdownTrigger
-                         [class.featured]="isFeatured(asset)"
-                         [title]=""
-                         tabindex="0">
-                        <img [src]="asset.preview + '?preset=tiny'">
+                    <div
+                        class="asset-thumb"
+                        clrDropdownTrigger
+                        [class.featured]="isFeatured(asset)"
+                        [title]=""
+                        tabindex="0"
+                    >
+                        <img [src]="asset.preview + '?preset=tiny'" />
                     </div>
-                    <clr-dropdown-menu *clrIfOpen
-                                       clrPosition="bottom-right">
-                        <button type="button"
-                                [disabled]="isFeatured(asset)"
-                                clrDropdownItem
-                                (click)="setAsFeatured(asset)">{{ 'catalog.set-as-featured-asset' | translate }}</button>
+                    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                        <button
+                            type="button"
+                            [disabled]="isFeatured(asset)"
+                            clrDropdownItem
+                            (click)="setAsFeatured(asset)"
+                        >
+                            {{ 'catalog.set-as-featured-asset' | translate }}
+                        </button>
                         <div class="dropdown-divider"></div>
-                        <button type="button"
-                                class="remove-asset"
-                                clrDropdownItem
-                                (click)="removeAsset(asset)">{{ 'catalog.remove-asset' | translate }}</button>
+                        <button
+                            type="button"
+                            class="remove-asset"
+                            clrDropdownItem
+                            (click)="removeAsset(asset)"
+                        >
+                            {{ 'catalog.remove-asset' | translate }}
+                        </button>
                     </clr-dropdown-menu>
                 </clr-dropdown>
-
             </ng-container>
         </div>
     </div>

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -1,93 +1,120 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <vdr-language-selector [availableLanguageCodes]="availableLanguages$ | async"
-                               [currentLanguageCode]="languageCode$ | async"
-                               (languageCodeChange)="setLanguage($event)"></vdr-language-selector>
+        <vdr-language-selector
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="languageCode$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
 
-
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="productForm.invalid || productForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="productForm.invalid || productForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="(productForm.invalid || productForm.pristine) && !assetsChanged()">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="(productForm.invalid || productForm.pristine) && !assetsChanged()"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="productForm" *ngIf="product$ | async as product">
-
+<form class="form" [formGroup]="productForm" *ngIf="(product$ | async) as product">
     <clr-tabs>
         <clr-tab>
-            <button clrTabLink  (click)="navigateToTab('details')">{{ 'catalog.product-details' | translate }}</button>
+            <button clrTabLink (click)="navigateToTab('details')">
+                {{ 'catalog.product-details' | translate }}
+            </button>
             <clr-tab-content *clrIfActive="(activeTab$ | async) === 'details'">
                 <div class="clr-row">
                     <div class="clr-col">
                         <section class="form-block" formGroupName="product">
                             <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
-                                <input id="name" type="text" formControlName="name" (input)="updateSlug($event.target.value)">
+                                <input
+                                    id="name"
+                                    type="text"
+                                    formControlName="name"
+                                    (input)="updateSlug($event.target.value)"
+                                />
                             </vdr-form-field>
                             <vdr-form-field [label]="'catalog.slug' | translate" for="slug">
-                                <input id="slug" type="text" formControlName="slug">
+                                <input id="slug" type="text" formControlName="slug" />
                             </vdr-form-field>
-                            <vdr-rich-text-editor formControlName="description"
-                                                  [label]="'common.description' | translate"></vdr-rich-text-editor>
+                            <vdr-rich-text-editor
+                                formControlName="description"
+                                [label]="'common.description' | translate"
+                            ></vdr-rich-text-editor>
 
                             <section formGroupName="customFields" *ngIf="customFields.length">
                                 <label>{{ 'common.custom-fields' | translate }}</label>
                                 <ng-container *ngFor="let customField of customFields">
-                                    <vdr-custom-field-control *ngIf="customFieldIsSet(customField.name)"
-                                                              [customFieldsFormGroup]="productForm.get(['product', 'customFields'])"
-                                                              [customField]="customField"></vdr-custom-field-control>
+                                    <vdr-custom-field-control
+                                        *ngIf="customFieldIsSet(customField.name)"
+                                        [customFieldsFormGroup]="productForm.get(['product', 'customFields'])"
+                                        [customField]="customField"
+                                    ></vdr-custom-field-control>
                                 </ng-container>
                             </section>
                         </section>
                     </div>
                     <div class="clr-col-md-auto">
-                        <vdr-product-assets [assets]="product.assets"
-                                            [featuredAsset]="product.featuredAsset"
-                                            (change)="assetChanges = $event"></vdr-product-assets>
+                        <vdr-product-assets
+                            [assets]="product.assets"
+                            [featuredAsset]="product.featuredAsset"
+                            (change)="assetChanges = $event"
+                        ></vdr-product-assets>
                     </div>
                 </div>
             </clr-tab-content>
         </clr-tab>
         <clr-tab>
-            <button clrTabLink (click)="navigateToTab('variants')">{{ 'catalog.product-variants' | translate }}</button>
+            <button clrTabLink (click)="navigateToTab('variants')">
+                {{ 'catalog.product-variants' | translate }}
+            </button>
             <clr-tab-content *clrIfActive="(activeTab$ | async) === 'variants'">
                 <section class="form-block" *ngIf="!(isNew$ | async)">
-                    <vdr-generate-product-variants *ngIf="(variants$ | async)?.length === 0; else variants"
-                                                   [product]="product"></vdr-generate-product-variants>
+                    <vdr-generate-product-variants
+                        *ngIf="(variants$ | async)?.length === 0; else: variants"
+                        [product]="product"
+                    ></vdr-generate-product-variants>
 
                     <ng-template #variants>
-                        <vdr-form-item *ngIf="product?.optionGroups.length"
-                                       [label]="'catalog.product-option-groups' | translate">
+                        <vdr-form-item
+                            *ngIf="product?.optionGroups.length"
+                            [label]="'catalog.product-option-groups' | translate"
+                        >
                             <div class="option-groups-list">
-                                <div *ngFor="let optionGroup of product?.optionGroups"
-                                     class="option-group">
+                                <div *ngFor="let optionGroup of product?.optionGroups" class="option-group">
                                     <vdr-chip>{{ optionGroup.name }} ({{ optionGroup.code }})</vdr-chip>
                                 </div>
                             </div>
                         </vdr-form-item>
 
-                        <vdr-product-variants-list [variants]="variants$ | async"
-                                                   [productVariantsFormArray]="productForm.get('variants')"
-                                                   [taxCategories]="taxCategories$ | async"
-                                                   #productVariantsList>
-                            <button class="btn btn-sm btn-secondary" (click)="selectFacetValue(productVariantsList.selectedVariantIds)">
+                        <vdr-product-variants-list
+                            [variants]="variants$ | async"
+                            [productVariantsFormArray]="productForm.get('variants')"
+                            [taxCategories]="taxCategories$ | async"
+                            #productVariantsList
+                        >
+                            <button
+                                class="btn btn-sm btn-secondary"
+                                (click)="selectFacetValue(productVariantsList.selectedVariantIds)"
+                            >
                                 {{ 'catalog.apply-facets' | translate }}
                             </button>
                         </vdr-product-variants-list>
                     </ng-template>
-
                 </section>
             </clr-tab-content>
         </clr-tab>
     </clr-tabs>
-
-
-
 </form>

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'catalog.slug' | translate }}</vdr-dt-column>
@@ -24,10 +26,11 @@
         <td class="left">{{ product.slug }}</td>
         <td class="left">{{ product.description }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', product.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', product.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -1,18 +1,23 @@
 <div class="with-selected">
-    <vdr-select-toggle size="small"
-                       [selected]="areAllSelected()"
-                       (selectedChange)="toggleSelectAll()"></vdr-select-toggle>
+    <vdr-select-toggle
+        size="small"
+        [selected]="areAllSelected()"
+        (selectedChange)="toggleSelectAll()"
+    ></vdr-select-toggle>
     <ng-container *ngIf="selectedVariantIds.length">
-        <label>{{ 'catalog.with-selected' | translate }}:</label><ng-content></ng-content>
+        <label>{{ 'catalog.with-selected' | translate }}:</label>
+        <ng-content></ng-content>
     </ng-container>
 </div>
 <div class="variants-list">
     <div class="variant-container card" *ngFor="let variant of variants; let i = index">
         <div class="card-block header-row">
             <div class="toggle">
-                <vdr-select-toggle size="small"
-                                   [selected]="isVariantSelected(variant.id)"
-                                   (selectedChange)="toggleSelectVariant(variant.id)"></vdr-select-toggle>
+                <vdr-select-toggle
+                    size="small"
+                    [selected]="isVariantSelected(variant.id)"
+                    (selectedChange)="toggleSelectVariant(variant.id)"
+                ></vdr-select-toggle>
             </div>
             <div class="options">
                 <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
@@ -29,13 +34,13 @@
                 <div class="sku">
                     <clr-input-container>
                         <label>{{ 'catalog.sku' | translate }}</label>
-                        <input clrInput type="text" [formControl]="formArray.get([i, 'sku'])">
+                        <input clrInput type="text" [formControl]="formArray.get([i, 'sku'])" />
                     </clr-input-container>
                 </div>
                 <div class="name">
                     <clr-input-container>
                         <label>{{ 'common.name' | translate }}</label>
-                        <input clrInput type="text" [formControl]="formArray.get([i, 'name'])">
+                        <input clrInput type="text" [formControl]="formArray.get([i, 'name'])" />
                     </clr-input-container>
                 </div>
             </div>
@@ -43,23 +48,27 @@
                 <div class="tax-category">
                     <clr-select-container>
                         <label>{{ 'catalog.tax-category' | translate }}</label>
-                        <select clrSelect name="options"
-                                [formControl]="formArray.get([i, 'taxCategoryId'])">
-                            <option *ngFor="let taxCategory of taxCategories"
-                                    [value]="taxCategory.id">{{ taxCategory.name }}</option>
+                        <select clrSelect name="options" [formControl]="formArray.get([i, 'taxCategoryId'])">
+                            <option *ngFor="let taxCategory of taxCategories" [value]="taxCategory.id">
+                                {{ taxCategory.name }}
+                            </option>
                         </select>
                     </clr-select-container>
                 </div>
                 <div class="price">
                     <clr-input-container>
                         <label>{{ 'catalog.price' | translate }}</label>
-                        <vdr-currency-input clrInput
-                                            [formControl]="formArray.get([i, 'price'])"></vdr-currency-input>
+                        <vdr-currency-input
+                            clrInput
+                            [formControl]="formArray.get([i, 'price'])"
+                        ></vdr-currency-input>
                     </clr-input-container>
                 </div>
-                <vdr-variant-price-detail [price]="formArray.get([i, 'price'])!.value"
-                                          [priceIncludesTax]="variant.priceIncludesTax"
-                                          [taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"></vdr-variant-price-detail>
+                <vdr-variant-price-detail
+                    [price]="formArray.get([i, 'price'])!.value"
+                    [priceIncludesTax]="variant.priceIncludesTax"
+                    [taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
+                ></vdr-variant-price-detail>
             </div>
         </div>
     </div>

admin-ui/src/app/catalog/components/product-variants-wizard/product-variants-wizard.component.html

@@ -8,22 +8,33 @@
 
     <clr-wizard-page>
         <ng-template clrPageTitle>{{ 'catalog.create-new-option-group' | translate }}</ng-template>
-        <vdr-create-option-group-form #createOptionGroupForm
-                                      [productName]="product?.name"
-                                      [productId]="product?.id"></vdr-create-option-group-form>
-        <button (click)="createOptionGroup()"
-                class="btn btn-primary"
-                [disabled]="createOptionGroupForm.optionGroupForm.invalid || createOptionGroupForm.optionGroupForm.pristine">
+        <vdr-create-option-group-form
+            #createOptionGroupForm
+            [productName]="product?.name"
+            [productId]="product?.id"
+        ></vdr-create-option-group-form>
+        <button
+            (click)="createOptionGroup()"
+            class="btn btn-primary"
+            [disabled]="
+                createOptionGroupForm.optionGroupForm.invalid ||
+                createOptionGroupForm.optionGroupForm.pristine
+            "
+        >
             {{ 'catalog.create-group' | translate }}
         </button>
     </clr-wizard-page>
 
-    <clr-wizard-page (clrWizardPageOnLoad)="selectOptionGroup.refresh()"
-                     [clrWizardPageNextDisabled]="selectedOptionGroups.length < 1">
+    <clr-wizard-page
+        (clrWizardPageOnLoad)="selectOptionGroup.refresh()"
+        [clrWizardPageNextDisabled]="selectedOptionGroups.length < 1"
+    >
         <ng-template clrPageTitle>{{ 'catalog.select-option-group' | translate }}</ng-template>
-        <vdr-select-option-group #selectOptionGroup
-                                 [selectedGroups]="selectedOptionGroups"
-                                 (selectGroup)="toggleSelectedGroup($event)"></vdr-select-option-group>
+        <vdr-select-option-group
+            #selectOptionGroup
+            [selectedGroups]="selectedOptionGroups"
+            (selectGroup)="toggleSelectedGroup($event)"
+        ></vdr-select-option-group>
     </clr-wizard-page>
 
     <clr-wizard-page>
@@ -32,12 +43,10 @@
             <vdr-currency-input [(ngModel)]="defaultPrice"></vdr-currency-input>
         </vdr-form-field>
         <vdr-form-field [label]="'catalog.default-sku'">
-            <input type="text" [(ngModel)]="defaultSku">
+            <input type="text" [(ngModel)]="defaultSku" />
         </vdr-form-field>
         <h4>{{ 'catalog.selected-option-groups' | translate }}:</h4>
-        <vdr-chip *ngFor="let selectedGroup of selectedOptionGroups">
-            {{ selectedGroup.code }}
-        </vdr-chip>
+        <vdr-chip *ngFor="let selectedGroup of selectedOptionGroups">{{ selectedGroup.code }}</vdr-chip>
         <h5>{{ 'catalog.confirm-generate-product-variants' | translate: { count: getVariantCount() } }}</h5>
         <ol class="list">
             <li *ngFor="let item of productVariantPreviewList">{{ item }}</li>

admin-ui/src/app/catalog/components/select-option-group-dialog/select-option-group-dialog.component.html

@@ -1,10 +1,10 @@
 <ng-template vdrDialogTitle>{{ 'catalog.select-option-group' | translate }}</ng-template>
 
-<vdr-select-option-group [selectedGroups]="existingOptionGroups"
-                         (selectGroup)="selectGroup($event)"></vdr-select-option-group>
+<vdr-select-option-group
+    [selectedGroups]="existingOptionGroups"
+    (selectGroup)="selectGroup($event)"
+></vdr-select-option-group>
 
 <ng-template vdrDialogButtons>
-    <button type="button"
-            class="btn"
-            (click)="cancel()">{{ 'common.cancel' | translate }}</button>
+    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
 </ng-template>

admin-ui/src/app/catalog/components/select-option-group/select-option-group.component.html

@@ -1,23 +1,31 @@
-<input type="text"
-       class="filter-input"
-       [placeholder]="'catalog.filter-by-group-name' | translate"
-       [formControl]="filterInput">
+<input
+    type="text"
+    class="filter-input"
+    [placeholder]="'catalog.filter-by-group-name' | translate"
+    [formControl]="filterInput"
+/>
 <div class="group-list">
-    <div class="group" *ngFor="let group of optionGroups$ | async">
-        <vdr-select-toggle [selected]="isSelected(group)"
-                           (selectedChange)="selectGroup.emit(group)"></vdr-select-toggle>
+    <div class="group" *ngFor="let group of (optionGroups$ | async)">
+        <vdr-select-toggle
+            [selected]="isSelected(group)"
+            (selectedChange)="selectGroup.emit(group)"
+        ></vdr-select-toggle>
         <div class="name-code">
             <div class="name">{{ group.name }}</div>
             <div class="code">{{ group.code }}</div>
         </div>
         <div class="options">
-            <vdr-chip class="option" *ngFor="let option of group.options | slice:0:truncateOptionsTo">
+            <vdr-chip class="option" *ngFor="let option of (group.options | slice: 0:truncateOptionsTo)">
                 {{ option.name }}
             </vdr-chip>
             <div *ngIf="optionsTruncated(group)">
                 <clr-signpost>
                     <a clrSignpostTrigger>
-                        (+ {{ 'catalog.truncated-options-count' | translate: { count: optionsTrucatedCount(group) } }})
+                        (+
+                        {{
+                            'catalog.truncated-options-count'
+                                | translate: { count: optionsTrucatedCount(group) }
+                        }})
                     </a>
                     <clr-signpost-content [clrPosition]="'bottom-middle'" *clrIfOpen>
                         <ul class="full-options-list">
@@ -31,7 +39,5 @@
 </div>
 <h5>{{ 'catalog.selected-option-groups' | translate }}:</h5>
 <div class="selected-groups">
-    <vdr-chip *ngFor="let selectedGroup of selectedGroups">
-        {{ selectedGroup.code }}
-    </vdr-chip>
+    <vdr-chip *ngFor="let selectedGroup of selectedGroups">{{ selectedGroup.code }}</vdr-chip>
 </div>

admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.html

@@ -1,7 +1,10 @@
 <label class="clr-control-label">{{ 'catalog.taxes' | translate }}</label>
 <div *ngIf="priceIncludesTax">
-    {{ 'catalog.price-includes-tax-at' | translate : { rate: (taxRate$ | async) } }}
+    {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}
 </div>
 <div *ngIf="!priceIncludesTax">
-    {{ 'catalog.price-with-tax-in-default-zone' | translate: { price: (grossPrice$ | async | currency), rate: (taxRate$ | async) } }}
+    {{
+        'catalog.price-with-tax-in-default-zone'
+            | translate: { price: grossPrice$ | async | currency, rate: taxRate$ | async }
+    }}
 </div>

admin-ui/src/app/core/components/app-shell/app-shell.component.html

@@ -1,30 +1,23 @@
 <clr-main-container>
-    <!--<div class="error error-app-level">
-        ALERT
-    </div>-->
+    <!--
+        <div class="error error-app-level">
+            ALERT
+        </div>
+    -->
     <clr-header>
         <div class="branding">
-            <a [routerLink]="['/']">
-                <img src="/assets/cube-logo-75px.png" class="logo">
-            </a>
-        </div>
-        <div class="header-nav">
-
+            <a [routerLink]="['/']"><img src="/assets/cube-logo-75px.png" class="logo" /></a>
         </div>
+        <div class="header-nav"></div>
         <div class="header-actions">
             <vdr-ui-language-switcher></vdr-ui-language-switcher>
-            <vdr-user-menu [userName]="userName$ | async"
-                           (logOut)="logOut()"></vdr-user-menu>
+            <vdr-user-menu [userName]="userName$ | async" (logOut)="logOut()"></vdr-user-menu>
         </div>
     </clr-header>
-    <nav class="subnav">
-        <vdr-breadcrumb></vdr-breadcrumb>
-    </nav>
+    <nav class="subnav"><vdr-breadcrumb></vdr-breadcrumb></nav>
 
     <div class="content-container">
-        <div class="content-area">
-            <router-outlet></router-outlet>
-        </div>
+        <div class="content-area"><router-outlet></router-outlet></div>
         <vdr-main-nav></vdr-main-nav>
     </div>
 </clr-main-container>

admin-ui/src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -1,6 +1,6 @@
 <nav role="navigation">
     <ul class="breadcrumbs">
-        <li *ngFor="let breadcrumb of breadcrumbs$ | async; let isLast = last">
+        <li *ngFor="let breadcrumb of (breadcrumbs$ | async); let isLast = last">
             <a [routerLink]="breadcrumb.link" *ngIf="!isLast">{{ breadcrumb.label | translate }}</a>
             <ng-container *ngIf="isLast">{{ breadcrumb.label | translate }}</ng-container>
         </li>

admin-ui/src/app/core/components/breadcrumb/breadcrumb.component.spec.ts

@@ -439,14 +439,16 @@ function getBreadcrumbLinks(fixture: ComponentFixture<TestComponent>): string[]
     selector: 'test-root-component',
     template: `
         <vdr-breadcrumb></vdr-breadcrumb>
-        <router-outlet></router-outlet>`,
+        <router-outlet></router-outlet>
+    `,
 })
 class TestParentComponent {}
 
 @Component({
     selector: 'test-child-component',
     template: `
-        <vdr-breadcrumb></vdr-breadcrumb>`,
+        <vdr-breadcrumb></vdr-breadcrumb>
+    `,
 })
 class TestChildComponent {}
 

admin-ui/src/app/core/components/main-nav/main-nav.component.html

@@ -1,133 +1,142 @@
 <nav class="sidenav" [clr-nav-level]="2">
     <section class="sidenav-content">
         <section class="nav-group">
-            <input id="tabexample2" type="checkbox">
+            <input id="tabexample2" type="checkbox" />
             <label for="tabexample2">{{ 'nav.catalog' | translate }}</label>
             <ul class="nav-list">
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/catalog', 'products']"
-                       routerLinkActive="active">
-                        <clr-icon shape="library" size="20"></clr-icon>{{ 'nav.products' | translate }}
+                    <a class="nav-link" [routerLink]="['/catalog', 'products']" routerLinkActive="active">
+                        <clr-icon shape="library" size="20"></clr-icon>
+                        {{ 'nav.products' | translate }}
                     </a>
                 </li>
-                <li><a class="nav-link"
-                       [routerLink]="['/catalog', 'facets']"
-                       routerLinkActive="active">
-                    <clr-icon shape="tag" size="20"></clr-icon>{{ 'nav.facets' | translate }}
-                </a>
+                <li>
+                    <a class="nav-link" [routerLink]="['/catalog', 'facets']" routerLinkActive="active">
+                        <clr-icon shape="tag" size="20"></clr-icon>
+                        {{ 'nav.facets' | translate }}
+                    </a>
                 </li>
-                <li><a class="nav-link"
-                       [routerLink]="['/catalog', 'assets']"
-                       [queryParams]="{ perPage: 25 }"
-                       routerLinkActive="active">
-                    <clr-icon shape="image-gallery" size="20"></clr-icon>{{ 'nav.assets' | translate }}
-                </a>
+                <li>
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/catalog', 'assets']"
+                        [queryParams]="{ perPage: 25 }"
+                        routerLinkActive="active"
+                    >
+                        <clr-icon shape="image-gallery" size="20"></clr-icon>
+                        {{ 'nav.assets' | translate }}
+                    </a>
                 </li>
                 <li>
                     <a class="nav-link">
-                        <clr-icon shape="folder-open" size="20"></clr-icon>{{ 'nav.categories' | translate }}
+                        <clr-icon shape="folder-open" size="20"></clr-icon>
+                        {{ 'nav.categories' | translate }}
                     </a>
                 </li>
             </ul>
         </section>
         <section class="nav-group">
-            <input id="tabexample2" type="checkbox">
+            <input id="tabexample2" type="checkbox" />
             <label for="tabexample2">{{ 'nav.sales' | translate }}</label>
             <ul class="nav-list">
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/orders']"
-                       routerLinkActive="active">
-                        <clr-icon shape="shopping-cart" size="20"></clr-icon>{{ 'nav.orders' | translate }}
+                    <a class="nav-link" [routerLink]="['/orders']" routerLinkActive="active">
+                        <clr-icon shape="shopping-cart" size="20"></clr-icon>
+                        {{ 'nav.orders' | translate }}
                     </a>
                 </li>
             </ul>
         </section>
         <section class="nav-group">
-            <input id="tabexample2" type="checkbox">
+            <input id="tabexample2" type="checkbox" />
             <label for="tabexample2">{{ 'nav.customers' | translate }}</label>
             <ul class="nav-list">
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/customer', 'customers']"
-                       routerLinkActive="active">
-                        <clr-icon shape="user" size="20"></clr-icon>{{ 'nav.customers' | translate }}
+                    <a class="nav-link" [routerLink]="['/customer', 'customers']" routerLinkActive="active">
+                        <clr-icon shape="user" size="20"></clr-icon>
+                        {{ 'nav.customers' | translate }}
                     </a>
                 </li>
             </ul>
         </section>
         <section class="nav-group">
-            <input id="tabexample2" type="checkbox">
+            <input id="tabexample2" type="checkbox" />
             <label for="tabexample2">{{ 'nav.marketing' | translate }}</label>
             <ul class="nav-list">
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/marketing', 'promotions']"
-                       routerLinkActive="active">
-                        <clr-icon shape="asterisk" size="20"></clr-icon>{{ 'nav.promotions' | translate }}
+                    <a class="nav-link" [routerLink]="['/marketing', 'promotions']" routerLinkActive="active">
+                        <clr-icon shape="asterisk" size="20"></clr-icon>
+                        {{ 'nav.promotions' | translate }}
                     </a>
                 </li>
             </ul>
         </section>
         <section class="nav-group">
-            <input id="tabexample2" type="checkbox">
+            <input id="tabexample2" type="checkbox" />
             <label for="tabexample2">{{ 'nav.settings' | translate }}</label>
             <ul class="nav-list">
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'channels']"
-                       routerLinkActive="active">
-                        <clr-icon shape="layers" size="20"></clr-icon>{{ 'nav.channels' | translate }}
+                    <a class="nav-link" [routerLink]="['/settings', 'channels']" routerLinkActive="active">
+                        <clr-icon shape="layers" size="20"></clr-icon>
+                        {{ 'nav.channels' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'administrators']"
-                       routerLinkActive="active">
-                        <clr-icon shape="administrator" size="20"></clr-icon>{{ 'nav.administrators' | translate }}
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/settings', 'administrators']"
+                        routerLinkActive="active"
+                    >
+                        <clr-icon shape="administrator" size="20"></clr-icon>
+                        {{ 'nav.administrators' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'roles']"
-                       routerLinkActive="active">
-                        <clr-icon shape="users" size="20"></clr-icon>{{ 'nav.roles' | translate }}
+                    <a class="nav-link" [routerLink]="['/settings', 'roles']" routerLinkActive="active">
+                        <clr-icon shape="users" size="20"></clr-icon>
+                        {{ 'nav.roles' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'shipping-methods']"
-                       routerLinkActive="active">
-                        <clr-icon shape="truck" size="20"></clr-icon>{{ 'nav.shipping-methods' | translate }}
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/settings', 'shipping-methods']"
+                        routerLinkActive="active"
+                    >
+                        <clr-icon shape="truck" size="20"></clr-icon>
+                        {{ 'nav.shipping-methods' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'payment-methods']"
-                       routerLinkActive="active">
-                        <clr-icon shape="credit-card" size="20"></clr-icon>{{ 'nav.payment-methods' | translate }}
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/settings', 'payment-methods']"
+                        routerLinkActive="active"
+                    >
+                        <clr-icon shape="credit-card" size="20"></clr-icon>
+                        {{ 'nav.payment-methods' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'tax-categories']"
-                       routerLinkActive="active">
-                        <clr-icon shape="view-list" size="20"></clr-icon>{{ 'nav.tax-categories' | translate }}
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/settings', 'tax-categories']"
+                        routerLinkActive="active"
+                    >
+                        <clr-icon shape="view-list" size="20"></clr-icon>
+                        {{ 'nav.tax-categories' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'tax-rates']"
-                       routerLinkActive="active">
-                        <clr-icon shape="calculator" size="20"></clr-icon>{{ 'nav.tax-rates' | translate }}
+                    <a class="nav-link" [routerLink]="['/settings', 'tax-rates']" routerLinkActive="active">
+                        <clr-icon shape="calculator" size="20"></clr-icon>
+                        {{ 'nav.tax-rates' | translate }}
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link"
-                       [routerLink]="['/settings', 'countries']"
-                       routerLinkActive="active">
-                        <clr-icon shape="world" size="20"></clr-icon>{{ 'nav.countries' | translate }}
+                    <a class="nav-link" [routerLink]="['/settings', 'countries']" routerLinkActive="active">
+                        <clr-icon shape="world" size="20"></clr-icon>
+                        {{ 'nav.countries' | translate }}
                     </a>
                 </li>
             </ul>

admin-ui/src/app/core/components/notification/notification.component.html

@@ -1,13 +1,15 @@
-<div class="notification-wrapper" #wrapper
-     [style.top.px]="offsetTop"
-     [ngClass]="{
-        'visible': isVisible,
-        'info': type === 'info',
-        'success': type === 'success',
-        'error': type === 'error',
-        'warning': type === 'warning'
-     }">
+<div
+    class="notification-wrapper"
+    #wrapper
+    [style.top.px]="offsetTop"
+    [ngClass]="{
+        visible: isVisible,
+        info: type === 'info',
+        success: type === 'success',
+        error: type === 'error',
+        warning: type === 'warning'
+    }"
+>
     <clr-icon [attr.shape]="getIcon()" size="24"></clr-icon>
-    {{ message | translate:translationVars }}
+    {{ message | translate: translationVars }}
 </div>
-

admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.html

@@ -1,8 +1,6 @@
 <clr-dropdown>
     <span class="user-name">{{ uiLanguage$ | async }}</span>
-    <span class="trigger" clrDropdownTrigger>
-        <clr-icon shape="caret down"></clr-icon>
-    </span>
+    <span class="trigger" clrDropdownTrigger><clr-icon shape="caret down"></clr-icon></span>
     <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
         <button type="button" clrDropdownItem (click)="setLanguage('en')">EN</button>
         <button type="button" clrDropdownItem (click)="setLanguage('de')">DE</button>

admin-ui/src/app/core/components/user-menu/user-menu.component.html

@@ -5,6 +5,8 @@
         <clr-icon shape="caret down"></clr-icon>
     </span>
     <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="logOut.emit()">{{ 'common.log-out' | translate }}</button>
+        <button type="button" clrDropdownItem (click)="logOut.emit()">
+            {{ 'common.log-out' | translate }}
+        </button>
     </clr-dropdown-menu>
 </clr-dropdown>

admin-ui/src/app/core/providers/notification/notification.service.spec.ts

@@ -43,67 +43,56 @@ describe('NotificationService:', () => {
 
         let fixture: ComponentFixture<TestComponent>;
 
-        beforeEach(
-            fakeAsync(() => {
-                fixture = TestBed.createComponent(TestComponent);
-                tick();
-                fixture.detectChanges();
-            }),
-        );
-
-        it(
-            'should insert notify next to OverlayHost',
-            fakeAsync(() => {
-                const instance: TestComponent = fixture.componentInstance;
-
-                instance.notificationService.notify({ message: 'test' });
-                fixture.detectChanges();
-                tick();
-
-                expect(fixture.nativeElement.querySelector('vdr-notification')).not.toBeNull();
-                runDismissTimers();
-            }),
-        );
-
-        it(
-            'should bind the message',
-            fakeAsync(() => {
-                const instance: TestComponent = fixture.componentInstance;
-
-                instance.notificationService.notify({ message: 'test' });
-                tick();
-                fixture.detectChanges();
-
-                expect(fixture.nativeElement.querySelector('.notification-wrapper').innerHTML).toContain(
-                    'test',
-                );
-                runDismissTimers();
-            }),
-        );
-
-        it(
-            'should dismiss after duration elapses',
-            fakeAsync(() => {
-                const instance: TestComponent = fixture.componentInstance;
-
-                instance.notificationService.notify({
-                    message: 'test',
-                    duration: 1000,
-                });
-                tick();
-                fixture.detectChanges();
-                expect(fixture.nativeElement.querySelector('vdr-notification')).not.toBeNull();
-
-                runDismissTimers();
-
-                expect(fixture.nativeElement.querySelector('vdr-notification')).toBeNull();
-            }),
-        );
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(TestComponent);
+            tick();
+            fixture.detectChanges();
+        }));
+
+        it('should insert notify next to OverlayHost', fakeAsync(() => {
+            const instance: TestComponent = fixture.componentInstance;
+
+            instance.notificationService.notify({ message: 'test' });
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.nativeElement.querySelector('vdr-notification')).not.toBeNull();
+            runDismissTimers();
+        }));
+
+        it('should bind the message', fakeAsync(() => {
+            const instance: TestComponent = fixture.componentInstance;
+
+            instance.notificationService.notify({ message: 'test' });
+            tick();
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement.querySelector('.notification-wrapper').innerHTML).toContain('test');
+            runDismissTimers();
+        }));
+
+        it('should dismiss after duration elapses', fakeAsync(() => {
+            const instance: TestComponent = fixture.componentInstance;
+
+            instance.notificationService.notify({
+                message: 'test',
+                duration: 1000,
+            });
+            tick();
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('vdr-notification')).not.toBeNull();
+
+            runDismissTimers();
+
+            expect(fixture.nativeElement.querySelector('vdr-notification')).toBeNull();
+        }));
     });
 });
 
 @Component({
-    template: `<vdr-overlay-host></vdr-overlay-host>`,
+    template: `
+        <vdr-overlay-host></vdr-overlay-host>
+    `,
 })
 class TestComponent {
     constructor(public notificationService: NotificationService) {}

admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html

@@ -1,45 +1,69 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
-
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="customerForm.invalid || customerForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="customerForm.invalid || customerForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="customerForm.invalid || customerForm.pristine">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="customerForm.invalid || customerForm.pristine"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="customerForm" >
+<form class="form" [formGroup]="customerForm">
     <section class="form-block">
-        <vdr-form-field [label]="'customer.title' | translate" for="title" [readOnlyToggle]="!(isNew$ | async)">
-            <input id="title" type="text" formControlName="title">
+        <vdr-form-field
+            [label]="'customer.title' | translate"
+            for="title"
+            [readOnlyToggle]="!(isNew$ | async)"
+        >
+            <input id="title" type="text" formControlName="title" />
         </vdr-form-field>
-        <vdr-form-field [label]="'customer.first-name' | translate" for="firstName" [readOnlyToggle]="!(isNew$ | async)">
-            <input id="firstName" type="text" formControlName="firstName">
+        <vdr-form-field
+            [label]="'customer.first-name' | translate"
+            for="firstName"
+            [readOnlyToggle]="!(isNew$ | async)"
+        >
+            <input id="firstName" type="text" formControlName="firstName" />
         </vdr-form-field>
-        <vdr-form-field [label]="'customer.last-name' | translate" for="lastName" [readOnlyToggle]="!(isNew$ | async)">
-            <input id="lastName" type="text" formControlName="lastName">
+        <vdr-form-field
+            [label]="'customer.last-name' | translate"
+            for="lastName"
+            [readOnlyToggle]="!(isNew$ | async)"
+        >
+            <input id="lastName" type="text" formControlName="lastName" />
         </vdr-form-field>
-        <vdr-form-field [label]="'customer.email-address' | translate" for="emailAddress" [readOnlyToggle]="!(isNew$ | async)">
-            <input id="emailAddress" type="text" formControlName="emailAddress">
+        <vdr-form-field
+            [label]="'customer.email-address' | translate"
+            for="emailAddress"
+            [readOnlyToggle]="!(isNew$ | async)"
+        >
+            <input id="emailAddress" type="text" formControlName="emailAddress" />
         </vdr-form-field>
-        <vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="isNew$ | async">
-            <input id="password" type="password" formControlName="password">
+        <vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="(isNew$ | async)">
+            <input id="password" type="password" formControlName="password" />
         </vdr-form-field>
 
         <section formGroupName="customFields" *ngIf="customFields.length">
             <label>{{ 'common.custom-fields' }}</label>
             <ng-container *ngFor="let customField of customFields">
-                <vdr-custom-field-control *ngIf="customFieldIsSet(customField.name)"
-                                          [customFieldsFormGroup]="customerForm.get(['facet', 'customFields'])"
-                                          [customField]="customField"></vdr-custom-field-control>
+                <vdr-custom-field-control
+                    *ngIf="customFieldIsSet(customField.name)"
+                    [customFieldsFormGroup]="customerForm.get(['facet', 'customFields'])"
+                    [customField]="customField"
+                ></vdr-custom-field-control>
             </ng-container>
         </section>
     </section>

admin-ui/src/app/customer/components/customer-list/customer-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'customer.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'customer.email-address' | translate }}</vdr-dt-column>
@@ -25,23 +27,22 @@
         <td class="left">
             <vdr-chip *ngIf="customer.user?.id">
                 <ng-container *ngIf="customer.user.verified">
-                    <clr-icon shape="check-circle"
-                              class="verified-user-icon"></clr-icon>
+                    <clr-icon shape="check-circle" class="verified-user-icon"></clr-icon>
                     {{ 'customer.verified' | translate }}
                 </ng-container>
                 <ng-container *ngIf="!customer.user.verified">
-                    <clr-icon shape="check-circle"
-                              class="registered-user-icon"></clr-icon>
+                    <clr-icon shape="check-circle" class="registered-user-icon"></clr-icon>
                     {{ 'customer.registered' | translate }}
                 </ng-container>
             </vdr-chip>
             <vdr-chip *ngIf="!customer.user?.id">{{ 'customer.guest' | translate }}</vdr-chip>
         </td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', customer.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', customer.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/login/components/login/login.component.html

@@ -1,34 +1,35 @@
 <div class="login-wrapper">
     <form class="login">
-        <label class="title">
-            <img src="/assets/cube-logo-300px.png">
-        </label>
+        <label class="title"><img src="/assets/cube-logo-300px.png" /></label>
         <div class="login-group">
-            <input class="username"
-                   type="text"
-                   name="username"
-                   id="login_username"
-                   [(ngModel)]="username"
-                   [placeholder]="'common.username' | translate">
-            <input class="password"
-                   name="password"
-                   type="password"
-                   id="login_password"
-                   [(ngModel)]="password"
-                   [placeholder]="'common.password' | translate">
+            <input
+                class="username"
+                type="text"
+                name="username"
+                id="login_username"
+                [(ngModel)]="username"
+                [placeholder]="'common.username' | translate"
+            />
+            <input
+                class="password"
+                name="password"
+                type="password"
+                id="login_password"
+                [(ngModel)]="password"
+                [placeholder]="'common.password' | translate"
+            />
             <div class="checkbox">
-                <input type="checkbox"
-                       id="rememberme"
-                       name="rememberme"
-                       [(ngModel)]="rememberMe">
-                <label for="rememberme">
-                    {{ 'common.remember-me' | translate }}
-                </label>
+                <input type="checkbox" id="rememberme" name="rememberme" [(ngModel)]="rememberMe" />
+                <label for="rememberme">{{ 'common.remember-me' | translate }}</label>
             </div>
-            <button type="submit"
-                    class="btn btn-primary"
-                    (click)="logIn()"
-                    [disabled]="!username || !password">{{ 'common.login' | translate }}</button>
+            <button
+                type="submit"
+                class="btn btn-primary"
+                (click)="logIn()"
+                [disabled]="!username || !password"
+            >
+                {{ 'common.login' | translate }}
+            </button>
         </div>
     </form>
 </div>

admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html

@@ -1,24 +1,27 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="!saveButtonEnabled()">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="!saveButtonEnabled()"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="!saveButtonEnabled()">{{ 'common.update' | translate }}</button>
+            <button class="btn btn-primary" (click)="save()" [disabled]="!saveButtonEnabled()">
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="promotionForm" >
+<form class="form" [formGroup]="promotionForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name">
+            <input id="name" type="text" formControlName="name" />
         </vdr-form-field>
     </section>
 
@@ -26,22 +29,28 @@
         <div class="clr-col" formArrayName="conditions">
             <label>{{ 'marketing.conditions' | translate }}</label>
             <ng-container *ngFor="let condition of conditions; index as i">
-                <vdr-adjustment-operation-input (remove)="removeCondition($event)"
-                                                [operation]="condition"
-                                                [formControlName]="i"></vdr-adjustment-operation-input>
+                <vdr-adjustment-operation-input
+                    (remove)="removeCondition($event)"
+                    [operation]="condition"
+                    [formControlName]="i"
+                ></vdr-adjustment-operation-input>
             </ng-container>
 
             <div>
                 <clr-dropdown>
                     <div clrDropdownTrigger>
                         <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon> {{ 'marketing.add-condition' | translate }}
+                            <clr-icon shape="plus"></clr-icon>
+                            {{ 'marketing.add-condition' | translate }}
                         </button>
                     </div>
                     <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
-                        <button *ngFor="let condition of getAvailableConditions()"
-                                type="button"
-                                clrDropdownItem (click)="addCondition(condition)">
+                        <button
+                            *ngFor="let condition of getAvailableConditions()"
+                            type="button"
+                            clrDropdownItem
+                            (click)="addCondition(condition)"
+                        >
                             {{ condition.code }}
                         </button>
                     </clr-dropdown-menu>
@@ -50,21 +59,27 @@
         </div>
         <div class="clr-col" formArrayName="actions">
             <label>{{ 'marketing.actions' | translate }}</label>
-            <vdr-adjustment-operation-input *ngFor="let action of actions; index as i"
-                                            (remove)="removeAction($event)"
-                                            [operation]="action"
-                                            [formControlName]="i"></vdr-adjustment-operation-input>
+            <vdr-adjustment-operation-input
+                *ngFor="let action of actions; index as i"
+                (remove)="removeAction($event)"
+                [operation]="action"
+                [formControlName]="i"
+            ></vdr-adjustment-operation-input>
             <div>
                 <clr-dropdown>
                     <div clrDropdownTrigger>
                         <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon> {{ 'marketing.add-action' | translate }}
+                            <clr-icon shape="plus"></clr-icon>
+                            {{ 'marketing.add-action' | translate }}
                         </button>
                     </div>
                     <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
-                        <button *ngFor="let action of getAvailableActions()"
-                                type="button"
-                                clrDropdownItem (click)="addAction(action)">
+                        <button
+                            *ngFor="let action of getAvailableActions()"
+                            type="button"
+                            clrDropdownItem
+                            (click)="addAction(action)"
+                        >
                             {{ action.code }}
                         </button>
                     </clr-dropdown-menu>

admin-ui/src/app/marketing/components/promotion-list/promotion-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.created-at' | translate }}</vdr-dt-column>
@@ -24,10 +26,11 @@
         <td class="left">{{ promotion.createdAt }}</td>
         <td class="left">{{ promotion.updatedAt }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', promotion.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', promotion.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/order/components/order-detail/order-detail.component.html

@@ -1,126 +1,105 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
-    <vdr-ab-right>
-    </vdr-ab-right>
+    <vdr-ab-right></vdr-ab-right>
 </vdr-action-bar>
 
-<div *ngIf="entity$ | async as order">
-
+<div *ngIf="(entity$ | async) as order">
     <div class="clr-row">
         <div class="clr-col-md-4">
             <table class="table table-vertical">
                 <tbody>
-                <tr>
-                    <th>{{ 'order.order-code' | translate }}</th>
-                    <td>{{ order.code }}</td>
-                </tr>
-                <tr>
-                    <th>{{ 'order.state' | translate }}</th>
-                    <td>{{ order.state }}</td>
-                </tr>
-                <tr>
-                    <th>{{ 'common.created' | translate }}</th>
-                    <td>{{ order.createdAt | date:'medium' }}</td>
-                </tr>
-                <tr>
-                    <th>{{ 'common.updated' | translate }}</th>
-                    <td>{{ order.updatedAt | date:'medium' }}</td>
-                </tr>
+                    <tr>
+                        <th>{{ 'order.order-code' | translate }}</th>
+                        <td>{{ order.code }}</td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'order.state' | translate }}</th>
+                        <td>{{ order.state }}</td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'common.created' | translate }}</th>
+                        <td>{{ order.createdAt | date: 'medium' }}</td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'common.updated' | translate }}</th>
+                        <td>{{ order.updatedAt | date: 'medium' }}</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
         <div class="clr-col-md-4">
             <table class="table table-vertical">
                 <tbody>
-                <tr>
-                    <th>{{ 'order.customer' | translate }}</th>
-                    <td>
-                        <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
-                    </td>
-                </tr>
-                <tr>
-                    <th>{{ 'order.shipping-address' | translate }}</th>
-                    <td>
-                        <div class="address-line" *ngFor="let line of getShippingAddressLines(order.shippingAddress)">
-                            {{ line }}
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-        <div class="clr-col-md-4" *ngIf="order.payments && order.payments.length">
-            <table class="table table-vertical">
-                <tbody>
-                <ng-container *ngFor="let payment of order.payments">
-                    <tr>
-                        <th>{{ 'order.payment-method' | translate }}</th>
-                        <td>
-                            {{ payment.method }}
-                        </td>
-                    </tr>
                     <tr>
-                        <th>{{ 'order.amount' | translate }}</th>
-                        <td>
-                            {{ payment.amount }}
-                        </td>
+                        <th>{{ 'order.customer' | translate }}</th>
+                        <td><vdr-customer-label [customer]="order.customer"></vdr-customer-label></td>
                     </tr>
                     <tr>
-                        <th>{{ 'order.transaction-id' | translate }}</th>
+                        <th>{{ 'order.shipping-address' | translate }}</th>
                         <td>
-                            {{ payment.transactionId }}
+                            <div
+                                class="address-line"
+                                *ngFor="let line of getShippingAddressLines(order.shippingAddress)"
+                            >
+                                {{ line }}
+                            </div>
                         </td>
                     </tr>
-                    <tr>
-                        <th>{{ 'order.payment-metadata' | translate }}</th>
-                        <td>
-                            <ul>
-                                <li *ngFor="let entry of getPaymentMetadata(payment)">
-                                    <strong>{{ entry[0] }}</strong>: {{ entry[1] }}
-                                </li>
-                            </ul>
-                        </td>
-                    </tr>
-                </ng-container>
+                </tbody>
+            </table>
+        </div>
+        <div class="clr-col-md-4" *ngIf="order.payments && order.payments.length">
+            <table class="table table-vertical">
+                <tbody>
+                    <ng-container *ngFor="let payment of order.payments">
+                        <tr>
+                            <th>{{ 'order.payment-method' | translate }}</th>
+                            <td>{{ payment.method }}</td>
+                        </tr>
+                        <tr>
+                            <th>{{ 'order.amount' | translate }}</th>
+                            <td>{{ payment.amount }}</td>
+                        </tr>
+                        <tr>
+                            <th>{{ 'order.transaction-id' | translate }}</th>
+                            <td>{{ payment.transactionId }}</td>
+                        </tr>
+                        <tr>
+                            <th>{{ 'order.payment-metadata' | translate }}</th>
+                            <td>
+                                <ul>
+                                    <li *ngFor="let entry of getPaymentMetadata(payment)">
+                                        <strong>{{ entry[0] }}</strong>
+                                        : {{ entry[1] }}
+                                    </li>
+                                </ul>
+                            </td>
+                        </tr>
+                    </ng-container>
                 </tbody>
             </table>
         </div>
     </div>
 
-
     <table class="order-lines table">
         <thead>
-        <tr>
-            <th></th>
-            <th>{{ 'order.product-name' | translate }}</th>
-            <th>{{ 'order.product-sku' | translate }}</th>
-            <th>{{ 'order.unit-price' | translate }}</th>
-            <th>{{ 'order.quantity' | translate }}</th>
-            <th>{{ 'order.total' | translate }}</th>
-        </tr>
+            <tr>
+                <th></th>
+                <th>{{ 'order.product-name' | translate }}</th>
+                <th>{{ 'order.product-sku' | translate }}</th>
+                <th>{{ 'order.unit-price' | translate }}</th>
+                <th>{{ 'order.quantity' | translate }}</th>
+                <th>{{ 'order.total' | translate }}</th>
+            </tr>
         </thead>
-        <tr *ngFor="let line of order.lines"
-            class="order-line">
-            <td class="thumb">
-                <img [src]="line.featuredAsset.preview + '?preset=tiny'">
-            </td>
-            <td class="name">
-                {{ line.productVariant.name }}
-            </td>
-            <td class="sku">
-                {{ line.productVariant.sku }}
-            </td>
-            <td class="unit-price">
-                {{ line.unitPriceWithTax / 100 | currency }}
-            </td>
-            <td class="quantity">
-                {{ line.quantity }}
-            </td>
-            <td class="total">
-                {{ line.totalPrice / 100 | currency }}
-            </td>
+        <tr *ngFor="let line of order.lines" class="order-line">
+            <td class="thumb"><img [src]="line.featuredAsset.preview + '?preset=tiny'" /></td>
+            <td class="name">{{ line.productVariant.name }}</td>
+            <td class="sku">{{ line.productVariant.sku }}</td>
+            <td class="unit-price">{{ line.unitPriceWithTax / 100 | currency }}</td>
+            <td class="quantity">{{ line.quantity }}</td>
+            <td class="total">{{ line.totalPrice / 100 | currency }}</td>
         </tr>
         <tr class="sub-total">
             <td class="left">{{ 'order.sub-total' | translate }}</td>
@@ -131,7 +110,7 @@
             <td>{{ order.subTotal / 100 | currency }}</td>
         </tr>
         <tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
-            <td colspan="5" class="left">{{ adjustment.description  }}</td>
+            <td colspan="5" class="left">{{ adjustment.description }}</td>
             <td>{{ adjustment.amount / 100 | currency }}</td>
         </tr>
         <tr class="shipping">
@@ -149,5 +128,4 @@
             <td>{{ order.total / 100 | currency }}</td>
         </tr>
     </table>
-
 </div>

admin-ui/src/app/order/components/order-list/order-list.component.html

@@ -1,18 +1,22 @@
 <vdr-action-bar>
     <vdr-ab-right>
-        <!--<a class="btn btn-primary" [routerLink]="['./create']">
-            <clr-icon shape="plus"></clr-icon>
-            {{ 'order.create-new-order' | translate }}
-        </a>-->
+        <!--
+            <a class="btn btn-primary" [routerLink]="['./create']">
+                <clr-icon shape="plus"></clr-icon>
+                {{ 'order.create-new-order' | translate }}
+            </a>
+        -->
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>
@@ -23,17 +27,16 @@
     <ng-template let-order="item">
         <td class="left">{{ order.id }}</td>
         <td class="left">{{ order.code }}</td>
-        <td class="left">
-            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
-        </td>
+        <td class="left"><vdr-customer-label [customer]="order.customer"></vdr-customer-label></td>
         <td class="left">{{ order.state }}</td>
         <td class="left">{{ order.total / 100 | currency }}</td>
-        <td class="left">{{ order.updatedAt | date:'medium' }}</td>
+        <td class="left">{{ order.updatedAt | date: 'medium' }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', order.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', order.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html

@@ -1,47 +1,61 @@
 <vdr-action-bar>
     <vdr-ab-left></vdr-ab-left>
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="administratorForm.invalid || administratorForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="administratorForm.invalid || administratorForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="(administratorForm.invalid || administratorForm.pristine) && !permissionsChanged">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="(administratorForm.invalid || administratorForm.pristine) && !permissionsChanged"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="administratorForm" >
+<form class="form" [formGroup]="administratorForm">
     <section class="form-block">
         <label>{{ 'settings.administrator' | translate }}</label>
         <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
-            <input id="emailAddress" type="text" formControlName="emailAddress">
+            <input id="emailAddress" type="text" formControlName="emailAddress" />
         </vdr-form-field>
         <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
-            <input id="firstName" type="text" formControlName="firstName">
+            <input id="firstName" type="text" formControlName="firstName" />
         </vdr-form-field>
         <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
-            <input id="lastName" type="text" formControlName="lastName">
+            <input id="lastName" type="text" formControlName="lastName" />
         </vdr-form-field>
-        <vdr-form-field *ngIf="isNew$ | async" [label]="'settings.password' | translate" for="password">
-            <input id="password" type="password" formControlName="password">
+        <vdr-form-field *ngIf="(isNew$ | async)" [label]="'settings.password' | translate" for="password">
+            <input id="password" type="password" formControlName="password" />
         </vdr-form-field>
-        <vdr-form-field *ngIf="!(isNew$ | async)" [label]="'settings.password' | translate" for="password" [readOnlyToggle]="true">
-            <input id="password" type="password" formControlName="password">
+        <vdr-form-field
+            *ngIf="!(isNew$ | async)"
+            [label]="'settings.password' | translate"
+            for="password"
+            [readOnlyToggle]="true"
+        >
+            <input id="password" type="password" formControlName="password" />
         </vdr-form-field>
     </section>
     <section class="form-block">
         <label>{{ 'settings.roles' | translate }}</label>
-        <ng-select [items]="allRoles$ | async"
-                   [multiple]="true"
-                   [hideSelected]="true"
-                   formControlName="roles"
-                   (change)="rolesChanged($event)"
-                   bindLabel="description"></ng-select>
+        <ng-select
+            [items]="allRoles$ | async"
+            [multiple]="true"
+            [hideSelected]="true"
+            formControlName="roles"
+            (change)="rolesChanged($event)"
+            bindLabel="description"
+        ></ng-select>
     </section>
 
-    <vdr-permission-grid [permissions]="selectedRolePermissions"
-                         [readonly]="true"></vdr-permission-grid>
+    <vdr-permission-grid [permissions]="selectedRolePermissions" [readonly]="true"></vdr-permission-grid>
 </form>

admin-ui/src/app/settings/components/administrator-list/administrator-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.first-name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.last-name' | translate }}</vdr-dt-column>
@@ -24,10 +26,11 @@
         <td class="left">{{ administrator.lastName }}</td>
         <td class="left">{{ administrator.emailAddress }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', administrator.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', administrator.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html

@@ -1,43 +1,42 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="!saveButtonEnabled()">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="!saveButtonEnabled()"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="!saveButtonEnabled()">{{ 'common.update' | translate }}</button>
+            <button class="btn btn-primary" (click)="save()" [disabled]="!saveButtonEnabled()">
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="channelForm" >
+<form class="form" [formGroup]="channelForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
         <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
             <div class="toggle-switch">
-                <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax">
+                <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax" />
                 <label for="pricesIncludeTax"></label>
             </div>
         </vdr-form-field>
         <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
-            <select clrSelect name="defaultTaxZoneId"
-                    formControlName="defaultTaxZoneId">
-                <option *ngFor="let zone of zones$ | async"
-                        [value]="zone.id">{{ zone.name }}</option>
+            <select clrSelect name="defaultTaxZoneId" formControlName="defaultTaxZoneId">
+                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
             </select>
         </vdr-form-field>
         <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
-            <select clrSelect name="defaultShippingZoneId"
-                    formControlName="defaultShippingZoneId">
-                <option *ngFor="let zone of zones$ | async"
-                        [value]="zone.id">{{ zone.name }}</option>
+            <select clrSelect name="defaultShippingZoneId" formControlName="defaultShippingZoneId">
+                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
             </select>
         </vdr-form-field>
     </section>

admin-ui/src/app/settings/components/channel-list/channel-list.component.html

@@ -15,10 +15,11 @@
         <td class="left">{{ channel.id }}</td>
         <td class="left">{{ channel.code }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', channel.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', channel.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/country-detail/country-detail.component.html

@@ -1,33 +1,43 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <vdr-language-selector [availableLanguageCodes]="availableLanguages$ | async"
-                               [currentLanguageCode]="languageCode$ | async"
-                               (languageCodeChange)="setLanguage($event)"></vdr-language-selector>
+        <vdr-language-selector
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="languageCode$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="countryForm.invalid || countryForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="countryForm.invalid || countryForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="countryForm.invalid || countryForm.pristine">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="countryForm.invalid || countryForm.pristine"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="countryForm" >
+<form class="form" [formGroup]="countryForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name">
+            <input id="name" type="text" formControlName="name" />
         </vdr-form-field>
         <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
             <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled">
+                <input type="checkbox" id="enabled" formControlName="enabled" />
                 <label for="enabled"></label>
             </div>
         </vdr-form-field>

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -1,10 +1,12 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <div *ngIf="selectedCountryIds.length">
-            <button class="btn btn-sm"
-                    (click)="addCountriesToZone()">{{ 'settings.add-countries-to-zone' | translate }}</button>
-            <button class="btn btn-sm"
-                    (click)="removeCountriesFromZone()">{{ 'settings.remove-countries-from-zone' | translate }}</button>
+            <button class="btn btn-sm" (click)="addCountriesToZone()">
+                {{ 'settings.add-countries-to-zone' | translate }}
+            </button>
+            <button class="btn btn-sm" (click)="removeCountriesFromZone()">
+                {{ 'settings.remove-countries-from-zone' | translate }}
+            </button>
         </div>
     </vdr-ab-left>
 
@@ -16,11 +18,13 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="countriesWithZones$ | async"
-                [allSelected]="areAllSelected()"
-                [isRowSelectedFn]="isCountrySelected"
-                (rowSelectChange)="toggleSelectCountry($event)"
-                (allSelectChange)="toggleSelectAll()">
+<vdr-data-table
+    [items]="countriesWithZones$ | async"
+    [allSelected]="areAllSelected()"
+    [isRowSelectedFn]="isCountrySelected"
+    (rowSelectChange)="toggleSelectCountry($event)"
+    (allSelectChange)="toggleSelectAll()"
+>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>
@@ -30,18 +34,20 @@
         <td class="left">{{ country.code }}</td>
         <td class="left">{{ country.name }}</td>
         <td class="left">
-            <vdr-chip *ngFor="let zone of country.zones"
-                      [colorFrom]="zone.id">{{ zone.name }}</vdr-chip>
+            <vdr-chip *ngFor="let zone of country.zones" [colorFrom]="zone.id">{{ zone.name }}</vdr-chip>
         </td>
         <td class="left">
-            <clr-icon [class.enabled]="country.enabled"
-                      [attr.shape]="country.enabled ? 'check' : 'times'"></clr-icon>
+            <clr-icon
+                [class.enabled]="country.enabled"
+                [attr.shape]="country.enabled ? 'check' : 'times'"
+            ></clr-icon>
         </td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', country.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', country.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -1,30 +1,37 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="paymentMethodForm.pristine || paymentMethodForm.invalid">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="paymentMethodForm.pristine || paymentMethodForm.invalid"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="paymentMethodForm.pristine || paymentMethodForm.invalid">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="paymentMethodForm.pristine || paymentMethodForm.invalid"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="paymentMethodForm" >
+<form class="form" [formGroup]="paymentMethodForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
     </section>
     <section class="form-block">
         <vdr-form-field [label]="'common.enabled' | translate" for="description">
             <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled">
+                <input type="checkbox" id="enabled" formControlName="enabled" />
                 <label for="enabled"></label>
             </div>
         </vdr-form-field>
@@ -35,14 +42,14 @@
             <label>{{ 'settings.payment-method-config-options' | translate }}</label>
             <section class="form-block" *ngFor="let arg of (entity$ | async).configArgs">
                 <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'string'">
-                    <input [id]="arg.name" type="text" [formControlName]="arg.name" >
+                    <input [id]="arg.name" type="text" [formControlName]="arg.name" />
                 </vdr-form-field>
                 <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'int'">
-                    <input [id]="arg.name" type="number" [formControlName]="arg.name" >
+                    <input [id]="arg.name" type="number" [formControlName]="arg.name" />
                 </vdr-form-field>
                 <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'boolean'">
                     <div class="toggle-switch" *ngIf="arg.type === 'boolean'">
-                        <input type="checkbox" [id]="arg.name" [formControlName]="arg.name">
+                        <input type="checkbox" [id]="arg.name" [formControlName]="arg.name" />
                         <label [for]="arg.name"></label>
                     </div>
                 </vdr-form-field>

admin-ui/src/app/settings/components/payment-method-list/payment-method-list.component.html

@@ -1,14 +1,13 @@
-<vdr-action-bar>
-    <vdr-ab-right>
-    </vdr-ab-right>
-</vdr-action-bar>
+<vdr-action-bar><vdr-ab-right></vdr-ab-right></vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
@@ -16,10 +15,11 @@
         <td class="left">{{ paymentMethod.code }}</td>
         <td class="left">{{ paymentMethod.enabled }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', paymentMethod.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', paymentMethod.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/permission-grid/permission-grid.component.html

@@ -7,14 +7,16 @@
         <th>{{ 'settings.delete' | translate }}</th>
     </tr>
     <tbody>
-    <tr *ngFor="let section of gridData">
-        <td>{{ section.label | translate }}</td>
-        <td *ngFor="let permission of section.permissions">
-            <vdr-select-toggle size="small"
-                               [disabled]="readonly"
-                               [selected]="permissions[permission]"
-                               (selectedChange)="setPermission(permission, $event)"></vdr-select-toggle>
-        </td>
-    </tr>
+        <tr *ngFor="let section of gridData">
+            <td>{{ section.label | translate }}</td>
+            <td *ngFor="let permission of section.permissions">
+                <vdr-select-toggle
+                    size="small"
+                    [disabled]="readonly"
+                    [selected]="permissions[permission]"
+                    (selectedChange)="setPermission(permission, $event)"
+                ></vdr-select-toggle>
+            </td>
+        </tr>
     </tbody>
 </table>

admin-ui/src/app/settings/components/role-detail/role-detail.component.html

@@ -1,30 +1,46 @@
 <vdr-action-bar>
     <vdr-ab-left></vdr-ab-left>
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="roleForm.invalid || roleForm.pristine">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="roleForm.invalid || roleForm.pristine"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="(roleForm.invalid || roleForm.pristine) && !permissionsChanged">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="(roleForm.invalid || roleForm.pristine) && !permissionsChanged"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="roleForm" >
+<form class="form" [formGroup]="roleForm">
     <section class="form-block">
         <label>{{ 'settings.role' | translate }}</label>
         <vdr-form-field [label]="'common.description' | translate" for="description">
-            <input id="description" type="text" formControlName="description" (input)="updateCode($event.target.value)">
+            <input
+                id="description"
+                type="text"
+                formControlName="description"
+                (input)="updateCode($event.target.value)"
+            />
         </vdr-form-field>
         <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
     </section>
     <section class="form-block">
         <label>{{ 'settings.permissions' | translate }}</label>
-        <vdr-permission-grid [permissions]="permissions" (permissionChange)="setPermission($event)"></vdr-permission-grid>
+        <vdr-permission-grid
+            [permissions]="permissions"
+            (permissionChange)="setPermission($event)"
+        ></vdr-permission-grid>
     </section>
 </form>

admin-ui/src/app/settings/components/role-list/role-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
@@ -28,11 +30,12 @@
             </ng-container>
         </td>
         <td class="right">
-            <vdr-table-row-action [disabled]="isDefaultRole(role)"
-                                  iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', role.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                [disabled]="isDefaultRole(role)"
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', role.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.html

@@ -1,50 +1,63 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="shippingMethodForm.pristine || shippingMethodForm.invalid">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="shippingMethodForm.pristine || shippingMethodForm.invalid"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="shippingMethodForm.pristine || shippingMethodForm.invalid">{{ 'common.update' | translate }}</button>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="shippingMethodForm.pristine || shippingMethodForm.invalid"
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="shippingMethodForm" >
+<form class="form" [formGroup]="shippingMethodForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code">
+            <input id="code" type="text" formControlName="code" />
         </vdr-form-field>
     </section>
     <section class="form-block">
         <vdr-form-field [label]="'common.description' | translate" for="description">
-            <input id="description" type="text" formControlName="description">
+            <input id="description" type="text" formControlName="description" />
         </vdr-form-field>
     </section>
 
     <div class="clr-row">
         <div class="clr-col">
             <label>{{ 'settings.shipping-eligibility-checker' | translate }}</label>
-            <vdr-adjustment-operation-input *ngIf="selectedChecker"
-                                            [operation]="selectedChecker"
-                                            (remove)="selectedChecker = null"
-                                            formControlName="checker"></vdr-adjustment-operation-input>
+            <vdr-adjustment-operation-input
+                *ngIf="selectedChecker"
+                [operation]="selectedChecker"
+                (remove)="selectedChecker = null"
+                formControlName="checker"
+            ></vdr-adjustment-operation-input>
             <div *ngIf="!selectedChecker">
                 <clr-dropdown>
                     <div clrDropdownTrigger>
                         <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon> {{ 'common.select' | translate }}
+                            <clr-icon shape="plus"></clr-icon>
+                            {{ 'common.select' | translate }}
                         </button>
                     </div>
                     <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
-                        <button *ngFor="let checker of checkers"
-                                type="button"
-                                clrDropdownItem (click)="selectedChecker = checker">
+                        <button
+                            *ngFor="let checker of checkers"
+                            type="button"
+                            clrDropdownItem
+                            (click)="selectedChecker = checker"
+                        >
                             {{ checker.description }}
                         </button>
                     </clr-dropdown-menu>
@@ -53,21 +66,27 @@
         </div>
         <div class="clr-col">
             <label>{{ 'settings.shipping-calculator' | translate }}</label>
-            <vdr-adjustment-operation-input *ngIf="selectedCalculator"
-                                            [operation]="selectedCalculator"
-                                            (remove)="selectedCalculator = null"
-                                            formControlName="calculator"></vdr-adjustment-operation-input>
+            <vdr-adjustment-operation-input
+                *ngIf="selectedCalculator"
+                [operation]="selectedCalculator"
+                (remove)="selectedCalculator = null"
+                formControlName="calculator"
+            ></vdr-adjustment-operation-input>
             <div *ngIf="!selectedCalculator">
                 <clr-dropdown>
                     <div clrDropdownTrigger>
                         <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon> {{ 'common.select' | translate }}
+                            <clr-icon shape="plus"></clr-icon>
+                            {{ 'common.select' | translate }}
                         </button>
                     </div>
                     <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
-                        <button *ngFor="let calculator of calculators"
-                                type="button"
-                                clrDropdownItem (click)="selectedCalculator = calculator">
+                        <button
+                            *ngFor="let calculator of calculators"
+                            type="button"
+                            clrDropdownItem
+                            (click)="selectedCalculator = calculator"
+                        >
                             {{ calculator.description }}
                         </button>
                     </clr-dropdown-menu>

admin-ui/src/app/settings/components/shipping-method-list/shipping-method-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
@@ -20,10 +22,11 @@
         <td class="left">{{ shippingMethod.code }}</td>
         <td class="left">{{ shippingMethod.description }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', shippingMethod.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', shippingMethod.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/tax-category-detail/tax-category-detail.component.html

@@ -1,24 +1,27 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="!saveButtonEnabled()">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="!saveButtonEnabled()"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="!saveButtonEnabled()">{{ 'common.update' | translate }}</button>
+            <button class="btn btn-primary" (click)="save()" [disabled]="!saveButtonEnabled()">
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="taxCategoryForm" >
+<form class="form" [formGroup]="taxCategoryForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name">
+            <input id="name" type="text" formControlName="name" />
         </vdr-form-field>
     </section>
 </form>

admin-ui/src/app/settings/components/tax-category-list/tax-category-list.component.html

@@ -15,10 +15,11 @@
         <td class="left">{{ taxCategory.id }}</td>
         <td class="left">{{ taxCategory.name }}</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', taxCategory.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', taxCategory.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html

@@ -1,48 +1,49 @@
 <vdr-action-bar>
-    <vdr-ab-left>
-    </vdr-ab-left>
+    <vdr-ab-left></vdr-ab-left>
 
     <vdr-ab-right>
-        <button class="btn btn-primary"
-                *ngIf="isNew$ | async; else updateButton"
-                (click)="create()"
-                [disabled]="!saveButtonEnabled()">{{ 'common.create' | translate }}</button>
+        <button
+            class="btn btn-primary"
+            *ngIf="(isNew$ | async); else: updateButton"
+            (click)="create()"
+            [disabled]="!saveButtonEnabled()"
+        >
+            {{ 'common.create' | translate }}
+        </button>
         <ng-template #updateButton>
-            <button class="btn btn-primary"
-                    (click)="save()"
-                    [disabled]="!saveButtonEnabled()">{{ 'common.update' | translate }}</button>
+            <button class="btn btn-primary" (click)="save()" [disabled]="!saveButtonEnabled()">
+                {{ 'common.update' | translate }}
+            </button>
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="taxRateForm" >
+<form class="form" [formGroup]="taxRateForm">
     <section class="form-block">
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name">
+            <input id="name" type="text" formControlName="name" />
         </vdr-form-field>
         <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
             <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled">
+                <input type="checkbox" id="enabled" formControlName="enabled" />
                 <label for="enabled"></label>
             </div>
         </vdr-form-field>
         <vdr-form-field [label]="'settings.rate' | translate" for="value">
             <vdr-affixed-input suffix="%">
-                <input id="value" type="number" step="0.1" formControlName="value">
+                <input id="value" type="number" step="0.1" formControlName="value" />
             </vdr-affixed-input>
         </vdr-form-field>
         <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
-            <select clrSelect name="taxCategoryId"
-                    formControlName="taxCategoryId">
-                <option *ngFor="let taxCategory of taxCategories$ | async"
-                        [value]="taxCategory.id">{{ taxCategory.name }}</option>
+            <select clrSelect name="taxCategoryId" formControlName="taxCategoryId">
+                <option *ngFor="let taxCategory of (taxCategories$ | async)" [value]="taxCategory.id">
+                    {{ taxCategory.name }}
+                </option>
             </select>
         </vdr-form-field>
         <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
-            <select clrSelect name="zoneId"
-                    formControlName="zoneId">
-                <option *ngFor="let zone of zones$ | async"
-                        [value]="zone.id">{{ zone.name }}</option>
+            <select clrSelect name="zoneId" formControlName="zoneId">
+                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
             </select>
         </vdr-form-field>
     </section>

admin-ui/src/app/settings/components/tax-rate-list/tax-rate-list.component.html

@@ -7,12 +7,14 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table [items]="items$ | async"
-                [itemsPerPage]="itemsPerPage$ | async"
-                [totalItems]="totalItems$ | async"
-                [currentPage]="currentPage$ | async"
-                (pageChange)="setPageNumber($event)"
-                (itemsPerPageChange)="setItemsPerPage($event)">
+<vdr-data-table
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.tax-category' | translate }}</vdr-dt-column>
@@ -26,10 +28,11 @@
         <td class="left">{{ taxRate.zone.name }}</td>
         <td class="left">{{ taxRate.value }}%</td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
-                                  [label]="'common.edit' | translate"
-                                  [linkTo]="['./', taxRate.id]">
-            </vdr-table-row-action>
+            <vdr-table-row-action
+                iconShape="edit"
+                [label]="'common.edit' | translate"
+                [linkTo]="['./', taxRate.id]"
+            ></vdr-table-row-action>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/zone-selector-dialog/zone-selector-dialog.component.html

@@ -1,21 +1,17 @@
 <ng-template vdrDialogTitle>{{ 'settings.select-zone' | translate }}</ng-template>
 
-<ng-select [items]="allZones"
-           bindLabel="name"
-           bindValue="id"
-           appendTo="body"
-           [addTag]="canCreateNewZone"
-           (change)="onChange($event)">
-</ng-select>
+<ng-select
+    [items]="allZones"
+    bindLabel="name"
+    bindValue="id"
+    appendTo="body"
+    [addTag]="canCreateNewZone"
+    (change)="onChange($event)"
+></ng-select>
 
 <ng-template vdrDialogButtons>
-    <button type="button"
-            class="btn"
-            (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button type="submit"
-            (click)="select()"
-            [disabled]="!selected"
-            class="btn btn-primary">
+    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
+    <button type="submit" (click)="select()" [disabled]="!selected" class="btn btn-primary">
         <span *ngIf="!!selected && !selected.id">{{ 'settings.create-zone' | translate }}</span>
         <span *ngIf="!selected || selected.id">{{ 'settings.select-zone' | translate }}</span>
     </button>

admin-ui/src/app/shared/components/action-bar/action-bar.component.html

@@ -1,6 +1,2 @@
-<div class="left-content">
-    <ng-content select="vdr-ab-left"></ng-content>
-</div>
-<div class="right-content">
-    <ng-content select="vdr-ab-right"></ng-content>
-</div>
+<div class="left-content"><ng-content select="vdr-ab-left"></ng-content></div>
+<div class="right-content"><ng-content select="vdr-ab-right"></ng-content></div>

admin-ui/src/app/shared/components/action-bar/action-bar.component.ts

@@ -9,12 +9,16 @@ export class ActionBarComponent {}
 
 @Component({
     selector: 'vdr-ab-left',
-    template: `<ng-content></ng-content>`,
+    template: `
+        <ng-content></ng-content>
+    `,
 })
 export class ActionBarLeftComponent {}
 
 @Component({
     selector: 'vdr-ab-right',
-    template: `<ng-content></ng-content>`,
+    template: `
+        <ng-content></ng-content>
+    `,
 })
 export class ActionBarRightComponent {}

admin-ui/src/app/shared/components/adjustment-operation-input/adjustment-operation-input.component.html

@@ -1,52 +1,54 @@
 <div class="card" *ngIf="operation">
-    <div class="card-block">
-        {{ interpolateDescription() }}
-    </div>
+    <div class="card-block">{{ interpolateDescription() }}</div>
     <div class="card-block" *ngIf="operation.args?.length">
-        <form clrForm
-              [formGroup]="form"
-              *ngIf="operation"
-              class="operation-inputs">
-
+        <form clrForm [formGroup]="form" *ngIf="operation" class="operation-inputs">
             <clr-input-container *ngFor="let arg of operation.args">
                 <label>{{ arg.name | titlecase }}</label>
-                <div *ngIf="arg.type === 'boolean'"
-                     clrInput
-                     class="checkbox" >
-                    <input type="checkbox"
-                           [formControlName]="arg.name"
-                           [id]="arg.name">
+                <div *ngIf="arg.type === 'boolean'" clrInput class="checkbox">
+                    <input type="checkbox" [formControlName]="arg.name" [id]="arg.name" />
                     <label [for]="arg.name"></label>
                 </div>
-                <input *ngIf="arg.type === 'int'"
-                       clrInput [name]="arg.name"
-                       type="number"
-                       step="1"
-                       [formControlName]="arg.name">
-                <input *ngIf="arg.type === 'string'"
-                       clrInput [name]="arg.name"
-                       type="text"
-                       [formControlName]="arg.name">
-                <input *ngIf="arg.type === 'datetime'"
-                       clrInput [name]="arg.name"
-                       type="date"
-                       [formControlName]="arg.name">
-                <vdr-currency-input *ngIf="arg.type === 'money'"
-                                    clrInput
-                                    [formControlName]="arg.name"></vdr-currency-input>
-                <vdr-percentage-suffix-input *ngIf="arg.type === 'percentage'"
-                                             [formControlName]="arg.name"
-                                             clrInput></vdr-percentage-suffix-input>
+                <input
+                    *ngIf="arg.type === 'int'"
+                    clrInput
+                    [name]="arg.name"
+                    type="number"
+                    step="1"
+                    [formControlName]="arg.name"
+                />
+                <input
+                    *ngIf="arg.type === 'string'"
+                    clrInput
+                    [name]="arg.name"
+                    type="text"
+                    [formControlName]="arg.name"
+                />
+                <input
+                    *ngIf="arg.type === 'datetime'"
+                    clrInput
+                    [name]="arg.name"
+                    type="date"
+                    [formControlName]="arg.name"
+                />
+                <vdr-currency-input
+                    *ngIf="arg.type === 'money'"
+                    clrInput
+                    [formControlName]="arg.name"
+                ></vdr-currency-input>
+                <vdr-percentage-suffix-input
+                    *ngIf="arg.type === 'percentage'"
+                    [formControlName]="arg.name"
+                    clrInput
+                ></vdr-percentage-suffix-input>
 
                 <clr-control-error>{{ 'error.this-field-is-required' | translate }}</clr-control-error>
             </clr-input-container>
-
         </form>
     </div>
     <div class="card-footer">
-        <button class="btn btn-sm btn-link btn-warning"
-                (click)="remove.emit(operation)">
-            <clr-icon shape="times"></clr-icon> {{ 'common.remove' | translate }}
+        <button class="btn btn-sm btn-link btn-warning" (click)="remove.emit(operation)">
+            <clr-icon shape="times"></clr-icon>
+            {{ 'common.remove' | translate }}
         </button>
     </div>
 </div>

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.html

@@ -1,7 +1,3 @@
 <ng-content></ng-content>
-<div class="affix prefix" *ngIf="prefix">
-    {{ prefix }}
-</div>
-<div class="affix suffix" *ngIf="suffix">
-    {{ suffix }}
-</div>
+<div class="affix prefix" *ngIf="prefix">{{ prefix }}</div>
+<div class="affix suffix" *ngIf="suffix">{{ suffix }}</div>

admin-ui/src/app/shared/components/affixed-input/percentage-suffix-input.component.ts

@@ -17,13 +17,15 @@ import { getDefaultCurrency } from '../../../common/utilities/get-default-curren
     ],
     template: `
         <vdr-affixed-input suffix="%">
-            <input type="number"
-                   step="1"
-                   [value]="_value"
-                   [disabled]="disabled"
-                   [readonly]="readonly"
-                   (input)="onInput($event.target.value)"
-                   (focus)="onTouch()">
+            <input
+                type="number"
+                step="1"
+                [value]="_value"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                (input)="onInput($event.target.value)"
+                (focus)="onTouch()"
+            />
         </vdr-affixed-input>
     `,
     providers: [

admin-ui/src/app/shared/components/chip/chip.component.html

@@ -1,12 +1,6 @@
-<div class="wrapper"
-     [class.with-background]="colorFrom"
-     [vdrBackgroundColorFrom]="colorFrom">
-    <div class="chip-label">
-        <ng-content></ng-content>
-    </div>
+<div class="wrapper" [class.with-background]="colorFrom" [vdrBackgroundColorFrom]="colorFrom">
+    <div class="chip-label"><ng-content></ng-content></div>
     <div class="chip-icon" *ngIf="icon">
-        <button (click)="iconClick.emit($event)">
-            <clr-icon [attr.shape]="icon"></clr-icon>
-        </button>
+        <button (click)="iconClick.emit($event)"><clr-icon [attr.shape]="icon"></clr-icon></button>
     </div>
 </div>

admin-ui/src/app/shared/components/currency-input/currency-input.component.html

@@ -1,9 +1,11 @@
 <vdr-affixed-input [prefix]="currencySymbol">
-    <input type="number"
-           step="0.01"
-           [value]="_decimalValue"
-           [disabled]="disabled"
-           [readonly]="readonly"
-           (input)="onInput($event.target.value)"
-           (focus)="onTouch()">
+    <input
+        type="number"
+        step="0.01"
+        [value]="_decimalValue"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        (input)="onInput($event.target.value)"
+        (focus)="onTouch()"
+    />
 </vdr-affixed-input>

admin-ui/src/app/shared/components/currency-input/currency-input.component.spec.ts

@@ -21,66 +21,48 @@ describe('CurrencyInputComponent', () => {
         }).compileComponents();
     }));
 
-    it(
-        'should display the price as decimal with a simple binding',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestSimpleComponent);
-            const nativeInput = getNativeInput(fixture);
-            expect(nativeInput.value).toBe('1.23');
-        }),
-    );
+    it('should display the price as decimal with a simple binding', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestSimpleComponent);
+        const nativeInput = getNativeInput(fixture);
+        expect(nativeInput.value).toBe('1.23');
+    }));
 
-    it(
-        'should display the price as decimal',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
-            const nativeInput = getNativeInput(fixture);
-            expect(nativeInput.value).toBe('1.23');
-        }),
-    );
+    it('should display the price as decimal', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
+        const nativeInput = getNativeInput(fixture);
+        expect(nativeInput.value).toBe('1.23');
+    }));
 
-    it(
-        'should display 2 decimal places for multiples of 10',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent, 120);
-            const nativeInput = getNativeInput(fixture);
-            expect(nativeInput.value).toBe('1.20');
-        }),
-    );
+    it('should display 2 decimal places for multiples of 10', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent, 120);
+        const nativeInput = getNativeInput(fixture);
+        expect(nativeInput.value).toBe('1.20');
+    }));
 
-    it(
-        'should discard decimal places from input value',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent, 123.5);
+    it('should discard decimal places from input value', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent, 123.5);
 
-            const nativeInput = getNativeInput(fixture);
-            expect(nativeInput.value).toBe('1.23');
-        }),
-    );
+        const nativeInput = getNativeInput(fixture);
+        expect(nativeInput.value).toBe('1.23');
+    }));
 
-    it(
-        'should correctly round decimal value ',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
-            const nativeInput = fixture.debugElement.query(By.css('input[type="number"]'));
-            nativeInput.triggerEventHandler('input', { target: { value: 1.13 } });
-            tick();
-            fixture.detectChanges();
-            expect(fixture.componentInstance.price).toBe(113);
-        }),
-    );
+    it('should correctly round decimal value ', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
+        const nativeInput = fixture.debugElement.query(By.css('input[type="number"]'));
+        nativeInput.triggerEventHandler('input', { target: { value: 1.13 } });
+        tick();
+        fixture.detectChanges();
+        expect(fixture.componentInstance.price).toBe(113);
+    }));
 
-    it(
-        'should update model with integer values for values of more than 2 decimal places',
-        fakeAsync(() => {
-            const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
-            const nativeInput = fixture.debugElement.query(By.css('input[type="number"]'));
-            nativeInput.triggerEventHandler('input', { target: { value: 1.567 } });
-            tick();
-            fixture.detectChanges();
-            expect(fixture.componentInstance.price).toBe(157);
-        }),
-    );
+    it('should update model with integer values for values of more than 2 decimal places', fakeAsync(() => {
+        const fixture = createAndRunChangeDetection(TestControlValueAccessorComponent);
+        const nativeInput = fixture.debugElement.query(By.css('input[type="number"]'));
+        nativeInput.triggerEventHandler('input', { target: { value: 1.567 } });
+        tick();
+        fixture.detectChanges();
+        expect(fixture.componentInstance.price).toBe(157);
+    }));
 
     function createAndRunChangeDetection<T extends TestControlValueAccessorComponent | TestSimpleComponent>(
         component: Type<T>,
@@ -101,7 +83,9 @@ describe('CurrencyInputComponent', () => {
 
 @Component({
     selector: 'vdr-test-component',
-    template: `<vdr-currency-input [(ngModel)]="price"></vdr-currency-input>`,
+    template: `
+        <vdr-currency-input [(ngModel)]="price"></vdr-currency-input>
+    `,
 })
 class TestControlValueAccessorComponent {
     price = 123;
@@ -109,7 +93,9 @@ class TestControlValueAccessorComponent {
 
 @Component({
     selector: 'vdr-test-component',
-    template: `<vdr-currency-input [value]="price"></vdr-currency-input>`,
+    template: `
+        <vdr-currency-input [value]="price"></vdr-currency-input>
+    `,
 })
 class TestSimpleComponent {
     price = 123;

admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html

@@ -1,22 +1,25 @@
-<vdr-form-field [label]="label"
-                [for]="customField.name">
-    <input *ngIf="customField.type === 'string' || customField.type === 'localeString'"
-           type="text"
-           [id]="customField.name"
-           [formControl]="formGroup.get(customField.name)">
-    <input *ngIf="customField.type === 'int' || customField.type === 'float'"
-           type="number"
-           [id]="customField.name"
-           [formControl]="formGroup.get(customField.name)">
-    <div *ngIf="customField.type === 'boolean'"
-         class="toggle-switch">
-        <input type="checkbox"
-               [id]="customField.name"
-               [formControl]="formGroup.get(customField.name)">
-        <label [for]="customField.name"></label></div>
-    <input *ngIf="customField.type === 'datetime'"
-           type="date"
-           [id]="customField.name"
-           [formControl]="formGroup.get(customField.name)"
-           clrDate>
+<vdr-form-field [label]="label" [for]="customField.name">
+    <input
+        *ngIf="customField.type === 'string' || customField.type === 'localeString'"
+        type="text"
+        [id]="customField.name"
+        [formControl]="formGroup.get(customField.name)"
+    />
+    <input
+        *ngIf="customField.type === 'int' || customField.type === 'float'"
+        type="number"
+        [id]="customField.name"
+        [formControl]="formGroup.get(customField.name)"
+    />
+    <div *ngIf="customField.type === 'boolean'" class="toggle-switch">
+        <input type="checkbox" [id]="customField.name" [formControl]="formGroup.get(customField.name)" />
+        <label [for]="customField.name"></label>
+    </div>
+    <input
+        *ngIf="customField.type === 'datetime'"
+        type="date"
+        [id]="customField.name"
+        [formControl]="formGroup.get(customField.name)"
+        clrDate
+    />
 </vdr-form-field>

admin-ui/src/app/shared/components/data-table/data-table-column.component.ts

@@ -2,7 +2,9 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'vdr-dt-column',
-    template: `<ng-template><ng-content></ng-content></ng-template>`,
+    template: `
+        <ng-template><ng-content></ng-content></ng-template>
+    `,
 })
 export class DataTableColumnComponent {
     @ViewChild(TemplateRef) template: TemplateRef<any>;

admin-ui/src/app/shared/components/data-table/data-table.component.html

@@ -1,36 +1,49 @@
 <table class="table">
     <thead>
-    <tr>
-        <th *ngIf="isRowSelectedFn">
-            <vdr-select-toggle size="small"
-                               [selected]="allSelected"
-                               (selectedChange)="allSelectChange.emit()"></vdr-select-toggle>
-        </th>
-        <th *ngFor="let header of columns?.toArray()" class="left">
-            <ng-container *ngTemplateOutlet="header.template"></ng-container>
-        </th>
-    </tr>
+        <tr>
+            <th *ngIf="isRowSelectedFn">
+                <vdr-select-toggle
+                    size="small"
+                    [selected]="allSelected"
+                    (selectedChange)="allSelectChange.emit()"
+                ></vdr-select-toggle>
+            </th>
+            <th *ngFor="let header of columns?.toArray()" class="left">
+                <ng-container *ngTemplateOutlet="header.template"></ng-container>
+            </th>
+        </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let item of items | paginate:{ itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }">
-        <td *ngIf="isRowSelectedFn">
-            <vdr-select-toggle size="small"
-                               [selected]="isRowSelectedFn(item)"
-                               (selectedChange)="rowSelectChange.emit(item)"></vdr-select-toggle>
-        </td>
-        <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
-    </tr>
+        <tr
+            *ngFor="
+                let item of (items
+                    | paginate
+                        : { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems })
+            "
+        >
+            <td *ngIf="isRowSelectedFn">
+                <vdr-select-toggle
+                    size="small"
+                    [selected]="isRowSelectedFn(item)"
+                    (selectedChange)="rowSelectChange.emit(item)"
+                ></vdr-select-toggle>
+            </td>
+            <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
+        </tr>
     </tbody>
 </table>
 <div class="table-footer">
-    <vdr-items-per-page-controls *ngIf="totalItems"
-                                 [itemsPerPage]="itemsPerPage"
-                                 (itemsPerPageChange)="itemsPerPageChange.emit($event)"></vdr-items-per-page-controls>
-
-    <vdr-pagination-controls *ngIf="totalItems"
-                             [currentPage]="currentPage"
-                             [itemsPerPage]="itemsPerPage"
-                             [totalItems]="totalItems"
-                             (pageChange)="pageChange.emit($event)"></vdr-pagination-controls>
+    <vdr-items-per-page-controls
+        *ngIf="totalItems"
+        [itemsPerPage]="itemsPerPage"
+        (itemsPerPageChange)="itemsPerPageChange.emit($event)"
+    ></vdr-items-per-page-controls>
 
+    <vdr-pagination-controls
+        *ngIf="totalItems"
+        [currentPage]="currentPage"
+        [itemsPerPage]="itemsPerPage"
+        [totalItems]="totalItems"
+        (pageChange)="pageChange.emit($event)"
+    ></vdr-pagination-controls>
 </div>

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -1,7 +1,6 @@
-<div class="form-group"
-    [class.no-label]="!label">
-    <label *ngIf="label"
-           [for]="for">{{ label }}
+<div class="form-group" [class.no-label]="!label">
+    <label *ngIf="label" [for]="for">
+        {{ label }}
         <clr-tooltip *ngIf="tooltip">
             <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
             <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
@@ -9,24 +8,26 @@
             </clr-tooltip-content>
         </clr-tooltip>
     </label>
-    <label [for]="for"
-           aria-haspopup="true"
-           role="tooltip"
-           [class.invalid]="formFieldControl?.touched && !formFieldControl?.valid"
-           class="tooltip tooltip-validation tooltip-sm tooltip-top-left">
+    <label
+        [for]="for"
+        aria-haspopup="true"
+        role="tooltip"
+        [class.invalid]="formFieldControl?.touched && !formFieldControl?.valid"
+        class="tooltip tooltip-validation tooltip-sm tooltip-top-left"
+    >
         <div class="input-row">
             <ng-content></ng-content>
-            <button *ngIf="readOnlyToggle"
-                    type="button"
-                    [disabled]="!isReadOnly"
-                    [title]="'common.edit-field' | translate"
-                    class="btn btn-icon btn-sm edit-button"
-                    (click)="setReadOnly(false)">
+            <button
+                *ngIf="readOnlyToggle"
+                type="button"
+                [disabled]="!isReadOnly"
+                [title]="'common.edit-field' | translate"
+                class="btn btn-icon btn-sm edit-button"
+                (click)="setReadOnly(false)"
+            >
                 <clr-icon shape="edit"></clr-icon>
             </button>
         </div>
-        <span class="tooltip-content">
-            {{ label }} is required.
-        </span>
+        <span class="tooltip-content">{{ label }} is required.</span>
     </label>
 </div>

admin-ui/src/app/shared/components/form-item/form-item.component.html

@@ -1,6 +1,4 @@
 <div class="form-group">
     <label>{{ label }}</label>
-    <div class="content">
-        <ng-content></ng-content>
-    </div>
+    <div class="content"><ng-content></ng-content></div>
 </div>

admin-ui/src/app/shared/components/items-per-page-controls/items-per-page-controls.component.html

@@ -1,10 +1,10 @@
 <div class="form-group">
     <div class="select">
         <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
-            <option [value]="10">{{ 'common.items-per-page-option' | translate : { count: 10 } }}</option>
-            <option [value]="25">{{ 'common.items-per-page-option' | translate : { count: 25 } }}</option>
-            <option [value]="50">{{ 'common.items-per-page-option' | translate : { count: 50 } }}</option>
-            <option [value]="100">{{ 'common.items-per-page-option' | translate : { count: 100 } }}</option>
+            <option [value]="10">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>
+            <option [value]="25">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>
+            <option [value]="50">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>
+            <option [value]="100">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>
         </select>
     </div>
 </div>

admin-ui/src/app/shared/components/language-selector/language-selector.component.html

@@ -5,9 +5,13 @@
         <clr-icon shape="caret down"></clr-icon>
     </button>
     <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button"
-                *ngFor="let code of availableLanguageCodes"
-                (click)="languageCodeChange.emit(code)"
-                clrDropdownItem>{{ code }}</button>
+        <button
+            type="button"
+            *ngFor="let code of availableLanguageCodes"
+            (click)="languageCodeChange.emit(code)"
+            clrDropdownItem
+        >
+            {{ code }}
+        </button>
     </clr-dropdown-menu>
 </clr-dropdown>

admin-ui/src/app/shared/components/modal-dialog/modal-dialog.component.html

@@ -1,15 +1,17 @@
-<clr-modal [clrModalOpen]="true"
-           (clrModalOpenChange)="modalOpenChange($event)"
-           [clrModalClosable]="options?.closable"
-           [clrModalSize]="options?.size">
-    <h3 class="modal-title">
-        <ng-container *ngTemplateOutlet="titleTemplateRef$ | async"></ng-container>
-    </h3>
+<clr-modal
+    [clrModalOpen]="true"
+    (clrModalOpenChange)="modalOpenChange($event)"
+    [clrModalClosable]="options?.closable"
+    [clrModalSize]="options?.size"
+>
+    <h3 class="modal-title"><ng-container *ngTemplateOutlet="(titleTemplateRef$ | async)"></ng-container></h3>
     <div class="modal-body">
-        <vdr-dialog-component-outlet [component]="childComponentType"
-                                     (create)="onCreate($event)"></vdr-dialog-component-outlet>
+        <vdr-dialog-component-outlet
+            [component]="childComponentType"
+            (create)="onCreate($event)"
+        ></vdr-dialog-component-outlet>
     </div>
     <div class="modal-footer">
-        <ng-container *ngTemplateOutlet="buttonsTemplateRef$ | async"></ng-container>
+        <ng-container *ngTemplateOutlet="(buttonsTemplateRef$ | async)"></ng-container>
     </div>
 </clr-modal>

admin-ui/src/app/shared/components/pagination-controls/pagination-controls.component.html

@@ -1,35 +1,26 @@
-<pagination-template #p="paginationApi"
-                     (pageChange)="pageChange.emit($event)">
+<pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)">
     <ul>
         <li class="pagination-previous">
-
-            <a *ngIf="!p.isFirstPage()"
-               (click)="p.previous()"
-               (keyup.enter)="p.previous()"
-               tabindex="0"> « </a>
-            <div *ngIf="p.isFirstPage()"> « </div>
+            <a *ngIf="!p.isFirstPage()" (click)="p.previous()" (keyup.enter)="p.previous()" tabindex="0">«</a>
+            <div *ngIf="p.isFirstPage()">«</div>
         </li>
 
         <li *ngFor="let page of p.pages">
-            <a (click)="p.setCurrent(page.value)"
-               (keyup.enter)="p.setCurrent(page.value)"
-               *ngIf="p.getCurrent() !== page.value"
-               tabindex="0">
+            <a
+                (click)="p.setCurrent(page.value)"
+                (keyup.enter)="p.setCurrent(page.value)"
+                *ngIf="p.getCurrent() !== page.value"
+                tabindex="0"
+            >
                 {{ page.label }}
             </a>
 
-            <div class="current" *ngIf="p.getCurrent() === page.value">
-                {{ page.label }}
-            </div>
+            <div class="current" *ngIf="p.getCurrent() === page.value">{{ page.label }}</div>
         </li>
 
         <li class="pagination-next">
-            <a *ngIf="!p.isLastPage()"
-               (click)="p.next()"
-               (keyup.enter)="p.next()"
-               tabindex="0"> » </a>
-            <div *ngIf="p.isLastPage()"> » </div>
+            <a *ngIf="!p.isLastPage()" (click)="p.next()" (keyup.enter)="p.next()" tabindex="0">»</a>
+            <div *ngIf="p.isLastPage()">»</div>
         </li>
-
     </ul>
 </pagination-template>

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.html

@@ -1,10 +1,12 @@
-<div class="toggle"
-     [class.disabled]="disabled"
-     [class.small]="size === 'small'"
-     [attr.tabindex]="disabled ? null : 0"
-     [class.selected]="selected"
-     (keydown.enter)="selectedChange.emit(!selected)"
-     (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
-     (click)="selectedChange.emit(!selected)">
+<div
+    class="toggle"
+    [class.disabled]="disabled"
+    [class.small]="size === 'small'"
+    [attr.tabindex]="disabled ? null : 0"
+    [class.selected]="selected"
+    (keydown.enter)="selectedChange.emit(!selected)"
+    (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
+    (click)="selectedChange.emit(!selected)"
+>
     <clr-icon shape="check" [attr.size]="size === 'small' ? 16 : 32"></clr-icon>
 </div>

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.html

@@ -1,10 +1,12 @@
-<ng-container *ngIf="!disabled; else disabledLink">
+<ng-container *ngIf="!disabled; else: disabledLink">
     <a class="btn btn-link btn-sm" [routerLink]="linkTo">
-        <clr-icon [attr.shape]="iconShape"></clr-icon> {{ label }}
+        <clr-icon [attr.shape]="iconShape"></clr-icon>
+        {{ label }}
     </a>
 </ng-container>
 <ng-template #disabledLink>
     <button class="btn btn-link btn-sm" disabled>
-        <clr-icon [attr.shape]="iconShape"></clr-icon> {{ label }}
+        <clr-icon [attr.shape]="iconShape"></clr-icon>
+        {{ label }}
     </button>
 </ng-template>

admin-ui/src/index.html

@@ -1,14 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>VendureAdmin</title>
-  <base href="/">
+    <head>
+        <meta charset="utf-8" />
+        <title>VendureAdmin</title>
+        <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <vdr-root></vdr-root>
-</body>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    </head>
+    <body>
+        <vdr-root></vdr-root>
+    </body>
 </html>

codegen/client-schema.ts

@@ -6,8 +6,8 @@ const CLIENT_SCHEMA_FILE = '../admin-ui/src/app/data/client-state/client-types.g
 const LANGUAGE_CODE_FILE = '../server/src/common/types/language-code.graphql';
 
 function loadGraphQL(file: string): string {
-  const filePath = path.join(__dirname, file);
-  return fs.readFileSync(filePath, 'utf8');
+    const filePath = path.join(__dirname, file);
+    return fs.readFileSync(filePath, 'utf8');
 }
 
 /**

codegen/download-introspection-schema.ts

@@ -17,26 +17,31 @@ export function downloadIntrospectionSchema(outputFilePath: string): Promise<boo
     const body = JSON.stringify({ query: introspectionQuery });
 
     return new Promise((resolve, reject) => {
-        const request = http.request({
-            method: 'post',
-            host: 'localhost',
-            port: API_PORT,
-            path: '/' + API_PATH,
-            headers: {
-                'Content-Type': 'application/json',
-                'Content-Length': Buffer.byteLength(body),
+        const request = http.request(
+            {
+                method: 'post',
+                host: 'localhost',
+                port: API_PORT,
+                path: '/' + API_PATH,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Content-Length': Buffer.byteLength(body),
+                },
             },
-        }, response => {
-            const outputFile = fs.createWriteStream(outputFilePath);
-            response.pipe(outputFile);
-            response.on('end', () => resolve(true));
-            response.on('error', reject);
-        });
+            response => {
+                const outputFile = fs.createWriteStream(outputFilePath);
+                response.pipe(outputFile);
+                response.on('end', () => resolve(true));
+                response.on('error', reject);
+            },
+        );
         request.write(body);
         request.end();
         request.on('error', (err: any) => {
             if (err.code === 'ECONNREFUSED') {
-                console.error(`ERROR: Could not connect to the Vendure server at http://localhost:${API_PORT}/${API_PATH}`);
+                console.error(
+                    `ERROR: Could not connect to the Vendure server at http://localhost:${API_PORT}/${API_PATH}`,
+                );
                 resolve(false);
             }
             reject(err);

codegen/generate-graphql-types.ts

@@ -11,7 +11,7 @@ const SCHEMA_OUTPUT_FILE = path.join(__dirname, '../schema.json');
 // tslint:disable:no-console
 
 downloadIntrospectionSchema(SCHEMA_OUTPUT_FILE)
-    .then((downloaded) => {
+    .then(downloaded => {
         if (!downloaded) {
             console.log('Attempting to generate types from existing schema.json...');
         }
@@ -19,15 +19,17 @@ downloadIntrospectionSchema(SCHEMA_OUTPUT_FILE)
             schema: SCHEMA_OUTPUT_FILE,
             clientSchema: path.join(__dirname, 'client-schema.ts'),
             template: 'typescript',
-            out: path.join(__dirname,  '../shared/generated-types.ts'),
+            out: path.join(__dirname, '../shared/generated-types.ts'),
             overwrite: true,
             args: [CLIENT_QUERY_FILES],
         });
     })
-    .then(result => {
+    .then(
+        result => {
             process.exit(0);
         },
         err => {
             console.error(err);
             process.exit(1);
-        });
+        },
+    );

package.json

@@ -6,7 +6,7 @@
     "generate-gql-types": "ts-node ./codegen/generate-graphql-types.ts",
     "postinstall": "cd admin-ui && yarn && cd ../server && yarn",
     "test": "cd admin-ui && yarn test --watch=false --browsers=ChromeHeadlessCI --progress=false && cd ../server && yarn test && yarn test:e2e",
-    "format": "prettier --write",
+    "format": "prettier --write --html-whitespace-sensitivity ignore",
     "lint:server": "cd server && yarn lint --fix",
     "lint:admin-ui": "cd admin-ui && yarn lint --fix",
     "precommit": "lint-staged",
@@ -21,7 +21,7 @@
     "graphql-tools": "^4.0.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",
-    "prettier": "^1.13.7",
+    "prettier": "^1.15.2",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
     "typescript": "^3.1.3"

server/src/config/common/config-args.ts

@@ -13,6 +13,7 @@ export type ConfigArgs<T extends ConfigArgType> = {
     [name: string]: T;
 };
 
+// prettier-ignore
 /**
  * Represents the ConfigArgs once they have been coerced into JavaScript values for use
  * in business logic.

server/src/service/helpers/shipping-calculator/shipping-calculator.ts

@@ -19,15 +19,17 @@ export class ShippingCalculator {
         order: Order,
     ): Promise<Array<{ method: ShippingMethod; price: number }>> {
         const shippingMethods = this.shippingMethodService.getActiveShippingMethods(ctx.channel);
-        const methodsPromiseArray = shippingMethods.filter(async sm => await sm.test(order)).map(async sm => {
-            const adjustment = await sm.apply(order);
-            if (adjustment) {
-                return {
-                    method: sm,
-                    price: adjustment.amount,
-                };
-            }
-        });
+        const methodsPromiseArray = shippingMethods
+            .filter(async sm => await sm.test(order))
+            .map(async sm => {
+                const adjustment = await sm.apply(order);
+                if (adjustment) {
+                    return {
+                        method: sm,
+                        price: adjustment.amount,
+                    };
+                }
+            });
         const methods = await Promise.all(methodsPromiseArray);
         return methods.filter(notNullOrUndefined).sort((a, b) => a.price - b.price);
     }

shared/omit.spec.ts

@@ -3,7 +3,6 @@ import { omit } from './omit';
 declare const File: any;
 
 describe('omit()', () => {
-
     it('returns a new object', () => {
         const obj = { foo: 1, bar: 2 };
         expect(omit(obj, ['bar'])).not.toBe(obj);
@@ -15,15 +14,20 @@ describe('omit()', () => {
     });
 
     it('works with deeply-nested objects', () => {
-        expect(omit({
-            name: {
-                first: 'joe',
-                last: 'smith',
-            },
-            address: {
-                number: 12,
-            },
-        }, ['address'])).toEqual({
+        expect(
+            omit(
+                {
+                    name: {
+                        first: 'joe',
+                        last: 'smith',
+                    },
+                    address: {
+                        number: 12,
+                    },
+                },
+                ['address'],
+            ),
+        ).toEqual({
             name: {
                 first: 'joe',
                 last: 'smith',
@@ -32,7 +36,6 @@ describe('omit()', () => {
     });
 
     describe('recursive', () => {
-
         it('returns a new object', () => {
             const obj = { foo: 1, bar: 2 };
             expect(omit(obj, ['bar'], true)).not.toBe(obj);
@@ -84,42 +87,23 @@ describe('omit()', () => {
             };
             const expected = {
                 foo: 1,
-                bar: [
-                    { good: true },
-                    {},
-                ],
+                bar: [{ good: true }, {}],
             };
 
             expect(omit(input, ['bad'], true)).toEqual(expected);
         });
 
         it('works top-level array', () => {
-            const input = [
-                { foo: 1 },
-                { bad: true },
-                { bar: 2 },
-            ];
-            const expected = [
-                { foo: 1 },
-                {},
-                { bar: 2 },
-            ];
+            const input = [{ foo: 1 }, { bad: true }, { bar: 2 }];
+            const expected = [{ foo: 1 }, {}, { bar: 2 }];
 
             expect(omit(input, ['bad'], true)).toEqual(expected);
         });
 
         it('preserves File objects', () => {
             const file = new File([], 'foo');
-            const input = [
-                { foo: 1 },
-                { bad: true },
-                { bar: file },
-            ];
-            const expected = [
-                { foo: 1 },
-                {},
-                { bar: file },
-            ];
+            const input = [{ foo: 1 }, { bad: true }, { bar: file }];
+            const expected = [{ foo: 1 }, {}, { bar: file }];
 
             expect(omit(input, ['bad'], true)).toEqual(expected);
         });

shared/omit.ts

@@ -6,8 +6,16 @@ declare const File: any;
  * Type-safe omit function - returns a new object which omits the specified keys.
  */
 export function omit<T extends object, K extends keyof T>(obj: T, keysToOmit: K[]): Omit<T, K>;
-export function omit<T extends object | any[], K extends keyof T>(obj: T, keysToOmit: string[], recursive: boolean): T;
-export function omit<T extends any, K extends keyof T>(obj: T, keysToOmit: string[], recursive: boolean = false): T {
+export function omit<T extends object | any[], K extends keyof T>(
+    obj: T,
+    keysToOmit: string[],
+    recursive: boolean,
+): T;
+export function omit<T extends any, K extends keyof T>(
+    obj: T,
+    keysToOmit: string[],
+    recursive: boolean = false,
+): T {
     if ((recursive && !isObject(obj)) || isFileObject(obj)) {
         return obj;
     }
@@ -16,15 +24,18 @@ export function omit<T extends any, K extends keyof T>(obj: T, keysToOmit: strin
         return obj.map((item: any) => omit(item, keysToOmit, true));
     }
 
-    return Object.keys(obj).reduce((output: any, key) => {
-        if (keysToOmit.includes(key)) {
-            return output;
-        }
-        if (recursive) {
-            return {...output, [key]: omit((obj as any)[key], keysToOmit, true)};
-        }
-        return {...output, [key]: (obj as any)[key]};
-    }, {} as Omit<T, K>);
+    return Object.keys(obj).reduce(
+        (output: any, key) => {
+            if (keysToOmit.includes(key)) {
+                return output;
+            }
+            if (recursive) {
+                return { ...output, [key]: omit((obj as any)[key], keysToOmit, true) };
+            }
+            return { ...output, [key]: (obj as any)[key] };
+        },
+        {} as Omit<T, K>,
+    );
 }
 
 function isObject(input: any): input is object {

shared/shared-types.ts

@@ -1,4 +1,5 @@
 // tslint:disable:no-shadowed-variable
+// prettier-ignore
 /**
  * A recursive implementation of the Partial<T> type.
  * Source: https://stackoverflow.com/a/49936686/772859
@@ -15,7 +16,9 @@ export type DeepPartial<T> = {
 /**
  * A type representing the type rather than instance of a class.
  */
-export interface Type<T> extends Function { new (...args: any[]): T; }
+export interface Type<T> extends Function {
+    new (...args: any[]): T;
+}
 
 /**
  * A type describing the shape of a paginated list response

shared/shared-utils.spec.ts

@@ -3,28 +3,18 @@
 import { generateAllCombinations } from './shared-utils';
 
 describe('generateAllCombinations()', () => {
-
     it('works with an empty input array', () => {
         const result = generateAllCombinations([]);
         expect(result).toEqual([]);
     });
 
     it('works with an input of length 1', () => {
-        const result = generateAllCombinations([
-            ['red', 'green', 'blue'],
-        ]);
-        expect(result).toEqual([
-            ['red'],
-            ['green'],
-            ['blue'],
-        ]);
+        const result = generateAllCombinations([['red', 'green', 'blue']]);
+        expect(result).toEqual([['red'], ['green'], ['blue']]);
     });
 
     it('works with an input of length 2', () => {
-        const result = generateAllCombinations([
-            ['red', 'green', 'blue'],
-            ['small', 'large'],
-        ]);
+        const result = generateAllCombinations([['red', 'green', 'blue'], ['small', 'large']]);
         expect(result).toEqual([
             ['red', 'small'],
             ['red', 'large'],
@@ -34,5 +24,4 @@ describe('generateAllCombinations()', () => {
             ['blue', 'large'],
         ]);
     });
-
 });

shared/unique.spec.ts

@@ -1,7 +1,6 @@
 import { unique } from './unique';
 
 describe('unique()', () => {
-
     it('works with primitive values', () => {
         expect(unique([1, 1, 2, 3, 2, 6, 4, 2])).toEqual([1, 2, 3, 6, 4]);
         expect(unique(['a', 'f', 'g', 'f', 'y'])).toEqual(['a', 'f', 'g', 'y']);

shared/unique.ts

@@ -5,12 +5,15 @@
  */
 export function unique<T>(arr: T[], byKey?: keyof T): T[] {
     return arr.filter((item, index, self) => {
-        return index === self.findIndex(i => {
-            if (byKey === undefined) {
-                return i === item;
-            } else {
-                return i[byKey] === item[byKey];
-            }
-        });
+        return (
+            index ===
+            self.findIndex(i => {
+                if (byKey === undefined) {
+                    return i === item;
+                } else {
+                    return i[byKey] === item[byKey];
+                }
+            })
+        );
     });
 }

yarn.lock

@@ -1658,9 +1658,9 @@ prettier@1.14.3:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
 
-prettier@^1.13.7:
-  version "1.13.7"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.7.tgz#850f3b8af784a49a6ea2d2eaa7ed1428a34b7281"
+prettier@^1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.2.tgz#d31abe22afa4351efa14c7f8b94b58bb7452205e"
 
 pretty-format@^23.2.0:
   version "23.2.0"