ngwr 14.4.0 → 14.5.1

package/README.md

@@ -19,7 +19,7 @@ value controls implement `FormValueControl` / `FormCheckboxControl` themselves,
 so `[formField]` writes the component's own `value` / `checked` model — there
 is not one `ControlValueAccessor` in the library. Zoneless by construction, not
 zoneless-compatible: signal inputs, signal state, `afterNextRender()` for DOM
-work, and no `@NgModule` or `@Input()` decorator anywhere in the source. 225
+work, and no `@NgModule` or `@Input()` decorator anywhere in the source. 227
 tree-shakable entry points, on `@angular/cdk` for overlay, portal and a11y
 primitives.
 
@@ -59,9 +59,15 @@ export class SignupCard {
 }
 ```
 
-Classic `[(ngModel)]` and reactive forms still work — Angular 22 synthesises the
-accessor for a signal-forms control — and every control is usable standalone
-through its two-way `[(value)]` / `[(checked)]` model.
+Classic `[(ngModel)]` and reactive forms still bind, with no `ControlValueAccessor`
+created: Angular's `NgModel` / `FormControlDirective` drive the control's `value`
+or `checked` model directly. That bridge does **not** apply template validator
+directives — `required`, `minlength`, `maxlength`, `pattern` or `email` on an ngwr
+control is silently ignored and the form submits — so put validators on the
+`FormControl`. It also ignores `updateOn`, and a `{ emitEvent: false }` write needs
+`markForCheck()`; the [forms guide](https://ngwr.dev/guides/forms) has the detail.
+Every control is also usable standalone through its two-way `[(value)]` /
+`[(checked)]` model.
 
 > **Status:** active development. v14 is the current major line (Angular 22 peer).
 > Upgrading? `ng update ngwr@14` rewrites v14's six renames and reports the
@@ -309,7 +315,7 @@ export class ProfileForm {
 
 **Buttons** — [button](https://ngwr.dev/reference/components/button), [button-group](https://ngwr.dev/reference/components/button-group), [speed-dial](https://ngwr.dev/reference/components/speed-dial).
 
-**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [event-calendar](https://ngwr.dev/reference/components/event-calendar), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
+**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [event-calendar](https://ngwr.dev/reference/components/event-calendar), [graph](https://ngwr.dev/reference/components/graph), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
 
 **Feedback** — [alert](https://ngwr.dev/reference/components/alert), [empty](https://ngwr.dev/reference/components/empty), [progress](https://ngwr.dev/reference/components/progress), [result](https://ngwr.dev/reference/components/result), [skeleton](https://ngwr.dev/reference/components/skeleton), [spinner](https://ngwr.dev/reference/components/spinner).
 
@@ -371,7 +377,7 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - **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, a `touch` density preset enlarges the nine control families that read the multipliers, and drawer / lightbox / toast / carousel respond to swipe gestures. Fixed surfaces respect `env(safe-area-inset-*)`, and layout components (`descriptions`, `stepper`, `page-header`, `toolbar`, `pagination`, `table`) reflow to their container via container queries. [Guide](https://ngwr.dev/guides/mobile).
 - **Table, batteries included.** `wr-table` covers column pinning / resizing / drag-reorder, row selection, expandable rows, grouping, tree rows (`childrenKey` — the forest flattens into the same `<tbody>`, so pinning and cell templates keep working at every depth, and the table announces a `treegrid`), summary rows, CSV export (`exportCsv()`, dependency-free RFC 4180) and a virtualized body — all opt-in inputs on the one component. Excel (`.xlsx`) export is deliberately not shipped: it would mean a third-party dependency.
-- **Tree-shakable.** 225 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 70 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
+- **Tree-shakable.** 227 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 71 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
 - **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(lucideIcons({ plus: Plus }))` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.
 - **Reactbits ports, dependency-free.** All animation ports are reimplemented with vanilla DOM + Web Animations API / `IntersectionObserver` / `requestAnimationFrame` / raw WebGL — no GSAP, no `motion/react`, no `matter-js`, no `ogl`.

package/fesm2022/ngwr-breadcrumbs.mjs

@@ -58,14 +58,14 @@ class WrBreadcrumbs {
     separatorValue = computed(() => `"${cssString(this.separator())}"`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "separatorValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrBreadcrumbs, isStandalone: true, selector: "wr-breadcrumbs", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--wr-breadcrumbs-separator": "separatorValue()" }, classAttribute: "wr-breadcrumbs" }, ngImport: i0, template: "<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-breadcrumbs{--wr-breadcrumbs-separator: \"/\";--wr-breadcrumbs-gap: .5rem;--wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), .6);--wr-breadcrumbs-current-color: var(--wr-color-on-surface);--wr-breadcrumbs-link-color: var(--wr-color-primary-ink);--wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), .3);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-breadcrumbs-color)}.wr-breadcrumbs__nav{display:block}.wr-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wr-breadcrumbs-gap);margin:0;padding:0;list-style:none}.wr-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--wr-breadcrumbs-gap)}.wr-breadcrumbs__item:not(:first-child):before{content:var(--wr-breadcrumbs-separator);color:var(--wr-breadcrumbs-separator-color);-webkit-user-select:none;user-select:none}.wr-breadcrumbs__link{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-link-color);text-decoration:none;border-radius:var(--wr-border-radius-sm);transition:color .15s ease}.wr-breadcrumbs__link:hover{text-decoration:underline}.wr-breadcrumbs__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:2px}.wr-breadcrumbs__current{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-current-color);font-weight:600}.wr-breadcrumbs__icon{--wr-icon-size: 1rem;flex:0 0 auto}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrBreadcrumbs, isStandalone: true, selector: "wr-breadcrumbs", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--wr-breadcrumbs-separator": "separatorValue()" }, classAttribute: "wr-breadcrumbs" }, ngImport: i0, template: "<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-breadcrumbs{--wr-breadcrumbs-separator: \"/\";--wr-breadcrumbs-gap: .5rem;--wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), .6);--wr-breadcrumbs-current-color: var(--wr-color-on-surface);--wr-breadcrumbs-link-color: var(--wr-color-primary-ink);--wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), .3);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-breadcrumbs-color)}.wr-breadcrumbs__nav{display:block}.wr-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wr-breadcrumbs-gap);margin:0;padding:0;list-style:none}.wr-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--wr-breadcrumbs-gap)}.wr-breadcrumbs__item:not(:first-child):before{content:var(--wr-breadcrumbs-separator);color:var(--wr-breadcrumbs-separator-color);-webkit-user-select:none;user-select:none}.wr-breadcrumbs__link{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-link-color);text-decoration:none;border-radius:var(--wr-border-radius-sm);transition:color .15s ease}.wr-breadcrumbs__link:hover{text-decoration:underline}.wr-breadcrumbs__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:2px}.wr-breadcrumbs__current{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-current-color);font-weight:600}.wr-breadcrumbs__icon{--wr-icon-size: 1rem;flex:0 0 auto}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBreadcrumbs, decorators: [{
             type: Component,
             args: [{ selector: 'wr-breadcrumbs', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-breadcrumbs',
                         '[style.--wr-breadcrumbs-separator]': 'separatorValue()',
-                    }, template: "<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-breadcrumbs{--wr-breadcrumbs-separator: \"/\";--wr-breadcrumbs-gap: .5rem;--wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), .6);--wr-breadcrumbs-current-color: var(--wr-color-on-surface);--wr-breadcrumbs-link-color: var(--wr-color-primary-ink);--wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), .3);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-breadcrumbs-color)}.wr-breadcrumbs__nav{display:block}.wr-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wr-breadcrumbs-gap);margin:0;padding:0;list-style:none}.wr-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--wr-breadcrumbs-gap)}.wr-breadcrumbs__item:not(:first-child):before{content:var(--wr-breadcrumbs-separator);color:var(--wr-breadcrumbs-separator-color);-webkit-user-select:none;user-select:none}.wr-breadcrumbs__link{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-link-color);text-decoration:none;border-radius:var(--wr-border-radius-sm);transition:color .15s ease}.wr-breadcrumbs__link:hover{text-decoration:underline}.wr-breadcrumbs__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:2px}.wr-breadcrumbs__current{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-current-color);font-weight:600}.wr-breadcrumbs__icon{--wr-icon-size: 1rem;flex:0 0 auto}\n"] }]
+                    }, template: "<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-breadcrumbs{--wr-breadcrumbs-separator: \"/\";--wr-breadcrumbs-gap: .5rem;--wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), .6);--wr-breadcrumbs-current-color: var(--wr-color-on-surface);--wr-breadcrumbs-link-color: var(--wr-color-primary-ink);--wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), .3);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-breadcrumbs-color)}.wr-breadcrumbs__nav{display:block}.wr-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wr-breadcrumbs-gap);margin:0;padding:0;list-style:none}.wr-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--wr-breadcrumbs-gap)}.wr-breadcrumbs__item:not(:first-child):before{content:var(--wr-breadcrumbs-separator);color:var(--wr-breadcrumbs-separator-color);-webkit-user-select:none;user-select:none}.wr-breadcrumbs__link{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-link-color);text-decoration:none;border-radius:var(--wr-border-radius-sm);transition:color .15s ease}.wr-breadcrumbs__link:hover{text-decoration:underline}.wr-breadcrumbs__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:2px}.wr-breadcrumbs__current{display:inline-flex;align-items:center;gap:.375rem;color:var(--wr-breadcrumbs-current-color);font-weight:600}.wr-breadcrumbs__icon{--wr-icon-size: 1rem;flex:0 0 auto}\n"] }]
         }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**

