diff --git a/projects/design-angular-kit/.eslintrc.json b/projects/design-angular-kit/.eslintrc.json index 5db76dc2..1148a0e1 100644 --- a/projects/design-angular-kit/.eslintrc.json +++ b/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": {} } ] diff --git a/projects/design-angular-kit/karma.conf.js b/projects/design-angular-kit/karma.conf.js index f20bb105..c35d054e 100644 --- a/projects/design-angular-kit/karma.conf.js +++ b/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, }); }; diff --git a/projects/design-angular-kit/ng-package.json b/projects/design-angular-kit/ng-package.json index dabfeb4e..4855ed72 100644 --- a/projects/design-angular-kit/ng-package.json +++ b/projects/design-angular-kit/ng-package.json @@ -5,7 +5,5 @@ "lib": { "entryFile": "src/public_api.ts" }, - "assets": [ - "assets/**/*.json" - ] + "assets": ["assets/**/*.json"] } diff --git a/projects/design-angular-kit/ng-package.prod.json b/projects/design-angular-kit/ng-package.prod.json index a64cb32f..9d2705e6 100644 --- a/projects/design-angular-kit/ng-package.prod.json +++ b/projects/design-angular-kit/ng-package.prod.json @@ -4,7 +4,5 @@ "lib": { "entryFile": "src/public_api.ts" }, - "assets": [ - "assets/**/*.json" - ] + "assets": ["assets/**/*.json"] } diff --git a/projects/design-angular-kit/schematics/collection.json b/projects/design-angular-kit/schematics/collection.json index 2e9239fb..55e32248 100644 --- a/projects/design-angular-kit/schematics/collection.json +++ b/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 } - } \ No newline at end of file + } +} diff --git a/projects/design-angular-kit/schematics/ng-add/schema.json b/projects/design-angular-kit/schematics/ng-add/schema.json index 678a440a..d24ed94b 100644 --- a/projects/design-angular-kit/schematics/ng-add/schema.json +++ b/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": [] -} \ No newline at end of file + "$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": [] +} diff --git a/projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss b/projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss index 78a6cfdb..52dcbe46 100644 --- a/projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss +++ b/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; } -} \ No newline at end of file +} diff --git a/projects/design-angular-kit/src/lib/components/core/card/card.component.scss b/projects/design-angular-kit/src/lib/components/core/card/card.component.scss index e0832844..95618655 100644 --- a/projects/design-angular-kit/src/lib/components/core/card/card.component.scss +++ b/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%; -} \ No newline at end of file +} diff --git a/projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.scss b/projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.scss index d65d0956..0606c326 100644 --- a/projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.scss +++ b/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 diff --git a/projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.scss b/projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.scss index 2c06c983..23146fa5 100644 --- a/projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.scss +++ b/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; } -} \ No newline at end of file +} diff --git a/projects/design-angular-kit/src/lib/components/form/input/input.component.scss b/projects/design-angular-kit/src/lib/components/form/input/input.component.scss index 2eeb0a84..16dbfd2c 100644 --- a/projects/design-angular-kit/src/lib/components/form/input/input.component.scss +++ b/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%); } } - diff --git a/projects/design-angular-kit/src/lib/components/form/range/range.component.scss b/projects/design-angular-kit/src/lib/components/form/range/range.component.scss index 5afa2491..90d80738 100644 --- a/projects/design-angular-kit/src/lib/components/form/range/range.component.scss +++ b/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) + ); } } diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html new file mode 100644 index 00000000..b4b01c17 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html @@ -0,0 +1,15 @@ +@if (inNav) { +
  • + + + +
    • +} @else { + + + +} + + + + diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.ts b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.ts new file mode 100644 index 00000000..ef3913e6 --- /dev/null +++ b/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; + } +} diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.module.ts b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink.module.ts new file mode 100644 index 00000000..2345027c --- /dev/null +++ b/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 {} diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html new file mode 100644 index 00000000..9102d58c --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html @@ -0,0 +1,15 @@ +@if (nav) { + +} @else { +
    + +
    +} + + + + diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.ts b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.ts new file mode 100644 index 00000000..2350d4a4 --- /dev/null +++ b/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; +} 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 da5a5e3b..d8f2ea22 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 { 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, ]; diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts index e5994c59..055ec053 100644 --- a/projects/design-angular-kit/src/public_api.ts +++ b/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'; diff --git a/projects/design-angular-kit/tsconfig.lib.json b/projects/design-angular-kit/tsconfig.lib.json index 99c99923..543508f0 100644 --- a/projects/design-angular-kit/tsconfig.lib.json +++ b/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"] } diff --git a/projects/design-angular-kit/tsconfig.lib.prod.json b/projects/design-angular-kit/tsconfig.lib.prod.json index 6330633d..2a2faa88 100644 --- a/projects/design-angular-kit/tsconfig.lib.prod.json +++ b/projects/design-angular-kit/tsconfig.lib.prod.json @@ -6,4 +6,4 @@ "angularCompilerOptions": { "compilationMode": "partial" } -} \ No newline at end of file +} diff --git a/projects/design-angular-kit/tsconfig.spec.json b/projects/design-angular-kit/tsconfig.spec.json index 16da33db..ec3528a8 100644 --- a/projects/design-angular-kit/tsconfig.spec.json +++ b/projects/design-angular-kit/tsconfig.spec.json @@ -2,16 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/spec", - "types": [ - "jasmine", - "node" - ] + "types": ["jasmine", "node"] }, - "files": [ - "src/test.ts" - ], - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] + "files": ["src/test.ts"], + "include": ["**/*.spec.ts", "**/*.d.ts"] } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f2ea5c5c..3d2fc4f2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -69,6 +69,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: 'navscroll', loadChildren: () => import('src/app/navscroll/navscroll.module').then(m => m.NavscrollModule) }, { path: 'transfer', loadChildren: () => import('src/app/transfer/transfer.module').then(m => m.TransferModule) }, ], 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..9a15c71f --- /dev/null +++ b/src/app/skiplink/skiplink-example/skiplink-example.component.html @@ -0,0 +1,14 @@ +

    Skiplink

    +
    +

    + + Vai al menu + Vai al contenuto + + + + Vai al menu + Vai al contenuto + +

    +
    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 %} + + + + + + + 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 @@ +

    Skiplink

    +

    Barra di navigazione laterale, include liste di link e liste di link annidate.

    +
    + + + + + +

    Skiplink

    + +     +     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 = (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 e091ac80..e0415764 100644 --- a/src/assets/table-of-content.json +++ b/src/assets/table-of-content.json @@ -187,6 +187,10 @@ "label": "Timeline", "link": "/componenti/timeline" }, + { + "label": "Skiplink", + "link": "/componenti/skiplink" + }, { "label": "Navscroll", "link": "/componenti/navscroll"