fix: fixing prettier

README.md

@@ -47,8 +47,12 @@ export class AppModule {}
 
 ```html
 <ngx-primer-accordion-root [type]="'Single'" [collapsible]="true">
-  <ngx-primer-accordion-item [value]="'item1'">Item 1 Content</ngx-primer-accordion-item>
-  <ngx-primer-accordion-item [value]="'item2'">Item 2 Content</ngx-primer-accordion-item>
+  <ngx-primer-accordion-item [value]="'item1'"
+    >Item 1 Content</ngx-primer-accordion-item
+  >
+  <ngx-primer-accordion-item [value]="'item2'"
+    >Item 2 Content</ngx-primer-accordion-item
+  >
 </ngx-primer-accordion-root>
 ```
 

apps/documentations/src/app/app.component.html

@@ -3,15 +3,15 @@
   <main>
     <app-content-section>
       <div class="lg:w-2/3 h-full">
-        <app-banner-text 
+        <app-banner-text
           [brand]="'NgxPrimer'"
           [tagline]="'Lightweight, Agnostic, Unstyled UI Component'"
-          [subtle]="'Primitive UI to Build Your Own Design System'" 
+          [subtle]="'Primitive UI to Build Your Own Design System'"
         />
 
         <div class="w-full flex sm:flex-row justify-start flex-wrap gap-3 mt-6">
-          @for (link  of hyperlinks ; track $index) {
-            <app-feature-button 
+          @for (link of hyperlinks; track $index) {
+            <app-feature-button
               [hyperlink]="link.hyperlink"
               [text]="link.text"
               [target]="link.target"
@@ -21,11 +21,11 @@
       </div>
     </app-content-section>
     <app-content-section>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      <div
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
+      >
         @for (item of features; track $index) {
-          <app-feature-card 
-            [item]="item"
-          />
+          <app-feature-card [item]="item" />
         }
       </div>
     </app-content-section>

apps/documentations/src/app/app.component.spec.ts

@@ -14,7 +14,7 @@ describe('AppComponent', () => {
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome documentations'
+      'Welcome documentations',
     );
   });
 

apps/documentations/src/app/app.component.ts

@@ -1,60 +1,72 @@
 import { AppBannerTextComponent } from './shared/components/commons/app-banner-text/app-banner-text.component';
 import { AppContentSectionComponent } from './shared/components/commons/app-content-section/app-content-section.component';
 import { AppFeatureButtonComponent } from './shared/components/commons/app-feature-button/app-feature-button.component';
-import { AppFeatureCardComponent } from "./shared/components/commons/app-feature-card/app-feature-card.component";
+import { AppFeatureCardComponent } from './shared/components/commons/app-feature-card/app-feature-card.component';
 import { AppFooterComponentComponent } from './shared/components/commons/app-footer-component/app-footer-component.component';
 import { AppHeaderComponentComponent } from './shared/components/commons/app-header-component/app-header-component.component';
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-  imports: [RouterModule, AppHeaderComponentComponent, AppFooterComponentComponent, AppFeatureButtonComponent, AppContentSectionComponent, AppBannerTextComponent, AppFeatureCardComponent],
+  imports: [
+    RouterModule,
+    AppHeaderComponentComponent,
+    AppFooterComponentComponent,
+    AppFeatureButtonComponent,
+    AppContentSectionComponent,
+    AppBannerTextComponent,
+    AppFeatureCardComponent,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  providers: [
-  ]
+  providers: [],
 })
 export class AppComponent {
   title = 'Ngx Primer | Angular Primtives Component Library';
   features = [
     {
-      title: "Accessible",
-      description: "All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience."
-    }, 
+      title: 'Accessible',
+      description:
+        'All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience.',
+    },
     {
-      title: "Customizable",
-      description: "Tailor the components' appearance and behavior using Angular's flexible input properties and directives."  
-    }, 
+      title: 'Customizable',
+      description:
+        "Tailor the components' appearance and behavior using Angular's flexible input properties and directives.",
+    },
     {
-      title: "Responsive",
-      description: "The library is designed to be responsive and work seamlessly across all device types and screen sizes."
+      title: 'Responsive',
+      description:
+        'The library is designed to be responsive and work seamlessly across all device types and screen sizes.',
     },
     {
-      title: "Themeable",
-      description: "Easily switch between light and dark modes, as well as apply custom themes to your components."
+      title: 'Themeable',
+      description:
+        'Easily switch between light and dark modes, as well as apply custom themes to your components.',
     },
     {
-      title: "Signal API",
-      description: "Leverage Angular's Signal API to create custom events and handle them in your application, for highly reactive, optimized performance.",
-    }
+      title: 'Signal API',
+      description:
+        "Leverage Angular's Signal API to create custom events and handle them in your application, for highly reactive, optimized performance.",
+    },
   ];
 
   hyperlinks = [
     {
-      text: "Get Started",
+      text: 'Get Started',
       hyperlink: true,
-      target: "get-started",
+      target: 'get-started',
     },
     {
-      text: "Quick Start",
+      text: 'Quick Start',
       hyperlink: true,
-      target: "quick-start",
+      target: 'quick-start',
     },
     {
-      text: "Api Reference",
+      text: 'Api Reference',
       hyperlink: true,
-      target: "api-reference",
+      target: 'api-reference',
     },
-  ]
+  ];
 }

