feat: skiplink component

projects/design-angular-kit/.eslintrc.json

@@ -1,13 +1,9 @@
 {
   "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -28,9 +24,7 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
+      "files": ["*.html"],
       "rules": {}
     }
   ]

projects/design-angular-kit/karma.conf.js

@@ -11,15 +11,15 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../../coverage'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
     reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
     port: 9876,
@@ -30,9 +30,9 @@ module.exports = function (config) {
     customLaunchers: {
       ChromeNoSandbox: {
         base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
+        flags: ['--no-sandbox'],
+      },
     },
-    singleRun: false
+    singleRun: false,
   });
 };

projects/design-angular-kit/ng-package.json

@@ -5,7 +5,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "assets": [
-    "assets/**/*.json"
-  ]
+  "assets": ["assets/**/*.json"]
 }

projects/design-angular-kit/ng-package.prod.json

@@ -4,7 +4,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "assets": [
-    "assets/**/*.json"
-  ]
+  "assets": ["assets/**/*.json"]
 }

projects/design-angular-kit/schematics/collection.json

@@ -1,19 +1,19 @@
 {
-    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
-    "schematics": {
-      "ng-add": {
-        "description": "Add my Design Angular Kit to the project.",
-        "factory": "./ng-add/index",
-        "schema": "./ng-add/schema.json",
-        "hidden": true,
-        "aliases": ["install"]
-      },
-      "ng-add-setup-project": {
-        "description": "Sets up the specified project after the ng-add dependencies have been installed",
-        "factory": "./ng-add/setup-project",
-        "schema": "./ng-add/schema.json",
-        "hidden": true,
-        "private": true
-      }
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my Design Angular Kit to the project.",
+      "factory": "./ng-add/index",
+      "schema": "./ng-add/schema.json",
+      "hidden": true,
+      "aliases": ["install"]
+    },
+    "ng-add-setup-project": {
+      "description": "Sets up the specified project after the ng-add dependencies have been installed",
+      "factory": "./ng-add/setup-project",
+      "schema": "./ng-add/schema.json",
+      "hidden": true,
+      "private": true
     }
-  }
+  }
+}

projects/design-angular-kit/schematics/ng-add/schema.json

@@ -1,16 +1,16 @@
 {
-    "$schema": "http://json-schema.org/schema",
-    "$id": "design-angular-kit-ng-add",
-    "title": "Design Angular Hit ng-add schematic",
-    "type": "object",
-    "properties": {
-        "project": {
-            "type": "string",
-            "description": "Name of the project.",
-            "$default": {
-              "$source": "projectName"
-            }
-        }
-    },
-    "required": []
-}
+  "$schema": "http://json-schema.org/schema",
+  "$id": "design-angular-kit-ng-add",
+  "title": "Design Angular Hit ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss

@@ -1,5 +1,5 @@
-// made because of bug with before triangle that goes up 
-.link-list-wrapper{
+// made because of bug with before triangle that goes up
+.link-list-wrapper {
   z-index: 2;
   position: relative;
 }
@@ -14,4 +14,4 @@ a {
   .icon {
     display: none;
   }
-}
+}

projects/design-angular-kit/src/lib/components/core/card/card.component.scss

@@ -2,9 +2,9 @@
   display: none;
 }
 
-
-::ng-deep .row [class*=col-] {
-  .card, .card-wrapper {
+::ng-deep .row [class*='col-'] {
+  .card,
+  .card-wrapper {
     height: 100%;
   }
 }
@@ -18,7 +18,7 @@
     margin: 16px 0;
   }
 
-  @media (min-width: 768px) { 
+  @media (min-width: 768px) {
     it-card {
       flex: 0 0 49%;
     }
@@ -27,4 +27,4 @@
 
 :host {
   width: 100%;
-}
+}

projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.scss

@@ -1 +1 @@
-@import "@splidejs/splide/dist/css/splide.min"; // Splide
+@import '@splidejs/splide/dist/css/splide.min'; // Splide

projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.scss

@@ -1,4 +1,5 @@
-.metadata:empty, .it-rounded-icon:empty {
+.metadata:empty,
+.it-rounded-icon:empty {
   display: none;
 }
 
@@ -12,4 +13,4 @@
   p + .it-multiple {
     display: none !important;
   }
-}
+}

projects/design-angular-kit/src/lib/components/form/input/input.component.scss

@@ -9,7 +9,7 @@
   }
 
   .input-number {
-    .align-buttons{
+    .align-buttons {
       height: 100%;
     }
   }
@@ -27,4 +27,3 @@
     transform: translateY(-75%);
   }
 }
