ngwr 10.0.0 → 10.1.0

package/fesm2022/ngwr-tour.mjs

@@ -0,0 +1,264 @@
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, ViewEncapsulation, Component, EnvironmentInjector, DOCUMENT, PLATFORM_ID, signal, Injector, Service } from '@angular/core';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { WrButton } from 'ngwr/button';
+import { readI18nText, useI18nFormatter } from 'ngwr/i18n';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Provided by `WrTour` when it attaches the popup portal. */
+const WR_TOUR_STEP = new InjectionToken('WR_TOUR_STEP');
+/**
+ * The card a tour shows next to the spotlit element. Rendered by `WrTour` into
+ * a CDK overlay — not something you place yourself.
+ *
+ * @see https://ngwr.dev/reference/services/tour
+ */
+class WrTourPopup {
+    tour = inject(WR_TOUR_STEP);
+    // `readI18nText`, not `useI18nText`: these have no consumer-facing input to
+    // forward, and the popup is rebuilt for every step, so resolving once at
+    // construction is enough.
+    nextLabel = readI18nText('tour.next', 'Next');
+    backLabel = readI18nText('tour.back', 'Back');
+    doneLabel = readI18nText('tour.done', 'Done');
+    skipLabel = readI18nText('tour.skip', 'Skip tour');
+    /** `Step {{current}} of {{total}}` — also the dialog's accessible name. */
+    progress = useI18nFormatter('tour.progress', 'Step {{current}} of {{total}}');
+    isLast = computed(() => this.tour.index() >= this.tour.total() - 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    isFirst = computed(() => this.tour.index() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    progressText = computed(() => this.progress({ current: this.tour.index() + 1, total: this.tour.total() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressText" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const title = this.tour.step()?.title;
+        return title ? `${title} — ${this.progressText()}` : this.progressText();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTourPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTourPopup, isStandalone: true, selector: "wr-tour-popup", host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "wr-tour-popup" }, ngImport: i0, template: "@let step = tour.step();\n\n<p class=\"wr-tour-popup__progress\">{{ progressText() }}</p>\n\n@if (step?.title; as title) {\n  <h2 class=\"wr-tour-popup__title\">{{ title }}</h2>\n}\n\n<p class=\"wr-tour-popup__content\">{{ step?.content }}</p>\n\n<div class=\"wr-tour-popup__actions\">\n  <button wr-btn type=\"button\" size=\"sm\" color=\"medium\" outlined (click)=\"tour.stop()\">\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button wr-btn type=\"button\" size=\"sm\" outlined (click)=\"tour.prev()\">{{ backLabel }}</button>\n  }\n  <button wr-btn type=\"button\" size=\"sm\" color=\"primary\" (click)=\"tour.next()\">\n    {{ isLast() ? doneLabel : nextLabel }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "isDisabledWhenLoading"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTourPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-tour-popup', encapsulation: ViewEncapsulation.None, host: { class: 'wr-tour-popup', role: 'dialog', 'aria-modal': 'true', '[attr.aria-label]': 'ariaLabel()' }, imports: [WrButton], template: "@let step = tour.step();\n\n<p class=\"wr-tour-popup__progress\">{{ progressText() }}</p>\n\n@if (step?.title; as title) {\n  <h2 class=\"wr-tour-popup__title\">{{ title }}</h2>\n}\n\n<p class=\"wr-tour-popup__content\">{{ step?.content }}</p>\n\n<div class=\"wr-tour-popup__actions\">\n  <button wr-btn type=\"button\" size=\"sm\" color=\"medium\" outlined (click)=\"tour.stop()\">\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button wr-btn type=\"button\" size=\"sm\" outlined (click)=\"tour.prev()\">{{ backLabel }}</button>\n  }\n  <button wr-btn type=\"button\" size=\"sm\" color=\"primary\" (click)=\"tour.next()\">\n    {{ isLast() ? doneLabel : nextLabel }}\n  </button>\n</div>\n" }]
+        }] });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Fallback order per preferred side — the opposite side first, then the sides. */
+const FALLBACKS = {
+    bottom: ['bottom', 'top', 'right', 'left'],
+    top: ['top', 'bottom', 'right', 'left'],
+    left: ['left', 'right', 'bottom', 'top'],
+    right: ['right', 'left', 'bottom', 'top'],
+};
+const CONNECTED = {
+    bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+    top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
+    left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
+    right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
+};
+/**
+ * Guided product tour: a spotlight over one element at a time plus a popup
+ * explaining it.
+ *
+ * Steps are data, not markup — call `start()` with an array and the service owns
+ * the overlay, the cut-out, focus and the keyboard. A step whose target is not
+ * on the page is skipped rather than shown floating, so a tour survives a
+ * feature being hidden behind a flag or a permission.
+ *
+ * @example
+ * ```ts
+ * private readonly tour = inject(WrTour);
+ *
+ * showMeAround(): void {
+ *   this.tour.start([
+ *     { target: '[data-tour="search"]', title: 'Search', content: 'Find anything by name.' },
+ *     { target: '[data-tour="filters"]', content: 'Narrow the list down.', placement: 'right' },
+ *   ]);
+ * }
+ * ```
+ *
+ * @see https://ngwr.dev/reference/services/tour
+ */
+class WrTour {
+    overlay = inject(WR_OVERLAY);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    injector = inject(EnvironmentInjector);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    steps = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    cursor = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    spotlight = null;
+    detachKeydown = null;
+    detachReposition = null;
+    restoreFocus = null;
+    /** Whether a tour is running. */
+    active = computed(() => this.cursor() >= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Zero-based index of the current step, `-1` when idle. */
+    index = computed(() => this.cursor(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** How many steps this tour has. */
+    total = computed(() => this.steps().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** The step being shown, or `null` when idle. */
+    step = computed(() => this.steps()[this.cursor()] ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Begin a tour. Restarts if one is already running. A no-op under SSR — a
+     * tour is a client-side affordance and there is nothing to spotlight on the
+     * server.
+     */
+    start(steps) {
+        if (!this.isBrowser || steps.length === 0)
+            return;
+        this.stop();
+        this.steps.set(steps);
+        this.restoreFocus = this.document.activeElement;
+        this.goTo(0, 1);
+    }
+    /** Advance; finishes the tour past the last step. */
+    next() {
+        this.goTo(this.cursor() + 1, 1);
+    }
+    /** Go back; stays put on the first step. */
+    prev() {
+        this.goTo(this.cursor() - 1, -1);
+    }
+    /** End the tour and return focus where it was. */
+    stop() {
+        this.teardownStep();
+        this.steps.set([]);
+        this.cursor.set(-1);
+        this.restoreFocus?.focus?.();
+        this.restoreFocus = null;
+    }
+    /**
+     * Move to `index`, skipping steps whose target is not in the DOM. `direction`
+     * says which way to keep skipping, so a missing step never traps the tour
+     * between two dead ends.
+     */
+    goTo(index, direction) {
+        const steps = this.steps();
+        let i = index;
+        while (i >= 0 && i < steps.length && this.resolve(steps[i]) === null)
+            i += direction;
+        if (i < 0) {
+            // Ran off the start while going back — stay where we were.
+            return;
+        }
+        if (i >= steps.length) {
+            this.stop();
+            return;
+        }
+        this.teardownStep();
+        this.cursor.set(i);
+        this.openStep(steps[i]);
+    }
+    resolve(step) {
+        if (typeof step.target !== 'string')
+            return step.target.isConnected ? step.target : null;
+        return this.document.querySelector(step.target);
+    }
+    openStep(step) {
+        const target = this.resolve(step);
+        if (!target)
+            return;
+        target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
+        // The cut-out is a bare element sized to the target with an enormous spread
+        // shadow: everything outside it dims, the target itself stays untouched.
+        // Cheaper and far more robust than a clip-path polygon, and it needs no
+        // recompute when the page reflows beyond moving the box.
+        const spotlight = this.document.createElement('div');
+        spotlight.className = 'wr-tour__spotlight';
+        spotlight.setAttribute('aria-hidden', 'true');
+        this.document.body.appendChild(spotlight);
+        this.spotlight = spotlight;
+        this.placeSpotlight(target);
+        const placement = step.placement ?? 'bottom';
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(target)
+            .withPositions(FALLBACKS[placement].map(side => ({
+            ...CONNECTED[side],
+            offsetY: side === 'bottom' ? 12 : side === 'top' ? -12 : 0,
+            offsetX: side === 'right' ? 12 : side === 'left' ? -12 : 0,
+        })))
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: 'wr-tour-overlay',
+        });
+        const portal = new ComponentPortal(WrTourPopup, null, Injector.create({ parent: this.injector, providers: [{ provide: WR_TOUR_STEP, useValue: this }] }));
+        const ref = this.overlayRef.attach(portal);
+        const trap = this.focusTrapFactory.create(ref.location.nativeElement);
+        void trap.focusInitialElementWhenReady();
+        const onKey = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.stop();
+            }
+        };
+        this.document.addEventListener('keydown', onKey);
+        this.detachKeydown = () => this.document.removeEventListener('keydown', onKey);
+        const reposition = () => this.placeSpotlight(target);
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        this.detachReposition = () => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        };
+    }
+    placeSpotlight(target) {
+        const el = this.spotlight;
+        if (!el)
+            return;
+        const r = target.getBoundingClientRect();
+        const pad = 6;
+        el.style.top = `${r.top - pad}px`;
+        el.style.left = `${r.left - pad}px`;
+        el.style.width = `${r.width + pad * 2}px`;
+        el.style.height = `${r.height + pad * 2}px`;
+    }
+    teardownStep() {
+        this.detachKeydown?.();
+        this.detachKeydown = null;
+        this.detachReposition?.();
+        this.detachReposition = null;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.spotlight?.remove();
+        this.spotlight = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTour, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrTour });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTour, decorators: [{
+            type: Service
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrTour, WrTourPopup };
+//# sourceMappingURL=ngwr-tour.mjs.map

package/fesm2022/ngwr-tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-tour.mjs","sources":["../../../projects/lib/tour/tour-popup.ts","../../../projects/lib/tour/tour-popup.html","../../../projects/lib/tour/tour.ts","../../../projects/lib/tour/ngwr-tour.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, InjectionToken, ViewEncapsulation, computed, inject } from '@angular/core';\n\nimport { WrButton } from 'ngwr/button';\nimport { readI18nText, useI18nFormatter } from 'ngwr/i18n';\n\nimport type { WrTourStep } from './interfaces';\n\n/** What the popup needs from the running tour, without importing the service (cycle). */\nexport interface WrTourController {\n  readonly index: () => number;\n  readonly total: () => number;\n  readonly step: () => WrTourStep | null;\n  next(): void;\n  prev(): void;\n  stop(): void;\n}\n\n/** Provided by `WrTour` when it attaches the popup portal. */\nexport const WR_TOUR_STEP = new InjectionToken<WrTourController>('WR_TOUR_STEP');\n\n/**\n * The card a tour shows next to the spotlit element. Rendered by `WrTour` into\n * a CDK overlay — not something you place yourself.\n *\n * @see https://ngwr.dev/reference/services/tour\n */\n@Component({\n  selector: 'wr-tour-popup',\n  templateUrl: './tour-popup.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-tour-popup', role: 'dialog', 'aria-modal': 'true', '[attr.aria-label]': 'ariaLabel()' },\n  imports: [WrButton],\n})\nexport class WrTourPopup {\n  protected readonly tour = inject(WR_TOUR_STEP);\n\n  // `readI18nText`, not `useI18nText`: these have no consumer-facing input to\n  // forward, and the popup is rebuilt for every step, so resolving once at\n  // construction is enough.\n  protected readonly nextLabel = readI18nText('tour.next', 'Next');\n  protected readonly backLabel = readI18nText('tour.back', 'Back');\n  protected readonly doneLabel = readI18nText('tour.done', 'Done');\n  protected readonly skipLabel = readI18nText('tour.skip', 'Skip tour');\n\n  /** `Step {{current}} of {{total}}` — also the dialog's accessible name. */\n  protected readonly progress = useI18nFormatter('tour.progress', 'Step {{current}} of {{total}}');\n\n  protected readonly isLast = computed(() => this.tour.index() >= this.tour.total() - 1);\n  protected readonly isFirst = computed(() => this.tour.index() <= 0);\n\n  protected readonly progressText = computed(() =>\n    this.progress({ current: this.tour.index() + 1, total: this.tour.total() })\n  );\n\n  protected readonly ariaLabel = computed(() => {\n    const title = this.tour.step()?.title;\n    return title ? `${title} — ${this.progressText()}` : this.progressText();\n  });\n}\n","@let step = tour.step();\n\n<p class=\"wr-tour-popup__progress\">{{ progressText() }}</p>\n\n@if (step?.title; as title) {\n  <h2 class=\"wr-tour-popup__title\">{{ title }}</h2>\n}\n\n<p class=\"wr-tour-popup__content\">{{ step?.content }}</p>\n\n<div class=\"wr-tour-popup__actions\">\n  <button wr-btn type=\"button\" size=\"sm\" color=\"medium\" outlined (click)=\"tour.stop()\">\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button wr-btn type=\"button\" size=\"sm\" outlined (click)=\"tour.prev()\">{{ backLabel }}</button>\n  }\n  <button wr-btn type=\"button\" size=\"sm\" color=\"primary\" (click)=\"tour.next()\">\n    {{ isLast() ? doneLabel : nextLabel }}\n  </button>\n</div>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { type OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport { DOCUMENT, EnvironmentInjector, Injector, PLATFORM_ID, Service, computed, inject, signal } from '@angular/core';\n\nimport { WR_OVERLAY } from 'ngwr/overlay';\n\nimport type { WrTourPlacement, WrTourStep } from './interfaces';\nimport { WR_TOUR_STEP, WrTourPopup } from './tour-popup';\n\n/** Fallback order per preferred side — the opposite side first, then the sides. */\nconst FALLBACKS: Record<WrTourPlacement, readonly WrTourPlacement[]> = {\n  bottom: ['bottom', 'top', 'right', 'left'],\n  top: ['top', 'bottom', 'right', 'left'],\n  left: ['left', 'right', 'bottom', 'top'],\n  right: ['right', 'left', 'bottom', 'top'],\n};\n\nconst CONNECTED: Record<\n  WrTourPlacement,\n  {\n    originX: 'start' | 'center' | 'end';\n    originY: 'top' | 'center' | 'bottom';\n    overlayX: 'start' | 'center' | 'end';\n    overlayY: 'top' | 'center' | 'bottom';\n  }\n> = {\n  bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },\n  top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },\n  left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },\n  right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },\n};\n\n/**\n * Guided product tour: a spotlight over one element at a time plus a popup\n * explaining it.\n *\n * Steps are data, not markup — call `start()` with an array and the service owns\n * the overlay, the cut-out, focus and the keyboard. A step whose target is not\n * on the page is skipped rather than shown floating, so a tour survives a\n * feature being hidden behind a flag or a permission.\n *\n * @example\n * ```ts\n * private readonly tour = inject(WrTour);\n *\n * showMeAround(): void {\n *   this.tour.start([\n *     { target: '[data-tour=\"search\"]', title: 'Search', content: 'Find anything by name.' },\n *     { target: '[data-tour=\"filters\"]', content: 'Narrow the list down.', placement: 'right' },\n *   ]);\n * }\n * ```\n *\n * @see https://ngwr.dev/reference/services/tour\n */\n@Service()\nexport class WrTour {\n  private readonly overlay = inject(WR_OVERLAY);\n  private readonly scrollStrategies = inject(ScrollStrategyOptions);\n  private readonly injector = inject(EnvironmentInjector);\n  private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  private readonly document = inject(DOCUMENT);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  private readonly steps = signal<readonly WrTourStep[]>([]);\n  private readonly cursor = signal(-1);\n\n  private overlayRef: OverlayRef | null = null;\n  private spotlight: HTMLElement | null = null;\n  private detachKeydown: (() => void) | null = null;\n  private detachReposition: (() => void) | null = null;\n  private restoreFocus: HTMLElement | null = null;\n\n  /** Whether a tour is running. */\n  readonly active = computed(() => this.cursor() >= 0);\n\n  /** Zero-based index of the current step, `-1` when idle. */\n  readonly index = computed(() => this.cursor());\n\n  /** How many steps this tour has. */\n  readonly total = computed(() => this.steps().length);\n\n  /** The step being shown, or `null` when idle. */\n  readonly step = computed<WrTourStep | null>(() => this.steps()[this.cursor()] ?? null);\n\n  /**\n   * Begin a tour. Restarts if one is already running. A no-op under SSR — a\n   * tour is a client-side affordance and there is nothing to spotlight on the\n   * server.\n   */\n  start(steps: readonly WrTourStep[]): void {\n    if (!this.isBrowser || steps.length === 0) return;\n    this.stop();\n    this.steps.set(steps);\n    this.restoreFocus = this.document.activeElement as HTMLElement | null;\n    this.goTo(0, 1);\n  }\n\n  /** Advance; finishes the tour past the last step. */\n  next(): void {\n    this.goTo(this.cursor() + 1, 1);\n  }\n\n  /** Go back; stays put on the first step. */\n  prev(): void {\n    this.goTo(this.cursor() - 1, -1);\n  }\n\n  /** End the tour and return focus where it was. */\n  stop(): void {\n    this.teardownStep();\n    this.steps.set([]);\n    this.cursor.set(-1);\n    this.restoreFocus?.focus?.();\n    this.restoreFocus = null;\n  }\n\n  /**\n   * Move to `index`, skipping steps whose target is not in the DOM. `direction`\n   * says which way to keep skipping, so a missing step never traps the tour\n   * between two dead ends.\n   */\n  private goTo(index: number, direction: 1 | -1): void {\n    const steps = this.steps();\n    let i = index;\n    while (i >= 0 && i < steps.length && this.resolve(steps[i]) === null) i += direction;\n\n    if (i < 0) {\n      // Ran off the start while going back — stay where we were.\n      return;\n    }\n    if (i >= steps.length) {\n      this.stop();\n      return;\n    }\n\n    this.teardownStep();\n    this.cursor.set(i);\n    this.openStep(steps[i]);\n  }\n\n  private resolve(step: WrTourStep): HTMLElement | null {\n    if (typeof step.target !== 'string') return step.target.isConnected ? step.target : null;\n    return this.document.querySelector<HTMLElement>(step.target);\n  }\n\n  private openStep(step: WrTourStep): void {\n    const target = this.resolve(step);\n    if (!target) return;\n\n    target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });\n\n    // The cut-out is a bare element sized to the target with an enormous spread\n    // shadow: everything outside it dims, the target itself stays untouched.\n    // Cheaper and far more robust than a clip-path polygon, and it needs no\n    // recompute when the page reflows beyond moving the box.\n    const spotlight = this.document.createElement('div');\n    spotlight.className = 'wr-tour__spotlight';\n    spotlight.setAttribute('aria-hidden', 'true');\n    this.document.body.appendChild(spotlight);\n    this.spotlight = spotlight;\n    this.placeSpotlight(target);\n\n    const placement = step.placement ?? 'bottom';\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(target)\n      .withPositions(\n        FALLBACKS[placement].map(side => ({\n          ...CONNECTED[side],\n          offsetY: side === 'bottom' ? 12 : side === 'top' ? -12 : 0,\n          offsetX: side === 'right' ? 12 : side === 'left' ? -12 : 0,\n        }))\n      )\n      .withPush(true);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.scrollStrategies.reposition(),\n      panelClass: 'wr-tour-overlay',\n    });\n\n    const portal = new ComponentPortal(\n      WrTourPopup,\n      null,\n      Injector.create({ parent: this.injector, providers: [{ provide: WR_TOUR_STEP, useValue: this }] })\n    );\n    const ref = this.overlayRef.attach(portal);\n\n    const trap = this.focusTrapFactory.create(ref.location.nativeElement as HTMLElement);\n    void trap.focusInitialElementWhenReady();\n\n    const onKey = (event: KeyboardEvent): void => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        this.stop();\n      }\n    };\n    this.document.addEventListener('keydown', onKey);\n    this.detachKeydown = () => this.document.removeEventListener('keydown', onKey);\n\n    const reposition = (): void => this.placeSpotlight(target);\n    window.addEventListener('scroll', reposition, true);\n    window.addEventListener('resize', reposition);\n    this.detachReposition = () => {\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }\n\n  private placeSpotlight(target: HTMLElement): void {\n    const el = this.spotlight;\n    if (!el) return;\n    const r = target.getBoundingClientRect();\n    const pad = 6;\n    el.style.top = `${r.top - pad}px`;\n    el.style.left = `${r.left - pad}px`;\n    el.style.width = `${r.width + pad * 2}px`;\n    el.style.height = `${r.height + pad * 2}px`;\n  }\n\n  private teardownStep(): void {\n    this.detachKeydown?.();\n    this.detachKeydown = null;\n    this.detachReposition?.();\n    this.detachReposition = null;\n    this.overlayRef?.dispose();\n    this.overlayRef = null;\n    this.spotlight?.remove();\n    this.spotlight = null;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-transfer.mjs

@@ -0,0 +1,184 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, ViewEncapsulation, Component } from '@angular/core';
+import { WrButton } from 'ngwr/button';
+import { WrCheckbox } from 'ngwr/checkbox';
+import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
+import { WrInput } from 'ngwr/input';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Dual-listbox picker: two panes and the buttons that move rows between them.
+ *
+ * The full item set is `[items]` and the RIGHT pane is the value — `[(value)]`
+ * holds the chosen `WrTransferItem['value']`s, everything else stays left. The
+ * checked state inside each pane is transient staging, deliberately not part of
+ * the value: what a form cares about is which rows ended up on the right.
+ *
+ * A signal-forms native control (`FormValueControl<readonly unknown[]>`), so
+ * `[formField]` binds straight to `value`; `[(ngModel)]` and reactive forms keep
+ * working through Angular's bridge, and `[(value)]` is the standalone shape.
+ *
+ * @example
+ * ```html
+ * <!-- Standalone -->
+ * <wr-transfer [items]="permissions" [(value)]="granted" />
+ *
+ * <!-- Searchable, with pane titles -->
+ * <wr-transfer
+ *   searchable
+ *   sourceTitle="Available"
+ *   targetTitle="Granted"
+ *   [items]="permissions"
+ *   [formField]="form.granted"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/transfer
+ */
+class WrTransfer {
+    /** Every row, in either pane. Membership of the right pane is `value`. */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Values currently in the RIGHT pane. Two-way bindable; bound automatically
+     * by `[formField]` / `[(ngModel)]`.
+     */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur / commit so a bound field marks itself touched. */
+    touch = output();
+    /** Disable the whole control. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show a filter box above each pane. @default false */
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Heading above the left pane. Falls back to `transfer.source`. */
+    sourceTitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceTitle" }] : /* istanbul ignore next */ []));
+    /** Heading above the right pane. Falls back to `transfer.target`. */
+    targetTitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetTitle" }] : /* istanbul ignore next */ []));
+    /** Placeholder in both filter boxes. Falls back to `transfer.search`. */
+    searchPlaceholder = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Shown in a pane with no rows. Falls back to `transfer.empty`. */
+    emptyText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the move-right button. Falls back to `transfer.toTarget`. */
+    toTargetLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toTargetLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the move-left button. Falls back to `transfer.toSource`. */
+    toSourceLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toSourceLabel" }] : /* istanbul ignore next */ []));
+    resolvedSourceTitle = useI18nText(this.sourceTitle, 'transfer.source', 'Available');
+    resolvedTargetTitle = useI18nText(this.targetTitle, 'transfer.target', 'Selected');
+    resolvedSearch = useI18nText(this.searchPlaceholder, 'transfer.search', 'Search');
+    resolvedEmpty = useI18nText(this.emptyText, 'transfer.empty', 'Nothing here');
+    resolvedToTarget = useI18nText(this.toTargetLabel, 'transfer.toTarget', 'Move to selected');
+    resolvedToSource = useI18nText(this.toSourceLabel, 'transfer.toSource', 'Move to available');
+    /** `{{checked}} / {{total}}` under each heading. @internal */
+    countLabel = useI18nFormatter('transfer.count', '{{checked}} / {{total}}');
+    /** Pane order — the template iterates it so both panes share one block. */
+    panes = ['source', 'target'];
+    sourceQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceQuery" }] : /* istanbul ignore next */ []));
+    targetQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetQuery" }] : /* istanbul ignore next */ []));
+    /** Staged rows, per pane. Cleared as soon as a move commits them. */
+    sourceChecked = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceChecked" }] : /* istanbul ignore next */ []));
+    targetChecked = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetChecked" }] : /* istanbul ignore next */ []));
+    valueSet = computed(() => new Set(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueSet" }] : /* istanbul ignore next */ []));
+    source = computed(() => this.pane(this.items().filter(item => !this.valueSet().has(item.value)), this.sourceQuery(), this.sourceChecked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    target = computed(() => this.pane(
+    // Right-pane order follows `value`, not `items`: the order a user built is
+    // the one they expect to read back.
+    this.value()
+        .map(v => this.items().find(item => item.value === v))
+        .filter((item) => item !== undefined), this.targetQuery(), this.targetChecked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    canMoveRight = computed(() => !this.disabled() && this.source().checkedCount > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canMoveRight" }] : /* istanbul ignore next */ []));
+    canMoveLeft = computed(() => !this.disabled() && this.target().checkedCount > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canMoveLeft" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-transfer'];
+        if (this.disabled())
+            parts.push('wr-transfer--disabled');
+        if (this.searchable())
+            parts.push('wr-transfer--searchable');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    isChecked(pane, item) {
+        return (pane === 'source' ? this.sourceChecked() : this.targetChecked()).includes(item.value);
+    }
+    toggle(pane, item, checked) {
+        if (item.disabled)
+            return;
+        const box = pane === 'source' ? this.sourceChecked : this.targetChecked;
+        const current = box();
+        box.set(checked ? [...current, item.value] : current.filter(v => v !== item.value));
+    }
+    /** Header checkbox — stages or clears every enabled row the filter shows. */
+    toggleAll(pane, checked) {
+        const state = pane === 'source' ? this.source() : this.target();
+        const box = pane === 'source' ? this.sourceChecked : this.targetChecked;
+        box.set(checked ? state.rows.filter(item => !item.disabled).map(item => item.value) : []);
+    }
+    onSearch(pane, event) {
+        const query = event.target?.value ?? '';
+        (pane === 'source' ? this.sourceQuery : this.targetQuery).set(query);
+    }
+    moveRight() {
+        const moving = this.sourceChecked();
+        if (moving.length === 0)
+            return;
+        this.value.set([...this.value(), ...moving]);
+        this.sourceChecked.set([]);
+        this.touch.emit();
+    }
+    moveLeft() {
+        const moving = new Set(this.targetChecked());
+        if (moving.size === 0)
+            return;
+        this.value.set(this.value().filter(v => !moving.has(v)));
+        this.targetChecked.set([]);
+        this.touch.emit();
+    }
+    /** Filter, then derive the header state from what survived. */
+    pane(rows, query, checked) {
+        const q = query.trim().toLowerCase();
+        const visible = q ? rows.filter(item => item.label.toLowerCase().includes(q)) : rows;
+        const enabled = visible.filter(item => !item.disabled);
+        const staged = new Set(checked);
+        const checkedCount = enabled.filter(item => staged.has(item.value)).length;
+        return {
+            rows: visible,
+            checkedCount,
+            allChecked: enabled.length > 0 && checkedCount === enabled.length,
+            someChecked: checkedCount > 0 && checkedCount < enabled.length,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTransfer, isStandalone: true, selector: "wr-transfer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, sourceTitle: { classPropertyName: "sourceTitle", publicName: "sourceTitle", isSignal: true, isRequired: false, transformFunction: null }, targetTitle: { classPropertyName: "targetTitle", publicName: "targetTitle", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, toTargetLabel: { classPropertyName: "toTargetLabel", publicName: "toTargetLabel", isSignal: true, isRequired: false, transformFunction: null }, toSourceLabel: { classPropertyName: "toSourceLabel", publicName: "toSourceLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<!--\n  Two panes and the buttons between them. Each pane is a PLAIN `<ul>` of\n  checkboxes, deliberately: dressing it as a `role=\"listbox\"` of `role=\"option\"`\n  rows reads better in the abstract but is invalid \u2014 an option may not contain an\n  interactive control, and the axe gate says so. The checkbox is the thing the\n  user operates, so it is the thing the semantics should describe; the pane\n  heading names the group.\n-->\n@for (pane of panes; track pane) {\n  @let state = pane === 'source' ? source() : target();\n  @let title = pane === 'source' ? resolvedSourceTitle() : resolvedTargetTitle();\n\n  <div class=\"wr-transfer__pane\" [class.wr-transfer__pane--target]=\"pane === 'target'\">\n    <div class=\"wr-transfer__head\">\n      <wr-checkbox\n        size=\"sm\"\n        [checked]=\"state.allChecked\"\n        [indeterminate]=\"state.someChecked\"\n        [disabled]=\"disabled() || state.rows.length === 0\"\n        [ariaLabel]=\"title\"\n        (checkedChange)=\"toggleAll(pane, $event)\"\n      />\n      <span class=\"wr-transfer__title\">{{ title }}</span>\n      <span class=\"wr-transfer__count\">{{\n        countLabel({ checked: state.checkedCount, total: state.rows.length })\n      }}</span>\n    </div>\n\n    @if (searchable()) {\n      <div class=\"wr-transfer__search\">\n        <input\n          wrInput\n          wrSize=\"sm\"\n          type=\"search\"\n          [placeholder]=\"resolvedSearch()\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"`${title} \u2014 ${resolvedSearch()}`\"\n          (input)=\"onSearch(pane, $event)\"\n        />\n      </div>\n    }\n\n    <ul class=\"wr-transfer__list\" [attr.aria-label]=\"title\">\n      @for (item of state.rows; track item.value) {\n        <li class=\"wr-transfer__item\" [class.wr-transfer__item--disabled]=\"item.disabled\">\n          <wr-checkbox\n            size=\"sm\"\n            [checked]=\"isChecked(pane, item)\"\n            [disabled]=\"disabled() || !!item.disabled\"\n            (checkedChange)=\"toggle(pane, item, $event)\"\n            (touch)=\"touch.emit()\"\n          >\n            {{ item.label }}\n          </wr-checkbox>\n        </li>\n      } @empty {\n        <li class=\"wr-transfer__empty\">{{ resolvedEmpty() }}</li>\n      }\n    </ul>\n  </div>\n\n  <!-- The buttons live between the panes, so they are emitted after the first. -->\n  @if (pane === 'source') {\n    <div class=\"wr-transfer__actions\">\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveRight()\"\n        [attr.aria-label]=\"resolvedToTarget()\"\n        (click)=\"moveRight()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveLeft()\"\n        [attr.aria-label]=\"resolvedToSource()\"\n        (click)=\"moveLeft()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m15 18-6-6 6-6\" />\n        </svg>\n      </button>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "isDisabledWhenLoading"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTransfer, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-transfer', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrButton, WrCheckbox, WrInput], template: "<!--\n  Two panes and the buttons between them. Each pane is a PLAIN `<ul>` of\n  checkboxes, deliberately: dressing it as a `role=\"listbox\"` of `role=\"option\"`\n  rows reads better in the abstract but is invalid \u2014 an option may not contain an\n  interactive control, and the axe gate says so. The checkbox is the thing the\n  user operates, so it is the thing the semantics should describe; the pane\n  heading names the group.\n-->\n@for (pane of panes; track pane) {\n  @let state = pane === 'source' ? source() : target();\n  @let title = pane === 'source' ? resolvedSourceTitle() : resolvedTargetTitle();\n\n  <div class=\"wr-transfer__pane\" [class.wr-transfer__pane--target]=\"pane === 'target'\">\n    <div class=\"wr-transfer__head\">\n      <wr-checkbox\n        size=\"sm\"\n        [checked]=\"state.allChecked\"\n        [indeterminate]=\"state.someChecked\"\n        [disabled]=\"disabled() || state.rows.length === 0\"\n        [ariaLabel]=\"title\"\n        (checkedChange)=\"toggleAll(pane, $event)\"\n      />\n      <span class=\"wr-transfer__title\">{{ title }}</span>\n      <span class=\"wr-transfer__count\">{{\n        countLabel({ checked: state.checkedCount, total: state.rows.length })\n      }}</span>\n    </div>\n\n    @if (searchable()) {\n      <div class=\"wr-transfer__search\">\n        <input\n          wrInput\n          wrSize=\"sm\"\n          type=\"search\"\n          [placeholder]=\"resolvedSearch()\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"`${title} \u2014 ${resolvedSearch()}`\"\n          (input)=\"onSearch(pane, $event)\"\n        />\n      </div>\n    }\n\n    <ul class=\"wr-transfer__list\" [attr.aria-label]=\"title\">\n      @for (item of state.rows; track item.value) {\n        <li class=\"wr-transfer__item\" [class.wr-transfer__item--disabled]=\"item.disabled\">\n          <wr-checkbox\n            size=\"sm\"\n            [checked]=\"isChecked(pane, item)\"\n            [disabled]=\"disabled() || !!item.disabled\"\n            (checkedChange)=\"toggle(pane, item, $event)\"\n            (touch)=\"touch.emit()\"\n          >\n            {{ item.label }}\n          </wr-checkbox>\n        </li>\n      } @empty {\n        <li class=\"wr-transfer__empty\">{{ resolvedEmpty() }}</li>\n      }\n    </ul>\n  </div>\n\n  <!-- The buttons live between the panes, so they are emitted after the first. -->\n  @if (pane === 'source') {\n    <div class=\"wr-transfer__actions\">\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveRight()\"\n        [attr.aria-label]=\"resolvedToTarget()\"\n        (click)=\"moveRight()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveLeft()\"\n        [attr.aria-label]=\"resolvedToSource()\"\n        (click)=\"moveLeft()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m15 18-6-6 6-6\" />\n        </svg>\n      </button>\n    </div>\n  }\n}\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], sourceTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTitle", required: false }] }], targetTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetTitle", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], toTargetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toTargetLabel", required: false }] }], toSourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toSourceLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrTransfer };
+//# sourceMappingURL=ngwr-transfer.mjs.map

