fix: standalone components (#108)

* chore: update lint rules * chore: update ng-mocks * chore: update angular cli * fix: standalone for ng-mocks
BugSplat-Git · Jan 20, 2025 · 88d1983 · 88d1983
1 parent fae0de9
commit 88d1983
Show file tree

Hide file tree

Showing 20 changed files with 1,779 additions and 990 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,13 +46,13 @@
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.3",
+    "@angular-devkit/build-angular": "^19.1.3",
     "@angular-eslint/builder": "19.0.1",
     "@angular-eslint/eslint-plugin": "19.0.1",
     "@angular-eslint/eslint-plugin-template": "19.0.1",
     "@angular-eslint/schematics": "19.0.1",
     "@angular-eslint/template-parser": "19.0.1",
-    "@angular/cli": "^19.0.3",
+    "@angular/cli": "^19.1.3",
     "@angular/compiler-cli": "^19.0.3",
     "@angular/language-service": "^19.0.3",
     "@commitlint/cli": "^19.6.0",
@@ -73,7 +73,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-mocks": "^14.13.1",
+    "ng-mocks": "^14.13.2",
     "ng-packagr": "^19.0.1",
     "semantic-release": "^24.2.0",
     "semantic-release-cli": "^5.4.6",

diff --git a/projects/ngb-filterable-dropdown-example/.eslintrc.json b/projects/ngb-filterable-dropdown-example/.eslintrc.json
@@ -33,7 +33,7 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/prefer-standalone": "off"
+        "@angular-eslint/prefer-standalone": "error"
       }
     },
     {

diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.component.spec.ts b/projects/ngb-filterable-dropdown-example/src/app/app.component.spec.ts
@@ -1,36 +1,39 @@
-import { TestBed } from '@angular/core/testing';
-import { NgbCustomFilterableDropdownModule, NgbFilterableDropdownModule } from 'projects/ngb-filterable-dropdown/src';
-import { AppComponent } from './app.component';
+import { TestBed } from "@angular/core/testing";
+import {
+  NgbCustomFilterableDropdownModule,
+  NgbFilterableDropdownModule,
+} from "projects/ngb-filterable-dropdown/src";
+import { AppComponent } from "./app.component";
 
-describe('AppComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-      ],
+describe("AppComponent", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
+        AppComponent,
         NgbCustomFilterableDropdownModule,
-        NgbFilterableDropdownModule
-      ]
+        NgbFilterableDropdownModule,
+      ],
     }).compileComponents();
   });
 
