ngwr 14.6.0 → 14.8.0

package/fesm2022/ngwr-calendar-heatmap.mjs

@@ -1,8 +1,9 @@
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, inject, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, viewChild, inject, computed, ViewEncapsulation, Component } from '@angular/core';
 import { WR_DATE_LOCALE } from 'ngwr/date';
 import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
+import { useChartTooltip } from 'ngwr/popover';
 
 /**
  * @license
@@ -95,6 +96,14 @@ class WrCalendarHeatmap {
     ...(ngDevMode ? [{ debugName: "emptyColor" }] : /* istanbul ignore next */ []));
     /** Show the weekday + month labels around the grid. @default true */
     showLabels = input(true, { ...(ngDevMode ? { debugName: "showLabels" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Show a tooltip with the day and its count on hover. It is the sentence the
+     * square's `title` carried, so the `title` is written only while this is off —
+     * or the browser would open a second copy a moment later. @default true
+     */
+    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    daysEl = viewChild('days', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "daysEl" }] : /* istanbul ignore next */ []));
     locale = inject(WR_DATE_LOCALE);
     /**
      * Weekday names from the locale rather than a hard-coded English list — the row order is
@@ -184,6 +193,52 @@ class WrCalendarHeatmap {
         return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    /** Each day's position in `cells()`, for the square the pointer lands on. */
+    indexByIso = computed(() => new Map(this.cells().map((cell, index) => [cell.iso, index])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexByIso" }] : /* istanbul ignore next */ []));
+    /**
+     * One tooltip for the whole year, pointing at the hovered day: above its square,
+     * below it when there is no room above, and slid along the viewport edge for the
+     * first and last weeks with the arrow still on the square. A listener on the grid
+     * rather than one per square: a year is 371 of them.
+     *
+     * The box is the square's LAYOUT box rather than its client rect. The hovered square
+     * grows by `:hover` over a transition, and a rect read part way through it would
+     * move the chip by up to a fifth of a square depending on when it was measured;
+     * the scale is centred, so the layout box is the rect's centre and the square's
+     * own size.
+     */
+    tip = useChartTooltip(this.tooltip, index => {
+        const cell = this.cells()[index];
+        // The squares are the container's only children, drawn in `cells()` order.
+        const square = cell ? this.daysEl()?.nativeElement.children.item(index) : null;
+        if (!cell || !(square instanceof HTMLElement))
+            return null;
+        const rect = square.getBoundingClientRect();
+        const width = square.offsetWidth;
+        const height = square.offsetHeight;
+        return {
+            datum: { value: this.cellTitle(cell) },
+            anchor: {
+                x: (rect.left + rect.right - width) / 2,
+                y: (rect.top + rect.bottom - height) / 2,
+                width,
+                height,
+            },
+        };
+    });
+    /**
+     * Which square the pointer is on, from a `mousemove` on the grid. Over the gap
+     * between two squares it is on none, and the tooltip starts to leave.
+     */
+    onCellsPointer(event) {
+        const iso = event.target?.closest('.wr-calendar-heatmap__cell')?.dataset['date'];
+        const index = iso === undefined ? undefined : this.indexByIso().get(iso);
+        if (index === undefined)
+            this.tip.leave(event);
+        else
+            this.tip.enter(index);
+    }
     colorFor(intensity) {
         if (intensity === 0)
             return this.emptyColor();
@@ -202,12 +257,12 @@ class WrCalendarHeatmap {
         return 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCalendarHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCalendarHeatmap, isStandalone: true, selector: "wr-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, weeks: { classPropertyName: "weeks", publicName: "weeks", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, cellGap: { classPropertyName: "cellGap", publicName: "cellGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyColor: { classPropertyName: "emptyColor", publicName: "emptyColor", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-calendar-heatmap" }, ngImport: i0, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCalendarHeatmap, isStandalone: true, selector: "wr-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, weeks: { classPropertyName: "weeks", publicName: "weeks", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, cellGap: { classPropertyName: "cellGap", publicName: "cellGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyColor: { classPropertyName: "emptyColor", publicName: "emptyColor", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-calendar-heatmap" }, viewQueries: [{ propertyName: "daysEl", first: true, predicate: ["days"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div #days class=\"wr-calendar-heatmap__cells\" (mousemove)=\"onCellsPointer($event)\" (mouseleave)=\"tip.leave($event)\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [attr.title]=\"tooltip() ? null : cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCalendarHeatmap, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-calendar-heatmap', encapsulation: ViewEncapsulation.None, host: { class: 'wr-calendar-heatmap' }, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], weeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "weeks", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], cellGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColor", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }] } });
+            args: [{ selector: 'wr-calendar-heatmap', encapsulation: ViewEncapsulation.None, host: { class: 'wr-calendar-heatmap' }, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div #days class=\"wr-calendar-heatmap__cells\" (mousemove)=\"onCellsPointer($event)\" (mouseleave)=\"tip.leave($event)\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [attr.title]=\"tooltip() ? null : cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], weeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "weeks", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], cellGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColor", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], daysEl: [{ type: i0.ViewChild, args: ['days', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-calendar-heatmap.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-calendar-heatmap.mjs","sources":["../../../projects/lib/calendar-heatmap/calendar-heatmap.ts","../../../projects/lib/calendar-heatmap/calendar-heatmap.html","../../../projects/lib/calendar-heatmap/ngwr-calendar-heatmap.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, inject, input } from '@angular/core';\n\nimport { WR_DATE_LOCALE } from 'ngwr/date';\nimport { useI18nFormatter, useI18nText } from 'ngwr/i18n';\n\nimport type { WrHeatmapDatum } from './interfaces';\n\ninterface Cell {\n  readonly iso: string;\n  /** The day as the reader's locale writes it — see `cellTitle`. */\n  readonly date: Date;\n  readonly value: number;\n  readonly intensity: number;\n  readonly week: number;\n  readonly day: number;\n}\n\nfunction toIso(d: Date): string {\n  const y = d.getFullYear();\n  const m = String(d.getMonth() + 1).padStart(2, '0');\n  const day = String(d.getDate()).padStart(2, '0');\n  return `${y}-${m}-${day}`;\n}\n\nfunction parseInput(value: string | Date): Date {\n  return value instanceof Date ? new Date(value) : new Date(`${value}T00:00:00`);\n}\n\n/** Which rows carry a weekday label: three of seven, or they do not fit. */\nconst LABELLED_ROWS = new Set([1, 3, 5]);\n\n/**\n * A day's contribution, with anything non-finite read as `0`.\n *\n * One `NaN` used to flatten the entire rendered window rather than its own day:\n * `Math.max(a, NaN)` is `NaN`, so the data set's maximum became `NaN`, `max > 0`\n * was false, and every cell fell to intensity 0 — a map that reads as a stretch\n * with no activity at all. The bad day also printed the literal text `NaN` in its\n * `title`.\n */\nfunction amount(raw: number): number {\n  return Number.isFinite(raw) ? raw : 0;\n}\n\n/**\n * GitHub-style year-grid heatmap. One column per ISO week, one row per\n * weekday — cells coloured by `value` relative to the data set's max.\n *\n * @example\n * ```html\n * <wr-calendar-heatmap [data]=\"contributions\" />\n * <wr-calendar-heatmap [data]=\"data\" [endDate]=\"today\" [weeks]=\"26\" color=\"#10b981\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/calendar-heatmap\n */\n@Component({\n  selector: 'wr-calendar-heatmap',\n  templateUrl: './calendar-heatmap.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-calendar-heatmap' },\n})\nexport class WrCalendarHeatmap {\n  readonly data = input<readonly WrHeatmapDatum[]>([]);\n\n  /**\n   * Accessible name of the whole grid. Its cells are bare spans whose `title` a screen\n   * reader on a role-less element does not read, so the map used to be several hundred\n   * anonymous nodes with no name. Falls back to `calendarHeatmap.label`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'calendarHeatmap.label', 'Calendar heatmap');\n\n  private readonly cellText = useI18nFormatter('calendarHeatmap.cell', '{{date}}: {{count}}');\n\n  /**\n   * A cell's tooltip, with both halves formatted and the sentence in the catalog.\n   *\n   * It used to be `` `${cell.iso}: ${cell.value}` `` — a raw ISO date beside an\n   * unformatted number, joined by a hard-coded `': '`. Three things were wrong\n   * at once and none of them are visible from the template: `2026-09-10` is not\n   * how most of the world writes a date, `1234` is not how every locale groups\n   * digits (`ar-SA` does not even use these ones), and the separator and order\n   * were frozen into a shape a translator could not reach.\n   *\n   * Both halves go through `Intl` on the SAME locale the rest of the component\n   * resolves — `WR_DATE_LOCALE`, which since v14 follows Angular's `LOCALE_ID`.\n   * The key ships as `{{date}}: {{count}}` everywhere, so nothing reorders today\n   * and every locale can.\n   */\n  protected cellTitle(cell: { readonly date: Date; readonly value: number }): string {\n    return this.cellText({\n      date: new Intl.DateTimeFormat(this.locale, { dateStyle: 'medium' }).format(cell.date),\n      count: new Intl.NumberFormat(this.locale).format(cell.value),\n    });\n  }\n\n  /** Last day to render. @default today */\n  readonly endDate = input<string | Date | null>(null);\n\n  /** Number of weeks (columns) to render. @default 53 */\n  readonly weeks = input(53, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 53)) });\n\n  /** Cell side in CSS pixels. @default 11 */\n  readonly cellSize = input(11, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 11)) });\n\n  /** Pixel gap between cells. @default 2 */\n  readonly cellGap = input(2, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 2)) });\n\n  /** Cell fill colour at full intensity. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Background colour for zero-value days. @default light tint */\n  readonly emptyColor = input<string>('rgba(var(--wr-color-light-rgb), 0.5)');\n\n  /** Show the weekday + month labels around the grid. @default true */\n  readonly showLabels = input(true, { transform: coerceBooleanProperty });\n\n  private readonly locale = inject(WR_DATE_LOCALE);\n\n  /**\n   * Weekday names from the locale rather than a hard-coded English list — the row order is\n   * Sunday-first, matching the grid's own alignment, so 7 Jan 2024 (a Sunday) is the\n   * reference. Rows without a label stay blank on purpose: seven labels do not fit.\n   */\n  protected readonly weekdayLabels = computed<readonly string[]>(() => {\n    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });\n    const sunday = new Date(2024, 0, 7);\n    return Array.from({ length: 7 }, (_, row) => {\n      if (!LABELLED_ROWS.has(row)) return '';\n      const day = new Date(sunday);\n      day.setDate(sunday.getDate() + row);\n      return formatter.format(day);\n    });\n  });\n\n  private readonly monthNames = computed<readonly string[]>(() => {\n    const formatter = new Intl.DateTimeFormat(this.locale, { month: 'short' });\n    return Array.from({ length: 12 }, (_, month) => formatter.format(new Date(2024, month, 15)));\n  });\n\n  protected readonly cells = computed<readonly Cell[]>(() => {\n    const end = this.endDate() ? parseInput(this.endDate()!) : new Date();\n    end.setHours(0, 0, 0, 0);\n    const weeks = this.weeks();\n    const totalDays = weeks * 7;\n\n    // Build value lookup.\n    const map = new Map<string, number>();\n    for (const d of this.data()) {\n      const iso = toIso(parseInput(d.date));\n      map.set(iso, (map.get(iso) ?? 0) + amount(d.value));\n    }\n    const max = [...map.values()].reduce((a, b) => Math.max(a, b), 0);\n\n    // Walk backwards from end day; arrange into columns by week, rows by weekday.\n    const out: Cell[] = [];\n    const start = new Date(end);\n    start.setDate(end.getDate() - totalDays + 1);\n    // Align start so column 0 begins on a Sunday (matches GitHub).\n    start.setDate(start.getDate() - start.getDay());\n\n    const cursor = new Date(start);\n    let column = 0;\n    while (cursor <= end) {\n      for (let row = 0; row < 7; row++) {\n        const iso = toIso(cursor);\n        const value = map.get(iso) ?? 0;\n        // Clamped at the BOTTOM as well as the top. A negative value produced a\n        // negative intensity, which is not zero — so `colorFor` painted it in\n        // the accent colour and `opacityFor` put it in the lightest band,\n        // rendering a day of negative activity exactly like a day of light\n        // activity, and unlike the empty day it should have matched. The scale\n        // has no negative half; the honest floor is \"nothing\".\n        const intensity = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n        out.push({ iso, date: new Date(cursor), value, intensity, week: column, day: row });\n        cursor.setDate(cursor.getDate() + 1);\n      }\n      column++;\n    }\n    return out;\n  });\n\n  protected readonly monthLabels = computed(() => {\n    // Pull the first cell of each visible month → render a label centered\n    // over its column.\n    const cells = this.cells();\n    const seen = new Set<string>();\n    return cells\n      .filter(cell => {\n        const date = new Date(`${cell.iso}T00:00:00`);\n        if (date.getDate() !== 1) return false;\n        const key = `${date.getFullYear()}-${date.getMonth()}`;\n        if (seen.has(key)) return false;\n        seen.add(key);\n        return true;\n      })\n      .map(cell => ({\n        label: this.monthNames()[new Date(`${cell.iso}T00:00:00`).getMonth()],\n        week: cell.week,\n      }));\n  });\n\n  protected readonly columnCount = computed(() => {\n    const cells = this.cells();\n    return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;\n  });\n\n  protected colorFor(intensity: number): string {\n    if (intensity === 0) return this.emptyColor();\n    return this.color();\n  }\n\n  protected opacityFor(intensity: number): number {\n    if (intensity === 0) return 1;\n    // 4 levels — match the GitHub aesthetic.\n    if (intensity < 0.25) return 0.25;\n    if (intensity < 0.5) return 0.5;\n    if (intensity < 0.75) return 0.75;\n    return 1;\n  }\n}\n\nexport type { WrHeatmapDatum } from './interfaces';\n","<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-calendar-heatmap.mjs","sources":["../../../projects/lib/calendar-heatmap/calendar-heatmap.ts","../../../projects/lib/calendar-heatmap/calendar-heatmap.html","../../../projects/lib/calendar-heatmap/ngwr-calendar-heatmap.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, type ElementRef, ViewEncapsulation, computed, inject, input, viewChild } from '@angular/core';\n\nimport { WR_DATE_LOCALE } from 'ngwr/date';\nimport { useI18nFormatter, useI18nText } from 'ngwr/i18n';\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport type { WrHeatmapDatum } from './interfaces';\n\ninterface Cell {\n  readonly iso: string;\n  /** The day as the reader's locale writes it — see `cellTitle`. */\n  readonly date: Date;\n  readonly value: number;\n  readonly intensity: number;\n  readonly week: number;\n  readonly day: number;\n}\n\nfunction toIso(d: Date): string {\n  const y = d.getFullYear();\n  const m = String(d.getMonth() + 1).padStart(2, '0');\n  const day = String(d.getDate()).padStart(2, '0');\n  return `${y}-${m}-${day}`;\n}\n\nfunction parseInput(value: string | Date): Date {\n  return value instanceof Date ? new Date(value) : new Date(`${value}T00:00:00`);\n}\n\n/** Which rows carry a weekday label: three of seven, or they do not fit. */\nconst LABELLED_ROWS = new Set([1, 3, 5]);\n\n/**\n * A day's contribution, with anything non-finite read as `0`.\n *\n * One `NaN` used to flatten the entire rendered window rather than its own day:\n * `Math.max(a, NaN)` is `NaN`, so the data set's maximum became `NaN`, `max > 0`\n * was false, and every cell fell to intensity 0 — a map that reads as a stretch\n * with no activity at all. The bad day also printed the literal text `NaN` in its\n * `title`.\n */\nfunction amount(raw: number): number {\n  return Number.isFinite(raw) ? raw : 0;\n}\n\n/**\n * GitHub-style year-grid heatmap. One column per ISO week, one row per\n * weekday — cells coloured by `value` relative to the data set's max.\n *\n * @example\n * ```html\n * <wr-calendar-heatmap [data]=\"contributions\" />\n * <wr-calendar-heatmap [data]=\"data\" [endDate]=\"today\" [weeks]=\"26\" color=\"#10b981\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/calendar-heatmap\n */\n@Component({\n  selector: 'wr-calendar-heatmap',\n  templateUrl: './calendar-heatmap.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-calendar-heatmap' },\n})\nexport class WrCalendarHeatmap {\n  readonly data = input<readonly WrHeatmapDatum[]>([]);\n\n  /**\n   * Accessible name of the whole grid. Its cells are bare spans whose `title` a screen\n   * reader on a role-less element does not read, so the map used to be several hundred\n   * anonymous nodes with no name. Falls back to `calendarHeatmap.label`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'calendarHeatmap.label', 'Calendar heatmap');\n\n  private readonly cellText = useI18nFormatter('calendarHeatmap.cell', '{{date}}: {{count}}');\n\n  /**\n   * A cell's tooltip, with both halves formatted and the sentence in the catalog.\n   *\n   * It used to be `` `${cell.iso}: ${cell.value}` `` — a raw ISO date beside an\n   * unformatted number, joined by a hard-coded `': '`. Three things were wrong\n   * at once and none of them are visible from the template: `2026-09-10` is not\n   * how most of the world writes a date, `1234` is not how every locale groups\n   * digits (`ar-SA` does not even use these ones), and the separator and order\n   * were frozen into a shape a translator could not reach.\n   *\n   * Both halves go through `Intl` on the SAME locale the rest of the component\n   * resolves — `WR_DATE_LOCALE`, which since v14 follows Angular's `LOCALE_ID`.\n   * The key ships as `{{date}}: {{count}}` everywhere, so nothing reorders today\n   * and every locale can.\n   */\n  protected cellTitle(cell: { readonly date: Date; readonly value: number }): string {\n    return this.cellText({\n      date: new Intl.DateTimeFormat(this.locale, { dateStyle: 'medium' }).format(cell.date),\n      count: new Intl.NumberFormat(this.locale).format(cell.value),\n    });\n  }\n\n  /** Last day to render. @default today */\n  readonly endDate = input<string | Date | null>(null);\n\n  /** Number of weeks (columns) to render. @default 53 */\n  readonly weeks = input(53, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 53)) });\n\n  /** Cell side in CSS pixels. @default 11 */\n  readonly cellSize = input(11, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 11)) });\n\n  /** Pixel gap between cells. @default 2 */\n  readonly cellGap = input(2, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 2)) });\n\n  /** Cell fill colour at full intensity. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Background colour for zero-value days. @default light tint */\n  readonly emptyColor = input<string>('rgba(var(--wr-color-light-rgb), 0.5)');\n\n  /** Show the weekday + month labels around the grid. @default true */\n  readonly showLabels = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Show a tooltip with the day and its count on hover. It is the sentence the\n   * square's `title` carried, so the `title` is written only while this is off —\n   * or the browser would open a second copy a moment later. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  private readonly daysEl = viewChild<ElementRef<HTMLElement>>('days');\n\n  private readonly locale = inject(WR_DATE_LOCALE);\n\n  /**\n   * Weekday names from the locale rather than a hard-coded English list — the row order is\n   * Sunday-first, matching the grid's own alignment, so 7 Jan 2024 (a Sunday) is the\n   * reference. Rows without a label stay blank on purpose: seven labels do not fit.\n   */\n  protected readonly weekdayLabels = computed<readonly string[]>(() => {\n    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });\n    const sunday = new Date(2024, 0, 7);\n    return Array.from({ length: 7 }, (_, row) => {\n      if (!LABELLED_ROWS.has(row)) return '';\n      const day = new Date(sunday);\n      day.setDate(sunday.getDate() + row);\n      return formatter.format(day);\n    });\n  });\n\n  private readonly monthNames = computed<readonly string[]>(() => {\n    const formatter = new Intl.DateTimeFormat(this.locale, { month: 'short' });\n    return Array.from({ length: 12 }, (_, month) => formatter.format(new Date(2024, month, 15)));\n  });\n\n  protected readonly cells = computed<readonly Cell[]>(() => {\n    const end = this.endDate() ? parseInput(this.endDate()!) : new Date();\n    end.setHours(0, 0, 0, 0);\n    const weeks = this.weeks();\n    const totalDays = weeks * 7;\n\n    // Build value lookup.\n    const map = new Map<string, number>();\n    for (const d of this.data()) {\n      const iso = toIso(parseInput(d.date));\n      map.set(iso, (map.get(iso) ?? 0) + amount(d.value));\n    }\n    const max = [...map.values()].reduce((a, b) => Math.max(a, b), 0);\n\n    // Walk backwards from end day; arrange into columns by week, rows by weekday.\n    const out: Cell[] = [];\n    const start = new Date(end);\n    start.setDate(end.getDate() - totalDays + 1);\n    // Align start so column 0 begins on a Sunday (matches GitHub).\n    start.setDate(start.getDate() - start.getDay());\n\n    const cursor = new Date(start);\n    let column = 0;\n    while (cursor <= end) {\n      for (let row = 0; row < 7; row++) {\n        const iso = toIso(cursor);\n        const value = map.get(iso) ?? 0;\n        // Clamped at the BOTTOM as well as the top. A negative value produced a\n        // negative intensity, which is not zero — so `colorFor` painted it in\n        // the accent colour and `opacityFor` put it in the lightest band,\n        // rendering a day of negative activity exactly like a day of light\n        // activity, and unlike the empty day it should have matched. The scale\n        // has no negative half; the honest floor is \"nothing\".\n        const intensity = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n        out.push({ iso, date: new Date(cursor), value, intensity, week: column, day: row });\n        cursor.setDate(cursor.getDate() + 1);\n      }\n      column++;\n    }\n    return out;\n  });\n\n  protected readonly monthLabels = computed(() => {\n    // Pull the first cell of each visible month → render a label centered\n    // over its column.\n    const cells = this.cells();\n    const seen = new Set<string>();\n    return cells\n      .filter(cell => {\n        const date = new Date(`${cell.iso}T00:00:00`);\n        if (date.getDate() !== 1) return false;\n        const key = `${date.getFullYear()}-${date.getMonth()}`;\n        if (seen.has(key)) return false;\n        seen.add(key);\n        return true;\n      })\n      .map(cell => ({\n        label: this.monthNames()[new Date(`${cell.iso}T00:00:00`).getMonth()],\n        week: cell.week,\n      }));\n  });\n\n  protected readonly columnCount = computed(() => {\n    const cells = this.cells();\n    return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;\n  });\n\n  /** Each day's position in `cells()`, for the square the pointer lands on. */\n  private readonly indexByIso = computed(() => new Map(this.cells().map((cell, index) => [cell.iso, index])));\n\n  /**\n   * One tooltip for the whole year, pointing at the hovered day: above its square,\n   * below it when there is no room above, and slid along the viewport edge for the\n   * first and last weeks with the arrow still on the square. A listener on the grid\n   * rather than one per square: a year is 371 of them.\n   *\n   * The box is the square's LAYOUT box rather than its client rect. The hovered square\n   * grows by `:hover` over a transition, and a rect read part way through it would\n   * move the chip by up to a fifth of a square depending on when it was measured;\n   * the scale is centred, so the layout box is the rect's centre and the square's\n   * own size.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const cell = this.cells()[index];\n    // The squares are the container's only children, drawn in `cells()` order.\n    const square = cell ? this.daysEl()?.nativeElement.children.item(index) : null;\n    if (!cell || !(square instanceof HTMLElement)) return null;\n    const rect = square.getBoundingClientRect();\n    const width = square.offsetWidth;\n    const height = square.offsetHeight;\n    return {\n      datum: { value: this.cellTitle(cell) },\n      anchor: {\n        x: (rect.left + rect.right - width) / 2,\n        y: (rect.top + rect.bottom - height) / 2,\n        width,\n        height,\n      },\n    };\n  });\n\n  /**\n   * Which square the pointer is on, from a `mousemove` on the grid. Over the gap\n   * between two squares it is on none, and the tooltip starts to leave.\n   */\n  protected onCellsPointer(event: MouseEvent): void {\n    const iso = (event.target as Element | null)?.closest<HTMLElement>('.wr-calendar-heatmap__cell')?.dataset['date'];\n    const index = iso === undefined ? undefined : this.indexByIso().get(iso);\n    if (index === undefined) this.tip.leave(event);\n    else this.tip.enter(index);\n  }\n\n  protected colorFor(intensity: number): string {\n    if (intensity === 0) return this.emptyColor();\n    return this.color();\n  }\n\n  protected opacityFor(intensity: number): number {\n    if (intensity === 0) return 1;\n    // 4 levels — match the GitHub aesthetic.\n    if (intensity < 0.25) return 0.25;\n    if (intensity < 0.5) return 0.5;\n    if (intensity < 0.75) return 0.75;\n    return 1;\n  }\n}\n\nexport type { WrHeatmapDatum } from './interfaces';\n","<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div #days class=\"wr-calendar-heatmap__cells\" (mousemove)=\"onCellsPointer($event)\" (mouseleave)=\"tip.leave($event)\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [attr.title]=\"tooltip() ? null : cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-cascader.mjs

@@ -406,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-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 });
+    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-grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 0;vertical-align:middle}.wr-cascader:after{content:\"\";flex:0 0 0;width:var(--wr-cascader-min-width);max-width:100%;height:0}.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:0;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}@media(pointer:coarse){.wr-cascader__trigger{overflow-y:clip}}.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;min-height:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:var(--wr-color-text-muted)}.wr-cascader__chevron{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{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;margin-block:-1rem;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)}@media(pointer:coarse){.wr-cascader__clear{position:relative}.wr-cascader__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:2rem;min-height:2rem;transform:translate(-50%,-50%)}}.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{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-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-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"] }]
+            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-grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 0;vertical-align:middle}.wr-cascader:after{content:\"\";flex:0 0 0;width:var(--wr-cascader-min-width);max-width:100%;height:0}.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:0;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}@media(pointer:coarse){.wr-cascader__trigger{overflow-y:clip}}.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;min-height:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wr-cascader__placeholder{color:var(--wr-color-text-muted)}.wr-cascader__chevron{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{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;margin-block:-1rem;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)}@media(pointer:coarse){.wr-cascader__clear{position:relative}.wr-cascader__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:2rem;min-height:2rem;transform:translate(-50%,-50%)}}.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{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-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 }] }] } });
 
 /**