@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.
- package/README.md +97 -10
- package/clipper.ui/clipper.scss +564 -0
- package/fesm2022/arsedizioni-ars-utils-clipper.common.mjs +1 -1
- package/fesm2022/arsedizioni-ars-utils-clipper.common.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +7 -3
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.date.mjs +609 -0
- package/fesm2022/arsedizioni-ars-utils-core.date.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-core.markdown.mjs +591 -0
- package/fesm2022/arsedizioni-ars-utils-core.markdown.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-core.mjs +270 -1449
- package/fesm2022/arsedizioni-ars-utils-core.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-evolution.common.mjs +1 -1
- package/fesm2022/arsedizioni-ars-utils-evolution.common.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-support.common.mjs +1 -1
- package/fesm2022/arsedizioni-ars-utils-support.common.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +14 -3080
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs +962 -0
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs +506 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +763 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs +184 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs +825 -0
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs +708 -0
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs +426 -0
- package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.help.mjs +531 -0
- package/fesm2022/arsedizioni-ars-utils-ui.help.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.mjs +62 -2222
- package/fesm2022/arsedizioni-ars-utils-ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs +1049 -0
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs +263 -0
- package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.oauth.mjs +4 -3
- package/fesm2022/arsedizioni-ars-utils-ui.oauth.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs +246 -0
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils.mjs +13 -12
- package/fesm2022/arsedizioni-ars-utils.mjs.map +1 -1
- package/help/package.json +4 -0
- package/package.json +72 -14
- package/support.ui/package.json +4 -0
- package/tinymce/package.json +4 -0
- package/types/arsedizioni-ars-utils-clipper.common.d.ts +1 -2
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts +3 -1
- package/types/arsedizioni-ars-utils-core.d.ts +684 -1004
- package/types/arsedizioni-ars-utils-core.date.d.ts +304 -0
- package/types/arsedizioni-ars-utils-core.markdown.d.ts +159 -0
- package/types/arsedizioni-ars-utils-ui.application.d.ts +10 -1377
- package/types/arsedizioni-ars-utils-ui.controls.d.ts +413 -0
- package/types/arsedizioni-ars-utils-ui.d.ts +198 -1206
- package/types/arsedizioni-ars-utils-ui.dialogs.auth.d.ts +224 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.d.ts +376 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.prompt.d.ts +47 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.select.d.ts +309 -0
- package/types/arsedizioni-ars-utils-ui.files.d.ts +271 -0
- package/types/arsedizioni-ars-utils-ui.filters.d.ts +163 -0
- package/types/arsedizioni-ars-utils-ui.help.d.ts +220 -0
- package/types/arsedizioni-ars-utils-ui.navigation.d.ts +650 -0
- package/types/arsedizioni-ars-utils-ui.notifications.d.ts +73 -0
- package/types/arsedizioni-ars-utils-ui.tinymce.d.ts +63 -0
- package/types/arsedizioni-ars-utils.d.ts +4 -10
- package/ui.tinymce/README.md +12 -0
- package/ui.tinymce/langs/it.js +466 -0
- 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,
|
|
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 {
|
|
18
|
-
import
|
|
19
|
-
import {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
|
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,
|
|
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
|