ngwr 11.2.0 → 12.1.0

package/fesm2022/ngwr-toast.mjs

@@ -114,10 +114,10 @@ class WrToastItem {
             this.swipeX.set(0);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrToastItem, isStandalone: true, selector: "wr-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showCopy: { classPropertyName: "showCopy", publicName: "showCopy", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed", pauseRequested: "pauseRequested", resumeRequested: "resumeRequested" }, host: { listeners: { "mouseenter": "pauseRequested.emit()", "mouseleave": "resumeRequested.emit()", "touchstart": "onSwipeStart($event)", "touchmove": "onSwipeMove($event)", "touchend": "onSwipeEnd()", "touchcancel": "onSwipeEnd()" }, properties: { "class": "classes()", "style.--wr-toast-duration": "durationMs()", "style.transform": "swipeTransform()", "style.opacity": "swipeOpacity()", "style.transition": "swiping() ? \"none\" : null", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "<div class=\"wr-toast__body\">\n  @if (title(); as text) {\n    <p class=\"wr-toast__title\">{{ text }}</p>\n  }\n  <p class=\"wr-toast__message\">{{ message() }}</p>\n</div>\n\n<div class=\"wr-toast__actions\">\n  @if (showCopy()) {\n    <button\n      type=\"button\"\n      class=\"wr-toast__action wr-toast__action--copy\"\n      [attr.aria-label]=\"justCopied() ? labels().copied : labels().copy\"\n      [title]=\"justCopied() ? labels().copied : labels().copy\"\n      (click)=\"onCopy()\"\n    >\n      @if (justCopied()) {\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=\"M20 6 9 17l-5-5\" />\n        </svg>\n      } @else {\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          <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n          <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n        </svg>\n      }\n    </button>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"wr-toast__action wr-toast__action--close\"\n      [attr.aria-label]=\"labels().close\"\n      [title]=\"labels().close\"\n      (click)=\"dismissed.emit()\"\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (progressVisible()) {\n  <span class=\"wr-toast__progress\" aria-hidden=\"true\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrToastItem, isStandalone: true, selector: "wr-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showCopy: { classPropertyName: "showCopy", publicName: "showCopy", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed", pauseRequested: "pauseRequested", resumeRequested: "resumeRequested" }, host: { listeners: { "mouseenter": "pauseRequested.emit()", "mouseleave": "resumeRequested.emit()", "touchstart": "onSwipeStart($event)", "touchmove": "onSwipeMove($event)", "touchend": "onSwipeEnd()", "touchcancel": "onSwipeEnd()" }, properties: { "class": "classes()", "style.--wr-toast-duration": "durationMs()", "style.transform": "swipeTransform()", "style.opacity": "swipeOpacity()", "style.transition": "swiping() ? \"none\" : null", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "<div class=\"wr-toast__body\">\n  @if (title(); as text) {\n    <p class=\"wr-toast__title\">{{ text }}</p>\n  }\n  <p class=\"wr-toast__message\">{{ message() }}</p>\n</div>\n\n<div class=\"wr-toast__actions\">\n  @if (showCopy()) {\n    <button\n      type=\"button\"\n      class=\"wr-toast__action wr-toast__action--copy\"\n      [attr.aria-label]=\"justCopied() ? labels().copied : labels().copy\"\n      [title]=\"justCopied() ? labels().copied : labels().copy\"\n      (click)=\"onCopy()\"\n    >\n      @if (justCopied()) {\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=\"M20 6 9 17l-5-5\" />\n        </svg>\n      } @else {\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          <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n          <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n        </svg>\n      }\n    </button>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"wr-toast__action wr-toast__action--close\"\n      [attr.aria-label]=\"labels().close\"\n      [title]=\"labels().close\"\n      (click)=\"dismissed.emit()\"\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (progressVisible()) {\n  <span class=\"wr-toast__progress\" aria-hidden=\"true\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToastItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToastItem, decorators: [{
             type: Component,
             args: [{ selector: 'wr-toast', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
@@ -283,10 +283,10 @@ class WrToastHost {
     showCopyFor(t) {
         return t.showCopy ?? this.config().showCopy;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrToastHost, isStandalone: true, selector: "wr-toast-host", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", pauseRequested: "pauseRequested", resumeRequested: "resumeRequested", dismissAllRequested: "dismissAllRequested" }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "class": "classes()", "attr.aria-label": "regionLabel()" } }, ngImport: i0, template: "@if (closeAllVisible()) {\n  <button type=\"button\" class=\"wr-toast-host__close-all\" (click)=\"dismissAllRequested.emit()\">\n    {{ closeAllLabel() }} ({{ totalCount() }})\n  </button>\n}\n\n@for (toast of toasts(); track toast.id) {\n  <wr-toast\n    [style.--wr-toast-stack-index]=\"stackIndex($index)\"\n    [type]=\"toast.type ?? 'info'\"\n    [title]=\"toast.title ?? null\"\n    [message]=\"toast.message\"\n    [dismissible]=\"toast.dismissible ?? true\"\n    [showProgress]=\"showProgressFor(toast)\"\n    [showCopy]=\"showCopyFor(toast)\"\n    [duration]=\"toast.resolvedDuration\"\n    [labels]=\"labels()\"\n    (dismissed)=\"dismissed.emit(toast.id)\"\n    (pauseRequested)=\"pauseRequested.emit(toast.id)\"\n    (resumeRequested)=\"resumeRequested.emit(toast.id)\"\n  />\n}\n", dependencies: [{ kind: "component", type: WrToastItem, selector: "wr-toast", inputs: ["type", "title", "message", "dismissible", "showProgress", "showCopy", "duration", "labels"], outputs: ["dismissed", "pauseRequested", "resumeRequested"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrToastHost, isStandalone: true, selector: "wr-toast-host", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", pauseRequested: "pauseRequested", resumeRequested: "resumeRequested", dismissAllRequested: "dismissAllRequested" }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "class": "classes()", "attr.aria-label": "regionLabel()" } }, ngImport: i0, template: "@if (closeAllVisible()) {\n  <button type=\"button\" class=\"wr-toast-host__close-all\" (click)=\"dismissAllRequested.emit()\">\n    {{ closeAllLabel() }} ({{ totalCount() }})\n  </button>\n}\n\n@for (toast of toasts(); track toast.id) {\n  <wr-toast\n    [style.--wr-toast-stack-index]=\"stackIndex($index)\"\n    [type]=\"toast.type ?? 'info'\"\n    [title]=\"toast.title ?? null\"\n    [message]=\"toast.message\"\n    [dismissible]=\"toast.dismissible ?? true\"\n    [showProgress]=\"showProgressFor(toast)\"\n    [showCopy]=\"showCopyFor(toast)\"\n    [duration]=\"toast.resolvedDuration\"\n    [labels]=\"labels()\"\n    (dismissed)=\"dismissed.emit(toast.id)\"\n    (pauseRequested)=\"pauseRequested.emit(toast.id)\"\n    (resumeRequested)=\"resumeRequested.emit(toast.id)\"\n  />\n}\n", dependencies: [{ kind: "component", type: WrToastItem, selector: "wr-toast", inputs: ["type", "title", "message", "dismissible", "showProgress", "showCopy", "duration", "labels"], outputs: ["dismissed", "pauseRequested", "resumeRequested"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToastHost, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToastHost, decorators: [{
             type: Component,
             args: [{ selector: 'wr-toast-host', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
@@ -533,10 +533,10 @@ class WrToast {
             this.hostRef = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToast, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrToast });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToast, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrToast });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToast, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-toolbar.mjs

@@ -37,10 +37,10 @@ class WrToolbar {
      * adapts inside a narrow column or split pane). @default false
      */
     responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrToolbar, isStandalone: true, selector: "wr-toolbar", inputs: { responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class.wr-toolbar--responsive": "responsive()" }, classAttribute: "wr-toolbar" }, ngImport: i0, template: "<div class=\"wr-toolbar__zone wr-toolbar__zone--start\">\n  <ng-content select=\"[wrToolbarStart]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--center\">\n  <ng-content select=\"[wrToolbarCenter]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--end\">\n  <ng-content select=\"[wrToolbarEnd]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrToolbar, isStandalone: true, selector: "wr-toolbar", inputs: { responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class.wr-toolbar--responsive": "responsive()" }, classAttribute: "wr-toolbar" }, ngImport: i0, template: "<div class=\"wr-toolbar__zone wr-toolbar__zone--start\">\n  <ng-content select=\"[wrToolbarStart]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--center\">\n  <ng-content select=\"[wrToolbarCenter]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--end\">\n  <ng-content select=\"[wrToolbarEnd]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrToolbar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-toolbar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-toolbar', role: 'toolbar', '[class.wr-toolbar--responsive]': 'responsive()' }, template: "<div class=\"wr-toolbar__zone wr-toolbar__zone--start\">\n  <ng-content select=\"[wrToolbarStart]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--center\">\n  <ng-content select=\"[wrToolbarCenter]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--end\">\n  <ng-content select=\"[wrToolbarEnd]\" />\n</div>\n" }]
         }], propDecorators: { responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }] } });

package/fesm2022/ngwr-tour.mjs

@@ -26,8 +26,7 @@ const WR_TOUR_STEP = new InjectionToken('WR_TOUR_STEP');
 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.
+    // forward. Both helpers are reactive.
     nextLabel = readI18nText('tour.next', 'Next');
     backLabel = readI18nText('tour.back', 'Back');
     doneLabel = readI18nText('tour.done', 'Done');
@@ -39,7 +38,10 @@ class WrTourPopup {
     // ended the tour when it was pressed.
     isLast = computed(() => this.tour.isLast(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
-    isFirst = computed(() => this.tour.index() <= 0, /* @ts-ignore */
+    // Same story at the other end, and the same fix: `index() <= 0` rendered a Back
+    // button on the first card of a tour whose leading step had been skipped, and
+    // `prev()` walks off the start and returns — so the button did nothing at all.
+    isFirst = computed(() => this.tour.isFirst(), /* @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 */ []));
@@ -48,12 +50,12 @@ class WrTourPopup {
         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.1", ngImport: i0, type: WrTourPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else \u2014 and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTourPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else \u2014 and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel() }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel() }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\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.1", ngImport: i0, type: WrTourPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else \u2014 and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\n    {{ isLast() ? doneLabel : nextLabel }}\n  </button>\n</div>\n" }]
+            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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else \u2014 and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel() }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel() }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\n    {{ isLast() ? doneLabel() : nextLabel() }}\n  </button>\n</div>\n" }]
         }] });
 
 /**
@@ -132,6 +134,9 @@ class WrTour {
     // move, in `goTo`, because reachability is a DOM question and not a signal.
     noStepAfter = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noStepAfter" }] : /* istanbul ignore next */ []));
+    // The same question looking the other way. Settled in `goTo` for the same reason.
+    noStepBefore = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noStepBefore" }] : /* istanbul ignore next */ []));
     /**
      * Whether this is the last step the user will see. Not `index() === total() - 1`:
      * a trailing step whose target is missing is skipped, so comparing against the
@@ -140,6 +145,15 @@ class WrTour {
      */
     isLast = computed(() => this.noStepAfter(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this is the first step the user will see. Not `index() === 0`, for the
+     * mirror of the reason above: a LEADING step whose target is missing is skipped,
+     * so the tour opens on a later index and the raw one put a Back button on the
+     * first card — one that did nothing at all, because `prev()` walks off the start
+     * and returns without moving.
+     */
+    isFirst = computed(() => this.noStepBefore(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
     constructor() {
         // Everything this service owns lives OUTSIDE its own injector: a CDK overlay, a
         // div appended to `document.body`, a document keydown listener and two window
@@ -197,6 +211,7 @@ class WrTour {
         this.teardownStep();
         this.cursor.set(i);
         this.noStepAfter.set(!this.anyResolvableAfter(i));
+        this.noStepBefore.set(!this.anyResolvableBefore(i));
         this.openStep(steps[i]);
     }
     /** Whether the tour has a step past `index` that can actually be shown. */
@@ -208,6 +223,15 @@ class WrTour {
         }
         return false;
     }
+    /** Whether the tour has a step before `index` that can actually be shown. */
+    anyResolvableBefore(index) {
+        const steps = this.steps();
+        for (let i = index - 1; i >= 0; i -= 1) {
+            if (this.resolve(steps[i]) !== null)
+                return true;
+        }
+        return false;
+    }
     resolve(step) {
         if (typeof step.target !== 'string')
             return step.target.isConnected ? step.target : null;
@@ -301,10 +325,10 @@ class WrTour {
     isRtl() {
         return this.dir?.value === 'rtl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTour, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrTour });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTour, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrTour });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTour, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTour, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 

package/fesm2022/ngwr-tour.mjs.map

@@ -1 +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  /**\n   * Whether this is the last step the user will actually see — the service looks\n   * ahead for a reachable one, because a trailing step whose target is missing gets\n   * skipped and the raw count would call the final card \"Next\".\n   */\n  readonly isLast: () => boolean;\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  // From the service, not `index() >= total() - 1`: a trailing step whose target is\n  // missing gets skipped, so the raw count called the final card \"Next\" and then\n  // ended the tour when it was pressed.\n  protected readonly isLast = computed(() => this.tour.isLast());\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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else — and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\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 { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { type OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DOCUMENT,\n  DestroyRef,\n  EnvironmentInjector,\n  Injector,\n  PLATFORM_ID,\n  Service,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\n\nimport { WR_OVERLAY, wrMirrorOffsets } 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 dir = inject(Directionality, { optional: true });\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 focusTrap: ConfigurableFocusTrap | 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  // Whether any step AFTER the current one can actually be shown. Settled once per\n  // move, in `goTo`, because reachability is a DOM question and not a signal.\n  private readonly noStepAfter = signal(false);\n\n  /**\n   * Whether this is the last step the user will see. Not `index() === total() - 1`:\n   * a trailing step whose target is missing is skipped, so comparing against the\n   * raw count left the primary button reading \"Next\" on the final card and then\n   * ending the tour when it was pressed.\n   */\n  readonly isLast = computed(() => this.noStepAfter());\n\n  constructor() {\n    // Everything this service owns lives OUTSIDE its own injector: a CDK overlay, a\n    // div appended to `document.body`, a document keydown listener and two window\n    // listeners. Nothing removes them when the injector goes, so a tour running at\n    // teardown left its cut-out on the page.\n    inject(DestroyRef).onDestroy(() => this.stop());\n  }\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.noStepAfter.set(!this.anyResolvableAfter(i));\n    this.openStep(steps[i]);\n  }\n\n  /** Whether the tour has a step past `index` that can actually be shown. */\n  private anyResolvableAfter(index: number): boolean {\n    const steps = this.steps();\n    for (let i = index + 1; i < steps.length; i += 1) {\n      if (this.resolve(steps[i]) !== null) return true;\n    }\n    return false;\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        wrMirrorOffsets(\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          this.isRtl()\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    // Kept on the instance, not in a local: a trap registers with CDK's\n    // `FocusTrapManager` and installs a capture-phase document focus listener, so an\n    // undestroyed one leaks per STEP and every tour left a stack of them behind.\n    this.focusTrap = this.focusTrapFactory.create(ref.location.nativeElement as HTMLElement);\n    void this.focusTrap.focusInitialElementWhenReady();\n\n    const onKey = (event: KeyboardEvent): void => {\n      // The listener is on the document, so a step shown over a dialog would see the\n      // Escape that dialog just handled and close the tour too.\n      if (event.key === 'Escape' && !event.defaultPrevented) {\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.focusTrap?.destroy();\n    this.focusTrap = null;\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   * Whether the app reads right-to-left.\n   *\n   * Optional inject: `Directionality` is root-provided, so this is never null in\n   * an app — but a bare `TestBed` that provides nothing should still get a\n   * component that works, and defaulting to LTR is the honest fallback.\n   */\n  private isRtl(): boolean {\n    return this.dir?.value === 'rtl';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"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  /**\n   * Whether this is the last step the user will actually see — the service looks\n   * ahead for a reachable one, because a trailing step whose target is missing gets\n   * skipped and the raw count would call the final card \"Next\".\n   */\n  readonly isLast: () => boolean;\n  /**\n   * Whether this is the first step the user will actually see — the service looks\n   * BEHIND for a reachable one, for the mirror reason: a leading step whose target\n   * is missing gets skipped, so the tour opens on a later index and the raw one\n   * would put a Back button on the very first card.\n   */\n  readonly isFirst: () => boolean;\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. Both helpers are reactive.\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  // From the service, not `index() >= total() - 1`: a trailing step whose target is\n  // missing gets skipped, so the raw count called the final card \"Next\" and then\n  // ended the tour when it was pressed.\n  protected readonly isLast = computed(() => this.tour.isLast());\n  // Same story at the other end, and the same fix: `index() <= 0` rendered a Back\n  // button on the first card of a tour whose leading step had been skipped, and\n  // `prev()` walks off the start and returns — so the button did nothing at all.\n  protected readonly isFirst = computed(() => this.tour.isFirst());\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  <!-- The three buttons are told apart by a class rather than by their position in\n       the row: the back button is conditional, so an index means one thing on the\n       first step and another everywhere else — and the labels are translated. -->\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"medium\"\n    outlined\n    class=\"wr-tour-popup__action wr-tour-popup__action--skip\"\n    (click)=\"tour.stop()\"\n  >\n    {{ skipLabel() }}\n  </button>\n\n  <span class=\"wr-tour-popup__spacer\"></span>\n\n  @if (!isFirst()) {\n    <button\n      wr-btn\n      type=\"button\"\n      size=\"sm\"\n      outlined\n      class=\"wr-tour-popup__action wr-tour-popup__action--back\"\n      (click)=\"tour.prev()\"\n    >\n      {{ backLabel() }}\n    </button>\n  }\n  <button\n    wr-btn\n    type=\"button\"\n    size=\"sm\"\n    color=\"primary\"\n    class=\"wr-tour-popup__action wr-tour-popup__action--next\"\n    (click)=\"tour.next()\"\n  >\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 { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { type OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DOCUMENT,\n  DestroyRef,\n  EnvironmentInjector,\n  Injector,\n  PLATFORM_ID,\n  Service,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\n\nimport { WR_OVERLAY, wrMirrorOffsets } 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 dir = inject(Directionality, { optional: true });\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 focusTrap: ConfigurableFocusTrap | 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  // Whether any step AFTER the current one can actually be shown. Settled once per\n  // move, in `goTo`, because reachability is a DOM question and not a signal.\n  private readonly noStepAfter = signal(false);\n\n  // The same question looking the other way. Settled in `goTo` for the same reason.\n  private readonly noStepBefore = signal(true);\n\n  /**\n   * Whether this is the last step the user will see. Not `index() === total() - 1`:\n   * a trailing step whose target is missing is skipped, so comparing against the\n   * raw count left the primary button reading \"Next\" on the final card and then\n   * ending the tour when it was pressed.\n   */\n  readonly isLast = computed(() => this.noStepAfter());\n\n  /**\n   * Whether this is the first step the user will see. Not `index() === 0`, for the\n   * mirror of the reason above: a LEADING step whose target is missing is skipped,\n   * so the tour opens on a later index and the raw one put a Back button on the\n   * first card — one that did nothing at all, because `prev()` walks off the start\n   * and returns without moving.\n   */\n  readonly isFirst = computed(() => this.noStepBefore());\n\n  constructor() {\n    // Everything this service owns lives OUTSIDE its own injector: a CDK overlay, a\n    // div appended to `document.body`, a document keydown listener and two window\n    // listeners. Nothing removes them when the injector goes, so a tour running at\n    // teardown left its cut-out on the page.\n    inject(DestroyRef).onDestroy(() => this.stop());\n  }\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.noStepAfter.set(!this.anyResolvableAfter(i));\n    this.noStepBefore.set(!this.anyResolvableBefore(i));\n    this.openStep(steps[i]);\n  }\n\n  /** Whether the tour has a step past `index` that can actually be shown. */\n  private anyResolvableAfter(index: number): boolean {\n    const steps = this.steps();\n    for (let i = index + 1; i < steps.length; i += 1) {\n      if (this.resolve(steps[i]) !== null) return true;\n    }\n    return false;\n  }\n\n  /** Whether the tour has a step before `index` that can actually be shown. */\n  private anyResolvableBefore(index: number): boolean {\n    const steps = this.steps();\n    for (let i = index - 1; i >= 0; i -= 1) {\n      if (this.resolve(steps[i]) !== null) return true;\n    }\n    return false;\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        wrMirrorOffsets(\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          this.isRtl()\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    // Kept on the instance, not in a local: a trap registers with CDK's\n    // `FocusTrapManager` and installs a capture-phase document focus listener, so an\n    // undestroyed one leaks per STEP and every tour left a stack of them behind.\n    this.focusTrap = this.focusTrapFactory.create(ref.location.nativeElement as HTMLElement);\n    void this.focusTrap.focusInitialElementWhenReady();\n\n    const onKey = (event: KeyboardEvent): void => {\n      // The listener is on the document, so a step shown over a dialog would see the\n      // Escape that dialog just handled and close the tour too.\n      if (event.key === 'Escape' && !event.defaultPrevented) {\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.focusTrap?.destroy();\n    this.focusTrap = null;\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   * Whether the app reads right-to-left.\n   *\n   * Optional inject: `Directionality` is root-provided, so this is never null in\n   * an app — but a bare `TestBed` that provides nothing should still get a\n   * component that works, and defaulting to LTR is the honest fallback.\n   */\n  private isRtl(): boolean {\n    return this.dir?.value === 'rtl';\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

@@ -199,10 +199,10 @@ class WrTransfer {
             someChecked: shown.length > 0 && shown.length < enabled.length,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", 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.enabledCount === 0\"\n        [ariaLabel]=\"`${title} \u2014 ${resolvedSelectAll()}`\"\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 wr-transfer__move--to-target\"\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 wr-transfer__move--to-source\"\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", 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.enabledCount === 0\"\n        [ariaLabel]=\"`${title} \u2014 ${resolvedSelectAll()}`\"\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 wr-transfer__move--to-target\"\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 wr-transfer__move--to-source\"\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.1", ngImport: i0, type: WrTransfer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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.enabledCount === 0\"\n        [ariaLabel]=\"`${title} \u2014 ${resolvedSelectAll()}`\"\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 wr-transfer__move--to-target\"\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 wr-transfer__move--to-source\"\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 }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], toTargetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toTargetLabel", required: false }] }], toSourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toSourceLabel", required: false }] }] } });

package/fesm2022/ngwr-tree.mjs

@@ -4,7 +4,7 @@ import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, computed, output, inject, ElementRef, ViewContainerRef, DestroyRef, PLATFORM_ID, signal, viewChild, TemplateRef, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
+import { input, model, computed, output, inject, ElementRef, ViewContainerRef, DestroyRef, PLATFORM_ID, Injector, signal, viewChild, TemplateRef, effect, untracked, afterNextRender, ViewEncapsulation, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useI18nText, readI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
@@ -159,6 +159,7 @@ class WrTree {
     scrollStrategies = inject(ScrollStrategyOptions);
     destroyRef = inject(DestroyRef);
     platformId = inject(PLATFORM_ID);
+    injector = inject(Injector);
     /**
      * Ambient reading direction. Optional so a bare `TestBed` — or a consumer who
      * never set a direction — needs no provider; `Directionality` is root-provided
@@ -185,7 +186,7 @@ class WrTree {
         return Math.min(this.focusedIndex(), last);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cursorIndex" }] : /* istanbul ignore next */ []));
-    /** Resolved ARIA labels — resolved once at construction, so a runtime locale switch needs a re-create. */
+    /** Resolved ARIA labels — signals, so they follow both a late catalog and a locale switch. */
     clearLabel = readI18nText('tree.clearSelection', 'Clear selection');
     expandLabel = readI18nText('tree.expand', 'Expand');
     collapseLabel = readI18nText('tree.collapse', 'Collapse');
@@ -718,10 +719,27 @@ class WrTree {
             panelClass: 'wr-tree-overlay',
         });
         this.overlayRef.attach(new TemplatePortal(tpl, this.vcr));
-        // Virtual mode drives keyboard nav via aria-activedescendant on the list
-        // container, so it must hold focus once the panel is attached.
-        if (this.virtualized())
-            queueMicrotask(() => this.listElement?.focus());
+        // The panel owns the keyboard from here, in BOTH render shapes. `onKeydown`
+        // lives on the `<ul>` inside the portal and the trigger has no handler of
+        // its own, so leaving focus on the trigger — which is what the non-virtual
+        // shape used to do — made an overlay tree mouse-only: arrows, Home/End and
+        // Enter all did nothing, and the rows were reachable only by tabbing through
+        // the rest of the page, since the pane is appended to `<body>`. Virtual mode
+        // focuses the LIST (managed focus via `aria-activedescendant`); the
+        // non-virtual shape focuses the roving row, which carries the tab stop.
+        //
+        // `afterNextRender`, NOT `queueMicrotask`: under zoneless CD the scheduler
+        // runs change detection in a macrotask, so a microtask queued here fires
+        // first and focuses whatever the panel held before this open — the same trap
+        // that once left `wr-calendar`'s ring and real focus on different days.
+        afterNextRender(() => {
+            if (this.virtualized()) {
+                this.listElement?.focus();
+                return;
+            }
+            const row = this.overlayRef?.overlayElement.querySelector(`[data-tree-index="${this.cursorIndex()}"]`);
+            row?.focus();
+        }, { injector: this.injector });
         this.outsideClick
             .outsidePointerEvents(this.overlayRef)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -754,12 +772,12 @@ class WrTree {
         if (inPanel)
             this.host.nativeElement.querySelector('.wr-tree__trigger')?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTree, isStandalone: true, selector: "wr-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandAll: { classPropertyName: "defaultExpandAll", publicName: "defaultExpandAll", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", expanded: "expandedChange", value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\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=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <!-- `aria-setsize` / `aria-posinset` in BOTH shapes: the list is flat with no\n           `role=\"group\"` either way, so the set a row belongs to is never expressed\n           by the DOM. Gated behind the virtual flag, the same tree announced a\n           position with windowing on and nothing with it off. -->\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === cursorIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"entry.setsize\"\n        [attr.aria-posinset]=\"entry.posinset\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === cursorIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTree, isStandalone: true, selector: "wr-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandAll: { classPropertyName: "defaultExpandAll", publicName: "defaultExpandAll", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", expanded: "expandedChange", value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\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=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel()\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <!-- `aria-setsize` / `aria-posinset` in BOTH shapes: the list is flat with no\n           `role=\"group\"` either way, so the set a row belongs to is never expressed\n           by the DOM. Gated behind the virtual flag, the same tree announced a\n           position with windowing on and nothing with it off. -->\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === cursorIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"entry.setsize\"\n        [attr.aria-posinset]=\"entry.posinset\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === cursorIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel() : expandLabel()\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTree, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-tree', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [NgTemplateOutlet], template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\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=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <!-- `aria-setsize` / `aria-posinset` in BOTH shapes: the list is flat with no\n           `role=\"group\"` either way, so the set a row belongs to is never expressed\n           by the DOM. Gated behind the virtual flag, the same tree announced a\n           position with windowing on and nothing with it off. -->\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === cursorIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"entry.setsize\"\n        [attr.aria-posinset]=\"entry.posinset\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === cursorIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n" }]
+            args: [{ selector: 'wr-tree', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [NgTemplateOutlet], template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\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=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel()\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <!-- `aria-setsize` / `aria-posinset` in BOTH shapes: the list is flat with no\n           `role=\"group\"` either way, so the set a row belongs to is never expressed\n           by the DOM. Gated behind the virtual flag, the same tree announced a\n           position with windowing on and nothing with it off. -->\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === cursorIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"entry.setsize\"\n        [attr.aria-posinset]=\"entry.posinset\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === cursorIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel() : expandLabel()\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTagCount", required: false }] }], defaultExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandAll", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**