package/fesm2022/ngwr-transfer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-transfer.mjs","sources":["../../../projects/lib/transfer/transfer.ts","../../../projects/lib/transfer/transfer.html","../../../projects/lib/transfer/ngwr-transfer.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, model, output, signal } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WrButton } from 'ngwr/button';\nimport { WrCheckbox } from 'ngwr/checkbox';\nimport { useI18nFormatter, useI18nText } from 'ngwr/i18n';\nimport { WrInput } from 'ngwr/input';\n\nimport type { WrTransferItem } from './interfaces';\n\n/** A pane's rows plus the header state derived from them. */\ninterface PaneState {\n  readonly rows: readonly WrTransferItem[];\n  readonly checkedCount: number;\n  readonly allChecked: boolean;\n  readonly someChecked: boolean;\n}\n\n/**\n * Dual-listbox picker: two panes and the buttons that move rows between them.\n *\n * The full item set is `[items]` and the RIGHT pane is the value — `[(value)]`\n * holds the chosen `WrTransferItem['value']`s, everything else stays left. The\n * checked state inside each pane is transient staging, deliberately not part of\n * the value: what a form cares about is which rows ended up on the right.\n *\n * A signal-forms native control (`FormValueControl<readonly unknown[]>`), so\n * `[formField]` binds straight to `value`; `[(ngModel)]` and reactive forms keep\n * working through Angular's bridge, and `[(value)]` is the standalone shape.\n *\n * @example\n * ```html\n * <!-- Standalone -->\n * <wr-transfer [items]=\"permissions\" [(value)]=\"granted\" />\n *\n * <!-- Searchable, with pane titles -->\n * <wr-transfer\n *   searchable\n *   sourceTitle=\"Available\"\n *   targetTitle=\"Granted\"\n *   [items]=\"permissions\"\n *   [formField]=\"form.granted\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/transfer\n */\n@Component({\n  selector: 'wr-transfer',\n  templateUrl: './transfer.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrButton, WrCheckbox, WrInput],\n})\nexport class WrTransfer implements FormValueControl<readonly unknown[]> {\n  /** Every row, in either pane. Membership of the right pane is `value`. */\n  readonly items = input<readonly WrTransferItem[]>([]);\n\n  /**\n   * Values currently in the RIGHT pane. Two-way bindable; bound automatically\n   * by `[formField]` / `[(ngModel)]`.\n   */\n  readonly value = model<readonly unknown[]>([]);\n\n  /** Emitted on blur / commit so a bound field marks itself touched. */\n  readonly touch = output<void>();\n\n  /** Disable the whole control. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Show a filter box above each pane. @default false */\n  readonly searchable = input(false, { transform: coerceBooleanProperty });\n\n  /** Heading above the left pane. Falls back to `transfer.source`. */\n  readonly sourceTitle = input<string | null>(null);\n\n  /** Heading above the right pane. Falls back to `transfer.target`. */\n  readonly targetTitle = input<string | null>(null);\n\n  /** Placeholder in both filter boxes. Falls back to `transfer.search`. */\n  readonly searchPlaceholder = input<string | null>(null);\n\n  /** Shown in a pane with no rows. Falls back to `transfer.empty`. */\n  readonly emptyText = input<string | null>(null);\n\n  /** Accessible name of the move-right button. Falls back to `transfer.toTarget`. */\n  readonly toTargetLabel = input<string | null>(null);\n\n  /** Accessible name of the move-left button. Falls back to `transfer.toSource`. */\n  readonly toSourceLabel = input<string | null>(null);\n\n  protected readonly resolvedSourceTitle = useI18nText(this.sourceTitle, 'transfer.source', 'Available');\n  protected readonly resolvedTargetTitle = useI18nText(this.targetTitle, 'transfer.target', 'Selected');\n  protected readonly resolvedSearch = useI18nText(this.searchPlaceholder, 'transfer.search', 'Search');\n  protected readonly resolvedEmpty = useI18nText(this.emptyText, 'transfer.empty', 'Nothing here');\n  protected readonly resolvedToTarget = useI18nText(this.toTargetLabel, 'transfer.toTarget', 'Move to selected');\n  protected readonly resolvedToSource = useI18nText(this.toSourceLabel, 'transfer.toSource', 'Move to available');\n\n  /** `{{checked}} / {{total}}` under each heading. @internal */\n  protected readonly countLabel = useI18nFormatter('transfer.count', '{{checked}} / {{total}}');\n\n  /** Pane order — the template iterates it so both panes share one block. */\n  protected readonly panes = ['source', 'target'] as const;\n\n  private readonly sourceQuery = signal('');\n  private readonly targetQuery = signal('');\n\n  /** Staged rows, per pane. Cleared as soon as a move commits them. */\n  private readonly sourceChecked = signal<readonly unknown[]>([]);\n  private readonly targetChecked = signal<readonly unknown[]>([]);\n\n  private readonly valueSet = computed(() => new Set(this.value()));\n\n  protected readonly source = computed<PaneState>(() =>\n    this.pane(\n      this.items().filter(item => !this.valueSet().has(item.value)),\n      this.sourceQuery(),\n      this.sourceChecked()\n    )\n  );\n\n  protected readonly target = computed<PaneState>(() =>\n    this.pane(\n      // Right-pane order follows `value`, not `items`: the order a user built is\n      // the one they expect to read back.\n      this.value()\n        .map(v => this.items().find(item => item.value === v))\n        .filter((item): item is WrTransferItem => item !== undefined),\n      this.targetQuery(),\n      this.targetChecked()\n    )\n  );\n\n  protected readonly canMoveRight = computed(() => !this.disabled() && this.source().checkedCount > 0);\n  protected readonly canMoveLeft = computed(() => !this.disabled() && this.target().checkedCount > 0);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-transfer'];\n    if (this.disabled()) parts.push('wr-transfer--disabled');\n    if (this.searchable()) parts.push('wr-transfer--searchable');\n    return parts.join(' ');\n  });\n\n  protected isChecked(pane: 'source' | 'target', item: WrTransferItem): boolean {\n    return (pane === 'source' ? this.sourceChecked() : this.targetChecked()).includes(item.value);\n  }\n\n  protected toggle(pane: 'source' | 'target', item: WrTransferItem, checked: boolean): void {\n    if (item.disabled) return;\n    const box = pane === 'source' ? this.sourceChecked : this.targetChecked;\n    const current = box();\n    box.set(checked ? [...current, item.value] : current.filter(v => v !== item.value));\n  }\n\n  /** Header checkbox — stages or clears every enabled row the filter shows. */\n  protected toggleAll(pane: 'source' | 'target', checked: boolean): void {\n    const state = pane === 'source' ? this.source() : this.target();\n    const box = pane === 'source' ? this.sourceChecked : this.targetChecked;\n    box.set(checked ? state.rows.filter(item => !item.disabled).map(item => item.value) : []);\n  }\n\n  protected onSearch(pane: 'source' | 'target', event: Event): void {\n    const query = (event.target as HTMLInputElement | null)?.value ?? '';\n    (pane === 'source' ? this.sourceQuery : this.targetQuery).set(query);\n  }\n\n  protected moveRight(): void {\n    const moving = this.sourceChecked();\n    if (moving.length === 0) return;\n    this.value.set([...this.value(), ...moving]);\n    this.sourceChecked.set([]);\n    this.touch.emit();\n  }\n\n  protected moveLeft(): void {\n    const moving = new Set(this.targetChecked());\n    if (moving.size === 0) return;\n    this.value.set(this.value().filter(v => !moving.has(v)));\n    this.targetChecked.set([]);\n    this.touch.emit();\n  }\n\n  /** Filter, then derive the header state from what survived. */\n  private pane(rows: readonly WrTransferItem[], query: string, checked: readonly unknown[]): PaneState {\n    const q = query.trim().toLowerCase();\n    const visible = q ? rows.filter(item => item.label.toLowerCase().includes(q)) : rows;\n    const enabled = visible.filter(item => !item.disabled);\n    const staged = new Set(checked);\n    const checkedCount = enabled.filter(item => staged.has(item.value)).length;\n    return {\n      rows: visible,\n      checkedCount,\n      allChecked: enabled.length > 0 && checkedCount === enabled.length,\n      someChecked: checkedCount > 0 && checkedCount < enabled.length,\n    };\n  }\n}\n","<!--\n  Two panes and the buttons between them. Each pane is a PLAIN `<ul>` of\n  checkboxes, deliberately: dressing it as a `role=\"listbox\"` of `role=\"option\"`\n  rows reads better in the abstract but is invalid — an option may not contain an\n  interactive control, and the axe gate says so. The checkbox is the thing the\n  user operates, so it is the thing the semantics should describe; the pane\n  heading names the group.\n-->\n@for (pane of panes; track pane) {\n  @let state = pane === 'source' ? source() : target();\n  @let title = pane === 'source' ? resolvedSourceTitle() : resolvedTargetTitle();\n\n  <div class=\"wr-transfer__pane\" [class.wr-transfer__pane--target]=\"pane === 'target'\">\n    <div class=\"wr-transfer__head\">\n      <wr-checkbox\n        size=\"sm\"\n        [checked]=\"state.allChecked\"\n        [indeterminate]=\"state.someChecked\"\n        [disabled]=\"disabled() || state.rows.length === 0\"\n        [ariaLabel]=\"title\"\n        (checkedChange)=\"toggleAll(pane, $event)\"\n      />\n      <span class=\"wr-transfer__title\">{{ title }}</span>\n      <span class=\"wr-transfer__count\">{{\n        countLabel({ checked: state.checkedCount, total: state.rows.length })\n      }}</span>\n    </div>\n\n    @if (searchable()) {\n      <div class=\"wr-transfer__search\">\n        <input\n          wrInput\n          wrSize=\"sm\"\n          type=\"search\"\n          [placeholder]=\"resolvedSearch()\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"`${title} — ${resolvedSearch()}`\"\n          (input)=\"onSearch(pane, $event)\"\n        />\n      </div>\n    }\n\n    <ul class=\"wr-transfer__list\" [attr.aria-label]=\"title\">\n      @for (item of state.rows; track item.value) {\n        <li class=\"wr-transfer__item\" [class.wr-transfer__item--disabled]=\"item.disabled\">\n          <wr-checkbox\n            size=\"sm\"\n            [checked]=\"isChecked(pane, item)\"\n            [disabled]=\"disabled() || !!item.disabled\"\n            (checkedChange)=\"toggle(pane, item, $event)\"\n            (touch)=\"touch.emit()\"\n          >\n            {{ item.label }}\n          </wr-checkbox>\n        </li>\n      } @empty {\n        <li class=\"wr-transfer__empty\">{{ resolvedEmpty() }}</li>\n      }\n    </ul>\n  </div>\n\n  <!-- The buttons live between the panes, so they are emitted after the first. -->\n  @if (pane === 'source') {\n    <div class=\"wr-transfer__actions\">\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveRight()\"\n        [attr.aria-label]=\"resolvedToTarget()\"\n        (click)=\"moveRight()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        color=\"primary\"\n        outlined\n        class=\"wr-transfer__move\"\n        [disabled]=\"!canMoveLeft()\"\n        [attr.aria-label]=\"resolvedToSource()\"\n        (click)=\"moveLeft()\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m15 18-6-6 6-6\" />\n        </svg>\n      </button>\n    </div>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;AAKG;AAqBH;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;MAQU,UAAU,CAAA;;IAEZ,KAAK,GAAG,KAAK,CAA4B,EAAE;8EAAC;AAErD;;;AAGG;IACM,KAAK,GAAG,KAAK,CAAqB,EAAE;8EAAC;;IAGrC,KAAK,GAAG,MAAM,EAAQ;;IAGtB,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG/D,WAAW,GAAG,KAAK,CAAgB,IAAI;oFAAC;;IAGxC,WAAW,GAAG,KAAK,CAAgB,IAAI;oFAAC;;IAGxC,iBAAiB,GAAG,KAAK,CAAgB,IAAI;0FAAC;;IAG9C,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;;IAGtC,aAAa,GAAG,KAAK,CAAgB,IAAI;sFAAC;;IAG1C,aAAa,GAAG,KAAK,CAAgB,IAAI;sFAAC;IAEhC,mBAAmB,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,EAAE,WAAW,CAAC;IACnF,mBAAmB,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC;IAClF,cAAc,GAAG,WAAW,CAAC,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,CAAC;IACjF,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC7E,gBAAgB,GAAG,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;IAC3F,gBAAgB,GAAG,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;;AAG5F,IAAA,UAAU,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,yBAAyB,CAAC;;AAG1E,IAAA,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU;IAEvC,WAAW,GAAG,MAAM,CAAC,EAAE;oFAAC;IACxB,WAAW,GAAG,MAAM,CAAC,EAAE;oFAAC;;IAGxB,aAAa,GAAG,MAAM,CAAqB,EAAE;sFAAC;IAC9C,aAAa,GAAG,MAAM,CAAqB,EAAE;sFAAC;AAE9C,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;iFAAC;IAE9C,MAAM,GAAG,QAAQ,CAAY,MAC9C,IAAI,CAAC,IAAI,CACP,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAC7D,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,CACrB;+EACF;IAEkB,MAAM,GAAG,QAAQ,CAAY,MAC9C,IAAI,CAAC,IAAI;;;IAGP,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC;SACpD,MAAM,CAAC,CAAC,IAAI,KAA6B,IAAI,KAAK,SAAS,CAAC,EAC/D,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,CACrB;+EACF;AAEkB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY,GAAG,CAAC;qFAAC;AACjF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY,GAAG,CAAC;oFAAC;AAEhF,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,CAAC;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;QACxD,IAAI,IAAI,CAAC,UAAU,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;AAC5D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;IAEQ,SAAS,CAAC,IAAyB,EAAE,IAAoB,EAAA;QACjE,OAAO,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/F;AAEU,IAAA,MAAM,CAAC,IAAyB,EAAE,IAAoB,EAAE,OAAgB,EAAA;QAChF,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;AACvE,QAAA,MAAM,OAAO,GAAG,GAAG,EAAE;AACrB,QAAA,GAAG,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,GAAG,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IACrF;;IAGU,SAAS,CAAC,IAAyB,EAAE,OAAgB,EAAA;AAC7D,QAAA,MAAM,KAAK,GAAG,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AAC/D,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;AACvE,QAAA,GAAG,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;IAC3F;IAEU,QAAQ,CAAC,IAAyB,EAAE,KAAY,EAAA;QACxD,MAAM,KAAK,GAAI,KAAK,CAAC,MAAkC,EAAE,KAAK,IAAI,EAAE;QACpE,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;IACtE;IAEU,SAAS,GAAA;AACjB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;AACnC,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;IAEU,QAAQ,GAAA;QAChB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;AAC5C,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC;YAAE;QACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;;AAGQ,IAAA,IAAI,CAAC,IAA+B,EAAE,KAAa,EAAE,OAA2B,EAAA;QACtF,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,QAAA,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;AACpF,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AACtD,QAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC;QAC/B,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;QAC1E,OAAO;AACL,YAAA,IAAI,EAAE,OAAO;YACb,YAAY;YACZ,UAAU,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,KAAK,OAAO,CAAC,MAAM;YACjE,WAAW,EAAE,YAAY,GAAG,CAAC,IAAI,YAAY,GAAG,OAAO,CAAC,MAAM;SAC/D;IACH;uGA7IW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,kgDC9DvB,ozHAqHA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDzDY,QAAQ,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,cAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,uBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,mMAAE,OAAO,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAE5B,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,iBAER,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,WACvB,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,ozHAAA,EAAA;;;AE5D1C;;AAEG;;;;"}