@muxima-ui/core 1.3.0 → 1.4.1

package/README.md

@@ -63,6 +63,7 @@ Cada componente tem o seu ponto de entrada, para só importares o que usas:
 | `@muxima-ui/core/menu` | `MX_MENU` |
 | `@muxima-ui/core/popover` | `MX_POPOVER` |
 | `@muxima-ui/core/tooltip` | `MxTooltip` |
+| `@muxima-ui/core/tour` | `MxTour`, `MxTourAnchor` (visita guiada) |
 | `@muxima-ui/core/alert` | `MX_ALERT` |
 | `@muxima-ui/core/progress` | `MxProgress`, `MxSpinner` |
 | `@muxima-ui/core/skeleton` | `MxSkeleton` |

package/fesm2022/muxima-ui-core-tour.mjs

@@ -0,0 +1,536 @@
+import * as i0 from '@angular/core';
+import { signal, InjectionToken, inject, viewChild, NgZone, ChangeDetectorRef, DestroyRef, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, computed, ElementRef, Injectable, input, Directive } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { createOverlayRef, createNoopScrollStrategy, createGlobalPositionStrategy } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { MxButton } from '@muxima-ui/core/button';
+import { mxUniqueId } from '@muxima-ui/core/form-field';
+
+const MX_TOUR_LABELS = {
+    next: 'Seguinte',
+    previous: 'Anterior',
+    done: 'Concluir',
+    skip: 'Saltar',
+    close: 'Fechar a visita guiada',
+    progress: (current, total) => `Passo ${current} de ${total}`,
+};
+/** Referência a uma visita em curso. */
+class MxTourRef {
+    steps;
+    onClose;
+    /** Passo actual (base 0). */
+    index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Resolve quando a visita fecha. */
+    afterClosed;
+    labels;
+    dismissible;
+    showDots;
+    resolve;
+    done = false;
+    constructor(steps, options, onClose) {
+        this.steps = steps;
+        this.onClose = onClose;
+        this.labels = { ...MX_TOUR_LABELS, ...options.labels };
+        this.dismissible = options.dismissible ?? true;
+        this.showDots = options.showDots ?? true;
+        this.index.set(Math.min(Math.max(options.startAt ?? 0, 0), Math.max(steps.length - 1, 0)));
+        this.afterClosed = new Promise((r) => (this.resolve = r));
+    }
+    get isOpen() {
+        return !this.done;
+    }
+    get isLast() {
+        return this.index() === this.steps.length - 1;
+    }
+    next() {
+        if (this.isLast)
+            this.close(true);
+        else
+            this.goTo(this.index() + 1);
+    }
+    previous() {
+        this.goTo(this.index() - 1);
+    }
+    goTo(index) {
+        if (this.done || index < 0 || index >= this.steps.length)
+            return;
+        this.index.set(index);
+    }
+    /** Fecha a visita; `completed` diz se foi até ao fim. */
+    close(completed = false) {
+        if (this.done)
+            return;
+        this.done = true;
+        const result = { completed, index: this.index() };
+        this.onClose(result);
+        this.resolve(result);
+    }
+}
+const MX_TOUR_REF = new InjectionToken('MX_TOUR_REF');
+/** requestAnimationFrame, ou um setTimeout onde não exista (testes, SSR). */
+const nextFrame = (cb) => typeof requestAnimationFrame === 'function' ? requestAnimationFrame(cb) : setTimeout(cb, 16);
+const cancelFrame = (id) => typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame(id) : clearTimeout(id);
+const GAP = 12;
+const MARGIN = 12;
+/** Painel da visita: o destaque, o fundo escurecido e o cartão do passo. Uso interno. */
+class MxTourPanel {
+    ref = inject(MX_TOUR_REF);
+    tour = inject(MxTour);
+    titleId = mxUniqueId('mx-tour-title');
+    bodyId = mxUniqueId('mx-tour-body');
+    progressId = mxUniqueId('mx-tour-progress');
+    card = viewChild('card', ...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+    zone = inject(NgZone);
+    cdr = inject(ChangeDetectorRef);
+    /** Passo que está desenhado (muda depois de beforeShow). */
+    step = signal(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    target = signal(null, ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    spot = signal(null, ...(ngDevMode ? [{ debugName: "spot" }] : /* istanbul ignore next */ []));
+    pos = signal({ top: 0, left: 0 }, ...(ngDevMode ? [{ debugName: "pos" }] : /* istanbul ignore next */ []));
+    placement = signal('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    frame = 0;
+    resizeObserver;
+    showToken = 0;
+    constructor() {
+        const destroy = inject(DestroyRef);
+        // mostra o passo sempre que o índice muda
+        effect(() => {
+            const i = this.ref.index();
+            untracked(() => void this.show(i));
+        });
+        afterNextRender(() => {
+            const schedule = () => this.schedule();
+            this.zone.runOutsideAngular(() => {
+                window.addEventListener('scroll', schedule, { capture: true, passive: true });
+                window.addEventListener('resize', schedule, { passive: true });
+            });
+            if (typeof ResizeObserver !== 'undefined')
+                this.resizeObserver = new ResizeObserver(schedule);
+            destroy.onDestroy(() => {
+                window.removeEventListener('scroll', schedule, { capture: true });
+                window.removeEventListener('resize', schedule);
+                this.resizeObserver?.disconnect();
+                cancelFrame(this.frame);
+            });
+        });
+    }
+    async show(index) {
+        const token = ++this.showToken;
+        const st = this.ref.steps[index];
+        if (!st)
+            return;
+        // só se esconde antes do primeiro passo (para o posicionar); depois, esconder
+        // o cartão tirava-lhe o foco a meio da visita
+        if (!this.step())
+            this.ready.set(false);
+        try {
+            await st.beforeShow?.();
+        }
+        catch {
+            // um beforeShow que falha não deve prender a visita
+        }
+        // espera um frame para o DOM reflectir o que beforeShow mudou
+        await new Promise((r) => nextFrame(r));
+        if (token !== this.showToken || !this.ref.isOpen)
+            return;
+        // o alvo pode só aparecer depois de beforeShow (ex.: conteúdo de um separador)
+        let el = this.tour.resolve(st.target);
+        for (let i = 0; !el && st.target && i < 5; i++) {
+            await new Promise((r) => nextFrame(r));
+            if (token !== this.showToken || !this.ref.isOpen)
+                return;
+            el = this.tour.resolve(st.target);
+        }
+        this.resizeObserver?.disconnect();
+        this.target.set(el);
+        if (el) {
+            this.resizeObserver?.observe(el);
+            const r = el.getBoundingClientRect();
+            const fora = r.top < 0 || r.bottom > window.innerHeight || r.left < 0 || r.right > window.innerWidth;
+            if (fora) {
+                const reduzir = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+                el.scrollIntoView?.({ block: 'center', inline: 'nearest', behavior: reduzir ? 'auto' : 'smooth' });
+            }
+        }
+        this.step.set(st);
+        // desenha já o cartão para o medir, posicionar e dar-lhe o foco
+        this.cdr.detectChanges();
+        const card = this.card()?.nativeElement;
+        if (card)
+            this.resizeObserver?.observe(card);
+        this.update();
+        this.ready.set(true);
+        this.cdr.detectChanges();
+        card?.focus({ preventScroll: true });
+    }
+    schedule() {
+        cancelFrame(this.frame);
+        this.frame = nextFrame(() => this.zone.run(() => this.update()));
+    }
+    update() {
+        const st = this.step();
+        const el = this.target();
+        const r = el?.getBoundingClientRect();
+        if (!st || !r || (r.width === 0 && r.height === 0)) {
+            this.spot.set(null);
+            return;
+        }
+        const pad = st.padding ?? 6;
+        const spot = { top: r.top - pad, left: r.left - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
+        this.spot.set(spot);
+        const card = this.card()?.nativeElement;
+        const cw = card?.offsetWidth ?? 320;
+        const ch = card?.offsetHeight ?? 160;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const rtl = getComputedStyle(document.documentElement).direction === 'rtl';
+        const side = (p) => rtl && (p === 'start' || p === 'end') ? (p === 'start' ? 'end' : 'start') : p;
+        const fits = {
+            bottom: spot.top + spot.height + GAP + ch <= vh - MARGIN,
+            top: spot.top - GAP - ch >= MARGIN,
+            end: spot.left + spot.width + GAP + cw <= vw - MARGIN,
+            start: spot.left - GAP - cw >= MARGIN,
+        };
+        const wanted = st.placement && st.placement !== 'auto' ? side(st.placement) : null;
+        const order = wanted
+            ? [wanted, 'bottom', 'top', 'end', 'start']
+            : ['bottom', 'top', 'end', 'start'];
+        const p = order.find((o) => fits[o]) ?? 'bottom';
+        let top;
+        let left;
+        if (p === 'bottom' || p === 'top') {
+            top = p === 'bottom' ? spot.top + spot.height + GAP : spot.top - GAP - ch;
+            left = spot.left + spot.width / 2 - cw / 2;
+        }
+        else {
+            left = p === 'end' ? spot.left + spot.width + GAP : spot.left - GAP - cw;
+            top = spot.top + spot.height / 2 - ch / 2;
+        }
+        const clamp = (v, min, max) => Math.min(Math.max(v, min), Math.max(min, max));
+        this.placement.set(rtl && (p === 'start' || p === 'end') ? (p === 'start' ? 'end' : 'start') : p);
+        this.pos.set({ top: clamp(top, MARGIN, vh - ch - MARGIN), left: clamp(left, MARGIN, vw - cw - MARGIN) });
+    }
+    onKeydown(event) {
+        const t = event.target;
+        const editavel = t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName);
+        if (event.key === 'Escape' && this.ref.dismissible) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.ref.close(false);
+        }
+        else if (!editavel && event.key === 'ArrowRight' && !this.ref.isLast) {
+            event.preventDefault();
+            this.ref.next();
+        }
+        else if (!editavel && event.key === 'ArrowLeft' && this.ref.index() > 0) {
+            event.preventDefault();
+            this.ref.previous();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTourPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxTourPanel, isStandalone: true, selector: "mx-tour-panel", host: { classAttribute: "mx-tour-layer" }, viewQueries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (spot(); as s) {
+      <div
+        class="mx-tour-spotlight"
+        aria-hidden="true"
+        [style.top.px]="s.top"
+        [style.left.px]="s.left"
+        [style.width.px]="s.width"
+        [style.height.px]="s.height"
+      ></div>
+    } @else {
+      <div class="mx-tour-dim" aria-hidden="true"></div>
+    }
+    @if (step(); as st) {
+      <div
+        #card
+        class="mx-tour-card"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        cdkTrapFocus
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="progressId + ' ' + bodyId"
+        [attr.data-placement]="spot() ? placement() : 'center'"
+        [style.top.px]="spot() ? pos().top : null"
+        [style.left.px]="spot() ? pos().left : null"
+        [style.visibility]="ready() ? null : 'hidden'"
+        (keydown)="onKeydown($event)"
+      >
+        <div class="mx-tour-head">
+          <p class="mx-tour-progress" [id]="progressId">
+            {{ ref.labels.progress(ref.index() + 1, ref.steps.length) }}
+          </p>
+          @if (ref.dismissible) {
+            <button
+              type="button"
+              class="mx-tour-close"
+              [attr.aria-label]="ref.labels.close"
+              (click)="ref.close(false)"
+            >
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path
+                  d="M4 4l8 8M12 4l-8 8"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          }
+        </div>
+        <h2 class="mx-tour-title" [id]="titleId">{{ st.title }}</h2>
+        <div class="mx-tour-body" [id]="bodyId">
+          @if (st.template) {
+            <ng-container
+              *ngTemplateOutlet="st.template; context: { $implicit: st, index: ref.index(), tour: ref }"
+            />
+          } @else if (st.content) {
+            <p>{{ st.content }}</p>
+          }
+        </div>
+        <div class="mx-tour-foot">
+          @if (ref.showDots && ref.steps.length > 1) {
+            <span class="mx-tour-dots" aria-hidden="true">
+              @for (s of ref.steps; track $index) {
+                <span class="mx-tour-dot" [attr.data-active]="$index === ref.index() ? '' : null"></span>
+              }
+            </span>
+          }
+          <span class="mx-tour-actions">
+            @if (ref.dismissible && !ref.isLast) {
+              <button mxButton variant="ghost" size="sm" type="button" (click)="ref.close(false)">
+                {{ ref.labels.skip }}
+              </button>
+            }
+            @if (ref.index() > 0) {
+              <button mxButton variant="outline" size="sm" type="button" (click)="ref.previous()">
+                {{ ref.labels.previous }}
+              </button>
+            }
+            <button mxButton size="sm" type="button" (click)="ref.next()">
+              {{ ref.isLast ? ref.labels.done : ref.labels.next }}
+            </button>
+          </span>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MxButton, selector: "button[mxButton], a[mxButton]", inputs: ["variant", "size", "icon", "loading", "disabled"], exportAs: ["mxButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTourPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-tour-panel',
+                    imports: [NgTemplateOutlet, CdkTrapFocus, MxButton],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'mx-tour-layer' },
+                    template: `
+    @if (spot(); as s) {
+      <div
+        class="mx-tour-spotlight"
+        aria-hidden="true"
+        [style.top.px]="s.top"
+        [style.left.px]="s.left"
+        [style.width.px]="s.width"
+        [style.height.px]="s.height"
+      ></div>
+    } @else {
+      <div class="mx-tour-dim" aria-hidden="true"></div>
+    }
+    @if (step(); as st) {
+      <div
+        #card
+        class="mx-tour-card"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        cdkTrapFocus
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="progressId + ' ' + bodyId"
+        [attr.data-placement]="spot() ? placement() : 'center'"
+        [style.top.px]="spot() ? pos().top : null"
+        [style.left.px]="spot() ? pos().left : null"
+        [style.visibility]="ready() ? null : 'hidden'"
+        (keydown)="onKeydown($event)"
+      >
+        <div class="mx-tour-head">
+          <p class="mx-tour-progress" [id]="progressId">
+            {{ ref.labels.progress(ref.index() + 1, ref.steps.length) }}
+          </p>
+          @if (ref.dismissible) {
+            <button
+              type="button"
+              class="mx-tour-close"
+              [attr.aria-label]="ref.labels.close"
+              (click)="ref.close(false)"
+            >
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path
+                  d="M4 4l8 8M12 4l-8 8"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          }
+        </div>
+        <h2 class="mx-tour-title" [id]="titleId">{{ st.title }}</h2>
+        <div class="mx-tour-body" [id]="bodyId">
+          @if (st.template) {
+            <ng-container
+              *ngTemplateOutlet="st.template; context: { $implicit: st, index: ref.index(), tour: ref }"
+            />
+          } @else if (st.content) {
+            <p>{{ st.content }}</p>
+          }
+        </div>
+        <div class="mx-tour-foot">
+          @if (ref.showDots && ref.steps.length > 1) {
+            <span class="mx-tour-dots" aria-hidden="true">
+              @for (s of ref.steps; track $index) {
+                <span class="mx-tour-dot" [attr.data-active]="$index === ref.index() ? '' : null"></span>
+              }
+            </span>
+          }
+          <span class="mx-tour-actions">
+            @if (ref.dismissible && !ref.isLast) {
+              <button mxButton variant="ghost" size="sm" type="button" (click)="ref.close(false)">
+                {{ ref.labels.skip }}
+              </button>
+            }
+            @if (ref.index() > 0) {
+              <button mxButton variant="outline" size="sm" type="button" (click)="ref.previous()">
+                {{ ref.labels.previous }}
+              </button>
+            }
+            <button mxButton size="sm" type="button" (click)="ref.next()">
+              {{ ref.isLast ? ref.labels.done : ref.labels.next }}
+            </button>
+          </span>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { card: [{ type: i0.ViewChild, args: ['card', { isSignal: true }] }] } });
+/**
+ * Visita guiada: destaca elementos da página, um passo de cada vez, com um cartão
+ * que explica cada um. O cartão é um diálogo modal: o foco fica nele, Escape fecha
+ * e, no fim, o foco volta para onde estava.
+ *
+ * ```html
+ * <input mxInput mxTourAnchor="pesquisa" aria-label="Pesquisar" />
+ * <button mxButton mxTourAnchor="nova">Nova factura</button>
+ * ```
+ *
+ * ```ts
+ * private readonly tour = inject(MxTour);
+ * mostrar() {
+ *   this.tour.start([
+ *     { title: 'Bem-vindo', content: 'Mostramos o essencial em 2 passos.' },
+ *     { target: 'pesquisa', title: 'Pesquisa', content: 'Procura clientes e facturas.' },
+ *     { target: 'nova', title: 'Nova factura', content: 'Começa aqui.' },
+ *   ]).afterClosed.then((r) => r.completed && guardarQueViu());
+ * }
+ * ```
+ */
+class MxTour {
+    injector = inject(Injector);
+    anchors = new Map();
+    overlayRef;
+    /** A visita em curso, ou null. */
+    active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => !!this.active(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Começa uma visita. Se já houver uma aberta, fecha-a primeiro. */
+    start(steps, options = {}) {
+        this.active()?.close(false);
+        const before = document.activeElement;
+        const ref = new MxTourRef(steps, options, () => {
+            this.overlayRef?.dispose();
+            this.overlayRef = undefined;
+            this.active.set(null);
+            if (before && before.isConnected)
+                before.focus({ preventScroll: true });
+        });
+        if (!steps.length) {
+            ref.close(true);
+            return ref;
+        }
+        this.overlayRef = createOverlayRef(this.injector, {
+            positionStrategy: createGlobalPositionStrategy(this.injector).top('0').left('0'),
+            scrollStrategy: createNoopScrollStrategy(),
+            width: '100%',
+            height: '100%',
+            panelClass: 'mx-tour-pane',
+        });
+        const injector = Injector.create({
+            providers: [{ provide: MX_TOUR_REF, useValue: ref }],
+            parent: this.injector,
+        });
+        this.overlayRef.attach(new ComponentPortal(MxTourPanel, null, injector));
+        this.active.set(ref);
+        return ref;
+    }
+    /** Regista um elemento com um nome (usado por `mxTourAnchor`). */
+    register(name, element) {
+        this.anchors.set(name, element);
+    }
+    unregister(name, element) {
+        if (this.anchors.get(name) === element)
+            this.anchors.delete(name);
+    }
+    /** Encontra o elemento de um alvo: nome de âncora, selector CSS, elemento ou ElementRef. */
+    resolve(target) {
+        if (!target)
+            return null;
+        if (target instanceof ElementRef)
+            return target.nativeElement;
+        if (typeof target !== 'string')
+            return target;
+        return this.anchors.get(target) ?? safeQuery(target);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTour, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTour, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTour, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function safeQuery(selector) {
+    try {
+        return document.querySelector(selector);
+    }
+    catch {
+        return null;
+    }
+}
+/** Dá um nome a um elemento para ser alvo de um passo: `mxTourAnchor="pesquisa"`. */
+class MxTourAnchor {
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'mxTourAnchor' });
+    tour = inject(MxTour);
+    el = inject(ElementRef).nativeElement;
+    constructor() {
+        effect((onCleanup) => {
+            const name = this.name();
+            this.tour.register(name, this.el);
+            onCleanup(() => this.tour.unregister(name, this.el));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTourAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: MxTourAnchor, isStandalone: true, selector: "[mxTourAnchor]", inputs: { name: { classPropertyName: "name", publicName: "mxTourAnchor", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["mxTourAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxTourAnchor, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mxTourAnchor]', exportAs: 'mxTourAnchor' }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "mxTourAnchor", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MX_TOUR_LABELS, MxTour, MxTourAnchor, MxTourPanel, MxTourRef };
+//# sourceMappingURL=muxima-ui-core-tour.mjs.map

package/fesm2022/muxima-ui-core-tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxima-ui-core-tour.mjs","sources":["../../../projects/core/tour/tour.ts","../../../projects/core/tour/muxima-ui-core-tour.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Injectable,\n  InjectionToken,\n  Injector,\n  NgZone,\n  TemplateRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport {\n  OverlayRef,\n  createGlobalPositionStrategy,\n  createNoopScrollStrategy,\n  createOverlayRef,\n} from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { MxButton } from '@muxima-ui/core/button';\nimport { mxUniqueId } from '@muxima-ui/core/form-field';\n\n/** Onde fica o cartão em relação ao elemento destacado. */\nexport type MxTourPlacement = 'auto' | 'top' | 'bottom' | 'start' | 'end';\n\n/** Nome de um `mxTourAnchor`, um elemento, ou um ElementRef. */\nexport type MxTourTarget = string | Element | ElementRef<Element>;\n\n/** Contexto do modelo de conteúdo de um passo. */\nexport interface MxTourStepContext {\n  $implicit: MxTourStep;\n  index: number;\n  tour: MxTourRef;\n}\n\n/** Um passo da visita guiada. */\nexport interface MxTourStep {\n  /** Elemento a destacar. Sem alvo (ou se não existir), o cartão aparece ao centro. */\n  target?: MxTourTarget | null;\n  title: string;\n  /** Texto do passo. */\n  content?: string;\n  /** Conteúdo rico, em vez de `content`. */\n  template?: TemplateRef<MxTourStepContext>;\n  placement?: MxTourPlacement;\n  /** Espaço à volta do elemento destacado, em px. Por omissão 6. */\n  padding?: number;\n  /** Corre antes de mostrar o passo (ex.: abrir um separador). Pode devolver uma Promise. */\n  beforeShow?: () => void | Promise<unknown>;\n}\n\nexport interface MxTourLabels {\n  next: string;\n  previous: string;\n  done: string;\n  skip: string;\n  close: string;\n  /** Texto do progresso, por exemplo \"Passo 2 de 5\". */\n  progress: (current: number, total: number) => string;\n}\n\nexport const MX_TOUR_LABELS: MxTourLabels = {\n  next: 'Seguinte',\n  previous: 'Anterior',\n  done: 'Concluir',\n  skip: 'Saltar',\n  close: 'Fechar a visita guiada',\n  progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nexport interface MxTourOptions {\n  /** Passo inicial (base 0). */\n  startAt?: number;\n  labels?: Partial<MxTourLabels>;\n  /** false: sem Saltar, sem botão de fechar e sem Escape (a visita tem de ser feita até ao fim). */\n  dismissible?: boolean;\n  /** Mostra os pontos de progresso. Por omissão true. */\n  showDots?: boolean;\n}\n\n/** Como terminou a visita. */\nexport interface MxTourResult {\n  /** true se chegou ao fim com Concluir. */\n  completed: boolean;\n  /** Último passo mostrado (base 0). */\n  index: number;\n}\n\n/** Referência a uma visita em curso. */\nexport class MxTourRef {\n  /** Passo actual (base 0). */\n  readonly index = signal(0);\n  /** Resolve quando a visita fecha. */\n  readonly afterClosed: Promise<MxTourResult>;\n  readonly labels: MxTourLabels;\n  readonly dismissible: boolean;\n  readonly showDots: boolean;\n  private resolve!: (r: MxTourResult) => void;\n  private done = false;\n\n  constructor(\n    readonly steps: readonly MxTourStep[],\n    options: MxTourOptions,\n    private readonly onClose: (r: MxTourResult) => void,\n  ) {\n    this.labels = { ...MX_TOUR_LABELS, ...options.labels };\n    this.dismissible = options.dismissible ?? true;\n    this.showDots = options.showDots ?? true;\n    this.index.set(Math.min(Math.max(options.startAt ?? 0, 0), Math.max(steps.length - 1, 0)));\n    this.afterClosed = new Promise((r) => (this.resolve = r));\n  }\n\n  get isOpen(): boolean {\n    return !this.done;\n  }\n  get isLast(): boolean {\n    return this.index() === this.steps.length - 1;\n  }\n\n  next(): void {\n    if (this.isLast) this.close(true);\n    else this.goTo(this.index() + 1);\n  }\n  previous(): void {\n    this.goTo(this.index() - 1);\n  }\n  goTo(index: number): void {\n    if (this.done || index < 0 || index >= this.steps.length) return;\n    this.index.set(index);\n  }\n  /** Fecha a visita; `completed` diz se foi até ao fim. */\n  close(completed = false): void {\n    if (this.done) return;\n    this.done = true;\n    const result = { completed, index: this.index() };\n    this.onClose(result);\n    this.resolve(result);\n  }\n}\n\nconst MX_TOUR_REF = new InjectionToken<MxTourRef>('MX_TOUR_REF');\n\ninterface Box {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\n/** requestAnimationFrame, ou um setTimeout onde não exista (testes, SSR). */\nconst nextFrame = (cb: () => void): number =>\n  typeof requestAnimationFrame === 'function' ? requestAnimationFrame(cb) : (setTimeout(cb, 16) as unknown as number);\nconst cancelFrame = (id: number): void =>\n  typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame(id) : clearTimeout(id);\n\nconst GAP = 12;\nconst MARGIN = 12;\n\n/** Painel da visita: o destaque, o fundo escurecido e o cartão do passo. Uso interno. */\n@Component({\n  selector: 'mx-tour-panel',\n  imports: [NgTemplateOutlet, CdkTrapFocus, MxButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'mx-tour-layer' },\n  template: `\n    @if (spot(); as s) {\n      <div\n        class=\"mx-tour-spotlight\"\n        aria-hidden=\"true\"\n        [style.top.px]=\"s.top\"\n        [style.left.px]=\"s.left\"\n        [style.width.px]=\"s.width\"\n        [style.height.px]=\"s.height\"\n      ></div>\n    } @else {\n      <div class=\"mx-tour-dim\" aria-hidden=\"true\"></div>\n    }\n    @if (step(); as st) {\n      <div\n        #card\n        class=\"mx-tour-card\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        cdkTrapFocus\n        [attr.aria-labelledby]=\"titleId\"\n        [attr.aria-describedby]=\"progressId + ' ' + bodyId\"\n        [attr.data-placement]=\"spot() ? placement() : 'center'\"\n        [style.top.px]=\"spot() ? pos().top : null\"\n        [style.left.px]=\"spot() ? pos().left : null\"\n        [style.visibility]=\"ready() ? null : 'hidden'\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        <div class=\"mx-tour-head\">\n          <p class=\"mx-tour-progress\" [id]=\"progressId\">\n            {{ ref.labels.progress(ref.index() + 1, ref.steps.length) }}\n          </p>\n          @if (ref.dismissible) {\n            <button\n              type=\"button\"\n              class=\"mx-tour-close\"\n              [attr.aria-label]=\"ref.labels.close\"\n              (click)=\"ref.close(false)\"\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M4 4l8 8M12 4l-8 8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n        <h2 class=\"mx-tour-title\" [id]=\"titleId\">{{ st.title }}</h2>\n        <div class=\"mx-tour-body\" [id]=\"bodyId\">\n          @if (st.template) {\n            <ng-container\n              *ngTemplateOutlet=\"st.template; context: { $implicit: st, index: ref.index(), tour: ref }\"\n            />\n          } @else if (st.content) {\n            <p>{{ st.content }}</p>\n          }\n        </div>\n        <div class=\"mx-tour-foot\">\n          @if (ref.showDots && ref.steps.length > 1) {\n            <span class=\"mx-tour-dots\" aria-hidden=\"true\">\n              @for (s of ref.steps; track $index) {\n                <span class=\"mx-tour-dot\" [attr.data-active]=\"$index === ref.index() ? '' : null\"></span>\n              }\n            </span>\n          }\n          <span class=\"mx-tour-actions\">\n            @if (ref.dismissible && !ref.isLast) {\n              <button mxButton variant=\"ghost\" size=\"sm\" type=\"button\" (click)=\"ref.close(false)\">\n                {{ ref.labels.skip }}\n              </button>\n            }\n            @if (ref.index() > 0) {\n              <button mxButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"ref.previous()\">\n                {{ ref.labels.previous }}\n              </button>\n            }\n            <button mxButton size=\"sm\" type=\"button\" (click)=\"ref.next()\">\n              {{ ref.isLast ? ref.labels.done : ref.labels.next }}\n            </button>\n          </span>\n        </div>\n      </div>\n    }\n  `,\n})\nexport class MxTourPanel {\n  protected readonly ref = inject(MX_TOUR_REF);\n  private readonly tour = inject(MxTour);\n\n  protected readonly titleId = mxUniqueId('mx-tour-title');\n  protected readonly bodyId = mxUniqueId('mx-tour-body');\n  protected readonly progressId = mxUniqueId('mx-tour-progress');\n\n  private readonly card = viewChild<ElementRef<HTMLElement>>('card');\n  private readonly zone = inject(NgZone);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  /** Passo que está desenhado (muda depois de beforeShow). */\n  protected readonly step = signal<MxTourStep | null>(null);\n  private readonly target = signal<Element | null>(null);\n  protected readonly spot = signal<Box | null>(null);\n  protected readonly pos = signal({ top: 0, left: 0 });\n  protected readonly placement = signal<Exclude<MxTourPlacement, 'auto'>>('bottom');\n  protected readonly ready = signal(false);\n\n  private frame = 0;\n  private resizeObserver?: ResizeObserver;\n  private showToken = 0;\n\n  constructor() {\n    const destroy = inject(DestroyRef);\n    // mostra o passo sempre que o índice muda\n    effect(() => {\n      const i = this.ref.index();\n      untracked(() => void this.show(i));\n    });\n\n    afterNextRender(() => {\n      const schedule = () => this.schedule();\n      this.zone.runOutsideAngular(() => {\n        window.addEventListener('scroll', schedule, { capture: true, passive: true });\n        window.addEventListener('resize', schedule, { passive: true });\n      });\n      if (typeof ResizeObserver !== 'undefined') this.resizeObserver = new ResizeObserver(schedule);\n      destroy.onDestroy(() => {\n        window.removeEventListener('scroll', schedule, { capture: true });\n        window.removeEventListener('resize', schedule);\n        this.resizeObserver?.disconnect();\n        cancelFrame(this.frame);\n      });\n    });\n  }\n\n  private async show(index: number): Promise<void> {\n    const token = ++this.showToken;\n    const st = this.ref.steps[index];\n    if (!st) return;\n    // só se esconde antes do primeiro passo (para o posicionar); depois, esconder\n    // o cartão tirava-lhe o foco a meio da visita\n    if (!this.step()) this.ready.set(false);\n    try {\n      await st.beforeShow?.();\n    } catch {\n      // um beforeShow que falha não deve prender a visita\n    }\n    // espera um frame para o DOM reflectir o que beforeShow mudou\n    await new Promise<void>((r) => nextFrame(r));\n    if (token !== this.showToken || !this.ref.isOpen) return;\n\n    // o alvo pode só aparecer depois de beforeShow (ex.: conteúdo de um separador)\n    let el = this.tour.resolve(st.target);\n    for (let i = 0; !el && st.target && i < 5; i++) {\n      await new Promise<void>((r) => nextFrame(r));\n      if (token !== this.showToken || !this.ref.isOpen) return;\n      el = this.tour.resolve(st.target);\n    }\n    this.resizeObserver?.disconnect();\n    this.target.set(el);\n    if (el) {\n      this.resizeObserver?.observe(el);\n      const r = el.getBoundingClientRect();\n      const fora = r.top < 0 || r.bottom > window.innerHeight || r.left < 0 || r.right > window.innerWidth;\n      if (fora) {\n        const reduzir = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n        el.scrollIntoView?.({ block: 'center', inline: 'nearest', behavior: reduzir ? 'auto' : 'smooth' });\n      }\n    }\n    this.step.set(st);\n    // desenha já o cartão para o medir, posicionar e dar-lhe o foco\n    this.cdr.detectChanges();\n    const card = this.card()?.nativeElement;\n    if (card) this.resizeObserver?.observe(card);\n    this.update();\n    this.ready.set(true);\n    this.cdr.detectChanges();\n    card?.focus({ preventScroll: true });\n  }\n\n  private schedule(): void {\n    cancelFrame(this.frame);\n    this.frame = nextFrame(() => this.zone.run(() => this.update()));\n  }\n\n  private update(): void {\n    const st = this.step();\n    const el = this.target();\n    const r = el?.getBoundingClientRect();\n    if (!st || !r || (r.width === 0 && r.height === 0)) {\n      this.spot.set(null);\n      return;\n    }\n    const pad = st.padding ?? 6;\n    const spot: Box = { top: r.top - pad, left: r.left - pad, width: r.width + pad * 2, height: r.height + pad * 2 };\n    this.spot.set(spot);\n\n    const card = this.card()?.nativeElement;\n    const cw = card?.offsetWidth ?? 320;\n    const ch = card?.offsetHeight ?? 160;\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    const rtl = getComputedStyle(document.documentElement).direction === 'rtl';\n    const side = (p: Exclude<MxTourPlacement, 'auto'>): Exclude<MxTourPlacement, 'auto'> =>\n      rtl && (p === 'start' || p === 'end') ? (p === 'start' ? 'end' : 'start') : p;\n\n    const fits: Record<Exclude<MxTourPlacement, 'auto'>, boolean> = {\n      bottom: spot.top + spot.height + GAP + ch <= vh - MARGIN,\n      top: spot.top - GAP - ch >= MARGIN,\n      end: spot.left + spot.width + GAP + cw <= vw - MARGIN,\n      start: spot.left - GAP - cw >= MARGIN,\n    };\n    const wanted = st.placement && st.placement !== 'auto' ? side(st.placement) : null;\n    const order: Exclude<MxTourPlacement, 'auto'>[] = wanted\n      ? [wanted, 'bottom', 'top', 'end', 'start']\n      : ['bottom', 'top', 'end', 'start'];\n    const p = order.find((o) => fits[o]) ?? 'bottom';\n\n    let top: number;\n    let left: number;\n    if (p === 'bottom' || p === 'top') {\n      top = p === 'bottom' ? spot.top + spot.height + GAP : spot.top - GAP - ch;\n      left = spot.left + spot.width / 2 - cw / 2;\n    } else {\n      left = p === 'end' ? spot.left + spot.width + GAP : spot.left - GAP - cw;\n      top = spot.top + spot.height / 2 - ch / 2;\n    }\n    const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), Math.max(min, max));\n    this.placement.set(rtl && (p === 'start' || p === 'end') ? (p === 'start' ? 'end' : 'start') : p);\n    this.pos.set({ top: clamp(top, MARGIN, vh - ch - MARGIN), left: clamp(left, MARGIN, vw - cw - MARGIN) });\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const t = event.target as HTMLElement;\n    const editavel = t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName);\n    if (event.key === 'Escape' && this.ref.dismissible) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.ref.close(false);\n    } else if (!editavel && event.key === 'ArrowRight' && !this.ref.isLast) {\n      event.preventDefault();\n      this.ref.next();\n    } else if (!editavel && event.key === 'ArrowLeft' && this.ref.index() > 0) {\n      event.preventDefault();\n      this.ref.previous();\n    }\n  }\n}\n\n/**\n * Visita guiada: destaca elementos da página, um passo de cada vez, com um cartão\n * que explica cada um. O cartão é um diálogo modal: o foco fica nele, Escape fecha\n * e, no fim, o foco volta para onde estava.\n *\n * ```html\n * <input mxInput mxTourAnchor=\"pesquisa\" aria-label=\"Pesquisar\" />\n * <button mxButton mxTourAnchor=\"nova\">Nova factura</button>\n * ```\n *\n * ```ts\n * private readonly tour = inject(MxTour);\n * mostrar() {\n *   this.tour.start([\n *     { title: 'Bem-vindo', content: 'Mostramos o essencial em 2 passos.' },\n *     { target: 'pesquisa', title: 'Pesquisa', content: 'Procura clientes e facturas.' },\n *     { target: 'nova', title: 'Nova factura', content: 'Começa aqui.' },\n *   ]).afterClosed.then((r) => r.completed && guardarQueViu());\n * }\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class MxTour {\n  private readonly injector = inject(Injector);\n  private readonly anchors = new Map<string, Element>();\n  private overlayRef?: OverlayRef;\n  /** A visita em curso, ou null. */\n  readonly active = signal<MxTourRef | null>(null);\n  readonly isOpen = computed(() => !!this.active());\n\n  /** Começa uma visita. Se já houver uma aberta, fecha-a primeiro. */\n  start(steps: readonly MxTourStep[], options: MxTourOptions = {}): MxTourRef {\n    this.active()?.close(false);\n    const before = document.activeElement as HTMLElement | null;\n    const ref = new MxTourRef(steps, options, () => {\n      this.overlayRef?.dispose();\n      this.overlayRef = undefined;\n      this.active.set(null);\n      if (before && before.isConnected) before.focus({ preventScroll: true });\n    });\n    if (!steps.length) {\n      ref.close(true);\n      return ref;\n    }\n    this.overlayRef = createOverlayRef(this.injector, {\n      positionStrategy: createGlobalPositionStrategy(this.injector).top('0').left('0'),\n      scrollStrategy: createNoopScrollStrategy(),\n      width: '100%',\n      height: '100%',\n      panelClass: 'mx-tour-pane',\n    });\n    const injector = Injector.create({\n      providers: [{ provide: MX_TOUR_REF, useValue: ref }],\n      parent: this.injector,\n    });\n    this.overlayRef.attach(new ComponentPortal(MxTourPanel, null, injector));\n    this.active.set(ref);\n    return ref;\n  }\n\n  /** Regista um elemento com um nome (usado por `mxTourAnchor`). */\n  register(name: string, element: Element): void {\n    this.anchors.set(name, element);\n  }\n  unregister(name: string, element: Element): void {\n    if (this.anchors.get(name) === element) this.anchors.delete(name);\n  }\n\n  /** Encontra o elemento de um alvo: nome de âncora, selector CSS, elemento ou ElementRef. */\n  resolve(target: MxTourTarget | null | undefined): Element | null {\n    if (!target) return null;\n    if (target instanceof ElementRef) return target.nativeElement;\n    if (typeof target !== 'string') return target;\n    return this.anchors.get(target) ?? safeQuery(target);\n  }\n}\n\nfunction safeQuery(selector: string): Element | null {\n  try {\n    return document.querySelector(selector);\n  } catch {\n    return null;\n  }\n}\n\n/** Dá um nome a um elemento para ser alvo de um passo: `mxTourAnchor=\"pesquisa\"`. */\n@Directive({ selector: '[mxTourAnchor]', exportAs: 'mxTourAnchor' })\nexport class MxTourAnchor {\n  readonly name = input.required<string>({ alias: 'mxTourAnchor' });\n  private readonly tour = inject(MxTour);\n  private readonly el = inject<ElementRef<Element>>(ElementRef).nativeElement;\n\n  constructor() {\n    effect((onCleanup) => {\n      const name = this.name();\n      this.tour.register(name, this.el);\n      onCleanup(() => this.tour.unregister(name, this.el));\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/muxima-ui-core.mjs

@@ -3,7 +3,7 @@
  * Os componentes vivem em entradas secundárias, para só incluíres o que usas:
  *   import { MxButton } from '@muxima-ui/core/button';
  */
-const MUXIMA_VERSION = '1.3.0';
+const MUXIMA_VERSION = '1.4.1';
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/muxima-ui-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"muxima-ui-core.mjs","sources":["../../../projects/core/src/public-api.ts","../../../projects/core/src/muxima-ui-core.ts"],"sourcesContent":["/*\n * Muxima UI — ponto de entrada principal.\n * Os componentes vivem em entradas secundárias, para só incluíres o que usas:\n *   import { MxButton } from '@muxima-ui/core/button';\n */\nexport const MUXIMA_VERSION = '1.3.0';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,cAAc,GAAG;;ACL9B;;AAEG;;"}
+{"version":3,"file":"muxima-ui-core.mjs","sources":["../../../projects/core/src/public-api.ts","../../../projects/core/src/muxima-ui-core.ts"],"sourcesContent":["/*\n * Muxima UI — ponto de entrada principal.\n * Os componentes vivem em entradas secundárias, para só incluíres o que usas:\n *   import { MxButton } from '@muxima-ui/core/button';\n */\nexport const MUXIMA_VERSION = '1.4.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,cAAc,GAAG;;ACL9B;;AAEG;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muxima-ui/core",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Componentes Angular acessíveis e sóbrios para aplicações empresariais.",
   "keywords": [
     "angular",
@@ -15,7 +15,7 @@
   "homepage": "https://github.com/Aldemiro20/muxima-ui",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Aldemiro20/muxima-ui.git"
+    "url": "git+https://github.com/Aldemiro20/muxima-ui.git"
   },
   "bugs": {
     "url": "https://github.com/Aldemiro20/muxima-ui/issues"
@@ -238,6 +238,10 @@
     "./tooltip": {
       "types": "./types/muxima-ui-core-tooltip.d.ts",
       "default": "./fesm2022/muxima-ui-core-tooltip.mjs"
+    },
+    "./tour": {
+      "types": "./types/muxima-ui-core-tour.d.ts",
+      "default": "./fesm2022/muxima-ui-core-tour.mjs"
     }
   },
   "sideEffects": [

package/styles/base.css

@@ -109,6 +109,7 @@ button.mx-input-addon:is(:focus-visible, [data-mx-state='focus']),
 .mx-calendar-day:is(:focus-visible, [data-mx-state='focus']),
 .mx-date-range-input:focus-visible,
 .mx-chip-remove:focus-visible,
+.mx-tour-close:focus-visible,
 .mx-editor-tool:focus-visible,
 .mx-editor-text-button:focus-visible,
 .mx-cropper-button:focus-visible,

package/styles/components/data-grid.css

@@ -25,6 +25,7 @@
 .mx-grid-toolbar-slot {
   display: flex;
   flex: 1;
+  min-width: 0;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;

package/styles/components/tour.css

@@ -0,0 +1,155 @@
+/* ---------- Tour (visita guiada) ---------- */
+
+.mx-tour-pane {
+  pointer-events: auto;
+}
+.mx-tour-layer {
+  position: fixed;
+  inset: 0;
+  display: block;
+  font-family: var(--mx-font-sans);
+}
+.mx-tour-dim {
+  position: fixed;
+  inset: 0;
+  background: var(--mx-backdrop);
+  animation: mx-fade-in var(--mx-duration) var(--mx-ease);
+}
+/* o recorte: uma sombra enorme escurece tudo à volta do elemento */
+.mx-tour-spotlight {
+  position: fixed;
+  border-radius: var(--mx-radius);
+  box-shadow:
+    0 0 0 2px var(--mx-accent),
+    0 0 0 200vmax var(--mx-backdrop);
+  pointer-events: none;
+  transition:
+    top 200ms var(--mx-ease),
+    left 200ms var(--mx-ease),
+    width 200ms var(--mx-ease),
+    height 200ms var(--mx-ease);
+}
+.mx-tour-card {
+  position: fixed;
+  box-sizing: border-box;
+  width: min(340px, calc(100vw - 24px));
+  padding: 16px 16px 14px;
+  border: var(--mx-border);
+  border-radius: var(--mx-radius-surface);
+  background: var(--mx-surface);
+  box-shadow: var(--mx-shadow-overlay);
+  color: var(--mx-ink);
+  font-size: var(--mx-text-md);
+  line-height: 1.5;
+  outline: none;
+  animation: mx-fade-in var(--mx-duration) var(--mx-ease);
+}
+.mx-tour-card:focus,
+.mx-tour-card:focus-visible {
+  outline: none;
+}
+.mx-tour-card[data-placement='center'] {
+  top: 50%;
+  left: 50%;
+  width: min(400px, calc(100vw - 24px));
+  transform: translate(-50%, -50%);
+}
+.mx-tour-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 24px;
+}
+.mx-tour-progress {
+  margin: 0;
+  color: var(--mx-muted);
+  font-size: var(--mx-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+.mx-tour-close {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin: -4px -6px -4px 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mx-radius);
+  background: transparent;
+  color: var(--mx-muted);
+  cursor: pointer;
+}
+.mx-tour-close:hover {
+  background: var(--mx-subtle);
+  color: var(--mx-ink);
+}
+.mx-tour-close svg {
+  width: 16px;
+  height: 16px;
+}
+.mx-tour-title {
+  margin: 6px 0 4px;
+  font-size: var(--mx-text-lg);
+  font-weight: 600;
+  line-height: 1.35;
+}
+.mx-tour-body {
+  color: var(--mx-muted);
+}
+.mx-tour-body > :first-child {
+  margin-top: 0;
+}
+.mx-tour-body > :last-child {
+  margin-bottom: 0;
+}
+.mx-tour-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 14px;
+}
+.mx-tour-dots {
+  display: inline-flex;
+  gap: 5px;
+}
+.mx-tour-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mx-stone);
+}
+.mx-tour-dot[data-active] {
+  width: 16px;
+  border-radius: 3px;
+  background: var(--mx-accent);
+}
+.mx-tour-actions {
+  display: inline-flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mx-tour-spotlight {
+    transition: none;
+  }
+  .mx-tour-card,
+  .mx-tour-dim {
+    animation: none;
+  }
+}
+/* sem sombras em alto contraste: o destaque passa a ser um contorno */
+@media (forced-colors: active) {
+  .mx-tour-spotlight {
+    outline: 3px solid Highlight;
+  }
+  .mx-tour-card {
+    border: 1px solid CanvasText;
+  }
+  .mx-tour-dot[data-active] {
+    background: Highlight;
+  }
+}

package/styles/muxima.css

@@ -53,6 +53,7 @@
 @import './components/time-picker.css';
 @import './components/color-picker.css';
 @import './components/editor.css';
+@import './components/tour.css';
 @import './components/otp.css';
 @import './components/file-upload.css';
 @import './components/image-cropper.css';

package/types/muxima-ui-core-tour.d.ts

@@ -0,0 +1,163 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+
+/** Onde fica o cartão em relação ao elemento destacado. */
+type MxTourPlacement = 'auto' | 'top' | 'bottom' | 'start' | 'end';
+/** Nome de um `mxTourAnchor`, um elemento, ou um ElementRef. */
+type MxTourTarget = string | Element | ElementRef<Element>;
+/** Contexto do modelo de conteúdo de um passo. */
+interface MxTourStepContext {
+    $implicit: MxTourStep;
+    index: number;
+    tour: MxTourRef;
+}
+/** Um passo da visita guiada. */
+interface MxTourStep {
+    /** Elemento a destacar. Sem alvo (ou se não existir), o cartão aparece ao centro. */
+    target?: MxTourTarget | null;
+    title: string;
+    /** Texto do passo. */
+    content?: string;
+    /** Conteúdo rico, em vez de `content`. */
+    template?: TemplateRef<MxTourStepContext>;
+    placement?: MxTourPlacement;
+    /** Espaço à volta do elemento destacado, em px. Por omissão 6. */
+    padding?: number;
+    /** Corre antes de mostrar o passo (ex.: abrir um separador). Pode devolver uma Promise. */
+    beforeShow?: () => void | Promise<unknown>;
+}
+interface MxTourLabels {
+    next: string;
+    previous: string;
+    done: string;
+    skip: string;
+    close: string;
+    /** Texto do progresso, por exemplo "Passo 2 de 5". */
+    progress: (current: number, total: number) => string;
+}
+declare const MX_TOUR_LABELS: MxTourLabels;
+interface MxTourOptions {
+    /** Passo inicial (base 0). */
+    startAt?: number;
+    labels?: Partial<MxTourLabels>;
+    /** false: sem Saltar, sem botão de fechar e sem Escape (a visita tem de ser feita até ao fim). */
+    dismissible?: boolean;
+    /** Mostra os pontos de progresso. Por omissão true. */
+    showDots?: boolean;
+}
+/** Como terminou a visita. */
+interface MxTourResult {
+    /** true se chegou ao fim com Concluir. */
+    completed: boolean;
+    /** Último passo mostrado (base 0). */
+    index: number;
+}
+/** Referência a uma visita em curso. */
+declare class MxTourRef {
+    readonly steps: readonly MxTourStep[];
+    private readonly onClose;
+    /** Passo actual (base 0). */
+    readonly index: _angular_core.WritableSignal<number>;
+    /** Resolve quando a visita fecha. */
+    readonly afterClosed: Promise<MxTourResult>;
+    readonly labels: MxTourLabels;
+    readonly dismissible: boolean;
+    readonly showDots: boolean;
+    private resolve;
+    private done;
+    constructor(steps: readonly MxTourStep[], options: MxTourOptions, onClose: (r: MxTourResult) => void);
+    get isOpen(): boolean;
+    get isLast(): boolean;
+    next(): void;
+    previous(): void;
+    goTo(index: number): void;
+    /** Fecha a visita; `completed` diz se foi até ao fim. */
+    close(completed?: boolean): void;
+}
+interface Box {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/** Painel da visita: o destaque, o fundo escurecido e o cartão do passo. Uso interno. */
+declare class MxTourPanel {
+    protected readonly ref: MxTourRef;
+    private readonly tour;
+    protected readonly titleId: string;
+    protected readonly bodyId: string;
+    protected readonly progressId: string;
+    private readonly card;
+    private readonly zone;
+    private readonly cdr;
+    /** Passo que está desenhado (muda depois de beforeShow). */
+    protected readonly step: _angular_core.WritableSignal<MxTourStep | null>;
+    private readonly target;
+    protected readonly spot: _angular_core.WritableSignal<Box | null>;
+    protected readonly pos: _angular_core.WritableSignal<{
+        top: number;
+        left: number;
+    }>;
+    protected readonly placement: _angular_core.WritableSignal<"top" | "bottom" | "start" | "end">;
+    protected readonly ready: _angular_core.WritableSignal<boolean>;
+    private frame;
+    private resizeObserver?;
+    private showToken;
+    constructor();
+    private show;
+    private schedule;
+    private update;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxTourPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxTourPanel, "mx-tour-panel", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Visita guiada: destaca elementos da página, um passo de cada vez, com um cartão
+ * que explica cada um. O cartão é um diálogo modal: o foco fica nele, Escape fecha
+ * e, no fim, o foco volta para onde estava.
+ *
+ * ```html
+ * <input mxInput mxTourAnchor="pesquisa" aria-label="Pesquisar" />
+ * <button mxButton mxTourAnchor="nova">Nova factura</button>
+ * ```
+ *
+ * ```ts
+ * private readonly tour = inject(MxTour);
+ * mostrar() {
+ *   this.tour.start([
+ *     { title: 'Bem-vindo', content: 'Mostramos o essencial em 2 passos.' },
+ *     { target: 'pesquisa', title: 'Pesquisa', content: 'Procura clientes e facturas.' },
+ *     { target: 'nova', title: 'Nova factura', content: 'Começa aqui.' },
+ *   ]).afterClosed.then((r) => r.completed && guardarQueViu());
+ * }
+ * ```
+ */
+declare class MxTour {
+    private readonly injector;
+    private readonly anchors;
+    private overlayRef?;
+    /** A visita em curso, ou null. */
+    readonly active: _angular_core.WritableSignal<MxTourRef | null>;
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /** Começa uma visita. Se já houver uma aberta, fecha-a primeiro. */
+    start(steps: readonly MxTourStep[], options?: MxTourOptions): MxTourRef;
+    /** Regista um elemento com um nome (usado por `mxTourAnchor`). */
+    register(name: string, element: Element): void;
+    unregister(name: string, element: Element): void;
+    /** Encontra o elemento de um alvo: nome de âncora, selector CSS, elemento ou ElementRef. */
+    resolve(target: MxTourTarget | null | undefined): Element | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxTour, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MxTour>;
+}
+/** Dá um nome a um elemento para ser alvo de um passo: `mxTourAnchor="pesquisa"`. */
+declare class MxTourAnchor {
+    readonly name: _angular_core.InputSignal<string>;
+    private readonly tour;
+    private readonly el;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxTourAnchor, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxTourAnchor, "[mxTourAnchor]", ["mxTourAnchor"], { "name": { "alias": "mxTourAnchor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MX_TOUR_LABELS, MxTour, MxTourAnchor, MxTourPanel, MxTourRef };
+export type { MxTourLabels, MxTourOptions, MxTourPlacement, MxTourResult, MxTourStep, MxTourStepContext, MxTourTarget };

package/types/muxima-ui-core.d.ts

@@ -1,3 +1,3 @@
-declare const MUXIMA_VERSION = "1.3.0";
+declare const MUXIMA_VERSION = "1.4.1";
 
 export { MUXIMA_VERSION };