ngwr 14.0.0 → 14.1.0

package/fesm2022/ngwr-directives.mjs

@@ -35,10 +35,10 @@ class WrAutofocus {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAutofocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrAutofocus, isStandalone: true, selector: "[wrAutofocus]", inputs: { wrAutofocus: { classPropertyName: "wrAutofocus", publicName: "wrAutofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAutofocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrAutofocus, isStandalone: true, selector: "[wrAutofocus]", inputs: { wrAutofocus: { classPropertyName: "wrAutofocus", publicName: "wrAutofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAutofocus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAutofocus, decorators: [{
             type: Directive,
             args: [{ selector: '[wrAutofocus]' }]
         }], ctorParameters: () => [], propDecorators: { wrAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrAutofocus", required: false }] }] } });
@@ -109,10 +109,10 @@ class WrAutosize {
         node.style.height = `${next}px`;
         node.style.overflowY = node.scrollHeight + border > max ? 'auto' : 'hidden';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAutosize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrAutosize, isStandalone: true, selector: "textarea[wrAutosize]", inputs: { minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()" }, properties: { "style.overflow": "'hidden'", "style.resize": "'none'" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAutosize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrAutosize, isStandalone: true, selector: "textarea[wrAutosize]", inputs: { minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()" }, properties: { "style.overflow": "'hidden'", "style.resize": "'none'" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAutosize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAutosize, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[wrAutosize]',
@@ -160,10 +160,10 @@ class WrClickOutside {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrClickOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrClickOutside, isStandalone: true, selector: "[wrClickOutside]", outputs: { wrClickOutside: "wrClickOutside" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrClickOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrClickOutside, isStandalone: true, selector: "[wrClickOutside]", outputs: { wrClickOutside: "wrClickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrClickOutside, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrClickOutside, decorators: [{
             type: Directive,
             args: [{ selector: '[wrClickOutside]' }]
         }], ctorParameters: () => [], propDecorators: { wrClickOutside: [{ type: i0.Output, args: ["wrClickOutside"] }] } });
@@ -260,10 +260,10 @@ class WrCopyToClipboard {
                 previous.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrCopyToClipboard, isStandalone: true, selector: "[wrCopyToClipboard]", inputs: { wrCopyToClipboard: { classPropertyName: "wrCopyToClipboard", publicName: "wrCopyToClipboard", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { copied: "copied", copyFailed: "copyFailed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrCopyToClipboard, isStandalone: true, selector: "[wrCopyToClipboard]", inputs: { wrCopyToClipboard: { classPropertyName: "wrCopyToClipboard", publicName: "wrCopyToClipboard", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { copied: "copied", copyFailed: "copyFailed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrCopyToClipboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrCopyToClipboard, decorators: [{
             type: Directive,
             args: [{ selector: '[wrCopyToClipboard]', host: { '(click)': 'onClick()' } }]
         }], propDecorators: { wrCopyToClipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrCopyToClipboard", required: true }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyFailed: [{ type: i0.Output, args: ["copyFailed"] }] } });

package/fesm2022/ngwr-divider.mjs

@@ -110,10 +110,10 @@ class WrDivider {
         else
             el.removeAttribute('aria-label');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrDivider, isStandalone: true, selector: "wr-divider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()", "style.--wr-divider-width.px": "width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrDivider, isStandalone: true, selector: "wr-divider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()", "style.--wr-divider-width.px": "width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDivider, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-divider',

package/fesm2022/ngwr-donut-chart.mjs

@@ -138,10 +138,10 @@ class WrDonutChart {
             'Z',
         ].join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrDonutChart, isStandalone: true, selector: "wr-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-donut-chart" }, ngImport: i0, template: "<div class=\"wr-donut-chart__surface\" [style.width.px]=\"size()\">\n  <!-- The name sits on the DRAWING, not on this wrapper. `img` is a\n       children-presentational role, so with it out here WebKit dropped the whole\n       subtree \u2014 including the centre value and label, which are real text and are\n       the headline datum the legend does not carry. -->\n  <svg viewBox=\"0 0 100 100\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\">\n    @for (slice of slices(); track $index) {\n      <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" />\n    }\n  </svg>\n  @if (centerValue() || centerLabel()) {\n    <div class=\"wr-donut-chart__center\">\n      @if (centerValue()) {\n        <div class=\"wr-donut-chart__center-value\">{{ centerValue() }}</div>\n      }\n      @if (centerLabel()) {\n        <div class=\"wr-donut-chart__center-label\">{{ centerLabel() }}</div>\n      }\n    </div>\n  }\n</div>\n\n@if (showLegend() && slices().length > 0) {\n  <ul class=\"wr-donut-chart__legend\">\n    @for (slice of slices(); track $index) {\n      <li class=\"wr-donut-chart__legend-item\">\n        <span class=\"wr-donut-chart__swatch\" [style.background]=\"slice.color\"></span>\n        <span class=\"wr-donut-chart__legend-label\">{{ slice.label }}</span>\n        <span class=\"wr-donut-chart__legend-value\">{{ slice.value }}</span>\n      </li>\n    }\n  </ul>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrDonutChart, isStandalone: true, selector: "wr-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-donut-chart" }, ngImport: i0, template: "<div class=\"wr-donut-chart__surface\" [style.width.px]=\"size()\">\n  <!-- The name sits on the DRAWING, not on this wrapper. `img` is a\n       children-presentational role, so with it out here WebKit dropped the whole\n       subtree \u2014 including the centre value and label, which are real text and are\n       the headline datum the legend does not carry. -->\n  <svg viewBox=\"0 0 100 100\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\">\n    @for (slice of slices(); track $index) {\n      <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" />\n    }\n  </svg>\n  @if (centerValue() || centerLabel()) {\n    <div class=\"wr-donut-chart__center\">\n      @if (centerValue()) {\n        <div class=\"wr-donut-chart__center-value\">{{ centerValue() }}</div>\n      }\n      @if (centerLabel()) {\n        <div class=\"wr-donut-chart__center-label\">{{ centerLabel() }}</div>\n      }\n    </div>\n  }\n</div>\n\n@if (showLegend() && slices().length > 0) {\n  <ul class=\"wr-donut-chart__legend\">\n    @for (slice of slices(); track $index) {\n      <li class=\"wr-donut-chart__legend-item\">\n        <span class=\"wr-donut-chart__swatch\" [style.background]=\"slice.color\"></span>\n        <span class=\"wr-donut-chart__legend-label\">{{ slice.label }}</span>\n        <span class=\"wr-donut-chart__legend-value\">{{ slice.value }}</span>\n      </li>\n    }\n  </ul>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDonutChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDonutChart, decorators: [{
             type: Component,
             args: [{ selector: 'wr-donut-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-donut-chart' }, template: "<div class=\"wr-donut-chart__surface\" [style.width.px]=\"size()\">\n  <!-- The name sits on the DRAWING, not on this wrapper. `img` is a\n       children-presentational role, so with it out here WebKit dropped the whole\n       subtree \u2014 including the centre value and label, which are real text and are\n       the headline datum the legend does not carry. -->\n  <svg viewBox=\"0 0 100 100\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\">\n    @for (slice of slices(); track $index) {\n      <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" />\n    }\n  </svg>\n  @if (centerValue() || centerLabel()) {\n    <div class=\"wr-donut-chart__center\">\n      @if (centerValue()) {\n        <div class=\"wr-donut-chart__center-value\">{{ centerValue() }}</div>\n      }\n      @if (centerLabel()) {\n        <div class=\"wr-donut-chart__center-label\">{{ centerLabel() }}</div>\n      }\n    </div>\n  }\n</div>\n\n@if (showLegend() && slices().length > 0) {\n  <ul class=\"wr-donut-chart__legend\">\n    @for (slice of slices(); track $index) {\n      <li class=\"wr-donut-chart__legend-item\">\n        <span class=\"wr-donut-chart__swatch\" [style.background]=\"slice.color\"></span>\n        <span class=\"wr-donut-chart__legend-label\">{{ slice.label }}</span>\n        <span class=\"wr-donut-chart__legend-value\">{{ slice.value }}</span>\n      </li>\n    }\n  </ul>\n}\n" }]
         }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }] } });

package/fesm2022/ngwr-drag-drop.mjs

@@ -253,12 +253,12 @@ class WrSortableList {
     position(index) {
         return { index: index + 1, total: this.items().length };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrSortableList, isStandalone: true, selector: "wr-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", reorder: "reorder" }, host: { classAttribute: "wr-sortable-list" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rowEls", predicate: ["row"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only \u2014 a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\n", styles: [".wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list{display:block}.wr-sortable-list__list{display:flex;flex-direction:column;gap:var(--wr-sortable-list-gap, .5rem)}.wr-sortable-list__item{cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .18s ease}.wr-sortable-list__item.cdk-drag-disabled{cursor:default}.wr-sortable-list__item:active{cursor:grabbing}.wr-sortable-list__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list__item--grabbed{cursor:grabbing;box-shadow:0 6px 12px rgba(var(--wr-color-backdrop-rgb),.22)}.wr-sortable-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wr-sortable-list[orientation=horizontal] .wr-sortable-list__list,.wr-sortable-list[data-orientation=horizontal] .wr-sortable-list__list{flex-direction:row}.wr-drag-handle{cursor:grab;display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--wr-color-on-surface-rgb),.45);transition:color .15s ease}@media(pointer:coarse){.wr-drag-handle{position:relative}.wr-drag-handle:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-drag-handle:hover{color:var(--wr-color-on-surface)}.wr-drag-handle:active{cursor:grabbing}.cdk-drag-preview.wr-sortable-list__item{box-sizing:border-box;color:var(--wr-color-on-surface);font-family:var(--wr-font-family-base);transition:none;filter:drop-shadow(0 8px 12px rgba(var(--wr-color-backdrop-rgb),.24)) drop-shadow(0 2px 3px rgba(var(--wr-color-backdrop-rgb),.16))}.wr-sortable-list .cdk-drag-placeholder{opacity:.35;background:var(--wr-color-fill-strong);border-radius:var(--wr-border-radius-base);outline:1px dashed rgba(var(--wr-color-on-surface-rgb),.25);outline-offset:-1px}.cdk-drag-animating.wr-sortable-list__item{transition:transform .18s var(--wr-ease-spring)}.wr-sortable-list__list.cdk-drop-list-dragging .wr-sortable-list__item:not(.cdk-drag-placeholder){transition:transform .18s var(--wr-ease-spring)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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.5", ngImport: i0, type: WrSortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrSortableList, isStandalone: true, selector: "wr-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", reorder: "reorder" }, host: { classAttribute: "wr-sortable-list" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rowEls", predicate: ["row"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only \u2014 a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list{display:block}.wr-sortable-list__list{display:flex;flex-direction:column;gap:var(--wr-sortable-list-gap, .5rem)}.wr-sortable-list__item{cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .18s ease}.wr-sortable-list__item.cdk-drag-disabled{cursor:default}.wr-sortable-list__item:active{cursor:grabbing}.wr-sortable-list__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list__item--grabbed{cursor:grabbing;box-shadow:0 6px 12px rgba(var(--wr-color-backdrop-rgb),.22)}.wr-sortable-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wr-sortable-list[orientation=horizontal] .wr-sortable-list__list,.wr-sortable-list[data-orientation=horizontal] .wr-sortable-list__list{flex-direction:row}.wr-drag-handle{cursor:grab;display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--wr-color-on-surface-rgb),.45);transition:color .15s ease}@media(pointer:coarse){.wr-drag-handle{position:relative}.wr-drag-handle:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-drag-handle:hover{color:var(--wr-color-on-surface)}.wr-drag-handle:active{cursor:grabbing}.cdk-drag-preview.wr-sortable-list__item{box-sizing:border-box;color:var(--wr-color-on-surface);font-family:var(--wr-font-family-base);transition:none;filter:drop-shadow(0 8px 12px rgba(var(--wr-color-backdrop-rgb),.24)) drop-shadow(0 2px 3px rgba(var(--wr-color-backdrop-rgb),.16))}.wr-sortable-list .cdk-drag-placeholder{opacity:.35;background:var(--wr-color-fill-strong);border-radius:var(--wr-border-radius-base);outline:1px dashed rgba(var(--wr-color-on-surface-rgb),.25);outline-offset:-1px}.cdk-drag-animating.wr-sortable-list__item{transition:transform .18s var(--wr-ease-spring)}.wr-sortable-list__list.cdk-drop-list-dragging .wr-sortable-list__item:not(.cdk-drag-placeholder){transition:transform .18s var(--wr-ease-spring)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSortableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrSortableList, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-sortable-list', encapsulation: ViewEncapsulation.None, imports: [CdkDropList, CdkDrag, NgTemplateOutlet], host: { class: 'wr-sortable-list' }, template: "<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only \u2014 a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\n", styles: [".wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list{display:block}.wr-sortable-list__list{display:flex;flex-direction:column;gap:var(--wr-sortable-list-gap, .5rem)}.wr-sortable-list__item{cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .18s ease}.wr-sortable-list__item.cdk-drag-disabled{cursor:default}.wr-sortable-list__item:active{cursor:grabbing}.wr-sortable-list__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list__item--grabbed{cursor:grabbing;box-shadow:0 6px 12px rgba(var(--wr-color-backdrop-rgb),.22)}.wr-sortable-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wr-sortable-list[orientation=horizontal] .wr-sortable-list__list,.wr-sortable-list[data-orientation=horizontal] .wr-sortable-list__list{flex-direction:row}.wr-drag-handle{cursor:grab;display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--wr-color-on-surface-rgb),.45);transition:color .15s ease}@media(pointer:coarse){.wr-drag-handle{position:relative}.wr-drag-handle:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-drag-handle:hover{color:var(--wr-color-on-surface)}.wr-drag-handle:active{cursor:grabbing}.cdk-drag-preview.wr-sortable-list__item{box-sizing:border-box;color:var(--wr-color-on-surface);font-family:var(--wr-font-family-base);transition:none;filter:drop-shadow(0 8px 12px rgba(var(--wr-color-backdrop-rgb),.24)) drop-shadow(0 2px 3px rgba(var(--wr-color-backdrop-rgb),.16))}.wr-sortable-list .cdk-drag-placeholder{opacity:.35;background:var(--wr-color-fill-strong);border-radius:var(--wr-border-radius-base);outline:1px dashed rgba(var(--wr-color-on-surface-rgb),.25);outline-offset:-1px}.cdk-drag-animating.wr-sortable-list__item{transition:transform .18s var(--wr-ease-spring)}.wr-sortable-list__list.cdk-drop-list-dragging .wr-sortable-list__item:not(.cdk-drag-placeholder){transition:transform .18s var(--wr-ease-spring)}\n"] }]
+            args: [{ selector: 'wr-sortable-list', encapsulation: ViewEncapsulation.None, imports: [CdkDropList, CdkDrag, NgTemplateOutlet], host: { class: 'wr-sortable-list' }, template: "<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only \u2014 a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list{display:block}.wr-sortable-list__list{display:flex;flex-direction:column;gap:var(--wr-sortable-list-gap, .5rem)}.wr-sortable-list__item{cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .18s ease}.wr-sortable-list__item.cdk-drag-disabled{cursor:default}.wr-sortable-list__item:active{cursor:grabbing}.wr-sortable-list__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sortable-list__item--grabbed{cursor:grabbing;box-shadow:0 6px 12px rgba(var(--wr-color-backdrop-rgb),.22)}.wr-sortable-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wr-sortable-list[orientation=horizontal] .wr-sortable-list__list,.wr-sortable-list[data-orientation=horizontal] .wr-sortable-list__list{flex-direction:row}.wr-drag-handle{cursor:grab;display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--wr-color-on-surface-rgb),.45);transition:color .15s ease}@media(pointer:coarse){.wr-drag-handle{position:relative}.wr-drag-handle:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-drag-handle:hover{color:var(--wr-color-on-surface)}.wr-drag-handle:active{cursor:grabbing}.cdk-drag-preview.wr-sortable-list__item{box-sizing:border-box;color:var(--wr-color-on-surface);font-family:var(--wr-font-family-base);transition:none;filter:drop-shadow(0 8px 12px rgba(var(--wr-color-backdrop-rgb),.24)) drop-shadow(0 2px 3px rgba(var(--wr-color-backdrop-rgb),.16))}.wr-sortable-list .cdk-drag-placeholder{opacity:.35;background:var(--wr-color-fill-strong);border-radius:var(--wr-border-radius-base);outline:1px dashed rgba(var(--wr-color-on-surface-rgb),.25);outline-offset:-1px}.cdk-drag-animating.wr-sortable-list__item{transition:transform .18s var(--wr-ease-spring)}.wr-sortable-list__list.cdk-drop-list-dragging .wr-sortable-list__item:not(.cdk-drag-placeholder){transition:transform .18s var(--wr-ease-spring)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], rowEls: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }] } });
 
 /**
@@ -285,10 +285,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * ```
  */
 class WrDragHandle {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrDragHandle, isStandalone: true, selector: "[wrDragHandle]", host: { classAttribute: "wr-drag-handle" }, hostDirectives: [{ directive: i1.CdkDragHandle }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrDragHandle, isStandalone: true, selector: "[wrDragHandle]", host: { classAttribute: "wr-drag-handle" }, hostDirectives: [{ directive: i1.CdkDragHandle }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDragHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDragHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDragHandle]',

package/fesm2022/ngwr-drag-drop.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-drag-drop.mjs","sources":["../../../projects/lib/drag-drop/sortable-list.ts","../../../projects/lib/drag-drop/sortable-list.html","../../../projects/lib/drag-drop/drag-handle.ts","../../../projects/lib/drag-drop/ngwr-drag-drop.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 { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CdkDrag, type CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  Injector,\n  TemplateRef,\n  ViewEncapsulation,\n  afterNextRender,\n  contentChild,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChildren,\n} from '@angular/core';\n\nimport { readI18nText, useI18nFormatter } from 'ngwr/i18n';\n\nimport type { WrSortableReorderEvent } from './interfaces';\n\n/** Counted, not random: the list prerenders, so the id has to match on rehydration. */\nlet sortableListUid = 0;\n\n/**\n * Drag-to-reorder list. Wraps CDK's `cdkDropList` + `cdkDrag` with a\n * signal-based items binding — the source array is updated in place and\n * emitted via 2-way `[(items)]`.\n *\n * Drop a single template — it's rendered per item with `let-item\n * let-index=\"index\"`. Put `wrDragHandle` on an element inside that\n * template to restrict drag start to a handle; there is no input for\n * it, the directive's presence is the switch.\n *\n * Every row is a tab stop: Space or Enter picks it up, the arrow keys move it,\n * Space or Enter drops it and Escape puts it back. CDK's `cdkDrag` ships no key\n * handling of its own, so without this the component's only function was\n * unreachable from a keyboard.\n *\n * Reading direction: a `horizontal` list follows the VISUAL order, so under\n * `dir=\"rtl\"` ArrowLeft moves the held row toward the higher index — the same\n * rule `wr-slider` applies to its track. A vertical list never mirrors.\n *\n * What that does NOT answer is WCAG 2.5.7, which asks for a POINTER alternative\n * to the drag. Click-to-pick-up is the obvious candidate and is not safe here:\n * the CDK's drag-drop bundle installs no click suppressor of any kind, so the\n * mouseup ending a drag still produces a click, and a row that grabbed itself on\n * click would be picking itself straight back up. A visible move-up /\n * move-down affordance is the remaining answer, and that is a design change.\n *\n * @example\n * ```html\n * <wr-sortable-list [(items)]=\"rows\" (reorder)=\"onReorder($event)\">\n *   <ng-template let-row let-i=\"index\">\n *     <div class=\"row\">\n *       <span wrDragHandle>≡</span>\n *       {{ i + 1 }}. {{ row.label }}\n *     </div>\n *   </ng-template>\n * </wr-sortable-list>\n * ```\n *\n * @see https://ngwr.dev/reference/components/drag-drop\n */\n@Component({\n  selector: 'wr-sortable-list',\n  templateUrl: './sortable-list.html',\n  styleUrl: './sortable-list.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [CdkDropList, CdkDrag, NgTemplateOutlet],\n  host: { class: 'wr-sortable-list' },\n})\nexport class WrSortableList<T = unknown> {\n  /** Items to render. Two-way — emits the reordered array on drop. */\n  readonly items = model.required<T[]>();\n\n  /** Layout direction. Drives CDK's `cdkDropListOrientation`. @default 'vertical' */\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\n\n  /** Disable all dragging. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Locked axis — restrict drag movement to one axis even diagonally. */\n  readonly lockAxis = input<'x' | 'y' | undefined>(undefined);\n\n  /**\n   * Delay (ms) before a drag begins after the pointer goes down. The touch\n   * delay is the fix for the classic CDK touch snag: without it, the\n   * `touch-action: none` CDK puts on each item blocks scrolling the list on a\n   * phone. With a small touch delay, a quick swipe scrolls and a brief hold\n   * starts the drag; mouse stays instant. Pass a single number to apply one\n   * delay to both pointers. @default { touch: 150, mouse: 0 }\n   */\n  readonly dragStartDelay = input<number | { touch: number; mouse: number }>({ touch: 150, mouse: 0 });\n\n  /** `trackBy` for the inner `@for`. Defaults to identity. */\n  readonly trackBy = input<(index: number, item: T) => unknown>((_, item) => item);\n\n  /** Fired after a successful reorder with the new array + indices. */\n  readonly reorder = output<WrSortableReorderEvent<T>>();\n\n  protected readonly rowTemplate = contentChild.required(TemplateRef<{ $implicit: T; index: number }>);\n\n  private readonly injector = inject(Injector);\n\n  /**\n   * Ambient reading direction, for the horizontal keyboard path only.\n   *\n   * Optional so a bare `TestBed` — or any consumer that never set a direction —\n   * needs no provider; `Directionality` is root-provided, so `null` only ever\n   * means \"nobody asked\", which is LTR. Nothing caches a direction-derived\n   * value: `isRtl()` is read inside the key handler, so a runtime flip needs no\n   * subscription to `Directionality.change`.\n   *\n   * The POINTER path already mirrors without this — `cdkDropList` injects\n   * `Directionality` itself and feeds it to `DropListRef.withDirection`, so a\n   * horizontal drag has always followed the visual order. The keyboard path was\n   * the half that did not, which is why the two disagreed.\n   */\n  private readonly dir = inject(Directionality, { optional: true });\n\n  private readonly rowEls = viewChildren<ElementRef<HTMLElement>>('row');\n\n  /** Index of the row the keyboard is holding, or `null` when nothing is held. */\n  protected readonly grabbedIndex = signal<number | null>(null);\n\n  /** Live-region text. Written by the keyboard path only. */\n  protected readonly announcement = signal('');\n\n  /** Links every row to the key model via `aria-describedby`. */\n  protected readonly keyHelpId = `wr-sortable-list-help-${++sortableListUid}`;\n\n  protected readonly resolvedKeyHelp = readI18nText(\n    'sortableList.keyHelp',\n    'Press Space to pick this item up, then use the arrow keys to move it. ' +\n      'Press Space again to drop it, or Escape to put it back.'\n  );\n\n  private readonly grabbedText = useI18nFormatter('sortableList.grabbed', 'Grabbed. {{index}} of {{total}}.');\n  private readonly movedText = useI18nFormatter('sortableList.moved', '{{index}} of {{total}}.');\n  private readonly droppedText = useI18nFormatter('sortableList.dropped', 'Dropped. {{index}} of {{total}}.');\n  private readonly cancelledText = readI18nText('sortableList.cancelled', 'Move cancelled.');\n\n  /** Where the held row started. Escape puts it back there. */\n  private grabOrigin = -1;\n\n  /** True while a keyboard move is handing focus back — see `onRowFocusout`. */\n  private restoringFocus = false;\n\n  protected onDrop(event: CdkDragDrop<T[]>): void {\n    if (event.previousIndex === event.currentIndex) return;\n    const next = this.items().slice();\n    moveItemInArray(next, event.previousIndex, event.currentIndex);\n    this.items.set(next);\n    this.reorder.emit({\n      items: next,\n      previousIndex: event.previousIndex,\n      currentIndex: event.currentIndex,\n      item: next[event.currentIndex],\n    });\n  }\n\n  /**\n   * The keyboard reorder path: pick up, move, drop — deliberately a two-step\n   * grab rather than \"an arrow moves the focused row\", so that arrowing through\n   * a list a user is only reading can never rearrange it.\n   *\n   * Keys are handled only when the ROW itself is the event target; a button or\n   * an input projected into the row template keeps every key it would normally\n   * get.\n   */\n  protected onRowKeydown(event: KeyboardEvent, index: number): void {\n    if (this.disabled() || event.target !== event.currentTarget) return;\n\n    const grabbed = this.grabbedIndex();\n    const horizontal = this.orientation() === 'horizontal';\n    // The horizontal arrows name a SIDE of the row, so they follow the reading\n    // direction: a horizontal list under `dir=\"rtl\"` paints index 0 at the right,\n    // so the key that raises the index is ArrowLeft. Raising it on ArrowRight\n    // regardless moved the held item away from the arrow the user pressed — the\n    // one failure in this set a user cannot rationalise, because it inverts their\n    // model of the list silently. The block arrows name a value's direction in a\n    // column and never mirror, which is why only the horizontal pair is swapped.\n    const rtl = horizontal && this.dir?.value === 'rtl';\n    const forward = horizontal ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';\n    const back = horizontal ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';\n\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      if (grabbed === null) this.grab(index);\n      else this.drop();\n      return;\n    }\n\n    if (grabbed === null) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      // Held only while a row is grabbed — an Escape typed anywhere else has to\n      // keep reaching whatever dialog or overlay the list is sitting in.\n      event.stopPropagation();\n      this.cancelGrab();\n      return;\n    }\n\n    if (event.key === forward || event.key === back) {\n      event.preventDefault();\n      this.moveGrabbed(event.key === forward ? 1 : -1);\n    }\n  }\n\n  /**\n   * Focus leaving a held row ends the gesture as a drop rather than dropping the\n   * change on the floor — `[(items)]` has already been written by then, so a\n   * silent release would leave `reorder` never reporting a move that happened.\n   * The guard is what makes it safe: moving a focused node in the DOM blurs it,\n   * so every keyboard move fires this too.\n   */\n  protected onRowFocusout(): void {\n    if (this.restoringFocus || this.grabbedIndex() === null) return;\n    this.drop();\n  }\n\n  private grab(index: number): void {\n    this.grabOrigin = index;\n    this.grabbedIndex.set(index);\n    this.announcement.set(this.grabbedText(this.position(index)));\n  }\n\n  private moveGrabbed(delta: number): void {\n    const from = this.grabbedIndex();\n    if (from === null) return;\n    const to = from + delta;\n    if (to < 0 || to >= this.items().length) return;\n\n    this.relocate(from, to);\n    this.grabbedIndex.set(to);\n    this.announcement.set(this.movedText(this.position(to)));\n  }\n\n  private drop(): void {\n    const to = this.grabbedIndex();\n    const from = this.grabOrigin;\n    this.grabbedIndex.set(null);\n    this.grabOrigin = -1;\n    if (to === null) return;\n\n    this.announcement.set(this.droppedText(this.position(to)));\n    if (from === to) return;\n    // One event per gesture, the way a drag emits one on drop — not one per\n    // arrow press, which would put a host that persists on `reorder` through a\n    // write per keystroke. `[(items)]` still updates on every press, because\n    // the rendered order has to follow the row the user is moving.\n    this.reorder.emit({ items: this.items(), previousIndex: from, currentIndex: to, item: this.items()[to] });\n  }\n\n  private cancelGrab(): void {\n    const from = this.grabbedIndex();\n    if (from === null) return;\n    if (from !== this.grabOrigin) this.relocate(from, this.grabOrigin);\n    this.grabbedIndex.set(null);\n    this.grabOrigin = -1;\n    this.announcement.set(this.cancelledText());\n  }\n\n  private relocate(from: number, to: number): void {\n    const next = this.items().slice();\n    moveItemInArray(next, from, to);\n    this.items.set(next);\n\n    // The row is the same DOM node moved to another slot, and moving a focused\n    // node hands focus back to `<body>` — so it has to be taken again once the\n    // move has rendered. `afterNextRender`, never a microtask: zoneless change\n    // detection runs in a macrotask, so a microtask would fire while the row is\n    // still at its old index and focus the wrong one. (jsdom keeps focus across\n    // a node move, so no spec here can express that half.)\n    this.restoringFocus = true;\n    afterNextRender(\n      () => {\n        this.rowEls()[to]?.nativeElement.focus();\n        this.restoringFocus = false;\n      },\n      { injector: this.injector }\n    );\n  }\n\n  private position(index: number): { index: number; total: number } {\n    return { index: index + 1, total: this.items().length };\n  }\n}\n\nexport type { WrSortableReorderEvent } from './interfaces';\n","<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only — a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\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 { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { Directive } from '@angular/core';\n\n/**\n * Drag handle for {@link WrSortableList} (and any nested `cdkDrag`).\n * Composes CDK's `cdkDragHandle` via `hostDirectives` so consumers don't\n * need to import the CDK selector directly.\n *\n * @example\n * ```html\n * <wr-sortable-list [(items)]=\"rows\">\n *   <ng-template let-row>\n *     <div class=\"row\">\n *       <span wrDragHandle class=\"grip\">≡</span>\n *       <span>{{ row.label }}</span>\n *     </div>\n *   </ng-template>\n * </wr-sortable-list>\n * ```\n */\n@Directive({\n  selector: '[wrDragHandle]',\n  hostDirectives: [CdkDragHandle],\n  host: { class: 'wr-drag-handle' },\n})\nexport class WrDragHandle {}\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-drag-drop.mjs","sources":["../../../projects/lib/drag-drop/sortable-list.ts","../../../projects/lib/drag-drop/sortable-list.html","../../../projects/lib/drag-drop/drag-handle.ts","../../../projects/lib/drag-drop/ngwr-drag-drop.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 { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CdkDrag, type CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  Injector,\n  TemplateRef,\n  ViewEncapsulation,\n  afterNextRender,\n  contentChild,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChildren,\n} from '@angular/core';\n\nimport { readI18nText, useI18nFormatter } from 'ngwr/i18n';\n\nimport type { WrSortableReorderEvent } from './interfaces';\n\n/** Counted, not random: the list prerenders, so the id has to match on rehydration. */\nlet sortableListUid = 0;\n\n/**\n * Drag-to-reorder list. Wraps CDK's `cdkDropList` + `cdkDrag` with a\n * signal-based items binding — the source array is updated in place and\n * emitted via 2-way `[(items)]`.\n *\n * Drop a single template — it's rendered per item with `let-item\n * let-index=\"index\"`. Put `wrDragHandle` on an element inside that\n * template to restrict drag start to a handle; there is no input for\n * it, the directive's presence is the switch.\n *\n * Every row is a tab stop: Space or Enter picks it up, the arrow keys move it,\n * Space or Enter drops it and Escape puts it back. CDK's `cdkDrag` ships no key\n * handling of its own, so without this the component's only function was\n * unreachable from a keyboard.\n *\n * Reading direction: a `horizontal` list follows the VISUAL order, so under\n * `dir=\"rtl\"` ArrowLeft moves the held row toward the higher index — the same\n * rule `wr-slider` applies to its track. A vertical list never mirrors.\n *\n * What that does NOT answer is WCAG 2.5.7, which asks for a POINTER alternative\n * to the drag. Click-to-pick-up is the obvious candidate and is not safe here:\n * the CDK's drag-drop bundle installs no click suppressor of any kind, so the\n * mouseup ending a drag still produces a click, and a row that grabbed itself on\n * click would be picking itself straight back up. A visible move-up /\n * move-down affordance is the remaining answer, and that is a design change.\n *\n * @example\n * ```html\n * <wr-sortable-list [(items)]=\"rows\" (reorder)=\"onReorder($event)\">\n *   <ng-template let-row let-i=\"index\">\n *     <div class=\"row\">\n *       <span wrDragHandle>≡</span>\n *       {{ i + 1 }}. {{ row.label }}\n *     </div>\n *   </ng-template>\n * </wr-sortable-list>\n * ```\n *\n * @see https://ngwr.dev/reference/components/drag-drop\n */\n@Component({\n  selector: 'wr-sortable-list',\n  templateUrl: './sortable-list.html',\n  styleUrl: './sortable-list.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [CdkDropList, CdkDrag, NgTemplateOutlet],\n  host: { class: 'wr-sortable-list' },\n})\nexport class WrSortableList<T = unknown> {\n  /** Items to render. Two-way — emits the reordered array on drop. */\n  readonly items = model.required<T[]>();\n\n  /** Layout direction. Drives CDK's `cdkDropListOrientation`. @default 'vertical' */\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\n\n  /** Disable all dragging. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Locked axis — restrict drag movement to one axis even diagonally. */\n  readonly lockAxis = input<'x' | 'y' | undefined>(undefined);\n\n  /**\n   * Delay (ms) before a drag begins after the pointer goes down. The touch\n   * delay is the fix for the classic CDK touch snag: without it, the\n   * `touch-action: none` CDK puts on each item blocks scrolling the list on a\n   * phone. With a small touch delay, a quick swipe scrolls and a brief hold\n   * starts the drag; mouse stays instant. Pass a single number to apply one\n   * delay to both pointers. @default { touch: 150, mouse: 0 }\n   */\n  readonly dragStartDelay = input<number | { touch: number; mouse: number }>({ touch: 150, mouse: 0 });\n\n  /** `trackBy` for the inner `@for`. Defaults to identity. */\n  readonly trackBy = input<(index: number, item: T) => unknown>((_, item) => item);\n\n  /** Fired after a successful reorder with the new array + indices. */\n  readonly reorder = output<WrSortableReorderEvent<T>>();\n\n  protected readonly rowTemplate = contentChild.required(TemplateRef<{ $implicit: T; index: number }>);\n\n  private readonly injector = inject(Injector);\n\n  /**\n   * Ambient reading direction, for the horizontal keyboard path only.\n   *\n   * Optional so a bare `TestBed` — or any consumer that never set a direction —\n   * needs no provider; `Directionality` is root-provided, so `null` only ever\n   * means \"nobody asked\", which is LTR. Nothing caches a direction-derived\n   * value: `isRtl()` is read inside the key handler, so a runtime flip needs no\n   * subscription to `Directionality.change`.\n   *\n   * The POINTER path already mirrors without this — `cdkDropList` injects\n   * `Directionality` itself and feeds it to `DropListRef.withDirection`, so a\n   * horizontal drag has always followed the visual order. The keyboard path was\n   * the half that did not, which is why the two disagreed.\n   */\n  private readonly dir = inject(Directionality, { optional: true });\n\n  private readonly rowEls = viewChildren<ElementRef<HTMLElement>>('row');\n\n  /** Index of the row the keyboard is holding, or `null` when nothing is held. */\n  protected readonly grabbedIndex = signal<number | null>(null);\n\n  /** Live-region text. Written by the keyboard path only. */\n  protected readonly announcement = signal('');\n\n  /** Links every row to the key model via `aria-describedby`. */\n  protected readonly keyHelpId = `wr-sortable-list-help-${++sortableListUid}`;\n\n  protected readonly resolvedKeyHelp = readI18nText(\n    'sortableList.keyHelp',\n    'Press Space to pick this item up, then use the arrow keys to move it. ' +\n      'Press Space again to drop it, or Escape to put it back.'\n  );\n\n  private readonly grabbedText = useI18nFormatter('sortableList.grabbed', 'Grabbed. {{index}} of {{total}}.');\n  private readonly movedText = useI18nFormatter('sortableList.moved', '{{index}} of {{total}}.');\n  private readonly droppedText = useI18nFormatter('sortableList.dropped', 'Dropped. {{index}} of {{total}}.');\n  private readonly cancelledText = readI18nText('sortableList.cancelled', 'Move cancelled.');\n\n  /** Where the held row started. Escape puts it back there. */\n  private grabOrigin = -1;\n\n  /** True while a keyboard move is handing focus back — see `onRowFocusout`. */\n  private restoringFocus = false;\n\n  protected onDrop(event: CdkDragDrop<T[]>): void {\n    if (event.previousIndex === event.currentIndex) return;\n    const next = this.items().slice();\n    moveItemInArray(next, event.previousIndex, event.currentIndex);\n    this.items.set(next);\n    this.reorder.emit({\n      items: next,\n      previousIndex: event.previousIndex,\n      currentIndex: event.currentIndex,\n      item: next[event.currentIndex],\n    });\n  }\n\n  /**\n   * The keyboard reorder path: pick up, move, drop — deliberately a two-step\n   * grab rather than \"an arrow moves the focused row\", so that arrowing through\n   * a list a user is only reading can never rearrange it.\n   *\n   * Keys are handled only when the ROW itself is the event target; a button or\n   * an input projected into the row template keeps every key it would normally\n   * get.\n   */\n  protected onRowKeydown(event: KeyboardEvent, index: number): void {\n    if (this.disabled() || event.target !== event.currentTarget) return;\n\n    const grabbed = this.grabbedIndex();\n    const horizontal = this.orientation() === 'horizontal';\n    // The horizontal arrows name a SIDE of the row, so they follow the reading\n    // direction: a horizontal list under `dir=\"rtl\"` paints index 0 at the right,\n    // so the key that raises the index is ArrowLeft. Raising it on ArrowRight\n    // regardless moved the held item away from the arrow the user pressed — the\n    // one failure in this set a user cannot rationalise, because it inverts their\n    // model of the list silently. The block arrows name a value's direction in a\n    // column and never mirror, which is why only the horizontal pair is swapped.\n    const rtl = horizontal && this.dir?.value === 'rtl';\n    const forward = horizontal ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';\n    const back = horizontal ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';\n\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      if (grabbed === null) this.grab(index);\n      else this.drop();\n      return;\n    }\n\n    if (grabbed === null) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      // Held only while a row is grabbed — an Escape typed anywhere else has to\n      // keep reaching whatever dialog or overlay the list is sitting in.\n      event.stopPropagation();\n      this.cancelGrab();\n      return;\n    }\n\n    if (event.key === forward || event.key === back) {\n      event.preventDefault();\n      this.moveGrabbed(event.key === forward ? 1 : -1);\n    }\n  }\n\n  /**\n   * Focus leaving a held row ends the gesture as a drop rather than dropping the\n   * change on the floor — `[(items)]` has already been written by then, so a\n   * silent release would leave `reorder` never reporting a move that happened.\n   * The guard is what makes it safe: moving a focused node in the DOM blurs it,\n   * so every keyboard move fires this too.\n   */\n  protected onRowFocusout(): void {\n    if (this.restoringFocus || this.grabbedIndex() === null) return;\n    this.drop();\n  }\n\n  private grab(index: number): void {\n    this.grabOrigin = index;\n    this.grabbedIndex.set(index);\n    this.announcement.set(this.grabbedText(this.position(index)));\n  }\n\n  private moveGrabbed(delta: number): void {\n    const from = this.grabbedIndex();\n    if (from === null) return;\n    const to = from + delta;\n    if (to < 0 || to >= this.items().length) return;\n\n    this.relocate(from, to);\n    this.grabbedIndex.set(to);\n    this.announcement.set(this.movedText(this.position(to)));\n  }\n\n  private drop(): void {\n    const to = this.grabbedIndex();\n    const from = this.grabOrigin;\n    this.grabbedIndex.set(null);\n    this.grabOrigin = -1;\n    if (to === null) return;\n\n    this.announcement.set(this.droppedText(this.position(to)));\n    if (from === to) return;\n    // One event per gesture, the way a drag emits one on drop — not one per\n    // arrow press, which would put a host that persists on `reorder` through a\n    // write per keystroke. `[(items)]` still updates on every press, because\n    // the rendered order has to follow the row the user is moving.\n    this.reorder.emit({ items: this.items(), previousIndex: from, currentIndex: to, item: this.items()[to] });\n  }\n\n  private cancelGrab(): void {\n    const from = this.grabbedIndex();\n    if (from === null) return;\n    if (from !== this.grabOrigin) this.relocate(from, this.grabOrigin);\n    this.grabbedIndex.set(null);\n    this.grabOrigin = -1;\n    this.announcement.set(this.cancelledText());\n  }\n\n  private relocate(from: number, to: number): void {\n    const next = this.items().slice();\n    moveItemInArray(next, from, to);\n    this.items.set(next);\n\n    // The row is the same DOM node moved to another slot, and moving a focused\n    // node hands focus back to `<body>` — so it has to be taken again once the\n    // move has rendered. `afterNextRender`, never a microtask: zoneless change\n    // detection runs in a macrotask, so a microtask would fire while the row is\n    // still at its old index and focus the wrong one. (jsdom keeps focus across\n    // a node move, so no spec here can express that half.)\n    this.restoringFocus = true;\n    afterNextRender(\n      () => {\n        this.rowEls()[to]?.nativeElement.focus();\n        this.restoringFocus = false;\n      },\n      { injector: this.injector }\n    );\n  }\n\n  private position(index: number): { index: number; total: number } {\n    return { index: index + 1, total: this.items().length };\n  }\n}\n\nexport type { WrSortableReorderEvent } from './interfaces';\n","<!--\n  `role=\"list\"` / `role=\"listitem\"` rather than the bare divs this used to be:\n  every row is a tab stop now, and a focusable element with no role at all is\n  announced as loose text. The list role is also what gives the reader the\n  position of the row focus lands on.\n-->\n<div\n  cdkDropList\n  role=\"list\"\n  class=\"wr-sortable-list__list\"\n  [cdkDropListOrientation]=\"orientation()\"\n  [cdkDropListDisabled]=\"disabled()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div\n      #row\n      cdkDrag\n      role=\"listitem\"\n      class=\"wr-sortable-list__item\"\n      [class.wr-sortable-list__item--grabbed]=\"grabbedIndex() === $index\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-describedby]=\"disabled() ? null : keyHelpId\"\n      [cdkDragDisabled]=\"disabled()\"\n      [cdkDragLockAxis]=\"lockAxis() ?? null\"\n      [cdkDragStartDelay]=\"dragStartDelay()\"\n      (keydown)=\"onRowKeydown($event, $index)\"\n      (focusout)=\"onRowFocusout()\"\n    >\n      <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: item, index: $index }\" />\n    </div>\n  }\n</div>\n\n<!--\n  The key model, on every row rather than once on the container: focus lands on\n  a row and never on the list itself, so a description hung on the list would\n  never be read out.\n-->\n<p class=\"wr-sortable-list__sr-only\" [id]=\"keyHelpId\">{{ resolvedKeyHelp() }}</p>\n\n<!--\n  Position announcements, written by the keyboard path only — a drag already\n  gives sighted feedback, and announcing every pointer move would flood the\n  region.\n-->\n<p class=\"wr-sortable-list__sr-only\" role=\"status\">{{ announcement() }}</p>\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 { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { Directive } from '@angular/core';\n\n/**\n * Drag handle for {@link WrSortableList} (and any nested `cdkDrag`).\n * Composes CDK's `cdkDragHandle` via `hostDirectives` so consumers don't\n * need to import the CDK selector directly.\n *\n * @example\n * ```html\n * <wr-sortable-list [(items)]=\"rows\">\n *   <ng-template let-row>\n *     <div class=\"row\">\n *       <span wrDragHandle class=\"grip\">≡</span>\n *       <span>{{ row.label }}</span>\n *     </div>\n *   </ng-template>\n * </wr-sortable-list>\n * ```\n */\n@Directive({\n  selector: '[wrDragHandle]',\n  hostDirectives: [CdkDragHandle],\n  host: { class: 'wr-drag-handle' },\n})\nexport class WrDragHandle {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-drawer.mjs

@@ -34,10 +34,10 @@ let uid = 0;
 class WrDrawerTitle {
     /** Generated id used by the drawer panel for `aria-labelledby`. */
     id = `wr-drawer-title-${++uid}`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrDrawerTitle, isStandalone: true, selector: "[wrDrawerTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "wr-drawer__title" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrDrawerTitle, isStandalone: true, selector: "[wrDrawerTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "wr-drawer__title" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerTitle]',
@@ -343,10 +343,10 @@ class WrDrawer {
             restore.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "style.display": "'none'" } }, queries: [{ propertyName: "projectedTitle", first: true, predicate: WrDrawerTitle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeCancel(panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\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    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "style.display": "'none'" } }, queries: [{ propertyName: "projectedTitle", first: true, predicate: WrDrawerTitle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeCancel(panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\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    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawer, decorators: [{
             type: Component,
             args: [{ selector: 'wr-drawer', encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'none'" }, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeCancel(panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\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    <ng-content />\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], projectedTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrDrawerTitle), { isSignal: true }] }] } });
@@ -728,10 +728,10 @@ class WrDrawerManager {
         const resolved = this.i18n.t('drawer.close');
         return resolved === 'drawer.close' ? 'Close drawer' : resolved;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerManager, decorators: [{
             type: Service
         }] });
 
@@ -747,10 +747,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * footer.
  */
 class WrDrawerContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrDrawerContent, isStandalone: true, selector: "[wrDrawerContent]", host: { classAttribute: "wr-drawer__content" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrDrawerContent, isStandalone: true, selector: "[wrDrawerContent]", host: { classAttribute: "wr-drawer__content" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerContent]',
@@ -783,10 +783,10 @@ class WrDrawerFooter {
     ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     classes = computed(() => `wr-drawer__footer wr-drawer__footer--${this.align()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrDrawerFooter, isStandalone: true, selector: "[wrDrawerFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrDrawerFooter, isStandalone: true, selector: "[wrDrawerFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerFooter]',
@@ -835,10 +835,10 @@ class WrDrawerClose {
         }
         this.ref?.close(this.result());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDrawerClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDrawerClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDrawerClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDrawerClose, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerClose]',

package/fesm2022/ngwr-dropdown.mjs

@@ -83,16 +83,32 @@ class WrDropdown {
     /** @internal Public so host bindings can read it. */
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** The id used only when the consumer's element carries none of its own. */
+    fallbackId = `wr-dropdown-trigger-${++triggerUid}`;
     /**
      * Id the menu names itself after. The trigger is the CONSUMER's own element, so
      * an `id` they already put there wins: overwriting it broke `<label for>`,
      * `document.getElementById` and any `aria-labelledby` aimed at that button from
      * elsewhere in their app. The generated one is only a fallback so the menu has
      * something to reference.
+     *
+     * A GETTER, read fresh by the host binding on every pass, rather than a field
+     * resolved in the constructor. A static `id="…"` is on the element before a
+     * directive is instantiated and so was already honoured; a BOUND `[id]` is
+     * not — it lands with the rest of the template's bindings, which run before
+     * host bindings but after construction, so the constructor read an empty
+     * string, fell through to the fallback, and the host binding then wrote that
+     * fallback over the value the template had just set. Everything bound was
+     * lost — `[id]`, `[attr.id]` and an interpolated `id="dd-{{ n }}"` alike —
+     * while the static form survived, which is the shape that makes it look like
+     * a naming convention rather than a defect.
+     *
+     * `.id` rather than `getAttribute`: it is always a string, and an empty one is
+     * no id at all, so it falls through to the fallback.
      */
-    // `.id` rather than `getAttribute`: it is always a string, and an empty one is no
-    // id at all, so it falls through to the generated fallback.
-    triggerId = this.host.nativeElement.id || `wr-dropdown-trigger-${++triggerUid}`;
+    get triggerId() {
+        return this.host.nativeElement.id || this.fallbackId;
+    }
     overlayRef = null;
     constructor() {
         // The host view carrying `[wrDropdown]` can be destroyed while the menu is
@@ -318,10 +334,10 @@ class WrDropdown {
             return;
         this.isOpen.set(false);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrDropdown, isStandalone: true, selector: "[wrDropdown]", inputs: { menu: { classPropertyName: "menu", publicName: "wrDropdown", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)" }, properties: { "attr.id": "triggerId", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? menu().menuId() : null" }, classAttribute: "wr-dropdown-trigger" }, exportAs: ["wrDropdown"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrDropdown, isStandalone: true, selector: "[wrDropdown]", inputs: { menu: { classPropertyName: "menu", publicName: "wrDropdown", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)" }, properties: { "attr.id": "triggerId", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? menu().menuId() : null" }, classAttribute: "wr-dropdown-trigger" }, exportAs: ["wrDropdown"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDropdown]',
@@ -374,10 +390,10 @@ class WrDropdownMenu {
     /** Trigger element id, set by the directive for `aria-labelledby` wiring. */
     triggerId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: WrDropdownMenu, isStandalone: true, selector: "wr-dropdown-menu", host: { properties: { "style.display": "'none'" } }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrDropdownMenu"], ngImport: i0, template: '<ng-template><div class="wr-dropdown-menu" role="menu" [attr.id]="menuId()" [attr.aria-labelledby]="triggerId() || null"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: WrDropdownMenu, isStandalone: true, selector: "wr-dropdown-menu", host: { properties: { "style.display": "'none'" } }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrDropdownMenu"], ngImport: i0, template: '<ng-template><div class="wr-dropdown-menu" role="menu" [attr.id]="menuId()" [attr.aria-labelledby]="triggerId() || null"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdownMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdownMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-dropdown-menu',
@@ -428,10 +444,10 @@ class WrDropdownItem {
         event.preventDefault();
         this.host.nativeElement.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrDropdownItem, isStandalone: true, selector: "wr-dropdown-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "keydown.enter": "activate($event)", "keydown.space": "activate($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"name\" />\n}\n<span class=\"wr-dropdown-item__label\">\n  <ng-content />\n</span>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrDropdownItem, isStandalone: true, selector: "wr-dropdown-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "keydown.enter": "activate($event)", "keydown.space": "activate($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"name\" />\n}\n<span class=\"wr-dropdown-item__label\">\n  <ng-content />\n</span>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrDropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'wr-dropdown-item', encapsulation: ViewEncapsulation.None, host: {
                         role: 'menuitem',