-

projects/design-angular-kit/src/lib/components/form/range/range.component.scss

@@ -1,9 +1,17 @@
 .form-range.double-color {
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, var(--range-left-color) var(--range-percentage), var(--range-right-color) var(--range-percentage));
+    background: linear-gradient(
+      to right,
+      var(--range-left-color) var(--range-percentage),
+      var(--range-right-color) var(--range-percentage)
+    );
   }
 
   &::-moz-range-track {
-    background: linear-gradient(to right, var(--range-left-color) var(--range-percentage), var(--range-right-color) var(--range-percentage));
+    background: linear-gradient(
+      to right,
+      var(--range-left-color) var(--range-percentage),
+      var(--range-right-color) var(--range-percentage)
+    );
   }
 }

projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html

@@ -0,0 +1,15 @@
+@if (inNav) {
+  <li class="visually-hidden-focusable">
+    <it-link [href]="href" [externalLink]="externalLink">
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+    </it-link>
+  </li>
+} @else {
+  <it-link class="visually-hidden-focusable" [href]="href" [externalLink]="externalLink">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </it-link>
+}
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>

projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Host, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../../utils/coercion';
+import { ItLinkComponent, ItSkiplinkComponent } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  standalone: true,
+  selector: 'it-skiplink-item',
+  templateUrl: './skiplink-item.component.html',
+  exportAs: 'itSkipLinkItem',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent],
+})
+export class ItSkiplinkItemComponent {
+  /**
+   * The router link action
+   *
+   * Commands to pass to Router#createUrlTree.
+   * - array: commands to pass to Router#createUrlTree.
+   * - string: shorthand for array of commands with just the string, i.e. ['/route']
+   * - null|undefined: Disables the link by removing the href
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() href: any[] | string | null | undefined;
+
+  /**
+   * Is an external link (false to not use Angular router link)
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) externalLink?: boolean;
+  inNav: boolean;
+
+  constructor(@Host() parent: ItSkiplinkComponent) {
+    this.inNav = parent.nav ? true : false;
+  }
+}

projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItSkiplinkComponent } from './skiplink/skiplink.component';
+import { ItSkiplinkItemComponent } from './skiplink-item/skiplink-item.component';
+
+const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
+
+@NgModule({
+  imports: skiplinkComponents,
+  exports: skiplinkComponents,
+})
+export class ItSkiplinkModule {}

projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html

@@ -0,0 +1,15 @@
+@if (nav) {
+  <nav class="skiplinks">
+    <ul>
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+    </ul>
+  </nav>
+} @else {
+  <div class="skiplinks">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </div>
+}
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>

projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../../utils/coercion';
+import { ItLinkComponent } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  standalone: true,
+  selector: 'it-skiplink',
+  templateUrl: './skiplink.component.html',
+  exportAs: 'itSkipLink',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent],
+})
+export class ItSkiplinkComponent {
+  /**
+   * Aria label for `nav` mode
+   * @default 'Scorciatoie di navigazione'
+   */
+  @Input() ariaLabel: string = 'Scorciatoie di navigazione';
+
+  /**
+   * If `true` nav mode is enabled
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) nav?: boolean;
+}

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -42,6 +42,7 @@ import { DesignAngularKitConfig } from './interfaces/design-angular-kit-config';
 import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
+import { ItSkiplinkModule } from './components/navigation/skiplink/skiplink.module';
 import { provideDesignAngularKit } from './provide-design-angular-kit';
 
 /**
@@ -88,6 +89,7 @@ const navigation = [
   ItNavBarModule,
   ItSidebarComponent,
   ItMegamenuComponent,
+  ItSkiplinkModule,
   ItNavscrollComponent,
 ];
 

projects/design-angular-kit/src/public_api.ts

@@ -105,6 +105,10 @@ export * from './lib/components/navigation/navscroll/navscroll.model';
 
 export * from './lib/components/navigation/sidebar/sidebar.component';
 
+export * from './lib/components/navigation/skiplink/skiplink/skiplink.component';
+export * from './lib/components/navigation/skiplink/skiplink-item/skiplink-item.component';
+export * from './lib/components/navigation/skiplink/skiplink.module';
+
 // Utils components
 export * from './lib/components/utils/error-page/error-page.component';
 export * from './lib/components/utils/icon/icon.component';

projects/design-angular-kit/tsconfig.lib.json

@@ -20,8 +20,5 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
 }

projects/design-angular-kit/tsconfig.lib.prod.json

@@ -6,4 +6,4 @@
   "angularCompilerOptions": {
     "compilationMode": "partial"
   }
-}
+}