@arsedizioni/ars-utils 22.1.3 → 22.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +1034 -6
  2. package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
  3. package/fesm2022/arsedizioni-ars-utils-ui.mjs +4 -475
  4. package/fesm2022/arsedizioni-ars-utils-ui.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/types/arsedizioni-ars-utils-clipper.ui.d.ts +1 -1
  7. package/types/arsedizioni-ars-utils-ui.application.d.ts +650 -5
  8. package/types/arsedizioni-ars-utils-ui.d.ts +23 -354
  9. package/types/arsedizioni-ars-utils-core.d.ts.map +0 -1
package/fesm2022/arsedizioni-ars-utils-ui.mjs CHANGED
@@ -1,20 +1,20 @@
1
1
  import { MatPaginatorIntl } from '@angular/material/paginator';
2
2
  import * as i0 from '@angular/core';
3
- import { Injectable, InjectionToken, inject, Service, TemplateRef, ViewContainerRef, input, computed, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode, NgModule, signal, ChangeDetectionStrategy, Component, output, DestroyRef, viewChildren, forwardRef, model, booleanAttribute, numberAttribute } from '@angular/core';
3
+ import { Injectable, InjectionToken, inject, Service, TemplateRef, ViewContainerRef, input, computed, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode, NgModule, signal, ChangeDetectionStrategy, Component, output, DestroyRef, viewChildren, forwardRef } from '@angular/core';
4
4
  import { Overlay } from '@angular/cdk/overlay';
5
5
  import { ComponentPortal } from '@angular/cdk/portal';
6
6
  import { isPlatformBrowser, PlatformLocation } from '@angular/common';
7
7
  import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions, MatDialog } from '@angular/material/dialog';
8
8
  import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
9
9
  import { SafeHtmlPipe, SystemUtils, PasswordValidatorDirective, EqualsValidatorDirective } from '@arsedizioni/ars-utils/core';
10
- import { map, distinctUntilChanged, shareReplay, timer, filter } from 'rxjs';
10
+ import { map, distinctUntilChanged, shareReplay, timer } from 'rxjs';
11
11
  import { tap, first } from 'rxjs/operators';
12
12
  import * as i5 from '@angular/material/progress-spinner';
13
13
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
14
14
  import * as i4 from '@angular/material/progress-bar';
15
15
  import { MatProgressBarModule } from '@angular/material/progress-bar';
16
16
  import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
17
- import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
17
+ import { toSignal } from '@angular/core/rxjs-interop';
18
18
  import * as i7 from '@angular/material/icon';
19
19
  import { MatIcon, MatIconModule } from '@angular/material/icon';
20
20
  import * as i10 from '@angular/material/button';
@@ -29,9 +29,6 @@ import * as i2 from '@angular/material/form-field';
29
29
  import { MatFormFieldModule } from '@angular/material/form-field';
30
30
  import * as i3 from '@angular/material/input';
31
31
  import { MatInputModule } from '@angular/material/input';
32
- import { CdkTrapFocus } from '@angular/cdk/a11y';
33
- import { Directionality } from '@angular/cdk/bidi';
34
- import { Router, NavigationEnd } from '@angular/router';
35
32
 
36
33
  /** Italian localisation for the Material paginator labels. */
