style: enable all angular eslint rules (#DS-2920) (#732)

Author: artembelik

.eslintrc.js

@@ -116,8 +116,10 @@ const typescriptRules = {
         tsconfigRootDir: __dirname
     },
     extends: [
+        /** @see https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslintrc/all.ts */
         'plugin:@typescript-eslint/recommended',
-        'plugin:@angular-eslint/recommended',
+        /** @see https://github.com/angular-eslint/angular-eslint/blob/main/packages/angular-eslint/src/configs/ts-all.ts */
+        'plugin:@angular-eslint/all',
         'plugin:@angular-eslint/template/process-inline-templates',
         'plugin:rxjs/recommended'
     ],
@@ -144,8 +146,21 @@ const typescriptRules = {
         '@angular-eslint/no-input-rename': 0,
         '@angular-eslint/no-outputs-metadata-property': 0,
         '@angular-eslint/no-output-native': 0,
-        '@angular-eslint/no-async-lifecycle-method': 1,
-        '@angular-eslint/contextual-decorator': 1,
+        '@angular-eslint/prefer-on-push-component-change-detection': 0,
+        '@angular-eslint/relative-url-prefix': 0,
+        '@angular-eslint/component-max-inline-declarations': 0,
+        '@angular-eslint/consistent-component-styles': 0,
+        '@angular-eslint/use-component-view-encapsulation': 0,
+        '@angular-eslint/use-injectable-provided-in': 0,
+        '@angular-eslint/no-forward-ref': 0,
+        '@angular-eslint/prefer-standalone-component': 0,
+        '@angular-eslint/prefer-standalone': 0,
+        '@angular-eslint/sort-lifecycle-methods': 0,
+        '@angular-eslint/prefer-output-readonly': 0,
+        '@angular-eslint/no-conflicting-lifecycle': 0,
+        '@angular-eslint/no-attribute-decorator': 0,
+        '@angular-eslint/no-pipe-impure': 0,
+        '@angular-eslint/sort-ngmodule-metadata-arrays': 0,
 
         // plugin:rxjs
         'rxjs/no-implicit-any-catch': 0,
@@ -165,8 +180,8 @@ const typescriptRules = {
 const templateRules = {
     files: ['*.html'],
     extends: [
-        'plugin:@angular-eslint/template/recommended',
-        'plugin:@angular-eslint/template/accessibility'
+        /** @see https://github.com/angular-eslint/angular-eslint/blob/main/packages/angular-eslint/src/configs/template-all.ts */
+        'plugin:@angular-eslint/template/all'
     ],
     rules: {
         // plugin:@angular-eslint/template
@@ -175,8 +190,14 @@ const templateRules = {
         '@angular-eslint/template/click-events-have-key-events': 0,
         '@angular-eslint/template/interactive-supports-focus': 0,
         '@angular-eslint/template/label-has-associated-control': 0,
-        '@angular-eslint/template/prefer-self-closing-tags': 1,
-        '@angular-eslint/template/prefer-control-flow': 1
+        '@angular-eslint/template/i18n': 0,
+        '@angular-eslint/template/no-call-expression': 0,
+        '@angular-eslint/template/prefer-ngsrc': 0,
+        '@angular-eslint/template/no-inline-styles': 0,
+        '@angular-eslint/template/button-has-type': 0,
+        '@angular-eslint/template/no-interpolation-in-attributes': 0,
+        '@angular-eslint/template/attributes-order': 0,
+        '@angular-eslint/template/no-any': 0
     }
 };
 
@@ -205,7 +226,7 @@ const componentsDevRules = {
                 style: 'kebab-case'
             }
         ],
-        '@angular-eslint/prefer-standalone-component': 1,
+        '@angular-eslint/prefer-standalone': 1,
         '@angular-eslint/use-component-selector': 1,
         '@angular-eslint/prefer-on-push-component-change-detection': 1,
 
@@ -224,7 +245,7 @@ const componentsDevRules = {
 const componentsExamplesRules = {
     files: ['packages/docs-examples/**/*.ts'],
     rules: {
-        '@angular-eslint/prefer-standalone-component': 1,
+        '@angular-eslint/prefer-standalone': 1,
         '@angular-eslint/use-component-selector': 1
     }
 };
@@ -235,7 +256,6 @@ const componentsExamplesRules = {
  * @type {import('eslint').Linter.ConfigOverride}
  */
 const appDocsRules = {
-    // Override rules for docs app
     files: ['apps/docs/**/*.ts'],
     rules: {
         // plugin:eslint
@@ -258,7 +278,7 @@ const appDocsRules = {
                 style: 'kebab-case'
             }
         ],
-        '@angular-eslint/prefer-standalone-component': 1,
+        '@angular-eslint/prefer-standalone': 1,
         '@angular-eslint/use-component-selector': 1
     }
 };
@@ -269,7 +289,6 @@ const appDocsRules = {
  * @type {import('eslint').Linter.ConfigOverride}
  */
 const specRules = {
-    // Override rules for test files
     files: ['*.spec.ts', '*.karma-spec.ts'],
     rules: {
         '@angular-eslint/use-component-selector': 0,
@@ -295,14 +314,15 @@ const config = {
         'file-progress'
     ],
     extends: [
-        'plugin:eslint-comments/recommended'
+        'plugin:@eslint-community/eslint-comments/recommended'
     ],
     rules: {
         // plugin:file-progress
         'file-progress/activate': isCI ? 0 : 1,
 
-        // plugin:eslint-comments
-        'eslint-comments/no-unused-disable': 1
+        // plugin:@eslint-community/eslint-comments
+        '@eslint-community/eslint-comments/no-unused-disable': 1,
+        '@eslint-community/eslint-comments/disable-enable-pair': [1, { allowWholeFile: true }]
     },
     overrides: [
         javascriptAndTypescriptRules,

apps/docs/src/app/components/navbar/navbar.component.ts

@@ -107,6 +107,7 @@ export class DocsNavbarComponent extends DocsLocaleState implements OnDestroy {
     }
 
     ngOnDestroy() {
+        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
         this.themeService.ngOnDestroy();
 
         try {

package.json

@@ -62,6 +62,7 @@
         "@commitlint/config-conventional": "^19.5.0",
         "@cspell/dict-markdown": "^2.0.2",
         "@cspell/dict-ru_ru": "^2.2.1",
+        "@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",
         "@koobiq/design-tokens": "^3.12.1",
         "@koobiq/luxon-date-adapter": "^3.1.4",
         "@koobiq/moment-date-adapter": "^3.1.4",
@@ -107,7 +108,6 @@
         "dotenv": "^16.4.5",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
         "eslint-plugin-file-progress": "^1.5.0",
         "eslint-plugin-prettier": "^5.2.6",
         "eslint-plugin-promise": "^7.2.1",

packages/components-dev/list/template.html

@@ -13,7 +13,7 @@ <h5>single selection</h5>
         Normal
         <kbq-option-action
             [kbqDropdownTriggerFor]="dropdown"
-            [kbqPlacement]="$any('right')"
+            [kbqPlacement]="popUpPlacements.Right"
             [kbqTooltip]="'Tooltip text'"
         />
     </kbq-list-option>

packages/components-dev/popover/module.ts

@@ -150,14 +150,16 @@ export class DevApp {
         return this.activatedPosition === value && this.selectedPlacement !== this.activatedPosition;
     }
 
-    getOrder(forElement: string) {
+    getOrder(forElement: string): number {
         if (forElement === 'config') {
-            return this.selectedOrder ? { order: 2 } : { order: 1 };
+            return this.selectedOrder ? 2 : 1;
         }
 
         if (forElement === 'result') {
-            return this.selectedOrder ? { order: 1 } : { order: 2 };
+            return this.selectedOrder ? 1 : 2;
         }
+
+        return 1;
     }
 
     get isFallbackActivated(): boolean {

packages/components-dev/popover/template.html

@@ -41,7 +41,7 @@
 <dev-examples />
 
 <div class="dev-container flex-100 layout-column layout-align-start-start">
-    <div class="kbq-form-vertical layout-row layou-align-start-start dev-config" [style]="getOrder('config')">
+    <div class="kbq-form-vertical layout-row layou-align-start-start dev-config" [style.order]="getOrder('config')">
         <div class="flex-20 kbq-form__fieldset">
             <div class="kbq-form__row">
                 <label for="order" class="kbq-form__label">Inverse layout order</label>
@@ -291,7 +291,7 @@ <h3>Configuration:</h3>
         </div>
     </div>
 
-    <div cdkScrollable style="overflow: scroll" class="{{ layoutClass }} dev-result" [style]="getOrder('result')">
+    <div cdkScrollable style="overflow: scroll" class="{{ layoutClass }} dev-result" [style.order]="getOrder('result')">
         <div style="min-width: 1500px; display: flex; justify-content: center">
             @switch (showElement()) {
                 @case (ELEMENTS.BUTTON) {

packages/components/datepicker/calendar.component.ts

@@ -207,6 +207,7 @@ export class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
 
     /** Updates today's date after an update of the active date */
     updateTodaysDate() {
+        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
         this.monthView.ngAfterContentInit();
     }
 

packages/components/datepicker/datepicker-module.ts

@@ -25,7 +25,6 @@ import { KbqMonthView } from './month-view.component';
         OverlayModule,
         A11yModule,
         PortalModule,
-        KbqButtonModule,
         KbqSelectModule,
         KbqIconModule,
         NgClass,

packages/components/empty-state/empty-state.module.ts

@@ -20,7 +20,6 @@ import {
         KbqEmptyStateIcon,
         KbqEmptyStateText,
         KbqEmptyStateTitle,
-        KbqEmptyStateTitle,
         KbqEmptyStateActions
     ],
     exports: [

packages/components/textarea/textarea.component.ts

@@ -205,6 +205,7 @@ export class KbqTextarea
         // Force setter to be called in case id was not specified.
         this.id = this.id;
 
+        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
         this.parent?.animationDone.subscribe(() => this.ngOnInit());
 
         this.growSubscription = this.stateChanges.subscribe(this.grow);

packages/components/tree-select/tree-select.component.ts

@@ -574,6 +574,7 @@ export class KbqTreeSelect
             }
         });
 
+        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
         this.tree.ngAfterContentInit();
 
         this.initKeyManager();

packages/docs-examples/components/accordion/accordion-in-section/accordion-in-section-example.ts

@@ -9,6 +9,6 @@ import { KbqAccordionModule } from '@koobiq/components/accordion';
     selector: 'accordion-in-section-example',
     templateUrl: 'accordion-in-section-example.html',
     styleUrls: ['accordion-in-section-example.css'],
-    imports: [KbqAccordionModule, KbqAccordionModule]
+    imports: [KbqAccordionModule]
 })
 export class AccordionInSectionExample {}

packages/docs-examples/components/input/input-number-overview/input-number-overview-example.ts

@@ -14,8 +14,7 @@ import { KbqInputModule } from '@koobiq/components/input';
         KbqFormFieldModule,
         KbqInputModule,
         FormsModule,
-        KbqFormsModule,
-        KbqInputModule
+        KbqFormsModule
     ],
     template: `
         <div class="kbq-text-big">

packages/docs-examples/components/layout-flex/layout-flex-overview/layout-flex-overview-example.ts

@@ -18,7 +18,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
             <kbq-radio-button [value]="'layout-column'">layout-column</kbq-radio-button>
             <kbq-radio-button [value]="'layout-row'">layout-row</kbq-radio-button>
         </kbq-radio-group>
-        <div class="layout-margin-top-4xl" [class]="layoutDirection">
+        <div class="layout-margin-top-4xl {{ layoutDirection }}">
             <div class="flex example-block">first</div>
             <div class="flex example-block">second</div>
             <div class="flex example-block">third</div>

tools/public_api_guard/components/datepicker.api.md

@@ -407,7 +407,7 @@ export class KbqDatepickerModule {
     // Warning: (ae-forgotten-export) The symbol "i7" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i8.KbqButtonModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader]>;
 }
 
 // @public (undocumented)

tools/public_api_guard/components/empty-state.api.md

@@ -58,7 +58,7 @@ export class KbqEmptyStateModule {
     // Warning: (ae-forgotten-export) The symbol "i1" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqEmptyStateModule, [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqEmptyStateModule, [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions]>;
 }
 
 // @public (undocumented)

yarn.lock

@@ -4014,6 +4014,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-community/eslint-plugin-eslint-comments@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "@eslint-community/eslint-plugin-eslint-comments@npm:4.5.0"
+  dependencies:
+    escape-string-regexp: "npm:^4.0.0"
+    ignore: "npm:^5.2.4"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+  checksum: 10c0/19013d30b0c29517f19028718af4bd6b6fd357e5f9b927ee1cf3499ffe3b2852440e9651401947f4f82e962ecd1d228afa1c08f6146751f5158fe0748d924702
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -10969,18 +10981,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-eslint-comments@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "eslint-plugin-eslint-comments@npm:3.2.0"
-  dependencies:
-    escape-string-regexp: "npm:^1.0.5"
-    ignore: "npm:^5.0.5"
-  peerDependencies:
-    eslint: ">=4.19.1"
-  checksum: 10c0/c71db824592dc8ea498021572a0bd33d763ef26126bdb3b84a027ca75a1adbe0894ec95024f7de39ef12308560e62cbf8af0d06ffe472be5ba8bd9169c928e96
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-file-progress@npm:^1.5.0":
   version: 1.5.0
   resolution: "eslint-plugin-file-progress@npm:1.5.0"
@@ -12942,7 +12942,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.5, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+"ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.1
   resolution: "ignore@npm:5.3.1"
   checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
@@ -14773,6 +14773,7 @@ __metadata:
     "@cspell/dict-ru_ru": "npm:^2.2.1"
     "@docsearch/css": "npm:^3.6.2"
     "@docsearch/js": "npm:^3.6.2"
+    "@eslint-community/eslint-plugin-eslint-comments": "npm:^4.5.0"
     "@fontsource/inter": "npm:^5.1.0"
     "@fontsource/jetbrains-mono": "npm:^5.1.1"
     "@koobiq/ag-grid-angular-theme": "npm:^30.0.6"
@@ -14827,7 +14828,6 @@ __metadata:
     dotenv: "npm:^16.4.5"
     eslint: "npm:^8.57.1"
     eslint-config-prettier: "npm:^9.1.0"
-    eslint-plugin-eslint-comments: "npm:^3.2.0"
     eslint-plugin-file-progress: "npm:^1.5.0"
     eslint-plugin-prettier: "npm:^5.2.6"
     eslint-plugin-promise: "npm:^7.2.1"