@arsedizioni/ars-utils 22.5.1 → 22.5.3
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 +70 -9
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +3 -1
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +48 -361
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.mjs +2 -42
- package/fesm2022/arsedizioni-ars-utils-ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.paginator.mjs +53 -0
- package/fesm2022/arsedizioni-ars-utils-ui.paginator.mjs.map +1 -0
- package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs +530 -0
- package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs.map +1 -0
- package/package.json +9 -1
- package/styles/ui.colors.scss +23 -0
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts +2 -1
- package/types/arsedizioni-ars-utils-ui.d.ts +1 -21
- package/types/arsedizioni-ars-utils-ui.dialogs.d.ts +34 -182
- package/types/arsedizioni-ars-utils-ui.paginator.d.ts +23 -0
- package/types/arsedizioni-ars-utils-ui.shell.d.ts +358 -0
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { MatPaginatorIntl } from '@angular/material/paginator';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { Injectable } from '@angular/core';
|
|
4
|
+
|
|
5
|
+
/** Italian localisation for the Material paginator labels. */
|
|
6
|
+
class PaginatorIntl extends MatPaginatorIntl {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.itemsPerPageLabel = 'Elementi per pagina';
|
|
10
|
+
this.nextPageLabel = 'Prossima pagina';
|
|
11
|
+
this.previousPageLabel = 'Pagina precedente';
|
|
12
|
+
this.lastPageLabel = 'Ultima pagina';
|
|
13
|
+
this.firstPageLabel = 'Prima pagina';
|
|
14
|
+
/**
|
|
15
|
+
* Returns the human-readable range label shown inside the paginator.
|
|
16
|
+
* @param page - Zero-based index of the current page.
|
|
17
|
+
* @param pageSize - Number of items displayed per page.
|
|
18
|
+
* @param length - Total number of items, or `-1` when the total is still being calculated.
|
|
19
|
+
* @returns A formatted string such as `"1 - 25 di 100"`.
|
|
20
|
+
*/
|
|
21
|
+
this.getRangeLabel = (page, pageSize, length) => {
|
|
22
|
+
if (length === -1) {
|
|
23
|
+
return '0 di calcolo...';
|
|
24
|
+
}
|
|
25
|
+
if (length === 0 || pageSize === 0) {
|
|
26
|
+
return `0 di ${length}`;
|
|
27
|
+
}
|
|
28
|
+
const totalLength = Math.max(length, 0);
|
|
29
|
+
const startIndex = page * pageSize;
|
|
30
|
+
// If the start index exceeds the list length, do not try to fix the end index.
|
|
31
|
+
const endIndex = startIndex < totalLength
|
|
32
|
+
? Math.min(startIndex + pageSize, totalLength)
|
|
33
|
+
: startIndex + pageSize;
|
|
34
|
+
return `${startIndex + 1} - ${endIndex} di ${totalLength}`;
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
38
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PaginatorIntl }); }
|
|
39
|
+
}
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PaginatorIntl, decorators: [{
|
|
41
|
+
type: Injectable
|
|
42
|
+
}] });
|
|
43
|
+
|
|
44
|
+
/*
|
|
45
|
+
* Public API Surface of @arsedizioni/ars-utils/ui.paginator
|
|
46
|
+
*/
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Generated bundle index. Do not edit.
|
|
50
|
+
*/
|
|
51
|
+
|
|
52
|
+
export { PaginatorIntl };
|
|
53
|
+
//# sourceMappingURL=arsedizioni-ars-utils-ui.paginator.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"arsedizioni-ars-utils-ui.paginator.mjs","sources":["../../../projects/ars-utils/ui.paginator/paginatorIntl.ts","../../../projects/ars-utils/ui.paginator/public_api.ts","../../../projects/ars-utils/ui.paginator/arsedizioni-ars-utils-ui.paginator.ts"],"sourcesContent":["import { MatPaginatorIntl } from '@angular/material/paginator';\r\nimport { Injectable } from '@angular/core';\r\n\r\n/** Italian localisation for the Material paginator labels. */\r\n@Injectable()\r\nexport class PaginatorIntl extends MatPaginatorIntl {\r\n override itemsPerPageLabel = 'Elementi per pagina';\r\n override nextPageLabel = 'Prossima pagina';\r\n override previousPageLabel = 'Pagina precedente';\r\n override lastPageLabel = 'Ultima pagina';\r\n override firstPageLabel = 'Prima pagina';\r\n\r\n /**\r\n * Returns the human-readable range label shown inside the paginator.\r\n * @param page - Zero-based index of the current page.\r\n * @param pageSize - Number of items displayed per page.\r\n * @param length - Total number of items, or `-1` when the total is still being calculated.\r\n * @returns A formatted string such as `\"1 - 25 di 100\"`.\r\n */\r\n override getRangeLabel = (page: number, pageSize: number, length: number): string => {\r\n if (length === -1) {\r\n return '0 di calcolo...';\r\n }\r\n if (length === 0 || pageSize === 0) {\r\n return `0 di ${length}`;\r\n }\r\n const totalLength = Math.max(length, 0);\r\n const startIndex = page * pageSize;\r\n // If the start index exceeds the list length, do not try to fix the end index.\r\n const endIndex =\r\n startIndex < totalLength\r\n ? Math.min(startIndex + pageSize, totalLength)\r\n : startIndex + pageSize;\r\n return `${startIndex + 1} - ${endIndex} di ${totalLength}`;\r\n };\r\n}\r\n","/*\n * Public API Surface of @arsedizioni/ars-utils/ui.paginator\n */\nexport * from './paginatorIntl';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAGA;AAEM,MAAO,aAAc,SAAQ,gBAAgB,CAAA;AADnD,IAAA,WAAA,GAAA;;QAEW,IAAA,CAAA,iBAAiB,GAAG,qBAAqB;QACzC,IAAA,CAAA,aAAa,GAAO,iBAAiB;QACrC,IAAA,CAAA,iBAAiB,GAAG,mBAAmB;QACvC,IAAA,CAAA,aAAa,GAAO,eAAe;QACnC,IAAA,CAAA,cAAc,GAAM,cAAc;AAE3C;;;;;;AAMG;QACM,IAAA,CAAA,aAAa,GAAG,CAAC,IAAY,EAAE,QAAgB,EAAE,MAAc,KAAY;AAClF,YAAA,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE;AACjB,gBAAA,OAAO,iBAAiB;YAC1B;YACA,IAAI,MAAM,KAAK,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAA,KAAA,EAAQ,MAAM,CAAA,CAAE;YACzB;YACA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;AACvC,YAAA,MAAM,UAAU,GAAG,IAAI,GAAG,QAAQ;;AAElC,YAAA,MAAM,QAAQ,GACZ,UAAU,GAAG;kBACT,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,EAAE,WAAW;AAC7C,kBAAE,UAAU,GAAG,QAAQ;YAC3B,OAAO,CAAA,EAAG,UAAU,GAAG,CAAC,MAAM,QAAQ,CAAA,IAAA,EAAO,WAAW,CAAA,CAAE;AAC5D,QAAA,CAAC;AACF,IAAA;8GA9BY,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;kHAAb,aAAa,EAAA,CAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB;;;ACJD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -0,0 +1,530 @@
|
|
|
1
|
+
import { timer, Subject } from 'rxjs';
|
|
2
|
+
import { tap, first } from 'rxjs/operators';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { signal, computed, ChangeDetectionStrategy, Component, output, viewChild, afterNextRender, inject, DestroyRef, HostListener, ApplicationRef, EnvironmentInjector, createComponent, Service } from '@angular/core';
|
|
5
|
+
import { SafeHtmlPipe, SystemUtils } from '@arsedizioni/ars-utils/core';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Shows the busy overlay only if the operation is still running after a debounce delay, so that
|
|
9
|
+
* an operation that answers in 30 ms never makes the screen flash.
|
|
10
|
+
*
|
|
11
|
+
* Whoever creates one owns it: {@link clear} must be called when the operation ends, otherwise
|
|
12
|
+
* the overlay appears after the fact and stays.
|
|
13
|
+
*/
|
|
14
|
+
class BusyTimer {
|
|
15
|
+
/**
|
|
16
|
+
* Arms the timer.
|
|
17
|
+
* @param shellService - The service that owns the overlay. A `DialogService` is accepted too,
|
|
18
|
+
* since it extends `ShellService`.
|
|
19
|
+
* @param due - Delay in milliseconds before the overlay appears. Defaults to `100`.
|
|
20
|
+
* @param message - Text to display. Defaults to `'Operazione in corso...'`.
|
|
21
|
+
*/
|
|
22
|
+
constructor(shellService, due = 100, message = 'Operazione in corso...') {
|
|
23
|
+
this.shellService = shellService;
|
|
24
|
+
this.subscription = timer(due).pipe(tap(() => this.shellService.busy(message))).subscribe();
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Disarms the timer and takes the overlay away.
|
|
28
|
+
* @returns void
|
|
29
|
+
*/
|
|
30
|
+
clear() {
|
|
31
|
+
this.subscription.unsubscribe();
|
|
32
|
+
this.shellService.clearBusy();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/** Circumference of the spinner circle, in user units. Kept here so the template stays arithmetic-free. */
|
|
37
|
+
const SPINNER_CIRCUMFERENCE = 2 * Math.PI * 31.5;
|
|
38
|
+
/**
|
|
39
|
+
* Overlay that blocks interaction while an operation is running, in the four styles the
|
|
40
|
+
* applications use: progress bar, spinner, hourglass and bare wait.
|
|
41
|
+
*
|
|
42
|
+
* Reproduces `mat-progress-bar` and `mat-progress-spinner` in CSS and SVG rather than importing
|
|
43
|
+
* them, because this overlay is shown from the boot path — an HTTP interceptor calls it before
|
|
44
|
+
* any route exists — and `ui.shell` exists precisely so that path costs no Material.
|
|
45
|
+
*
|
|
46
|
+
* The instance is created once by {@link ShellService} and then reused: showing and hiding is a
|
|
47
|
+
* class on the host, never a `createComponent`, so the 40-odd calls a screen costs nothing.
|
|
48
|
+
*/
|
|
49
|
+
class ShellBusyComponent {
|
|
50
|
+
constructor() {
|
|
51
|
+
/** Whether the overlay is on screen. Hidden with `display: none`, so it costs no layout. */
|
|
52
|
+
this.visible = signal(false, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
54
|
+
/** Visual style of the indicator. */
|
|
55
|
+
this.type = signal('bar', /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
57
|
+
/** Current progress value (0-100), used when {@link progressMode} is `'determinate'`. */
|
|
58
|
+
this.progress = signal(0, /* @ts-ignore */
|
|
59
|
+
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
60
|
+
/** Progress mode of the bar and of the spinner. */
|
|
61
|
+
this.progressMode = signal('indeterminate', /* @ts-ignore */
|
|
62
|
+
...(ngDevMode ? [{ debugName: "progressMode" }] : /* istanbul ignore next */ []));
|
|
63
|
+
/** Message displayed above the indicator. */
|
|
64
|
+
this.message = signal('', /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
66
|
+
/** Circumference of the spinner circle, bound to `stroke-dasharray`. */
|
|
67
|
+
this.circumference = SPINNER_CIRCUMFERENCE;
|
|
68
|
+
/** Length of the spinner arc still to be drawn, derived from {@link progress}. */
|
|
69
|
+
this.dashOffset = computed(() => SPINNER_CIRCUMFERENCE * (1 - Math.min(Math.max(this.progress(), 0), 100) / 100), /* @ts-ignore */
|
|
70
|
+
...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Updates the overlay state.
|
|
74
|
+
*
|
|
75
|
+
* Same contract as the `BusyDialogComponent` it replaces, down to the two implicit rules that
|
|
76
|
+
* callers rely on: an empty message keeps the previous text (so `wait()` does not wipe it), and
|
|
77
|
+
* a progress above zero forces `'determinate'` whatever the caller passed.
|
|
78
|
+
* @param message - New message to display. An empty string preserves the current one.
|
|
79
|
+
* @param progress - Current progress value (0-100). Above zero it forces determinate mode.
|
|
80
|
+
* @param progressMode - Progress mode to use. Defaults to `'indeterminate'`.
|
|
81
|
+
* @param type - Visual style to use. Defaults to `'bar'`.
|
|
82
|
+
* @returns void
|
|
83
|
+
*/
|
|
84
|
+
set(message, progress, progressMode = 'indeterminate', type = 'bar') {
|
|
85
|
+
if (message)
|
|
86
|
+
this.message.set(message);
|
|
87
|
+
if (type)
|
|
88
|
+
this.type.set(type);
|
|
89
|
+
this.progress.set(progress);
|
|
90
|
+
this.progressMode.set(progress > 0 ? 'determinate' : progressMode);
|
|
91
|
+
}
|
|
92
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellBusyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
93
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ShellBusyComponent, isStandalone: true, selector: "ars-shell-busy", host: { properties: { "class.ars-hidden": "!visible()" } }, ngImport: i0, template: "<div class=\"scrim\"></div>\n\n@if (type() === 'hourglass' || type() === 'wait') {\n<div class=\"bare\">\n <svg class=\"hourglass\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M6 2h12v6l-4 4 4 4v6H6v-6l4-4-4-4zm2 2v3.2l4 4 4-4V4zm0 16h8v-3.2l-4-4-4 4z\" />\n </svg>\n @if (type() === 'hourglass' && message()) {\n <div class=\"message\" [innerHTML]=\"message() | safeHtml\"></div>\n }\n</div>\n} @else {\n<div class=\"panel\" role=\"status\" aria-live=\"polite\">\n @if (message()) {\n <div class=\"message\" [innerHTML]=\"message() | safeHtml\"></div>\n }\n\n @if (type() === 'bar') {\n <div class=\"bar\" [class.indeterminate]=\"progressMode() === 'indeterminate'\">\n <div class=\"bar-fill\" [style.width.%]=\"progressMode() === 'determinate' ? progress() : null\"></div>\n </div>\n } @else if (type() === 'spinner') {\n <svg class=\"spinner\" [class.indeterminate]=\"progressMode() === 'indeterminate'\" viewBox=\"0 0 70 70\"\n aria-hidden=\"true\">\n <circle class=\"track\" cx=\"35\" cy=\"35\" r=\"31.5\"></circle>\n <circle class=\"arc\" cx=\"35\" cy=\"35\" r=\"31.5\" [style.stroke-dasharray]=\"circumference\"\n [style.stroke-dashoffset]=\"progressMode() === 'determinate' ? dashOffset() : null\"></circle>\n </svg>\n }\n\n @if (progress() > 0) {\n <div class=\"percent\"><b>{{ progress() }}%</b></div>\n }\n</div>\n}\n", styles: [":host{position:fixed;inset:0;z-index:var(--ars-busy-z-index, 1090);display:flex;align-items:center;justify-content:center;font-family:var(--mat-sys-body-medium-font, Roboto, sans-serif);color:var(--ars-color-text, var(--mat-sys-on-surface, #191c1b))}:host(.ars-hidden){display:none}.scrim{position:absolute;inset:0;background:var(--ars-busy-scrim-color, rgba(0, 0, 0, .42));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.panel{position:relative;min-width:250px;max-width:calc(100% - 24px);margin:12px;padding:24px;border-radius:var(--ars-dialog-radius, 24px);background:var(--ars-dialog-background-color, var(--mat-sys-surface-container-high, #e6eae8));box-shadow:var(--ars-dialog-elevation, 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19));text-align:center}.bare{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ars-busy-bare-color, #ffffff)}.message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.bare .message{padding-top:15px;padding-bottom:0}.percent{padding-top:8px;font-size:smaller}.bar{position:relative;max-width:350px;height:4px;margin:15px auto 0;overflow:hidden;border-radius:2px;background:var(--ars-progress-track-color, var(--mat-sys-surface-container-highest, #d5dbd8))}.bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--ars-color-primary, var(--mat-sys-primary, #00a293));transition:width .12s linear}.bar.indeterminate .bar-fill{width:40%;transition:none;animation:ars-busy-bar 1.6s cubic-bezier(.65,.02,.35,1) infinite}@keyframes ars-busy-bar{0%{left:-40%}to{left:100%}}.spinner{display:block;width:70px;height:70px;margin:15px auto 0;transform:rotate(-90deg)}.spinner circle{fill:none;stroke-width:7;stroke-linecap:round}.spinner .track{stroke:var(--ars-progress-track-color, var(--mat-sys-surface-container-highest, #d5dbd8))}.spinner .arc{stroke:var(--ars-color-primary, var(--mat-sys-primary, #00a293));transition:stroke-dashoffset .12s linear}.spinner.indeterminate{animation:ars-busy-rotate 1.4s linear infinite}.spinner.indeterminate .arc{transition:none;stroke-dashoffset:0;animation:ars-busy-dash 1.4s ease-in-out infinite}@keyframes ars-busy-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes ars-busy-dash{0%{stroke-dasharray:15 183}50%{stroke-dasharray:145 53}to{stroke-dasharray:15 183}}.hourglass{width:80px;height:80px;fill:currentColor;animation:ars-busy-hourglass 3s linear infinite}@keyframes ars-busy-hourglass{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@media(prefers-reduced-motion:reduce){.bar.indeterminate .bar-fill,.spinner.indeterminate,.spinner.indeterminate .arc,.hourglass{animation-duration:4s}}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
94
|
+
}
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellBusyComponent, decorators: [{
|
|
96
|
+
type: Component,
|
|
97
|
+
args: [{ selector: 'ars-shell-busy', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafeHtmlPipe], host: { '[class.ars-hidden]': '!visible()' }, template: "<div class=\"scrim\"></div>\n\n@if (type() === 'hourglass' || type() === 'wait') {\n<div class=\"bare\">\n <svg class=\"hourglass\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M6 2h12v6l-4 4 4 4v6H6v-6l4-4-4-4zm2 2v3.2l4 4 4-4V4zm0 16h8v-3.2l-4-4-4 4z\" />\n </svg>\n @if (type() === 'hourglass' && message()) {\n <div class=\"message\" [innerHTML]=\"message() | safeHtml\"></div>\n }\n</div>\n} @else {\n<div class=\"panel\" role=\"status\" aria-live=\"polite\">\n @if (message()) {\n <div class=\"message\" [innerHTML]=\"message() | safeHtml\"></div>\n }\n\n @if (type() === 'bar') {\n <div class=\"bar\" [class.indeterminate]=\"progressMode() === 'indeterminate'\">\n <div class=\"bar-fill\" [style.width.%]=\"progressMode() === 'determinate' ? progress() : null\"></div>\n </div>\n } @else if (type() === 'spinner') {\n <svg class=\"spinner\" [class.indeterminate]=\"progressMode() === 'indeterminate'\" viewBox=\"0 0 70 70\"\n aria-hidden=\"true\">\n <circle class=\"track\" cx=\"35\" cy=\"35\" r=\"31.5\"></circle>\n <circle class=\"arc\" cx=\"35\" cy=\"35\" r=\"31.5\" [style.stroke-dasharray]=\"circumference\"\n [style.stroke-dashoffset]=\"progressMode() === 'determinate' ? dashOffset() : null\"></circle>\n </svg>\n }\n\n @if (progress() > 0) {\n <div class=\"percent\"><b>{{ progress() }}%</b></div>\n }\n</div>\n}\n", styles: [":host{position:fixed;inset:0;z-index:var(--ars-busy-z-index, 1090);display:flex;align-items:center;justify-content:center;font-family:var(--mat-sys-body-medium-font, Roboto, sans-serif);color:var(--ars-color-text, var(--mat-sys-on-surface, #191c1b))}:host(.ars-hidden){display:none}.scrim{position:absolute;inset:0;background:var(--ars-busy-scrim-color, rgba(0, 0, 0, .42));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.panel{position:relative;min-width:250px;max-width:calc(100% - 24px);margin:12px;padding:24px;border-radius:var(--ars-dialog-radius, 24px);background:var(--ars-dialog-background-color, var(--mat-sys-surface-container-high, #e6eae8));box-shadow:var(--ars-dialog-elevation, 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19));text-align:center}.bare{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ars-busy-bare-color, #ffffff)}.message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.bare .message{padding-top:15px;padding-bottom:0}.percent{padding-top:8px;font-size:smaller}.bar{position:relative;max-width:350px;height:4px;margin:15px auto 0;overflow:hidden;border-radius:2px;background:var(--ars-progress-track-color, var(--mat-sys-surface-container-highest, #d5dbd8))}.bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--ars-color-primary, var(--mat-sys-primary, #00a293));transition:width .12s linear}.bar.indeterminate .bar-fill{width:40%;transition:none;animation:ars-busy-bar 1.6s cubic-bezier(.65,.02,.35,1) infinite}@keyframes ars-busy-bar{0%{left:-40%}to{left:100%}}.spinner{display:block;width:70px;height:70px;margin:15px auto 0;transform:rotate(-90deg)}.spinner circle{fill:none;stroke-width:7;stroke-linecap:round}.spinner .track{stroke:var(--ars-progress-track-color, var(--mat-sys-surface-container-highest, #d5dbd8))}.spinner .arc{stroke:var(--ars-color-primary, var(--mat-sys-primary, #00a293));transition:stroke-dashoffset .12s linear}.spinner.indeterminate{animation:ars-busy-rotate 1.4s linear infinite}.spinner.indeterminate .arc{transition:none;stroke-dashoffset:0;animation:ars-busy-dash 1.4s ease-in-out infinite}@keyframes ars-busy-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes ars-busy-dash{0%{stroke-dasharray:15 183}50%{stroke-dasharray:145 53}to{stroke-dasharray:15 183}}.hourglass{width:80px;height:80px;fill:currentColor;animation:ars-busy-hourglass 3s linear infinite}@keyframes ars-busy-hourglass{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@media(prefers-reduced-motion:reduce){.bar.indeterminate .bar-fill,.spinner.indeterminate,.spinner.indeterminate .arc,.hourglass{animation-duration:4s}}\n"] }]
|
|
98
|
+
}] });
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* The shell's message panel: a modal that looks like a Material dialog and owes nothing to
|
|
102
|
+
* Material.
|
|
103
|
+
*
|
|
104
|
+
* It exists because shell, interceptors, guards and app initializers must be able to say
|
|
105
|
+
* "the session is gone" before a single route has been loaded, and paying for `mat-dialog`,
|
|
106
|
+
* `cdk/overlay` and the rest of that stack on the boot path costs the initial bundle more
|
|
107
|
+
* than every route of the application put together. The look is matched through CSS custom
|
|
108
|
+
* properties (`--ars-*` first, Material's `--mat-sys-*` next, a literal last), so an
|
|
109
|
+
* application that themes Material gets the same surface here for free.
|
|
110
|
+
*
|
|
111
|
+
* Instantiated imperatively by {@link ShellService}, never declared in a template: that is
|
|
112
|
+
* what lets an interceptor open it.
|
|
113
|
+
*/
|
|
114
|
+
class ShellMessageComponent {
|
|
115
|
+
constructor() {
|
|
116
|
+
/** Emitted when the user dismisses the message, whichever way they did it. */
|
|
117
|
+
this.closed = output();
|
|
118
|
+
this.panel = viewChild.required('panel', /* @ts-ignore */
|
|
119
|
+
...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
|
|
120
|
+
this.okButton = viewChild.required('ok', /* @ts-ignore */
|
|
121
|
+
...(ngDevMode ? [{ debugName: "okButton" }] : /* istanbul ignore next */ []));
|
|
122
|
+
/** Unique id tying the panel to its heading for assistive technology. */
|
|
123
|
+
this.titleId = `ars-shell-message-title-${Math.random().toString(36).slice(2, 10)}`;
|
|
124
|
+
/** Current content, with the defaults the shell relies on already applied. */
|
|
125
|
+
this.data = signal({ message: '', title: 'Informazioni', okCaption: 'Ok', width: 500 }, /* @ts-ignore */
|
|
126
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
127
|
+
/** True for a moment after a successful copy, so the button can acknowledge it. */
|
|
128
|
+
this.copied = signal(false, /* @ts-ignore */
|
|
129
|
+
...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
|
|
130
|
+
this.closing = false;
|
|
131
|
+
afterNextRender(() => this.okButton().nativeElement.focus());
|
|
132
|
+
inject(DestroyRef).onDestroy(() => {
|
|
133
|
+
clearTimeout(this.dismissTimer);
|
|
134
|
+
clearTimeout(this.copiedTimer);
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* Replaces the content shown by the panel and restarts the auto-dismiss timer.
|
|
139
|
+
*
|
|
140
|
+
* Called on an already open panel by `ShellService.error()` so that a burst of failures
|
|
141
|
+
* updates one message instead of stacking modals nobody can dismiss.
|
|
142
|
+
* @param data - The new content to display.
|
|
143
|
+
* @returns void
|
|
144
|
+
*/
|
|
145
|
+
setData(data) {
|
|
146
|
+
this.data.set({ title: 'Informazioni', okCaption: 'Ok', width: 500, ...data });
|
|
147
|
+
this.scheduleDismiss(this.data().dismissAfter);
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Dismisses the panel. Safe to call more than once: only the first call is announced.
|
|
151
|
+
* @returns void
|
|
152
|
+
*/
|
|
153
|
+
close() {
|
|
154
|
+
if (this.closing)
|
|
155
|
+
return;
|
|
156
|
+
this.closing = true;
|
|
157
|
+
clearTimeout(this.dismissTimer);
|
|
158
|
+
this.closed.emit();
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Closes the panel on Escape, mirroring a Material dialog opened with the default config.
|
|
162
|
+
* @param e - The keyboard event captured at document level.
|
|
163
|
+
* @returns void
|
|
164
|
+
*/
|
|
165
|
+
onKeydown(e) {
|
|
166
|
+
if (e.key === 'Escape') {
|
|
167
|
+
e.preventDefault();
|
|
168
|
+
this.close();
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
if (e.key === 'Tab')
|
|
172
|
+
this.trapFocus(e);
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Keeps Tab inside the panel while the message is up.
|
|
176
|
+
*
|
|
177
|
+
* A hand-rolled two-element version of what `cdk/a11y` does, which is all this panel needs:
|
|
178
|
+
* it never holds more than the copy button and the dismiss button.
|
|
179
|
+
* @param e - The Tab keydown event.
|
|
180
|
+
* @returns void
|
|
181
|
+
*/
|
|
182
|
+
trapFocus(e) {
|
|
183
|
+
const focusable = Array.from(this.panel().nativeElement.querySelectorAll('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'));
|
|
184
|
+
if (!focusable.length)
|
|
185
|
+
return;
|
|
186
|
+
const first = focusable[0];
|
|
187
|
+
const last = focusable[focusable.length - 1];
|
|
188
|
+
const active = document.activeElement;
|
|
189
|
+
if (e.shiftKey && (active === first || !this.panel().nativeElement.contains(active))) {
|
|
190
|
+
e.preventDefault();
|
|
191
|
+
last.focus();
|
|
192
|
+
}
|
|
193
|
+
else if (!e.shiftKey && active === last) {
|
|
194
|
+
e.preventDefault();
|
|
195
|
+
first.focus();
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* (Re)schedules the auto-dismiss timer, cancelling any pending one so a timer armed for an
|
|
200
|
+
* earlier message can never close a newer one.
|
|
201
|
+
* @param dismissAfter - Delay in milliseconds; no-op when falsy.
|
|
202
|
+
* @returns void
|
|
203
|
+
*/
|
|
204
|
+
scheduleDismiss(dismissAfter) {
|
|
205
|
+
clearTimeout(this.dismissTimer);
|
|
206
|
+
this.dismissTimer = undefined;
|
|
207
|
+
if (dismissAfter)
|
|
208
|
+
this.dismissTimer = setTimeout(() => this.close(), dismissAfter);
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Copies the message and its details to the clipboard, as both HTML and plain text.
|
|
212
|
+
*
|
|
213
|
+
* Unlike `InfoDialogComponent` there is no toast to report the outcome — the shell has no
|
|
214
|
+
* toast — so the button itself acknowledges it for a moment.
|
|
215
|
+
* @returns A promise that resolves once the copy has been attempted.
|
|
216
|
+
*/
|
|
217
|
+
async copy() {
|
|
218
|
+
const content = this.panel().nativeElement.querySelector('.content');
|
|
219
|
+
if (!content)
|
|
220
|
+
return;
|
|
221
|
+
try {
|
|
222
|
+
await navigator.clipboard.write([
|
|
223
|
+
new ClipboardItem({
|
|
224
|
+
'text/html': new Blob([content.innerHTML], { type: 'text/html' }),
|
|
225
|
+
'text/plain': new Blob([content.innerText], { type: 'text/plain' })
|
|
226
|
+
})
|
|
227
|
+
]);
|
|
228
|
+
this.copied.set(true);
|
|
229
|
+
clearTimeout(this.copiedTimer);
|
|
230
|
+
this.copiedTimer = setTimeout(() => this.copied.set(false), 1500);
|
|
231
|
+
}
|
|
232
|
+
catch {
|
|
233
|
+
// Clipboard permission denied or the document is not focused: nothing worth interrupting
|
|
234
|
+
// the user for, and the text is on screen anyway.
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ShellMessageComponent, isStandalone: true, selector: "ars-shell-message", outputs: { closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "okButton", first: true, predicate: ["ok"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"scrim\" (click)=\"close()\"></div>\n\n<div #panel class=\"panel\" role=\"alertdialog\" aria-modal=\"true\" [attr.aria-labelledby]=\"titleId\"\n [style.max-width.px]=\"data().width\">\n\n <h2 class=\"title\" [id]=\"titleId\" [innerHTML]=\"data().title | safeHtml\"></h2>\n\n <div class=\"content\">\n @if (data().message) {\n <div class=\"message\" [innerHTML]=\"data().message | safeHtml\"></div>\n }\n @if (data().details) {\n <div class=\"details-box\">\n <div class=\"details-separator\"></div>\n <p class=\"details-label\">Dettaglio:</p>\n <div class=\"details\">\n <div [innerHTML]=\"data().details | safeHtml\"></div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"icon-button\" (click)=\"copy()\"\n [title]=\"copied() ? 'Copiato negli appunti' : 'Copia negli appunti'\" aria-label=\"Copia negli appunti\">\n @if (copied()) {\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z\" /></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path\n d=\"M16 1H4a2 2 0 0 0-2 2v14h2V3h12zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m0 16H8V7h11z\" /></svg>\n }\n </button>\n <button #ok type=\"button\" class=\"flat-button\" (click)=\"close()\">{{ data().okCaption }}</button>\n </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:var(--ars-shell-z-index, 1100);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.scrim{position:absolute;inset:0;background:var(--ars-scrim-color, rgba(0, 0, 0, .32));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:ars-shell-fade .15s cubic-bezier(0,0,.2,1)}.panel{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:12px;max-height:calc(100% - 24px);box-sizing:border-box;border-radius:var(--ars-dialog-radius, 28px);background:var(--ars-dialog-background-color, var(--mat-sys-surface-container-high, #e6eae8));color:var(--ars-color-text, var(--mat-sys-on-surface, #191c1b));box-shadow:var(--ars-dialog-elevation, 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px 0 rgba(0, 0, 0, .3));font-family:var(--mat-sys-body-medium-font, Roboto, sans-serif);text-align:left;animation:ars-shell-enter .15s cubic-bezier(0,0,.2,1)}.title{margin:0;padding:24px 24px 16px;font:var(--mat-sys-headline-small, 400 24px/32px Roboto, sans-serif);color:inherit}.content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0;font:var(--mat-sys-body-medium, 400 14px/20px Roboto, sans-serif)}.message{flex:0 1 auto;min-height:0;padding:0 24px 24px;overflow-y:auto;overscroll-behavior:contain}.details-box{display:contents}.details-separator{flex:0 0 auto;height:1px;margin:0 24px 8px;background:var(--ars-color-divider, #757d87)}.details-label{flex:0 0 auto;margin:0 0 4px;padding:0 24px;font-size:.75em;text-transform:uppercase;color:var(--ars-color-secondary, var(--mat-sys-on-surface-variant, #4a635f))}.details{flex:1 1000 auto;min-height:64px;max-height:350px;padding:4px 24px 8px;overflow-y:auto;overscroll-behavior:contain;background:transparent;font-size:.85em}.actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 24px 24px}button{font-family:inherit;cursor:pointer;border:none}button:focus-visible{outline:3px solid var(--ars-color-primary, var(--mat-sys-primary, #00a293));outline-offset:2px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;color:inherit}.icon-button svg{width:24px;height:24px;fill:currentColor}.icon-button:hover{background:var(--ars-item-hover-background-color, rgba(0, 0, 0, .08))}.flat-button{height:40px;padding:0 24px;border-radius:20px;background:var(--ars-color-primary, var(--mat-sys-primary, #00a293));color:var(--ars-color-on-primary, var(--mat-sys-on-primary, #ffffff));font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif)}.flat-button:hover{filter:brightness(1.08)}@keyframes ars-shell-fade{0%{opacity:0}to{opacity:1}}@keyframes ars-shell-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.scrim,.panel{animation:none}}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
239
|
+
}
|
|
240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellMessageComponent, decorators: [{
|
|
241
|
+
type: Component,
|
|
242
|
+
args: [{ selector: 'ars-shell-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafeHtmlPipe], template: "<div class=\"scrim\" (click)=\"close()\"></div>\n\n<div #panel class=\"panel\" role=\"alertdialog\" aria-modal=\"true\" [attr.aria-labelledby]=\"titleId\"\n [style.max-width.px]=\"data().width\">\n\n <h2 class=\"title\" [id]=\"titleId\" [innerHTML]=\"data().title | safeHtml\"></h2>\n\n <div class=\"content\">\n @if (data().message) {\n <div class=\"message\" [innerHTML]=\"data().message | safeHtml\"></div>\n }\n @if (data().details) {\n <div class=\"details-box\">\n <div class=\"details-separator\"></div>\n <p class=\"details-label\">Dettaglio:</p>\n <div class=\"details\">\n <div [innerHTML]=\"data().details | safeHtml\"></div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"icon-button\" (click)=\"copy()\"\n [title]=\"copied() ? 'Copiato negli appunti' : 'Copia negli appunti'\" aria-label=\"Copia negli appunti\">\n @if (copied()) {\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z\" /></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path\n d=\"M16 1H4a2 2 0 0 0-2 2v14h2V3h12zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m0 16H8V7h11z\" /></svg>\n }\n </button>\n <button #ok type=\"button\" class=\"flat-button\" (click)=\"close()\">{{ data().okCaption }}</button>\n </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:var(--ars-shell-z-index, 1100);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.scrim{position:absolute;inset:0;background:var(--ars-scrim-color, rgba(0, 0, 0, .32));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:ars-shell-fade .15s cubic-bezier(0,0,.2,1)}.panel{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:12px;max-height:calc(100% - 24px);box-sizing:border-box;border-radius:var(--ars-dialog-radius, 28px);background:var(--ars-dialog-background-color, var(--mat-sys-surface-container-high, #e6eae8));color:var(--ars-color-text, var(--mat-sys-on-surface, #191c1b));box-shadow:var(--ars-dialog-elevation, 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px 0 rgba(0, 0, 0, .3));font-family:var(--mat-sys-body-medium-font, Roboto, sans-serif);text-align:left;animation:ars-shell-enter .15s cubic-bezier(0,0,.2,1)}.title{margin:0;padding:24px 24px 16px;font:var(--mat-sys-headline-small, 400 24px/32px Roboto, sans-serif);color:inherit}.content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0;font:var(--mat-sys-body-medium, 400 14px/20px Roboto, sans-serif)}.message{flex:0 1 auto;min-height:0;padding:0 24px 24px;overflow-y:auto;overscroll-behavior:contain}.details-box{display:contents}.details-separator{flex:0 0 auto;height:1px;margin:0 24px 8px;background:var(--ars-color-divider, #757d87)}.details-label{flex:0 0 auto;margin:0 0 4px;padding:0 24px;font-size:.75em;text-transform:uppercase;color:var(--ars-color-secondary, var(--mat-sys-on-surface-variant, #4a635f))}.details{flex:1 1000 auto;min-height:64px;max-height:350px;padding:4px 24px 8px;overflow-y:auto;overscroll-behavior:contain;background:transparent;font-size:.85em}.actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 24px 24px}button{font-family:inherit;cursor:pointer;border:none}button:focus-visible{outline:3px solid var(--ars-color-primary, var(--mat-sys-primary, #00a293));outline-offset:2px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;color:inherit}.icon-button svg{width:24px;height:24px;fill:currentColor}.icon-button:hover{background:var(--ars-item-hover-background-color, rgba(0, 0, 0, .08))}.flat-button{height:40px;padding:0 24px;border-radius:20px;background:var(--ars-color-primary, var(--mat-sys-primary, #00a293));color:var(--ars-color-on-primary, var(--mat-sys-on-primary, #ffffff));font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif)}.flat-button:hover{filter:brightness(1.08)}@keyframes ars-shell-fade{0%{opacity:0}to{opacity:1}}@keyframes ars-shell-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.scrim,.panel{animation:none}}\n"] }]
|
|
243
|
+
}], ctorParameters: () => [], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], okButton: [{ type: i0.ViewChild, args: ['ok', { isSignal: true }] }], onKeydown: [{
|
|
244
|
+
type: HostListener,
|
|
245
|
+
args: ['document:keydown', ['$event']]
|
|
246
|
+
}] } });
|
|
247
|
+
|
|
248
|
+
/** Grace period before the busy overlay is actually taken away, in milliseconds. */
|
|
249
|
+
const CLEAR_BUSY_GRACE = 500;
|
|
250
|
+
/**
|
|
251
|
+
* Everything the application can say to the user without asking anything back: a message, an
|
|
252
|
+
* error, and the wait overlay. No Angular Material behind any of it.
|
|
253
|
+
*
|
|
254
|
+
* `DialogService` extends this class, so a route component injects `DialogService` and has both
|
|
255
|
+
* halves; shell, HTTP interceptors, route guards and app initializers inject `ShellService` and
|
|
256
|
+
* pay for neither `mat-dialog` nor `cdk/overlay` on the boot path — measured at 445 KB of the
|
|
257
|
+
* 905 KB initial bundle on myARS, more than every route of the application put together.
|
|
258
|
+
*
|
|
259
|
+
* The methods keep the parameter order of the `DialogService` ones they came from, so no call
|
|
260
|
+
* site changed when they moved here.
|
|
261
|
+
*
|
|
262
|
+
* ## Stacking
|
|
263
|
+
*
|
|
264
|
+
* Outside the CDK overlay stack the order is a fixed z-index: the busy overlay sits at 1090 and
|
|
265
|
+
* the message at 1100, both above the `cdk-overlay-container` (1000). So an error raised while a
|
|
266
|
+
* Material dialog is open lands on top of it, which is what an error should do, and the busy
|
|
267
|
+
* overlay covers the dialog it belongs to. The one case a fixed number cannot express is a dialog
|
|
268
|
+
* opened while the overlay is still up — `DialogService.open()` takes the busy away immediately
|
|
269
|
+
* rather than with the grace period, precisely so that case cannot happen.
|
|
270
|
+
*/
|
|
271
|
+
class ShellService {
|
|
272
|
+
constructor() {
|
|
273
|
+
this.appRef = inject(ApplicationRef);
|
|
274
|
+
this.environmentInjector = inject(EnvironmentInjector);
|
|
275
|
+
this.busyVisible = false;
|
|
276
|
+
}
|
|
277
|
+
// ---------------------------------------------------------------------------
|
|
278
|
+
// Messages
|
|
279
|
+
// ---------------------------------------------------------------------------
|
|
280
|
+
/**
|
|
281
|
+
* Shows an informational message.
|
|
282
|
+
* @param message - HTML message to display.
|
|
283
|
+
* @param title - Heading. Defaults to `'Informazioni'`.
|
|
284
|
+
* @param okCaption - Dismiss button label. Defaults to `'Ok'`.
|
|
285
|
+
* @param width - Maximum panel width in pixels. Defaults to `500`.
|
|
286
|
+
* @param dismissAfter - Auto-close delay in milliseconds (optional).
|
|
287
|
+
* @param details - Optional secondary details text.
|
|
288
|
+
* @returns A handle over the open message, or `null` outside the browser.
|
|
289
|
+
*/
|
|
290
|
+
info(message, title = 'Informazioni', okCaption = 'Ok', width = 500, dismissAfter, details) {
|
|
291
|
+
this.clearBusy();
|
|
292
|
+
return this.showMessage('info', { message, title, okCaption, width, dismissAfter, details });
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Shows an error message. When one is already on screen its content is replaced in place: a
|
|
296
|
+
* failing API answers many requests at once, and each of them must not add a panel of its own.
|
|
297
|
+
* @param message - HTML error message to display.
|
|
298
|
+
* @param log - Optional technical log or stack trace shown in the details panel.
|
|
299
|
+
* @param title - Heading. Defaults to `'Errore'`.
|
|
300
|
+
* @param okCaption - Dismiss button label. Defaults to `'Ok'`.
|
|
301
|
+
* @param width - Maximum panel width in pixels. Defaults to `500`.
|
|
302
|
+
* @param dismissAfter - Auto-close delay in milliseconds (optional).
|
|
303
|
+
* @returns A handle over the open message, or `null` outside the browser.
|
|
304
|
+
*/
|
|
305
|
+
error(message, log, title = 'Errore', okCaption = 'Ok', width = 500, dismissAfter) {
|
|
306
|
+
this.clearBusy();
|
|
307
|
+
return this.showMessage('error', { message, title, okCaption, width, dismissAfter, details: log });
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Closes the message currently on screen, if any. Does not touch the busy overlay.
|
|
311
|
+
* @returns void
|
|
312
|
+
*/
|
|
313
|
+
closeMessage() {
|
|
314
|
+
if (!this.messageRef)
|
|
315
|
+
return;
|
|
316
|
+
const ref = this.messageRef;
|
|
317
|
+
this.messageRef = undefined;
|
|
318
|
+
this.messageKind = undefined;
|
|
319
|
+
this.appRef.detachView(ref.hostView);
|
|
320
|
+
ref.destroy();
|
|
321
|
+
if (this.previousOverflow !== undefined) {
|
|
322
|
+
document.body.style.overflow = this.previousOverflow;
|
|
323
|
+
this.previousOverflow = undefined;
|
|
324
|
+
}
|
|
325
|
+
this.previouslyFocused?.focus();
|
|
326
|
+
this.previouslyFocused = undefined;
|
|
327
|
+
// Last, so that whoever is waiting on it finds the screen already in its final state.
|
|
328
|
+
const closed = this.messageClosed;
|
|
329
|
+
this.messageClosed = undefined;
|
|
330
|
+
closed?.next();
|
|
331
|
+
closed?.complete();
|
|
332
|
+
}
|
|
333
|
+
/**
|
|
334
|
+
* Opens the message panel, or updates the one already open when it is showing the same kind of
|
|
335
|
+
* message.
|
|
336
|
+
* @param kind - Whether this is an informational or an error message.
|
|
337
|
+
* @param data - The content to display.
|
|
338
|
+
* @returns A handle over the open message, or `null` outside the browser.
|
|
339
|
+
*/
|
|
340
|
+
showMessage(kind, data) {
|
|
341
|
+
if (!SystemUtils.isBrowser())
|
|
342
|
+
return null;
|
|
343
|
+
if (this.messageRef && this.messageKind === kind) {
|
|
344
|
+
this.messageRef.instance.setData(data);
|
|
345
|
+
this.messageRef.changeDetectorRef.detectChanges();
|
|
346
|
+
return this.messageHandle();
|
|
347
|
+
}
|
|
348
|
+
// A message of a different kind replaces the one on screen rather than stacking on it.
|
|
349
|
+
this.closeMessage();
|
|
350
|
+
const ref = createComponent(ShellMessageComponent, { environmentInjector: this.environmentInjector });
|
|
351
|
+
ref.instance.setData(data);
|
|
352
|
+
ref.instance.closed.subscribe(() => this.closeMessage());
|
|
353
|
+
// One subject per panel, not per handle: an `error()` that replaces the text of the message
|
|
354
|
+
// already on screen hands out a second handle, and both must fire when that message goes.
|
|
355
|
+
this.messageClosed = new Subject();
|
|
356
|
+
this.previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
|
|
357
|
+
this.previousOverflow = document.body.style.overflow;
|
|
358
|
+
document.body.style.overflow = 'hidden';
|
|
359
|
+
this.appRef.attachView(ref.hostView);
|
|
360
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
361
|
+
this.messageRef = ref;
|
|
362
|
+
this.messageKind = kind;
|
|
363
|
+
return this.messageHandle();
|
|
364
|
+
}
|
|
365
|
+
/**
|
|
366
|
+
* Builds the handle returned to callers.
|
|
367
|
+
*
|
|
368
|
+
* The subject is captured now rather than read at call time, so `afterClosed()` keeps
|
|
369
|
+
* answering about the message this handle was given for, even once another one has taken
|
|
370
|
+
* its place on screen.
|
|
371
|
+
* @returns The handle over the message currently on screen.
|
|
372
|
+
*/
|
|
373
|
+
messageHandle() {
|
|
374
|
+
const closed = this.messageClosed;
|
|
375
|
+
return {
|
|
376
|
+
close: () => this.closeMessage(),
|
|
377
|
+
afterClosed: () => closed.asObservable()
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
// ---------------------------------------------------------------------------
|
|
381
|
+
// Busy overlay
|
|
382
|
+
// ---------------------------------------------------------------------------
|
|
383
|
+
/**
|
|
384
|
+
* Shows or updates the busy overlay.
|
|
385
|
+
*
|
|
386
|
+
* Called dozens of times per screen, so it creates nothing after the first time: the component
|
|
387
|
+
* is built once and then kept, and showing it again is a class on the host element. The state
|
|
388
|
+
* is written to signals and checked synchronously before returning, so the message on screen is
|
|
389
|
+
* always the last one asked for — a second `busy()` in the same task never leaves the previous
|
|
390
|
+
* text behind.
|
|
391
|
+
* @param message - Text to display. An empty string keeps the current one.
|
|
392
|
+
* @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
|
|
393
|
+
* @param progressMode - Progress mode. Defaults to `'indeterminate'`.
|
|
394
|
+
* @param type - Visual style of the overlay. Defaults to `'bar'`.
|
|
395
|
+
* @param action - Optional observable; the overlay is dismissed when it first emits. It
|
|
396
|
+
* replaces the one passed to a previous call, which is unsubscribed.
|
|
397
|
+
* @returns `true` if the overlay was brought up by this call, `false` if it was already up.
|
|
398
|
+
*/
|
|
399
|
+
setBusy(message, progress = -1, progressMode = 'indeterminate', type = 'bar', action) {
|
|
400
|
+
if (!SystemUtils.isBrowser())
|
|
401
|
+
return false;
|
|
402
|
+
// Cancel any pending clearBusy(): it must never take away an overlay just asked for.
|
|
403
|
+
clearTimeout(this.clearBusyTimer);
|
|
404
|
+
this.clearBusyTimer = undefined;
|
|
405
|
+
const created = !this.busyVisible;
|
|
406
|
+
const ref = this.ensureBusy();
|
|
407
|
+
ref.instance.set(message, progress, progressMode, type);
|
|
408
|
+
ref.instance.visible.set(true);
|
|
409
|
+
this.busyVisible = true;
|
|
410
|
+
ref.changeDetectorRef.detectChanges();
|
|
411
|
+
// The action always replaces the previous one. Keeping the first, as the previous
|
|
412
|
+
// implementation did, meant the overlay outlived the operation that was actually running.
|
|
413
|
+
this.busyActionSubscription?.unsubscribe();
|
|
414
|
+
this.busyActionSubscription = action?.pipe(first()).subscribe(() => this.clearBusy());
|
|
415
|
+
return created;
|
|
416
|
+
}
|
|
417
|
+
/**
|
|
418
|
+
* Shows or updates the busy overlay using the progress-bar style.
|
|
419
|
+
* @param message - Text to display inside the overlay.
|
|
420
|
+
* @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
|
|
421
|
+
* @param progressMode - Progress mode. Defaults to `'indeterminate'`.
|
|
422
|
+
* @param action - Optional observable; the overlay is dismissed when it emits.
|
|
423
|
+
* @returns `true` if the overlay was brought up by this call.
|
|
424
|
+
*/
|
|
425
|
+
busy(message, progress = -1, progressMode = 'indeterminate', action) {
|
|
426
|
+
return this.setBusy(message, progress, progressMode, 'bar', action);
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* Shows or updates the busy overlay using the spinner style.
|
|
430
|
+
* @param message - Text to display inside the overlay.
|
|
431
|
+
* @param progress - Progress value (`-1` = indeterminate). Defaults to `-1`.
|
|
432
|
+
* @param progressMode - Progress mode. Defaults to `'indeterminate'`.
|
|
433
|
+
* @param action - Optional observable; the overlay is dismissed when it emits.
|
|
434
|
+
* @returns `true` if the overlay was brought up by this call.
|
|
435
|
+
*/
|
|
436
|
+
busySpinner(message, progress = -1, progressMode = 'indeterminate', action) {
|
|
437
|
+
return this.setBusy(message, progress, progressMode, 'spinner', action);
|
|
438
|
+
}
|
|
439
|
+
/**
|
|
440
|
+
* Shows or updates the busy overlay using the hourglass style.
|
|
441
|
+
* @param message - Text to display inside the overlay.
|
|
442
|
+
* @param action - Optional observable; the overlay is dismissed when it emits.
|
|
443
|
+
* @returns `true` if the overlay was brought up by this call.
|
|
444
|
+
*/
|
|
445
|
+
busyHourglass(message, action) {
|
|
446
|
+
return this.setBusy(message, -1, 'indeterminate', 'hourglass', action);
|
|
447
|
+
}
|
|
448
|
+
/**
|
|
449
|
+
* Shows a bare wait indicator, with no panel and no message.
|
|
450
|
+
* @param action - Optional observable; the overlay is dismissed when it emits.
|
|
451
|
+
* @returns `true` if the overlay was brought up by this call.
|
|
452
|
+
*/
|
|
453
|
+
wait(action) {
|
|
454
|
+
return this.setBusy('', -1, 'indeterminate', 'wait', action);
|
|
455
|
+
}
|
|
456
|
+
/**
|
|
457
|
+
* Returns a {@link BusyTimer} that brings the overlay up only if the operation is still running
|
|
458
|
+
* after a debounce delay.
|
|
459
|
+
* @param message - Text to display. Defaults to `'Operazione in corso...'`.
|
|
460
|
+
* @param due - Delay in milliseconds before the overlay appears. Defaults to `100`.
|
|
461
|
+
* @returns A timer that must be disposed with `clear()` when the operation ends.
|
|
462
|
+
*/
|
|
463
|
+
busyTimer(message = 'Operazione in corso...', due = 100) {
|
|
464
|
+
return new BusyTimer(this, due, message);
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* Takes the busy overlay away.
|
|
468
|
+
*
|
|
469
|
+
* By default it waits a short grace period, so that a chain of quick operations does not make
|
|
470
|
+
* the overlay blink between one and the next; any `setBusy()` in the meantime cancels the
|
|
471
|
+
* pending removal. Pass `true` when something is about to be drawn underneath it and the wait
|
|
472
|
+
* would be visible — that is what `DialogService.open()` does.
|
|
473
|
+
* @param immediate - When `true`, removes the overlay without waiting for the grace period.
|
|
474
|
+
* @returns void
|
|
475
|
+
*/
|
|
476
|
+
clearBusy(immediate = false) {
|
|
477
|
+
clearTimeout(this.clearBusyTimer);
|
|
478
|
+
this.clearBusyTimer = undefined;
|
|
479
|
+
if (immediate) {
|
|
480
|
+
this.hideBusy();
|
|
481
|
+
return;
|
|
482
|
+
}
|
|
483
|
+
this.clearBusyTimer = setTimeout(() => {
|
|
484
|
+
this.clearBusyTimer = undefined;
|
|
485
|
+
this.hideBusy();
|
|
486
|
+
}, CLEAR_BUSY_GRACE);
|
|
487
|
+
}
|
|
488
|
+
/**
|
|
489
|
+
* Hides the busy overlay without destroying it, so the next call can reuse the instance.
|
|
490
|
+
* @returns void
|
|
491
|
+
*/
|
|
492
|
+
hideBusy() {
|
|
493
|
+
this.busyActionSubscription?.unsubscribe();
|
|
494
|
+
this.busyActionSubscription = undefined;
|
|
495
|
+
if (!this.busyVisible)
|
|
496
|
+
return;
|
|
497
|
+
this.busyVisible = false;
|
|
498
|
+
this.busyRef?.instance.visible.set(false);
|
|
499
|
+
this.busyRef?.changeDetectorRef.detectChanges();
|
|
500
|
+
}
|
|
501
|
+
/**
|
|
502
|
+
* Returns the busy component, creating and attaching it the first time it is needed.
|
|
503
|
+
* @returns The reused busy component reference.
|
|
504
|
+
*/
|
|
505
|
+
ensureBusy() {
|
|
506
|
+
if (this.busyRef)
|
|
507
|
+
return this.busyRef;
|
|
508
|
+
const ref = createComponent(ShellBusyComponent, { environmentInjector: this.environmentInjector });
|
|
509
|
+
this.appRef.attachView(ref.hostView);
|
|
510
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
511
|
+
this.busyRef = ref;
|
|
512
|
+
return ref;
|
|
513
|
+
}
|
|
514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
|
|
515
|
+
static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: ShellService }); }
|
|
516
|
+
}
|
|
517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellService, decorators: [{
|
|
518
|
+
type: Service
|
|
519
|
+
}] });
|
|
520
|
+
|
|
521
|
+
/*
|
|
522
|
+
* Public API Surface of @arsedizioni/ars-utils/ui.shell
|
|
523
|
+
*/
|
|
524
|
+
|
|
525
|
+
/**
|
|
526
|
+
* Generated bundle index. Do not edit.
|
|
527
|
+
*/
|
|
528
|
+
|
|
529
|
+
export { BusyTimer, ShellBusyComponent, ShellMessageComponent, ShellService };
|
|
530
|
+
//# sourceMappingURL=arsedizioni-ars-utils-ui.shell.mjs.map
|