37
34
  class PaginatorIntl extends MatPaginatorIntl {
@@ -3208,474 +3205,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
3208
3205
  ], template: "<div class=\"dialog-info\">\r\n @if (f.form.invalid) {\r\n <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n } @else {\r\n <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <form name=\"form\" #f=\"ngForm\" novalidate>\r\n @if (dialogData().mode === 'forgot') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n @if (userEmail.invalid) {\r\n <mat-error>Email non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n } @else if (dialogData().mode === 'old') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Vecchia password</mat-label>\r\n <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n (click)=\"showOldPassword.set(!showOldPassword())\">\r\n <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n </button>\r\n @if(item.oldPassword) {\r\n <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n }\r\n @if (oldPwd.invalid) {\r\n <mat-error>Non valido.</mat-error>\r\n }\r\n </mat-form-field>\r\n } @else if (dialogData().mode === 'otp') {\r\n <div style=\"font-size: small;\">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per\r\n email<br><span style=\"font-size:x-small\">(controlla anche la posta indesiderata)</span>.</div>\r\n <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n }\r\n <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n [appearance]=\"dialogData().appearance\">\r\n <mat-label>Nuova password</mat-label>\r\n <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n @if(item.password) {\r\n <password-strength [password]=\"item.password\"></password-strength>\r\n }\r\n <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n (click)=\"showPassword.set(!showPassword())\">\r\n <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n </button>\r\n <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n @if (newPwd.invalid) {\r\n <mat-error>Non valido.</mat-error>\r\n }\r\n </mat-form-field>\r\n <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n [appearance]=\"dialogData().appearance\">\r\n <mat-label>Conferma nuova password</mat-label>\r\n <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\"\r\n #newPwd2=\"ngModel\">\r\n <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n (click)=\"showPassword2.set(!showPassword2())\">\r\n <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n </button>\r\n @if(item.password2) {\r\n <password-strength [password]=\"item.password2\"></password-strength>\r\n }\r\n <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n @if (newPwd2.invalid) {\r\n <mat-error>Non valido.</mat-error>\r\n }\r\n </mat-form-field>\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"30\">\r\n @if (dialogData().mode === 'admin') {\r\n <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n }\r\n </div>\r\n <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n @if (dialogData().mode !== 'forgot') {\r\n <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n }\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"] }]
3209
3206
  }], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
3210
3207
 
