ngwr 12.1.0 → 13.0.0

package/fesm2022/ngwr-spotlight-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-spotlight-card.mjs","sources":["../../../projects/lib/spotlight-card/spotlight-card.ts","../../../projects/lib/spotlight-card/spotlight.ts","../../../projects/lib/spotlight-card/ngwr-spotlight-card.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 * Angular adaptation of the SpotlightCard effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/components/spotlight-card\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, ElementRef, inject, input } from '@angular/core';\n\n/**\n * Cursor-tracked spotlight card. A soft radial highlight follows the\n * pointer inside the card; fades in on hover, out on leave.\n *\n * Project any content as children — the spotlight overlay sits behind\n * the projected DOM (via a `::before` pseudo with `pointer-events: none`)\n * so clicks pass through naturally.\n *\n * @example\n * ```html\n * <wr-spotlight-card spotlightColor=\"rgba(120, 180, 255, 0.25)\">\n *   <h3>Hover me</h3>\n * </wr-spotlight-card>\n * ```\n *\n * @see https://www.reactbits.dev/components/spotlight-card\n */\n@Component({\n  selector: 'wr-spotlight-card',\n  template: '<ng-content />',\n  styleUrl: './spotlight-card.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-spotlight-card',\n    '[style.--wr-spotlight-color]': 'spotlightColor()',\n    '[style.--wr-spotlight-radius]': 'radius() + \"%\"',\n    '(mousemove)': 'onMouseMove($event)',\n  },\n})\nexport class WrSpotlightCard {\n  /**\n   * Highlight colour (any CSS colour). When unset, the theme decides:\n   * a dark-ish glow on light surfaces, a light glow on dark.\n   */\n  readonly spotlightColor = input<string | null>(null);\n\n  /** Where the spotlight fades out, as a percentage of the gradient. @default 80 */\n  readonly radius = input(80, { transform: (v: unknown): number => coerceNumberProperty(v, 80) });\n\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  protected onMouseMove(event: MouseEvent): void {\n    const host = this.el.nativeElement;\n    const rect = host.getBoundingClientRect();\n    host.style.setProperty('--wr-spotlight-x', `${event.clientX - rect.left}px`);\n    host.style.setProperty('--wr-spotlight-y', `${event.clientY - rect.top}px`);\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { DestroyRef, Directive, ElementRef, NgZone, inject, input } from '@angular/core';\n\n/**\n * Cursor-follow radial spotlight. Sets the `--wr-spotlight-x` and\n * `--wr-spotlight-y` CSS custom properties on the host based on the\n * pointer position so a `radial-gradient` (or `mask`) in your CSS can\n * follow the cursor.\n *\n * @example\n * ```html\n * <div class=\"card\" wrSpotlight>…</div>\n * ```\n *\n * ```scss\n * .card {\n *   background: radial-gradient(\n *     400px circle at var(--wr-spotlight-x, 50%) var(--wr-spotlight-y, 50%),\n *     rgba(var(--wr-color-primary-rgb), 0.15),\n *     transparent 60%\n *   );\n * }\n * ```\n */\n@Directive({\n  selector: '[wrSpotlight]',\n  host: { '(pointermove)': 'onMove($event)', '(pointerleave)': 'onLeave()' },\n})\nexport class WrSpotlight {\n  /** Optional default coordinates when no pointer is over the host. */\n  readonly resetX = input<string>('50%');\n  readonly resetY = input<string>('50%');\n\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly zone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    const host = this.el.nativeElement;\n    host.style.setProperty('--wr-spotlight-x', this.resetX());\n    host.style.setProperty('--wr-spotlight-y', this.resetY());\n    this.destroyRef.onDestroy(() => {\n      host.style.removeProperty('--wr-spotlight-x');\n      host.style.removeProperty('--wr-spotlight-y');\n    });\n  }\n\n  /** @internal */\n  protected onMove(event: PointerEvent): void {\n    this.zone.runOutsideAngular(() => {\n      const host = this.el.nativeElement;\n      const rect = host.getBoundingClientRect();\n      const x = ((event.clientX - rect.left) / rect.width) * 100;\n      const y = ((event.clientY - rect.top) / rect.height) * 100;\n      host.style.setProperty('--wr-spotlight-x', `${x}%`);\n      host.style.setProperty('--wr-spotlight-y', `${y}%`);\n    });\n  }\n\n  /** @internal */\n  protected onLeave(): void {\n    const host = this.el.nativeElement;\n    host.style.setProperty('--wr-spotlight-x', this.resetX());\n    host.style.setProperty('--wr-spotlight-y', this.resetY());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-spotlight-card.mjs","sources":["../../../projects/lib/spotlight-card/spotlight-card.ts","../../../projects/lib/spotlight-card/spotlight.ts","../../../projects/lib/spotlight-card/ngwr-spotlight-card.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 * Angular adaptation of the SpotlightCard effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/components/spotlight-card\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, ElementRef, inject, input } from '@angular/core';\n\n/**\n * Cursor-tracked spotlight card. A soft radial highlight follows the\n * pointer inside the card; fades in on hover, out on leave.\n *\n * Project any content as children — the spotlight overlay sits behind\n * the projected DOM (via a `::before` pseudo with `pointer-events: none`)\n * so clicks pass through naturally.\n *\n * @example\n * ```html\n * <wr-spotlight-card spotlightColor=\"rgba(120, 180, 255, 0.25)\">\n *   <h3>Hover me</h3>\n * </wr-spotlight-card>\n * ```\n *\n * @see https://www.reactbits.dev/components/spotlight-card\n */\n@Component({\n  selector: 'wr-spotlight-card',\n  template: '<ng-content />',\n  styleUrl: './spotlight-card.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-spotlight-card',\n    '[style.--wr-spotlight-color]': 'spotlightColor()',\n    '[style.--wr-spotlight-radius]': 'radius() + \"%\"',\n    '(mousemove)': 'onMouseMove($event)',\n  },\n})\nexport class WrSpotlightCard {\n  /**\n   * Highlight colour (any CSS colour). When unset, the theme decides:\n   * a dark-ish glow on light surfaces, a light glow on dark.\n   */\n  readonly spotlightColor = input<string | null>(null);\n\n  /** Where the spotlight fades out, as a percentage of the gradient. @default 80 */\n  readonly radius = input(80, { transform: (v: unknown): number => coerceNumberProperty(v, 80) });\n\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  protected onMouseMove(event: MouseEvent): void {\n    const host = this.el.nativeElement;\n    const rect = host.getBoundingClientRect();\n    host.style.setProperty('--wr-spotlight-x', `${event.clientX - rect.left}px`);\n    host.style.setProperty('--wr-spotlight-y', `${event.clientY - rect.top}px`);\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { DestroyRef, Directive, ElementRef, NgZone, inject, input } from '@angular/core';\n\n/**\n * Cursor-follow radial spotlight. Sets the `--wr-spotlight-x` and\n * `--wr-spotlight-y` CSS custom properties on the host based on the\n * pointer position so a `radial-gradient` (or `mask`) in your CSS can\n * follow the cursor.\n *\n * @example\n * ```html\n * <div class=\"card\" wrSpotlight>…</div>\n * ```\n *\n * ```scss\n * .card {\n *   background: radial-gradient(\n *     400px circle at var(--wr-spotlight-x, 50%) var(--wr-spotlight-y, 50%),\n *     rgba(var(--wr-color-primary-rgb), 0.15),\n *     transparent 60%\n *   );\n * }\n * ```\n */\n@Directive({\n  selector: '[wrSpotlight]',\n  host: { '(pointermove)': 'onMove($event)', '(pointerleave)': 'onLeave()' },\n})\nexport class WrSpotlight {\n  /** Optional default coordinates when no pointer is over the host. */\n  readonly resetX = input<string>('50%');\n  readonly resetY = input<string>('50%');\n\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly zone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    const host = this.el.nativeElement;\n    host.style.setProperty('--wr-spotlight-x', this.resetX());\n    host.style.setProperty('--wr-spotlight-y', this.resetY());\n    this.destroyRef.onDestroy(() => {\n      host.style.removeProperty('--wr-spotlight-x');\n      host.style.removeProperty('--wr-spotlight-y');\n    });\n  }\n\n  /** @internal */\n  protected onMove(event: PointerEvent): void {\n    this.zone.runOutsideAngular(() => {\n      const host = this.el.nativeElement;\n      const rect = host.getBoundingClientRect();\n      const x = ((event.clientX - rect.left) / rect.width) * 100;\n      const y = ((event.clientY - rect.top) / rect.height) * 100;\n      host.style.setProperty('--wr-spotlight-x', `${x}%`);\n      host.style.setProperty('--wr-spotlight-y', `${y}%`);\n    });\n  }\n\n  /** @internal */\n  protected onLeave(): void {\n    const host = this.el.nativeElement;\n    host.style.setProperty('--wr-spotlight-x', this.resetX());\n    host.style.setProperty('--wr-spotlight-y', this.resetY());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-star-border.mjs

@@ -52,7 +52,7 @@ class WrStarBorder {
         return parts.join(' ');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStarBorder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:where([class^=wr-],[class*=\" wr-\"]),:where([class^=wr-],[class*=\" wr-\"]):before,:where([class^=wr-],[class*=\" wr-\"]):after{box-sizing:border-box}:root{color-scheme:light;--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-muted-text: #5f6c7d;--wr-color-muted-text-rgb: 95, 108, 125;--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #e21a62;--wr-color-secondary-rgb: 226, 26, 98;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(203.130952381, 23.369047619, 88.0833333333);--wr-color-secondary-darker: rgb(180.2619047619, 20.7380952381, 78.1666666667);--wr-color-secondary-light: rgb(231.0119047619, 46.4880952381, 112.9166666667);--wr-color-secondary-lighter: rgb(233.6428571429, 69.3571428571, 128.5);--wr-color-success: #008800;--wr-color-success-rgb: 0, 136, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 110.5, 0);--wr-color-success-darker: #005500;--wr-color-success-light: rgb(0, 161.5, 0);--wr-color-success-lighter: #00bb00;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #000000;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #dc3137;--wr-color-danger-rgb: 220, 49, 55;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(208.1369294606, 35.3630705394, 41.4253112033);--wr-color-danger-darker: rgb(186.3402489627, 31.6597510373, 37.0871369295);--wr-color-danger-light: rgb(223.7033195021, 70.7966804979, 76.1618257261);--wr-color-danger-lighter: rgb(227.4066390041, 92.5933609959, 97.3236514523);--wr-color-info: #3472d9;--wr-color-info-rgb: 52, 114, 217;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(38.3941908714, 101.0373443983, 205.1058091286);--wr-color-info-darker: rgb(34.3734439834, 90.4564315353, 183.6265560166);--wr-color-info-light: rgb(73.479253112, 128.9190871369, 221.020746888);--wr-color-info-lighter: rgb(94.9585062241, 143.8381742739, 225.0414937759);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #000000;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #6a7683;--wr-color-medium-rgb: 106, 118, 131;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(94.5949367089, 105.3037974684, 116.9050632911);--wr-color-medium-darker: rgb(83.1898734177, 92.6075949367, 102.8101265823);--wr-color-medium-light: rgb(118.1962025316, 130.7278481013, 144.3037974684);--wr-color-medium-lighter: rgb(132.2911392405, 143.5316455696, 155.7088607595);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-disabled-opacity: .6;--wr-focus-ring-width: 2px;--wr-focus-ring-offset: 2px;--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em;--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25)}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-dark-light: rgb(247.5, 249, 251.4);--wr-color-dark-lighter: rgb(251.25, 252, 253.2);--wr-color-dark-dark: rgb(212.7702702703, 221.2162162162, 234.7297297297);--wr-color-dark-darker: rgb(195.5405405405, 207.4324324324, 226.4594594595);--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-light-light: rgb(33.429245283, 41.3466981132, 59.820754717);--wr-color-light-dark: rgb(47.141509434, 58.3066037736, 84.358490566);--wr-color-medium: #6d7682;--wr-color-medium-rgb: 109, 118, 130;--wr-color-medium-contrast: #ffffff;--wr-color-medium-light: rgb(121.4644351464, 130.7092050209, 143.0355648536);--wr-color-medium-lighter: rgb(135.3347280335, 143.6192468619, 154.6652719665);--wr-color-medium-dark: rgb(97.370292887, 105.410041841, 116.129707113);--wr-color-medium-darker: rgb(85.7405857741, 92.820083682, 102.2594142259);--wr-color-muted-text: #9aa6b8;--wr-color-muted-text-rgb: 154, 166, 184;--wr-color-primary: #3567ff;--wr-color-primary-contrast: #ffffff;--wr-color-primary-rgb: 53, 103, 255;--wr-color-primary-light: #547eff;--wr-color-primary-dark: #2848aa;--wr-color-primary-lighter: #7396ff;--wr-color-primary-darker: #183179;--wr-color-success: #23863c;--wr-color-success-contrast: #ffffff;--wr-color-success-rgb: 35, 134, 60;--wr-color-success-light: rgb(40.2810650888, 154.2189349112, 69.0532544379);--wr-color-success-lighter: rgb(45.5621301775, 174.4378698225, 78.1065088757);--wr-color-success-dark: rgb(29.7189349112, 113.7810650888, 50.9467455621);--wr-color-success-darker: rgb(24.4378698225, 93.5621301775, 41.8934911243);--wr-color-warning: #ffcc33;--wr-color-warning-contrast: #000000;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ca4949;--wr-color-danger-contrast: #ffffff;--wr-color-danger-rgb: 202, 73, 73;--wr-color-danger-light: rgb(207.7510638298, 92.7489361702, 92.7489361702);--wr-color-danger-lighter: rgb(213.5021276596, 112.4978723404, 112.4978723404);--wr-color-danger-dark: rgb(193.229787234, 56.270212766, 56.270212766);--wr-color-danger-darker: rgb(173.4808510638, 50.5191489362, 50.5191489362);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark);--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: [".wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStarBorder, decorators: [{
             type: Component,
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[style.--wr-star-border-color]': 'color()',
                         '[style.--wr-star-border-speed]': 'speed() + "s"',
                         '[style.padding]': 'thickness() + "px 0"',
-                    }, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:where([class^=wr-],[class*=\" wr-\"]),:where([class^=wr-],[class*=\" wr-\"]):before,:where([class^=wr-],[class*=\" wr-\"]):after{box-sizing:border-box}:root{color-scheme:light;--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-muted-text: #5f6c7d;--wr-color-muted-text-rgb: 95, 108, 125;--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #e21a62;--wr-color-secondary-rgb: 226, 26, 98;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(203.130952381, 23.369047619, 88.0833333333);--wr-color-secondary-darker: rgb(180.2619047619, 20.7380952381, 78.1666666667);--wr-color-secondary-light: rgb(231.0119047619, 46.4880952381, 112.9166666667);--wr-color-secondary-lighter: rgb(233.6428571429, 69.3571428571, 128.5);--wr-color-success: #008800;--wr-color-success-rgb: 0, 136, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 110.5, 0);--wr-color-success-darker: #005500;--wr-color-success-light: rgb(0, 161.5, 0);--wr-color-success-lighter: #00bb00;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #000000;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #dc3137;--wr-color-danger-rgb: 220, 49, 55;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(208.1369294606, 35.3630705394, 41.4253112033);--wr-color-danger-darker: rgb(186.3402489627, 31.6597510373, 37.0871369295);--wr-color-danger-light: rgb(223.7033195021, 70.7966804979, 76.1618257261);--wr-color-danger-lighter: rgb(227.4066390041, 92.5933609959, 97.3236514523);--wr-color-info: #3472d9;--wr-color-info-rgb: 52, 114, 217;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(38.3941908714, 101.0373443983, 205.1058091286);--wr-color-info-darker: rgb(34.3734439834, 90.4564315353, 183.6265560166);--wr-color-info-light: rgb(73.479253112, 128.9190871369, 221.020746888);--wr-color-info-lighter: rgb(94.9585062241, 143.8381742739, 225.0414937759);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #000000;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #6a7683;--wr-color-medium-rgb: 106, 118, 131;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(94.5949367089, 105.3037974684, 116.9050632911);--wr-color-medium-darker: rgb(83.1898734177, 92.6075949367, 102.8101265823);--wr-color-medium-light: rgb(118.1962025316, 130.7278481013, 144.3037974684);--wr-color-medium-lighter: rgb(132.2911392405, 143.5316455696, 155.7088607595);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-disabled-opacity: .6;--wr-focus-ring-width: 2px;--wr-focus-ring-offset: 2px;--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em;--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25)}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-dark-light: rgb(247.5, 249, 251.4);--wr-color-dark-lighter: rgb(251.25, 252, 253.2);--wr-color-dark-dark: rgb(212.7702702703, 221.2162162162, 234.7297297297);--wr-color-dark-darker: rgb(195.5405405405, 207.4324324324, 226.4594594595);--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-light-light: rgb(33.429245283, 41.3466981132, 59.820754717);--wr-color-light-dark: rgb(47.141509434, 58.3066037736, 84.358490566);--wr-color-medium: #6d7682;--wr-color-medium-rgb: 109, 118, 130;--wr-color-medium-contrast: #ffffff;--wr-color-medium-light: rgb(121.4644351464, 130.7092050209, 143.0355648536);--wr-color-medium-lighter: rgb(135.3347280335, 143.6192468619, 154.6652719665);--wr-color-medium-dark: rgb(97.370292887, 105.410041841, 116.129707113);--wr-color-medium-darker: rgb(85.7405857741, 92.820083682, 102.2594142259);--wr-color-muted-text: #9aa6b8;--wr-color-muted-text-rgb: 154, 166, 184;--wr-color-primary: #3567ff;--wr-color-primary-contrast: #ffffff;--wr-color-primary-rgb: 53, 103, 255;--wr-color-primary-light: #547eff;--wr-color-primary-dark: #2848aa;--wr-color-primary-lighter: #7396ff;--wr-color-primary-darker: #183179;--wr-color-success: #23863c;--wr-color-success-contrast: #ffffff;--wr-color-success-rgb: 35, 134, 60;--wr-color-success-light: rgb(40.2810650888, 154.2189349112, 69.0532544379);--wr-color-success-lighter: rgb(45.5621301775, 174.4378698225, 78.1065088757);--wr-color-success-dark: rgb(29.7189349112, 113.7810650888, 50.9467455621);--wr-color-success-darker: rgb(24.4378698225, 93.5621301775, 41.8934911243);--wr-color-warning: #ffcc33;--wr-color-warning-contrast: #000000;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ca4949;--wr-color-danger-contrast: #ffffff;--wr-color-danger-rgb: 202, 73, 73;--wr-color-danger-light: rgb(207.7510638298, 92.7489361702, 92.7489361702);--wr-color-danger-lighter: rgb(213.5021276596, 112.4978723404, 112.4978723404);--wr-color-danger-dark: rgb(193.229787234, 56.270212766, 56.270212766);--wr-color-danger-darker: rgb(173.4808510638, 50.5191489362, 50.5191489362);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark);--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"] }]
+                    }, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: [".wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rays: [{ type: i0.Input, args: [{ isSignal: true, alias: "rays", required: false }] }] } });
 
 /**

package/fesm2022/ngwr-star-border.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-star-border.mjs","sources":["../../../projects/lib/star-border/star-border.ts","../../../projects/lib/star-border/star-border.html","../../../projects/lib/star-border/ngwr-star-border.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 * Angular adaptation of the StarBorder effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/star-border\n *\n * Extends the original with `mode` (always animating vs hover-only) and\n * `rays` (mirrored pair vs a single ray).\n */\n\nimport { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrStarBorderMode, WrStarBorderRays } from './interfaces';\n\n/**\n * Star border — radial \"comet\" rays orbiting the top and bottom edges of\n * a rounded container. Project any content; it sits on a themed inner\n * panel above the rays.\n *\n * Works as an element or as an attribute on buttons / links.\n *\n * @example\n * ```html\n * <wr-star-border>Star border</wr-star-border>\n * <button wr-star-border mode=\"hover\" rays=\"single\">Hover me</button>\n * ```\n *\n * @see https://ngwr.dev/animations/star-border\n */\n@Component({\n  selector: 'wr-star-border, [wr-star-border]',\n  templateUrl: './star-border.html',\n  styleUrl: './star-border.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.--wr-star-border-color]': 'color()',\n    '[style.--wr-star-border-speed]': 'speed() + \"s\"',\n    '[style.padding]': 'thickness() + \"px 0\"',\n  },\n})\nexport class WrStarBorder {\n  /** Ray colour. When unset, the theme decides: primary on light, white on dark. */\n  readonly color = input<string | null>(null);\n\n  /** Seconds per ray sweep. @default 6 */\n  readonly speed = input(6, { transform: numAttr(6) });\n\n  /** Vertical bleed of the rays past the inner panel, in px. @default 1 */\n  readonly thickness = input(1, { transform: numAttr(1) });\n\n  /** `'infinite'` animates always; `'hover'` only while hovered. @default 'infinite' */\n  readonly mode = input<WrStarBorderMode>('infinite');\n\n  /** `'mirror'` runs rays along both edges; `'single'` only the bottom. @default 'mirror' */\n  readonly rays = input<WrStarBorderRays>('mirror');\n\n  protected readonly classes = (): string => {\n    const parts = ['wr-star-border'];\n    if (this.mode() === 'hover') parts.push('wr-star-border--hover');\n    if (this.rays() === 'single') parts.push('wr-star-border--single');\n    return parts.join(' ');\n  };\n}\n\nexport type { WrStarBorderMode, WrStarBorderRays } from './interfaces';\n","<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;AAWG;AAQH;;;;;;;;;;;;;;AAcG;MAaU,YAAY,CAAA;;IAEd,KAAK,GAAG,KAAK,CAAgB,IAAI;8EAAC;;AAGlC,IAAA,KAAK,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,CAAG;;AAG3C,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,WAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,CAAG;;IAG/C,IAAI,GAAG,KAAK,CAAmB,UAAU;6EAAC;;IAG1C,IAAI,GAAG,KAAK,CAAmB,QAAQ;6EAAC;IAE9B,OAAO,GAAG,MAAa;AACxC,QAAA,MAAM,KAAK,GAAG,CAAC,gBAAgB,CAAC;AAChC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,OAAO;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AAChE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC;AAClE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,IAAA,CAAC;uGArBU,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,+3BC9CzB,wPAGA,EAAA,MAAA,EAAA,CAAA,yjtBAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD2Ca,YAAY,EAAA,UAAA,EAAA,CAAA;kBAZxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kCAAkC,EAAA,aAAA,EAG7B,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,gCAAgC,EAAE,SAAS;AAC3C,wBAAA,gCAAgC,EAAE,eAAe;AACjD,wBAAA,iBAAiB,EAAE,sBAAsB;AAC1C,qBAAA,EAAA,QAAA,EAAA,wPAAA,EAAA,MAAA,EAAA,CAAA,yjtBAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}
+{"version":3,"file":"ngwr-star-border.mjs","sources":["../../../projects/lib/star-border/star-border.ts","../../../projects/lib/star-border/star-border.html","../../../projects/lib/star-border/ngwr-star-border.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 * Angular adaptation of the StarBorder effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/star-border\n *\n * Extends the original with `mode` (always animating vs hover-only) and\n * `rays` (mirrored pair vs a single ray).\n */\n\nimport { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrStarBorderMode, WrStarBorderRays } from './interfaces';\n\n/**\n * Star border — radial \"comet\" rays orbiting the top and bottom edges of\n * a rounded container. Project any content; it sits on a themed inner\n * panel above the rays.\n *\n * Works as an element or as an attribute on buttons / links.\n *\n * @example\n * ```html\n * <wr-star-border>Star border</wr-star-border>\n * <button wr-star-border mode=\"hover\" rays=\"single\">Hover me</button>\n * ```\n *\n * @see https://ngwr.dev/animations/star-border\n */\n@Component({\n  selector: 'wr-star-border, [wr-star-border]',\n  templateUrl: './star-border.html',\n  styleUrl: './star-border.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.--wr-star-border-color]': 'color()',\n    '[style.--wr-star-border-speed]': 'speed() + \"s\"',\n    '[style.padding]': 'thickness() + \"px 0\"',\n  },\n})\nexport class WrStarBorder {\n  /** Ray colour. When unset, the theme decides: primary on light, white on dark. */\n  readonly color = input<string | null>(null);\n\n  /** Seconds per ray sweep. @default 6 */\n  readonly speed = input(6, { transform: numAttr(6) });\n\n  /** Vertical bleed of the rays past the inner panel, in px. @default 1 */\n  readonly thickness = input(1, { transform: numAttr(1) });\n\n  /** `'infinite'` animates always; `'hover'` only while hovered. @default 'infinite' */\n  readonly mode = input<WrStarBorderMode>('infinite');\n\n  /** `'mirror'` runs rays along both edges; `'single'` only the bottom. @default 'mirror' */\n  readonly rays = input<WrStarBorderRays>('mirror');\n\n  protected readonly classes = (): string => {\n    const parts = ['wr-star-border'];\n    if (this.mode() === 'hover') parts.push('wr-star-border--hover');\n    if (this.rays() === 'single') parts.push('wr-star-border--single');\n    return parts.join(' ');\n  };\n}\n\nexport type { WrStarBorderMode, WrStarBorderRays } from './interfaces';\n","<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;AAWG;AAQH;;;;;;;;;;;;;;AAcG;MAaU,YAAY,CAAA;;IAEd,KAAK,GAAG,KAAK,CAAgB,IAAI;8EAAC;;AAGlC,IAAA,KAAK,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,CAAG;;AAG3C,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,WAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,CAAG;;IAG/C,IAAI,GAAG,KAAK,CAAmB,UAAU;6EAAC;;IAG1C,IAAI,GAAG,KAAK,CAAmB,QAAQ;6EAAC;IAE9B,OAAO,GAAG,MAAa;AACxC,QAAA,MAAM,KAAK,GAAG,CAAC,gBAAgB,CAAC;AAChC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,OAAO;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AAChE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC;AAClE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,IAAA,CAAC;uGArBU,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,+3BC9CzB,wPAGA,EAAA,MAAA,EAAA,CAAA,q0DAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD2Ca,YAAY,EAAA,UAAA,EAAA,CAAA;kBAZxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kCAAkC,EAAA,aAAA,EAG7B,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,gCAAgC,EAAE,SAAS;AAC3C,wBAAA,gCAAgC,EAAE,eAAe;AACjD,wBAAA,iBAAiB,EAAE,sBAAsB;AAC1C,qBAAA,EAAA,QAAA,EAAA,wPAAA,EAAA,MAAA,EAAA,CAAA,q0DAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}

package/fesm2022/ngwr-switch.mjs

@@ -2,6 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
 import { input, model, output, computed, ViewEncapsulation, Component } from '@angular/core';
 import { useConfigValue } from 'ngwr/config';
+import { useFormFieldAria } from 'ngwr/form';
 import { randomId } from 'ngwr/utils';
 
 /**
@@ -18,7 +19,10 @@ class WrSwitch {
      */
     ariaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Stable id used to associate the native input with its label. */
+    /**
+     * Stable id used to associate the native input with its label. Lands on the
+     * inner `<input>`; the host never keeps it.
+     */
     id = input(randomId('wr-switch'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
@@ -28,6 +32,20 @@ class WrSwitch {
      * @default false
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Refuse edits while staying focusable and submittable. Bound automatically
+     * from the field's readonly state when used with `[formField]`.
+     *
+     * A native checkbox ignores the `readonly` attribute, so this cancels the
+     * click's activation behaviour instead — which covers Space too, since the key
+     * arrives as a click — and mirrors the state as `aria-readonly`, which role
+     * `switch` supports.
+     *
+     * @default false
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    fieldAria = useFormFieldAria();
     /**
      * Control size — shares the `--wr-control-*` contract. Unset falls back to the
      * `switch.size` app default from `provideWrConfig()`. @default 'md'
@@ -50,23 +68,45 @@ class WrSwitch {
             parts.push('wr-switch--checked');
         if (this.disabled())
             parts.push('wr-switch--disabled');
+        else if (this.readonly())
+            parts.push('wr-switch--readonly');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     // Template handlers
+    /**
+     * Cancel the toggle while readonly. `change` never fires for a click whose
+     * default was prevented, so this is the only guard the pointer and Space paths
+     * need; `onInputChange` keeps its own for a synthetic `change`.
+     */
+    onInputClick(event) {
+        if (this.readonly())
+            event.preventDefault();
+    }
     onInputChange(event) {
+        if (this.readonly()) {
+            // A synthetic `change` cannot be prevented — put the DOM back instead.
+            event.target.checked = this.checked();
+            return;
+        }
         this.checked.set(event.target.checked);
     }
     onInputBlur() {
         this.touch.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrSwitch, isStandalone: true, selector: "wr-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrSwitch, isStandalone: true, selector: "wr-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "class": "classes()", "attr.id": "null" } }, ngImport: i0, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (click)=\"onInputClick($event)\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-switch', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n" }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+            args: [{ selector: 'wr-switch', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        // The `id` input belongs to the native input, not to this element — a static
+                        // `id="x"` would otherwise be written here too and leave the document with
+                        // two elements sharing it, which is what broke `<label for>`.
+                        '[attr.id]': 'null',
+                    }, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (click)=\"onInputClick($event)\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n" }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-switch.mjs","sources":["../../../projects/lib/switch/switch.ts","../../../projects/lib/switch/switch.html","../../../projects/lib/switch/ngwr-switch.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, model, output } from '@angular/core';\nimport type { FormCheckboxControl } from '@angular/forms/signals';\n\nimport { useConfigValue } from 'ngwr/config';\nimport { randomId } from 'ngwr/utils';\n\n/**\n * Boolean toggle with an iOS-style slider.\n *\n * A signal-forms native control: it implements `FormCheckboxControl`, so\n * `[formField]` binds straight to its `checked` model — no\n * `ControlValueAccessor` in between. `[(checked)]` works standalone.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-switch [formField]=\"form.notifications\">Notifications</wr-switch>\n *\n * <!-- standalone two-way binding -->\n * <wr-switch [(checked)]=\"enabled\">Notifications</wr-switch>\n * ```\n *\n * @see https://ngwr.dev/reference/components/switch\n */\nexport type WrSwitchSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-switch',\n  templateUrl: './switch.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrSwitch implements FormCheckboxControl {\n  /**\n   * Accessible name for a switch used WITHOUT projected text. The wrapping\n   * `<label>` names the control whenever content is projected; with none, the\n   * label is empty and the input has no name at all.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Stable id used to associate the native input with its label. */\n  readonly id = input<string>(randomId('wr-switch'));\n\n  /**\n   * Disable the switch. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Control size — shares the `--wr-control-*` contract. Unset falls back to the\n   * `switch.size` app default from `provideWrConfig()`. @default 'md'\n   */\n  readonly size = input<WrSwitchSize | null>(null);\n\n  /** `size`, then the app config, then `md`. @internal */\n  protected readonly resolvedSize = useConfigValue(this.size, c => c.switch?.size, 'md');\n\n  /** On / off state. Bound by `[formField]`, or two-way via `[(checked)]`. */\n  readonly checked = model<boolean>(false);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-switch'];\n    const size = this.resolvedSize();\n    if (size !== 'md') parts.push(`wr-switch--${size}`);\n    if (this.checked()) parts.push('wr-switch--checked');\n    if (this.disabled()) parts.push('wr-switch--disabled');\n    return parts.join(' ');\n  });\n\n  // Template handlers\n\n  protected onInputChange(event: Event): void {\n    this.checked.set((event.target as HTMLInputElement).checked);\n  }\n\n  protected onInputBlur(): void {\n    this.touch.emit();\n  }\n}\n","<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;MAmCU,QAAQ,CAAA;AACnB;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;;AAGtC,IAAA,EAAE,GAAG,KAAK,CAAS,QAAQ,CAAC,WAAW,CAAC;2EAAC;AAElD;;;;;AAKG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEtE;;;AAGG;IACM,IAAI,GAAG,KAAK,CAAsB,IAAI;6EAAC;;AAG7B,IAAA,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC;;IAG7E,OAAO,GAAG,KAAK,CAAU,KAAK;gFAAC;;IAG/B,KAAK,GAAG,MAAM,EAAQ;AAEZ,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;QAChC,IAAI,IAAI,KAAK,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAA,CAAE,CAAC;QACnD,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AACtD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAIQ,IAAA,aAAa,CAAC,KAAY,EAAA;QAClC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;IAC9D;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;uGAnDW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,+xBCxCrB,ihBAqBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDmBa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;+BACE,WAAW,EAAA,aAAA,EAEN,iBAAiB,CAAC,IAAI,QAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,QAAA,EAAA,ihBAAA,EAAA;;;AEtClC;;AAEG;;;;"}
+{"version":3,"file":"ngwr-switch.mjs","sources":["../../../projects/lib/switch/switch.ts","../../../projects/lib/switch/switch.html","../../../projects/lib/switch/ngwr-switch.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, model, output } from '@angular/core';\nimport type { FormCheckboxControl } from '@angular/forms/signals';\n\nimport { useConfigValue } from 'ngwr/config';\nimport { useFormFieldAria } from 'ngwr/form';\nimport { randomId } from 'ngwr/utils';\n\n/**\n * Boolean toggle with an iOS-style slider.\n *\n * A signal-forms native control: it implements `FormCheckboxControl`, so\n * `[formField]` binds straight to its `checked` model — no\n * `ControlValueAccessor` in between. `[(checked)]` works standalone.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-switch [formField]=\"form.notifications\">Notifications</wr-switch>\n *\n * <!-- standalone two-way binding -->\n * <wr-switch [(checked)]=\"enabled\">Notifications</wr-switch>\n * ```\n *\n * @see https://ngwr.dev/reference/components/switch\n */\nexport type WrSwitchSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-switch',\n  templateUrl: './switch.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    // The `id` input belongs to the native input, not to this element — a static\n    // `id=\"x\"` would otherwise be written here too and leave the document with\n    // two elements sharing it, which is what broke `<label for>`.\n    '[attr.id]': 'null',\n  },\n})\nexport class WrSwitch implements FormCheckboxControl {\n  /**\n   * Accessible name for a switch used WITHOUT projected text. The wrapping\n   * `<label>` names the control whenever content is projected; with none, the\n   * label is empty and the input has no name at all.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /**\n   * Stable id used to associate the native input with its label. Lands on the\n   * inner `<input>`; the host never keeps it.\n   */\n  readonly id = input<string>(randomId('wr-switch'));\n\n  /**\n   * Disable the switch. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Refuse edits while staying focusable and submittable. Bound automatically\n   * from the field's readonly state when used with `[formField]`.\n   *\n   * A native checkbox ignores the `readonly` attribute, so this cancels the\n   * click's activation behaviour instead — which covers Space too, since the key\n   * arrives as a click — and mirrors the state as `aria-readonly`, which role\n   * `switch` supports.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** The surrounding `<wr-form-field>`'s error state. @internal */\n  protected readonly fieldAria = useFormFieldAria();\n\n  /**\n   * Control size — shares the `--wr-control-*` contract. Unset falls back to the\n   * `switch.size` app default from `provideWrConfig()`. @default 'md'\n   */\n  readonly size = input<WrSwitchSize | null>(null);\n\n  /** `size`, then the app config, then `md`. @internal */\n  protected readonly resolvedSize = useConfigValue(this.size, c => c.switch?.size, 'md');\n\n  /** On / off state. Bound by `[formField]`, or two-way via `[(checked)]`. */\n  readonly checked = model<boolean>(false);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-switch'];\n    const size = this.resolvedSize();\n    if (size !== 'md') parts.push(`wr-switch--${size}`);\n    if (this.checked()) parts.push('wr-switch--checked');\n    if (this.disabled()) parts.push('wr-switch--disabled');\n    else if (this.readonly()) parts.push('wr-switch--readonly');\n    return parts.join(' ');\n  });\n\n  // Template handlers\n\n  /**\n   * Cancel the toggle while readonly. `change` never fires for a click whose\n   * default was prevented, so this is the only guard the pointer and Space paths\n   * need; `onInputChange` keeps its own for a synthetic `change`.\n   */\n  protected onInputClick(event: Event): void {\n    if (this.readonly()) event.preventDefault();\n  }\n\n  protected onInputChange(event: Event): void {\n    if (this.readonly()) {\n      // A synthetic `change` cannot be prevented — put the DOM back instead.\n      (event.target as HTMLInputElement).checked = this.checked();\n      return;\n    }\n    this.checked.set((event.target as HTMLInputElement).checked);\n  }\n\n  protected onInputBlur(): void {\n    this.touch.emit();\n  }\n}\n","<label class=\"wr-switch__label\" [for]=\"id()\">\n  <input\n    class=\"wr-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (click)=\"onInputClick($event)\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-switch__track\" aria-hidden=\"true\">\n    <span class=\"wr-switch__thumb\"></span>\n  </span>\n\n  <span class=\"wr-switch__text\">\n    <ng-content />\n  </span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;MA0CU,QAAQ,CAAA;AACnB;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;AAE/C;;;AAGG;AACM,IAAA,EAAE,GAAG,KAAK,CAAS,QAAQ,CAAC,WAAW,CAAC;2EAAC;AAElD;;;;;AAKG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEtE;;;;;;;;;;AAUG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAGnD,SAAS,GAAG,gBAAgB,EAAE;AAEjD;;;AAGG;IACM,IAAI,GAAG,KAAK,CAAsB,IAAI;6EAAC;;AAG7B,IAAA,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC;;IAG7E,OAAO,GAAG,KAAK,CAAU,KAAK;gFAAC;;IAG/B,KAAK,GAAG,MAAM,EAAQ;AAEZ,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;QAChC,IAAI,IAAI,KAAK,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAA,CAAE,CAAC;QACnD,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;aACjD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAC3D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAIF;;;;AAIG;AACO,IAAA,YAAY,CAAC,KAAY,EAAA;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IAC7C;AAEU,IAAA,aAAa,CAAC,KAAY,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;;YAElB,KAAK,CAAC,MAA2B,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;YAC3D;QACF;QACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;IAC9D;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;uGArFW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,m7BC/CrB,stBAyBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDsBa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAZpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,aAAA,EAEN,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;;;;AAItB,wBAAA,WAAW,EAAE,MAAM;AACpB,qBAAA,EAAA,QAAA,EAAA,stBAAA,EAAA;;;AE7CH;;AAEG;;;;"}

package/fesm2022/ngwr-table.mjs

@@ -1401,7 +1401,7 @@ class WrTable {
         return this.cellMap().get(String(key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <!-- Disabled with nothing to sweep, the way `wr-transfer` guards its\n                   own select-all. `[checked]` is a one-way binding over a checkbox\n                   that owns its state, and on zero rows `allSelected()` answers\n                   `false` before and after the click \u2014 an unchanged input is never\n                   written back, so the box latched CHECKED over an empty table and\n                   stayed that way when rows returned. -->\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                [disabled]=\"pageRowKeys().length === 0\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.inset-inline-start.px]=\"leftPin(col.key)\"\n            [style.inset-inline-end.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\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                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.inset-inline-start.px]=\"leftPin(col.key)\"\n                  [style.inset-inline-end.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.inset-inline-start.px]=\"leftPin(col.key)\"\n                  [style.inset-inline-end.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n      <!-- Sibling of the row loop rather than its `@empty` branch, and gated on\n           `loading()`. As the `@empty` branch it lived INSIDE `@if (visibleItems())`,\n           which passes a nullish `[items]` straight through \u2014 so the input's own\n           default rendered a header over a blank body with no \"No data\" anywhere,\n           the opposite of what `items`'s docs promise. And the veil is translucent,\n           so on the documented `[items]=\"[]\" [loading]=\"true\"` pair the row read\n           \"No data\" through the spinner. -->\n      @if (!loading() && !renderRows().length) {\n        <tr>\n          <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n        </tr>\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.inset-inline-start.px]=\"leftPin(col.key)\"\n              [style.inset-inline-end.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "searchLabel", "resetLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <!-- Disabled with nothing to sweep, the way `wr-transfer` guards its\n                   own select-all. `[checked]` is a one-way binding over a checkbox\n                   that owns its state, and on zero rows `allSelected()` answers\n                   `false` before and after the click \u2014 an unchanged input is never\n                   written back, so the box latched CHECKED over an empty table and\n                   stayed that way when rows returned. -->\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                [disabled]=\"pageRowKeys().length === 0\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.inset-inline-start.px]=\"leftPin(col.key)\"\n            [style.inset-inline-end.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\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                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.inset-inline-start.px]=\"leftPin(col.key)\"\n                  [style.inset-inline-end.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.inset-inline-start.px]=\"leftPin(col.key)\"\n                  [style.inset-inline-end.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n      <!-- Sibling of the row loop rather than its `@empty` branch, and gated on\n           `loading()`. As the `@empty` branch it lived INSIDE `@if (visibleItems())`,\n           which passes a nullish `[items]` straight through \u2014 so the input's own\n           default rendered a header over a blank body with no \"No data\" anywhere,\n           the opposite of what `items`'s docs promise. And the veil is translucent,\n           so on the documented `[items]=\"[]\" [loading]=\"true\"` pair the row read\n           \"No data\" through the spinner. -->\n      @if (!loading() && !renderRows().length) {\n        <tr>\n          <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n        </tr>\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.inset-inline-start.px]=\"leftPin(col.key)\"\n              [style.inset-inline-end.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "readonly", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "searchLabel", "resetLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTable, decorators: [{
             type: Component,