-  it('should create the app', () => {
+  it("should create the app", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it('should have as title \'ngb-filterable-dropdown-examples\'', () => {
+  it("should have as title 'ngb-filterable-dropdown-examples'", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('ngb-filterable-dropdown-examples');
+    expect(app.title).toEqual("ngb-filterable-dropdown-examples");
   });
 
-  it('should render title', () => {
+  it("should render title", () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h2').textContent).toContain('ngb-filterable-dropdown-examples');
+    expect(compiled.querySelector("h2").textContent).toContain(
+      "ngb-filterable-dropdown-examples"
+    );
   });
 });
diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.component.ts b/projects/ngb-filterable-dropdown-example/src/app/app.component.ts
@@ -1,29 +1,51 @@
-import { Component } from '@angular/core';
-import { ItemCreatedEvent, NgbFilterableDropdownSelectionMode, OpenChangedEvent, SelectionChangedEvent } from 'projects/ngb-filterable-dropdown/src';
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import {
+  ItemCreatedEvent,
+  NgbCustomFilterableDropdownModule,
+  NgbFilterableDropdownModule,
+  NgbFilterableDropdownSelectionMode,
+  OpenChangedEvent,
+  SelectionChangedEvent,
+} from "projects/ngb-filterable-dropdown/src";
 
 @Component({
-    selector: 'app-root', // eslint-disable-line  @angular-eslint/component-selector
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    standalone: false
+  selector: "app-root", // eslint-disable-line  @angular-eslint/component-selector
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+  imports: [
+    NgbFilterableDropdownModule,
+    NgbCustomFilterableDropdownModule,
+    CommonModule,
+  ],
 })
 export class AppComponent {
-  title = 'ngb-filterable-dropdown-examples';
-
-  selectionModes: Array<string> = Object.values(NgbFilterableDropdownSelectionMode);
-  autoCloseValues = ['inside', 'outside', true, false];
-
-  items = ['Beetle', 'Ant', 'Moth', 'Fire Ant', 'Dung Beetle', 'Grass Ant', 'A Really Long Made Up Bug Name For Testing Tooltips Etc Etc Yadda Yadda Yadda'];
+  title = "ngb-filterable-dropdown-examples";
+
+  selectionModes: Array<string> = Object.values(
+    NgbFilterableDropdownSelectionMode
+  );
+  autoCloseValues = ["inside", "outside", true, false];
+
+  items = [
+    "Beetle",
+    "Ant",
+    "Moth",
+    "Fire Ant",
+    "Dung Beetle",
+    "Grass Ant",
+    "A Really Long Made Up Bug Name For Testing Tooltips Etc Etc Yadda Yadda Yadda",
+  ];
 
   allowCreateItem = false;
-  autoClose: boolean | 'inside' | 'outside' = false;
+  autoClose: boolean | "inside" | "outside" = false;
   customToggleText = false;
   disabled = false;
   genericHandleUseCustomHandle = true;
-  genericHandleSelection: string | Array<string> = 'nothing';
+  genericHandleSelection: string | Array<string> = "nothing";
   isGenericHandleDropdownOpen = false;
-  searchInputPlaceholder = 'Search Bugs';
-  selection: string | Array<string> = 'Moth';
+  searchInputPlaceholder = "Search Bugs";
+  selection: string | Array<string> = "Moth";
   selectionMode = NgbFilterableDropdownSelectionMode.SingleSelect;
   tooltips = false;
   tooltipsOpenDelay = 750;
@@ -49,7 +71,7 @@ export class AppComponent {
     this.genericHandleSelection = $event.selection;
   }
 
-  onAutoCloseValueChanged(value: boolean | 'inside' | 'outside'): void {
+  onAutoCloseValueChanged(value: boolean | "inside" | "outside"): void {
     this.autoClose = value;
   }
 

diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.module.ts b/projects/ngb-filterable-dropdown-example/src/app/app.module.ts
diff --git a/projects/ngb-filterable-dropdown-example/src/main.ts b/projects/ngb-filterable-dropdown-example/src/main.ts
@@ -1,12 +1,10 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { enableProdMode } from "@angular/core";
+import { bootstrapApplication } from "@angular/platform-browser";
+import { environment } from "./environments/environment";
+import { AppComponent } from "./app/app.component";
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent);
diff --git a/projects/ngb-filterable-dropdown/.eslintrc.json b/projects/ngb-filterable-dropdown/.eslintrc.json
@@ -32,7 +32,7 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/prefer-standalone": "off"
+        "@angular-eslint/prefer-standalone": "error"
       }
     },
     {

diff --git a/projects/ngb-filterable-dropdown/src/lib/internals/icons/all.component.ts b/projects/ngb-filterable-dropdown/src/lib/internals/icons/all.component.ts
@@ -1,15 +1,28 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-    selector: 'icon-all', // eslint-disable-line  @angular-eslint/component-selector
-    template: `
-    <svg height="12px" width="12px" fill="#000000" version="1.1" x="0px" y="0px" viewBox="21.481 21.441 57.23 57.237" style="enable-background:new 0 0 100 100; padding-bottom: 1px;" xmlns="http://www.w3.org/2000/svg">
-        <g>
-            <path d="M74.5,21.7H33.6c-2.1,0-3.8,1.7-3.8,3.8v4.3h-3.2c-2.7,0-4.9,2.2-4.9,4.9v38.8c0,2.7,2.2,4.9,4.9,4.9h38.8   c2.7,0,4.9-2.2,4.9-4.9v-3.2h4.3c2.1,0,3.8-1.7,3.8-3.8V25.5C78.3,23.4,76.6,21.7,74.5,21.7z M66.9,73.4c0,0.9-0.7,1.6-1.6,1.6   H26.6c-0.9,0-1.6-0.7-1.6-1.6V34.6c0-0.9,0.7-1.6,1.6-1.6h38.8c0.9,0,1.6,0.7,1.6,1.6V73.4z M75,66.4c0,0.3-0.2,0.5-0.5,0.5h-4.3   V34.6c0-2.7-2.2-4.9-4.9-4.9H33.1v-4.3c0-0.3,0.2-0.5,0.5-0.5h40.9c0.3,0,0.5,0.2,0.5,0.5V66.4z"/>
-            <path d="M54.4,42.4L40,58.8l-2.6-2.7c-1.2-1.3-3.3-1.3-4.5-0.1s-1.3,3.3-0.1,4.5l5,5.2c0.6,0.6,1.4,1,2.3,1c0,0,0,0,0.1,0   c0.9,0,1.7-0.4,2.3-1.1l16.8-19c1.2-1.3,1.1-3.4-0.3-4.5C57.6,41,55.6,41.1,54.4,42.4z"/>
-        </g>
+  selector: "icon-all", // eslint-disable-line  @angular-eslint/component-selector
+  template: `
+    <svg
+      height="12px"
+      width="12px"
+      fill="#000000"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="21.481 21.441 57.23 57.237"
+      style="enable-background:new 0 0 100 100; padding-bottom: 1px;"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M74.5,21.7H33.6c-2.1,0-3.8,1.7-3.8,3.8v4.3h-3.2c-2.7,0-4.9,2.2-4.9,4.9v38.8c0,2.7,2.2,4.9,4.9,4.9h38.8   c2.7,0,4.9-2.2,4.9-4.9v-3.2h4.3c2.1,0,3.8-1.7,3.8-3.8V25.5C78.3,23.4,76.6,21.7,74.5,21.7z M66.9,73.4c0,0.9-0.7,1.6-1.6,1.6   H26.6c-0.9,0-1.6-0.7-1.6-1.6V34.6c0-0.9,0.7-1.6,1.6-1.6h38.8c0.9,0,1.6,0.7,1.6,1.6V73.4z M75,66.4c0,0.3-0.2,0.5-0.5,0.5h-4.3   V34.6c0-2.7-2.2-4.9-4.9-4.9H33.1v-4.3c0-0.3,0.2-0.5,0.5-0.5h40.9c0.3,0,0.5,0.2,0.5,0.5V66.4z"
+        />
+        <path
+          d="M54.4,42.4L40,58.8l-2.6-2.7c-1.2-1.3-3.3-1.3-4.5-0.1s-1.3,3.3-0.1,4.5l5,5.2c0.6,0.6,1.4,1,2.3,1c0,0,0,0,0.1,0   c0.9,0,1.7-0.4,2.3-1.1l16.8-19c1.2-1.3,1.1-3.4-0.3-4.5C57.6,41,55.6,41.1,54.4,42.4z"
+        />
+      </g>
     </svg>
-    `,
-    standalone: false
+  `,
 })
-export class AllComponent { }
+export class AllComponent {}
diff --git a/projects/ngb-filterable-dropdown/src/lib/internals/icons/checkmark.component.ts b/projects/ngb-filterable-dropdown/src/lib/internals/icons/checkmark.component.ts
@@ -1,19 +1,37 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-    selector: 'icon-checkmark', // eslint-disable-line  @angular-eslint/component-selector
-    template: `
-    <svg height='14px' width='14px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 333 333" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
+  selector: "icon-checkmark", // eslint-disable-line  @angular-eslint/component-selector
+  template: `
+    <svg
+      height="14px"
+      width="14px"
+      fill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      xml:space="preserve"
+      version="1.1"
+      style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;"
+      viewBox="0 0 333 333"
+      x="0px"
+      y="0px"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    >
       <defs>
         <style type="text/css">
-          .fil0 {fill:#000000}
+          .fil0 {
+            fill: #000000;
+          }
         </style>
       </defs>
       <g>
-        <path class="fil0" d="M47 165c-20,-21 -52,11 -31,31 26,27 52,55 79,81 12,11 21,11 32,0l191 -190c20,-21 -11,-53 -32,-32l-174 174 -65 -64z"></path>
+        <path
+          class="fil0"
+          d="M47 165c-20,-21 -52,11 -31,31 26,27 52,55 79,81 12,11 21,11 32,0l191 -190c20,-21 -11,-53 -32,-32l-174 174 -65 -64z"
+        ></path>
       </g>
     </svg>
-    `,
-    standalone: false
+  `,
 })