apps/documentations/src/app/shared/components/commons/app-banner-text/app-banner-text.component.html

@@ -1,9 +1,15 @@
-<h1 class="h-full text-[36px] md:text-[48px] lg:text-[72px] leading-[1.5] md:leading-[2] font-bold text-foreground-brand">
+<h1
+  class="h-full text-[36px] md:text-[48px] lg:text-[72px] leading-[1.5] md:leading-[2] font-bold text-foreground-brand"
+>
   {{ brand() }}
 </h1>
-<h2 class="text-[24px] md:text-[36px] lg:text-[48px] leading-[1.5] font-bold text-gray-300">
+<h2
+  class="text-[24px] md:text-[36px] lg:text-[48px] leading-[1.5] font-bold text-gray-300"
+>
   {{ tagline() }}
 </h2>
-<h3 class="text-[20px] md:text-[24px] lg:text-[28px] leading-[1.5] font-bold text-[#F637E3]">
+<h3
+  class="text-[20px] md:text-[24px] lg:text-[28px] leading-[1.5] font-bold text-[#F637E3]"
+>
   {{ subtle() }}
-</h3>
+</h3>

apps/documentations/src/app/shared/components/commons/app-banner-text/app-banner-text.component.spec.ts

@@ -8,9 +8,8 @@ describe('AppBannerTextComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppBannerTextComponent]
-    })
-    .compileComponents();
+      imports: [AppBannerTextComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AppBannerTextComponent);
     component = fixture.componentInstance;

apps/documentations/src/app/shared/components/commons/app-content-section/app-content-section.component.html

@@ -1,3 +1,5 @@
-<section class="container mx-auto px-6 md:px-12 lg:px-24 py-12 md:py-24 flex flex-col md:flex-row">
+<section
+  class="container mx-auto px-6 md:px-12 lg:px-24 py-12 md:py-24 flex flex-col md:flex-row"
+>
   <ng-content />
-</section>
+</section>

apps/documentations/src/app/shared/components/commons/app-feature-button/app-feature-button.component.html

@@ -1,12 +1,14 @@
 @if (!hyperlink()) {
-  <button 
-    class="bg-[#0546f1] font-semibold text-gray-100 text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl">
+  <button
+    class="bg-[#0546f1] font-semibold text-gray-100 text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl"
+  >
     {{ buttonText }}
   </button>
 } @else {
-  <a 
+  <a
     [routerLink]="hyperlinkTarget()"
-    class="bg-[#0546f1]/100 font-semibold text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl">
+    class="bg-[#0546f1]/100 font-semibold text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl"
+  >
     {{ buttonText }}
   </a>
-}
+}

apps/documentations/src/app/shared/components/commons/app-feature-button/app-feature-button.component.ts

@@ -9,20 +9,20 @@ import { RouterLink } from '@angular/router';
   imports: [CommonModule, RouterLink],
   templateUrl: './app-feature-button.component.html',
   styleUrl: './app-feature-button.component.scss',
