ngwr 7.1.0 → 7.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022-2025 Roman Khegay
+Copyright (c) 2022-2026 Roman Khegay
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -7,8 +7,8 @@
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
 
 **NGWR** is a modern Angular UI library — standalone components, signals-first,
-zoneless-ready, modular SCSS, fully tree-shakable. Built on top of `@angular/cdk`
-for overlay, portal, and a11y primitives.
+zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
+`@angular/cdk` for overlay, portal, and a11y primitives.
 
 > **Status:** active development. Public API is stable across patch releases but
 > the v7 line is still maturing. [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
@@ -168,6 +168,7 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - [Color](https://ngwr.dev/getting-started/color) — design tokens and palette.
 - [Grid](https://ngwr.dev/getting-started/grid) — opt-in 12-column layout.
 - [Overlay](https://ngwr.dev/getting-started/overlay) — isolated CDK overlay container, `provideWrOverlay()`.
+- [Mobile & responsive](https://ngwr.dev/getting-started/mobile) — responsive overlays, touch targets, safe-area insets, container-query layouts.
 - [Typography](https://ngwr.dev/typography) — `wrTypography` directive: headings, paragraphs, lists, links, code.
 - [Icons](https://ngwr.dev/icons) — `ngwr/icon` registry + thin adapters for Lucide, Feather, Tabler, Phosphor, Heroicons, Iconoir, Radix, Bootstrap.
 - **Date adapters** — `ngwr/date-adapter-fns`, `ngwr/date-adapter-luxon`. Wire one with `provideWrDateAdapter(...)` to power calendar + every mode of date-picker.
@@ -176,6 +177,7 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 
 - **Standalone & signals-first.** Every component is standalone and uses `input()` / `model()` / `output()` / `signal()` / `computed()`. Zoneless-ready.
 - **CDK-powered.** Overlays, portals, and a11y come from `@angular/cdk`. We add `provideWrOverlay()` so NGWR overlays never collide with other CDK consumers (Material, NG-ZORRO, etc.).
+- **Mobile & responsive.** Overlays collapse to bottom-sheets on small screens (`provideWrResponsiveOverlays()`), touch targets grow to ≥44px on coarse pointers, fixed surfaces respect `env(safe-area-inset-*)`, and `descriptions` / `stepper` / `page-header` reflow to their container via container queries. [Guide](https://ngwr.dev/getting-started/mobile).
 - **Tree-shakable.** ~125 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are typically 5–25 KB; the largest entry (`ngwr/icon`) is ~98 KB before tree-shaking and ships only the icons you actually register.
 - **Modular SCSS.** Component styles are scoped through CSS custom properties. Theme tokens live in `ngwr/theme`; utilities (`grid`, `reset`) and the breakpoints SCSS API are opt-in.
 - **Tree-shaken icons.** `provideWrIcons([plus, trash])` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.

package/alert/styles/_index.scss

@@ -80,6 +80,8 @@ $alert-colors: (
 
     --wr-icon-size: 1rem;
 
+    @include theme.touch-target; // ~20px glyph -> 44px tap area on touch
+
     &:hover {
       color: var(--wr-alert-title);
       background: rgba(var(--wr-color-light-rgb), 0.4);

package/back-top/styles/_index.scss

@@ -2,8 +2,10 @@
 
 .wr-back-top {
   position: fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
+  // Safe-area: lift the floating button clear of the home indicator / rounded
+  // corner on mobile. env() is 0 without insets, so desktop stays 1.5rem.
+  bottom: calc(1.5rem + env(safe-area-inset-bottom));
+  right: calc(1.5rem + env(safe-area-inset-right));
   z-index: 50;
   opacity: 0;
   pointer-events: none;

package/cascader/styles/_index.scss

@@ -172,3 +172,19 @@
     color: var(--wr-color-medium);
   }
 }
+
+// Touch pointers: grow the clear button and make the column option rows ~44px
+// tall so each is a comfortable tap target. Fine pointers keep the compact
+// desktop sizing above.
+@media (pointer: coarse) {
+  .wr-cascader__clear {
+    --wr-icon-size: 1.125rem;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .wr-cascader-panel .wr-cascader__opt {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

package/command-palette/styles/_index.scss

@@ -167,6 +167,34 @@
   }
 }
 
+// Full-screen presentation on small viewports — opt in per-instance with
+// `responsive` or app-wide via `provideWrResponsiveOverlays()`. The palette
+// auto-focuses its input, so it fills the screen from the top edge rather than
+// docking to the bottom (a bottom-sheet would sit under the on-screen
+// keyboard). The list flexes to fill the remaining height.
+.wr-command-palette--sheet {
+  padding: 0;
+
+  .wr-command-palette__panel {
+    max-width: none;
+    height: 100%;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 0;
+    border-radius: 0;
+    // Top-docked full-screen: clear the notch at the top (search bar) and the
+    // home indicator at the bottom. The panel background still fills both edges.
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .wr-command-palette__body {
+    flex: 1 1 auto;
+    max-height: none;
+  }
+}
+
 @keyframes wr-cmd-fade {
   from {
     opacity: 0;

package/descriptions/styles/_index.scss

@@ -5,6 +5,16 @@
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-dark);
 
+  // Opt-in (`responsive`): query the box's own width so inline layouts reflow
+  // to stacked inside a narrow card / side panel, regardless of the viewport.
+  // `inline-size` containment drops content-based sizing, so the box fills its
+  // container's width; without this it would collapse to 0 inside a
+  // shrink-to-fit parent (flex / grid / inline-block).
+  &--responsive {
+    container: wr-descriptions / inline-size;
+    width: 100%;
+  }
+
   &__title {
     font-size: var(--wr-text-base);
     font-weight: var(--wr-font-weight-semibold);
@@ -102,3 +112,52 @@
     border-right: 1px solid var(--wr-color-light);
   }
 }
+
+// When the descriptions box itself is narrow (not the viewport), inline modes
+// reflow back to the stacked single-column layout so label/value pairs stay
+// readable in a narrow card or side panel. Override selectors match the base
+// inline rules' specificity (0-3-0 for bordered) so the cascade picks them up.
+@container wr-descriptions (max-width: 24rem) {
+  .wr-descriptions--inline .wr-descriptions__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .wr-descriptions--inline .wr-descriptions__row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  // Bordered + inline reverts to the plain bordered stacked rows: the card
+  // border stays on the list; rows regain their padding + dividers; the label
+  // cells drop their grid background / divider.
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.625rem 0.875rem;
+  }
+
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__row + .wr-descriptions__row {
+    border-top: 1px solid var(--wr-color-light);
+  }
+
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__label,
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__value {
+    padding: 0;
+    border-top: 0;
+  }
+
+  .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__label {
+    background: transparent;
+    border-right: 0;
+  }
+}

package/dialog/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../overlay/styles'; // shared .wr-overlay-sheet for responsive mode
 
 // CDK Overlay base styles are usually loaded once by the consumer.
 // We re-emit the minimal `cdk-overlay-*` rules so a standalone `@use
@@ -122,3 +123,4 @@
     transform: scale(1);
   }
 }
+

package/dropdown/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
 
 // `.wr-dropdown` is the inline trigger marker; the menu and overlay live
 // in the CDK overlay portal and so are separate blocks, not elements.

package/fesm2022/ngwr-cascader.mjs

@@ -258,7 +258,7 @@ class WrCascader {
                 useExisting: forwardRef(() => WrCascader),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-cascader{--wr-cascader-color: var(--wr-color-dark);--wr-cascader-bg: var(--wr-color-white);--wr-cascader-border: var(--wr-color-light);--wr-cascader-radius: var(--wr-border-radius-base);--wr-cascader-padding-y: .4375rem;--wr-cascader-padding-x: .75rem;--wr-cascader-font-size: .875rem;--wr-cascader-line-height: 1.25rem;--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-medium);--wr-cascader-bg: rgba(var(--wr-color-light-rgb), .35)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:12rem;appearance:none;background:var(--wr-cascader-bg);color:var(--wr-cascader-color);border:1px solid var(--wr-cascader-border);border-radius:var(--wr-cascader-radius);padding:var(--wr-cascader-padding-y) var(--wr-cascader-padding-x);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-font-size);line-height:var(--wr-cascader-line-height);cursor:pointer;text-align:left;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{outline:none;border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--open .wr-cascader__trigger{border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__value,.wr-cascader__placeholder{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:rgba(var(--wr-color-medium-rgb),.85)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-medium);transition:transform var(--wr-transition-base)}.wr-cascader--open .wr-cascader__chevron{transform:rotate(180deg)}.wr-cascader__clear{--wr-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border-radius:999px;color:var(--wr-color-medium);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-dark-rgb),.06);color:var(--wr-color-dark)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{display:flex;background:var(--wr-color-white);border:1px solid var(--wr-color-light);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:.875rem;overflow:hidden}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem 0;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-left:1px solid var(--wr-color-light)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--wr-color-dark);cursor:pointer;transition:background .12s ease}.wr-cascader-panel .wr-cascader__opt:hover{background:rgba(var(--wr-color-light-rgb),.5)}.wr-cascader-panel .wr-cascader__opt--active{background:rgba(var(--wr-color-primary-rgb),.08);color:var(--wr-color-primary)}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-medium);cursor:not-allowed;opacity:.55}.wr-cascader-panel .wr-cascader__opt--disabled:hover{background:transparent}.wr-cascader-panel .wr-cascader__opt-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader-panel .wr-cascader__opt-arrow{--wr-icon-size: .875rem;flex:0 0 auto;color:var(--wr-color-medium)}\n"], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-cascader{--wr-cascader-color: var(--wr-color-dark);--wr-cascader-bg: var(--wr-color-white);--wr-cascader-border: var(--wr-color-light);--wr-cascader-radius: var(--wr-border-radius-base);--wr-cascader-padding-y: .4375rem;--wr-cascader-padding-x: .75rem;--wr-cascader-font-size: .875rem;--wr-cascader-line-height: 1.25rem;--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-medium);--wr-cascader-bg: rgba(var(--wr-color-light-rgb), .35)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:12rem;appearance:none;background:var(--wr-cascader-bg);color:var(--wr-cascader-color);border:1px solid var(--wr-cascader-border);border-radius:var(--wr-cascader-radius);padding:var(--wr-cascader-padding-y) var(--wr-cascader-padding-x);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-font-size);line-height:var(--wr-cascader-line-height);cursor:pointer;text-align:left;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{outline:none;border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--open .wr-cascader__trigger{border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__value,.wr-cascader__placeholder{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:rgba(var(--wr-color-medium-rgb),.85)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-medium);transition:transform var(--wr-transition-base)}.wr-cascader--open .wr-cascader__chevron{transform:rotate(180deg)}.wr-cascader__clear{--wr-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border-radius:999px;color:var(--wr-color-medium);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-dark-rgb),.06);color:var(--wr-color-dark)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{display:flex;background:var(--wr-color-white);border:1px solid var(--wr-color-light);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:.875rem;overflow:hidden}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem 0;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-left:1px solid var(--wr-color-light)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--wr-color-dark);cursor:pointer;transition:background .12s ease}.wr-cascader-panel .wr-cascader__opt:hover{background:rgba(var(--wr-color-light-rgb),.5)}.wr-cascader-panel .wr-cascader__opt--active{background:rgba(var(--wr-color-primary-rgb),.08);color:var(--wr-color-primary)}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-medium);cursor:not-allowed;opacity:.55}.wr-cascader-panel .wr-cascader__opt--disabled:hover{background:transparent}.wr-cascader-panel .wr-cascader__opt-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader-panel .wr-cascader__opt-arrow{--wr-icon-size: .875rem;flex:0 0 auto;color:var(--wr-color-medium)}@media(pointer:coarse){.wr-cascader__clear{--wr-icon-size: 1.125rem;width:2rem;height:2rem}.wr-cascader-panel .wr-cascader__opt{padding-top:.75rem;padding-bottom:.75rem}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCascader, decorators: [{
             type: Component,
@@ -269,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                             useExisting: forwardRef(() => WrCascader),
                             multi: true,
                         },
-                    ], template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-cascader{--wr-cascader-color: var(--wr-color-dark);--wr-cascader-bg: var(--wr-color-white);--wr-cascader-border: var(--wr-color-light);--wr-cascader-radius: var(--wr-border-radius-base);--wr-cascader-padding-y: .4375rem;--wr-cascader-padding-x: .75rem;--wr-cascader-font-size: .875rem;--wr-cascader-line-height: 1.25rem;--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-medium);--wr-cascader-bg: rgba(var(--wr-color-light-rgb), .35)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:12rem;appearance:none;background:var(--wr-cascader-bg);color:var(--wr-cascader-color);border:1px solid var(--wr-cascader-border);border-radius:var(--wr-cascader-radius);padding:var(--wr-cascader-padding-y) var(--wr-cascader-padding-x);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-font-size);line-height:var(--wr-cascader-line-height);cursor:pointer;text-align:left;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{outline:none;border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--open .wr-cascader__trigger{border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__value,.wr-cascader__placeholder{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:rgba(var(--wr-color-medium-rgb),.85)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-medium);transition:transform var(--wr-transition-base)}.wr-cascader--open .wr-cascader__chevron{transform:rotate(180deg)}.wr-cascader__clear{--wr-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border-radius:999px;color:var(--wr-color-medium);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-dark-rgb),.06);color:var(--wr-color-dark)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{display:flex;background:var(--wr-color-white);border:1px solid var(--wr-color-light);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:.875rem;overflow:hidden}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem 0;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-left:1px solid var(--wr-color-light)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--wr-color-dark);cursor:pointer;transition:background .12s ease}.wr-cascader-panel .wr-cascader__opt:hover{background:rgba(var(--wr-color-light-rgb),.5)}.wr-cascader-panel .wr-cascader__opt--active{background:rgba(var(--wr-color-primary-rgb),.08);color:var(--wr-color-primary)}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-medium);cursor:not-allowed;opacity:.55}.wr-cascader-panel .wr-cascader__opt--disabled:hover{background:transparent}.wr-cascader-panel .wr-cascader__opt-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader-panel .wr-cascader__opt-arrow{--wr-icon-size: .875rem;flex:0 0 auto;color:var(--wr-color-medium)}\n"] }]
+                    ], template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-cascader{--wr-cascader-color: var(--wr-color-dark);--wr-cascader-bg: var(--wr-color-white);--wr-cascader-border: var(--wr-color-light);--wr-cascader-radius: var(--wr-border-radius-base);--wr-cascader-padding-y: .4375rem;--wr-cascader-padding-x: .75rem;--wr-cascader-font-size: .875rem;--wr-cascader-line-height: 1.25rem;--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-medium);--wr-cascader-bg: rgba(var(--wr-color-light-rgb), .35)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:12rem;appearance:none;background:var(--wr-cascader-bg);color:var(--wr-cascader-color);border:1px solid var(--wr-cascader-border);border-radius:var(--wr-cascader-radius);padding:var(--wr-cascader-padding-y) var(--wr-cascader-padding-x);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-font-size);line-height:var(--wr-cascader-line-height);cursor:pointer;text-align:left;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{outline:none;border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--open .wr-cascader__trigger{border-color:var(--wr-color-primary);box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.15)}.wr-cascader__value,.wr-cascader__placeholder{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:rgba(var(--wr-color-medium-rgb),.85)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-medium);transition:transform var(--wr-transition-base)}.wr-cascader--open .wr-cascader__chevron{transform:rotate(180deg)}.wr-cascader__clear{--wr-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border-radius:999px;color:var(--wr-color-medium);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-dark-rgb),.06);color:var(--wr-color-dark)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{display:flex;background:var(--wr-color-white);border:1px solid var(--wr-color-light);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:.875rem;overflow:hidden}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem 0;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-left:1px solid var(--wr-color-light)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--wr-color-dark);cursor:pointer;transition:background .12s ease}.wr-cascader-panel .wr-cascader__opt:hover{background:rgba(var(--wr-color-light-rgb),.5)}.wr-cascader-panel .wr-cascader__opt--active{background:rgba(var(--wr-color-primary-rgb),.08);color:var(--wr-color-primary)}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-medium);cursor:not-allowed;opacity:.55}.wr-cascader-panel .wr-cascader__opt--disabled:hover{background:transparent}.wr-cascader-panel .wr-cascader__opt-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader-panel .wr-cascader__opt-arrow{--wr-icon-size: .875rem;flex:0 0 auto;color:var(--wr-color-medium)}@media(pointer:coarse){.wr-cascader__clear{--wr-icon-size: 1.125rem;width:2rem;height:2rem}.wr-cascader-panel .wr-cascader__opt{padding-top:.75rem;padding-bottom:.75rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], changeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeOnSelect", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**

package/fesm2022/ngwr-cascader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-cascader.mjs","sources":["../../../projects/lib/cascader/cascader.ts","../../../projects/lib/cascader/cascader.html","../../../projects/lib/cascader/ngwr-cascader.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  ViewContainerRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WR_OVERLAY } from 'ngwr/overlay';\nimport { noop } from 'ngwr/utils';\n\nimport type { WrCascaderOption } from './interfaces';\n\nlet panelUid = 0;\n\n/**\n * Multi-level select — drills down through hierarchical categories\n * (e.g. country → state → city). Each level renders as a column; clicks\n * advance to the next column. Selecting a leaf (no children) commits\n * the full path.\n *\n * Implements `ControlValueAccessor` — value is the path through the\n * tree as a `readonly T[]`.\n *\n * @example\n * ```html\n * <wr-cascader [options]=\"locations\" [(ngModel)]=\"path\" placeholder=\"Pick a location\" />\n * ```\n *\n * ```ts\n * locations: WrCascaderOption[] = [\n *   {\n *     value: 'us', label: 'United States', children: [\n *       { value: 'ny', label: 'New York', children: [\n *         { value: 'nyc', label: 'NYC' },\n *         { value: 'buf', label: 'Buffalo' },\n *       ] },\n *     ],\n *   },\n * ];\n * ```\n *\n * @see https://ngwr.dev/components/cascader\n */\n@Component({\n  selector: 'wr-cascader',\n  templateUrl: './cascader.html',\n  styleUrl: './cascader.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCascader),\n      multi: true,\n    },\n  ],\n})\nexport class WrCascader<T = string> implements ControlValueAccessor {\n  /** Root-level options. Each may have `children` for deeper levels. */\n  readonly options = input.required<readonly WrCascaderOption<T>[]>();\n\n  /** Placeholder shown when no path is selected. @default '' */\n  readonly placeholder = input<string>('');\n\n  /** Disable the cascader. */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Show a clear-all (×) button on the trigger when a path is selected. @default true */\n  readonly clearable = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Allow selecting non-leaf (parent) nodes. When `false`, only leaves\n   * (nodes without children) commit a selection. @default false\n   */\n  readonly changeOnSelect = input(false, { transform: coerceBooleanProperty });\n\n  /** Separator between labels in the trigger display. @default '/' */\n  readonly separator = input<string>('/');\n\n  /** Committed selection path (full T[] from root to leaf). @internal */\n  protected readonly path = signal<readonly T[]>([]);\n\n  /** Currently-expanded column path — drives which columns the panel shows. @internal */\n  protected readonly activePath = signal<readonly T[]>([]);\n\n  protected readonly open = signal(false);\n\n  /** Panel id used by the trigger's `aria-controls`. */\n  protected readonly panelId = `wr-cascader-panel-${++panelUid}`;\n\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly isDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  /**\n   * Columns visible in the panel. Each column shows the children of the\n   * preceding activePath entry. Column 0 = root options. The last\n   * column is whatever the deepest active node's children resolve to —\n   * we only render a column when there are children to show.\n   */\n  protected readonly columns = computed<readonly (readonly WrCascaderOption<T>[])[]>(() => {\n    const cols: (readonly WrCascaderOption<T>[])[] = [this.options()];\n    const trail = this.activePath();\n    let list: readonly WrCascaderOption<T>[] = this.options();\n    for (const v of trail) {\n      const node = list.find(o => o.value === v);\n      if (!node?.children?.length) break;\n      cols.push(node.children);\n      list = node.children;\n    }\n    return cols;\n  });\n\n  /** Label trail joined by `separator()` — what the trigger shows. */\n  protected readonly displayLabel = computed(() => {\n    const p = this.path();\n    if (p.length === 0) return null;\n    const labels: string[] = [];\n    let list: readonly WrCascaderOption<T>[] = this.options();\n    for (const v of p) {\n      const node = list.find(o => o.value === v);\n      if (!node) return null;\n      labels.push(node.label);\n      list = node.children ?? [];\n    }\n    const sep = ` ${this.separator()} `;\n    return labels.join(sep);\n  });\n\n  protected readonly hasSelection = computed(() => this.path().length > 0);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-cascader'];\n    if (this.open()) parts.push('wr-cascader--open');\n    if (this.isDisabled()) parts.push('wr-cascader--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly panelTpl = viewChild.required('panelTpl', { read: TemplateRef });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly overlay = inject(WR_OVERLAY);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly scrollStrategies = inject(ScrollStrategyOptions);\n  private readonly destroyRef = inject(DestroyRef);\n  private overlayRef: OverlayRef | null = null;\n\n  private onChange: (value: readonly T[]) => void = noop;\n  protected onTouched: () => void = noop;\n\n  constructor() {\n    effect(() => {\n      if (this.open()) {\n        this.openOverlay();\n      } else {\n        this.closeOverlay();\n      }\n    });\n  }\n\n  // Template handlers\n\n  protected onTriggerClick(): void {\n    if (this.isDisabled()) return;\n    if (!this.open()) this.activePath.set(this.path());\n    this.open.update(v => !v);\n  }\n\n  protected onOptionClick(colIndex: number, opt: WrCascaderOption<T>, event: Event): void {\n    event.stopPropagation();\n    if (opt.disabled || this.isDisabled()) return;\n\n    const head = this.activePath().slice(0, colIndex);\n    const newPath = [...head, opt.value];\n\n    const hasChildren = !!opt.children?.length;\n\n    // Always update active column for visual feedback / next column.\n    this.activePath.set(newPath);\n\n    // Commit when we've reached a leaf, or when changeOnSelect is on.\n    if (!hasChildren || this.changeOnSelect()) {\n      this.path.set(newPath);\n      this.onChange(newPath);\n      this.onTouched();\n      // Close once we hit a true leaf — parent commits keep the panel open.\n      if (!hasChildren) this.open.set(false);\n    }\n  }\n\n  protected clearSelection(event: Event): void {\n    event.stopPropagation();\n    if (this.isDisabled()) return;\n    this.path.set([]);\n    this.activePath.set([]);\n    const empty: readonly T[] = [];\n    this.onChange(empty);\n    this.onTouched();\n  }\n\n  protected isActiveAt(colIndex: number, value: T): boolean {\n    return this.activePath()[colIndex] === value;\n  }\n\n  // ControlValueAccessor\n\n  writeValue(value: unknown): void {\n    if (Array.isArray(value)) {\n      this.path.set(value as readonly T[]);\n      this.activePath.set(value as readonly T[]);\n    } else {\n      this.path.set([]);\n      this.activePath.set([]);\n    }\n  }\n\n  registerOnChange(fn: (value: readonly T[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n    if (isDisabled) this.open.set(false);\n  }\n\n  // Overlay\n\n  private openOverlay(): void {\n    if (this.overlayRef) return;\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.host)\n      .withPositions([\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\n      ])\n      .withPush(true);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.scrollStrategies.reposition(),\n      panelClass: 'wr-cascader-overlay',\n    });\n\n    const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n    this.overlayRef.attach(portal);\n\n    this.overlayRef\n      .outsidePointerEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (this.host.nativeElement.contains(event.target as Node)) return;\n        this.open.set(false);\n      });\n\n    this.overlayRef\n      .keydownEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          this.open.set(false);\n        }\n      });\n  }\n\n  private closeOverlay(): void {\n    if (!this.overlayRef) return;\n    this.overlayRef.dispose();\n    this.overlayRef = null;\n  }\n}\n\nexport type { WrCascaderOption } from './interfaces';\n","<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;AAKG;AA4BH,IAAI,QAAQ,GAAG,CAAC;AAEhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;MAgBU,UAAU,CAAA;;IAEZ,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAkC;;IAG1D,WAAW,GAAG,KAAK,CAAS,EAAE;oFAAC;;IAG/B,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,SAAS,GAAG,KAAK,CAAC,IAAI,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEtE;;;AAGG;IACM,cAAc,GAAG,KAAK,CAAC,KAAK,sFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAGnE,SAAS,GAAG,KAAK,CAAS,GAAG;kFAAC;;IAGpB,IAAI,GAAG,MAAM,CAAe,EAAE;6EAAC;;IAG/B,UAAU,GAAG,MAAM,CAAe,EAAE;mFAAC;IAErC,IAAI,GAAG,MAAM,CAAC,KAAK;6EAAC;;AAGpB,IAAA,OAAO,GAAG,CAAA,kBAAA,EAAqB,EAAE,QAAQ,EAAE;IAE7C,eAAe,GAAG,MAAM,CAAC,KAAK;wFAAC;AAE7B,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;mFAAC;AAEzF;;;;;AAKG;AACgB,IAAA,OAAO,GAAG,QAAQ,CAA8C,MAAK;QACtF,MAAM,IAAI,GAAuC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;AACjE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,IAAI,IAAI,GAAmC,IAAI,CAAC,OAAO,EAAE;AACzD,QAAA,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;AACrB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;AAC1C,YAAA,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM;gBAAE;AAC7B,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AACxB,YAAA,IAAI,GAAG,IAAI,CAAC,QAAQ;QACtB;AACA,QAAA,OAAO,IAAI;IACb,CAAC;gFAAC;;AAGiB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;AACrB,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;QAC/B,MAAM,MAAM,GAAa,EAAE;AAC3B,QAAA,IAAI,IAAI,GAAmC,IAAI,CAAC,OAAO,EAAE;AACzD,QAAA,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;AACjB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;AAC1C,YAAA,IAAI,CAAC,IAAI;AAAE,gBAAA,OAAO,IAAI;AACtB,YAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACvB,YAAA,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE;QAC5B;QACA,MAAM,GAAG,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,GAAG;AACnC,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;IACzB,CAAC;qFAAC;AAEiB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;qFAAC;AAErD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAChD,IAAI,IAAI,CAAC,UAAU,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AAC1D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEiB,IAAA,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;AAElE,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;AAClD,IAAA,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;AAC5B,IAAA,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC9B,IAAA,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AAChD,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IACxC,UAAU,GAAsB,IAAI;IAEpC,QAAQ,GAAkC,IAAI;IAC5C,SAAS,GAAe,IAAI;AAEtC,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,WAAW,EAAE;YACpB;iBAAO;gBACL,IAAI,CAAC,YAAY,EAAE;YACrB;AACF,QAAA,CAAC,CAAC;IACJ;;IAIU,cAAc,GAAA;QACtB,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAClD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3B;AAEU,IAAA,aAAa,CAAC,QAAgB,EAAE,GAAwB,EAAE,KAAY,EAAA;QAC9E,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE;AAEvC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;QACjD,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC;QAEpC,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM;;AAG1C,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;;QAG5B,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzC,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;YACtB,IAAI,CAAC,SAAS,EAAE;;AAEhB,YAAA,IAAI,CAAC,WAAW;AAAE,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;QACxC;IACF;AAEU,IAAA,cAAc,CAAC,KAAY,EAAA;QACnC,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,MAAM,KAAK,GAAiB,EAAE;AAC9B,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,EAAE;IAClB;IAEU,UAAU,CAAC,QAAgB,EAAE,KAAQ,EAAA;QAC7C,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,CAAC,KAAK,KAAK;IAC9C;;AAIA,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAqB,CAAC;AACpC,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAqB,CAAC;QAC5C;aAAO;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QACzB;IACF;AAEA,IAAA,gBAAgB,CAAC,EAAiC,EAAA;AAChD,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;QAClC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAC3D,QAAA,IAAI,UAAU;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IACtC;;IAIQ,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,UAAU;YAAE;AAErB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC3B,aAAA,QAAQ;AACR,aAAA,mBAAmB,CAAC,IAAI,CAAC,IAAI;AAC7B,aAAA,aAAa,CAAC;AACb,YAAA,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;AAC3E,YAAA,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE;SAC5E;aACA,QAAQ,CAAC,IAAI,CAAC;QAEjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACpC,gBAAgB;AAChB,YAAA,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;AAClD,YAAA,UAAU,EAAE,qBAAqB;AAClC,SAAA,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC;AAC5D,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;AAE9B,QAAA,IAAI,CAAC;AACF,aAAA,oBAAoB;AACpB,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,KAAK,IAAG;YACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBAAE;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,CAAC,CAAC;AAEJ,QAAA,IAAI,CAAC;AACF,aAAA,aAAa;AACb,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,KAAK,IAAG;AACjB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YACtB;AACF,QAAA,CAAC,CAAC;IACN;IAEQ,YAAY,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AACzB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;IACxB;uGA1NW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,SAAA,EATV;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;;AAE1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC;AACzC,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAmFoE,WAAW,6CChKlF,+hGAiGA,EAAA,MAAA,EAAA,CAAA,0+GAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDlBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAftB,SAAS;+BACE,aAAa,EAAA,aAAA,EAGR,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,SAAA,EACrB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;;AAE1B,4BAAA,WAAW,EAAE,UAAU,CAAC,gBAAgB,CAAC;AACzC,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,+hGAAA,EAAA,MAAA,EAAA,CAAA,0+GAAA,CAAA,EAAA;AAmFgD,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,UAAU,EAAA,EAAA,GAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEhKpF;;AAEG;;;;"}
+{"version":3,"file":"ngwr-cascader.mjs","sources":["../../../projects/lib/cascader/cascader.ts","../../../projects/lib/cascader/cascader.html","../../../projects/lib/cascader/ngwr-cascader.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  ViewContainerRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WR_OVERLAY } from 'ngwr/overlay';\nimport { noop } from 'ngwr/utils';\n\nimport type { WrCascaderOption } from './interfaces';\n\nlet panelUid = 0;\n\n/**\n * Multi-level select — drills down through hierarchical categories\n * (e.g. country → state → city). Each level renders as a column; clicks\n * advance to the next column. Selecting a leaf (no children) commits\n * the full path.\n *\n * Implements `ControlValueAccessor` — value is the path through the\n * tree as a `readonly T[]`.\n *\n * @example\n * ```html\n * <wr-cascader [options]=\"locations\" [(ngModel)]=\"path\" placeholder=\"Pick a location\" />\n * ```\n *\n * ```ts\n * locations: WrCascaderOption[] = [\n *   {\n *     value: 'us', label: 'United States', children: [\n *       { value: 'ny', label: 'New York', children: [\n *         { value: 'nyc', label: 'NYC' },\n *         { value: 'buf', label: 'Buffalo' },\n *       ] },\n *     ],\n *   },\n * ];\n * ```\n *\n * @see https://ngwr.dev/components/cascader\n */\n@Component({\n  selector: 'wr-cascader',\n  templateUrl: './cascader.html',\n  styleUrl: './cascader.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCascader),\n      multi: true,\n    },\n  ],\n})\nexport class WrCascader<T = string> implements ControlValueAccessor {\n  /** Root-level options. Each may have `children` for deeper levels. */\n  readonly options = input.required<readonly WrCascaderOption<T>[]>();\n\n  /** Placeholder shown when no path is selected. @default '' */\n  readonly placeholder = input<string>('');\n\n  /** Disable the cascader. */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Show a clear-all (×) button on the trigger when a path is selected. @default true */\n  readonly clearable = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Allow selecting non-leaf (parent) nodes. When `false`, only leaves\n   * (nodes without children) commit a selection. @default false\n   */\n  readonly changeOnSelect = input(false, { transform: coerceBooleanProperty });\n\n  /** Separator between labels in the trigger display. @default '/' */\n  readonly separator = input<string>('/');\n\n  /** Committed selection path (full T[] from root to leaf). @internal */\n  protected readonly path = signal<readonly T[]>([]);\n\n  /** Currently-expanded column path — drives which columns the panel shows. @internal */\n  protected readonly activePath = signal<readonly T[]>([]);\n\n  protected readonly open = signal(false);\n\n  /** Panel id used by the trigger's `aria-controls`. */\n  protected readonly panelId = `wr-cascader-panel-${++panelUid}`;\n\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly isDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  /**\n   * Columns visible in the panel. Each column shows the children of the\n   * preceding activePath entry. Column 0 = root options. The last\n   * column is whatever the deepest active node's children resolve to —\n   * we only render a column when there are children to show.\n   */\n  protected readonly columns = computed<readonly (readonly WrCascaderOption<T>[])[]>(() => {\n    const cols: (readonly WrCascaderOption<T>[])[] = [this.options()];\n    const trail = this.activePath();\n    let list: readonly WrCascaderOption<T>[] = this.options();\n    for (const v of trail) {\n      const node = list.find(o => o.value === v);\n      if (!node?.children?.length) break;\n      cols.push(node.children);\n      list = node.children;\n    }\n    return cols;\n  });\n\n  /** Label trail joined by `separator()` — what the trigger shows. */\n  protected readonly displayLabel = computed(() => {\n    const p = this.path();\n    if (p.length === 0) return null;\n    const labels: string[] = [];\n    let list: readonly WrCascaderOption<T>[] = this.options();\n    for (const v of p) {\n      const node = list.find(o => o.value === v);\n      if (!node) return null;\n      labels.push(node.label);\n      list = node.children ?? [];\n    }\n    const sep = ` ${this.separator()} `;\n    return labels.join(sep);\n  });\n\n  protected readonly hasSelection = computed(() => this.path().length > 0);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-cascader'];\n    if (this.open()) parts.push('wr-cascader--open');\n    if (this.isDisabled()) parts.push('wr-cascader--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly panelTpl = viewChild.required('panelTpl', { read: TemplateRef });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly overlay = inject(WR_OVERLAY);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly scrollStrategies = inject(ScrollStrategyOptions);\n  private readonly destroyRef = inject(DestroyRef);\n  private overlayRef: OverlayRef | null = null;\n\n  private onChange: (value: readonly T[]) => void = noop;\n  protected onTouched: () => void = noop;\n\n  constructor() {\n    effect(() => {\n      if (this.open()) {\n        this.openOverlay();\n      } else {\n        this.closeOverlay();\n      }\n    });\n  }\n\n  // Template handlers\n\n  protected onTriggerClick(): void {\n    if (this.isDisabled()) return;\n    if (!this.open()) this.activePath.set(this.path());\n    this.open.update(v => !v);\n  }\n\n  protected onOptionClick(colIndex: number, opt: WrCascaderOption<T>, event: Event): void {\n    event.stopPropagation();\n    if (opt.disabled || this.isDisabled()) return;\n\n    const head = this.activePath().slice(0, colIndex);\n    const newPath = [...head, opt.value];\n\n    const hasChildren = !!opt.children?.length;\n\n    // Always update active column for visual feedback / next column.\n    this.activePath.set(newPath);\n\n    // Commit when we've reached a leaf, or when changeOnSelect is on.\n    if (!hasChildren || this.changeOnSelect()) {\n      this.path.set(newPath);\n      this.onChange(newPath);\n      this.onTouched();\n      // Close once we hit a true leaf — parent commits keep the panel open.\n      if (!hasChildren) this.open.set(false);\n    }\n  }\n\n  protected clearSelection(event: Event): void {\n    event.stopPropagation();\n    if (this.isDisabled()) return;\n    this.path.set([]);\n    this.activePath.set([]);\n    const empty: readonly T[] = [];\n    this.onChange(empty);\n    this.onTouched();\n  }\n\n  protected isActiveAt(colIndex: number, value: T): boolean {\n    return this.activePath()[colIndex] === value;\n  }\n\n  // ControlValueAccessor\n\n  writeValue(value: unknown): void {\n    if (Array.isArray(value)) {\n      this.path.set(value as readonly T[]);\n      this.activePath.set(value as readonly T[]);\n    } else {\n      this.path.set([]);\n      this.activePath.set([]);\n    }\n  }\n\n  registerOnChange(fn: (value: readonly T[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n    if (isDisabled) this.open.set(false);\n  }\n\n  // Overlay\n\n  private openOverlay(): void {\n    if (this.overlayRef) return;\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.host)\n      .withPositions([\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\n      ])\n      .withPush(true);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.scrollStrategies.reposition(),\n      panelClass: 'wr-cascader-overlay',\n    });\n\n    const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n    this.overlayRef.attach(portal);\n\n    this.overlayRef\n      .outsidePointerEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (this.host.nativeElement.contains(event.target as Node)) return;\n        this.open.set(false);\n      });\n\n    this.overlayRef\n      .keydownEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          this.open.set(false);\n        }\n      });\n  }\n\n  private closeOverlay(): void {\n    if (!this.overlayRef) return;\n    this.overlayRef.dispose();\n    this.overlayRef = null;\n  }\n}\n\nexport type { WrCascaderOption } from './interfaces';\n","<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"onTriggerClick()\"\n  (blur)=\"onTouched()\"\n>\n  @if (displayLabel(); as label) {\n    <span class=\"wr-cascader__value\">{{ label }}</span>\n  } @else {\n    <span class=\"wr-cascader__placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (clearable() && hasSelection() && !isDisabled()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n      (click)=\"clearSelection($event)\"\n      (keydown.enter)=\"clearSelection($event)\"\n      (keydown.space)=\"clearSelection($event)\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </span>\n  }\n\n  <svg\n    class=\"wr-icon__svg wr-cascader__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<ng-template #panelTpl>\n  <div class=\"wr-cascader-panel\" role=\"menu\" [attr.id]=\"panelId\">\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul class=\"wr-cascader__col\" role=\"menu\">\n        @for (opt of col; track opt.value) {\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"menuitem\"\n            [class.wr-cascader__opt--active]=\"isActiveAt(colIndex, opt.value)\"\n            [class.wr-cascader__opt--disabled]=\"opt.disabled\"\n            [attr.tabindex]=\"opt.disabled ? -1 : 0\"\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\n            (click)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.enter)=\"onOptionClick(colIndex, opt, $event)\"\n            (keydown.space)=\"onOptionClick(colIndex, opt, $event)\"\n          >\n            <span class=\"wr-cascader__opt-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <svg\n                class=\"wr-icon__svg wr-cascader__opt-arrow\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-command-palette.mjs

@@ -6,6 +6,7 @@ import { input, model, output, signal, viewChild, computed, inject, DestroyRef,
 import { WrHotkey } from 'ngwr/hotkey';
 import { useI18nText } from 'ngwr/i18n';
 import { WrIcon } from 'ngwr/icon';
+import { WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';
 
 /**
  * @license
@@ -76,12 +77,23 @@ class WrCommandPalette {
     resolvedEmpty = useI18nText(this.emptyText, 'commandPalette.noResults', 'No results');
     /** Auto-close on `(picked)`. Set false to keep open. @default true */
     closeOnPick = input(true, { ...(ngDevMode ? { debugName: "closeOnPick" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Present the palette full-screen on small viewports instead of a centred
+     * modal. `undefined` follows the app-wide `provideWrResponsiveOverlays()`
+     * setting; `true`/`false` overrides it. The palette docks to the top (it
+     * auto-focuses its input, so the on-screen keyboard stays clear).
+     * @default undefined
+     */
+    responsive = input(undefined, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? undefined : coerceBooleanProperty(v)) });
     /** Fires when the user commits an item (Enter / click). */
     picked = output();
     query = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Whether the current opening is presented full-screen. Decided on open. */
+    presentAsSheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentAsSheet" }] : /* istanbul ignore next */ []));
     inputEl = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     panelEl = viewChild('panel', /* @ts-ignore */
@@ -99,6 +111,7 @@ class WrCommandPalette {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
     hotkeys = inject(WrHotkey);
+    responsiveConfig = inject(WR_RESPONSIVE_OVERLAYS);
     destroyRef = inject(DestroyRef);
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -126,6 +139,7 @@ class WrCommandPalette {
                 return;
             this.query.set('');
             this.activeIndex.set(0);
+            this.presentAsSheet.set(wrPresentAsSheet(this.responsive(), this.responsiveConfig));
         });
         // Focus trap + restore.
         effect(() => {
@@ -244,12 +258,12 @@ class WrCommandPalette {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrCommandPalette, isStandalone: true, selector: "wr-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, closeOnPick: { classPropertyName: "closeOnPick", publicName: "closeOnPick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div class=\"wr-command-palette\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Command palette\">\n    <!-- Backdrop captures clicks to close. Not focusable \u2014 keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrCommandPalette, isStandalone: true, selector: "wr-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, closeOnPick: { classPropertyName: "closeOnPick", publicName: "closeOnPick", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"wr-command-palette\"\n    [class.wr-command-palette--sheet]=\"presentAsSheet()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command palette\"\n  >\n    <!-- Backdrop captures clicks to close. Not focusable \u2014 keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCommandPalette, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-command-palette', encapsulation: ViewEncapsulation.None, imports: [WrIcon], template: "@if (open()) {\n  <div class=\"wr-command-palette\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Command palette\">\n    <!-- Backdrop captures clicks to close. Not focusable \u2014 keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], closeOnPick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnPick", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+            args: [{ selector: 'wr-command-palette', encapsulation: ViewEncapsulation.None, imports: [WrIcon], template: "@if (open()) {\n  <div\n    class=\"wr-command-palette\"\n    [class.wr-command-palette--sheet]=\"presentAsSheet()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command palette\"\n  >\n    <!-- Backdrop captures clicks to close. Not focusable \u2014 keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], closeOnPick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnPick", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.