[ACS-8956] Introduce new ESLint rule for self-closing tags (#10354)

.eslintrc.js

@@ -185,7 +185,10 @@ module.exports = {
         {
             files: ['*.html'],
             extends: ['plugin:@angular-eslint/template/recommended', 'plugin:@angular-eslint/template/accessibility'],
-            rules: {}
+            parser: '@angular-eslint/template-parser',
+            rules: {
+                '@angular-eslint/template/prefer-self-closing-tags': 'error'
+            }
         },
         {
             files: ['*.spec.ts'],

lib/cli/.eslintrc.json

@@ -13,7 +13,7 @@
         "prefer-arrow/prefer-arrow-functions": "off",
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/naming-convention": "warn",
-        "quote-props": "warn",
+        "quote-props": "off",
         "no-shadow": "warn",
         "no-restricted-syntax": "off",
         "no-underscore-dangle": "off",

lib/content-services/.eslintrc.json

@@ -22,12 +22,12 @@
           }
         ],
         "no-shadow": "warn",
-        "quote-props": "warn",
+        "quote-props": "off",
         "object-shorthand": "warn",
         "prefer-const": "warn",
         "arrow-body-style": "warn",
         "@angular-eslint/no-output-native": "off",
-        "space-before-function-paren": "warn",
+        "space-before-function-paren": "off",
         "@angular-eslint/component-selector": [
           "error",
           {

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html

@@ -9,8 +9,7 @@ <h1 class="adf-aspect-list-dialog-title">{{title | translate}}</h1>
         {{'ADF-ASPECT-LIST.DIALOG.SELECTED' | translate}}</p>
 </div>
 <mat-dialog-content class="adf-aspect-dialog-content">
-    <adf-aspect-list #aspectList (valueChanged)="onValueChanged($event)" (updateCounter)="onUpdateCounter($event)" [nodeId]="currentNodeId" [excludedAspects]="data.excludedAspects">
-    </adf-aspect-list>
+    <adf-aspect-list #aspectList (valueChanged)="onValueChanged($event)" (updateCounter)="onUpdateCounter($event)" [nodeId]="currentNodeId" [excludedAspects]="data.excludedAspects" />
 </mat-dialog-content>
 
 <mat-dialog-actions class="adf-aspect-list-dialog">

lib/content-services/src/lib/aspect-list/aspect-list.component.html

@@ -44,6 +44,6 @@
 
 <ng-template #loading>
     <div class="adf-aspect-list-spinner">
-       <mat-progress-spinner mode="indeterminate" id="adf-aspect-spinner"></mat-progress-spinner>
+       <mat-progress-spinner mode="indeterminate" id="adf-aspect-spinner" />
     </div>
 </ng-template>

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -63,7 +63,6 @@
             *ngIf="existingCategoriesLoading"
             [diameter]="50"
             class="adf-categories-management-spinner"
-            [attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate">
-        </mat-spinner>
+            [attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate" />
     </div>
 </div>

lib/content-services/src/lib/common/services/saved-searches.service.ts

@@ -58,10 +58,8 @@ export class SavedSearchesService {
      */
     getSavedSearches(): Observable<SavedSearch[]> {
         return this.getSavedSearchesNodeId().pipe(
-            concatMap(() => {
-                return from(
-                    this.nodesApi.getNodeContent(this.savedSearchFileNodeId).then((content) => this.mapFileContentToSavedSearches(content))
-                ).pipe(
+            concatMap(() =>
+                from(this.nodesApi.getNodeContent(this.savedSearchFileNodeId).then((content) => this.mapFileContentToSavedSearches(content))).pipe(
                     catchError((error) => {
                         if (!this.createFileAttempt) {
                             this.createFileAttempt = true;
@@ -70,8 +68,8 @@ export class SavedSearchesService {
                         }
                         return throwError(() => error);
                     })
-                );
-            })
+                )
+            )
         );
     }
 
@@ -130,9 +128,9 @@ export class SavedSearchesService {
             tap((updatedSearches: SavedSearch[]) => {
                 this.savedSearches$.next(updatedSearches);
             }),
-            switchMap((updatedSearches: SavedSearch[]) => {
-                return from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)));
-            }),
+            switchMap((updatedSearches: SavedSearch[]) =>
+                from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)))
+            ),
             catchError((error) => {
                 this.savedSearches$.next(previousSavedSearches);
                 return throwError(() => error);
@@ -161,9 +159,9 @@ export class SavedSearchesService {
             tap((updatedSearches: SavedSearch[]) => {
                 this.savedSearches$.next(updatedSearches);
             }),
-            switchMap((updatedSearches: SavedSearch[]) => {
-                return from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)));
-            }),
+            switchMap((updatedSearches: SavedSearch[]) =>
+                from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)))
+            ),
             catchError((error) => {
                 this.savedSearches$.next(previousSavedSearchesOrder);
                 return throwError(() => error);
@@ -192,9 +190,9 @@ export class SavedSearchesService {
                     }));
                 }),
                 tap((savedSearches: SavedSearch[]) => this.savedSearches$.next(savedSearches)),
