ngwr 7.2.0 → 8.0.0

package/fesm2022/ngwr-stepper.mjs

@@ -54,10 +54,10 @@ class WrStep {
     stepper = inject(WR_STEPPER);
     isActive = computed(() => this._index() === this.stepper.active(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStep, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-step',
@@ -167,8 +167,8 @@ class WrStepper {
     prev() {
         this.goTo(this.active() - 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: WR_STEPPER,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -176,7 +176,7 @@ class WrStepper {
             },
         ], queries: [{ propertyName: "steps", predicate: WrStep, isSignal: true }], ngImport: i0, template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStepper, decorators: [{
             type: Component,
             args: [{ selector: 'wr-stepper', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {

package/fesm2022/ngwr-storage.mjs

@@ -284,10 +284,10 @@ class WrStorage {
             this.notify(p ? event.key.slice(p.length) : event.key);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStorage, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: WrStorage });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStorage, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: WrStorage });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrStorage, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-switch.mjs

@@ -10,16 +10,6 @@ import { randomId, noop } from 'ngwr/utils';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-/**
- * Boolean toggle with an iOS-style slider. Implements `ControlValueAccessor`.
- *
- * @example
- * ```html
- * <wr-switch [(ngModel)]="enabled">Notifications</wr-switch>
- * ```
- *
- * @see https://ngwr.dev/components/switch
- */
 class WrSwitch {
     /** Stable id used to associate the native input with its label. */
     id = input(randomId('wr-switch'), /* @ts-ignore */
@@ -30,6 +20,9 @@ class WrSwitch {
      * @default false
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     checked = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     disabledFromCva = signal(false, /* @ts-ignore */
@@ -38,6 +31,9 @@ class WrSwitch {
     ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-switch'];
+        const size = this.size();
+        if (size !== 'md')
+            parts.push(`wr-switch--${size}`);
         if (this.checked())
             parts.push('wr-switch--checked');
         if (this.effectiveDisabled())
@@ -69,8 +65,8 @@ class WrSwitch {
     onInputBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSwitch, isStandalone: true, selector: "wr-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrSwitch, isStandalone: true, selector: "wr-switch", inputs: { 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 } }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -79,7 +75,7 @@ class WrSwitch {
             },
         ], 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    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\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.0.2", ngImport: i0, type: WrSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrSwitch, decorators: [{
             type: Component,
             args: [{ selector: 'wr-switch', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {
@@ -89,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                             multi: true,
                         },
                     ], 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    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\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: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { 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 }] }] } });
 
 /**
  * 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, forwardRef, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop, randomId } from 'ngwr/utils';\n\n/**\n * Boolean toggle with an iOS-style slider. Implements `ControlValueAccessor`.\n *\n * @example\n * ```html\n * <wr-switch [(ngModel)]=\"enabled\">Notifications</wr-switch>\n * ```\n *\n * @see https://ngwr.dev/components/switch\n */\n@Component({\n  selector: 'wr-switch',\n  templateUrl: './switch.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrSwitch),\n      multi: true,\n    },\n  ],\n})\nexport class WrSwitch implements ControlValueAccessor {\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. Also set by Angular forms via `setDisabledState`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly checked = signal(false);\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-switch'];\n    if (this.checked()) parts.push('wr-switch--checked');\n    if (this.effectiveDisabled()) parts.push('wr-switch--disabled');\n    return parts.join(' ');\n  });\n\n  private onChange: (value: boolean) => void = noop;\n  private onTouched: () => void = noop;\n\n  // ControlValueAccessor\n\n  writeValue(value: boolean | null): void {\n    this.checked.set(!!value);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Template handlers\n\n  protected onInputChange(event: Event): void {\n    const next = (event.target as HTMLInputElement).checked;\n    this.checked.set(next);\n    this.onChange(next);\n  }\n\n  protected onInputBlur(): void {\n    this.onTouched();\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    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\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":"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"}
+{"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, forwardRef, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop, randomId } from 'ngwr/utils';\n\n/**\n * Boolean toggle with an iOS-style slider. Implements `ControlValueAccessor`.\n *\n * @example\n * ```html\n * <wr-switch [(ngModel)]=\"enabled\">Notifications</wr-switch>\n * ```\n *\n * @see https://ngwr.dev/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  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrSwitch),\n      multi: true,\n    },\n  ],\n})\nexport class WrSwitch implements ControlValueAccessor {\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. Also set by Angular forms via `setDisabledState`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSwitchSize>('md');\n\n  protected readonly checked = signal(false);\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-switch'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-switch--${size}`);\n    if (this.checked()) parts.push('wr-switch--checked');\n    if (this.effectiveDisabled()) parts.push('wr-switch--disabled');\n    return parts.join(' ');\n  });\n\n  private onChange: (value: boolean) => void = noop;\n  private onTouched: () => void = noop;\n\n  // ControlValueAccessor\n\n  writeValue(value: boolean | null): void {\n    this.checked.set(!!value);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Template handlers\n\n  protected onInputChange(event: Event): void {\n    const next = (event.target as HTMLInputElement).checked;\n    this.checked.set(next);\n    this.onChange(next);\n  }\n\n  protected onInputBlur(): void {\n    this.onTouched();\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    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\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":"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"}

package/fesm2022/ngwr-table.mjs

@@ -28,10 +28,10 @@ class WrTableCell {
     /** Column key the template applies to. */
     columnKey = input.required({ ...(ngDevMode ? { debugName: "columnKey" } : /* istanbul ignore next */ {}), alias: 'wrTableCell' });
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrTableCell]',
@@ -90,10 +90,10 @@ class WrTableFilter {
     emitSelected() {
         this.selectionChange.emit(this.items().filter(i => i.selected));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableFilter, decorators: [{
             type: Component,
             args: [{ selector: 'wr-table-filter', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDropdown, WrDropdownMenu], template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
@@ -121,10 +121,10 @@ class WrTableSort {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTableSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableSort, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-table-sort',
@@ -172,6 +172,12 @@ class WrTable {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     /** Show the loading spinner overlay. @default false */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Collapse each row to a labelled card when the table's own box is too narrow
+     * for columns (a container query on its own width, not the viewport). Every
+     * cell shows its column title as a label. @default false
+     */
+    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Two-way bindable sort array. Order in array = application order. */
     sort = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
@@ -253,13 +259,13 @@ class WrTable {
     templateFor(key) {
         return this.cellMap().get(String(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, sort: { classPropertyName: "sort", publicName: "sort", 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 } }, outputs: { sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["items"], outputs: ["selectionChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, sort: { classPropertyName: "sort", publicName: "sort", 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 } }, outputs: { sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\" [attr.data-label]=\"entry.value.title\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["items"], outputs: ["selectionChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTable, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: { class: 'wr-table' }, imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }] } });
+            args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: { class: 'wr-table', '[class.wr-table--responsive]': 'responsive()' }, imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\" [attr.data-label]=\"entry.value.title\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-table.mjs","sources":["../../../projects/lib/table/table-cell.ts","../../../projects/lib/table/table-filter.ts","../../../projects/lib/table/table-filter.html","../../../projects/lib/table/table-sort.ts","../../../projects/lib/table/table.ts","../../../projects/lib/table/table.html","../../../projects/lib/table/ngwr-table.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 { Directive, TemplateRef, inject, input } from '@angular/core';\n\nimport type { WrTableCellContext } from './interfaces';\n\n/**\n * Provide a custom template for a specific column's cells.\n *\n * @example\n * ```html\n * <wr-table [columns]=\"columns\" [items]=\"items\">\n *   <ng-template wrTableCell=\"role\" let-value let-row=\"item\">\n *     <wr-tag [color]=\"value === 'admin' ? 'danger' : 'medium'\">{{ value }}</wr-tag>\n *   </ng-template>\n * </wr-table>\n * ```\n */\n@Directive({\n  selector: '[wrTableCell]',\n})\nexport class WrTableCell {\n  /** Column key the template applies to. */\n  readonly columnKey = input.required<string>({ alias: 'wrTableCell' });\n\n  readonly template = inject<TemplateRef<WrTableCellContext>>(TemplateRef);\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 { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { WrDropdown, WrDropdownMenu } from 'ngwr/dropdown';\n\nimport type { WrTableFilterItem } from './interfaces';\n\n/**\n * Filter dropdown rendered in a filterable column's header.\n *\n * @internal — used internally by `<wr-table>`.\n */\n@Component({\n  selector: 'wr-table-filter',\n  templateUrl: './table-filter.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrDropdown, WrDropdownMenu],\n})\nexport class WrTableFilter {\n  /** Available filter options. */\n  readonly items = input.required<readonly WrTableFilterItem[]>();\n\n  /** Fires whenever the selection changes. */\n  readonly selectionChange = output<readonly WrTableFilterItem[]>();\n\n  protected readonly query = signal('');\n\n  /** Filtered + selection-tracked view of items. */\n  protected readonly visible = computed<WrTableFilterItem[]>(() => {\n    const q = this.query().trim().toLowerCase();\n    const all = this.items();\n    if (!q) return [...all];\n    return all.filter(i => i.title.toLowerCase().includes(q));\n  });\n\n  protected readonly selectedCount = computed(() => this.items().filter(i => i.selected).length);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-table-filter'];\n    if (this.selectedCount() > 0) parts.push('wr-table-filter--active');\n    return parts.join(' ');\n  });\n\n  protected onSearchInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n  }\n\n  protected onToggle(item: WrTableFilterItem): void {\n    item.selected = !item.selected;\n    this.emitSelected();\n  }\n\n  protected onReset(): void {\n    for (const item of this.items()) item.selected = false;\n    this.selectionChange.emit([]);\n  }\n\n  private emitSelected(): void {\n    this.selectionChange.emit(this.items().filter(i => i.selected));\n  }\n}\n","<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\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 { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrTableSortDirection } from './interfaces';\n\n/**\n * Sort indicator rendered in a sortable column's header.\n *\n * @internal — used internally by `<wr-table>`. Parent listens for clicks\n * on the indicator to cycle direction.\n */\n@Component({\n  selector: 'wr-table-sort',\n  template:\n    '<svg class=\"wr-icon__svg wr-table-sort__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 7-7 7 7\"/><path d=\"M12 19V5\"/></svg>',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrTableSort {\n  readonly direction = input<WrTableSortDirection>(null);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-table-sort'];\n    const dir = this.direction();\n    if (dir) parts.push(`wr-table-sort--${dir}`);\n    return parts.join(' ');\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 { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { KeyValuePipe, NgTemplateOutlet } from '@angular/common';\nimport type { TemplateRef } from '@angular/core';\nimport { Component, ViewEncapsulation, computed, contentChildren, input, model, output } from '@angular/core';\n\nimport { WrPagination } from 'ngwr/pagination';\nimport { WrSpinner } from 'ngwr/spinner';\n\nimport type {\n  WrTableCellContext,\n  WrTableColumns,\n  WrTableFilterChange,\n  WrTableFilterItem,\n  WrTableSortState,\n  WrTableSortDirection,\n} from './interfaces';\nimport { WrTableCell } from './table-cell';\nimport { WrTableFilter } from './table-filter';\nimport { WrTableSort } from './table-sort';\n\n/**\n * Data table with sortable / filterable headers and custom cell templates.\n *\n * Columns are defined via the `columns` input (a `Record<key, column>`).\n * Rows are objects whose property names match the column keys. Cells can\n * be customised by projecting an `[wrTableCell]=\"key\"` template.\n *\n * @example\n * ```html\n * <wr-table\n *   [columns]=\"columns\"\n *   [items]=\"rows\"\n *   [(sort)]=\"sort\"\n *   (filterChange)=\"onFilter($event)\"\n * >\n *   <ng-template wrTableCell=\"role\" let-value>\n *     <wr-tag [color]=\"value === 'admin' ? 'danger' : 'medium'\">{{ value }}</wr-tag>\n *   </ng-template>\n * </wr-table>\n * ```\n *\n * @see https://ngwr.dev/components/table\n */\n@Component({\n  selector: 'wr-table',\n  templateUrl: './table.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-table' },\n  imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter],\n})\nexport class WrTable {\n  /** Column definitions, keyed by row property name. */\n  readonly columns = input.required<WrTableColumns>();\n\n  /** Row items. `null`/`undefined` → loading skeleton. */\n  readonly items = input<readonly Record<string, unknown>[] | null | undefined>(null);\n\n  /** Show the loading spinner overlay. @default false */\n  readonly loading = input(false, { transform: coerceBooleanProperty });\n\n  /** Two-way bindable sort array. Order in array = application order. */\n  readonly sort = model<readonly WrTableSortState[]>([]);\n\n  /** Fires whenever a column's filter selection changes. */\n  readonly filterChange = output<WrTableFilterChange>();\n\n  /**\n   * Rows per page. Set to `0` (default) to disable client-side pagination\n   * and render every row at once.\n   */\n  readonly pageSize = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Two-way bindable 1-based current page. */\n  readonly page = model<number>(1);\n\n  /**\n   * Total row count for server-side pagination — when set, the table\n   * shows the pager but does NOT slice `items` (you provide the current\n   * page's slice yourself and react to `(page)` changes).\n   */\n  readonly totalItems = input<number | null>(null);\n\n  /** Total row count derived for the pager (server-mode wins). */\n  protected readonly resolvedTotal = computed<number>(() => {\n    const server = this.totalItems();\n    if (server !== null) return server;\n    return this.items()?.length ?? 0;\n  });\n\n  /** Items visible on the current page (client mode slices; server mode passes through). */\n  protected readonly visibleItems = computed<readonly Record<string, unknown>[] | null | undefined>(() => {\n    const items = this.items();\n    if (!items) return items;\n    const size = this.pageSize();\n    if (size <= 0 || this.totalItems() !== null) return items;\n    const start = (this.page() - 1) * size;\n    return items.slice(start, start + size);\n  });\n\n  /** Show the pager footer only when paging is enabled and rows overflow. */\n  protected readonly showPager = computed<boolean>(() => {\n    const size = this.pageSize();\n    return size > 0 && this.resolvedTotal() > size;\n  });\n\n  private readonly cellTemplates = contentChildren(WrTableCell);\n\n  /** Map of column key → custom template (if provided via `[wrTableCell]`). */\n  protected readonly cellMap = computed(() => {\n    const map = new Map<string, TemplateRef<WrTableCellContext>>();\n    for (const cell of this.cellTemplates()) map.set(cell.columnKey(), cell.template);\n    return map;\n  });\n\n  /** Keep KeyValuePipe in declaration order (comparator that treats all keys as equal). */\n  protected readonly keepOrder = (): number => 0;\n\n  protected directionFor(key: string): WrTableSortDirection {\n    return this.sort().find(s => s.key === key)?.direction ?? null;\n  }\n\n  protected cycleSort(key: string): void {\n    const current = this.directionFor(key);\n    const next: WrTableSortDirection = current === null ? 'asc' : current === 'asc' ? 'desc' : null;\n\n    const list = this.sort().filter(s => s.key !== key);\n    if (next !== null) list.push({ key, direction: next });\n    this.sort.set(list);\n  }\n\n  protected onFilter(key: string, items: readonly WrTableFilterItem[]): void {\n    this.filterChange.emit({ key, items });\n  }\n\n  protected cellContext(item: Record<string, unknown>, key: string, column: unknown): WrTableCellContext {\n    return { $implicit: item[key], item, column: column as WrTableCellContext['column'] };\n  }\n\n  protected getValue(item: Record<string, unknown>, key: unknown): unknown {\n    return item[String(key)];\n  }\n\n  protected templateFor(key: unknown): TemplateRef<WrTableCellContext> | undefined {\n    return this.cellMap().get(String(key));\n  }\n}\n","@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-table.mjs","sources":["../../../projects/lib/table/table-cell.ts","../../../projects/lib/table/table-filter.ts","../../../projects/lib/table/table-filter.html","../../../projects/lib/table/table-sort.ts","../../../projects/lib/table/table.ts","../../../projects/lib/table/table.html","../../../projects/lib/table/ngwr-table.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 { Directive, TemplateRef, inject, input } from '@angular/core';\n\nimport type { WrTableCellContext } from './interfaces';\n\n/**\n * Provide a custom template for a specific column's cells.\n *\n * @example\n * ```html\n * <wr-table [columns]=\"columns\" [items]=\"items\">\n *   <ng-template wrTableCell=\"role\" let-value let-row=\"item\">\n *     <wr-tag [color]=\"value === 'admin' ? 'danger' : 'medium'\">{{ value }}</wr-tag>\n *   </ng-template>\n * </wr-table>\n * ```\n */\n@Directive({\n  selector: '[wrTableCell]',\n})\nexport class WrTableCell {\n  /** Column key the template applies to. */\n  readonly columnKey = input.required<string>({ alias: 'wrTableCell' });\n\n  readonly template = inject<TemplateRef<WrTableCellContext>>(TemplateRef);\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 { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { WrDropdown, WrDropdownMenu } from 'ngwr/dropdown';\n\nimport type { WrTableFilterItem } from './interfaces';\n\n/**\n * Filter dropdown rendered in a filterable column's header.\n *\n * @internal — used internally by `<wr-table>`.\n */\n@Component({\n  selector: 'wr-table-filter',\n  templateUrl: './table-filter.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrDropdown, WrDropdownMenu],\n})\nexport class WrTableFilter {\n  /** Available filter options. */\n  readonly items = input.required<readonly WrTableFilterItem[]>();\n\n  /** Fires whenever the selection changes. */\n  readonly selectionChange = output<readonly WrTableFilterItem[]>();\n\n  protected readonly query = signal('');\n\n  /** Filtered + selection-tracked view of items. */\n  protected readonly visible = computed<WrTableFilterItem[]>(() => {\n    const q = this.query().trim().toLowerCase();\n    const all = this.items();\n    if (!q) return [...all];\n    return all.filter(i => i.title.toLowerCase().includes(q));\n  });\n\n  protected readonly selectedCount = computed(() => this.items().filter(i => i.selected).length);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-table-filter'];\n    if (this.selectedCount() > 0) parts.push('wr-table-filter--active');\n    return parts.join(' ');\n  });\n\n  protected onSearchInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n  }\n\n  protected onToggle(item: WrTableFilterItem): void {\n    item.selected = !item.selected;\n    this.emitSelected();\n  }\n\n  protected onReset(): void {\n    for (const item of this.items()) item.selected = false;\n    this.selectionChange.emit([]);\n  }\n\n  private emitSelected(): void {\n    this.selectionChange.emit(this.items().filter(i => i.selected));\n  }\n}\n","<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\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 { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrTableSortDirection } from './interfaces';\n\n/**\n * Sort indicator rendered in a sortable column's header.\n *\n * @internal — used internally by `<wr-table>`. Parent listens for clicks\n * on the indicator to cycle direction.\n */\n@Component({\n  selector: 'wr-table-sort',\n  template:\n    '<svg class=\"wr-icon__svg wr-table-sort__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m5 12 7-7 7 7\"/><path d=\"M12 19V5\"/></svg>',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrTableSort {\n  readonly direction = input<WrTableSortDirection>(null);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-table-sort'];\n    const dir = this.direction();\n    if (dir) parts.push(`wr-table-sort--${dir}`);\n    return parts.join(' ');\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 { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { KeyValuePipe, NgTemplateOutlet } from '@angular/common';\nimport type { TemplateRef } from '@angular/core';\nimport { Component, ViewEncapsulation, computed, contentChildren, input, model, output } from '@angular/core';\n\nimport { WrPagination } from 'ngwr/pagination';\nimport { WrSpinner } from 'ngwr/spinner';\n\nimport type {\n  WrTableCellContext,\n  WrTableColumns,\n  WrTableFilterChange,\n  WrTableFilterItem,\n  WrTableSortState,\n  WrTableSortDirection,\n} from './interfaces';\nimport { WrTableCell } from './table-cell';\nimport { WrTableFilter } from './table-filter';\nimport { WrTableSort } from './table-sort';\n\n/**\n * Data table with sortable / filterable headers and custom cell templates.\n *\n * Columns are defined via the `columns` input (a `Record<key, column>`).\n * Rows are objects whose property names match the column keys. Cells can\n * be customised by projecting an `[wrTableCell]=\"key\"` template.\n *\n * @example\n * ```html\n * <wr-table\n *   [columns]=\"columns\"\n *   [items]=\"rows\"\n *   [(sort)]=\"sort\"\n *   (filterChange)=\"onFilter($event)\"\n * >\n *   <ng-template wrTableCell=\"role\" let-value>\n *     <wr-tag [color]=\"value === 'admin' ? 'danger' : 'medium'\">{{ value }}</wr-tag>\n *   </ng-template>\n * </wr-table>\n * ```\n *\n * @see https://ngwr.dev/components/table\n */\n@Component({\n  selector: 'wr-table',\n  templateUrl: './table.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-table', '[class.wr-table--responsive]': 'responsive()' },\n  imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter],\n})\nexport class WrTable {\n  /** Column definitions, keyed by row property name. */\n  readonly columns = input.required<WrTableColumns>();\n\n  /** Row items. `null`/`undefined` → loading skeleton. */\n  readonly items = input<readonly Record<string, unknown>[] | null | undefined>(null);\n\n  /** Show the loading spinner overlay. @default false */\n  readonly loading = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Collapse each row to a labelled card when the table's own box is too narrow\n   * for columns (a container query on its own width, not the viewport). Every\n   * cell shows its column title as a label. @default false\n   */\n  readonly responsive = input(false, { transform: coerceBooleanProperty });\n\n  /** Two-way bindable sort array. Order in array = application order. */\n  readonly sort = model<readonly WrTableSortState[]>([]);\n\n  /** Fires whenever a column's filter selection changes. */\n  readonly filterChange = output<WrTableFilterChange>();\n\n  /**\n   * Rows per page. Set to `0` (default) to disable client-side pagination\n   * and render every row at once.\n   */\n  readonly pageSize = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Two-way bindable 1-based current page. */\n  readonly page = model<number>(1);\n\n  /**\n   * Total row count for server-side pagination — when set, the table\n   * shows the pager but does NOT slice `items` (you provide the current\n   * page's slice yourself and react to `(page)` changes).\n   */\n  readonly totalItems = input<number | null>(null);\n\n  /** Total row count derived for the pager (server-mode wins). */\n  protected readonly resolvedTotal = computed<number>(() => {\n    const server = this.totalItems();\n    if (server !== null) return server;\n    return this.items()?.length ?? 0;\n  });\n\n  /** Items visible on the current page (client mode slices; server mode passes through). */\n  protected readonly visibleItems = computed<readonly Record<string, unknown>[] | null | undefined>(() => {\n    const items = this.items();\n    if (!items) return items;\n    const size = this.pageSize();\n    if (size <= 0 || this.totalItems() !== null) return items;\n    const start = (this.page() - 1) * size;\n    return items.slice(start, start + size);\n  });\n\n  /** Show the pager footer only when paging is enabled and rows overflow. */\n  protected readonly showPager = computed<boolean>(() => {\n    const size = this.pageSize();\n    return size > 0 && this.resolvedTotal() > size;\n  });\n\n  private readonly cellTemplates = contentChildren(WrTableCell);\n\n  /** Map of column key → custom template (if provided via `[wrTableCell]`). */\n  protected readonly cellMap = computed(() => {\n    const map = new Map<string, TemplateRef<WrTableCellContext>>();\n    for (const cell of this.cellTemplates()) map.set(cell.columnKey(), cell.template);\n    return map;\n  });\n\n  /** Keep KeyValuePipe in declaration order (comparator that treats all keys as equal). */\n  protected readonly keepOrder = (): number => 0;\n\n  protected directionFor(key: string): WrTableSortDirection {\n    return this.sort().find(s => s.key === key)?.direction ?? null;\n  }\n\n  protected cycleSort(key: string): void {\n    const current = this.directionFor(key);\n    const next: WrTableSortDirection = current === null ? 'asc' : current === 'asc' ? 'desc' : null;\n\n    const list = this.sort().filter(s => s.key !== key);\n    if (next !== null) list.push({ key, direction: next });\n    this.sort.set(list);\n  }\n\n  protected onFilter(key: string, items: readonly WrTableFilterItem[]): void {\n    this.filterChange.emit({ key, items });\n  }\n\n  protected cellContext(item: Record<string, unknown>, key: string, column: unknown): WrTableCellContext {\n    return { $implicit: item[key], item, column: column as WrTableCellContext['column'] };\n  }\n\n  protected getValue(item: Record<string, unknown>, key: unknown): unknown {\n    return item[String(key)];\n  }\n\n  protected templateFor(key: unknown): TemplateRef<WrTableCellContext> | undefined {\n    return this.cellMap().get(String(key));\n  }\n}\n","@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\" [attr.data-label]=\"entry.value.title\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;AAWG;MAIU,WAAW,CAAA;;IAEb,SAAS,GAAG,KAAK,CAAC,QAAQ,gFAAW,KAAK,EAAE,aAAa,EAAA,CAAG;AAE5D,IAAA,QAAQ,GAAG,MAAM,CAAkC,WAAW,CAAC;uGAJ7D,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AAC1B,iBAAA;;;ACzBD;;;;;AAKG;AAQH;;;;AAIG;MAQU,aAAa,CAAA;;IAEf,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAgC;;IAGtD,eAAe,GAAG,MAAM,EAAgC;IAE9C,KAAK,GAAG,MAAM,CAAC,EAAE;8EAAC;;AAGlB,IAAA,OAAO,GAAG,QAAQ,CAAsB,MAAK;AAC9D,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;AAC3C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;AACxB,QAAA,IAAI,CAAC,CAAC;AAAE,YAAA,OAAO,CAAC,GAAG,GAAG,CAAC;QACvB,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC3D,CAAC;gFAAC;IAEiB,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM;sFAAC;AAE3E,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,iBAAiB,CAAC;AACjC,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACnE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEQ,IAAA,aAAa,CAAC,KAAY,EAAA;QAClC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IAC1D;AAEU,IAAA,QAAQ,CAAC,IAAuB,EAAA;AACxC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAC9B,IAAI,CAAC,YAAY,EAAE;IACrB;IAEU,OAAO,GAAA;AACf,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACtD,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC;IAC/B;IAEQ,YAAY,GAAA;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;uGAzCW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzB1B,mlEAkEA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3CY,UAAU,qJAAE,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEzB,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,aAAA,EAEZ,iBAAiB,CAAC,IAAI,QAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,OAAA,EACvB,CAAC,UAAU,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,mlEAAA,EAAA;;;AEvBvC;;;;;AAKG;AAMH;;;;;AAKG;MAQU,WAAW,CAAA;IACb,SAAS,GAAG,KAAK,CAAuB,IAAI;kFAAC;AAEnC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,eAAe,CAAC;AAC/B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;AAC5B,QAAA,IAAI,GAAG;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAA,CAAE,CAAC;AAC5C,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGARS,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,yQAJpB,+QAA+Q,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAItQ,WAAW,EAAA,UAAA,EAAA,CAAA;kBAPvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EACN,+QAA+Q;oBACjR,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;ACvBD;;;;;AAKG;AAsBH;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAQU,OAAO,CAAA;;IAET,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAkB;;IAG1C,KAAK,GAAG,KAAK,CAAwD,IAAI;8EAAC;;IAG1E,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAErE;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG/D,IAAI,GAAG,KAAK,CAA8B,EAAE;6EAAC;;IAG7C,YAAY,GAAG,MAAM,EAAuB;AAErD;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;;IAGnG,IAAI,GAAG,KAAK,CAAS,CAAC;6EAAC;AAEhC;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAgB,IAAI;mFAAC;;AAG7B,IAAA,aAAa,GAAG,QAAQ,CAAS,MAAK;AACvD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;QAChC,IAAI,MAAM,KAAK,IAAI;AAAE,YAAA,OAAO,MAAM;QAClC,OAAO,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,IAAI,CAAC;IAClC,CAAC;sFAAC;;AAGiB,IAAA,YAAY,GAAG,QAAQ,CAAwD,MAAK;AACrG,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,KAAK;AACxB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC5B,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;AAAE,YAAA,OAAO,KAAK;AACzD,QAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,IAAI;QACtC,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACzC,CAAC;qFAAC;;AAGiB,IAAA,SAAS,GAAG,QAAQ,CAAU,MAAK;AACpD,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC5B,OAAO,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;IAChD,CAAC;kFAAC;IAEe,aAAa,GAAG,eAAe,CAAC,WAAW;sFAAC;;AAG1C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,GAAG,GAAG,IAAI,GAAG,EAA2C;AAC9D,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC;AACjF,QAAA,OAAO,GAAG;IACZ,CAAC;gFAAC;;AAGiB,IAAA,SAAS,GAAG,MAAc,CAAC;AAEpC,IAAA,YAAY,CAAC,GAAW,EAAA;QAChC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,SAAS,IAAI,IAAI;IAChE;AAEU,IAAA,SAAS,CAAC,GAAW,EAAA;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;QACtC,MAAM,IAAI,GAAyB,OAAO,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK,KAAK,GAAG,MAAM,GAAG,IAAI;AAE/F,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;QACnD,IAAI,IAAI,KAAK,IAAI;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACtD,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IACrB;IAEU,QAAQ,CAAC,GAAW,EAAE,KAAmC,EAAA;QACjE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;IACxC;AAEU,IAAA,WAAW,CAAC,IAA6B,EAAE,GAAW,EAAE,MAAe,EAAA;AAC/E,QAAA,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAsC,EAAE;IACvF;IAEU,QAAQ,CAAC,IAA6B,EAAE,GAAY,EAAA;AAC5D,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B;AAEU,IAAA,WAAW,CAAC,GAAY,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxC;uGArGW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,IAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,4BAAA,EAAA,cAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EA8D+B,WAAW,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvH9D,4sEAqEA,4CDdY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAgB,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,WAAW,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,wGAAjE,YAAY,EAAA,IAAA,EAAA,UAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAE7B,OAAO,EAAA,UAAA,EAAA,CAAA;kBAPnB,SAAS;+BACE,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,KAAK,EAAE,UAAU,EAAE,8BAA8B,EAAE,cAAc,EAAE,EAAA,OAAA,EAClE,CAAC,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,4sEAAA,EAAA;q+BAgE7C,WAAW,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEvH9D;;AAEG;;;;"}

package/fesm2022/ngwr-tabs.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, viewChild, TemplateRef, inject, DestroyRef, computed, ViewEncapsulation, Component, model, contentChildren, forwardRef } from '@angular/core';
+import { InjectionToken, input, viewChild, TemplateRef, inject, DestroyRef, computed, ViewEncapsulation, Component, model, contentChildren, signal, afterNextRender, forwardRef } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { randomId } from 'ngwr/utils';
@@ -61,10 +61,10 @@ class WrTab {
             this.destroyRef.onDestroy(() => this.parent?.unregister(this.key()));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrTab, isStandalone: true, selector: "wr-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template><ng-content /></ng-template>`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: WrTab, isStandalone: true, selector: "wr-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template><ng-content /></ng-template>`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-tab',
@@ -143,6 +143,34 @@ class WrTabs {
     // Template handlers
     stripRef = viewChild('strip', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stripRef" }] : /* istanbul ignore next */ []));
+    /** Whether the strip is scrolled away from its start / end — drives the edge fades. */
+    canScrollStart = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollStart" }] : /* istanbul ignore next */ []));
+    canScrollEnd = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollEnd" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            this.updateFades();
+            const el = this.stripRef()?.nativeElement;
+            if (!el || typeof ResizeObserver === 'undefined')
+                return;
+            // Re-evaluate when the strip's width changes (e.g. the container narrows
+            // and the tabs start overflowing).
+            const ro = new ResizeObserver(() => this.updateFades());
+            ro.observe(el);
+            destroyRef.onDestroy(() => ro.disconnect());
+        });
+    }
+    /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */
+    updateFades() {
+        const el = this.stripRef()?.nativeElement;
+        if (!el)
+            return;
+        const max = el.scrollWidth - el.clientWidth;
+        this.canScrollStart.set(el.scrollLeft > 1);
+        this.canScrollEnd.set(max > 1 && el.scrollLeft < max - 1);
+    }
     onTabClick(tab) {
         if (tab.disabled())
             return;
@@ -189,25 +217,31 @@ class WrTabs {
         const headerEl = this.stripRef()?.nativeElement.querySelector(`#${CSS.escape(this.headerId(next.key()))}`);
         headerEl?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrTabs, isStandalone: true, selector: "wr-tabs", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { classAttribute: "wr-tabs" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrTabs, isStandalone: true, selector: "wr-tabs", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class.wr-tabs--fade-start": "canScrollStart()", "class.wr-tabs--fade-end": "canScrollEnd()", "class.wr-tabs--sm": "size() === 'sm'", "class.wr-tabs--lg": "size() === 'lg'" }, classAttribute: "wr-tabs" }, providers: [
             {
                 provide: WR_TABS,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
                 useExisting: forwardRef(() => WrTabs),
             },
-        ], queries: [{ propertyName: "tabs", predicate: WrTab, isSignal: true }], viewQueries: [{ propertyName: "stripRef", first: true, predicate: ["strip"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div #strip class=\"wr-tabs__strip\" role=\"tablist\" aria-orientation=\"horizontal\" (keydown)=\"onStripKeydown($event)\">\n  @for (tab of tabs(); track tab.key()) {\n    @if (tab.routerLink(); as link) {\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n      >\n        {{ tab.title() }}\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.aria-controls]=\"panelId(tab.key())\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\"\n        [class.wr-tabs__tab--active]=\"tab === activeTab()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"tab === activeTab()\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"onTabClick(tab)\"\n      >\n        {{ tab.title() }}\n      </button>\n    }\n  }\n</div>\n\n@if (!isRouter() && activeTab(); as tab) {\n  <div\n    class=\"wr-tabs__panel\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    [attr.id]=\"panelId(tab.key())\"\n    [attr.aria-labelledby]=\"headerId(tab.key())\"\n  >\n    <ng-container [ngTemplateOutlet]=\"tab.contentTpl()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "tabs", predicate: WrTab, isSignal: true }], viewQueries: [{ propertyName: "stripRef", first: true, predicate: ["strip"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  #strip\n  class=\"wr-tabs__strip\"\n  role=\"tablist\"\n  aria-orientation=\"horizontal\"\n  (keydown)=\"onStripKeydown($event)\"\n  (scroll)=\"updateFades()\"\n>\n  @for (tab of tabs(); track tab.key()) {\n    @if (tab.routerLink(); as link) {\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n      >\n        {{ tab.title() }}\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.aria-controls]=\"panelId(tab.key())\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\"\n        [class.wr-tabs__tab--active]=\"tab === activeTab()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"tab === activeTab()\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"onTabClick(tab)\"\n      >\n        {{ tab.title() }}\n      </button>\n    }\n  }\n</div>\n\n@if (!isRouter() && activeTab(); as tab) {\n  <div\n    class=\"wr-tabs__panel\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    [attr.id]=\"panelId(tab.key())\"\n    [attr.aria-labelledby]=\"headerId(tab.key())\"\n  >\n    <ng-container [ngTemplateOutlet]=\"tab.contentTpl()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-tabs', encapsulation: ViewEncapsulation.None, host: { class: 'wr-tabs' }, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive], providers: [
+            args: [{ selector: 'wr-tabs', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-tabs',
+                        '[class.wr-tabs--fade-start]': 'canScrollStart()',
+                        '[class.wr-tabs--fade-end]': 'canScrollEnd()',
+                        '[class.wr-tabs--sm]': "size() === 'sm'",
+                        '[class.wr-tabs--lg]': "size() === 'lg'",
+                    }, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive], providers: [
                         {
                             provide: WR_TABS,
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
                             useExisting: forwardRef(() => WrTabs),
                         },
-                    ], template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div #strip class=\"wr-tabs__strip\" role=\"tablist\" aria-orientation=\"horizontal\" (keydown)=\"onStripKeydown($event)\">\n  @for (tab of tabs(); track tab.key()) {\n    @if (tab.routerLink(); as link) {\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n      >\n        {{ tab.title() }}\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.aria-controls]=\"panelId(tab.key())\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\"\n        [class.wr-tabs__tab--active]=\"tab === activeTab()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"tab === activeTab()\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"onTabClick(tab)\"\n      >\n        {{ tab.title() }}\n      </button>\n    }\n  }\n</div>\n\n@if (!isRouter() && activeTab(); as tab) {\n  <div\n    class=\"wr-tabs__panel\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    [attr.id]=\"panelId(tab.key())\"\n    [attr.aria-labelledby]=\"headerId(tab.key())\"\n  >\n    <ng-container [ngTemplateOutlet]=\"tab.contentTpl()\" />\n  </div>\n}\n" }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTab), { isSignal: true }] }], stripRef: [{ type: i0.ViewChild, args: ['strip', { isSignal: true }] }] } });
+                    ], template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div\n  #strip\n  class=\"wr-tabs__strip\"\n  role=\"tablist\"\n  aria-orientation=\"horizontal\"\n  (keydown)=\"onStripKeydown($event)\"\n  (scroll)=\"updateFades()\"\n>\n  @for (tab of tabs(); track tab.key()) {\n    @if (tab.routerLink(); as link) {\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n      >\n        {{ tab.title() }}\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.aria-controls]=\"panelId(tab.key())\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\"\n        [class.wr-tabs__tab--active]=\"tab === activeTab()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"tab === activeTab()\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"onTabClick(tab)\"\n      >\n        {{ tab.title() }}\n      </button>\n    }\n  }\n</div>\n\n@if (!isRouter() && activeTab(); as tab) {\n  <div\n    class=\"wr-tabs__panel\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    [attr.id]=\"panelId(tab.key())\"\n    [attr.aria-labelledby]=\"headerId(tab.key())\"\n  >\n    <ng-container [ngTemplateOutlet]=\"tab.contentTpl()\" />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTab), { isSignal: true }] }], stripRef: [{ type: i0.ViewChild, args: ['strip', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.