@arsedizioni/ars-utils 22.1.5 → 22.5.2

package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs

@@ -0,0 +1,517 @@
+import { timer } from 'rxjs';
+import { tap, first } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, output, viewChild, afterNextRender, inject, DestroyRef, HostListener, ApplicationRef, EnvironmentInjector, createComponent, Service } from '@angular/core';
+import { SafeHtmlPipe, SystemUtils } from '@arsedizioni/ars-utils/core';
+
+/**
+ * Shows the busy overlay only if the operation is still running after a debounce delay, so that
+ * an operation that answers in 30 ms never makes the screen flash.
+ *
+ * Whoever creates one owns it: {@link clear} must be called when the operation ends, otherwise
+ * the overlay appears after the fact and stays.
+ */
+class BusyTimer {
+    /**
+     * Arms the timer.
+     * @param shellService - The service that owns the overlay. A `DialogService` is accepted too,
+     *                       since it extends `ShellService`.
+     * @param due          - Delay in milliseconds before the overlay appears. Defaults to `100`.
+     * @param message      - Text to display. Defaults to `'Operazione in corso...'`.
+     */
+    constructor(shellService, due = 100, message = 'Operazione in corso...') {
+        this.shellService = shellService;
+        this.subscription = timer(due).pipe(tap(() => this.shellService.busy(message))).subscribe();
+    }
+    /**
+     * Disarms the timer and takes the overlay away.
+     * @returns void
+     */
+    clear() {
+        this.subscription.unsubscribe();
+        this.shellService.clearBusy();
+    }
+}
+
+/** Circumference of the spinner circle, in user units. Kept here so the template stays arithmetic-free. */
+const SPINNER_CIRCUMFERENCE = 2 * Math.PI * 31.5;
+/**
+ * Overlay that blocks interaction while an operation is running, in the four styles the
+ * applications use: progress bar, spinner, hourglass and bare wait.
+ *
+ * Reproduces `mat-progress-bar` and `mat-progress-spinner` in CSS and SVG rather than importing
+ * them, because this overlay is shown from the boot path — an HTTP interceptor calls it before
+ * any route exists — and `ui.shell` exists precisely so that path costs no Material.
+ *
+ * The instance is created once by {@link ShellService} and then reused: showing and hiding is a
+ * class on the host, never a `createComponent`, so the 40-odd calls a screen costs nothing.
+ */
+class ShellBusyComponent {
+    constructor() {
+        /** Whether the overlay is on screen. Hidden with `display: none`, so it costs no layout. */
+        this.visible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Visual style of the indicator. */
+        this.type = signal('bar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Current progress value (0-100), used when {@link progressMode} is `'determinate'`. */
+        this.progress = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        /** Progress mode of the bar and of the spinner. */
+        this.progressMode = signal('indeterminate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressMode" }] : /* istanbul ignore next */ []));
+        /** Message displayed above the indicator. */
+        this.message = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Circumference of the spinner circle, bound to `stroke-dasharray`. */
+        this.circumference = SPINNER_CIRCUMFERENCE;
+        /** Length of the spinner arc still to be drawn, derived from {@link progress}. */
+        this.dashOffset = computed(() => SPINNER_CIRCUMFERENCE * (1 - Math.min(Math.max(this.progress(), 0), 100) / 100), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Updates the overlay state.
+     *
+     * Same contract as the `BusyDialogComponent` it replaces, down to the two implicit rules that
+     * callers rely on: an empty message keeps the previous text (so `wait()` does not wipe it), and
+     * a progress above zero forces `'determinate'` whatever the caller passed.
+     * @param message      - New message to display. An empty string preserves the current one.
+     * @param progress     - Current progress value (0-100). Above zero it forces determinate mode.
+     * @param progressMode - Progress mode to use. Defaults to `'indeterminate'`.
+     * @param type         - Visual style to use. Defaults to `'bar'`.
+     * @returns void
+     */
+    set(message, progress, progressMode = 'indeterminate', type = 'bar') {
+        if (message)
+            this.message.set(message);
+        if (type)
+            this.type.set(type);
+        this.progress.set(progress);
+        this.progressMode.set(progress > 0 ? 'determinate' : progressMode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellBusyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellBusyComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
+
+/**
+ * The shell's message panel: a modal that looks like a Material dialog and owes nothing to
+ * Material.
+ *
+ * It exists because shell, interceptors, guards and app initializers must be able to say
+ * "the session is gone" before a single route has been loaded, and paying for `mat-dialog`,
+ * `cdk/overlay` and the rest of that stack on the boot path costs the initial bundle more
+ * than every route of the application put together. The look is matched through CSS custom
+ * properties (`--ars-*` first, Material's `--mat-sys-*` next, a literal last), so an
+ * application that themes Material gets the same surface here for free.
+ *
+ * Instantiated imperatively by {@link ShellService}, never declared in a template: that is
+ * what lets an interceptor open it.
+ */
+class ShellMessageComponent {
+    constructor() {
+        /** Emitted when the user dismisses the message, whichever way they did it. */
+        this.closed = output();
+        this.panel = viewChild.required('panel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+        this.okButton = viewChild.required('ok', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "okButton" }] : /* istanbul ignore next */ []));
+        /** Unique id tying the panel to its heading for assistive technology. */
+        this.titleId = `ars-shell-message-title-${Math.random().toString(36).slice(2, 10)}`;
+        /** Current content, with the defaults the shell relies on already applied. */
+        this.data = signal({ message: '', title: 'Informazioni', okCaption: 'Ok', width: 500 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** True for a moment after a successful copy, so the button can acknowledge it. */
+        this.copied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        this.closing = false;
+        afterNextRender(() => this.okButton().nativeElement.focus());
+        inject(DestroyRef).onDestroy(() => {
+            clearTimeout(this.dismissTimer);
+            clearTimeout(this.copiedTimer);
+        });
+    }
+    /**
+     * Replaces the content shown by the panel and restarts the auto-dismiss timer.
+     *
+     * Called on an already open panel by `ShellService.error()` so that a burst of failures
+     * updates one message instead of stacking modals nobody can dismiss.
+     * @param data - The new content to display.
+     * @returns void
+     */
+    setData(data) {
+        this.data.set({ title: 'Informazioni', okCaption: 'Ok', width: 500, ...data });
+        this.scheduleDismiss(this.data().dismissAfter);
+    }
+    /**
+     * Dismisses the panel. Safe to call more than once: only the first call is announced.
+     * @returns void
+     */
+    close() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        clearTimeout(this.dismissTimer);
+        this.closed.emit();
+    }
+    /**
+     * Closes the panel on Escape, mirroring a Material dialog opened with the default config.
+     * @param e - The keyboard event captured at document level.
+     * @returns void
+     */
+    onKeydown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.close();
+            return;
+        }
+        if (e.key === 'Tab')
+            this.trapFocus(e);
+    }
+    /**
+     * Keeps Tab inside the panel while the message is up.
+     *
+     * A hand-rolled two-element version of what `cdk/a11y` does, which is all this panel needs:
+     * it never holds more than the copy button and the dismiss button.
+     * @param e - The Tab keydown event.
+     * @returns void
+     */
+    trapFocus(e) {
+        const focusable = Array.from(this.panel().nativeElement.querySelectorAll('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'));
+        if (!focusable.length)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey && (active === first || !this.panel().nativeElement.contains(active))) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    /**
+     * (Re)schedules the auto-dismiss timer, cancelling any pending one so a timer armed for an
+     * earlier message can never close a newer one.
+     * @param dismissAfter - Delay in milliseconds; no-op when falsy.
+     * @returns void
+     */
+    scheduleDismiss(dismissAfter) {
+        clearTimeout(this.dismissTimer);
+        this.dismissTimer = undefined;
+        if (dismissAfter)
+            this.dismissTimer = setTimeout(() => this.close(), dismissAfter);
+    }
+    /**
+     * Copies the message and its details to the clipboard, as both HTML and plain text.
+     *
+     * Unlike `InfoDialogComponent` there is no toast to report the outcome — the shell has no
+     * toast — so the button itself acknowledges it for a moment.
+     * @returns A promise that resolves once the copy has been attempted.
+     */
+    async copy() {
+        const content = this.panel().nativeElement.querySelector('.content');
+        if (!content)
+            return;
+        try {
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([content.innerHTML], { type: 'text/html' }),
+                    'text/plain': new Blob([content.innerText], { type: 'text/plain' })
+                })
+            ]);
+            this.copied.set(true);
+            clearTimeout(this.copiedTimer);
+            this.copiedTimer = setTimeout(() => this.copied.set(false), 1500);
+        }
+        catch {
+            // Clipboard permission denied or the document is not focused: nothing worth interrupting
+            // the user for, and the text is on screen anyway.
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellMessageComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], 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: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/** Grace period before the busy overlay is actually taken away, in milliseconds. */
+const CLEAR_BUSY_GRACE = 500;
+/**
+ * Everything the application can say to the user without asking anything back: a message, an
+ * error, and the wait overlay. No Angular Material behind any of it.
+ *
+ * `DialogService` extends this class, so a route component injects `DialogService` and has both
+ * halves; shell, HTTP interceptors, route guards and app initializers inject `ShellService` and
+ * pay for neither `mat-dialog` nor `cdk/overlay` on the boot path — measured at 445 KB of the
+ * 905 KB initial bundle on myARS, more than every route of the application put together.
+ *
+ * The methods keep the parameter order of the `DialogService` ones they came from, so no call
+ * site changed when they moved here.
+ *
+ * ## Stacking
+ *
+ * Outside the CDK overlay stack the order is a fixed z-index: the busy overlay sits at 1090 and
+ * the message at 1100, both above the `cdk-overlay-container` (1000). So an error raised while a
+ * Material dialog is open lands on top of it, which is what an error should do, and the busy
+ * overlay covers the dialog it belongs to. The one case a fixed number cannot express is a dialog
+ * opened while the overlay is still up — `DialogService.open()` takes the busy away immediately
+ * rather than with the grace period, precisely so that case cannot happen.
+ */
+class ShellService {
+    constructor() {
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.busyVisible = false;
+    }
+    // ---------------------------------------------------------------------------
+    // Messages
+    // ---------------------------------------------------------------------------
+    /**
+     * Shows an informational message.
+     * @param message      - HTML message to display.
+     * @param title        - Heading. Defaults to `'Informazioni'`.
+     * @param okCaption    - Dismiss button label. Defaults to `'Ok'`.
+     * @param width        - Maximum panel width in pixels. Defaults to `500`.
+     * @param dismissAfter - Auto-close delay in milliseconds (optional).
+     * @param details      - Optional secondary details text.
+     * @returns A handle over the open message, or `null` outside the browser.
+     */
+    info(message, title = 'Informazioni', okCaption = 'Ok', width = 500, dismissAfter, details) {
+        this.clearBusy();
+        return this.showMessage('info', { message, title, okCaption, width, dismissAfter, details });
+    }
+    /**
+     * Shows an error message. When one is already on screen its content is replaced in place: a
+     * failing API answers many requests at once, and each of them must not add a panel of its own.
+     * @param message      - HTML error message to display.
+     * @param log          - Optional technical log or stack trace shown in the details panel.
+     * @param title        - Heading. Defaults to `'Errore'`.
+     * @param okCaption    - Dismiss button label. Defaults to `'Ok'`.
+     * @param width        - Maximum panel width in pixels. Defaults to `500`.
+     * @param dismissAfter - Auto-close delay in milliseconds (optional).
+     * @returns A handle over the open message, or `null` outside the browser.
+     */
+    error(message, log, title = 'Errore', okCaption = 'Ok', width = 500, dismissAfter) {
+        this.clearBusy();
+        return this.showMessage('error', { message, title, okCaption, width, dismissAfter, details: log });
+    }
+    /**
+     * Closes the message currently on screen, if any. Does not touch the busy overlay.
+     * @returns void
+     */
+    closeMessage() {
+        if (!this.messageRef)
+            return;
+        const ref = this.messageRef;
+        this.messageRef = undefined;
+        this.messageKind = undefined;
+        this.appRef.detachView(ref.hostView);
+        ref.destroy();
+        if (this.previousOverflow !== undefined) {
+            document.body.style.overflow = this.previousOverflow;
+            this.previousOverflow = undefined;
+        }
+        this.previouslyFocused?.focus();
+        this.previouslyFocused = undefined;
+        this.resolveClosed?.();
+        this.resolveClosed = undefined;
+    }
+    /**
+     * Opens the message panel, or updates the one already open when it is showing the same kind of
+     * message.
+     * @param kind - Whether this is an informational or an error message.
+     * @param data - The content to display.
+     * @returns A handle over the open message, or `null` outside the browser.
+     */
+    showMessage(kind, data) {
+        if (!SystemUtils.isBrowser())
+            return null;
+        if (this.messageRef && this.messageKind === kind) {
+            this.messageRef.instance.setData(data);
+            this.messageRef.changeDetectorRef.detectChanges();
+            return this.messageHandle();
+        }
+        // A message of a different kind replaces the one on screen rather than stacking on it.
+        this.closeMessage();
+        const ref = createComponent(ShellMessageComponent, { environmentInjector: this.environmentInjector });
+        ref.instance.setData(data);
+        ref.instance.closed.subscribe(() => this.closeMessage());
+        this.previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+        this.previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.appRef.attachView(ref.hostView);
+        document.body.appendChild(ref.location.nativeElement);
+        this.messageRef = ref;
+        this.messageKind = kind;
+        return this.messageHandle();
+    }
+    /**
+     * Builds the handle returned to callers, wiring its `closed` promise to the current message.
+     * @returns The handle over the message currently on screen.
+     */
+    messageHandle() {
+        const closed = new Promise(resolve => { this.resolveClosed = resolve; });
+        return { close: () => this.closeMessage(), closed };
+    }
+    // ---------------------------------------------------------------------------
+    // Busy overlay
+    // ---------------------------------------------------------------------------
+    /**
+     * Shows or updates the busy overlay.
+     *
+     * Called dozens of times per screen, so it creates nothing after the first time: the component
+     * is built once and then kept, and showing it again is a class on the host element. The state
+     * is written to signals and checked synchronously before returning, so the message on screen is
+     * always the last one asked for — a second `busy()` in the same task never leaves the previous
+     * text behind.
+     * @param message      - Text to display. An empty string keeps the current one.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress mode. Defaults to `'indeterminate'`.
+     * @param type         - Visual style of the overlay. Defaults to `'bar'`.
+     * @param action       - Optional observable; the overlay is dismissed when it first emits. It
+     *                       replaces the one passed to a previous call, which is unsubscribed.
+     * @returns `true` if the overlay was brought up by this call, `false` if it was already up.
+     */
+    setBusy(message, progress = -1, progressMode = 'indeterminate', type = 'bar', action) {
+        if (!SystemUtils.isBrowser())
+            return false;
+        // Cancel any pending clearBusy(): it must never take away an overlay just asked for.
+        clearTimeout(this.clearBusyTimer);
+        this.clearBusyTimer = undefined;
+        const created = !this.busyVisible;
+        const ref = this.ensureBusy();
+        ref.instance.set(message, progress, progressMode, type);
+        ref.instance.visible.set(true);
+        this.busyVisible = true;
+        ref.changeDetectorRef.detectChanges();
+        // The action always replaces the previous one. Keeping the first, as the previous
+        // implementation did, meant the overlay outlived the operation that was actually running.
+        this.busyActionSubscription?.unsubscribe();
+        this.busyActionSubscription = action?.pipe(first()).subscribe(() => this.clearBusy());
+        return created;
+    }
+    /**
+     * Shows or updates the busy overlay using the progress-bar style.
+     * @param message      - Text to display inside the overlay.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress mode. Defaults to `'indeterminate'`.
+     * @param action       - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if the overlay was brought up by this call.
+     */
+    busy(message, progress = -1, progressMode = 'indeterminate', action) {
+        return this.setBusy(message, progress, progressMode, 'bar', action);
+    }
+    /**
+     * Shows or updates the busy overlay using the spinner style.
+     * @param message      - Text to display inside the overlay.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress mode. Defaults to `'indeterminate'`.
+     * @param action       - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if the overlay was brought up by this call.
+     */
+    busySpinner(message, progress = -1, progressMode = 'indeterminate', action) {
+        return this.setBusy(message, progress, progressMode, 'spinner', action);
+    }
+    /**
+     * Shows or updates the busy overlay using the hourglass style.
+     * @param message - Text to display inside the overlay.
+     * @param action  - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if the overlay was brought up by this call.
+     */
+    busyHourglass(message, action) {
+        return this.setBusy(message, -1, 'indeterminate', 'hourglass', action);
+    }
+    /**
+     * Shows a bare wait indicator, with no panel and no message.
+     * @param action - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if the overlay was brought up by this call.
+     */
+    wait(action) {
+        return this.setBusy('', -1, 'indeterminate', 'wait', action);
+    }
+    /**
+     * Returns a {@link BusyTimer} that brings the overlay up only if the operation is still running
+     * after a debounce delay.
+     * @param message - Text to display. Defaults to `'Operazione in corso...'`.
+     * @param due     - Delay in milliseconds before the overlay appears. Defaults to `100`.
+     * @returns A timer that must be disposed with `clear()` when the operation ends.
+     */
+    busyTimer(message = 'Operazione in corso...', due = 100) {
+        return new BusyTimer(this, due, message);
+    }
+    /**
+     * Takes the busy overlay away.
+     *
+     * By default it waits a short grace period, so that a chain of quick operations does not make
+     * the overlay blink between one and the next; any `setBusy()` in the meantime cancels the
+     * pending removal. Pass `true` when something is about to be drawn underneath it and the wait
+     * would be visible — that is what `DialogService.open()` does.
+     * @param immediate - When `true`, removes the overlay without waiting for the grace period.
+     * @returns void
+     */
+    clearBusy(immediate = false) {
+        clearTimeout(this.clearBusyTimer);
+        this.clearBusyTimer = undefined;
+        if (immediate) {
+            this.hideBusy();
+            return;
+        }
+        this.clearBusyTimer = setTimeout(() => {
+            this.clearBusyTimer = undefined;
+            this.hideBusy();
+        }, CLEAR_BUSY_GRACE);
+    }
+    /**
+     * Hides the busy overlay without destroying it, so the next call can reuse the instance.
+     * @returns void
+     */
+    hideBusy() {
+        this.busyActionSubscription?.unsubscribe();
+        this.busyActionSubscription = undefined;
+        if (!this.busyVisible)
+            return;
+        this.busyVisible = false;
+        this.busyRef?.instance.visible.set(false);
+        this.busyRef?.changeDetectorRef.detectChanges();
+    }
+    /**
+     * Returns the busy component, creating and attaching it the first time it is needed.
+     * @returns The reused busy component reference.
+     */
+    ensureBusy() {
+        if (this.busyRef)
+            return this.busyRef;
+        const ref = createComponent(ShellBusyComponent, { environmentInjector: this.environmentInjector });
+        this.appRef.attachView(ref.hostView);
+        document.body.appendChild(ref.location.nativeElement);
+        this.busyRef = ref;
+        return ref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: ShellService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ShellService, decorators: [{
+            type: Service
+        }] });
+
+/*
+ * Public API Surface of @arsedizioni/ars-utils/ui.shell
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BusyTimer, ShellBusyComponent, ShellMessageComponent, ShellService };
+//# sourceMappingURL=arsedizioni-ars-utils-ui.shell.mjs.map