From 5ae8caedffd29623716ecac19907654233622fcb Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Thu, 31 Oct 2024 14:44:33 +0100
Subject: [PATCH] feat: skiplink

---
 .../skiplink/skiplink.component.html          |  7 ++++
 .../navigation/skiplink/skiplink.component.ts | 32 +++++++++++++++++++
 .../src/lib/design-angular-kit.module.ts      |  2 ++
 projects/design-angular-kit/src/public_api.ts |  1 +
 src/app/app-routing.module.ts                 |  1 +
 .../skiplink-example.component.html           |  6 ++++
 .../skiplink-example.component.ts             |  7 ++++
 .../skiplink-examples.component.tpl           | 16 ++++++++++
 .../skiplink-examples.component.ts            |  7 ++++
 .../skiplink-index.component.html             | 12 +++++++
 .../skiplink-index.component.ts               | 14 ++++++++
 src/app/skiplink/skiplink-routing.module.ts   | 11 +++++++
 src/app/skiplink/skiplink.module.ts           | 14 ++++++++
 src/assets/table-of-content.json              |  4 +++
 14 files changed, 134 insertions(+)
 create mode 100644 projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.html
 create mode 100644 projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.ts
 create mode 100644 src/app/skiplink/skiplink-example/skiplink-example.component.html
 create mode 100644 src/app/skiplink/skiplink-example/skiplink-example.component.ts
 create mode 100644 src/app/skiplink/skiplink-examples/skiplink-examples.component.tpl
 create mode 100644 src/app/skiplink/skiplink-examples/skiplink-examples.component.ts
 create mode 100644 src/app/skiplink/skiplink-index/skiplink-index.component.html
 create mode 100644 src/app/skiplink/skiplink-index/skiplink-index.component.ts
 create mode 100644 src/app/skiplink/skiplink-routing.module.ts
 create mode 100644 src/app/skiplink/skiplink.module.ts

diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.html b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.html
new file mode 100644
index 00000000..d481a38d
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.html
@@ -0,0 +1,7 @@
+<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>
diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.ts b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.ts
new file mode 100644
index 00000000..8f8041dc
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.component.ts
@@ -0,0 +1,32 @@
+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 {
+  /**
+   * 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;
+}
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 0b4a697f..7a9d315e 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -42,6 +42,7 @@ import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
 import { ItTimelineModule } from './components/core/timeline/timeline.module';
+import { ItSkiplinkComponent } from './components/navigation/skiplink/skiplink.component';
 
 /**
  * Core components
@@ -87,6 +88,7 @@ const navigation = [
   ItNavBarModule,
   ItSidebarComponent,
   ItMegamenuComponent,
+  ItSkiplinkComponent,
 ];
 
 /**
diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts
index b484a609..d3bb6639 100644
--- a/projects/design-angular-kit/src/public_api.ts
+++ b/projects/design-angular-kit/src/public_api.ts
@@ -99,6 +99,7 @@ export * from './lib/components/navigation/navbar/navbar/navbar.component';
 export * from './lib/components/navigation/navbar/navbar-item/navbar-item.component';
 
 export * from './lib/components/navigation/sidebar/sidebar.component';
+export * from './lib/components/navigation/skiplink/skiplink.component';
 
 // Utils components
 export * from './lib/components/utils/error-page/error-page.component';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c6ee44db..0da51e00 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -68,6 +68,7 @@ const routes: Routes = [
       { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
       { path: 'sidebar', loadChildren: () => import('src/app/sidebar/sidebar.module').then(m => m.SidebarModule) },
       { path: 'timeline', loadChildren: () => import('src/app/timeline/timeline.module').then(m => m.TimelineModule) },
+      { path: 'skiplink', loadChildren: () => import('src/app/skiplink/skiplink.module').then(m => m.SkiplinkModule) },
     ],
   },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
diff --git a/src/app/skiplink/skiplink-example/skiplink-example.component.html b/src/app/skiplink/skiplink-example/skiplink-example.component.html
new file mode 100644
index 00000000..ebdae030
--- /dev/null
+++ b/src/app/skiplink/skiplink-example/skiplink-example.component.html
@@ -0,0 +1,6 @@
+<h3>Skiplink</h3>
+<div class="bd-example">
+  <p class="example-section">
+    <it-skiplink></it-skiplink>
+  </p>
+</div>
diff --git a/src/app/skiplink/skiplink-example/skiplink-example.component.ts b/src/app/skiplink/skiplink-example/skiplink-example.component.ts
new file mode 100644
index 00000000..9a6bde5c
--- /dev/null
+++ b/src/app/skiplink/skiplink-example/skiplink-example.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-skiplink-example',
+  templateUrl: './skiplink-example.component.html',
+})
+export class SkiplinkExampleComponent {}
diff --git a/src/app/skiplink/skiplink-examples/skiplink-examples.component.tpl b/src/app/skiplink/skiplink-examples/skiplink-examples.component.tpl
new file mode 100644
index 00000000..69deb3e4
--- /dev/null
+++ b/src/app/skiplink/skiplink-examples/skiplink-examples.component.tpl
@@ -0,0 +1,16 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../skiplink-example/skiplink-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../skiplink-example/skiplink-example.component.ts" %}
+{% endset %}
+
+
+<it-skiplink-example></it-skiplink-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}" >
+</it-source-display>
+
diff --git a/src/app/skiplink/skiplink-examples/skiplink-examples.component.ts b/src/app/skiplink/skiplink-examples/skiplink-examples.component.ts
new file mode 100644
index 00000000..53d8cf32
--- /dev/null
+++ b/src/app/skiplink/skiplink-examples/skiplink-examples.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-skiplink-examples',
+  templateUrl: './skiplink-examples.component.html',
+})
+export class SkiplinkExamplesComponent {}
diff --git a/src/app/skiplink/skiplink-index/skiplink-index.component.html b/src/app/skiplink/skiplink-index/skiplink-index.component.html
new file mode 100644
index 00000000..54d3f30d
--- /dev/null
+++ b/src/app/skiplink/skiplink-index/skiplink-index.component.html
@@ -0,0 +1,12 @@
+<h1 class="bd-title">Skiplink</h1>
+<p class="bd-lead">Barra di navigazione laterale, include liste di link e liste di link annidate.</p>
+<div [innerHTML]="component.description"></div>
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="mt-3">
+    <it-skiplink-examples></it-skiplink-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="mt-3">
+    <h2>Skiplink</h2>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/skiplink/skiplink-index/skiplink-index.component.ts b/src/app/skiplink/skiplink-index/skiplink-index.component.ts
new file mode 100644
index 00000000..b814eeeb
--- /dev/null
+++ b/src/app/skiplink/skiplink-index/skiplink-index.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-skiplink-index',
+  templateUrl: './skiplink-index.component.html',
+})
+export class SkiplinkIndexComponent {
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItSkiplinkComponent');
+  }
+}
diff --git a/src/app/skiplink/skiplink-routing.module.ts b/src/app/skiplink/skiplink-routing.module.ts
new file mode 100644
index 00000000..5f7a6548
--- /dev/null
+++ b/src/app/skiplink/skiplink-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SkiplinkIndexComponent } from './skiplink-index/skiplink-index.component';
+
+const routes: Routes = [{ path: '', component: SkiplinkIndexComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SkiplinkRoutingModule {}
diff --git a/src/app/skiplink/skiplink.module.ts b/src/app/skiplink/skiplink.module.ts
new file mode 100644
index 00000000..6e35392c
--- /dev/null
+++ b/src/app/skiplink/skiplink.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkiplinkExampleComponent } from './skiplink-example/skiplink-example.component';
+import { SkiplinkExamplesComponent } from './skiplink-examples/skiplink-examples.component';
+import { SkiplinkIndexComponent } from './skiplink-index/skiplink-index.component';
+
+import { SkiplinkRoutingModule } from './skiplink-routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [SkiplinkExampleComponent, SkiplinkExamplesComponent, SkiplinkIndexComponent],
+  imports: [CommonModule, SharedModule, SkiplinkRoutingModule],
+})
+export class SkiplinkModule {}
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index 172e5c26..cd585be3 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -186,6 +186,10 @@
         {
           "label": "Timeline",
           "link": "/componenti/timeline"
+        },
+        {
+          "label": "Skiplink",
+          "link": "/componenti/skiplink"
         }
       ]
     }