@arsedizioni/ars-utils 22.1.4 → 22.5.1

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 (72) hide show
  1. package/README.md +97 -10
  2. package/clipper.ui/clipper.scss +564 -0
  3. package/fesm2022/arsedizioni-ars-utils-clipper.common.mjs +1 -1
  4. package/fesm2022/arsedizioni-ars-utils-clipper.common.mjs.map +1 -1
  5. package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +7 -3
  6. package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
  7. package/fesm2022/arsedizioni-ars-utils-core.date.mjs +609 -0
  8. package/fesm2022/arsedizioni-ars-utils-core.date.mjs.map +1 -0
  9. package/fesm2022/arsedizioni-ars-utils-core.markdown.mjs +591 -0
  10. package/fesm2022/arsedizioni-ars-utils-core.markdown.mjs.map +1 -0
  11. package/fesm2022/arsedizioni-ars-utils-core.mjs +270 -1449
  12. package/fesm2022/arsedizioni-ars-utils-core.mjs.map +1 -1
  13. package/fesm2022/arsedizioni-ars-utils-evolution.common.mjs +1 -1
  14. package/fesm2022/arsedizioni-ars-utils-evolution.common.mjs.map +1 -1
  15. package/fesm2022/arsedizioni-ars-utils-support.common.mjs +1 -1
  16. package/fesm2022/arsedizioni-ars-utils-support.common.mjs.map +1 -1
  17. package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +14 -3080
  18. package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
  19. package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs +962 -0
  20. package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs.map +1 -0
  21. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs +506 -0
  22. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs.map +1 -0
  23. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +763 -0
  24. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -0
  25. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs +184 -0
  26. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs.map +1 -0
  27. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs +825 -0
  28. package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs.map +1 -0
  29. package/fesm2022/arsedizioni-ars-utils-ui.files.mjs +708 -0
  30. package/fesm2022/arsedizioni-ars-utils-ui.files.mjs.map +1 -0
  31. package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs +426 -0
  32. package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs.map +1 -0
  33. package/fesm2022/arsedizioni-ars-utils-ui.help.mjs +531 -0
  34. package/fesm2022/arsedizioni-ars-utils-ui.help.mjs.map +1 -0
  35. package/fesm2022/arsedizioni-ars-utils-ui.mjs +62 -2222
  36. package/fesm2022/arsedizioni-ars-utils-ui.mjs.map +1 -1
  37. package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs +1049 -0
  38. package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs.map +1 -0
  39. package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs +263 -0
  40. package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs.map +1 -0
  41. package/fesm2022/arsedizioni-ars-utils-ui.oauth.mjs +4 -3
  42. package/fesm2022/arsedizioni-ars-utils-ui.oauth.mjs.map +1 -1
  43. package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs +246 -0
  44. package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs.map +1 -0
  45. package/fesm2022/arsedizioni-ars-utils.mjs +13 -12
  46. package/fesm2022/arsedizioni-ars-utils.mjs.map +1 -1
  47. package/help/package.json +4 -0
  48. package/package.json +72 -14
  49. package/support.ui/package.json +4 -0
  50. package/tinymce/package.json +4 -0
  51. package/types/arsedizioni-ars-utils-clipper.common.d.ts +1 -2
  52. package/types/arsedizioni-ars-utils-clipper.ui.d.ts +3 -1
  53. package/types/arsedizioni-ars-utils-core.d.ts +684 -1004
  54. package/types/arsedizioni-ars-utils-core.date.d.ts +304 -0
  55. package/types/arsedizioni-ars-utils-core.markdown.d.ts +159 -0
  56. package/types/arsedizioni-ars-utils-ui.application.d.ts +10 -1377
  57. package/types/arsedizioni-ars-utils-ui.controls.d.ts +413 -0
  58. package/types/arsedizioni-ars-utils-ui.d.ts +198 -1206
  59. package/types/arsedizioni-ars-utils-ui.dialogs.auth.d.ts +224 -0
  60. package/types/arsedizioni-ars-utils-ui.dialogs.d.ts +376 -0
  61. package/types/arsedizioni-ars-utils-ui.dialogs.prompt.d.ts +47 -0
  62. package/types/arsedizioni-ars-utils-ui.dialogs.select.d.ts +309 -0
  63. package/types/arsedizioni-ars-utils-ui.files.d.ts +271 -0
  64. package/types/arsedizioni-ars-utils-ui.filters.d.ts +163 -0
  65. package/types/arsedizioni-ars-utils-ui.help.d.ts +220 -0
  66. package/types/arsedizioni-ars-utils-ui.navigation.d.ts +650 -0
  67. package/types/arsedizioni-ars-utils-ui.notifications.d.ts +73 -0
  68. package/types/arsedizioni-ars-utils-ui.tinymce.d.ts +63 -0
  69. package/types/arsedizioni-ars-utils.d.ts +4 -10
  70. package/ui.tinymce/README.md +12 -0
  71. package/ui.tinymce/langs/it.js +466 -0
  72. package/types/arsedizioni-ars-utils-core.d.ts.map +0 -1
@@ -1,37 +1,43 @@
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';
4
- import { Overlay, CdkConnectedOverlay } from '@angular/cdk/overlay';
5
- import { ComponentPortal } from '@angular/cdk/portal';
6
- import { isPlatformBrowser, PlatformLocation } from '@angular/common';
7
- import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions, MatDialog } from '@angular/material/dialog';
8
- import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
9
- import { SafeHtmlPipe, SystemUtils, PasswordValidatorDirective, EqualsValidatorDirective, ThemeService } from '@arsedizioni/ars-utils/core';
10
- import { map, distinctUntilChanged, shareReplay, timer, EMPTY, filter } from 'rxjs';
11
- import { tap, first } from 'rxjs/operators';
12
- import * as i5 from '@angular/material/progress-spinner';
13
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
14
- import * as i4 from '@angular/material/progress-bar';
15
- import { MatProgressBarModule } from '@angular/material/progress-bar';
3
+ import { Injectable, signal, Service, InjectionToken, inject, TemplateRef, ViewContainerRef, input, computed, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode, NgModule } from '@angular/core';
16
4
  import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
17
- import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
18
- import * as i7 from '@angular/material/icon';
19
- import { MatIcon, MatIconModule } from '@angular/material/icon';
20
- import * as i10 from '@angular/material/button';
21
- import { MatButtonModule } from '@angular/material/button';
22
- import * as i1 from '@angular/forms';
23
- import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
24
- import * as i6 from '@angular/material/checkbox';
25
- import { MatCheckboxModule } from '@angular/material/checkbox';
26
- import * as i8 from '@angular/material/tooltip';
27
- import { MatTooltipModule } from '@angular/material/tooltip';
28
- import * as i2 from '@angular/material/form-field';
29
- import { MatFormFieldModule } from '@angular/material/form-field';
30
- import * as i3 from '@angular/material/input';
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';
5
+ import { map, distinctUntilChanged, shareReplay } from 'rxjs';
6
+ import { toSignal } from '@angular/core/rxjs-interop';
7
+ import { isPlatformBrowser } from '@angular/common';
8
+
9
+ class SelectableItem {
10
+ }
11
+ class ItemNode {
12
+ }
13
+ class SelectableNode extends ItemNode {
14
+ /**
15
+ * Create a flattened tree node from a source ItemNode.
16
+ * @param item - The source tree node.
17
+ * @param level - The depth level of this node in the tree.
18
+ */
19
+ constructor(item, level) {
20
+ super();
21
+ this.expandable = !!(item.children?.length);
22
+ this.level = level;
23
+ this.id = item.id;
24
+ this.name = item.name;
25
+ this.count = item.count;
26
+ this.parent = item.parent;
27
+ this.bag = item.bag;
28
+ this.children = item.children;
29
+ }
30
+ }
31
+ var PromptDialogType;
32
+ (function (PromptDialogType) {
33
+ PromptDialogType[PromptDialogType["Default"] = 0] = "Default";
34
+ PromptDialogType[PromptDialogType["Date"] = 1] = "Date";
35
+ PromptDialogType[PromptDialogType["Number"] = 2] = "Number";
36
+ PromptDialogType[PromptDialogType["Text"] = 3] = "Text";
37
+ PromptDialogType[PromptDialogType["DateInterval"] = 4] = "DateInterval";
38
+ PromptDialogType[PromptDialogType["List"] = 5] = "List";
39
+ PromptDialogType[PromptDialogType["Time"] = 6] = "Time";
40
+ })(PromptDialogType || (PromptDialogType = {}));
35
41
 
36
42
  /** Italian localisation for the Material paginator labels. */
37
43
  class PaginatorIntl extends MatPaginatorIntl {
@@ -72,6 +78,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
72
78
  type: Injectable
73
79
  }] });
74
80
 
