feat: skiplink

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>

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;
+}

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,
 ];
 
 /**

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';

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 } },

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>

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 {}

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>
+

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 {}

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>

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');
+  }
+}

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 {}

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 {}

src/assets/table-of-content.json

@@ -186,6 +186,10 @@
         {
           "label": "Timeline",
           "link": "/componenti/timeline"
+        },
+        {
+          "label": "Skiplink",
+          "link": "/componenti/skiplink"
         }
       ]
     }