-  standalone: true
+  standalone: true,
 })
 export class AppFeatureButtonComponent {
   public text = input('', {
-    alias: 'text'
+    alias: 'text',
   });
 
   public hyperlink = input(false, {
-    alias: 'hyperlink'
+    alias: 'hyperlink',
   });
 
   public hyperlinkTarget = input('#', {
-    alias: 'target'
-  })
+    alias: 'target',
+  });
 
   public get buttonText(): string {
     return this.text();

apps/documentations/src/app/shared/components/commons/app-feature-card/app-feature-card.component.html

@@ -1,6 +1,10 @@
 <div class="bg-black bg-opacity-30 rounded-lg p-6 flex flex-col gap-4 h-full">
-  <h3 class="text-[16px] md:text-[20px] font-semibold text-gray-500 leading-[1.1] mb-4 md:mb-8">{{ item()?.title }}</h3>
+  <h3
+    class="text-[16px] md:text-[20px] font-semibold text-gray-500 leading-[1.1] mb-4 md:mb-8"
+  >
+    {{ item()?.title }}
+  </h3>
   <p class="text-gray-700 text-sm leading-[1.1] font-semibold">
     {{ item()?.description }}
   </p>
-</div>
+</div>

apps/documentations/src/app/shared/components/commons/app-feature-card/app-feature-card.component.spec.ts

@@ -8,9 +8,8 @@ describe('AppFeatureCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppFeatureCardComponent]
-    })
-    .compileComponents();
+      imports: [AppFeatureCardComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AppFeatureCardComponent);
     component = fixture.componentInstance;

apps/documentations/src/app/shared/components/commons/app-feature-card/app-feature-card.component.ts

@@ -4,8 +4,8 @@ import { Component, input } from '@angular/core';
   selector: 'app-feature-card',
   imports: [],
   templateUrl: './app-feature-card.component.html',
-  styleUrl: './app-feature-card.component.scss'
+  styleUrl: './app-feature-card.component.scss',
 })
 export class AppFeatureCardComponent {
-  item = input<{ title: string, description: string }>();
+  item = input<{ title: string; description: string }>();
 }

apps/documentations/src/app/shared/components/commons/app-footer-component/app-footer-component.component.html

@@ -1,4 +1,6 @@
-<footer class="font-semibold border-t border-gray-950 text-sm h-[100px] items-center flex flex-col justify-center w-full mt-8 md:mt-auto">
+<footer
+  class="font-semibold border-t border-gray-950 text-sm h-[100px] items-center flex flex-col justify-center w-full mt-8 md:mt-auto"
+>
   <div class="container mx-auto">
     <p class="text-gray-400 text-center">
       Released under the Apache-2.0 license.
@@ -7,4 +9,4 @@
       Copyright © 2024-present ElhakimDev99
     </p>
   </div>
-</footer>
+</footer>

apps/documentations/src/app/shared/components/commons/app-footer-component/app-footer-component.component.spec.ts

@@ -8,9 +8,8 @@ describe('AppFooterComponentComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppFooterComponentComponent]
-    })
-    .compileComponents();
+      imports: [AppFooterComponentComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AppFooterComponentComponent);
     component = fixture.componentInstance;

apps/documentations/src/app/shared/components/commons/app-footer-component/app-footer-component.component.ts

@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-footer-component',
   imports: [],
   templateUrl: './app-footer-component.component.html',
-  styleUrl: './app-footer-component.component.scss'
+  styleUrl: './app-footer-component.component.scss',
 })
-export class AppFooterComponentComponent {
-
-}
+export class AppFooterComponentComponent {}

apps/documentations/src/app/shared/components/commons/app-header-component/app-header-component.component.html

@@ -10,4 +10,4 @@
       </div>
     </div>
   </div>
-</header>
+</header>

apps/documentations/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

apps/documentations/src/main.ts

@@ -3,5 +3,5 @@ import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err)
+  console.error(err),
 );

apps/documentations/src/server.ts

@@ -34,7 +34,7 @@ app.use(
     maxAge: '1y',
     index: false,
     redirect: false,
-  })
+  }),
 );
 
 /**
@@ -44,7 +44,7 @@ app.use('/**', (req, res, next) => {
   angularApp
     .handle(req)
     .then((response) =>
-      response ? writeResponseToNodeResponse(response, res) : next()
+      response ? writeResponseToNodeResponse(response, res) : next(),
     )
     .catch(next);
 });

apps/documentations/src/test-setup.ts

@@ -8,5 +8,5 @@ import { getTestBed } from '@angular/core/testing';
 
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
 );

apps/playground/server.ts

@@ -32,7 +32,7 @@ export function app(): express.Express {
     '*.*',
     express.static(browserDistFolder, {
       maxAge: '1y',
-    })
+    }),
   );
 
   // All routes render the Angular application