81
+ class UIService {
82
+ constructor() {
83
+ /**
84
+ * The default Material form-field appearance used across dialogs and forms.
85
+ * Defaults to `'fill'`.
86
+ */
87
+ this.appearance = signal('fill', /* @ts-ignore */
88
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
89
+ }
90
+ /**
91
+ * Updates the global form-field appearance.
92
+ * @param value - The new appearance value. Falls back to `'fill'` when `undefined` is passed.
93
+ */
94
+ setAppearance(value) {
95
+ this.appearance.set(value ?? 'fill');
96
+ }
97
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UIService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
98
+ static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: UIService }); }
99
+ }
100
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UIService, decorators: [{
101
+ type: Service
102
+ }] });
103
+
75
104
  /**
76
105
  * @file breakpoints.ts
77
106
  * Angular CDK (v22) breakpoint definitions.
@@ -2043,2202 +2072,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
2043
2072
  }]
2044
2073
  }] });
2045
2074
 
2046
- /**
2047
- * Overlay dialog that blocks interaction while a background operation is in progress.
2048
- * Supports four visual styles: progress bar, spinner, hourglass, and wait icon.
2049
- */
2050
- class BusyDialogComponent {
2051
- constructor() {
2052
- /** Visual style of the busy indicator. */
2053
- this.type = signal('bar', /* @ts-ignore */
2054
- ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
2055
- /** Current progress value (0–100). Used when `progressMode` is `'determinate'`. */
2056
- this.progress = signal(0, /* @ts-ignore */
2057
- ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
2058
- /** Progress mode passed to the Material progress components. */
2059
- this.progressMode = signal('indeterminate', /* @ts-ignore */
2060
- ...(ngDevMode ? [{ debugName: "progressMode" }] : /* istanbul ignore next */ []));
2061
- /** Message displayed above the progress indicator. */
2062
- this.message = signal('', /* @ts-ignore */
2063
- ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
2064
- }
2065
- /**
2066
- * Updates the busy dialog state.
2067
- * @param message - New message to display. Ignored when empty, preserving the previous text.
2068
- * @param progress - Current progress value (0–100). A value > 0 forces `'determinate'` mode.
2069
- * @param progressMode - Progress bar/spinner mode (default: `'indeterminate'`).
2070
- * @param type - Visual style to use (default: `'bar'`).
2071
- */
2072
- set(message, progress, progressMode = 'indeterminate', type = 'bar') {
2073
- if (message) {
2074
- this.message.set(message);
2075
- }
2076
- if (type) {
2077
- this.type.set(type);
2078
- }
2079
- this.progress.set(progress);
2080
- this.progressMode.set(progress > 0 ? 'determinate' : progressMode);
2081
- }
2082
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BusyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2083
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BusyDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if(type() === 'hourglass') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n @if (message()) {\r\n <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n }\r\n</div>\r\n} @else if (type() === 'wait') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n</div>\r\n} @else {\r\n<div class=\"busy-panel\">\r\n <div fxLayout=\"column\" fxFill>\r\n @if (message()) {\r\n <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n }\r\n @if (type() === 'bar') {\r\n <div>\r\n <mat-progress-bar [mode]=\"progressMode()\" [value]=\"progress()\"\r\n style=\"margin:15px auto 0 auto; max-width: 350px;\"></mat-progress-bar>\r\n </div>\r\n } @else if (type() === 'spinner') {\r\n <div>\r\n <mat-progress-spinner [mode]=\"progressMode()\" diameter=\"70\" [value]=\"progress()\"\r\n style=\"margin:15px auto 0 auto;\"></mat-progress-spinner>\r\n </div>\r\n }\r\n @if (progress() > 0) {\r\n <div>\r\n <span style=\"font-size: smaller;\"><b>{{progress()}}%</b></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}", 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}}.busy-message{font-size:larger;font-weight:600;padding-top:15px;padding-bottom:15px;text-align:center}.busy-panel{background-color:var(--mat-dialog-container-color);border-radius:var(--mat-dialog-container-shape, 24px);box-shadow:0 4px 8px #0003,0 6px 20px #00000030;padding:24px;min-width:250px;margin:12px}.busy-panel .busy-message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.busy-backdrop{background-color:#0000006b!important}.mat-icon-spinner{animation:matIconSpinnerKeyFrames 3s linear infinite;font-size:5em;width:1em;height:1em}@keyframes matIconSpinnerKeyFrames{0%{transform:rotate(360deg)}to{transform:rotate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2084
- }
2085
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BusyDialogComponent, decorators: [{
2086
- type: Component,
2087
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatProgressBarModule, MatProgressSpinnerModule, MatIcon, SafeHtmlPipe], template: "@if(type() === 'hourglass') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n @if (message()) {\r\n <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n }\r\n</div>\r\n} @else if (type() === 'wait') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n</div>\r\n} @else {\r\n<div class=\"busy-panel\">\r\n <div fxLayout=\"column\" fxFill>\r\n @if (message()) {\r\n <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n }\r\n @if (type() === 'bar') {\r\n <div>\r\n <mat-progress-bar [mode]=\"progressMode()\" [value]=\"progress()\"\r\n style=\"margin:15px auto 0 auto; max-width: 350px;\"></mat-progress-bar>\r\n </div>\r\n } @else if (type() === 'spinner') {\r\n <div>\r\n <mat-progress-spinner [mode]=\"progressMode()\" diameter=\"70\" [value]=\"progress()\"\r\n style=\"margin:15px auto 0 auto;\"></mat-progress-spinner>\r\n </div>\r\n }\r\n @if (progress() > 0) {\r\n <div>\r\n <span style=\"font-size: smaller;\"><b>{{progress()}}%</b></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}", 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}}.busy-message{font-size:larger;font-weight:600;padding-top:15px;padding-bottom:15px;text-align:center}.busy-panel{background-color:var(--mat-dialog-container-color);border-radius:var(--mat-dialog-container-shape, 24px);box-shadow:0 4px 8px #0003,0 6px 20px #00000030;padding:24px;min-width:250px;margin:12px}.busy-panel .busy-message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.busy-backdrop{background-color:#0000006b!important}.mat-icon-spinner{animation:matIconSpinnerKeyFrames 3s linear infinite;font-size:5em;width:1em;height:1em}@keyframes matIconSpinnerKeyFrames{0%{transform:rotate(360deg)}to{transform:rotate(0)}}\n"] }]
2088
- }] });
2089
-
2090
- class ConfirmDialogComponent {
2091
- constructor() {
2092
- /** Emitted when the user makes a choice. Carries the selected result and any option state. */
2093
- this.choosen = output();
2094
- this.dialogRef = inject((MatDialogRef));
2095
- /** Dialog configuration, with sensible defaults applied at construction time. */
2096
- this.dialogData = signal({
2097
- title: 'Conferma',
2098
- okCaption: 'Si',
2099
- cancelCaption: 'No',
2100
- message: '',
2101
- ...(inject(MAT_DIALOG_DATA) ?? {}),
2102
- }, /* @ts-ignore */
2103
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
2104
- // Ensure optional captions always have a value even when the caller omits them
2105
- this.dialogData.update(d => ({
2106
- ...d,
2107
- title: d.title ?? 'Conferma',
2108
- okCaption: d.okCaption ?? 'Si',
2109
- cancelCaption: d.cancelCaption ?? 'No',
2110
- }));
2111
- }
2112
- /**
2113
- * Confirms the dialog, emitting `'ok'` together with the current option selections.
2114
- */
2115
- ok() {
2116
- this.choosen.emit({ result: 'ok', options: this.dialogData().options });
2117
- this.dialogRef.close();
2118
- }
2119
- /**
2120
- * Cancels the dialog, emitting `'cancel'`.
2121
- */
2122
- cancel() {
2123
- this.choosen.emit({ result: 'cancel' });
2124
- this.dialogRef.close();
2125
- }
2126
- /**
2127
- * Triggers the tertiary action, emitting `'other'`.
2128
- */
2129
- other() {
2130
- this.choosen.emit({ result: 'other' });
2131
- this.dialogRef.close();
2132
- }
2133
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2134
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", outputs: { choosen: "choosen" }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n @if (dialogData().options) {\r\n <div style=\"padding-bottom: 24px;\">\r\n @for (o of dialogData().options; track o; let i = $index) {\r\n <div>\r\n <mat-checkbox (change)=\"o.selected = $event.checked\" [checked]=\"o.selected === true\" name=\"opt_{{i}}\">\r\n {{o.description}}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n <div fxFlex=\"30\">\r\n @if (dialogData().otherCaption) {\r\n <button mat-flat-button (click)=\"other()\" [mat-dialog-close]=\"true\">{{dialogData().otherCaption}}</button>\r\n }\r\n </div>\r\n <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n <button mat-flat-button (click)=\"ok()\" [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\" (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxFlexDirective, selector: "\n [fxFlex],\n [fxFlex.xs],\n [fxFlex.sm],\n [fxFlex.md],\n [fxFlex.lg],\n [fxFlex.xl],\n [fxFlex.lt-sm],\n [fxFlex.lt-md],\n [fxFlex.lt-lg],\n [fxFlex.lt-xl],\n [fxFlex.gt-xs],\n [fxFlex.gt-sm],\n [fxFlex.gt-md],\n [fxFlex.gt-lg]\n ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2135
- }
2136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
2137
- type: Component,
2138
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogClose, FlexLayoutModule, MatCheckboxModule, FormsModule,
2139
- MatDialogActions, MatButtonModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n @if (dialogData().options) {\r\n <div style=\"padding-bottom: 24px;\">\r\n @for (o of dialogData().options; track o; let i = $index) {\r\n <div>\r\n <mat-checkbox (change)=\"o.selected = $event.checked\" [checked]=\"o.selected === true\" name=\"opt_{{i}}\">\r\n {{o.description}}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n <div fxFlex=\"30\">\r\n @if (dialogData().otherCaption) {\r\n <button mat-flat-button (click)=\"other()\" [mat-dialog-close]=\"true\">{{dialogData().otherCaption}}</button>\r\n }\r\n </div>\r\n <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n <button mat-flat-button (click)=\"ok()\" [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\" (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
2140
- }], ctorParameters: () => [], propDecorators: { choosen: [{ type: i0.Output, args: ["choosen"] }] } });
2141
-
2142
- class InfoDialogComponent {
2143
- constructor() {
2144
- this.dialogService = inject(DialogService);
2145
- this.dialogRef = inject((MatDialogRef));
2146
- /** Dialog configuration with defaults applied at construction time. */
2147
- this.dialogData = signal((() => {
2148
- const raw = inject(MAT_DIALOG_DATA) ?? { message: '' };
2149
- return { title: 'Informazioni', ...raw };
2150
- })(), /* @ts-ignore */
2151
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
2152
- // Schedule auto-dismiss if configured; cancel it when the dialog is destroyed
2153
- this.scheduleDismiss(this.dialogData().dismissAfter);
2154
- inject(DestroyRef).onDestroy(() => clearTimeout(this.dismissTimer));
2155
- }
2156
- /**
2157
- * (Re)schedules the auto-dismiss timer, cancelling any pending one so that
2158
- * an earlier (shorter) timer can never close a newer message.
2159
- * @param dismissAfter - Delay in milliseconds; no-op when falsy.
2160
- */
2161
- scheduleDismiss(dismissAfter) {
2162
- clearTimeout(this.dismissTimer);
2163
- this.dismissTimer = undefined;
2164
- if (dismissAfter) {
2165
- this.dismissTimer = setTimeout(() => this.dialogRef.close(), dismissAfter);
2166
- }
2167
- }
2168
- /**
2169
- * Replaces the dialog data at runtime (e.g. after an async operation resolves).
2170
- * Also re-schedules the auto-dismiss timer if `dismissAfter` is set.
2171
- * @param data - The new dialog data to display.
2172
- */
2173
- setData(data) {
2174
- this.dialogData.set({ title: 'Informazioni', ...data });
2175
- this.scheduleDismiss(data.dismissAfter);
2176
- }
2177
- /**
2178
- * Invokes the optional navigation callback provided by the caller.
2179
- * @param url - The URL to navigate to.
2180
- */
2181
- navigate(url) {
2182
- this.dialogData().onNavigate?.(url);
2183
- }
2184
- /**
2185
- * Copy to clipboard
2186
- */
2187
- async copy() {
2188
- const elem = document.getElementById('info-dialog-content');
2189
- if (!elem)
2190
- return;
2191
- const htmlBlob = new Blob([elem.innerHTML], { type: 'text/html' });
2192
- const textBlob = new Blob([elem.innerText], { type: 'text/plain' });
2193
- try {
2194
- const data = [
2195
- new ClipboardItem({
2196
- 'text/html': htmlBlob,
2197
- 'text/plain': textBlob
2198
- })
2199
- ];
2200
- window.focus(); // the Clipboard API requires the document to be focused
2201
- await navigator.clipboard.write(data);
2202
- this.dialogService.toast('Copiato negli appunti.');
2203
- }
2204
- catch (err) {
2205
- this.dialogService.toast(`Errore copiando negli appunti: ${err}`);
2206
- }
2207
- }
2208
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2209
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: InfoDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill id=\"info-dialog-content\">\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <br>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFill>\r\n <button mat-icon-button (click)=\"copy()\" matTooltip=\"Copia negli appunti\"><mat-icon>content_copy</mat-icon></button>\r\n <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial>{{dialogData().okCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxFlexDirective, selector: "\n [fxFlex],\n [fxFlex.xs],\n [fxFlex.sm],\n [fxFlex.md],\n [fxFlex.lg],\n [fxFlex.xl],\n [fxFlex.lt-sm],\n [fxFlex.lt-md],\n [fxFlex.lt-lg],\n [fxFlex.lt-xl],\n [fxFlex.gt-xs],\n [fxFlex.gt-sm],\n [fxFlex.gt-md],\n [fxFlex.gt-lg]\n ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2210
- }
2211
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: InfoDialogComponent, decorators: [{
2212
- type: Component,
2213
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogActions, FlexLayoutModule,
2214
- MatButtonModule, MatIconModule, MatDialogClose, MatTooltipModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill id=\"info-dialog-content\">\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <br>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFill>\r\n <button mat-icon-button (click)=\"copy()\" matTooltip=\"Copia negli appunti\"><mat-icon>content_copy</mat-icon></button>\r\n <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial>{{dialogData().okCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
2215
- }], ctorParameters: () => [] });
2216
-
2217
- class ToastComponent {
2218
- constructor() {
2219
- /** Emitted when the user clicks the optional action button. */
2220
- this.action = output();
2221
- /** Snack-bar payload with a safe fallback to an empty message when no data is injected. */
2222
- this.dialogData = signal(inject(MAT_SNACK_BAR_DATA) ?? { message: '' }, /* @ts-ignore */
2223
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
2224
- }
2225
- /**
2226
- * Emits the `action` event to notify the caller that the action button was clicked.
2227
- */
2228
- do() {
2229
- this.action.emit();
2230
- }
2231
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2232
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ToastComponent, isStandalone: true, selector: "ng-component", outputs: { action: "action" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n @if (dialogData().icon) {\r\n <div fxFlex='30px' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n <mat-icon>{{dialogData().icon}}</mat-icon>\r\n </div>\r\n }\r\n <div fxFlex='*' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n @if (dialogData().message) {\r\n <span [innerHTML]=\"dialogData().message | safeHtml\"></span>\r\n }\r\n </div>\r\n @if (dialogData().actionCaption) {\r\n <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n <div style=\"padding-left: 20px;\">\r\n <button type=\"button\" mat-flat-button (click)=\"do()\"\r\n [innerHTML]=\"dialogData().actionCaption\"></button>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxFlexDirective, selector: "\n [fxFlex],\n [fxFlex.xs],\n [fxFlex.sm],\n [fxFlex.md],\n [fxFlex.lg],\n [fxFlex.xl],\n [fxFlex.lt-sm],\n [fxFlex.lt-md],\n [fxFlex.lt-lg],\n [fxFlex.lt-xl],\n [fxFlex.gt-xs],\n [fxFlex.gt-sm],\n [fxFlex.gt-md],\n [fxFlex.gt-lg]\n ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexAlignDirective, selector: "\n [fxFlexAlign],\n [fxFlexAlign.xs],\n [fxFlexAlign.sm],\n [fxFlexAlign.md],\n [fxFlexAlign.lg],\n [fxFlexAlign.xl],\n [fxFlexAlign.lt-sm],\n [fxFlexAlign.lt-md],\n [fxFlexAlign.lt-lg],\n [fxFlexAlign.lt-xl],\n [fxFlexAlign.gt-xs],\n [fxFlexAlign.gt-sm],\n [fxFlexAlign.gt-md],\n [fxFlexAlign.gt-lg]\n ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2233
- }
2234
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ToastComponent, decorators: [{
2235
- type: Component,
2236
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n @if (dialogData().icon) {\r\n <div fxFlex='30px' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n <mat-icon>{{dialogData().icon}}</mat-icon>\r\n </div>\r\n }\r\n <div fxFlex='*' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n @if (dialogData().message) {\r\n <span [innerHTML]=\"dialogData().message | safeHtml\"></span>\r\n }\r\n </div>\r\n @if (dialogData().actionCaption) {\r\n <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n <div style=\"padding-left: 20px;\">\r\n <button type=\"button\" mat-flat-button (click)=\"do()\"\r\n [innerHTML]=\"dialogData().actionCaption\"></button>\r\n </div>\r\n </div>\r\n }\r\n</div>" }]
2237
- }], propDecorators: { action: [{ type: i0.Output, args: ["action"] }] } });
2238
-
2239
- class UIService {
2240
- constructor() {
2241
- /**
2242
- * The default Material form-field appearance used across dialogs and forms.
2243
- * Defaults to `'fill'`.
2244
- */
2245
- this.appearance = signal('fill', /* @ts-ignore */
2246
- ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
2247
- }
2248
- /**
2249
- * Updates the global form-field appearance.
2250
- * @param value - The new appearance value. Falls back to `'fill'` when `undefined` is passed.
2251
- */
2252
- setAppearance(value) {
2253
- this.appearance.set(value ?? 'fill');
2254
- }
2255
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UIService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
2256
- static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: UIService }); }
2257
- }
2258
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UIService, decorators: [{
2259
- type: Service
2260
- }] });
2261
-
2262
- var DeleteDialogConfirmMode;
2263
- (function (DeleteDialogConfirmMode) {
2264
- DeleteDialogConfirmMode[DeleteDialogConfirmMode["None"] = 0] = "None";
2265
- DeleteDialogConfirmMode[DeleteDialogConfirmMode["Simple"] = 1] = "Simple";
2266
- DeleteDialogConfirmMode[DeleteDialogConfirmMode["Strong"] = 2] = "Strong";
2267
- })(DeleteDialogConfirmMode || (DeleteDialogConfirmMode = {}));
2268
- class DeleteDialogComponent {
2269
- constructor() {
2270
- /** Emitted when the user makes a choice. Carries the selected result. */
2271
- this.choosen = output();
2272
- this.dialogRef = inject((MatDialogRef));
2273
- /** Dialog configuration with defaults applied at construction time. */
2274
- this.dialogData = signal((() => {
2275
- const raw = inject(MAT_DIALOG_DATA) ?? {};
2276
- return {
2277
- title: 'Attenzione',
2278
- okCaption: 'Si',
2279
- cancelCaption: 'No',
2280
- confirmMode: DeleteDialogConfirmMode.None,
2281
- message: '',
2282
- ...raw,
2283
- };
2284
- })(), /* @ts-ignore */
2285
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
2286
- /**
2287
- * Whether the user has confirmed the deletion.
2288
- * Starts as `true` for all modes except `Simple`, which requires explicit checkbox confirmation.
2289
- */
2290
- this.confirmed = signal(this.dialogData().confirmMode !== DeleteDialogConfirmMode.Simple, /* @ts-ignore */
2291
- ...(ngDevMode ? [{ debugName: "confirmed" }] : /* istanbul ignore next */ []));
2292
- }
2293
- /**
2294
- * Confirms the deletion, emitting `'ok'` and closing the dialog.
2295
- */
2296
- ok() {
2297
- this.choosen.emit({ result: 'ok' });
2298
- this.dialogRef.close();
2299
- }
2300
- /**
2301
- * Cancels the operation, emitting `'cancel'` and closing the dialog.
2302
- */
2303
- cancel() {
2304
- this.choosen.emit({ result: 'cancel' });
2305
- this.dialogRef.close();
2306
- }
2307
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2308
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DeleteDialogComponent, isStandalone: true, selector: "ng-component", outputs: { choosen: "choosen" }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <form name=\"form\" #f=\"ngForm\" novalidate>\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n @if (dialogData().confirmMode === 1) {\r\n <div>\r\n <mat-checkbox (change)=\"confirmed.set($event.checked)\" [checked]=\"confirmed()\">\r\n Confermo la cancellazione\r\n </mat-checkbox>\r\n </div>\r\n } @else if (dialogData().confirmMode === 2) {\r\n <p>Per confermare la cancellazione digita la parola <i><b>elimina</b></i>.</p>\r\n <mat-form-field style=\"width: 200px\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Conferma</mat-label>\r\n <input matInput #field_confirm=\"ngModel\" [(ngModel)]=\"confirmValue\" name=\"field_confirm\" required\r\n [attr.aria-label]=\"'Digita la parola -elimina-'\">\r\n @if (field_confirm.invalid) {\r\n <mat-error>Digita la parola \"elimina\"</mat-error>\r\n }\r\n </mat-form-field>\r\n }\r\n <br>\r\n </div>\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end center\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\"\r\n [disabled]=\"f.form.invalid || (confirmValue && confirmValue.toLowerCase() !== 'elimina') || !confirmed()\"\r\n [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\"\r\n (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxFlexDirective, selector: "\n [fxFlex],\n [fxFlex.xs],\n [fxFlex.sm],\n [fxFlex.md],\n [fxFlex.lg],\n [fxFlex.xl],\n [fxFlex.lt-sm],\n [fxFlex.lt-md],\n [fxFlex.lt-lg],\n [fxFlex.lt-xl],\n [fxFlex.gt-xs],\n [fxFlex.gt-sm],\n [fxFlex.gt-md],\n [fxFlex.gt-lg]\n ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2309
- }
2310
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DeleteDialogComponent, decorators: [{
2311
- type: Component,
2312
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogClose, FlexLayoutModule, MatCheckboxModule, FormsModule,
2313
- MatDialogActions, MatButtonModule, MatFormFieldModule, MatInputModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n <form name=\"form\" #f=\"ngForm\" novalidate>\r\n <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n <div fxFlex=\"*\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n }\r\n </div>\r\n @if (dialogData().details) {\r\n <div class=\"details-box\">\r\n <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n <div class=\"small details\">\r\n <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n </div>\r\n </div>\r\n }\r\n @if (dialogData().confirmMode === 1) {\r\n <div>\r\n <mat-checkbox (change)=\"confirmed.set($event.checked)\" [checked]=\"confirmed()\">\r\n Confermo la cancellazione\r\n </mat-checkbox>\r\n </div>\r\n } @else if (dialogData().confirmMode === 2) {\r\n <p>Per confermare la cancellazione digita la parola <i><b>elimina</b></i>.</p>\r\n <mat-form-field style=\"width: 200px\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Conferma</mat-label>\r\n <input matInput #field_confirm=\"ngModel\" [(ngModel)]=\"confirmValue\" name=\"field_confirm\" required\r\n [attr.aria-label]=\"'Digita la parola -elimina-'\">\r\n @if (field_confirm.invalid) {\r\n <mat-error>Digita la parola \"elimina\"</mat-error>\r\n }\r\n </mat-form-field>\r\n }\r\n <br>\r\n </div>\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end center\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\"\r\n [disabled]=\"f.form.invalid || (confirmValue && confirmValue.toLowerCase() !== 'elimina') || !confirmed()\"\r\n [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\"\r\n (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\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}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
2314
- }], propDecorators: { choosen: [{ type: i0.Output, args: ["choosen"] }] } });
2315
-
2316
- class BusyTimer {
2317
- constructor(dialogService, due = 100, message = 'Operazione in corso...') {
2318
- this.dialogService = dialogService;
2319
- this.subscription = timer(due).pipe(tap(() => this.dialogService.busy(message))).subscribe();
2320
- }
2321
- /** Dispose object */
2322
- clear() {
2323
- this.subscription.unsubscribe();
2324
- this.dialogService.clearBusy();
2325
- }
2326
- }
2327
- class DialogService extends UIService {
2328
- constructor() {
2329
- super();
2330
- /**
2331
- * Shares the SAME `appearance` signal instance as the root `UIService`:
2332
- * `uiService.setAppearance('outline')` is immediately visible here and in
2333
- * every dialog opened by this service.
2334
- */
2335
- this.appearance = inject(UIService).appearance;
2336
- this.dialog = inject(MatDialog);
2337
- this.overlay = inject(Overlay);
2338
- this.snackBar = inject(MatSnackBar);
2339
- this.location = inject(PlatformLocation);
2340
- this.popHistory = [];
2341
- this.popState = true;
2342
- this.poppingState = false;
2343
- // Handle dialog close when back button is clicked
2344
- this.location.onPopState(() => {
2345
- if (!this.poppingState) {
2346
- const count = this.dialog.openDialogs.length;
2347
- if (count > 0) {
2348
- // Disable pop state if needed
2349
- this.popState = false;
2350
- // Close dialog
2351
- this.dialog.openDialogs[count - 1].close();
2352
- }
2353
- }
2354
- else {
2355
- this.poppingState = false;
2356
- }
2357
- });
2358
- }
2359
- /**
2360
- * Removes trailing `#` characters from the current URL (e.g. after a page reload).
2361
- * @param resetPoppingState - When `true`, resets the internal popping-state flag.
2362
- */
2363
- clearUrl(resetPoppingState = false) {
2364
- const url = location.href;
2365
- let l = url.length;
2366
- while (l >= 0 && url[l - 1] === '#')
2367
- l--;
2368
- if (l < url.length)
2369
- history.replaceState({}, '', url.substring(0, l));
2370
- if (resetPoppingState)
2371
- this.poppingState = false;
2372
- }
2373
- /**
2374
- * Close all dialogs
2375
- */
2376
- closeAll() {
2377
- this.dialog.closeAll();
2378
- }
2379
- /**
2380
- * Opens a Material dialog. Returns `null` when not running in a browser.
2381
- * @param component - The component to open as a dialog.
2382
- * @param config - The dialog configuration.
2383
- * @returns The dialog reference, or `null` outside the browser.
2384
- */
2385
- open(component, config) {
2386
- if (!SystemUtils.isBrowser())
2387
- return null;
2388
- this.clearBusy();
2389
- return this.openDialog(component, config);
2390
- }
2391
- /**
2392
- * Internal helper that wraps `MatDialog.open`, subscribes to lifecycle hooks
2393
- * and manages browser-history push/pop entries.
2394
- * @param component - The component to open.
2395
- * @param config - The dialog configuration.
2396
- * @returns The dialog reference.
2397
- */
2398
- openDialog(component, config) {
2399
- // We will take care of navigation
2400
- config.closeOnNavigation = false;
2401
- const d = this.dialog.open(component, config);
2402
- d.afterOpened().pipe(first()).subscribe(() => this.pushDialog(d.id));
2403
- d.beforeClosed().pipe(first()).subscribe(() => this.popDialog(d.id));
2404
- d.afterClosed().pipe(first()).subscribe(() => {
2405
- // Final cleanup of middle objects
2406
- this.errorDialogRef = undefined;
2407
- });
2408
- return d;
2409
- }
2410
- /**
2411
- * Returns the element height including margins
2412
- * @param element - element
2413
- * @returns the height
2414
- */
2415
- outerHeight(element) {
2416
- if (!SystemUtils.isBrowser())
2417
- return 0;
2418
- const height = element.offsetHeight;
2419
- const style = window.getComputedStyle(element);
2420
- return ['top', 'bottom']
2421
- .map(side => parseInt(style.getPropertyValue(`margin-${side}`), 10))
2422
- .reduce((total, margin) => total + margin, height);
2423
- }
2424
- /**
2425
- * Return current dialog height
2426
- */
2427
- getCurrentDialogHeight() {
2428
- if (!SystemUtils.isBrowser())
2429
- return 0;
2430
- const count = this.popHistory.length;
2431
- if (count > 0) {
2432
- let id = this.popHistory[count - 1].id;
2433
- let elem = document.getElementById(id);
2434
- if (elem && elem.clientHeight > 0)
2435
- return elem.clientHeight;
2436
- }
2437
- return 0;
2438
- }
2439
- /**
2440
- * Returns the scrollable content area height for the topmost open dialog.
2441
- * @param fixedPartsClassName - CSS class names of fixed (non-scrollable) elements whose heights are subtracted.
2442
- * @param minimalHeight - Minimum height floor to use when the dialog height is smaller.
2443
- * @returns The computed scrollable height in pixels.
2444
- */
2445
- getCurrentDialogScrollableHeight(fixedPartsClassName, minimalHeight) {
2446
- if (!SystemUtils.isBrowser())
2447
- return 0;
2448
- let h = Math.max(this.getCurrentDialogHeight(), minimalHeight);
2449
- if (fixedPartsClassName) {
2450
- fixedPartsClassName.forEach(n => {
2451
- const elems = document.getElementsByClassName(n);
2452
- if (elems) {
2453
- for (let i = 0; i < elems.length; i++) {
2454
- h -= this.outerHeight(elems[i]);
2455
- }
2456
- }
2457
- });
2458
- }
2459
- return h;
2460
- }
2461
- /**
2462
- * Push a dialog into the browser history
2463
- */
2464
- pushDialog(id) {
2465
- if (!SystemUtils.isBrowser())
2466
- return;
2467
- const index = history.length;
2468
- history.pushState({ index }, '', location.href + '#');
2469
- this.popHistory.push({ id, value: index });
2470
- }
2471
- /**
2472
- * Pop a dialog from the history
2473
- */
2474
- popDialog(id) {
2475
- if (!SystemUtils.isBrowser())
2476
- return;
2477
- if (this.popState) {
2478
- this.poppingState = true;
2479
- let popped = 1;
2480
- if (id) {
2481
- const p = this.popHistory.findIndex(n => n.id === id);
2482
- if (p !== -1) {
2483
- popped = this.popHistory[p].value - (history.state?.index ?? 0);
2484
- popped = popped ? popped + 1 : 1;
2485
- this.popHistory.splice(p, 1);
2486
- }
2487
- const url = location.href;
2488
- let l = url.length;
2489
- while (l >= 0 && url[l - 1] === '#' && popped > 0) {
2490
- l--;
2491
- popped--;
2492
- }
2493
- if (l < url.length)
2494
- history.replaceState({}, '', url.substring(0, l));
2495
- }
2496
- }
2497
- this.popState = true;
2498
- }
2499
- /**
2500
- * Creates the CDK overlay used to host the busy indicator.
2501
- * @returns The new `OverlayRef`.
2502
- */
2503
- createBusy() {
2504
- return this.overlay.create({
2505
- hasBackdrop: true,
2506
- backdropClass: 'busy-backdrop',
2507
- positionStrategy: this.overlay.position()
2508
- .global()
2509
- .centerHorizontally()
2510
- .centerVertically()
2511
- });
2512
- }
2513
- /**
2514
- * Clears the busy overlay after a short grace delay (lets very fast
2515
- * operations avoid a visible flicker). The pending detach is cancelled by
2516
- * any new `setBusy()` call, so it can never kill a freshly opened overlay.
2517
- */
2518
- clearBusy() {
2519
- clearTimeout(this.clearBusyTimer);
2520
- this.clearBusyTimer = setTimeout(() => {
2521
- this.clearBusyTimer = undefined;
2522
- this.busyDialogRef?.detach();
2523
- this.busyComponentRef?.destroy();
2524
- this.busyComponentRef = undefined;
2525
- }, 500);
2526
- }
2527
- /**
2528
- * Shows or updates the busy overlay.
2529
- * @param message - Text to display inside the overlay.
2530
- * @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
2531
- * @param progressMode - Progress bar mode. Defaults to `'indeterminate'`.
2532
- * @param type - Visual style of the overlay. Defaults to `'bar'`.
2533
- * @param action - Optional observable; the overlay is dismissed when it emits.
2534
- * @returns `true` if a new overlay was created, `false` if an existing one was updated.
2535
- */
2536
- setBusy(message, progress = -1, progressMode = 'indeterminate', type = 'bar', action) {
2537
- // Cancel any pending clearBusy() detach: it must never kill this overlay
2538
- clearTimeout(this.clearBusyTimer);
2539
- this.clearBusyTimer = undefined;
2540
- const exists = this.busyDialogRef?.hasAttached();
2541
- if (exists) {
2542
- this.busyComponentRef?.instance.set(message, progress, progressMode, type); // update existing
2543
- }
2544
- else {
2545
- // Open new
2546
- if (!this.busyDialogRef) {
2547
- this.busyDialogRef = this.createBusy();
2548
- }
2549
- this.busyComponentRef = this.busyDialogRef.attach(new ComponentPortal(BusyDialogComponent));
2550
- this.busyComponentRef.instance.set(message, progress, progressMode, type);
2551
- if (action) {
2552
- action
2553
- .pipe(first())
2554
- .subscribe(() => {
2555
- this.clearBusy();
2556
- });
2557
- }
2558
- }
2559
- return !exists;
2560
- }
2561
- /**
2562
- * Shows or updates the busy overlay using the progress-bar style.
2563
- * @param message - Text to display inside the overlay.
2564
- * @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
2565
- * @param progressMode - Progress bar mode. Defaults to `'indeterminate'`.
2566
- * @param action - Optional observable; the overlay is dismissed when it emits.
2567
- * @returns `true` if a new overlay was created.
2568
- */
2569
- busy(message, progress = -1, progressMode = 'indeterminate', action) {
2570
- return this.setBusy(message, progress, progressMode, 'bar', action);
2571
- }
2572
- /**
2573
- * Returns a `BusyTimer` that shows the busy overlay after a debounce delay.
2574
- * @param message - Text to display. Defaults to `'Operazione in corso...'`.
2575
- * @param due - Delay in milliseconds before the overlay appears. Defaults to `100`.
2576
- * @returns A `BusyTimer` that must be disposed with `clear()` when the operation ends.
2577
- */
2578
- busyTimer(message = "Operazione in corso...", due = 100) {
2579
- return new BusyTimer(this, due, message);
2580
- }
2581
- /**
2582
- * Shows or updates the busy overlay using the hourglass style.
2583
- * @param message - Text to display inside the overlay.
2584
- * @param action - Optional observable; the overlay is dismissed when it emits.
2585
- * @returns `true` if a new overlay was created.
2586
- */
2587
- busyHourglass(message, action) {
2588
- return this.setBusy(message, -1, 'indeterminate', 'hourglass', action);
2589
- }
2590
- /**
2591
- * Shows or updates the busy overlay using the spinner style.
2592
- * @param message - Text to display inside the overlay.
2593
- * @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
2594
- * @param progressMode - Progress mode. Defaults to `'indeterminate'`.
2595
- * @param action - Optional observable; the overlay is dismissed when it emits.
2596
- * @returns `true` if a new overlay was created.
2597
- */
2598
- busySpinner(message, progress = -1, progressMode = 'indeterminate', action) {
2599
- return this.setBusy(message, progress, progressMode, 'spinner', action);
2600
- }
2601
- /**
2602
- * Shows a minimal wait spinner overlay.
2603
- * @param action - Optional observable; the overlay is dismissed when it emits.
2604
- * @returns `true` if a new overlay was created.
2605
- */
2606
- wait(action) {
2607
- return this.setBusy('', -1, 'indeterminate', 'wait', action);
2608
- }
2609
- /**
2610
- * Opens an informational dialog.
2611
- * @param message - HTML message to display.
2612
- * @param title - Dialog title. Defaults to `'Informazioni'`.
2613
- * @param okCaption - Confirmation button label. Defaults to `'Ok'`.
2614
- * @param width - Maximum dialog width in pixels. Defaults to `500`.
2615
- * @param dismissAfter - Auto-close delay in milliseconds (optional).
2616
- * @param details - Optional secondary details text.
2617
- * @param onNavigate - Optional navigation callback invoked when the user clicks a link.
2618
- * @returns The dialog reference, or `null` outside the browser.
2619
- */
2620
- info(message, title = 'Informazioni', okCaption = 'Ok', width = 500, dismissAfter, details, onNavigate) {
2621
- this.clearBusy();
2622
- return this.open(InfoDialogComponent, {
2623
- ariaLabel: 'informazioni',
2624
- autoFocus: 'dialog',
2625
- restoreFocus: false,
2626
- data: {
2627
- message,
2628
- title,
2629
- okCaption,
2630
- dismissAfter,
2631
- details,
2632
- onNavigate,
2633
- appearance: this.appearance()
2634
- },
2635
- closeOnNavigation: false,
2636
- minWidth: '375px',
2637
- maxWidth: `${width}px`,
2638
- width: '100%'
2639
- });
2640
- }
2641
- /**
2642
- * Opens an error dialog. If one is already open, its content is updated in place.
2643
- * @param message - HTML error message to display.
2644
- * @param log - Optional technical log / stack trace shown in the details panel.
2645
- * @param title - Dialog title. Defaults to `'Errore'`.
2646
- * @param okCaption - Confirmation button label. Defaults to `'Ok'`.
2647
- * @param width - Maximum dialog width in pixels. Defaults to `500`.
2648
- * @param dismissAfter - Auto-close delay in milliseconds (optional).
2649
- * @returns The dialog reference, or `null` outside the browser.
2650
- */
2651
- error(message, log, title = 'Errore', okCaption = 'Ok', width = 500, dismissAfter) {
2652
- this.clearBusy();
2653
- if (this.errorDialogRef) {
2654
- // Just change current error
2655
- this.errorDialogRef.componentInstance.setData({
2656
- message,
2657
- title,
2658
- details: log,
2659
- okCaption,
2660
- dismissAfter
2661
- });
2662
- return this.errorDialogRef;
2663
- }
2664
- const ref = this.open(InfoDialogComponent, {
2665
- ariaLabel: 'errore',
2666
- autoFocus: 'dialog',
2667
- restoreFocus: false,
2668
- data: {
2669
- message,
2670
- title,
2671
- details: log,
2672
- okCaption,
2673
- dismissAfter,
2674
- appearance: this.appearance()
2675
- },
2676
- closeOnNavigation: false,
2677
- minWidth: '375px',
2678
- maxWidth: `${width}px`,
2679
- width: '100%'
2680
- });
2681
- this.errorDialogRef = ref ?? undefined;
2682
- return ref;
2683
- }
2684
- /**
2685
- * Shows a snack-bar toast notification.
2686
- * @param message - HTML message to display.
2687
- * @param duration - Visible duration in milliseconds. Defaults to `2000`.
2688
- * @param icon - Material icon name shown beside the message. Defaults to `'check'`.
2689
- * @param actionCaption - Optional label for the action button.
2690
- * @returns The snack-bar reference.
2691
- */
2692
- toast(message, duration = 2000, icon = 'check', actionCaption) {
2693
- this.clearBusy();
2694
- if (duration === -1)
2695
- duration = 2000; // default
2696
- const toastRef = this.snackBar.openFromComponent(ToastComponent, {
2697
- duration,
2698
- data: { message, icon, actionCaption }
2699
- });
2700
- toastRef.instance.action.subscribe(() => toastRef.dismiss());
2701
- return toastRef;
2702
- }
2703
- /**
2704
- * Opens a confirmation dialog.
2705
- * @param message - HTML message to display.
2706
- * @param title - Dialog title. Defaults to `'Conferma'`.
2707
- * @param okCaption - Primary action button label. Defaults to `'Si'`.
2708
- * @param cancelCaption - Cancel button label. Defaults to `'No'`.
2709
- * @param otherCaption - Optional tertiary action button label.
2710
- * @param options - Optional list of checkbox options shown to the user.
2711
- * @param width - Maximum dialog width in pixels. Defaults to `500`.
2712
- * @param details - Optional secondary details text.
2713
- * @returns The dialog reference, or `null` outside the browser.
2714
- */
2715
- confirm(message, title = 'Conferma', okCaption = 'Si', cancelCaption = 'No', otherCaption, options, width = 500, details) {
2716
- return this.open(ConfirmDialogComponent, {
2717
- ariaLabel: 'conferma',
2718
- autoFocus: 'dialog',
2719
- restoreFocus: false,
2720
- data: {
2721
- message,
2722
- title,
2723
- okCaption,
2724
- cancelCaption,
2725
- otherCaption,
2726
- options,
2727
- details,
2728
- appearance: this.appearance()
2729
- },
2730
- closeOnNavigation: false,
2731
- disableClose: true,
2732
- minWidth: '375px',
2733
- maxWidth: `${width}px`,
2734
- width: '100%'
2735
- });
2736
- }
2737
- /**
2738
- * Opens a deletion-confirmation dialog.
2739
- * @param message - HTML message to display.
2740
- * @param title - Dialog title. Defaults to `'Attenzione'`.
2741
- * @param confirmMode - Confirmation mode (none / checkbox / type-to-confirm). Defaults to `None`.
2742
- * @param okCaption - Primary action button label. Defaults to `'Si'`.
2743
- * @param cancelCaption - Cancel button label. Defaults to `'No'`.
2744
- * @param width - Maximum dialog width in pixels. Defaults to `500`.
2745
- * @param details - Optional secondary details text.
2746
- * @returns The dialog reference, or `null` outside the browser.
2747
- */
2748
- delete(message, title = 'Attenzione', confirmMode = DeleteDialogConfirmMode.None, okCaption = 'Si', cancelCaption = 'No', width = 500, details) {
2749
- return this.open(DeleteDialogComponent, {
2750
- ariaLabel: 'attenzione',
2751
- autoFocus: 'dialog',
2752
- restoreFocus: false,
2753
- data: {
2754
- message,
2755
- title,
2756
- confirmMode,
2757
- okCaption,
2758
- cancelCaption,
2759
- details,
2760
- appearance: this.appearance()
2761
- },
2762
- closeOnNavigation: false,
2763
- disableClose: true,
2764
- minWidth: '375px',
2765
- maxWidth: `${width}px`,
2766
- width: '100%'
2767
- });
2768
- }
2769
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
2770
- static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: DialogService }); }
2771
- }
2772
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DialogService, decorators: [{
2773
- type: Service
2774
- }], ctorParameters: () => [] });
2775
-
2776
- const DEFAULT_STRENGTH = { score: 0, label: '', color: '', suggestions: [], isValid: false };
2777
- /**
2778
- * Displays a password-strength indicator for the provided password string.
2779
- * Uses `SystemUtils.calculatePasswordStrength` to derive the score and label.
2780
- */
2781
- class PasswordStrengthComponent {
2782
- constructor() {
2783
- /** The password to evaluate. An empty string renders the default (score 0) state. */
2784
- this.password = input('', /* @ts-ignore */
2785
- ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
2786
- /**
2787
- * Computed strength result for the current password.
2788
- * Falls back to `DEFAULT_STRENGTH` when the password is empty.
2789
- */
2790
- this.strength = computed(() => {
2791
- const pwd = this.password();
2792
- return pwd ? SystemUtils.calculatePasswordStrength(pwd) : DEFAULT_STRENGTH;
2793
- }, /* @ts-ignore */
2794
- ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
2795
- /**
2796
- * CSS class applied to the label element based on the numeric score (1–6 bands).
2797
- * Scores ≤ 2 → `'score-2'`, ≤ 3 → `'score-3'`, etc.
2798
- */
2799
- this.scoreClass = computed(() => {
2800
- const score = this.strength().score;
2801
- if (score <= 2)
2802
- return 'score-2';
2803
- if (score <= 3)
2804
- return 'score-3';
2805
- if (score <= 4)
2806
- return 'score-4';
2807
- if (score <= 5)
2808
- return 'score-5';
2809
- return 'score-6';
2810
- }, /* @ts-ignore */
2811
- ...(ngDevMode ? [{ debugName: "scoreClass" }] : /* istanbul ignore next */ []));
2812
- }
2813
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2814
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: PasswordStrengthComponent, isStandalone: true, selector: "password-strength", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wide x-small bold\" style=\"white-space: nowrap; padding-top:4px\" [matTooltip]=\"strength().suggestions?.join('\\n ')\">\r\n <span [class]=\"scoreClass()\">{{strength().label}}</span>\r\n</div>", styles: [".score-2{color:#f44336!important;font-weight:700}.score-3{color:#ff9800!important;font-weight:700}.score-4{color:#ffc107!important;font-weight:700}.score-5{color:#8bc34a!important;font-weight:700}.score-6{color:#4caf50!important;font-weight:700}.x-small{font-size:x-small}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2815
- }
2816
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
2817
- type: Component,
2818
- args: [{ selector: 'password-strength', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltipModule], template: "<div class=\"wide x-small bold\" style=\"white-space: nowrap; padding-top:4px\" [matTooltip]=\"strength().suggestions?.join('\\n ')\">\r\n <span [class]=\"scoreClass()\">{{strength().label}}</span>\r\n</div>", styles: [".score-2{color:#f44336!important;font-weight:700}.score-3{color:#ff9800!important;font-weight:700}.score-4{color:#ffc107!important;font-weight:700}.score-5{color:#8bc34a!important;font-weight:700}.score-6{color:#4caf50!important;font-weight:700}.x-small{font-size:x-small}\n"] }]
2819
- }], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }] } });
2820
-
2821
- class OtpInputComponent {
2822
- constructor() {
2823
- /** Signal-based query for all individual OTP digit input elements. */
2824
- this.otpFields = viewChildren('otpField', /* @ts-ignore */
2825
- ...(ngDevMode ? [{ debugName: "otpFields" }] : /* istanbul ignore next */ []));
2826
- /** `true` when every digit slot contains a valid single decimal digit. */
2827
- this.isValid = computed(() => this.otpArray().every(d => /^\d$/.test(d)), /* @ts-ignore */
2828
- ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
2829
- /** Array of per-digit values backing the OTP display. */
2830
- this.otpArray = signal(Array(6).fill(''), /* @ts-ignore */
2831
- ...(ngDevMode ? [{ debugName: "otpArray" }] : /* istanbul ignore next */ []));
2832
- /** Whether the control is currently disabled. */
2833
- this.disabled = signal(false, /* @ts-ignore */
2834
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
2835
- this.onChange = () => { };
2836
- this.onTouched = () => { };
2837
- }
2838
- // ── ControlValueAccessor ───────────────────────────────────────────────────
2839
- /**
2840
- * Writes a new value into the control from the model.
2841
- * @param value - A string of up to 6 digits to pre-fill the OTP fields.
2842
- */
2843
- writeValue(value) {
2844
- const arr = Array(6).fill('');
2845
- if (value) {
2846
- value.split('').forEach((c, i) => {
2847
- if (i < 6)
2848
- arr[i] = c;
2849
- });
2850
- }
2851
- this.otpArray.set(arr);
2852
- }
2853
- /**
2854
- * Registers the callback invoked when the control value changes.
2855
- * @param fn - The callback function.
2856
- */
2857
- registerOnChange(fn) {
2858
- this.onChange = fn;
2859
- }
2860
- /**
2861
- * Registers the callback invoked when the control is touched.
2862
- * @param fn - The callback function.
2863
- */
2864
- registerOnTouched(fn) {
2865
- this.onTouched = fn;
2866
- }
2867
- /**
2868
- * Enables or disables the control.
2869
- * @param isDisabled - `true` to disable all OTP inputs.
2870
- */
2871
- setDisabledState(isDisabled) {
2872
- this.disabled.set(isDisabled);
2873
- }
2874
- // ── Validator ──────────────────────────────────────────────────────────────
2875
- /**
2876
- * Validates the OTP value: an empty code is left to `required`, while a
2877
- * PARTIAL code (e.g. "12") is reported as invalid. Without this, the joined
2878
- * value "12" was a non-empty string and `required` let the form submit
2879
- * with an incomplete OTP.
2880
- * @param control - The form control bound to this component.
2881
- * @returns `null` when empty or complete (6 digits), `{ otp: true }` otherwise.
2882
- */
2883
- validate(control) {
2884
- const value = control.value ?? '';
2885
- if (value.length === 0)
2886
- return null; // let `required` handle emptiness
2887
- return /^\d{6}$/.test(value) ? null : { otp: true };
2888
- }
2889
- /**
2890
- * Marks the control as touched when an OTP field loses focus.
2891
- */
2892
- onBlur() {
2893
- this.onTouched();
2894
- }
2895
- // ── Event handlers ─────────────────────────────────────────────────────────
2896
- /**
2897
- * Blocks non-digit characters before they are inserted.
2898
- * @param event - The `beforeinput` event from the input element.
2899
- */
2900
- onBeforeInput(event) {
2901
- if (event.data && !/^\d$/.test(event.data)) {
2902
- event.preventDefault();
2903
- }
2904
- }
2905
- /**
2906
- * Handles digit input, sanitizes it, syncs the DOM, updates the OTP array, and advances focus.
2907
- * @param event - The `input` event from the digit field.
2908
- * @param index - Zero-based index of the field that received input.
2909
- */
2910
- onInput(event, index) {
2911
- const input = event.target;
2912
- const val = input.value.replace(/\D/g, '').slice(-1);
2913
- // Force-sync the DOM: [value] won't rewrite it when the model value is unchanged.
2914
- input.value = val;
2915
- const arr = [...this.otpArray()];
2916
- arr[index] = val;
2917
- this.otpArray.set(arr);
2918
- this.updateModel();
2919
- if (val && index < 5) {
2920
- this.focusField(index + 1);
2921
- }
2922
- }
2923
- /**
2924
- * Handles the Backspace key by moving focus to the previous field when the current one is empty.
2925
- * @param event - The `keydown` event.
2926
- * @param index - Zero-based index of the field that received the keydown.
2927
- */
2928
- onKeyDown(event, index) {
2929
- if (event.key === 'Backspace' && !this.otpArray()[index] && index > 0) {
2930
- this.focusField(index - 1);
2931
- }
2932
- }
2933
- /**
2934
- * Handles paste events by extracting up to 6 digits and distributing them across the OTP fields.
2935
- * @param event - The `ClipboardEvent` from the paste action.
2936
- */
2937
- onPaste(event) {
2938
- event.preventDefault();
2939
- const pasted = event.clipboardData?.getData('text') ?? '';
2940
- const digits = pasted.replace(/\D/g, '').slice(0, 6).split('');
2941
- if (digits.length > 0) {
2942
- const arr = Array(6).fill('');
2943
- digits.forEach((d, i) => (arr[i] = d));
2944
- this.otpArray.set(arr);
2945
- this.updateModel();
2946
- this.focusField(Math.min(digits.length, 5));
2947
- }
2948
- }
2949
- // ── Public API ─────────────────────────────────────────────────────────────
2950
- /**
2951
- * Clears every digit field, propagates the empty value to the form model and
2952
- * moves focus back to the first field. Does not mark the control as touched,
2953
- * so no validation error is shown right after the reset.
2954
- */
2955
- clear() {
2956
- this.otpArray.set(Array(6).fill(''));
2957
- // Force-sync the DOM: [value] won't rewrite fields whose bound value is unchanged.
2958
- this.otpFields().forEach(f => (f.nativeElement.value = ''));
2959
- this.onChange('');
2960
- this.focusField(0);
2961
- }
2962
- /**
2963
- * Moves focus to the OTP field at the given index.
2964
- * @param index - Zero-based index of the target field.
2965
- */
2966
- focusField(index) {
2967
- const field = this.otpFields()[index];
2968
- field?.nativeElement.focus();
2969
- field?.nativeElement.select();
2970
- }
2971
- /**
2972
- * Notifies the form model of the current OTP value and marks the control as touched.
2973
- */
2974
- updateModel() {
2975
- const code = this.otpArray().join('');
2976
- this.onChange(code);
2977
- this.onTouched();
2978
- }
2979
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2980
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: OtpInputComponent, isStandalone: true, selector: "otp-input", providers: [
2981
- {
2982
- provide: NG_VALUE_ACCESSOR,
2983
- useExisting: forwardRef(() => OtpInputComponent),
2984
- multi: true,
2985
- },
2986
- {
2987
- provide: NG_VALIDATORS,
2988
- useExisting: forwardRef(() => OtpInputComponent),
2989
- multi: true,
2990
- },
2991
- ], viewQueries: [{ propertyName: "otpFields", predicate: ["otpField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"otp-container\">\n @for (digit of otpArray(); track $index) {\n <input\n #otpField\n type=\"text\"\n maxlength=\"1\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n class=\"otp-box\"\n [value]=\"digit\"\n (beforeinput)=\"onBeforeInput($event)\"\n (input)=\"onInput($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n (blur)=\"onBlur()\"\n (paste)=\"onPaste($event)\"\n [disabled]=\"disabled()\"\n required\n />\n }\n</div>\n\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.otp-box:-webkit-autofill,.otp-box:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.otp-box:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset,0 0 3px #007bff!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2992
- }
2993
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OtpInputComponent, decorators: [{
2994
- type: Component,
2995
- args: [{ selector: 'otp-input', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2996
- {
2997
- provide: NG_VALUE_ACCESSOR,
2998
- useExisting: forwardRef(() => OtpInputComponent),
2999
- multi: true,
3000
- },
3001
- {
3002
- provide: NG_VALIDATORS,
3003
- useExisting: forwardRef(() => OtpInputComponent),
3004
- multi: true,
3005
- },
3006
- ], template: "<div class=\"otp-container\">\n @for (digit of otpArray(); track $index) {\n <input\n #otpField\n type=\"text\"\n maxlength=\"1\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n class=\"otp-box\"\n [value]=\"digit\"\n (beforeinput)=\"onBeforeInput($event)\"\n (input)=\"onInput($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n (blur)=\"onBlur()\"\n (paste)=\"onPaste($event)\"\n [disabled]=\"disabled()\"\n required\n />\n }\n</div>\n\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.otp-box:-webkit-autofill,.otp-box:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.otp-box:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset,0 0 3px #007bff!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"] }]
3007
- }], propDecorators: { otpFields: [{ type: i0.ViewChildren, args: ['otpField', { isSignal: true }] }] } });
3008
-
3009
- class CredentialsDialogComponent {
3010
- constructor() {
3011
- /** Emitted when the user submits the form. Carries the entered credentials. */
3012
- this.done = output();
3013
- /** Emitted when the user requests a password-recovery flow. */
3014
- this.recoveringPassword = output();
3015
- /** Dialog configuration with defaults applied at construction time. */
3016
- this.dialogData = signal((() => {
3017
- const raw = inject(MAT_DIALOG_DATA) ?? {};
3018
- const data = {
3019
- appearance: 'fill',
3020
- title: 'Informazioni',
3021
- okCaption: 'Salva',
3022
- mode: 'email',
3023
- ...raw,
3024
- };
3025
- data.appearance ??= 'fill';
3026
- data.title ??= 'Informazioni';
3027
- data.okCaption ??= 'Salva';
3028
- data.mode ??= 'email';
3029
- if (data.mode === 'otp' && !data.message) {
3030
- data.message = '<div class="small">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per email<br><span class="x-small">(controlla anche la posta indesiderata)</span>.</div>';
3031
- }
3032
- return data;
3033
- })(), /* @ts-ignore */
3034
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
3035
- /** Current form model, pre-filled with the user name from dialog data when provided. */
3036
- this.item = {
3037
- user: inject(MAT_DIALOG_DATA)?.user,
3038
- };
3039
- /** Whether the password field is currently shown as plain text. */
3040
- this.showPassword = signal(false, /* @ts-ignore */
3041
- ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
3042
- }
3043
- /**
3044
- * Switches the input mode of the dialog at runtime (e.g. from login to OTP).
3045
- * Intended to be called from outside via the dialog component reference.
3046
- * @param mode - The new input mode (`'email'`, `'user'`, or `'otp'`).
3047
- * @param message - Optional new message to display above the form.
3048
- */
3049
- changeMode(mode, message) {
3050
- this.dialogData.update(d => ({
3051
- ...d,
3052
- mode,
3053
- message: message ?? d.message,
3054
- }));
3055
- }
3056
- /**
3057
- * Emits the current form result and closes the dialog.
3058
- */
3059
- ok() {
3060
- this.done.emit(this.item);
3061
- }
3062
- /**
3063
- * Emits the current form result for the password-recovery flow and optionally
3064
- * opens the recovery URL in a new tab.
3065
- */
3066
- recoverPassword() {
3067
- this.recoveringPassword.emit(this.item);
3068
- const url = this.dialogData().recoverPasswordUrl;
3069
- if (url) {
3070
- window.open(url, '_blank');
3071
- }
3072
- }
3073
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CredentialsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3074
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: CredentialsDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", recoveringPassword: "recoveringPassword" }, ngImport: i0, 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 [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n }\r\n <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n @if(dialogData().mode !== 'otp') {\r\n @if (dialogData().mode === 'email') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Email</mat-label>\r\n <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\r\n [attr.aria-label]=\"'Email'\">\r\n @if (email.invalid) {\r\n <mat-error>Email non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n } @else if (dialogData().mode === 'user') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Utente</mat-label>\r\n <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\r\n @if (user.invalid) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n </mat-form-field>\r\n }\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>La tua password abilitata</mat-label>\r\n <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\r\n [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\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 (click)=\"showPassword.set(!showPassword())\">\r\n <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n </button>\r\n <mat-hint>Attento a maiuscole e minuscole</mat-hint>\r\n @if (password.invalid) {\r\n <mat-error>Password non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n @if (dialogData().remember || dialogData().recoverPassword) {\r\n <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\r\n <div>\r\n @if (dialogData().remember) {\r\n <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\r\n }\r\n </div>\r\n <div fxLayoutAlign=\"end\">\r\n @if (dialogData().recoverPassword) {\r\n <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\r\n >Non riesco ad accedere</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\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"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexAlignDirective, selector: "\n [fxFlexAlign],\n [fxFlexAlign.xs],\n [fxFlexAlign.sm],\n [fxFlexAlign.md],\n [fxFlexAlign.lg],\n [fxFlexAlign.xl],\n [fxFlexAlign.lt-sm],\n [fxFlexAlign.lt-md],\n [fxFlexAlign.lt-lg],\n [fxFlexAlign.lt-xl],\n [fxFlexAlign.gt-xs],\n [fxFlexAlign.gt-sm],\n [fxFlexAlign.gt-md],\n [fxFlexAlign.gt-lg]\n ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3075
- }
3076
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CredentialsDialogComponent, decorators: [{
3077
- type: Component,
3078
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
3079
- MatDialogTitle,
3080
- MatDialogContent,
3081
- FormsModule,
3082
- MatFormFieldModule,
3083
- MatInputModule,
3084
- MatIconModule,
3085
- MatCheckboxModule,
3086
- MatDialogActions,
3087
- FlexLayoutModule,
3088
- MatButtonModule,
3089
- MatDialogClose,
3090
- PasswordStrengthComponent,
3091
- OtpInputComponent,
3092
- SafeHtmlPipe,
3093
- ], 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 [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n @if (dialogData().message) {\r\n <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n }\r\n <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n @if(dialogData().mode !== 'otp') {\r\n @if (dialogData().mode === 'email') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Email</mat-label>\r\n <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\r\n [attr.aria-label]=\"'Email'\">\r\n @if (email.invalid) {\r\n <mat-error>Email non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n } @else if (dialogData().mode === 'user') {\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Utente</mat-label>\r\n <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\r\n @if (user.invalid) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n </mat-form-field>\r\n }\r\n <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>La tua password abilitata</mat-label>\r\n <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\r\n [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\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 (click)=\"showPassword.set(!showPassword())\">\r\n <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n </button>\r\n <mat-hint>Attento a maiuscole e minuscole</mat-hint>\r\n @if (password.invalid) {\r\n <mat-error>Password non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n @if (dialogData().remember || dialogData().recoverPassword) {\r\n <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\r\n <div>\r\n @if (dialogData().remember) {\r\n <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\r\n }\r\n </div>\r\n <div fxLayoutAlign=\"end\">\r\n @if (dialogData().recoverPassword) {\r\n <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\r\n >Non riesco ad accedere</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\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"] }]
3094
- }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }], recoveringPassword: [{ type: i0.Output, args: ["recoveringPassword"] }] } });
3095
-
3096
- class RecoverPasswordDialogComponent {
3097
- constructor() {
3098
- /** Emitted when the user submits the recovery request. Carries the entered email and recaptcha state. */
3099
- this.done = output();
3100
- /** Dialog configuration with defaults applied at construction time. */
3101
- this.dialogData = signal({
3102
- appearance: 'fill',
3103
- ...(inject(MAT_DIALOG_DATA) ?? {}),
3104
- }, /* @ts-ignore */
3105
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
3106
- /** Current form model bound to the template inputs. */
3107
- this.item = {
3108
- email: '',
3109
- recaptcha: false,
3110
- };
3111
- }
3112
- /**
3113
- * Emits the current form result to trigger the password-recovery flow.
3114
- */
3115
- ok() {
3116
- this.done.emit(this.item);
3117
- }
3118
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RecoverPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3119
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RecoverPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, 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>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n\r\n <b>1. Ho dimenticato la password</b>\r\n <p>\r\n Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n aziendali (non collegate ad un email).</p>\r\n <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Email con cui ti sei registrato</mat-label>\r\n <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n maxlength=\"200\" />\r\n @if (email.invalid) {\r\n <mat-error>Email non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n <button type=\"button\" mat-flat-button (click)=\"ok()\" [disabled]=\"f.form.invalid\"\r\n aria-label=\"Recupera password\">Recupera password</button>\r\n </div>\r\n </form>\r\n <p></p>\r\n <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n <p>\r\n E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n </p>\r\n <p></p>\r\n <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n <p>\r\n Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n ARS Edizioni Informatiche.\r\n </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\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}}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3120
- }
3121
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RecoverPasswordDialogComponent, decorators: [{
3122
- type: Component,
3123
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
3124
- MatDialogTitle,
3125
- MatDialogContent,
3126
- FormsModule,
3127
- MatFormFieldModule,
3128
- MatInputModule,
3129
- MatButtonModule,
3130
- MatDialogActions,
3131
- FlexLayoutModule,
3132
- MatDialogClose,
3133
- ], 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>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n\r\n <b>1. Ho dimenticato la password</b>\r\n <p>\r\n Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n aziendali (non collegate ad un email).</p>\r\n <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n <mat-label>Email con cui ti sei registrato</mat-label>\r\n <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n maxlength=\"200\" />\r\n @if (email.invalid) {\r\n <mat-error>Email non valida.</mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n <button type=\"button\" mat-flat-button (click)=\"ok()\" [disabled]=\"f.form.invalid\"\r\n aria-label=\"Recupera password\">Recupera password</button>\r\n </div>\r\n </form>\r\n <p></p>\r\n <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n <p>\r\n E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n </p>\r\n <p></p>\r\n <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n <p>\r\n Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n ARS Edizioni Informatiche.\r\n </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\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}}.dialog-content{padding:0 24px 24px!important}\n"] }]
3134
- }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
3135
-
3136
- class ResetPasswordDialogComponent {
3137
- constructor() {
3138
- /** Emitted when the user submits the new password. Carries the entered password data. */
3139
- this.done = output();
3140
- this.dialogService = inject(DialogService);
3141
- this.dialogRef = inject((MatDialogRef));
3142
- /** Dialog configuration with defaults applied at construction time. */
3143
- this.dialogData = signal((() => {
3144
- const raw = inject(MAT_DIALOG_DATA);
3145
- return { mode: 'admin', appearance: 'fill', ...raw };
3146
- })(), /* @ts-ignore */
3147
- ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
3148
- /** Current form model bound to the template inputs. */
3149
- this.item = {};
3150
- /** Whether the old-password field is currently shown as plain text. */
3151
- this.showOldPassword = signal(false, /* @ts-ignore */
3152
- ...(ngDevMode ? [{ debugName: "showOldPassword" }] : /* istanbul ignore next */ []));
3153
- /** Whether the new-password field is currently shown as plain text. */
3154
- this.showPassword = signal(false, /* @ts-ignore */
3155
- ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
3156
- /** Whether the confirm-password field is currently shown as plain text. */
3157
- this.showPassword2 = signal(false, /* @ts-ignore */
3158
- ...(ngDevMode ? [{ debugName: "showPassword2" }] : /* istanbul ignore next */ []));
3159
- const data = this.dialogData();
3160
- const requireUserId = data.mode !== 'forgot' && data.mode !== 'otp' && data.mode !== 'old';
3161
- if (requireUserId && !data.userId) {
3162
- this.dialogRef.close();
3163
- this.dialogService.error('Utente non specificato.');
3164
- return;
3165
- }
3166
- else if ((data.mode === 'forgot' || data.mode === 'otp' || data.mode === 'old') && !data.userEmail) {
3167
- this.dialogRef.close();
3168
- this.dialogService.error('Email utente non specificata.');
3169
- return;
3170
- }
3171
- this.item.userEmail = data.userEmail;
3172
- this.item.userId = data.userId;
3173
- }
3174
- /**
3175
- * Emits the current form result to trigger the password-reset flow.
3176
- */
3177
- ok() {
3178
- this.done.emit(this.item);
3179
- }
3180
- /**
3181
- * Generates a random password and populates both password fields with it.
3182
- */
3183
- generatePassword() {
3184
- const password = SystemUtils.generatePassword();
3185
- this.item.password = password;
3186
- this.item.password2 = password;
3187
- }
3188
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ResetPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3189
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ResetPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FxLayoutDirective, selector: "\n [fxLayout],\n [fxLayout.xs],\n [fxLayout.sm],\n [fxLayout.md],\n [fxLayout.lg],\n [fxLayout.xl],\n [fxLayout.lt-sm],\n [fxLayout.lt-md],\n [fxLayout.lt-lg],\n [fxLayout.lt-xl],\n [fxLayout.gt-xs],\n [fxLayout.gt-sm],\n [fxLayout.gt-md],\n [fxLayout.gt-lg]\n ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: FxFlexDirective, selector: "\n [fxFlex],\n [fxFlex.xs],\n [fxFlex.sm],\n [fxFlex.md],\n [fxFlex.lg],\n [fxFlex.xl],\n [fxFlex.lt-sm],\n [fxFlex.lt-md],\n [fxFlex.lt-lg],\n [fxFlex.lt-xl],\n [fxFlex.gt-xs],\n [fxFlex.gt-sm],\n [fxFlex.gt-md],\n [fxFlex.gt-lg]\n ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: FxLayoutAlignDirective, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.xl],\n [fxLayoutAlign.lt-sm],\n [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg],\n [fxLayoutAlign.lt-xl],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.gt-lg]\n ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: FxLayoutGapDirective, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],\n [fxLayoutGap.sm],\n [fxLayoutGap.md],\n [fxLayoutGap.lg],\n [fxLayoutGap.xl],\n [fxLayoutGap.lt-sm],\n [fxLayoutGap.lt-md],\n [fxLayoutGap.lt-lg],\n [fxLayoutGap.lt-xl],\n [fxLayoutGap.gt-xs],\n [fxLayoutGap.gt-sm],\n [fxLayoutGap.gt-md],\n [fxLayoutGap.gt-lg]\n ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: FxFlexFillDirective, selector: "\n [fxFlexFill],\n [fxFill],\n [fxFlexFill.xs],\n [fxFlexFill.sm],\n [fxFlexFill.md],\n [fxFlexFill.lg],\n [fxFlexFill.xl],\n [fxFlexFill.lt-sm],\n [fxFlexFill.lt-md],\n [fxFlexFill.lt-lg],\n [fxFlexFill.lt-xl],\n [fxFlexFill.gt-xs],\n [fxFlexFill.gt-sm],\n [fxFlexFill.gt-md],\n [fxFlexFill.gt-lg]\n ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: PasswordValidatorDirective, selector: "[password]" }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "directive", type: EqualsValidatorDirective, selector: "[equals]", inputs: ["equals"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3190
- }
3191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ResetPasswordDialogComponent, decorators: [{
3192
- type: Component,
3193
- args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
3194
- MatDialogTitle,
3195
- MatDialogContent,
3196
- FormsModule,
3197
- FlexLayoutModule,
3198
- MatFormFieldModule,
3199
- MatInputModule,
3200
- PasswordValidatorDirective,
3201
- PasswordStrengthComponent,
3202
- EqualsValidatorDirective,
3203
- MatIconModule,
3204
- MatDialogActions,
3205
- MatButtonModule,
3206
- MatDialogClose,
3207
- OtpInputComponent
3208
- ], 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
- }], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
3210
-
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
- * Identifier of the synthesized overflow destination. Use it to recognise the
3224
- * overflow entry inside `itemSelected`.
3225
- */
3226
- const NAVIGATION_OVERFLOW_ID = '__overflow';
3227
- /**
3228
- * Default `auto` mapping, aligned with the Material 3 window size classes:
3229
- * compact windows get the navigation bar, medium and expanded windows get the
3230
- * collapsed rail, large and extra-large windows get the expanded rail.
3231
- */
3232
- const DEFAULT_NAVIGATION_AUTO_VARIANTS = {
3233
- xs: 'bar',
3234
- sm: 'rail',
3235
- md: 'rail',
3236
- lg: 'rail-expanded',
3237
- xl: 'rail-expanded',
3238
- };
3239
- /** Variants that render labels beside the icon and support sections and dividers. */
3240
- const EXPANDED_NAVIGATION_VARIANTS = [
3241
- 'rail-expanded',
3242
- 'drawer',
3243
- 'modal',
3244
- ];
3245
-
3246
- /**
3247
- * @file navigation-bar.component.ts
3248
- *
3249
- * Material Design 3 (Expressive) navigation component.
3250
- *
3251
- * A single adaptive component that renders every navigation surface described
3252
- * by the M3 specs — Navigation bar, collapsed Navigation rail, expanded
3253
- * Navigation rail, standard Navigation drawer and modal Navigation drawer —
3254
- * from one destination model.
3255
- *
3256
- * Design goals:
3257
- * - Zoneless / signal based: no `NgZone`, no `setTimeout`, no manual change detection.
3258
- * - `OnPush` + pre-computed render models: the template contains no method calls.
3259
- * - Zero-DOM active indicator and state layer (rendered as pseudo-elements).
3260
- * - Nested destinations expand inline in the wide variants and open in a single
3261
- * shared overlay in the compact ones — one overlay for the whole component,
3262
- * not one menu instance per destination.
3263
- * - Router integration that degrades gracefully when no `Router` is provided.
3264
- */
3265
- /** Default sprite geometry, applied when a `NavigationIconSprite` omits a field. */
3266
- const SPRITE_DEFAULT_SIZE = 24;
3267
- class NavigationBarComponent {
3268
- constructor() {
3269
- // ── Injected dependencies ──────────────────────────────────────────────────
3270
- this.media = inject(MediaObserver);
3271
- // Optional for the same reason `Router` is: the component must still render
3272
- // inside a bare test bed, where no application theme has been bootstrapped.
3273
- this.themeService = inject(ThemeService, { optional: true });
3274
- this.router = inject(Router, { optional: true });
3275
- this.directionality = inject(Directionality, { optional: true });
3276
- this.hostRef = inject(ElementRef);
3277
- this.destroyRef = inject(DestroyRef);
3278
- // ── Inputs ─────────────────────────────────────────────────────────────────
3279
- /** Flat list of destinations. Ignored when `sections` is provided. */
3280
- this.items = input([], /* @ts-ignore */
3281
- ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
3282
- /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
3283
- this.sections = input([], /* @ts-ignore */
3284
- ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
3285
- /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
3286
- this.variant = input('auto', /* @ts-ignore */
3287
- ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
3288
- /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
3289
- this.autoVariants = input({}, /* @ts-ignore */
3290
- ...(ngDevMode ? [{ debugName: "autoVariants" }] : /* istanbul ignore next */ []));
3291
- /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
3292
- this.selectedId = model(undefined, /* @ts-ignore */
3293
- ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
3294
- /**
3295
- * Two-way bound ids of the expanded parent destinations.
3296
- * Leave unbound (`undefined`) to let the component manage the expansion state
3297
- * on its own, seeding it from `NavigationItem.expanded` and auto-opening the
3298
- * ancestors of the active destination.
3299
- */
3300
- this.expandedIds = model(undefined, /* @ts-ignore */
3301
- ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
3302
- /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
3303
- this.open = model(false, /* @ts-ignore */
3304
- ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
3305
- /** Label visibility policy. */
3306
- this.labelVisibility = input('auto', /* @ts-ignore */
3307
- ...(ngDevMode ? [{ debugName: "labelVisibility" }] : /* istanbul ignore next */ []));
3308
- /** Icon / label arrangement inside a destination. */
3309
- this.itemLayout = input('auto', /* @ts-ignore */
3310
- ...(ngDevMode ? [{ debugName: "itemLayout" }] : /* istanbul ignore next */ []));
3311
- /** Vertical alignment of the `top` destination group inside a rail. */
3312
- this.alignment = input('top', /* @ts-ignore */
3313
- ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
3314
- /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
3315
- this.position = input('start', /* @ts-ignore */
3316
- ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
3317
- /** Headline rendered above the destinations in the expanded rail and in the drawer. */
3318
- this.headline = input(undefined, /* @ts-ignore */
3319
- ...(ngDevMode ? [{ debugName: "headline" }] : /* istanbul ignore next */ []));
3320
- /** When `true` a leading menu button is rendered; it emits `menuClick`. */
3321
- this.showMenuButton = input(false, { ...(ngDevMode ? { debugName: "showMenuButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3322
- /** Material Symbols ligature used by the menu button. */
3323
- this.menuIcon = input('menu', /* @ts-ignore */
3324
- ...(ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []));
3325
- /** Material Symbols ligature used by the expand / collapse chevron. */
3326
- this.expandIcon = input('expand_more', /* @ts-ignore */
3327
- ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
3328
- /** Where `hideWhenCompact` destinations are collapsed into the overflow menu. */
3329
- this.overflowMode = input('bar', /* @ts-ignore */
3330
- ...(ngDevMode ? [{ debugName: "overflowMode" }] : /* istanbul ignore next */ []));
3331
- /** Material Symbols ligature of the overflow destination. */
3332
- this.overflowIcon = input('more_vert', /* @ts-ignore */
3333
- ...(ngDevMode ? [{ debugName: "overflowIcon" }] : /* istanbul ignore next */ []));
3334
- /** Accessible name and tooltip of the overflow destination, which renders icon-only. */
3335
- this.overflowLabel = input('More', /* @ts-ignore */
3336
- ...(ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
3337
- /**
3338
- * Hard cap on the destinations rendered inline in the compact variants,
3339
- * applied per anchoring group. The overflow destination counts as one slot.
3340
- * `0` disables the cap; the M3 specs recommend 3 to 5 for the navigation bar.
3341
- */
3342
- this.maxVisibleItems = input(0, { ...(ngDevMode ? { debugName: "maxVisibleItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
3343
- /** Accessible name of the menu button. */
3344
- this.menuAriaLabel = input('Menu', /* @ts-ignore */
3345
- ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
3346
- /** Accessible name of the navigation landmark. */
3347
- this.ariaLabel = input('Navigation', /* @ts-ignore */
3348
- ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
3349
- /** When `true` a scrim is rendered behind the modal drawer. */
3350
- this.scrim = input(true, { ...(ngDevMode ? { debugName: "scrim" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3351
- /** When `true` the modal drawer closes as soon as a destination is activated. */
3352
- this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3353
- /** When `true` the surface gets the M3 elevation-3 shadow. */
3354
- this.elevated = input(true, { ...(ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3355
- /** When `true` a 1px divider separates the surface from the page content. */
3356
- this.bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3357
- /** When `true` tooltips are shown for destinations whose label is not visible. */
3358
- this.tooltips = input(true, { ...(ngDevMode ? { debugName: "tooltips" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3359
- /** When `true` the selection follows the current router URL. */
3360
- this.routerSync = input(true, { ...(ngDevMode ? { debugName: "routerSync" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3361
- /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
3362
- this.relativeTo = input(undefined, /* @ts-ignore */
3363
- ...(ngDevMode ? [{ debugName: "relativeTo" }] : /* istanbul ignore next */ []));
3364
- /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
3365
- this.width = input(0, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
3366
- /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
3367
- this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3368
- // ── Outputs ────────────────────────────────────────────────────────────────
3369
- /** Emitted when a destination is activated by the user. */
3370
- this.itemSelected = output();
3371
- /** Emitted when the leading menu button is pressed. */
3372
- this.menuClick = output();
3373
- // ── View queries ───────────────────────────────────────────────────────────
3374
- /** Focusable destination elements, in DOM order; used for keyboard roving. */
3375
- this.itemElements = viewChildren('navItem', /* @ts-ignore */
3376
- ...(ngDevMode ? [{ debugName: "itemElements" }] : /* istanbul ignore next */ []));
3377
- /** Focusable entries of the floating submenu panel, in DOM order. */
3378
- this.panelElements = viewChildren('panelItem', /* @ts-ignore */
3379
- ...(ngDevMode ? [{ debugName: "panelElements" }] : /* istanbul ignore next */ []));
3380
- // ── Router state ───────────────────────────────────────────────────────────
3381
- /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
3382
- this.routerUrl = signal(undefined, /* @ts-ignore */
3383
- ...(ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []));
3384
- // ── Theme state ────────────────────────────────────────────────────────────
3385
- /**
3386
- * Ticks whenever the application theme moves. The emitted value is ignored on
3387
- * purpose: it is a change notification, not the answer.
3388
- *
3389
- * Reads `themeService`, so it MUST stay below the injected dependencies: moved
3390
- * above them it would read `undefined`, `?? EMPTY` would swallow it and the
3391
- * theme would silently stop propagating, with nothing to show for it at
3392
- * compile time.
3393
- */
3394
- this.themeChanged = toSignal(this.themeService?.changed ?? EMPTY, { initialValue: undefined });
3395
- /**
3396
- * `true` when the dark theme is active; selects the dark frame set of a sprite.
3397
- *
3398
- * The answer comes from `getTheme()`, the only one that resolves `auto`
3399
- * against the OS preference. `getTheme()` already reads a signal for the
3400
- * explicit modes, so `themeChanged()` is read for the one case that is not
3401
- * reactive on its own: mode `auto` plus a change of the OS colour scheme,
3402
- * which leaves the stored mode on `auto` and only travels through `changed`.
3403
- * Falls back to the light set when no `ThemeService` is provided.
3404
- */
3405
- this.isDark = computed(() => {
3406
- this.themeChanged();
3407
- return this.themeService?.getTheme() === 'dark';
3408
- }, /* @ts-ignore */
3409
- ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
3410
- // ── Submenu overlay state ──────────────────────────────────────────────────
3411
- /** Id of the destination whose children are currently shown in the floating panel. */
3412
- this.popupId = signal(undefined, /* @ts-ignore */
3413
- ...(ngDevMode ? [{ debugName: "popupId" }] : /* istanbul ignore next */ []));
3414
- /**
3415
- * Destination whose children are currently shown in the floating panel.
3416
- *
3417
- * Derived from the id and NOT stored as an object: the render model is rebuilt
3418
- * whenever the destinations, the resolved URLs or the theme change, and a
3419
- * stored object would keep the panel painting the sprite frames of the
3420
- * previous theme until the panel is closed and reopened.
3421
- *
3422
- * The search is recursive because a panel entry can itself own children and
3423
- * open a panel of its own, and those nested render models are not part of the
3424
- * top level of `visibleGroups`.
3425
- *
3426
- * Reads `visibleGroups`, which is declared further down: safe because
3427
- * `computed` is lazy and nothing reads this before the first render — the
3428
- * opposite of `themeChanged` above, which reads its dependency immediately.
3429
- */
3430
- this.popupItem = computed(() => {
3431
- const id = this.popupId();
3432
- if (id === undefined)
3433
- return undefined;
3434
- const find = (list) => {
3435
- for (const rendered of list) {
3436
- if (rendered.item.id === id)
3437
- return rendered;
3438
- const nested = find(rendered.children);
3439
- if (nested)
3440
- return nested;
3441
- }
3442
- return undefined;
3443
- };
3444
- for (const group of this.visibleGroups()) {
3445
- for (const section of group.sections) {
3446
- const hit = find(section.items);
3447
- if (hit)
3448
- return hit;
3449
- }
3450
- }
3451
- // The destination went away while its panel was open.
3452
- return undefined;
3453
- }, /* @ts-ignore */
3454
- ...(ngDevMode ? [{ debugName: "popupItem" }] : /* istanbul ignore next */ []));
3455
- /** Element the floating panel is anchored to. */
3456
- this.popupAnchor = signal(undefined, /* @ts-ignore */
3457
- ...(ngDevMode ? [{ debugName: "popupAnchor" }] : /* istanbul ignore next */ []));
3458
- // ── Derived state ──────────────────────────────────────────────────────────
3459
- /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
3460
- this.resolvedSections = computed(() => {
3461
- const sections = this.sections();
3462
- if (sections.length > 0)
3463
- return sections;
3464
- return [{ id: '__default', items: this.items() }];
3465
- }, /* @ts-ignore */
3466
- ...(ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []));
3467
- /** Every destination, nested ones included, in depth-first order. */
3468
- this.allItems = computed(() => {
3469
- const result = [];
3470
- const walk = (list) => {
3471
- for (const item of list) {
3472
- result.push(item);
3473
- if (item.children?.length)
3474
- walk(item.children);
3475
- }
3476
- };
3477
- for (const section of this.resolvedSections())
3478
- walk(section.items);
3479
- return result;
3480
- }, /* @ts-ignore */
3481
- ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
3482
- /** Map of destination id to the id of its parent destination. */
3483
- this.parentOf = computed(() => {
3484
- const result = new Map();
3485
- const walk = (list, parentId) => {
3486
- for (const item of list) {
3487
- if (parentId !== undefined)
3488
- result.set(item.id, parentId);
3489
- if (item.children?.length)
3490
- walk(item.children, item.id);
3491
- }
3492
- };
3493
- for (const section of this.resolvedSections())
3494
- walk(section.items);
3495
- return result;
3496
- }, /* @ts-ignore */
3497
- ...(ngDevMode ? [{ debugName: "parentOf" }] : /* istanbul ignore next */ []));
3498
- /** The variant to render, resolving `auto` against the active CDK breakpoint. */
3499
- this.resolvedVariant = computed(() => {
3500
- const variant = this.variant();
3501
- if (variant !== 'auto')
3502
- return variant;
3503
- const alias = this.media.currentBp();
3504
- return this.autoVariants()[alias] ?? DEFAULT_NAVIGATION_AUTO_VARIANTS[alias];
3505
- }, /* @ts-ignore */
3506
- ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
3507
- /** `true` for the variants that render labels beside icons and support sections. */
3508
- this.isExpanded = computed(() => EXPANDED_NAVIGATION_VARIANTS.includes(this.resolvedVariant()), /* @ts-ignore */
3509
- ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
3510
- /** `true` when the surface is the modal drawer. */
3511
- this.isModal = computed(() => this.resolvedVariant() === 'modal', /* @ts-ignore */
3512
- ...(ngDevMode ? [{ debugName: "isModal" }] : /* istanbul ignore next */ []));
3513
- /** `true` when the modal drawer is currently open. */
3514
- this.isOverlayOpen = computed(() => this.isModal() && this.open(), /* @ts-ignore */
3515
- ...(ngDevMode ? [{ debugName: "isOverlayOpen" }] : /* istanbul ignore next */ []));
3516
- /** `true` when the surface must be visually hidden. */
3517
- this.isHidden = computed(() => this.hidden() || (this.isModal() && !this.open()), /* @ts-ignore */
3518
- ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
3519
- /** Resolved icon / label arrangement. */
3520
- this.resolvedLayout = computed(() => {
3521
- if (this.isExpanded())
3522
- return 'horizontal';
3523
- const layout = this.itemLayout();
3524
- if (layout !== 'auto')
3525
- return layout;
3526
- // M3 Expressive: the navigation bar switches to a horizontal item layout from 600dp upwards.
3527
- return this.resolvedVariant() === 'bar' && this.media.currentBp() !== 'xs' ? 'horizontal' : 'vertical';
3528
- }, /* @ts-ignore */
3529
- ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
3530
- /** Resolved label visibility; the expanded variants always show labels. */
3531
- this.resolvedLabelVisibility = computed(() => {
3532
- if (this.isExpanded())
3533
- return 'labeled';
3534
- const visibility = this.labelVisibility();
3535
- return visibility === 'auto' ? 'labeled' : visibility;
3536
- }, /* @ts-ignore */
3537
- ...(ngDevMode ? [{ debugName: "resolvedLabelVisibility" }] : /* istanbul ignore next */ []));
3538
- /** `true` when the headline row (menu button, headline text) is rendered. */
3539
- this.showsHeader = computed(() => this.resolvedVariant() !== 'bar' && (this.showMenuButton() || (this.isExpanded() && !!this.headline())), /* @ts-ignore */
3540
- ...(ngDevMode ? [{ debugName: "showsHeader" }] : /* istanbul ignore next */ []));
3541
- /**
3542
- * Geometry of the active indicator:
3543
- * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
3544
- * together, exactly as described by the M3 Expressive specs.
3545
- */
3546
- this.indicatorMode = computed(() => this.isExpanded() || this.resolvedLayout() === 'horizontal' ? 'wide' : 'compact', /* @ts-ignore */
3547
- ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
3548
- /** Tooltip placement derived from the variant and from the anchoring edge. */
3549
- this.tooltipPosition = computed(() => {
3550
- if (this.resolvedVariant() === 'bar')
3551
- return 'above';
3552
- return this.position() === 'end' ? 'before' : 'after';
3553
- }, /* @ts-ignore */
3554
- ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
3555
- /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
3556
- this.widthStyle = computed(() => {
3557
- const width = this.width();
3558
- return width > 0 ? `${width}px` : undefined;
3559
- }, /* @ts-ignore */
3560
- ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
3561
- /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
3562
- this.hrefs = computed(() => {
3563
- const result = new Map();
3564
- const router = this.router;
3565
- const relativeTo = this.relativeTo();
3566
- for (const item of this.allItems()) {
3567
- if (item.href) {
3568
- result.set(item.id, item.href);
3569
- continue;
3570
- }
3571
- if (item.route !== undefined && router) {
3572
- const commands = Array.isArray(item.route) ? [...item.route] : [item.route];
3573
- try {
3574
- const tree = router.createUrlTree(commands, {
3575
- queryParams: item.queryParams,
3576
- fragment: item.fragment,
3577
- relativeTo,
3578
- });
3579
- result.set(item.id, router.serializeUrl(tree));
3580
- }
3581
- catch {
3582
- // Invalid route commands: the destination degrades to a plain button.
3583
- }
3584
- }
3585
- }
3586
- return result;
3587
- }, /* @ts-ignore */
3588
- ...(ngDevMode ? [{ debugName: "hrefs" }] : /* istanbul ignore next */ []));
3589
- /**
3590
- * Static render model, rebuilt only when the destinations, the resolved URLs
3591
- * or the theme change — never when the selection or the expansion state
3592
- * changes. The theme is a dependency because sprite icons carry one frame set
3593
- * per theme, and the frames are baked into the inline style of the icon.
3594
- */
3595
- this.renderGroups = computed(() => {
3596
- const hrefs = this.hrefs();
3597
- const dark = this.isDark();
3598
- const counter = { value: 0 };
3599
- const top = [];
3600
- const bottom = [];
3601
- for (const section of this.resolvedSections()) {
3602
- const topItems = [];
3603
- const bottomItems = [];
3604
- for (const item of section.items) {
3605
- const rendered = NavigationBarComponent.buildRenderItem(item, section, undefined, 0, counter, hrefs, dark);
3606
- (item.align === 'bottom' ? bottomItems : topItems).push(rendered);
3607
- }
3608
- if (topItems.length > 0)
3609
- top.push({ section, items: topItems });
3610
- if (bottomItems.length > 0)
3611
- bottom.push({ section, items: bottomItems });
3612
- }
3613
- const groups = [];
3614
- if (top.length > 0)
3615
- groups.push({ align: 'top', sections: top });
3616
- if (bottom.length > 0)
3617
- groups.push({ align: 'bottom', sections: bottom });
3618
- return groups;
3619
- }, /* @ts-ignore */
3620
- ...(ngDevMode ? [{ debugName: "renderGroups" }] : /* istanbul ignore next */ []));
3621
- /** Id of the destination matching the current router URL, using longest-prefix matching. */
3622
- this.routerActiveId = computed(() => {
3623
- if (!this.routerSync())
3624
- return undefined;
3625
- const url = this.routerUrl();
3626
- if (!url)
3627
- return undefined;
3628
- const path = NavigationBarComponent.pathOf(url);
3629
- const hrefs = this.hrefs();
3630
- let best;
3631
- let bestLength = -1;
3632
- for (const item of this.allItems()) {
3633
- if (item.href || item.route === undefined)
3634
- continue;
3635
- const href = hrefs.get(item.id);
3636
- if (!href)
3637
- continue;
3638
- const target = NavigationBarComponent.pathOf(href);
3639
- const matches = item.exact
3640
- ? path === target
3641
- : path === target || path.startsWith(target.endsWith('/') ? target : `${target}/`);
3642
- if (matches && target.length > bestLength) {
3643
- best = item.id;
3644
- bestLength = target.length;
3645
- }
3646
- }
3647
- return best;
3648
- }, /* @ts-ignore */
3649
- ...(ngDevMode ? [{ debugName: "routerActiveId" }] : /* istanbul ignore next */ []));
3650
- /** Id of the currently active destination: router URL first, explicit selection as fallback. */
3651
- this.activeId = computed(() => this.routerActiveId() ?? this.selectedId(), /* @ts-ignore */
3652
- ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
3653
- /**
3654
- * Expansion state used when `expandedIds` is left unbound: the destinations
3655
- * flagged `expanded`, plus every ancestor of the active destination.
3656
- */
3657
- this.defaultExpandedIds = computed(() => {
3658
- const result = new Set();
3659
- for (const item of this.allItems()) {
3660
- if (item.expanded)
3661
- result.add(item.id);
3662
- }
3663
- const parents = this.parentOf();
3664
- const visited = new Set();
3665
- let current = this.activeId();
3666
- while (current !== undefined && !visited.has(current)) {
3667
- visited.add(current);
3668
- const parent = parents.get(current);
3669
- if (parent === undefined)
3670
- break;
3671
- result.add(parent);
3672
- current = parent;
3673
- }
3674
- return [...result];
3675
- }, /* @ts-ignore */
3676
- ...(ngDevMode ? [{ debugName: "defaultExpandedIds" }] : /* istanbul ignore next */ []));
3677
- /** Ids of the parent destinations currently expanded. */
3678
- this.expandedSet = computed(() => new Set(this.expandedIds() ?? this.defaultExpandedIds()), /* @ts-ignore */
3679
- ...(ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []));
3680
- /** `true` when the current variant collapses `hideWhenCompact` destinations into the overflow menu. */
3681
- this.overflowApplies = computed(() => {
3682
- const mode = this.overflowMode();
3683
- if (mode === 'never')
3684
- return false;
3685
- const variant = this.resolvedVariant();
3686
- return mode === 'bar' ? variant === 'bar' : variant === 'bar' || variant === 'rail';
3687
- }, /* @ts-ignore */
3688
- ...(ngDevMode ? [{ debugName: "overflowApplies" }] : /* istanbul ignore next */ []));
3689
- /**
3690
- * Render model actually walked by the template: the static model with the
3691
- * compact-only destinations moved into the overflow menu and the children of
3692
- * the expanded parents spliced in.
3693
- */
3694
- this.visibleGroups = computed(() => {
3695
- const inline = this.isExpanded();
3696
- const open = this.expandedSet();
3697
- const overflow = this.overflowApplies();
3698
- const max = this.maxVisibleItems();
3699
- // The bar ignores per-item anchoring, so both groups share a single row and
3700
- // therefore a single overflow entry.
3701
- let groups = this.resolvedVariant() === 'bar'
3702
- ? NavigationBarComponent.mergeGroups(this.renderGroups())
3703
- : this.renderGroups();
3704
- if (overflow || max > 0) {
3705
- groups = groups.map(group => this.applyOverflow(group, overflow, max));
3706
- }
3707
- if (!inline)
3708
- return groups;
3709
- const flatten = (list) => {
3710
- let expandedAny = false;
3711
- const result = [];
3712
- for (const rendered of list) {
3713
- result.push(rendered);
3714
- if (rendered.hasChildren && open.has(rendered.item.id)) {
3715
- expandedAny = true;
3716
- result.push(...flatten(rendered.children));
3717
- }
3718
- }
3719
- return expandedAny ? result : list;
3720
- };
3721
- return groups.map(group => ({
3722
- align: group.align,
3723
- sections: group.sections.map(section => ({
3724
- section: section.section,
3725
- items: flatten(section.items),
3726
- })),
3727
- }));
3728
- }, /* @ts-ignore */
3729
- ...(ngDevMode ? [{ debugName: "visibleGroups" }] : /* istanbul ignore next */ []));
3730
- /**
3731
- * Ids rendered with the selected styling. It is the active destination when it
3732
- * is on screen, otherwise every rendered parent hiding it — a collapsed branch
3733
- * or the overflow entry — so the user still sees where they are.
3734
- */
3735
- this.highlightedIds = computed(() => {
3736
- const active = this.activeId();
3737
- const result = new Set();
3738
- if (active === undefined)
3739
- return result;
3740
- const rendered = new Set();
3741
- const parents = [];
3742
- for (const group of this.visibleGroups()) {
3743
- for (const section of group.sections) {
3744
- for (const item of section.items) {
3745
- rendered.add(item.item.id);
3746
- if (item.hasChildren)
3747
- parents.push(item);
3748
- }
3749
- }
3750
- }
3751
- if (rendered.has(active)) {
3752
- result.add(active);
3753
- return result;
3754
- }
3755
- const contains = (list) => list.some(child => child.item.id === active || contains(child.children));
3756
- for (const parent of parents) {
3757
- if (contains(parent.children))
3758
- result.add(parent.item.id);
3759
- }
3760
- return result;
3761
- }, /* @ts-ignore */
3762
- ...(ngDevMode ? [{ debugName: "highlightedIds" }] : /* istanbul ignore next */ []));
3763
- /**
3764
- * Rows of the floating submenu panel. Nested destinations one level down are
3765
- * flattened under a heading, so the overflow menu can hold parents too.
3766
- */
3767
- this.popupEntries = computed(() => {
3768
- const parent = this.popupItem();
3769
- if (!parent)
3770
- return [];
3771
- const result = [];
3772
- for (const child of parent.children) {
3773
- if (child.hasChildren) {
3774
- result.push({ key: `${child.item.id}__heading`, label: child.item.label });
3775
- for (const grandChild of child.children) {
3776
- result.push({ key: grandChild.item.id, render: grandChild });
3777
- }
3778
- }
3779
- else {
3780
- result.push({ key: child.item.id, render: child });
3781
- }
3782
- }
3783
- return result;
3784
- }, /* @ts-ignore */
3785
- ...(ngDevMode ? [{ debugName: "popupEntries" }] : /* istanbul ignore next */ []));
3786
- /** `true` when the floating submenu panel must be shown. */
3787
- this.isPopupOpen = computed(() => !this.isExpanded() && !!this.popupItem(), /* @ts-ignore */
3788
- ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
3789
- /** Element the floating submenu panel is anchored to. */
3790
- this.popupOrigin = computed(() => this.popupAnchor() ?? this.hostRef.nativeElement, /* @ts-ignore */
3791
- ...(ngDevMode ? [{ debugName: "popupOrigin" }] : /* istanbul ignore next */ []));
3792
- /** Connected positions of the floating submenu panel, derived from the variant. */
3793
- this.popupPositions = computed(() => {
3794
- if (this.resolvedVariant() === 'bar') {
3795
- return [
3796
- { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
3797
- { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
3798
- ];
3799
- }
3800
- if (this.position() === 'end') {
3801
- return [
3802
- { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
3803
- { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
3804
- ];
3805
- }
3806
- return [
3807
- { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
3808
- { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
3809
- ];
3810
- }, /* @ts-ignore */
3811
- ...(ngDevMode ? [{ debugName: "popupPositions" }] : /* istanbul ignore next */ []));
3812
- /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
3813
- this.isRtl = computed(() => this.directionality?.value === 'rtl', /* @ts-ignore */
3814
- ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
3815
- const router = this.router;
3816
- if (router) {
3817
- this.routerUrl.set(router.url);
3818
- router.events
3819
- .pipe(filter((e) => e instanceof NavigationEnd), map(e => e.urlAfterRedirects), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
3820
- .subscribe(url => this.routerUrl.set(url));
3821
- }
3822
- }
3823
- // ── Event handlers ─────────────────────────────────────────────────────────
3824
- /**
3825
- * Activates a destination, or expands it when it owns nested destinations.
3826
- * A parent never navigates: it toggles its group inline in the wide variants
3827
- * and opens the floating panel in the compact ones.
3828
- * @param render - The render model of the activated destination.
3829
- * @param event - The originating mouse or keyboard event.
3830
- */
3831
- select(render, event) {
3832
- const item = render.item;
3833
- if (item.disabled) {
3834
- event.preventDefault();
3835
- return;
3836
- }
3837
- if (render.hasChildren) {
3838
- event.preventDefault();
3839
- if (this.isExpanded()) {
3840
- this.toggleExpanded(item.id);
3841
- }
3842
- else {
3843
- this.openPopup(render, event);
3844
- }
3845
- return;
3846
- }
3847
- // Let the browser handle modified clicks (new tab / new window) natively.
3848
- const mouse = event;
3849
- if (render.href && (mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.button === 1)) {
3850
- return;
3851
- }
3852
- if (render.routed && render.href) {
3853
- event.preventDefault();
3854
- void this.router?.navigateByUrl(render.href);
3855
- }
3856
- this.selectedId.set(item.id);
3857
- this.itemSelected.emit({ item, section: render.section, parent: render.parent, index: render.index });
3858
- this.closePopup();
3859
- if (this.isModal() && this.closeOnSelect()) {
3860
- this.open.set(false);
3861
- }
3862
- }
3863
- /**
3864
- * Emits `menuClick` when the leading menu button is pressed.
3865
- */
3866
- onMenuClick() {
3867
- this.menuClick.emit();
3868
- }
3869
- /**
3870
- * Closes the modal drawer when the scrim is clicked.
3871
- */
3872
- onScrimClick() {
3873
- this.open.set(false);
3874
- }
3875
- /**
3876
- * Handles keyboard interaction: arrow keys move the focus between
3877
- * destinations, `Home` / `End` jump to the first / last one and `Escape`
3878
- * closes the floating submenu panel or the modal drawer.
3879
- *
3880
- * The same handler serves the surface and the floating panel, and it tells
3881
- * them apart by `currentTarget`: roving inside an open `role="menu"` must stay
3882
- * inside it, and a programmatic `focus()` is NOT stopped by the focus trap, so
3883
- * sharing one element list would send the focus onto the surface behind the
3884
- * overlay.
3885
- *
3886
- * @param event - The originating keyboard event.
3887
- */
3888
- onKeydown(event) {
3889
- if (event.key === 'Escape') {
3890
- if (this.popupItem()) {
3891
- event.preventDefault();
3892
- this.closePopup();
3893
- return;
3894
- }
3895
- if (this.isOverlayOpen()) {
3896
- event.preventDefault();
3897
- this.open.set(false);
3898
- return;
3899
- }
3900
- }
3901
- // The panel is always a vertical list, whatever the variant behind it.
3902
- const inPanel = event.currentTarget?.classList.contains('ars-nav-submenu') === true;
3903
- const horizontal = !inPanel && this.resolvedVariant() === 'bar';
3904
- const forward = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
3905
- const backward = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
3906
- let delta = 0;
3907
- if (event.key === forward)
3908
- delta = 1;
3909
- else if (event.key === backward)
3910
- delta = -1;
3911
- else if (event.key !== 'Home' && event.key !== 'End')
3912
- return;
3913
- const elements = inPanel ? this.panelElements() : this.itemElements();
3914
- if (elements.length === 0)
3915
- return;
3916
- const current = elements.findIndex(ref => ref.nativeElement === event.target);
3917
- let next;
3918
- if (event.key === 'Home')
3919
- next = 0;
3920
- else if (event.key === 'End')
3921
- next = elements.length - 1;
3922
- else if (current < 0)
3923
- next = 0;
3924
- else
3925
- next = (current + delta + elements.length) % elements.length;
3926
- event.preventDefault();
3927
- elements[next]?.nativeElement.focus();
3928
- }
3929
- // ── Public API ─────────────────────────────────────────────────────────────
3930
- /**
3931
- * Expands or collapses the parent destination with the given id.
3932
- * @param id - Identifier of the parent destination to toggle.
3933
- */
3934
- toggleExpanded(id) {
3935
- const next = new Set(this.expandedSet());
3936
- if (next.has(id))
3937
- next.delete(id);
3938
- else
3939
- next.add(id);
3940
- this.expandedIds.set([...next]);
3941
- }
3942
- /**
3943
- * Opens the floating submenu panel of a parent destination.
3944
- * @param render - The render model of the parent destination.
3945
- * @param event - The originating event, used to anchor the panel.
3946
- */
3947
- openPopup(render, event) {
3948
- const anchor = event.currentTarget;
3949
- this.popupAnchor.set(anchor ?? undefined);
3950
- this.popupId.set(this.popupItem()?.item.id === render.item.id ? undefined : render.item.id);
3951
- }
3952
- /**
3953
- * Closes the floating submenu panel.
3954
- */
3955
- closePopup() {
3956
- this.popupId.set(undefined);
3957
- // Otherwise the component keeps a reference to a detached element.
3958
- this.popupAnchor.set(undefined);
3959
- }
3960
- /**
3961
- * Opens the modal drawer. No-op for the other variants.
3962
- */
3963
- openDrawer() {
3964
- this.open.set(true);
3965
- }
3966
- /**
3967
- * Closes the modal drawer. No-op for the other variants.
3968
- */
3969
- closeDrawer() {
3970
- this.open.set(false);
3971
- }
3972
- /**
3973
- * Toggles the modal drawer. No-op for the other variants.
3974
- */
3975
- toggleDrawer() {
3976
- this.open.update(open => !open);
3977
- }
3978
- /**
3979
- * Moves the browser focus to the destination with the given id.
3980
- * @param id - Identifier of the destination to focus.
3981
- * @returns `true` when a matching destination was found and focused.
3982
- */
3983
- focusItem(id) {
3984
- for (const ref of this.itemElements()) {
3985
- if (ref.nativeElement.dataset['navId'] === id) {
3986
- ref.nativeElement.focus();
3987
- return true;
3988
- }
3989
- }
3990
- return false;
3991
- }
3992
- // ── Helpers ────────────────────────────────────────────────────────────────
3993
- /**
3994
- * Moves the compact-only destinations of a group into a synthesized overflow
3995
- * destination appended at the end of the group.
3996
- * @param group - The group to process.
3997
- * @param overflow - `true` when `hideWhenCompact` must be honoured.
3998
- * @param max - Hard cap on the inline destinations; `0` disables it.
3999
- * @returns The group with the overflow destination applied.
4000
- */
4001
- applyOverflow(group, overflow, max) {
4002
- const kept = [];
4003
- const overflowed = [];
4004
- group.sections.forEach((section, sectionIndex) => {
4005
- for (const render of section.items) {
4006
- if (overflow && render.item.hideWhenCompact)
4007
- overflowed.push(render);
4008
- else
4009
- kept.push({ sectionIndex, render });
4010
- }
4011
- });
4012
- const slots = kept.length + (overflowed.length > 0 ? 1 : 0);
4013
- if (max > 0 && slots > max) {
4014
- const moved = kept.splice(Math.max(1, max - 1));
4015
- for (const entry of moved)
4016
- overflowed.push(entry.render);
4017
- }
4018
- if (overflowed.length === 0)
4019
- return group;
4020
- const sections = group.sections.map((section, sectionIndex) => ({
4021
- section: section.section,
4022
- items: kept.filter(entry => entry.sectionIndex === sectionIndex).map(entry => entry.render),
4023
- }));
4024
- const last = sections[sections.length - 1];
4025
- sections[sections.length - 1] = {
4026
- section: last.section,
4027
- items: [...last.items, this.buildOverflowItem(overflowed)],
4028
- };
4029
- return { align: group.align, sections: sections.filter(section => section.items.length > 0) };
4030
- }
4031
- /**
4032
- * Builds the synthesized, icon-only overflow destination.
4033
- * @param children - The destinations moved into the overflow menu.
4034
- * @returns The render model of the overflow destination.
4035
- */
4036
- buildOverflowItem(children) {
4037
- const label = this.overflowLabel();
4038
- const icon = this.overflowIcon();
4039
- return {
4040
- item: { id: NAVIGATION_OVERFLOW_ID, label, icon },
4041
- index: -1,
4042
- depth: 0,
4043
- routed: false,
4044
- iconOff: icon,
4045
- iconOn: icon,
4046
- badgeText: '',
4047
- hasBadge: false,
4048
- iconOnly: true,
4049
- hasChildren: true,
4050
- children,
4051
- ariaLabel: label,
4052
- tooltip: label,
4053
- };
4054
- }
4055
- /**
4056
- * Merges the `top` and `bottom` groups into a single `top` group, combining
4057
- * the sections that share an id so `@for` track keys stay unique.
4058
- * @param groups - The groups to merge.
4059
- * @returns A single-group array, or the input when there is nothing to merge.
4060
- */
4061
- static mergeGroups(groups) {
4062
- if (groups.length < 2)
4063
- return groups;
4064
- const order = [];
4065
- const byId = new Map();
4066
- for (const group of groups) {
4067
- for (const section of group.sections) {
4068
- const existing = byId.get(section.section.id);
4069
- if (existing) {
4070
- byId.set(section.section.id, {
4071
- section: existing.section,
4072
- items: [...existing.items, ...section.items],
4073
- });
4074
- }
4075
- else {
4076
- order.push(section.section.id);
4077
- byId.set(section.section.id, section);
4078
- }
4079
- }
4080
- }
4081
- return [{ align: 'top', sections: order.map(id => byId.get(id)) }];
4082
- }
4083
- /**
4084
- * Builds the render model of a destination and, recursively, of its children.
4085
- * @param item - The source destination.
4086
- * @param section - The section the destination belongs to.
4087
- * @param parent - The parent destination, for nested destinations.
4088
- * @param depth - Nesting level of the destination.
4089
- * @param counter - Shared counter producing the flat destination index.
4090
- * @param hrefs - Map of destination id to resolved URL.
4091
- * @param dark - `true` when the dark theme is active, selecting the dark sprite frames.
4092
- * @returns The render model of the destination.
4093
- */
4094
- static buildRenderItem(item, section, parent, depth, counter, hrefs, dark) {
4095
- const href = hrefs.get(item.id);
4096
- // Icon precedence: registered SVG, then sprite sheet, then image, then ligature.
4097
- const svgOff = item.svgIcon;
4098
- const svgOn = item.activeSvgIcon ?? item.svgIcon;
4099
- const spriteStyle = NavigationBarComponent.buildSpriteStyle(item, dark);
4100
- const imageOff = spriteStyle || svgOff ? undefined : item.imageIcon;
4101
- const imageOn = spriteStyle || svgOn ? undefined : (item.activeImageIcon ?? item.imageIcon);
4102
- const index = counter.value++;
4103
- const children = (item.children ?? []).map(child => NavigationBarComponent.buildRenderItem(child, section, item, depth + 1, counter, hrefs, dark));
4104
- return {
4105
- item,
4106
- section: section.id === '__default' ? undefined : section,
4107
- parent,
4108
- index,
4109
- depth,
4110
- href,
4111
- routed: !!href && !item.href,
4112
- iconOff: svgOff || spriteStyle || imageOff ? undefined : item.icon,
4113
- iconOn: svgOn || spriteStyle || imageOn ? undefined : (item.activeIcon ?? item.icon),
4114
- svgOff,
4115
- svgOn,
4116
- imageOff,
4117
- imageOn,
4118
- spriteStyle,
4119
- badgeText: NavigationBarComponent.formatBadge(item),
4120
- hasBadge: !!item.badge,
4121
- iconOnly: false,
4122
- hasChildren: children.length > 0,
4123
- children,
4124
- ariaLabel: item.ariaLabel ?? item.label,
4125
- tooltip: item.tooltip ?? item.label,
4126
- };
4127
- }
4128
- /**
4129
- * Translates a sprite descriptor into the inline custom properties the
4130
- * stylesheet uses to size the icon and to shift `background-position` per
4131
- * interaction state.
4132
- *
4133
- * The sheet is rescaled through `background-size` instead of being drawn at
4134
- * its natural size: that is what lets a strip of 26px frames be painted at the
4135
- * 24px of the surrounding Material icons without the neighbouring frames
4136
- * bleeding into the box, and it makes the step between two frames exactly the
4137
- * rendered side.
4138
- *
4139
- * @param item - The destination whose sprite must be translated.
4140
- * @param dark - `true` when the dark theme is active, selecting the `dark` frame set.
4141
- * @returns The inline style map, or `undefined` when the destination uses no sprite.
4142
- */
4143
- static buildSpriteStyle(item, dark) {
4144
- const sprite = item.sprite;
4145
- if (!sprite)
4146
- return undefined;
4147
- // The inline indices are the light set; `dark` overrides only what differs.
4148
- const light = sprite;
4149
- const frames = dark && sprite.dark ? { ...light, ...sprite.dark } : light;
4150
- const normal = frames.normal ?? 0;
4151
- const hover = frames.hover ?? normal;
4152
- const active = frames.active ?? hover;
4153
- const disabled = frames.disabled ?? normal;
4154
- const source = sprite.size ?? SPRITE_DEFAULT_SIZE;
4155
- const size = sprite.renderSize ?? source;
4156
- const count = NavigationBarComponent.spriteFrameCount(sprite);
4157
- const vertical = (sprite.direction ?? 'vertical') === 'vertical';
4158
- return {
4159
- '--sp-url': `url("${sprite.url}")`,
4160
- '--sp-size': `${size}px`,
4161
- '--sp-sheet-x': vertical ? `${size}px` : `${size * count}px`,
4162
- '--sp-sheet-y': vertical ? `${size * count}px` : `${size}px`,
4163
- '--sp-step-x': vertical ? '0px' : `${-size}px`,
4164
- '--sp-step-y': vertical ? `${-size}px` : '0px',
4165
- '--sp-normal': `${normal}`,
4166
- '--sp-hover': `${hover}`,
4167
- '--sp-active': `${active}`,
4168
- '--sp-disabled': `${disabled}`,
4169
- };
4170
- }
4171
- /**
4172
- * Number of frames a sprite sheet holds, needed to rescale it.
4173
- * @param sprite - The sprite descriptor to measure.
4174
- * @returns The declared frame count, or the highest referenced index plus one.
4175
- */
4176
- static spriteFrameCount(sprite) {
4177
- if (sprite.frames !== undefined && sprite.frames > 0)
4178
- return sprite.frames;
4179
- const indices = [
4180
- sprite.normal, sprite.hover, sprite.active, sprite.disabled,
4181
- sprite.dark?.normal, sprite.dark?.hover, sprite.dark?.active, sprite.dark?.disabled,
4182
- ];
4183
- let highest = 0;
4184
- for (const index of indices) {
4185
- if (index !== undefined && index > highest)
4186
- highest = index;
4187
- }
4188
- return highest + 1;
4189
- }
4190
- /**
4191
- * Formats the badge content of a destination.
4192
- * @param item - The destination whose badge must be formatted.
4193
- * @returns The badge text, or an empty string for a dot badge / no badge.
4194
- */
4195
- static formatBadge(item) {
4196
- const badge = item.badge;
4197
- if (!badge || badge.value === undefined)
4198
- return '';
4199
- if (typeof badge.value === 'number') {
4200
- const max = badge.max ?? 999;
4201
- return badge.value > max ? `${max}+` : `${badge.value}`;
4202
- }
4203
- return badge.value;
4204
- }
4205
- /**
4206
- * Strips the query string and the fragment from a URL.
4207
- * @param url - The URL to normalise.
4208
- * @returns The path portion of the URL.
4209
- */
4210
- static pathOf(url) {
4211
- const withoutFragment = url.split('#')[0] ?? '';
4212
- return withoutFragment.split('?')[0] ?? '';
4213
- }
4214
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4215
- 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 }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", 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 }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", 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", expandedIds: "expandedIdsChange", 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 }, { propertyName: "panelElements", predicate: ["panelItem"], 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 wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\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 (wide) {\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 @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\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 and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\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.data-depth]=\"r.depth\"\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]=\"current ? '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 (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\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' && !r.iconOnly) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && 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 [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : 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 (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\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' && !r.iconOnly) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\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);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_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;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.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;justify-content:space-around;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{display:contents}: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, 20px) 0 8px}: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-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 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(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_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);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@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"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4216
- }
4217
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, decorators: [{
4218
- type: Component,
4219
- args: [{ selector: 'navigation-bar', standalone: true, imports: [MatIconModule, MatTooltipModule, CdkTrapFocus, CdkConnectedOverlay], changeDetection: ChangeDetectionStrategy.OnPush, host: {
4220
- 'class': 'ars-navigation',
4221
- '[attr.data-variant]': 'resolvedVariant()',
4222
- '[attr.data-layout]': 'resolvedLayout()',
4223
- '[attr.data-align]': 'alignment()',
4224
- '[attr.data-position]': 'position()',
4225
- '[attr.data-labels]': 'resolvedLabelVisibility()',
4226
- '[attr.data-indicator]': 'indicatorMode()',
4227
- '[class.ars-navigation--open]': 'isOverlayOpen()',
4228
- '[class.ars-navigation--elevated]': 'elevated()',
4229
- '[class.ars-navigation--bordered]': 'bordered()',
4230
- '[class.ars-navigation--hidden]': 'isHidden()',
4231
- '[style.--ars-navigation-width]': 'widthStyle()',
4232
- }, 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 wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\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 (wide) {\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 @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\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 and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\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.data-depth]=\"r.depth\"\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]=\"current ? '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 (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\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' && !r.iconOnly) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && 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 [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : 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 (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\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' && !r.iconOnly) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\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);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_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;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.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;justify-content:space-around;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{display:contents}: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, 20px) 0 8px}: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-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 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(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_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);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@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"] }]
4233
- }], 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"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], 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 }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], overflowIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowIcon", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", 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 }] }], panelElements: [{ type: i0.ViewChildren, args: ['panelItem', { isSignal: true }] }] } });
4234
-
4235
2075
  /*
4236
- * Public API Surface of scm-utils
2076
+ * Public API Surface of @arsedizioni/ars-utils/ui
4237
2077
  */
4238
2078
 
4239
2079
  /**
4240
2080
  * Generated bundle index. Do not edit.
4241
2081
  */
4242
2082
 
4243
- 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, NAVIGATION_OVERFLOW_ID, NON_CANONICAL_PRIORITY, NavigationBarComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
2083
+ export { ALIAS_FAMILIES, BS5_BREAKPOINTS, CANONICAL_ALIASES, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, ItemNode, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, PaginatorIntl, PromptDialogType, ResponsiveBaseDirective, SelectableItem, SelectableNode, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
4244
2084
  //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map