design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
97 lines • 11.8 kB
JavaScript
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterLinkWithHref, Scroll, } from '@angular/router';
import { AsyncSubject, filter, switchMap, tap } from 'rxjs';
import { NavscrollStore } from './navscroll.store';
import * as i0 from "@angular/core";
const ROUTER_LINK_ACTIVE_OPTIONS = {
fragment: 'exact',
paths: 'exact',
queryParams: 'exact',
matrixParams: 'exact',
};
export class ItNavscrollListItemComponent {
constructor() {
this.checkActive = new EventEmitter();
this.routerLinkActiveOptions = ROUTER_LINK_ACTIVE_OPTIONS;
this.#initIsActive = new AsyncSubject();
this.active = this.#initIsActive.asObservable().pipe(switchMap(item => this.#store.isActive$(item)));
this.#router = inject(Router);
this.#store = inject(NavscrollStore);
this.#destroyRef = inject(DestroyRef);
}
#initIsActive;
#router;
#store;
#destroyRef;
ngOnInit() {
this.#initIsActiveSub();
this.#router.events
.pipe(takeUntilDestroyed(this.#destroyRef), filter((event) => {
const isNavigationEndEvent = event instanceof NavigationEnd;
const isScrollEvent = event instanceof Scroll && event.routerEvent instanceof NavigationEnd;
return isNavigationEndEvent || isScrollEvent;
}), tap(() => {
if (this.rtl?.isActive) {
this.#store.setActive(this.item);
}
}))
.subscribe();
}
clickHandler(event) {
event.preventDefault();
this.#store.selectMenuItem();
this.#router.navigate([], { fragment: this.item.href });
}
#initIsActiveSub() {
this.#initIsActive.next(this.item);
this.#initIsActive.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavscrollListItemComponent, isStandalone: true, selector: "it-navscroll-list-item", inputs: { item: "item" }, outputs: { checkActive: "checkActive" }, viewQueries: [{ propertyName: "rtl", first: true, predicate: ["rtl"], descendants: true }], ngImport: i0, template: `
<a
class="nav-link"
[class.active]="active | async"
[routerLink]="[]"
routerLinkActive
[fragment]="item?.href"
[routerLinkActiveOptions]="routerLinkActiveOptions"
ariaCurrentWhenActive="page"
#rtl="routerLinkActive"
(click)="clickHandler($event)"
><span>{{ item?.title }}</span></a
>
`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, decorators: [{
type: Component,
args: [{
selector: 'it-navscroll-list-item',
standalone: true,
imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, AsyncPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<a
class="nav-link"
[class.active]="active | async"
[routerLink]="[]"
routerLinkActive
[fragment]="item?.href"
[routerLinkActiveOptions]="routerLinkActiveOptions"
ariaCurrentWhenActive="page"
#rtl="routerLinkActive"
(click)="clickHandler($event)"
><span>{{ item?.title }}</span></a
>
`,
}]
}], propDecorators: { item: [{
type: Input
}], checkActive: [{
type: Output
}], rtl: [{
type: ViewChild,
args: ['rtl']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2c2Nyb2xsLWxpc3QtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tYW5ndWxhci1raXQvc3JjL2xpYi9jb21wb25lbnRzL25hdmlnYXRpb24vbmF2c2Nyb2xsL25hdnNjcm9sbC1saXN0LWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZJLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFFTCxhQUFhLEVBQ2IsTUFBTSxFQUVOLFVBQVUsRUFDVixnQkFBZ0IsRUFDaEIsa0JBQWtCLEVBQ2xCLE1BQU0sR0FDUCxNQUFNLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDOztBQUVuRCxNQUFNLDBCQUEwQixHQUF5QjtJQUN2RCxRQUFRLEVBQUUsT0FBTztJQUNqQixLQUFLLEVBQUUsT0FBTztJQUNkLFdBQVcsRUFBRSxPQUFPO0lBQ3BCLFlBQVksRUFBRSxPQUFPO0NBQ3RCLENBQUM7QUFzQkYsTUFBTSxPQUFPLDRCQUE0QjtJQXBCekM7UUF1QnFCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFLMUQsNEJBQXVCLEdBQUcsMEJBQTBCLENBQUM7UUFFckQsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztRQUVsRCxXQUFNLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRWhHLFlBQU8sR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFekIsV0FBTSxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUVoQyxnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztLQStCM0M7SUF2Q1UsYUFBYSxDQUFxQztJQUlsRCxPQUFPLENBQWtCO0lBRXpCLE1BQU0sQ0FBMEI7SUFFaEMsV0FBVyxDQUFzQjtJQUUxQyxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNO2FBQ2hCLElBQUksQ0FDSCxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQ3BDLE1BQU0sQ0FBQyxDQUFDLEtBQWtCLEVBQUUsRUFBRTtZQUM1QixNQUFNLG9CQUFvQixHQUFHLEtBQUssWUFBWSxhQUFhLENBQUM7WUFDNUQsTUFBTSxhQUFhLEdBQUcsS0FBSyxZQUFZLE1BQU0sSUFBSyxLQUFnQixDQUFDLFdBQVcsWUFBWSxhQUFhLENBQUM7WUFDeEcsT0FBTyxvQkFBb0IsSUFBSSxhQUFhLENBQUM7UUFDL0MsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLEdBQUcsRUFBRTtZQUNQLElBQUksSUFBSSxDQUFDLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQztnQkFDdkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ25DLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FDSDthQUNBLFNBQVMsRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBWTtRQUN2QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoQyxDQUFDOzhHQWhEVSw0QkFBNEI7a0dBQTVCLDRCQUE0QixpUEFmN0I7Ozs7Ozs7Ozs7Ozs7R0FhVCw0REFmUyxVQUFVLG9PQUFFLGdCQUFnQix5TUFBc0IsU0FBUzs7MkZBaUIxRCw0QkFBNEI7a0JBcEJ4QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxDQUFDO29CQUN0RSxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7O0dBYVQ7aUJBQ0Y7OEJBRVUsSUFBSTtzQkFBWixLQUFLO2dCQUVhLFdBQVc7c0JBQTdCLE1BQU07Z0JBR0UsR0FBRztzQkFEWCxTQUFTO3VCQUFDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBc3luY1BpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRGVzdHJveVJlZiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge1xuICBJc0FjdGl2ZU1hdGNoT3B0aW9ucyxcbiAgTmF2aWdhdGlvbkVuZCxcbiAgUm91dGVyLFxuICBFdmVudCBhcyBSb3V0ZXJFdmVudCxcbiAgUm91dGVyTGluayxcbiAgUm91dGVyTGlua0FjdGl2ZSxcbiAgUm91dGVyTGlua1dpdGhIcmVmLFxuICBTY3JvbGwsXG59IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBBc3luY1N1YmplY3QsIGZpbHRlciwgc3dpdGNoTWFwLCB0YXAgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IE5hdnNjcm9sbEl0ZW0gfSBmcm9tICcuL25hdnNjcm9sbC5tb2RlbCc7XG5pbXBvcnQgeyBOYXZzY3JvbGxTdG9yZSB9IGZyb20gJy4vbmF2c2Nyb2xsLnN0b3JlJztcblxuY29uc3QgUk9VVEVSX0xJTktfQUNUSVZFX09QVElPTlM6IElzQWN0aXZlTWF0Y2hPcHRpb25zID0ge1xuICBmcmFnbWVudDogJ2V4YWN0JyxcbiAgcGF0aHM6ICdleGFjdCcsXG4gIHF1ZXJ5UGFyYW1zOiAnZXhhY3QnLFxuICBtYXRyaXhQYXJhbXM6ICdleGFjdCcsXG59O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpdC1uYXZzY3JvbGwtbGlzdC1pdGVtJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1JvdXRlckxpbmssIFJvdXRlckxpbmtBY3RpdmUsIFJvdXRlckxpbmtXaXRoSHJlZiwgQXN5bmNQaXBlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGFcbiAgICAgIGNsYXNzPVwibmF2LWxpbmtcIlxuICAgICAgW2NsYXNzLmFjdGl2ZV09XCJhY3RpdmUgfCBhc3luY1wiXG4gICAgICBbcm91dGVyTGlua109XCJbXVwiXG4gICAgICByb3V0ZXJMaW5rQWN0aXZlXG4gICAgICBbZnJhZ21lbnRdPVwiaXRlbT8uaHJlZlwiXG4gICAgICBbcm91dGVyTGlua0FjdGl2ZU9wdGlvbnNdPVwicm91dGVyTGlua0FjdGl2ZU9wdGlvbnNcIlxuICAgICAgYXJpYUN1cnJlbnRXaGVuQWN0aXZlPVwicGFnZVwiXG4gICAgICAjcnRsPVwicm91dGVyTGlua0FjdGl2ZVwiXG4gICAgICAoY2xpY2spPVwiY2xpY2tIYW5kbGVyKCRldmVudClcIlxuICAgICAgPjxzcGFuPnt7IGl0ZW0/LnRpdGxlIH19PC9zcGFuPjwvYVxuICAgID5cbiAgYCxcbn0pXG5leHBvcnQgY2xhc3MgSXROYXZzY3JvbGxMaXN0SXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGl0ZW0hOiBOYXZzY3JvbGxJdGVtO1xuXG4gIEBPdXRwdXQoKSByZWFkb25seSBjaGVja0FjdGl2ZSA9IG5ldyBFdmVudEVtaXR0ZXI8TmF2c2Nyb2xsSXRlbT4oKTtcblxuICBAVmlld0NoaWxkKCdydGwnKVxuICByZWFkb25seSBydGw6IGFueTtcblxuICByZWFkb25seSByb3V0ZXJMaW5rQWN0aXZlT3B0aW9ucyA9IFJPVVRFUl9MSU5LX0FDVElWRV9PUFRJT05TO1xuXG4gIHJlYWRvbmx5ICNpbml0SXNBY3RpdmUgPSBuZXcgQXN5bmNTdWJqZWN0PE5hdnNjcm9sbEl0ZW0+KCk7XG5cbiAgcmVhZG9ubHkgYWN0aXZlID0gdGhpcy4jaW5pdElzQWN0aXZlLmFzT2JzZXJ2YWJsZSgpLnBpcGUoc3dpdGNoTWFwKGl0ZW0gPT4gdGhpcy4jc3RvcmUuaXNBY3RpdmUkKGl0ZW0pKSk7XG5cbiAgcmVhZG9ubHkgI3JvdXRlciA9IGluamVjdChSb3V0ZXIpO1xuXG4gIHJlYWRvbmx5ICNzdG9yZSA9IGluamVjdChOYXZzY3JvbGxTdG9yZSk7XG5cbiAgcmVhZG9ubHkgI2Rlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy4jaW5pdElzQWN0aXZlU3ViKCk7XG4gICAgdGhpcy4jcm91dGVyLmV2ZW50c1xuICAgICAgLnBpcGUoXG4gICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLiNkZXN0cm95UmVmKSxcbiAgICAgICAgZmlsdGVyKChldmVudDogUm91dGVyRXZlbnQpID0+IHtcbiAgICAgICAgICBjb25zdCBpc05hdmlnYXRpb25FbmRFdmVudCA9IGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvbkVuZDtcbiAgICAgICAgICBjb25zdCBpc1Njcm9sbEV2ZW50ID0gZXZlbnQgaW5zdGFuY2VvZiBTY3JvbGwgJiYgKGV2ZW50IGFzIFNjcm9sbCkucm91dGVyRXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kO1xuICAgICAgICAgIHJldHVybiBpc05hdmlnYXRpb25FbmRFdmVudCB8fCBpc1Njcm9sbEV2ZW50O1xuICAgICAgICB9KSxcbiAgICAgICAgdGFwKCgpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy5ydGw/LmlzQWN0aXZlKSB7XG4gICAgICAgICAgICB0aGlzLiNzdG9yZS5zZXRBY3RpdmUodGhpcy5pdGVtKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBjbGlja0hhbmRsZXIoZXZlbnQ6IEV2ZW50KSB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB0aGlzLiNzdG9yZS5zZWxlY3RNZW51SXRlbSgpO1xuICAgIHRoaXMuI3JvdXRlci5uYXZpZ2F0ZShbXSwgeyBmcmFnbWVudDogdGhpcy5pdGVtLmhyZWYgfSk7XG4gIH1cblxuICAjaW5pdElzQWN0aXZlU3ViKCkge1xuICAgIHRoaXMuI2luaXRJc0FjdGl2ZS5uZXh0KHRoaXMuaXRlbSk7XG4gICAgdGhpcy4jaW5pdElzQWN0aXZlLmNvbXBsZXRlKCk7XG4gIH1cbn1cbiJdfQ==