3211
- /**
3212
- * @file navigation.definitions.ts
3213
- *
3214
- * Data model shared by every variant of the Material Design 3 (Expressive)
3215
- * navigation component: Navigation bar, Navigation rail (collapsed and
3216
- * expanded) and Navigation drawer (standard and modal).
3217
- *
3218
- * Reference: https://m3.material.io/components/navigation-bar/specs
3219
- * https://m3.material.io/components/navigation-rail/specs
3220
- * https://m3.material.io/components/navigation-drawer/specs
3221
- */
3222
- /**
3223
- * Default `auto` mapping, aligned with the Material 3 window size classes:
3224
- * compact windows get the navigation bar, medium and expanded windows get the
3225
- * collapsed rail, large and extra-large windows get the expanded rail.
3226
- */
3227
- const DEFAULT_NAVIGATION_AUTO_VARIANTS = {
3228
- xs: 'bar',
3229
- sm: 'rail',
3230
- md: 'rail',
3231
- lg: 'rail-expanded',
3232
- xl: 'rail-expanded',
3233
- };
3234
- /** Variants that render labels beside the icon and support sections and dividers. */
3235
- const EXPANDED_NAVIGATION_VARIANTS = [
3236
- 'rail-expanded',
3237
- 'drawer',
3238
- 'modal',
3239
- ];
3240
-
3241
- /**
3242
- * @file navigation-bar.component.ts
3243
- *
3244
- * Material Design 3 (Expressive) navigation component.
3245
- *
3246
- * A single adaptive component that renders every navigation surface described
3247
- * by the M3 specs — Navigation bar, collapsed Navigation rail, expanded
3248
- * Navigation rail, standard Navigation drawer and modal Navigation drawer —
3249
- * from one destination model.
3250
- *
3251
- * Design goals:
3252
- * - Zoneless / signal based: no `NgZone`, no `setTimeout`, no manual change detection.
3253
- * - `OnPush` + pre-computed render models: the template contains no method calls.
3254
- * - Zero-DOM active indicator and state layer (rendered as pseudo-elements).
3255
- * - Router integration that degrades gracefully when no `Router` is provided.
3256
- */
3257
- class NavigationBarComponent {
3258
- constructor() {
3259
- // ── Injected dependencies ──────────────────────────────────────────────────
3260
- this.media = inject(MediaObserver);
3261
- this.router = inject(Router, { optional: true });
3262
- this.directionality = inject(Directionality, { optional: true });
3263
- this.destroyRef = inject(DestroyRef);
3264
- // ── Inputs ─────────────────────────────────────────────────────────────────
3265
- /** Flat list of destinations. Ignored when `sections` is provided. */
3266
- this.items = input([], /* @ts-ignore */
3267
- ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
3268
- /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
3269
- this.sections = input([], /* @ts-ignore */
3270
- ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
3271
- /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
3272
- this.variant = input('auto', /* @ts-ignore */
3273
- ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
3274
- /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
3275
- this.autoVariants = input({}, /* @ts-ignore */
3276
- ...(ngDevMode ? [{ debugName: "autoVariants" }] : /* istanbul ignore next */ []));
3277
- /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
3278
- this.selectedId = model(undefined, /* @ts-ignore */
3279
- ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
3280
- /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
3281
- this.open = model(false, /* @ts-ignore */
3282
- ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
3283
- /** Label visibility policy. */
3284
- this.labelVisibility = input('auto', /* @ts-ignore */
3285
- ...(ngDevMode ? [{ debugName: "labelVisibility" }] : /* istanbul ignore next */ []));
3286
- /** Icon / label arrangement inside a destination. */
3287
- this.itemLayout = input('auto', /* @ts-ignore */
3288
- ...(ngDevMode ? [{ debugName: "itemLayout" }] : /* istanbul ignore next */ []));
3289
- /** Vertical alignment of the destination list inside a rail. */
3290
- this.alignment = input('top', /* @ts-ignore */
3291
- ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
3292
- /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
3293
- this.position = input('start', /* @ts-ignore */
3294
- ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
3295
- /** Headline rendered above the destinations in the expanded rail and in the drawer. */
3296
- this.headline = input(undefined, /* @ts-ignore */
3297
- ...(ngDevMode ? [{ debugName: "headline" }] : /* istanbul ignore next */ []));
3298
- /** When `true` a leading menu button is rendered; it emits `menuClick`. */
3299
- this.showMenuButton = input(false, { ...(ngDevMode ? { debugName: "showMenuButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3300
- /** Material Symbols ligature used by the menu button. */
3301
- this.menuIcon = input('menu', /* @ts-ignore */
3302
- ...(ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []));
3303
- /** Accessible name of the menu button. */
3304
- this.menuAriaLabel = input('Menu', /* @ts-ignore */
3305
- ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
3306
- /** Accessible name of the navigation landmark. */
3307
- this.ariaLabel = input('Navigation', /* @ts-ignore */
3308
- ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
3309
- /** When `true` a scrim is rendered behind the modal drawer. */
3310
- this.scrim = input(true, { ...(ngDevMode ? { debugName: "scrim" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3311
- /** When `true` the modal drawer closes as soon as a destination is activated. */
3312
- this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3313
- /** When `true` the surface gets the M3 elevation-3 shadow. */
3314
- this.elevated = input(true, { ...(ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3315
- /** When `true` a 1px divider separates the surface from the page content. */
3316
- this.bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3317
- /** When `true` tooltips are shown for destinations whose label is not visible. */
3318
- this.tooltips = input(true, { ...(ngDevMode ? { debugName: "tooltips" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3319
- /** When `true` the selection follows the current router URL. */
3320
- this.routerSync = input(true, { ...(ngDevMode ? { debugName: "routerSync" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3321
- /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
3322
- this.relativeTo = input(undefined, /* @ts-ignore */
3323
- ...(ngDevMode ? [{ debugName: "relativeTo" }] : /* istanbul ignore next */ []));
3324
- /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
3325
- this.width = input(0, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
3326
- /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
3327
- this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3328
- // ── Outputs ────────────────────────────────────────────────────────────────
3329
- /** Emitted when a destination is activated by the user. */
3330
- this.itemSelected = output();
3331
- /** Emitted when the leading menu button is pressed. */
3332
- this.menuClick = output();
3333
- // ── View queries ───────────────────────────────────────────────────────────
3334
- /** Focusable destination elements, in DOM order; used for keyboard roving. */
3335
- this.itemElements = viewChildren('navItem', /* @ts-ignore */
3336
- ...(ngDevMode ? [{ debugName: "itemElements" }] : /* istanbul ignore next */ []));
3337
- // ── Router state ───────────────────────────────────────────────────────────
3338
- /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
3339
- this.routerUrl = signal(undefined, /* @ts-ignore */
3340
- ...(ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []));
3341
- // ── Derived state ──────────────────────────────────────────────────────────
3342
- /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
3343
- this.resolvedSections = computed(() => {
3344
- const sections = this.sections();
3345
- if (sections.length > 0)
3346
- return sections;
3347
- return [{ id: '__default', items: this.items() }];
3348
- }, /* @ts-ignore */
3349
- ...(ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []));
3350
- /** The variant to render, resolving `auto` against the active CDK breakpoint. */
3351
- this.resolvedVariant = computed(() => {
3352
- const variant = this.variant();
3353
- if (variant !== 'auto')
3354
- return variant;
3355
- const alias = this.media.currentBp();
3356
- return this.autoVariants()[alias] ?? DEFAULT_NAVIGATION_AUTO_VARIANTS[alias];
3357
- }, /* @ts-ignore */
3358
- ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
3359
- /** `true` for the variants that render labels beside icons and support sections. */
3360
- this.isExpanded = computed(() => EXPANDED_NAVIGATION_VARIANTS.includes(this.resolvedVariant()), /* @ts-ignore */
3361
- ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
3362
- /** `true` when the surface is the modal drawer. */
3363
- this.isModal = computed(() => this.resolvedVariant() === 'modal', /* @ts-ignore */
3364
- ...(ngDevMode ? [{ debugName: "isModal" }] : /* istanbul ignore next */ []));
3365
- /** `true` when the modal drawer is currently open. */
3366
- this.isOverlayOpen = computed(() => this.isModal() && this.open(), /* @ts-ignore */
3367
- ...(ngDevMode ? [{ debugName: "isOverlayOpen" }] : /* istanbul ignore next */ []));
3368
- /** `true` when the surface must be visually hidden. */
3369
- this.isHidden = computed(() => this.hidden() || (this.isModal() && !this.open()), /* @ts-ignore */
3370
- ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
3371
- /** Resolved icon / label arrangement. */
3372
- this.resolvedLayout = computed(() => {
3373
- if (this.isExpanded())
3374
- return 'horizontal';
3375
- const layout = this.itemLayout();
3376
- if (layout !== 'auto')
3377
- return layout;
3378
- // M3 Expressive: the navigation bar switches to a horizontal item layout from 600dp upwards.
3379
- return this.resolvedVariant() === 'bar' && this.media.currentBp() !== 'xs' ? 'horizontal' : 'vertical';
3380
- }, /* @ts-ignore */
3381
- ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
3382
- /** Resolved label visibility; the expanded variants always show labels. */
3383
- this.resolvedLabelVisibility = computed(() => {
3384
- if (this.isExpanded())
3385
- return 'labeled';
3386
- const visibility = this.labelVisibility();
3387
- return visibility === 'auto' ? 'labeled' : visibility;
3388
- }, /* @ts-ignore */
3389
- ...(ngDevMode ? [{ debugName: "resolvedLabelVisibility" }] : /* istanbul ignore next */ []));
3390
- /** `true` when the section headline and the divider must be rendered. */
3391
- this.showsSections = computed(() => this.isExpanded(), /* @ts-ignore */
3392
- ...(ngDevMode ? [{ debugName: "showsSections" }] : /* istanbul ignore next */ []));
3393
- /** `true` when the headline row (menu button, headline text, projected header) is rendered. */
3394
- this.showsHeader = computed(() => this.resolvedVariant() !== 'bar' && (this.showMenuButton() || (this.isExpanded() && !!this.headline())), /* @ts-ignore */
3395
- ...(ngDevMode ? [{ debugName: "showsHeader" }] : /* istanbul ignore next */ []));
3396
- /**
3397
- * Geometry of the active indicator:
3398
- * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
3399
- * together, exactly as described by the M3 Expressive specs.
3400
- */
3401
- this.indicatorMode = computed(() => this.isExpanded() || this.resolvedLayout() === 'horizontal' ? 'wide' : 'compact', /* @ts-ignore */
3402
- ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
3403
- /** Tooltip placement derived from the variant and from the anchoring edge. */
3404
- this.tooltipPosition = computed(() => {
3405
- if (this.resolvedVariant() === 'bar')
3406
- return 'above';
3407
- return this.position() === 'end' ? 'before' : 'after';
3408
- }, /* @ts-ignore */
3409
- ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
3410
- /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
3411
- this.widthStyle = computed(() => {
3412
- const width = this.width();
3413
- return width > 0 ? `${width}px` : undefined;
3414
- }, /* @ts-ignore */
3415
- ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
3416
- /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
3417
- this.hrefs = computed(() => {
3418
- const result = new Map();
3419
- const router = this.router;
3420
- const relativeTo = this.relativeTo();
3421
- for (const section of this.resolvedSections()) {
3422
- for (const item of section.items) {
3423
- if (item.href) {
3424
- result.set(item.id, item.href);
3425
- continue;
3426
- }
3427
- if (item.route !== undefined && router) {
3428
- const commands = Array.isArray(item.route) ? [...item.route] : [item.route];
3429
- try {
3430
- const tree = router.createUrlTree(commands, {
3431
- queryParams: item.queryParams,
3432
- fragment: item.fragment,
3433
- relativeTo,
3434
- });
3435
- result.set(item.id, router.serializeUrl(tree));
3436
- }
3437
- catch {
3438
- // Invalid route commands: the destination degrades to a plain button.
3439
- }
3440
- }
3441
- }
3442
- }
3443
- return result;
3444
- }, /* @ts-ignore */
3445
- ...(ngDevMode ? [{ debugName: "hrefs" }] : /* istanbul ignore next */ []));
3446
- /** Pre-computed render model, rebuilt only when the destinations or the resolved URLs change. */
3447
- this.renderSections = computed(() => {
3448
- const hrefs = this.hrefs();
3449
- let index = 0;
3450
- return this.resolvedSections().map(section => ({
3451
- section,
3452
- items: section.items.map(item => {
3453
- const href = hrefs.get(item.id);
3454
- // An SVG icon always wins over a ligature, so only one of the two pairs is ever set.
3455
- const svgOff = item.svgIcon;
3456
- const svgOn = item.activeSvgIcon ?? item.svgIcon;
3457
- return {
3458
- item,
3459
- section: section.id === '__default' ? undefined : section,
3460
- index: index++,
3461
- href,
3462
- routed: !!href && !item.href,
3463
- iconOff: svgOff ? undefined : item.icon,
3464
- iconOn: svgOn ? undefined : (item.activeIcon ?? item.icon),
3465
- svgOff,
3466
- svgOn,
3467
- badgeText: NavigationBarComponent.formatBadge(item),
3468
- hasBadge: !!item.badge,
3469
- ariaLabel: item.ariaLabel ?? item.label,
3470
- tooltip: item.tooltip ?? item.label,
3471
- };
3472
- }),
3473
- }));
3474
- }, /* @ts-ignore */
3475
- ...(ngDevMode ? [{ debugName: "renderSections" }] : /* istanbul ignore next */ []));
3476
- /** Id of the destination matching the current router URL, using longest-prefix matching. */
3477
- this.routerActiveId = computed(() => {
3478
- if (!this.routerSync())
3479
- return undefined;
3480
- const url = this.routerUrl();
3481
- if (!url)
3482
- return undefined;
3483
- const path = NavigationBarComponent.pathOf(url);
3484
- const hrefs = this.hrefs();
3485
- let best;
3486
- let bestLength = -1;
3487
- for (const section of this.resolvedSections()) {
3488
- for (const item of section.items) {
3489
- if (item.href || item.route === undefined)
3490
- continue;
3491
- const href = hrefs.get(item.id);
3492
- if (!href)
3493
- continue;
3494
- const target = NavigationBarComponent.pathOf(href);
3495
- const matches = item.exact
3496
- ? path === target
3497
- : path === target || path.startsWith(target.endsWith('/') ? target : `${target}/`);
3498
- if (matches && target.length > bestLength) {
3499
- best = item.id;
3500
- bestLength = target.length;
3501
- }
3502
- }
3503
- }
3504
- return best;
3505
- }, /* @ts-ignore */
3506
- ...(ngDevMode ? [{ debugName: "routerActiveId" }] : /* istanbul ignore next */ []));
3507
- /** Id of the currently active destination: router URL first, explicit selection as fallback. */
3508
- this.activeId = computed(() => this.routerActiveId() ?? this.selectedId(), /* @ts-ignore */
3509
- ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
3510
- /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
3511
- this.isRtl = computed(() => this.directionality?.value === 'rtl', /* @ts-ignore */
3512
- ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
3513
- const router = this.router;
3514
- if (router) {
3515
- this.routerUrl.set(router.url);
3516
- router.events
3517
- .pipe(filter((e) => e instanceof NavigationEnd), map(e => e.urlAfterRedirects), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
3518
- .subscribe(url => this.routerUrl.set(url));
3519
- }
3520
- }
3521
- // ── Event handlers ─────────────────────────────────────────────────────────
3522
- /**
3523
- * Activates a destination: updates the selection, navigates when routed and
3524
- * emits `itemSelected`.
3525
- * @param render - The render model of the activated destination.
3526
- * @param event - The originating mouse or keyboard event.
3527
- */
3528
- select(render, event) {
3529
- const item = render.item;
3530
- if (item.disabled) {
3531
- event.preventDefault();
3532
- return;
3533
- }
3534
- // Let the browser handle modified clicks (new tab / new window) natively.
3535
- const mouse = event;
3536
- if (render.href && (mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.button === 1)) {
3537
- return;
3538
- }
3539
- if (render.routed && render.href) {
3540
- event.preventDefault();
3541
- void this.router?.navigateByUrl(render.href);
3542
- }
3543
- this.selectedId.set(item.id);
3544
- this.itemSelected.emit({ item, section: render.section, index: render.index });
3545
- if (this.isModal() && this.closeOnSelect()) {
3546
- this.open.set(false);
3547
- }
3548
- }
3549
- /**
3550
- * Emits `menuClick` when the leading menu button is pressed.
3551
- */
3552
- onMenuClick() {
3553
- this.menuClick.emit();
3554
- }
3555
- /**
3556
- * Closes the modal drawer when the scrim is clicked.
3557
- */
3558
- onScrimClick() {
3559
- this.open.set(false);
3560
- }
3561
- /**
3562
- * Handles keyboard interaction: arrow keys move the focus between
3563
- * destinations, `Home` / `End` jump to the first / last one and `Escape`
3564
- * closes the modal drawer.
3565
- * @param event - The originating keyboard event.
3566
- */
3567
- onKeydown(event) {
3568
- if (event.key === 'Escape' && this.isOverlayOpen()) {
3569
- event.preventDefault();
3570
- this.open.set(false);
3571
- return;
3572
- }
3573
- const horizontal = this.resolvedVariant() === 'bar';
3574
- const forward = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
3575
- const backward = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
3576
- let delta = 0;
3577
- if (event.key === forward)
3578
- delta = 1;
3579
- else if (event.key === backward)
3580
- delta = -1;
3581
- else if (event.key !== 'Home' && event.key !== 'End')
3582
- return;
3583
- const elements = this.itemElements();
3584
- if (elements.length === 0)
3585
- return;
3586
- const current = elements.findIndex(ref => ref.nativeElement === event.target);
3587
- let next;
3588
- if (event.key === 'Home')
3589
- next = 0;
3590
- else if (event.key === 'End')
3591
- next = elements.length - 1;
3592
- else if (current < 0)
3593
- next = 0;
3594
- else
3595
- next = (current + delta + elements.length) % elements.length;
3596
- event.preventDefault();
3597
- elements[next]?.nativeElement.focus();
3598
- }
3599
- // ── Public API ─────────────────────────────────────────────────────────────
3600
- /**
3601
- * Opens the modal drawer. No-op for the other variants.
3602
- */
3603
- openDrawer() {
3604
- this.open.set(true);
3605
- }
3606
- /**
3607
- * Closes the modal drawer. No-op for the other variants.
3608
- */
3609
- closeDrawer() {
3610
- this.open.set(false);
3611
- }
3612
- /**
3613
- * Toggles the modal drawer. No-op for the other variants.
3614
- */
3615
- toggleDrawer() {
3616
- this.open.update(open => !open);
3617
- }
3618
- /**
3619
- * Moves the browser focus to the destination with the given id.
3620
- * @param id - Identifier of the destination to focus.
3621
- * @returns `true` when a matching destination was found and focused.
3622
- */
3623
- focusItem(id) {
3624
- const elements = this.itemElements();
3625
- for (const ref of elements) {
3626
- if (ref.nativeElement.dataset['navId'] === id) {
3627
- ref.nativeElement.focus();
3628
- return true;
3629
- }
3630
- }
3631
- return false;
3632
- }
3633
- // ── Helpers ────────────────────────────────────────────────────────────────
3634
- /**
3635
- * Formats the badge content of a destination.
3636
- * @param item - The destination whose badge must be formatted.
3637
- * @returns The badge text, or an empty string for a dot badge / no badge.
3638
- */
3639
- static formatBadge(item) {
3640
- const badge = item.badge;
3641
- if (!badge || badge.value === undefined)
3642
- return '';
3643
- if (typeof badge.value === 'number') {
3644
- const max = badge.max ?? 999;
3645
- return badge.value > max ? `${max}+` : `${badge.value}`;
3646
- }
3647
- return badge.value;
3648
- }
3649
- /**
3650
- * Strips the query string and the fragment from a URL.
3651
- * @param url - The URL to normalise.
3652
- * @returns The path portion of the URL.
3653
- */
3654
- static pathOf(url) {
3655
- const withoutFragment = url.split('#')[0] ?? '';
3656
- return withoutFragment.split('?')[0] ?? '';
3657
- }
3658
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3659
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: NavigationBarComponent, isStandalone: true, selector: "navigation-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, autoVariants: { classPropertyName: "autoVariants", publicName: "autoVariants", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, labelVisibility: { classPropertyName: "labelVisibility", publicName: "labelVisibility", isSignal: true, isRequired: false, transformFunction: null }, itemLayout: { classPropertyName: "itemLayout", publicName: "itemLayout", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showMenuButton: { classPropertyName: "showMenuButton", publicName: "showMenuButton", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, routerSync: { classPropertyName: "routerSync", publicName: "routerSync", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", open: "openChange", itemSelected: "itemSelected", menuClick: "menuClick" }, host: { properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-align": "alignment()", "attr.data-position": "position()", "attr.data-labels": "resolvedLabelVisibility()", "attr.data-indicator": "indicatorMode()", "class.ars-navigation--open": "isOverlayOpen()", "class.ars-navigation--elevated": "elevated()", "class.ars-navigation--bordered": "bordered()", "class.ars-navigation--hidden": "isHidden()", "style.--ars-navigation-width": "widthStyle()" }, classAttribute: "ars-navigation" }, viewQueries: [{ propertyName: "itemElements", predicate: ["navItem"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let expanded = isExpanded();\n @let active = activeId();\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (expanded) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n <div class=\"ars-nav__items\">\n @for (group of renderSections(); track group.section.id) {\n\n @if (expanded && group.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ group.section.label }}</h3>\n }\n\n @for (r of group.items; track r.item.id) {\n @let selected = r.item.id === active;\n @let labelVisible = labels === 'labeled' || (labels === 'selected' && selected);\n @let svg = selected ? r.svgOn : r.svgOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination, which is measurable on large drawers.\n -->\n @if (r.href) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"selected ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n @if (labels !== 'unlabeled') {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (expanded && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"selected ? 'page' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n @if (labels !== 'unlabeled') {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (expanded && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n </button>\n }\n }\n\n @if (expanded && group.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transition:font-variation-settings var(--_dur) var(--_easing)}.ars-nav__label{position:relative;z-index:1;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{margin-top:4px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{flex:1 1 auto;flex-direction:row;align-items:stretch;justify-content:space-around;width:100%;height:100%}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 44px) 0 4px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding:0 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host([data-align=center]) .ars-nav__items{justify-content:safe center}:host([data-align=bottom]) .ars-nav__items{justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host([data-variant=bar].ars-navigation--bordered) .ars-nav{border-top:1px solid var(--_divider)}:host([data-variant=rail].ars-navigation--bordered) .ars-nav,:host([data-variant=rail-expanded].ars-navigation--bordered) .ars-nav,:host([data-variant=drawer].ars-navigation--bordered) .ars-nav{border-inline-end:1px solid var(--_divider)}:host([data-variant=rail][data-position=end].ars-navigation--bordered) .ars-nav,:host([data-variant=rail-expanded][data-position=end].ars-navigation--bordered) .ars-nav,:host([data-variant=drawer][data-position=end].ars-navigation--bordered) .ars-nav{border-inline-end:0;border-inline-start:1px solid var(--_divider)}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3660
- }
3661
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, decorators: [{
3662
- type: Component,
3663
- args: [{ selector: 'navigation-bar', standalone: true, imports: [MatIconModule, MatTooltipModule, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, host: {
3664
- 'class': 'ars-navigation',
3665
- '[attr.data-variant]': 'resolvedVariant()',
3666
- '[attr.data-layout]': 'resolvedLayout()',
3667
- '[attr.data-align]': 'alignment()',
3668
- '[attr.data-position]': 'position()',
3669
- '[attr.data-labels]': 'resolvedLabelVisibility()',
3670
- '[attr.data-indicator]': 'indicatorMode()',
3671
- '[class.ars-navigation--open]': 'isOverlayOpen()',
3672
- '[class.ars-navigation--elevated]': 'elevated()',
3673
- '[class.ars-navigation--bordered]': 'bordered()',
3674
- '[class.ars-navigation--hidden]': 'isHidden()',
3675
- '[style.--ars-navigation-width]': 'widthStyle()',
3676
- }, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let expanded = isExpanded();\n @let active = activeId();\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (expanded) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n <div class=\"ars-nav__items\">\n @for (group of renderSections(); track group.section.id) {\n\n @if (expanded && group.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ group.section.label }}</h3>\n }\n\n @for (r of group.items; track r.item.id) {\n @let selected = r.item.id === active;\n @let labelVisible = labels === 'labeled' || (labels === 'selected' && selected);\n @let svg = selected ? r.svgOn : r.svgOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination, which is measurable on large drawers.\n -->\n @if (r.href) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"selected ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n @if (labels !== 'unlabeled') {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (expanded && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"selected ? 'page' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n @if (labels !== 'unlabeled') {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (expanded && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n </button>\n }\n }\n\n @if (expanded && group.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transition:font-variation-settings var(--_dur) var(--_easing)}.ars-nav__label{position:relative;z-index:1;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{margin-top:4px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{flex:1 1 auto;flex-direction:row;align-items:stretch;justify-content:space-around;width:100%;height:100%}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 44px) 0 4px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding:0 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host([data-align=center]) .ars-nav__items{justify-content:safe center}:host([data-align=bottom]) .ars-nav__items{justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host([data-variant=bar].ars-navigation--bordered) .ars-nav{border-top:1px solid var(--_divider)}:host([data-variant=rail].ars-navigation--bordered) .ars-nav,:host([data-variant=rail-expanded].ars-navigation--bordered) .ars-nav,:host([data-variant=drawer].ars-navigation--bordered) .ars-nav{border-inline-end:1px solid var(--_divider)}:host([data-variant=rail][data-position=end].ars-navigation--bordered) .ars-nav,:host([data-variant=rail-expanded][data-position=end].ars-navigation--bordered) .ars-nav,:host([data-variant=drawer][data-position=end].ars-navigation--bordered) .ars-nav{border-inline-end:0;border-inline-start:1px solid var(--_divider)}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"] }]
3677
- }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], autoVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoVariants", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], labelVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisibility", required: false }] }], itemLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLayout", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuButton", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrim", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], routerSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerSync", required: false }] }], relativeTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeTo", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], itemElements: [{ type: i0.ViewChildren, args: ['navItem', { isSignal: true }] }] } });
3678
-
3679
3208
  /*
3680
3209
  * Public API Surface of scm-utils
3681
3210
  */
@@ -3684,5 +3213,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
3684
3213
  * Generated bundle index. Do not edit.
3685
3214
  */
3686
3215
 
3687
- export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DEFAULT_NAVIGATION_AUTO_VARIANTS, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, EXPANDED_NAVIGATION_VARIANTS, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, NavigationBarComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
3216
+ export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
3688
3217
  //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map