-                switchMap((updatedSearches: SavedSearch[]) => {
-                    return from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)));
-                }),
+                switchMap((updatedSearches: SavedSearch[]) =>
+                    from(this.nodesApi.updateNodeContent(this.savedSearchFileNodeId, JSON.stringify(updatedSearches)))
+                ),
                 catchError((error) => {
                     this.savedSearches$.next(previousSavedSearchesOrder);
                     return throwError(() => error);

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -11,8 +11,7 @@
             [preset]="preset"
             [displayTags]="displayTags"
             [displayCategories]="displayCategories"
-            [customPanels]="customPanels">
-        </adf-content-metadata>
+            [customPanels]="customPanels" />
     </mat-card-content>
     <mat-card-footer class="adf-content-metadata-card-footer adf-content-metadata-card-view-footer">
         <div>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -52,8 +52,7 @@
             [displayEmpty]="displayEmpty"
             [copyToClipboardAction]="copyToClipboardAction"
             [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
-            [multiValueSeparator]="multiValueSeparator">
-        </adf-card-view>
+            [multiValueSeparator]="multiValueSeparator" />
     </mat-expansion-panel>
 
     <ng-container *ngIf="displayTags">
@@ -114,8 +113,7 @@
                 (tagsChange)="storeTagsToAssign($event)"
                 [mode]="tagsCreatorMode"
                 [tags]="assignedTags"
-                [disabledTagsRemoving]="saving">
-            </adf-tags-creator>
+                [disabledTagsRemoving]="saving" />
         </mat-expansion-panel>
     </ng-container>
 
@@ -178,8 +176,7 @@
                 [categories]="categories"
                 [managementMode]="categoriesManagementMode"
                 [classifiableChanged]="classifiableChanged"
-                (categoriesChange)="storeCategoriesToAssign($event)">
-            </adf-categories-management>
+                (categoriesChange)="storeCategoriesToAssign($event)" />
         </mat-expansion-panel>
     </ng-container>
 
@@ -196,10 +193,9 @@
             <adf-content-metadata-header
                 class="adf-metadata-custom-panel-title"
                 [title]="customPanel.panelTitle"
-                [expanded]="currentPanel.panelTitle === customPanel.panelTitle && currentPanel.expanded">
-            </adf-content-metadata-header>
+                [expanded]="currentPanel.panelTitle === customPanel.panelTitle && currentPanel.expanded" />
         </mat-expansion-panel-header>
-        <adf-dynamic-component [id]="customPanel.component" [data]="{ node }"></adf-dynamic-component>
+        <adf-dynamic-component [id]="customPanel.component" [data]="{ node }" />
     </mat-expansion-panel>
 
     <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
@@ -257,13 +253,12 @@
                     [copyToClipboardAction]="copyToClipboardAction"
                     [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
                     [multiValueSeparator]="multiValueSeparator"
-                    [displayLabelForChips]="true">
-                </adf-card-view>
+                    [displayLabelForChips]="true" />
             </mat-expansion-panel>
         </div>
     </ng-container>
 
     <ng-template #loading>
-        <mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate"> </mat-progress-bar>
+        <mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate" />
     </ng-template>
 </mat-accordion>

lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html

@@ -34,8 +34,7 @@
         [hideMyFiles]="dropdownHideMyFiles"
         [siteList]="dropdownSiteList"
         [value]="startSiteGuid"
-        data-automation-id="content-node-selector-sites-combo">
-    </adf-sites-dropdown>
+        data-automation-id="content-node-selector-sites-combo" />
     <button *ngIf="hasCustomModels()"
         data-automation-id="adf-toggle-search-panel-button"
         mat-icon-button
@@ -44,7 +43,7 @@
         {{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
     </button>
     <div class="adf-content-node-selector-search-panel-container">
-        <adf-search-panel *ngIf="searchPanelExpanded"></adf-search-panel>
+        <adf-search-panel *ngIf="searchPanelExpanded" />
         <div class="adf-content-node-selector-document-list-container">
     <adf-toolbar>
         <adf-toolbar-title>
@@ -59,9 +58,8 @@ <h2 class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | transla
                 [transform]="breadcrumbTransform"
                 [folderNode]="breadcrumbFolderNode"
                 [root]="breadcrumbFolderTitle"
-                data-automation-id="content-node-selector-content-breadcrumb">
-            </adf-dropdown-breadcrumb>
-            <ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()"></ng-container>
+                data-automation-id="content-node-selector-content-breadcrumb" />
+            <ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()" />
         </adf-toolbar-title>
     </adf-toolbar>
 
@@ -98,15 +96,15 @@ <h2 class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | transla
             </adf-custom-empty-content-template>
 
             <data-columns>
-                <data-column key="$thumbnail" type="image"></data-column>
+                <data-column key="$thumbnail" type="image" />
                 <data-column key="name" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.NAME" class="adf-full-width adf-ellipsis-cell">
                     <ng-template let-context>
-                        <adf-name-location-cell [row]="context.row"></adf-name-location-cell>
+                        <adf-name-location-cell [row]="context.row" />
                     </ng-template>
                 </data-column>
-                <data-column key="modifiedAt" type="date" title="ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
-                <data-column key="createdByUser.displayName" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.CREATED_BY" class="adf-content-selector-modifier-cell"></data-column>
-                <data-column key="visibility" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.STATUS" class="adf-content-selector-visibility-cell"></data-column>
+                <data-column key="modifiedAt" type="date" title="ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON" format="timeAgo" class="adf-content-selector-modified-cell" />
+                <data-column key="createdByUser.displayName" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.CREATED_BY" class="adf-content-selector-modifier-cell" />
+                <data-column key="visibility" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.STATUS" class="adf-content-selector-visibility-cell" />
             </data-columns>
 
         </adf-document-list>

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -4,7 +4,7 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
                    mat-align-tabs="start"
                    (selectedIndexChange)="onTabSelectionChange($event)">
         <mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
-            <ng-container *ngTemplateOutlet='contentNodePanel'></ng-container>
+            <ng-container *ngTemplateOutlet='contentNodePanel' />
         </mat-tab>
         <mat-tab [disabled]="isNotAllowedToUpload()">
             <div class="adf-content-node-selector-local-upload-container">
@@ -17,8 +17,8 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
                               [rootId]="data?.currentFolderId"
                               [readOnly]="true"
                               data-automation-id="content-node-selector-upload-breadcrumb"
-                            ></adf-dropdown-breadcrumb>
-                            <ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
+                            />
+                            <ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()" />
                         </adf-toolbar-title>
                     </adf-toolbar>
                     <ng-template mat-tab-label>
@@ -32,7 +32,7 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
                 <div class="adf-content-node-selector-local-upload-content">
                     <adf-upload-drag-area [rootFolderId]="currentDirectoryId">
                         <div [class.adf-upload-dialog-container]="uploadStarted">
-                            <adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
+                            <adf-file-uploading-dialog [alwaysVisible]="true" />
                         </div>
                         <adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
                             <div class="adf-empty-list_template adf-empty-folder">
@@ -71,8 +71,7 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
       (select)="onSelect($event)"
       (showingSearch)="onShowingSearch($event)"
       (siteChange)="onSiteChange($event)"
-      (navigationChange)="onNavigationChange($event)">
-    </adf-content-node-selector-panel>
+      (navigationChange)="onNavigationChange($event)" />
 </ng-template>
 
 
@@ -84,8 +83,7 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
                 [multipleFiles]="isMultipleSelection()"
                 [rootFolderId]="currentDirectoryId"
                 [disabled]="isNotAllowedToUpload()"
-                (error)="onError($event)">
-            </adf-upload-button>
+                (error)="onError($event)" />
         </ng-container>
     </div>
     <div>

lib/content-services/src/lib/content-node-share/content-node-share.dialog.html

@@ -24,8 +24,7 @@
                         data-automation-id="adf-expire-toggle"
                         aria-label="{{ 'SHARE.EXPIRES' | translate }}"
                         [checked]="!!time.value"
-                        (change)="onToggleExpirationDate($event)">
-                    </mat-slide-toggle>
+                        (change)="onToggleExpirationDate($event)" />
                 </div>
                 <div
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
@@ -37,12 +36,10 @@
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon adf-share-link__calender-icon">
-                        </mat-datepicker-toggle>
+                            class="adf-share-link__icon adf-share-link__calender-icon" />
                         <mat-datepicker
                             #datePicker
-                            (closed)="onDatePickerClosed()">
-                        </mat-datepicker>
+                            (closed)="onDatePickerClosed()" />
                         <input
                             class="adf-share-link__input"
                             #datePickerInput
@@ -67,8 +64,7 @@
                         aria-label="{{ 'SHARE.TITLE' | translate }}"
                         [checked]="isFileShared"
                         [disabled]="!canUpdate || isDisabled"
-                        (change)="onSlideShareChange($event)">
-                    </mat-slide-toggle>
+                        (change)="onSlideShareChange($event)" />
                     <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
                     </div>
                 </div>

lib/content-services/src/lib/dialogs/category-selector/category-selector.dialog.html

@@ -7,8 +7,7 @@ <h1 mat-dialog-title>
             (categoriesChange)="categories = $event"
             [categoryNameControlVisible]="true"
             [managementMode]="categoriesManagementMode"
-            [multiSelect]="multiSelect">
-    </adf-categories-management>
+            [multiSelect]="multiSelect" />
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html

@@ -1,6 +1,6 @@
 <h1 matDialogTitle>{{ 'CORE.DIALOG.DOWNLOAD_ZIP.TITLE' | translate }}</h1>
 <div mat-dialog-content class="adf-dialog-content">
-    <mat-progress-bar value="{{ percentageDone }}" color="primary" mode="determinate"></mat-progress-bar>
+    <mat-progress-bar value="{{ percentageDone }}" color="primary" mode="determinate" />
     <div class="adf-dialog-content-progress-text">
         <span class="adf-dialog-content-progress-text-percentage">
             {{ percentageDone }}%

lib/content-services/src/lib/dialogs/node-lock/node-lock.dialog.html

@@ -25,8 +25,8 @@ <h2 mat-dialog-title>
             <br />
 
             <mat-form-field *ngIf="form.value?.isTimeLock">
-                <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
-                <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
+                <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix />
+                <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1" />
                 <input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">
             </mat-form-field>
         </div>

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -35,8 +35,7 @@
         <adf-filter-header
             [currentFolderId]="currentFolderId"
             [value]="filterValue"
-            (filterSelection)="onFilterSelectionChange($event)">
-        </adf-filter-header>
+            (filterSelection)="onFilterSelectionChange($event)" />
     </div>
 
     <adf-no-content-template>
@@ -71,8 +70,7 @@
                     class="adf-document-list-loading-margin"
                     [attr.aria-label]="'ADF-DOCUMENT-LIST.LOADER_LABEL' | translate"
                     [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </mat-progress-spinner>
+                    [mode]="'indeterminate'" />
             </div>
             <ng-content select="adf-custom-loading-content-template"></ng-content>
         </ng-template>
@@ -85,8 +83,7 @@
               [mainMenuTrigger]="mainMenuTrigger"
               [columnsSorting]="false"
               [maxColumnsVisible]="maxColumnsVisible"
-              (submitColumnsVisibility)="onColumnsVisibilityChange($event)">
-            </adf-datatable-column-selector>
+              (submitColumnsVisibility)="onColumnsVisibilityChange($event)" />
         </ng-template>
     </adf-main-menu-datatable-template>
 

lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.html

@@ -3,8 +3,7 @@
         <ng-template let-col>
             <adf-search-filter-container [col]="col"
                                          [value]="value"
-                                         (filterChange)="onFilterSelectionChange()">
-            </adf-search-filter-container>
+                                         (filterChange)="onFilterSelectionChange()" />
         </ng-template>
     </adf-header-filter-template>
 </div>