-export class CheckmarkComponent { }
+export class CheckmarkComponent {}
diff --git a/projects/ngb-filterable-dropdown/src/lib/internals/icons/none.component.ts b/projects/ngb-filterable-dropdown/src/lib/internals/icons/none.component.ts
@@ -1,14 +1,25 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-    selector: 'icon-none', // eslint-disable-line  @angular-eslint/component-selector
-    template: `
-    <svg height="12px" width="12px" fill="#000000" version="1.1" x="0px" y="0px" viewBox="21.481 21.441 57.23 57.237" style="enable-background:new 0 0 100 100; padding-bottom: 1px;" xmlns="http://www.w3.org/2000/svg">
+  selector: "icon-none", // eslint-disable-line  @angular-eslint/component-selector
+  template: `
+    <svg
+      height="12px"
+      width="12px"
+      fill="#000000"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="21.481 21.441 57.23 57.237"
+      style="enable-background:new 0 0 100 100; padding-bottom: 1px;"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g>
-        <path d="M74.5,21.7H33.6c-2.1,0-3.8,1.7-3.8,3.8v4.3h-3.2c-2.7,0-4.9,2.2-4.9,4.9v38.8c0,2.7,2.2,4.9,4.9,4.9h38.8   c2.7,0,4.9-2.2,4.9-4.9v-3.2h4.3c2.1,0,3.8-1.7,3.8-3.8V25.5C78.3,23.4,76.6,21.7,74.5,21.7z M66.9,73.4c0,0.9-0.7,1.6-1.6,1.6   H26.6c-0.9,0-1.6-0.7-1.6-1.6V34.6c0-0.9,0.7-1.6,1.6-1.6h38.8c0.9,0,1.6,0.7,1.6,1.6V73.4z M75,66.4c0,0.3-0.2,0.5-0.5,0.5h-4.3   V34.6c0-2.7-2.2-4.9-4.9-4.9H33.1v-4.3c0-0.3,0.2-0.5,0.5-0.5h40.9c0.3,0,0.5,0.2,0.5,0.5V66.4z"/>
+        <path
+          d="M74.5,21.7H33.6c-2.1,0-3.8,1.7-3.8,3.8v4.3h-3.2c-2.7,0-4.9,2.2-4.9,4.9v38.8c0,2.7,2.2,4.9,4.9,4.9h38.8   c2.7,0,4.9-2.2,4.9-4.9v-3.2h4.3c2.1,0,3.8-1.7,3.8-3.8V25.5C78.3,23.4,76.6,21.7,74.5,21.7z M66.9,73.4c0,0.9-0.7,1.6-1.6,1.6   H26.6c-0.9,0-1.6-0.7-1.6-1.6V34.6c0-0.9,0.7-1.6,1.6-1.6h38.8c0.9,0,1.6,0.7,1.6,1.6V73.4z M75,66.4c0,0.3-0.2,0.5-0.5,0.5h-4.3   V34.6c0-2.7-2.2-4.9-4.9-4.9H33.1v-4.3c0-0.3,0.2-0.5,0.5-0.5h40.9c0.3,0,0.5,0.2,0.5,0.5V66.4z"
+        />
       </g>
     </svg>