package/fesm2022/ngwr-breadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-breadcrumbs.mjs","sources":["../../../projects/lib/breadcrumbs/breadcrumbs.ts","../../../projects/lib/breadcrumbs/breadcrumbs.html","../../../projects/lib/breadcrumbs/breadcrumbs-item.ts","../../../projects/lib/breadcrumbs/breadcrumbs-item.html","../../../projects/lib/breadcrumbs/ngwr-breadcrumbs.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/** Escape a string for use inside a double-quoted CSS `<string>`. */\nfunction cssString(value: string): string {\n  return value.replace(/[\\\\\"]/g, '\\\\$&').replace(/[\\n\\r\\f]/g, char => `\\\\${char.codePointAt(0)!.toString(16)} `);\n}\n\n/**\n * Breadcrumb navigation. Project `<wr-breadcrumbs-item>` children — each keeps\n * its own element and takes `role=\"listitem\"` inside the `<ol>` rather than\n * rendering an `<li>`, separated by the configured glyph (default `/`). The\n * container exposes the `nav[aria-label]` landmark required by WCAG.\n *\n * @example\n * ```html\n * <wr-breadcrumbs>\n *   <wr-breadcrumbs-item routerLink=\"/\">Home</wr-breadcrumbs-item>\n *   <wr-breadcrumbs-item routerLink=\"/docs\">Docs</wr-breadcrumbs-item>\n *   <wr-breadcrumbs-item>Current</wr-breadcrumbs-item>\n * </wr-breadcrumbs>\n *\n * <!-- Custom separator -->\n * <wr-breadcrumbs separator=\"›\">…</wr-breadcrumbs>\n * ```\n *\n * @see https://ngwr.dev/reference/components/breadcrumbs\n */\n@Component({\n  selector: 'wr-breadcrumbs',\n  templateUrl: './breadcrumbs.html',\n  styleUrl: './breadcrumbs.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-breadcrumbs',\n    '[style.--wr-breadcrumbs-separator]': 'separatorValue()',\n  },\n})\nexport class WrBreadcrumbs {\n  /** Separator glyph between items. Any short string. @default '/' */\n  readonly separator = input('/');\n\n  /**\n   * Accessible label for the `nav` landmark. Falls back to `breadcrumbs.label`,\n   * then `'Breadcrumbs'`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  // The English default used to live on the input itself, which made this the one\n  // landmark in the library a catalog could not reach: `wr-anchor` and `wr-sidebar`\n  // announced in Russian on the same page while this one stayed \"Breadcrumbs\", and\n  // the only escape was restating `[ariaLabel]` on every trail.\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'breadcrumbs.label', 'Breadcrumbs');\n\n  // The glyph is WRAPPED in quotes here and unwrapped by `content:` in the\n  // stylesheet, so an unescaped `\"` inside it closes the library's own string\n  // and the rest of the value is parsed as CSS — `/\" url(\"…\") \"` computes to\n  // `content: \"/\" url(\"…\") \"\"`, an image the browser fetches. Escaping is the\n  // whole fix, and it is lossless: a separator that IS a quote still renders.\n  protected readonly separatorValue = computed(() => `\"${cssString(this.separator())}\"`);\n}\n","<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\n/**\n * One row inside `<wr-breadcrumbs>`. The host itself is the row — a\n * `<wr-breadcrumbs-item role=\"listitem\" class=\"wr-breadcrumbs__item\">`\n * inside the parent's `<ol>` — and it contains either a real\n * `<a class=\"wr-breadcrumbs__link\">` (when `[href]` or `[routerLink]` is\n * set) or, for the current crumb, a non-interactive\n * `<a class=\"wr-breadcrumbs__current\" role=\"text\" tabindex=\"-1\"\n * aria-current=\"page\">` (when neither is set — typically the last crumb).\n *\n * @example\n * ```html\n * <wr-breadcrumbs-item icon=\"home\" routerLink=\"/\">Home</wr-breadcrumbs-item>\n * <wr-breadcrumbs-item href=\"https://ngwr.dev\">External</wr-breadcrumbs-item>\n * <wr-breadcrumbs-item>Current page</wr-breadcrumbs-item>\n * ```\n */\n@Component({\n  selector: 'wr-breadcrumbs-item',\n  templateUrl: './breadcrumbs-item.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, RouterLink, WrIcon],\n  host: { class: 'wr-breadcrumbs__item', role: 'listitem' },\n})\nexport class WrBreadcrumbsItem {\n  /** Plain anchor href. Overridden by `routerLink` when both are set. */\n  readonly href = input<string | null>(null);\n\n  /** Angular router target. Anything `RouterLink` accepts (string or `any[]`). */\n  readonly routerLink = input<string | readonly unknown[] | null>(null);\n\n  /** Open external `href` in a new tab. Ignored when `routerLink` is set. @default false */\n  readonly external = input(false);\n\n  /** Optional leading icon rendered inline before the label. @default null */\n  readonly icon = input<WrIconName | null>(null);\n\n  protected readonly isLink = computed(() => this.href() != null || this.routerLink() != null);\n  protected readonly isRouter = computed(() => this.routerLink() != null);\n\n  protected readonly rootClass = computed(() => (this.isLink() ? 'wr-breadcrumbs__link' : 'wr-breadcrumbs__current'));\n}\n","<!--\n  The label lives in a template rather than inside each branch below. A default\n  `<ng-content />` written into two `@if` branches fills only ONE of them — the\n  last in static order — and the other renders empty, with no template error and\n  nothing in the console. This component has been broken exactly that way\n  before; stamping one template from either branch keeps two anchors and one\n  projection.\n-->\n<ng-template #label>\n  @if (icon(); as i) {\n    <wr-icon class=\"wr-breadcrumbs__icon\" [name]=\"i\" />\n  }\n  <ng-content />\n</ng-template>\n\n@if (isRouter()) {\n  <!--\n    Only ROUTER crumbs get `RouterLink`. Applied unconditionally it owns the\n    anchor's `href` and writes null into it whenever `routerLink` is null —\n    which silently turned every `href`-based crumb, a documented input, into\n    text that navigates nowhere.\n  -->\n  <a [class]=\"rootClass()\" [routerLink]=\"routerLink()\">\n    <ng-container [ngTemplateOutlet]=\"label\" />\n  </a>\n} @else {\n  <a\n    [class]=\"rootClass()\"\n    [attr.href]=\"href()\"\n    [attr.aria-current]=\"isLink() ? null : 'page'\"\n    [attr.role]=\"isLink() ? null : 'text'\"\n    [attr.tabindex]=\"isLink() ? null : -1\"\n    [attr.target]=\"external() ? '_blank' : null\"\n    [attr.rel]=\"external() ? 'noreferrer noopener' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"label\" />\n  </a>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AAMH;AACA,SAAS,SAAS,CAAC,KAAa,EAAA;AAC9B,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA,CAAA,CAAG,CAAC;AAChH;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MAWU,aAAa,CAAA;;IAEf,SAAS,GAAG,KAAK,CAAC,GAAG;kFAAC;AAE/B;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;;;;;IAM5B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,mBAAmB,EAAE,aAAa,CAAC;;;;;;AAOnF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAA,CAAA,EAAI,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAA,CAAA,CAAG;uFAAC;uGArB3E,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,kdC9C1B,6JAKA,EAAA,MAAA,EAAA,CAAA,whLAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDyCa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,aAAA,EAGX,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,oCAAoC,EAAE,kBAAkB;AACzD,qBAAA,EAAA,QAAA,EAAA,6JAAA,EAAA,MAAA,EAAA,CAAA,whLAAA,CAAA,EAAA;;;AE5CH;;;;;AAKG;AAQH;;;;;;;;;;;;;;;AAeG;MAQU,iBAAiB,CAAA;;IAEnB,IAAI,GAAG,KAAK,CAAgB,IAAI;6EAAC;;IAGjC,UAAU,GAAG,KAAK,CAAqC,IAAI;mFAAC;;IAG5D,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;;IAGvB,IAAI,GAAG,KAAK,CAAoB,IAAI;6EAAC;AAE3B,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI;+EAAC;IACzE,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI;iFAAC;AAEpD,IAAA,SAAS,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,sBAAsB,GAAG,yBAAyB,CAAC;kFAAC;uGAhBxG,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,mqBCpC9B,m4CAsCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,kPAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAGnC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,qBAAqB,EAAA,aAAA,EAEhB,iBAAiB,CAAC,IAAI,WAC5B,CAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,CAAC,EAAA,IAAA,EACzC,EAAE,KAAK,EAAE,sBAAsB,EAAE,IAAI,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,m4CAAA,EAAA;;;AElC3D;;AAEG;;;;"}
+{"version":3,"file":"ngwr-breadcrumbs.mjs","sources":["../../../projects/lib/breadcrumbs/breadcrumbs.ts","../../../projects/lib/breadcrumbs/breadcrumbs.html","../../../projects/lib/breadcrumbs/breadcrumbs-item.ts","../../../projects/lib/breadcrumbs/breadcrumbs-item.html","../../../projects/lib/breadcrumbs/ngwr-breadcrumbs.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/** Escape a string for use inside a double-quoted CSS `<string>`. */\nfunction cssString(value: string): string {\n  return value.replace(/[\\\\\"]/g, '\\\\$&').replace(/[\\n\\r\\f]/g, char => `\\\\${char.codePointAt(0)!.toString(16)} `);\n}\n\n/**\n * Breadcrumb navigation. Project `<wr-breadcrumbs-item>` children — each keeps\n * its own element and takes `role=\"listitem\"` inside the `<ol>` rather than\n * rendering an `<li>`, separated by the configured glyph (default `/`). The\n * container exposes the `nav[aria-label]` landmark required by WCAG.\n *\n * @example\n * ```html\n * <wr-breadcrumbs>\n *   <wr-breadcrumbs-item routerLink=\"/\">Home</wr-breadcrumbs-item>\n *   <wr-breadcrumbs-item routerLink=\"/docs\">Docs</wr-breadcrumbs-item>\n *   <wr-breadcrumbs-item>Current</wr-breadcrumbs-item>\n * </wr-breadcrumbs>\n *\n * <!-- Custom separator -->\n * <wr-breadcrumbs separator=\"›\">…</wr-breadcrumbs>\n * ```\n *\n * @see https://ngwr.dev/reference/components/breadcrumbs\n */\n@Component({\n  selector: 'wr-breadcrumbs',\n  templateUrl: './breadcrumbs.html',\n  styleUrl: './breadcrumbs.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-breadcrumbs',\n    '[style.--wr-breadcrumbs-separator]': 'separatorValue()',\n  },\n})\nexport class WrBreadcrumbs {\n  /** Separator glyph between items. Any short string. @default '/' */\n  readonly separator = input('/');\n\n  /**\n   * Accessible label for the `nav` landmark. Falls back to `breadcrumbs.label`,\n   * then `'Breadcrumbs'`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  // The English default used to live on the input itself, which made this the one\n  // landmark in the library a catalog could not reach: `wr-anchor` and `wr-sidebar`\n  // announced in Russian on the same page while this one stayed \"Breadcrumbs\", and\n  // the only escape was restating `[ariaLabel]` on every trail.\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'breadcrumbs.label', 'Breadcrumbs');\n\n  // The glyph is WRAPPED in quotes here and unwrapped by `content:` in the\n  // stylesheet, so an unescaped `\"` inside it closes the library's own string\n  // and the rest of the value is parsed as CSS — `/\" url(\"…\") \"` computes to\n  // `content: \"/\" url(\"…\") \"\"`, an image the browser fetches. Escaping is the\n  // whole fix, and it is lossless: a separator that IS a quote still renders.\n  protected readonly separatorValue = computed(() => `\"${cssString(this.separator())}\"`);\n}\n","<nav class=\"wr-breadcrumbs__nav\" [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"wr-breadcrumbs__list\">\n    <ng-content />\n  </ol>\n</nav>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\n/**\n * One row inside `<wr-breadcrumbs>`. The host itself is the row — a\n * `<wr-breadcrumbs-item role=\"listitem\" class=\"wr-breadcrumbs__item\">`\n * inside the parent's `<ol>` — and it contains either a real\n * `<a class=\"wr-breadcrumbs__link\">` (when `[href]` or `[routerLink]` is\n * set) or, for the current crumb, a non-interactive\n * `<a class=\"wr-breadcrumbs__current\" role=\"text\" tabindex=\"-1\"\n * aria-current=\"page\">` (when neither is set — typically the last crumb).\n *\n * @example\n * ```html\n * <wr-breadcrumbs-item icon=\"home\" routerLink=\"/\">Home</wr-breadcrumbs-item>\n * <wr-breadcrumbs-item href=\"https://ngwr.dev\">External</wr-breadcrumbs-item>\n * <wr-breadcrumbs-item>Current page</wr-breadcrumbs-item>\n * ```\n */\n@Component({\n  selector: 'wr-breadcrumbs-item',\n  templateUrl: './breadcrumbs-item.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, RouterLink, WrIcon],\n  host: { class: 'wr-breadcrumbs__item', role: 'listitem' },\n})\nexport class WrBreadcrumbsItem {\n  /** Plain anchor href. Overridden by `routerLink` when both are set. */\n  readonly href = input<string | null>(null);\n\n  /** Angular router target. Anything `RouterLink` accepts (string or `any[]`). */\n  readonly routerLink = input<string | readonly unknown[] | null>(null);\n\n  /** Open external `href` in a new tab. Ignored when `routerLink` is set. @default false */\n  readonly external = input(false);\n\n  /** Optional leading icon rendered inline before the label. @default null */\n  readonly icon = input<WrIconName | null>(null);\n\n  protected readonly isLink = computed(() => this.href() != null || this.routerLink() != null);\n  protected readonly isRouter = computed(() => this.routerLink() != null);\n\n  protected readonly rootClass = computed(() => (this.isLink() ? 'wr-breadcrumbs__link' : 'wr-breadcrumbs__current'));\n}\n","<!--\n  The label lives in a template rather than inside each branch below. A default\n  `<ng-content />` written into two `@if` branches fills only ONE of them — the\n  last in static order — and the other renders empty, with no template error and\n  nothing in the console. This component has been broken exactly that way\n  before; stamping one template from either branch keeps two anchors and one\n  projection.\n-->\n<ng-template #label>\n  @if (icon(); as i) {\n    <wr-icon class=\"wr-breadcrumbs__icon\" [name]=\"i\" />\n  }\n  <ng-content />\n</ng-template>\n\n@if (isRouter()) {\n  <!--\n    Only ROUTER crumbs get `RouterLink`. Applied unconditionally it owns the\n    anchor's `href` and writes null into it whenever `routerLink` is null —\n    which silently turned every `href`-based crumb, a documented input, into\n    text that navigates nowhere.\n  -->\n  <a [class]=\"rootClass()\" [routerLink]=\"routerLink()\">\n    <ng-container [ngTemplateOutlet]=\"label\" />\n  </a>\n} @else {\n  <a\n    [class]=\"rootClass()\"\n    [attr.href]=\"href()\"\n    [attr.aria-current]=\"isLink() ? null : 'page'\"\n    [attr.role]=\"isLink() ? null : 'text'\"\n    [attr.tabindex]=\"isLink() ? null : -1\"\n    [attr.target]=\"external() ? '_blank' : null\"\n    [attr.rel]=\"external() ? 'noreferrer noopener' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"label\" />\n  </a>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AAMH;AACA,SAAS,SAAS,CAAC,KAAa,EAAA;AAC9B,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA,CAAA,CAAG,CAAC;AAChH;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MAWU,aAAa,CAAA;;IAEf,SAAS,GAAG,KAAK,CAAC,GAAG;kFAAC;AAE/B;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;;;;;IAM5B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,mBAAmB,EAAE,aAAa,CAAC;;;;;;AAOnF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAA,CAAA,EAAI,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAA,CAAA,CAAG;uFAAC;uGArB3E,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,kdC9C1B,6JAKA,EAAA,MAAA,EAAA,CAAA,gvLAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDyCa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,aAAA,EAGX,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,oCAAoC,EAAE,kBAAkB;AACzD,qBAAA,EAAA,QAAA,EAAA,6JAAA,EAAA,MAAA,EAAA,CAAA,gvLAAA,CAAA,EAAA;;;AE5CH;;;;;AAKG;AAQH;;;;;;;;;;;;;;;AAeG;MAQU,iBAAiB,CAAA;;IAEnB,IAAI,GAAG,KAAK,CAAgB,IAAI;6EAAC;;IAGjC,UAAU,GAAG,KAAK,CAAqC,IAAI;mFAAC;;IAG5D,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;;IAGvB,IAAI,GAAG,KAAK,CAAoB,IAAI;6EAAC;AAE3B,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI;+EAAC;IACzE,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI;iFAAC;AAEpD,IAAA,SAAS,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,sBAAsB,GAAG,yBAAyB,CAAC;kFAAC;uGAhBxG,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,mqBCpC9B,m4CAsCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,kPAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAGnC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,qBAAqB,EAAA,aAAA,EAEhB,iBAAiB,CAAC,IAAI,WAC5B,CAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,CAAC,EAAA,IAAA,EACzC,EAAE,KAAK,EAAE,sBAAsB,EAAE,IAAI,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,m4CAAA,EAAA;;;AElC3D;;AAEG;;;;"}

package/fesm2022/ngwr-cascader.mjs

@@ -1,3 +1,4 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -6,7 +7,7 @@ import { input, computed, model, output, signal, viewChild, TemplateRef, inject,
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useFormFieldAria } from 'ngwr/form';
 import { useI18nText } from 'ngwr/i18n';
-import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
+import { WR_OVERLAY, WrOutsideClick, wrFollowDirection } from 'ngwr/overlay';
 
 /**
  * @license
@@ -158,6 +159,13 @@ class WrCascader {
     scrollStrategies = inject(ScrollStrategyOptions);
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
+    /**
+     * Ambient reading direction, for the open panel alone — nothing in this
+     * component reads it directly. Optional so a bare `TestBed` needs no
+     * provider; `Directionality` is root-provided anyway, and a missing one
+     * simply reads as `ltr`.
+     */
+    dir = inject(Directionality, { optional: true });
     overlayRef = null;
     constructor() {
         // Same contract as wr-select / wr-dropdown / wr-lightbox: an overlay lives in
@@ -330,6 +338,10 @@ class WrCascader {
             scrollStrategy: this.scrollStrategies.reposition(),
             panelClass: 'wr-cascader-overlay',
         });
+        // The columns cascade inline-wards, and the CDK captured the direction as a
+        // string when this ref was created — so a flip while the panel is open left
+        // the whole cascade running the other way from the page around it.
+        wrFollowDirection(this.overlayRef, this.dir, this.injector);
         const portal = new TemplatePortal(this.panelTpl(), this.vcr);
         this.overlayRef.attach(portal);
         // Move the caret into the panel it just opened. Nothing did, and the pane is
@@ -394,11 +406,11 @@ class WrCascader {
             this.host.nativeElement.querySelector('.wr-cascader__trigger')?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCascader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCascader, isStandalone: true, selector: "wr-cascader", inputs: { clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, changeOnSelect: { classPropertyName: "changeOnSelect", publicName: "changeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, 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  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'tree'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"onTriggerClick()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\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() && !disabled() && !readonly()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      tabindex=\"-1\"\n      (click)=\"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\n    class=\"wr-cascader-panel\"\n    [class.wr-cascader-panel--sm]=\"size() === 'sm'\"\n    [class.wr-cascader-panel--lg]=\"size() === 'lg'\"\n    role=\"tree\"\n    [attr.id]=\"panelId\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <!--\n      tree / group / treeitem, and NOT menu. A combobox's popup may be a listbox,\n      a tree, a grid or a dialog and nothing else, so `aria-haspopup=\"menu\"` on\n      the trigger was an author error \u2014 and a `menu` may own menuitems and\n      groups, never other menus, so the columns were a second one. Neither is\n      visible to axe: `menu` is a valid token for the global `aria-haspopup`, and\n      `aria-required-children` passes a menu-inside-menu (measured against this\n      exact fragment). A tree is what this control has always been \u2014 the value is\n      a PATH, and only `treeitem` supports aria-expanded, aria-level,\n      aria-setsize, aria-posinset and aria-selected at once.\n\n      The columns stay `group` rather than collapsing to `role=\"presentation\"`,\n      which is also axe-clean: the DOM is column-MAJOR, so a flat tree would\n      leave level plus document order as the only structure, and \"Germany\"\n      (level 2) would read as a child of \"Antarctica\" (level 1, the item\n      immediately before it in source order).\n    -->\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul\n        class=\"wr-cascader__col\"\n        role=\"group\"\n        [attr.id]=\"columnId(colIndex)\"\n        [attr.aria-labelledby]=\"parentOptionId(colIndex)\"\n      >\n        @for (opt of col; track opt.value; let optIndex = $index) {\n          <!--\n            `aria-expanded` is exactly `isActiveAt`: `columns()` renders the next\n            column for the active option and only when it has children, so the\n            state can never claim a column that is not on screen \u2014 and\n            `aria-controls` rides that same invariant, which is what makes\n            \"expanded\" refer to something when the expanded content is a SIBLING\n            rather than a descendant. It is emitted only while expanded: a\n            reference to an absent id is a violation with `aria-expanded=\"true\"`\n            and clean while collapsed.\n\n            `aria-level` is load-bearing rather than decorative. The columns are\n            siblings, so the DOM ancestry represents no level at all and every\n            option would read as level 1. `aria-setsize` / `aria-posinset` are\n            not strictly required \u2014 each column IS a complete sibling set \u2014 and\n            are written anyway, because a tree that owns sibling groups is the\n            uncommon shape where browser/AT pairs are known to miscompute both.\n\n            `aria-selected` is written on every option that can be COMMITTED,\n            `false` included, matching `wr-tree`. The alternative a reviewer may\n            prefer: only the selected node, leaning on treeitem's implicit false,\n            which is quieter in a long column and loses the \"this row is\n            selectable\" signal that presence carries.\n          -->\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"treeitem\"\n            [attr.id]=\"optionId(colIndex, optIndex)\"\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            [attr.aria-level]=\"colIndex + 1\"\n            [attr.aria-setsize]=\"$count\"\n            [attr.aria-posinset]=\"optIndex + 1\"\n            [attr.aria-selected]=\"isSelectedAt(colIndex, opt)\"\n            [attr.aria-expanded]=\"opt.children?.length ? isActiveAt(colIndex, opt.value) : null\"\n            [attr.aria-controls]=\"\n              opt.children?.length && isActiveAt(colIndex, opt.value) ? columnId(colIndex + 1) : null\n            \"\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-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader{--wr-cascader-color: var(--wr-color-on-surface);--wr-cascader-bg: var(--wr-color-surface);--wr-cascader-border: var(--wr-color-outline);--wr-cascader-radius: var(--wr-control-radius-md);--wr-cascader-padding-y: var(--wr-control-padding-y-md);--wr-cascader-padding-x: var(--wr-control-padding-x-md);--wr-cascader-font-size: var(--wr-control-font-size-md);--wr-cascader-line-height: var(--wr-control-line-height-md);--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;--wr-cascader-min-width: 12rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-on-surface-muted);--wr-cascader-bg: var(--wr-color-fill)}.wr-cascader--sm{--wr-cascader-radius: var(--wr-control-radius-sm);--wr-cascader-padding-y: var(--wr-control-padding-y-sm);--wr-cascader-padding-x: var(--wr-control-padding-x-sm);--wr-cascader-font-size: var(--wr-control-font-size-sm);--wr-cascader-line-height: var(--wr-control-line-height-sm)}.wr-cascader--lg{--wr-cascader-radius: var(--wr-control-radius-lg);--wr-cascader-padding-y: var(--wr-control-padding-y-lg);--wr-cascader-padding-x: var(--wr-control-padding-x-lg);--wr-cascader-font-size: var(--wr-control-font-size-lg);--wr-cascader-line-height: var(--wr-control-line-height-lg)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:var(--wr-cascader-min-width);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:calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));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:start;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{border-color:var(--wr-color-primary);outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--readonly .wr-cascader__trigger{cursor:default}.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:var(--wr-color-text-muted)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-on-surface-muted);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-on-surface-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-on-surface-rgb),.06);color:var(--wr-color-on-surface)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{--wr-cascader-opt-font: var(--wr-control-font-size-md);--wr-cascader-opt-py: .5rem;display:flex;background:var(--wr-color-surface);border:1px solid var(--wr-color-outline);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-opt-font);overflow:hidden}.wr-cascader-panel--sm{--wr-cascader-opt-font: var(--wr-control-font-size-sm);--wr-cascader-opt-py: .375rem}.wr-cascader-panel--lg{--wr-cascader-opt-font: var(--wr-control-font-size-lg);--wr-cascader-opt-py: .625rem}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto;display:flex;flex-direction:column;gap:.125rem}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-inline-start:1px solid var(--wr-color-outline)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:var(--wr-cascader-opt-py) .625rem;border-radius:var(--wr-border-radius-sm);color:var(--wr-color-on-surface);cursor:pointer;transition:background var(--wr-transition-short)}.wr-cascader-panel .wr-cascader__opt:hover{background:var(--wr-color-hover)}.wr-cascader-panel .wr-cascader__opt--active{background:var(--wr-color-primary-soft);color:var(--wr-color-primary-ink);font-weight:500}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-on-surface-muted);cursor:not-allowed;opacity:var(--wr-disabled-opacity)}.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-on-surface-muted)}[dir=rtl] .wr-cascader-panel .wr-cascader__opt-arrow{transform:scaleX(-1)}@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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCascader, isStandalone: true, selector: "wr-cascader", inputs: { clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, changeOnSelect: { classPropertyName: "changeOnSelect", publicName: "changeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, 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  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'tree'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"onTriggerClick()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\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() && !disabled() && !readonly()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      tabindex=\"-1\"\n      (click)=\"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\n    class=\"wr-cascader-panel\"\n    [class.wr-cascader-panel--sm]=\"size() === 'sm'\"\n    [class.wr-cascader-panel--lg]=\"size() === 'lg'\"\n    role=\"tree\"\n    [attr.id]=\"panelId\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <!--\n      tree / group / treeitem, and NOT menu. A combobox's popup may be a listbox,\n      a tree, a grid or a dialog and nothing else, so `aria-haspopup=\"menu\"` on\n      the trigger was an author error \u2014 and a `menu` may own menuitems and\n      groups, never other menus, so the columns were a second one. Neither is\n      visible to axe: `menu` is a valid token for the global `aria-haspopup`, and\n      `aria-required-children` passes a menu-inside-menu (measured against this\n      exact fragment). A tree is what this control has always been \u2014 the value is\n      a PATH, and only `treeitem` supports aria-expanded, aria-level,\n      aria-setsize, aria-posinset and aria-selected at once.\n\n      The columns stay `group` rather than collapsing to `role=\"presentation\"`,\n      which is also axe-clean: the DOM is column-MAJOR, so a flat tree would\n      leave level plus document order as the only structure, and \"Germany\"\n      (level 2) would read as a child of \"Antarctica\" (level 1, the item\n      immediately before it in source order).\n    -->\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul\n        class=\"wr-cascader__col\"\n        role=\"group\"\n        [attr.id]=\"columnId(colIndex)\"\n        [attr.aria-labelledby]=\"parentOptionId(colIndex)\"\n      >\n        @for (opt of col; track opt.value; let optIndex = $index) {\n          <!--\n            `aria-expanded` is exactly `isActiveAt`: `columns()` renders the next\n            column for the active option and only when it has children, so the\n            state can never claim a column that is not on screen \u2014 and\n            `aria-controls` rides that same invariant, which is what makes\n            \"expanded\" refer to something when the expanded content is a SIBLING\n            rather than a descendant. It is emitted only while expanded: a\n            reference to an absent id is a violation with `aria-expanded=\"true\"`\n            and clean while collapsed.\n\n            `aria-level` is load-bearing rather than decorative. The columns are\n            siblings, so the DOM ancestry represents no level at all and every\n            option would read as level 1. `aria-setsize` / `aria-posinset` are\n            not strictly required \u2014 each column IS a complete sibling set \u2014 and\n            are written anyway, because a tree that owns sibling groups is the\n            uncommon shape where browser/AT pairs are known to miscompute both.\n\n            `aria-selected` is written on every option that can be COMMITTED,\n            `false` included, matching `wr-tree`. The alternative a reviewer may\n            prefer: only the selected node, leaning on treeitem's implicit false,\n            which is quieter in a long column and loses the \"this row is\n            selectable\" signal that presence carries.\n          -->\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"treeitem\"\n            [attr.id]=\"optionId(colIndex, optIndex)\"\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            [attr.aria-level]=\"colIndex + 1\"\n            [attr.aria-setsize]=\"$count\"\n            [attr.aria-posinset]=\"optIndex + 1\"\n            [attr.aria-selected]=\"isSelectedAt(colIndex, opt)\"\n            [attr.aria-expanded]=\"opt.children?.length ? isActiveAt(colIndex, opt.value) : null\"\n            [attr.aria-controls]=\"\n              opt.children?.length && isActiveAt(colIndex, opt.value) ? columnId(colIndex + 1) : null\n            \"\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-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader{--wr-cascader-color: var(--wr-color-on-surface);--wr-cascader-bg: var(--wr-color-surface);--wr-cascader-border: var(--wr-color-outline);--wr-cascader-radius: var(--wr-control-radius-md);--wr-cascader-padding-y: var(--wr-control-padding-y-md);--wr-cascader-padding-x: var(--wr-control-padding-x-md);--wr-cascader-font-size: var(--wr-control-font-size-md);--wr-cascader-line-height: var(--wr-control-line-height-md);--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;--wr-cascader-min-width: 12rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-on-surface-muted);--wr-cascader-bg: var(--wr-color-fill)}.wr-cascader--sm{--wr-cascader-radius: var(--wr-control-radius-sm);--wr-cascader-padding-y: var(--wr-control-padding-y-sm);--wr-cascader-padding-x: var(--wr-control-padding-x-sm);--wr-cascader-font-size: var(--wr-control-font-size-sm);--wr-cascader-line-height: var(--wr-control-line-height-sm)}.wr-cascader--lg{--wr-cascader-radius: var(--wr-control-radius-lg);--wr-cascader-padding-y: var(--wr-control-padding-y-lg);--wr-cascader-padding-x: var(--wr-control-padding-x-lg);--wr-cascader-font-size: var(--wr-control-font-size-lg);--wr-cascader-line-height: var(--wr-control-line-height-lg)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:var(--wr-cascader-min-width);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:calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));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:start;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{border-color:var(--wr-color-primary);outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--readonly .wr-cascader__trigger{cursor:default}.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:var(--wr-color-text-muted)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-on-surface-muted);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-on-surface-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-on-surface-rgb),.06);color:var(--wr-color-on-surface)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{--wr-cascader-opt-font: var(--wr-control-font-size-md);--wr-cascader-opt-py: .5rem;display:flex;background:var(--wr-color-surface);border:1px solid var(--wr-color-outline);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-opt-font);overflow:hidden}.wr-cascader-panel--sm{--wr-cascader-opt-font: var(--wr-control-font-size-sm);--wr-cascader-opt-py: .375rem}.wr-cascader-panel--lg{--wr-cascader-opt-font: var(--wr-control-font-size-lg);--wr-cascader-opt-py: .625rem}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto;display:flex;flex-direction:column;gap:.125rem}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-inline-start:1px solid var(--wr-color-outline)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:var(--wr-cascader-opt-py) .625rem;border-radius:var(--wr-border-radius-sm);color:var(--wr-color-on-surface);cursor:pointer;transition:background var(--wr-transition-short)}.wr-cascader-panel .wr-cascader__opt:hover{background:var(--wr-color-hover)}.wr-cascader-panel .wr-cascader__opt--active{background:var(--wr-color-primary-soft);color:var(--wr-color-primary-ink);font-weight:500}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-on-surface-muted);cursor:not-allowed;opacity:var(--wr-disabled-opacity)}.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-on-surface-muted)}[dir=rtl] .wr-cascader-panel .wr-cascader__opt-arrow{transform:scaleX(-1)}@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.1.6", ngImport: i0, type: WrCascader, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-cascader', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'tree'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"onTriggerClick()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\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() && !disabled() && !readonly()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      tabindex=\"-1\"\n      (click)=\"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\n    class=\"wr-cascader-panel\"\n    [class.wr-cascader-panel--sm]=\"size() === 'sm'\"\n    [class.wr-cascader-panel--lg]=\"size() === 'lg'\"\n    role=\"tree\"\n    [attr.id]=\"panelId\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <!--\n      tree / group / treeitem, and NOT menu. A combobox's popup may be a listbox,\n      a tree, a grid or a dialog and nothing else, so `aria-haspopup=\"menu\"` on\n      the trigger was an author error \u2014 and a `menu` may own menuitems and\n      groups, never other menus, so the columns were a second one. Neither is\n      visible to axe: `menu` is a valid token for the global `aria-haspopup`, and\n      `aria-required-children` passes a menu-inside-menu (measured against this\n      exact fragment). A tree is what this control has always been \u2014 the value is\n      a PATH, and only `treeitem` supports aria-expanded, aria-level,\n      aria-setsize, aria-posinset and aria-selected at once.\n\n      The columns stay `group` rather than collapsing to `role=\"presentation\"`,\n      which is also axe-clean: the DOM is column-MAJOR, so a flat tree would\n      leave level plus document order as the only structure, and \"Germany\"\n      (level 2) would read as a child of \"Antarctica\" (level 1, the item\n      immediately before it in source order).\n    -->\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul\n        class=\"wr-cascader__col\"\n        role=\"group\"\n        [attr.id]=\"columnId(colIndex)\"\n        [attr.aria-labelledby]=\"parentOptionId(colIndex)\"\n      >\n        @for (opt of col; track opt.value; let optIndex = $index) {\n          <!--\n            `aria-expanded` is exactly `isActiveAt`: `columns()` renders the next\n            column for the active option and only when it has children, so the\n            state can never claim a column that is not on screen \u2014 and\n            `aria-controls` rides that same invariant, which is what makes\n            \"expanded\" refer to something when the expanded content is a SIBLING\n            rather than a descendant. It is emitted only while expanded: a\n            reference to an absent id is a violation with `aria-expanded=\"true\"`\n            and clean while collapsed.\n\n            `aria-level` is load-bearing rather than decorative. The columns are\n            siblings, so the DOM ancestry represents no level at all and every\n            option would read as level 1. `aria-setsize` / `aria-posinset` are\n            not strictly required \u2014 each column IS a complete sibling set \u2014 and\n            are written anyway, because a tree that owns sibling groups is the\n            uncommon shape where browser/AT pairs are known to miscompute both.\n\n            `aria-selected` is written on every option that can be COMMITTED,\n            `false` included, matching `wr-tree`. The alternative a reviewer may\n            prefer: only the selected node, leaning on treeitem's implicit false,\n            which is quieter in a long column and loses the \"this row is\n            selectable\" signal that presence carries.\n          -->\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"treeitem\"\n            [attr.id]=\"optionId(colIndex, optIndex)\"\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            [attr.aria-level]=\"colIndex + 1\"\n            [attr.aria-setsize]=\"$count\"\n            [attr.aria-posinset]=\"optIndex + 1\"\n            [attr.aria-selected]=\"isSelectedAt(colIndex, opt)\"\n            [attr.aria-expanded]=\"opt.children?.length ? isActiveAt(colIndex, opt.value) : null\"\n            [attr.aria-controls]=\"\n              opt.children?.length && isActiveAt(colIndex, opt.value) ? columnId(colIndex + 1) : null\n            \"\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-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader{--wr-cascader-color: var(--wr-color-on-surface);--wr-cascader-bg: var(--wr-color-surface);--wr-cascader-border: var(--wr-color-outline);--wr-cascader-radius: var(--wr-control-radius-md);--wr-cascader-padding-y: var(--wr-control-padding-y-md);--wr-cascader-padding-x: var(--wr-control-padding-x-md);--wr-cascader-font-size: var(--wr-control-font-size-md);--wr-cascader-line-height: var(--wr-control-line-height-md);--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;--wr-cascader-min-width: 12rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-on-surface-muted);--wr-cascader-bg: var(--wr-color-fill)}.wr-cascader--sm{--wr-cascader-radius: var(--wr-control-radius-sm);--wr-cascader-padding-y: var(--wr-control-padding-y-sm);--wr-cascader-padding-x: var(--wr-control-padding-x-sm);--wr-cascader-font-size: var(--wr-control-font-size-sm);--wr-cascader-line-height: var(--wr-control-line-height-sm)}.wr-cascader--lg{--wr-cascader-radius: var(--wr-control-radius-lg);--wr-cascader-padding-y: var(--wr-control-padding-y-lg);--wr-cascader-padding-x: var(--wr-control-padding-x-lg);--wr-cascader-font-size: var(--wr-control-font-size-lg);--wr-cascader-line-height: var(--wr-control-line-height-lg)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:var(--wr-cascader-min-width);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:calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));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:start;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{border-color:var(--wr-color-primary);outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--readonly .wr-cascader__trigger{cursor:default}.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:var(--wr-color-text-muted)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-on-surface-muted);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-on-surface-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-on-surface-rgb),.06);color:var(--wr-color-on-surface)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{--wr-cascader-opt-font: var(--wr-control-font-size-md);--wr-cascader-opt-py: .5rem;display:flex;background:var(--wr-color-surface);border:1px solid var(--wr-color-outline);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-opt-font);overflow:hidden}.wr-cascader-panel--sm{--wr-cascader-opt-font: var(--wr-control-font-size-sm);--wr-cascader-opt-py: .375rem}.wr-cascader-panel--lg{--wr-cascader-opt-font: var(--wr-control-font-size-lg);--wr-cascader-opt-py: .625rem}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto;display:flex;flex-direction:column;gap:.125rem}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-inline-start:1px solid var(--wr-color-outline)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:var(--wr-cascader-opt-py) .625rem;border-radius:var(--wr-border-radius-sm);color:var(--wr-color-on-surface);cursor:pointer;transition:background var(--wr-transition-short)}.wr-cascader-panel .wr-cascader__opt:hover{background:var(--wr-color-hover)}.wr-cascader-panel .wr-cascader__opt--active{background:var(--wr-color-primary-soft);color:var(--wr-color-primary-ink);font-weight:500}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-on-surface-muted);cursor:not-allowed;opacity:var(--wr-disabled-opacity)}.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-on-surface-muted)}[dir=rtl] .wr-cascader-panel .wr-cascader__opt-arrow{transform:scaleX(-1)}@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"] }]
+            args: [{ selector: 'wr-cascader', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<button\n  type=\"button\"\n  class=\"wr-cascader__trigger\"\n  role=\"combobox\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'tree'\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"onTriggerClick()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\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() && !disabled() && !readonly()) {\n    <span\n      class=\"wr-cascader__clear\"\n      role=\"button\"\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      tabindex=\"-1\"\n      (click)=\"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\n    class=\"wr-cascader-panel\"\n    [class.wr-cascader-panel--sm]=\"size() === 'sm'\"\n    [class.wr-cascader-panel--lg]=\"size() === 'lg'\"\n    role=\"tree\"\n    [attr.id]=\"panelId\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <!--\n      tree / group / treeitem, and NOT menu. A combobox's popup may be a listbox,\n      a tree, a grid or a dialog and nothing else, so `aria-haspopup=\"menu\"` on\n      the trigger was an author error \u2014 and a `menu` may own menuitems and\n      groups, never other menus, so the columns were a second one. Neither is\n      visible to axe: `menu` is a valid token for the global `aria-haspopup`, and\n      `aria-required-children` passes a menu-inside-menu (measured against this\n      exact fragment). A tree is what this control has always been \u2014 the value is\n      a PATH, and only `treeitem` supports aria-expanded, aria-level,\n      aria-setsize, aria-posinset and aria-selected at once.\n\n      The columns stay `group` rather than collapsing to `role=\"presentation\"`,\n      which is also axe-clean: the DOM is column-MAJOR, so a flat tree would\n      leave level plus document order as the only structure, and \"Germany\"\n      (level 2) would read as a child of \"Antarctica\" (level 1, the item\n      immediately before it in source order).\n    -->\n    @for (col of columns(); track $index; let colIndex = $index) {\n      <ul\n        class=\"wr-cascader__col\"\n        role=\"group\"\n        [attr.id]=\"columnId(colIndex)\"\n        [attr.aria-labelledby]=\"parentOptionId(colIndex)\"\n      >\n        @for (opt of col; track opt.value; let optIndex = $index) {\n          <!--\n            `aria-expanded` is exactly `isActiveAt`: `columns()` renders the next\n            column for the active option and only when it has children, so the\n            state can never claim a column that is not on screen \u2014 and\n            `aria-controls` rides that same invariant, which is what makes\n            \"expanded\" refer to something when the expanded content is a SIBLING\n            rather than a descendant. It is emitted only while expanded: a\n            reference to an absent id is a violation with `aria-expanded=\"true\"`\n            and clean while collapsed.\n\n            `aria-level` is load-bearing rather than decorative. The columns are\n            siblings, so the DOM ancestry represents no level at all and every\n            option would read as level 1. `aria-setsize` / `aria-posinset` are\n            not strictly required \u2014 each column IS a complete sibling set \u2014 and\n            are written anyway, because a tree that owns sibling groups is the\n            uncommon shape where browser/AT pairs are known to miscompute both.\n\n            `aria-selected` is written on every option that can be COMMITTED,\n            `false` included, matching `wr-tree`. The alternative a reviewer may\n            prefer: only the selected node, leaning on treeitem's implicit false,\n            which is quieter in a long column and loses the \"this row is\n            selectable\" signal that presence carries.\n          -->\n          <li\n            class=\"wr-cascader__opt\"\n            role=\"treeitem\"\n            [attr.id]=\"optionId(colIndex, optIndex)\"\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            [attr.aria-level]=\"colIndex + 1\"\n            [attr.aria-setsize]=\"$count\"\n            [attr.aria-posinset]=\"optIndex + 1\"\n            [attr.aria-selected]=\"isSelectedAt(colIndex, opt)\"\n            [attr.aria-expanded]=\"opt.children?.length ? isActiveAt(colIndex, opt.value) : null\"\n            [attr.aria-controls]=\"\n              opt.children?.length && isActiveAt(colIndex, opt.value) ? columnId(colIndex + 1) : null\n            \"\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-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader{--wr-cascader-color: var(--wr-color-on-surface);--wr-cascader-bg: var(--wr-color-surface);--wr-cascader-border: var(--wr-color-outline);--wr-cascader-radius: var(--wr-control-radius-md);--wr-cascader-padding-y: var(--wr-control-padding-y-md);--wr-cascader-padding-x: var(--wr-control-padding-x-md);--wr-cascader-font-size: var(--wr-control-font-size-md);--wr-cascader-line-height: var(--wr-control-line-height-md);--wr-cascader-col-width: 12rem;--wr-cascader-max-height: 16rem;--wr-cascader-min-width: 12rem;display:inline-flex;vertical-align:middle}.wr-cascader--disabled{--wr-cascader-color: var(--wr-color-on-surface-muted);--wr-cascader-bg: var(--wr-color-fill)}.wr-cascader--sm{--wr-cascader-radius: var(--wr-control-radius-sm);--wr-cascader-padding-y: var(--wr-control-padding-y-sm);--wr-cascader-padding-x: var(--wr-control-padding-x-sm);--wr-cascader-font-size: var(--wr-control-font-size-sm);--wr-cascader-line-height: var(--wr-control-line-height-sm)}.wr-cascader--lg{--wr-cascader-radius: var(--wr-control-radius-lg);--wr-cascader-padding-y: var(--wr-control-padding-y-lg);--wr-cascader-padding-x: var(--wr-control-padding-x-lg);--wr-cascader-font-size: var(--wr-control-font-size-lg);--wr-cascader-line-height: var(--wr-control-line-height-lg)}.wr-cascader__trigger{display:inline-flex;align-items:center;gap:.5rem;width:100%;min-width:var(--wr-cascader-min-width);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:calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));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:start;transition:border-color var(--wr-transition-base),box-shadow var(--wr-transition-base)}.wr-cascader__trigger:focus-visible{border-color:var(--wr-color-primary);outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-cascader__trigger:disabled{cursor:not-allowed}.wr-cascader--readonly .wr-cascader__trigger{cursor:default}.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:var(--wr-color-text-muted)}.wr-cascader__chevron{--wr-icon-size: 1rem;flex:0 0 auto;color:var(--wr-color-on-surface-muted);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-on-surface-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.wr-cascader__clear:hover{background:rgba(var(--wr-color-on-surface-rgb),.06);color:var(--wr-color-on-surface)}.wr-cascader-overlay{padding-top:.25rem}.wr-cascader-panel{--wr-cascader-opt-font: var(--wr-control-font-size-md);--wr-cascader-opt-py: .5rem;display:flex;background:var(--wr-color-surface);border:1px solid var(--wr-color-outline);border-radius:var(--wr-border-radius-base);box-shadow:var(--wr-shadow-overlay);font-family:var(--wr-font-family-base);font-size:var(--wr-cascader-opt-font);overflow:hidden}.wr-cascader-panel--sm{--wr-cascader-opt-font: var(--wr-control-font-size-sm);--wr-cascader-opt-py: .375rem}.wr-cascader-panel--lg{--wr-cascader-opt-font: var(--wr-control-font-size-lg);--wr-cascader-opt-py: .625rem}.wr-cascader-panel .wr-cascader__col{list-style:none;margin:0;padding:.25rem;width:var(--wr-cascader-col-width, 12rem);max-height:var(--wr-cascader-max-height, 16rem);overflow-y:auto;display:flex;flex-direction:column;gap:.125rem}.wr-cascader-panel .wr-cascader__col+.wr-cascader__col{border-inline-start:1px solid var(--wr-color-outline)}.wr-cascader-panel .wr-cascader__opt{display:flex;align-items:center;gap:.5rem;padding:var(--wr-cascader-opt-py) .625rem;border-radius:var(--wr-border-radius-sm);color:var(--wr-color-on-surface);cursor:pointer;transition:background var(--wr-transition-short)}.wr-cascader-panel .wr-cascader__opt:hover{background:var(--wr-color-hover)}.wr-cascader-panel .wr-cascader__opt--active{background:var(--wr-color-primary-soft);color:var(--wr-color-primary-ink);font-weight:500}.wr-cascader-panel .wr-cascader__opt--disabled{color:var(--wr-color-on-surface-muted);cursor:not-allowed;opacity:var(--wr-disabled-opacity)}.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-on-surface-muted)}[dir=rtl] .wr-cascader-panel .wr-cascader__opt-arrow{transform:scaleX(-1)}@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: { clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**