-    `,
-    standalone: false
+  `,
 })
-export class NoneComponent { }
+export class NoneComponent {}
diff --git a/projects/ngb-filterable-dropdown/src/lib/internals/icons/plus.component.ts b/projects/ngb-filterable-dropdown/src/lib/internals/icons/plus.component.ts
@@ -1,10 +1,39 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-    selector: 'icon-plus', // eslint-disable-line  @angular-eslint/component-selector
-    template: `
-    <svg height='14px' width='14px' style="padding-bottom: 1px;" fill="#000000" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 50,964.36218 c -2.7615,0 -5,2.2386 -5,5 l 0,28.0001 -28,0 c -2.7614,0 -5,2.2385 -5,5.00002 0,2.7615 2.2386,5 5,5 l 28,0 0,27.9999 c 0,2.7614 2.2385,5 5,5 2.7615,0 5,-2.2386 5,-5 l 0,-27.9999 28,0 c 2.7614,0 5,-2.2385 5,-5 0,-2.76152 -2.2386,-5.00002 -5,-5.00002 l -28,0 0,-28.0001 c 0,-2.7614 -2.2385,-5 -5,-5 z" fill="#000000" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>
-    `,
-    standalone: false
+  selector: "icon-plus", // eslint-disable-line  @angular-eslint/component-selector
+  template: `
+    <svg
+      height="14px"
+      width="14px"
+      style="padding-bottom: 1px;"
+      fill="#000000"
+      xmlns:dc="http://purl.org/dc/elements/1.1/"
+      xmlns:cc="http://creativecommons.org/ns#"
+      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+      xmlns:svg="http://www.w3.org/2000/svg"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 100"
+    >
+      <g transform="translate(0,-952.36218)">
+        <path
+          style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;"
+          d="m 50,964.36218 c -2.7615,0 -5,2.2386 -5,5 l 0,28.0001 -28,0 c -2.7614,0 -5,2.2385 -5,5.00002 0,2.7615 2.2386,5 5,5 l 28,0 0,27.9999 c 0,2.7614 2.2385,5 5,5 2.7615,0 5,-2.2386 5,-5 l 0,-27.9999 28,0 c 2.7614,0 5,-2.2385 5,-5 0,-2.76152 -2.2386,-5.00002 -5,-5.00002 l -28,0 0,-28.0001 c 0,-2.7614 -2.2385,-5 -5,-5 z"
+          fill="#000000"
+          fill-opacity="1"
+          stroke="none"
+          marker="none"
+          visibility="visible"
+          display="inline"
+          overflow="visible"
+        ></path>
+      </g>
+    </svg>
+  `,
 })
-export class PlusComponent { }
+export class PlusComponent {}
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ @@
                 "style": "kebab-case"
               }
             ],
-            "@angular-eslint/prefer-standalone": "off"
+            "@angular-eslint/prefer-standalone": "error"
           }
         },
         {
@@ Expand Down @@