ngwr 13.0.1 → 14.0.1

package/fesm2022/ngwr-tabs.mjs

@@ -2,7 +2,6 @@ import { Directionality } from '@angular/cdk/bidi';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, viewChild, TemplateRef, inject, DestroyRef, computed, ViewEncapsulation, Component, model, contentChildren, signal, effect, afterNextRender, forwardRef } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { randomId } from 'ngwr/utils';
 
@@ -20,6 +19,19 @@ import { randomId } from 'ngwr/utils';
  */
 const WR_TABS = new InjectionToken('WR_TABS');
 
+/**
+ * @license
+ *
+ * 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
+ */
+/**
+ * Token a `<wr-tabs>` reads to find out whether router tabs are usable. Provided
+ * by the `WrTabsRouting` directive from `ngwr/tabs/router`; absent by default,
+ * which is what keeps `@angular/router` out of a content-only strip.
+ */
+const WR_TABS_ROUTING = new InjectionToken('WR_TABS_ROUTING');
+
 /**
  * @license
  *
@@ -33,7 +45,9 @@ const WR_TABS = new InjectionToken('WR_TABS');
  *   panel when this tab is active.
  * - **Router tab** — set `routerLink` and the tab becomes a link; the
  *   parent skips its content panel and the consumer drops a
- *   `<router-outlet>` below the tab strip.
+ *   `<router-outlet>` below the tab strip. Router mode needs the
+ *   `WrTabsRouting` directive from `ngwr/tabs/router` in the same
+ *   `imports: []`; without it a strip carrying a `routerLink` throws.
  */
 class WrTab {
     /** Visible label on the tab strip. */
@@ -55,8 +69,48 @@ class WrTab {
     ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
     parent = inject(WR_TABS, { optional: true });
     destroyRef = inject(DestroyRef);
+    /**
+     * The routing adapter published by `WrTabsRouting` on the parent `<wr-tabs>`
+     * element. A `<wr-tab>` is DECLARED inside `<wr-tabs>` in the consumer's
+     * template — content projection moves where it renders, not where it injects
+     * — so the parent's element injector is this one's, the same walk that
+     * resolves `WR_TABS` above.
+     */
+    routing = inject(WR_TABS_ROUTING, { optional: true });
     isRouter = computed(() => this.routerLink() !== null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRouter" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved href for a router tab — `null` for a content tab, and for a
+     * disabled one, which is how the anchor stops navigating at all.
+     * @internal
+     */
+    routerHref = computed(() => {
+        const link = this.routerLink();
+        if (link === null || this.disabled())
+            return null;
+        return this.routing?.href(link) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerHref" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the current route selects this tab. The strip publishes it as BOTH
+     * `aria-selected` and the `--active` class, off this one read, so the
+     * announced selection and the painted one cannot drift apart.
+     * @internal
+     */
+    routerActive = computed(() => {
+        const link = this.routerLink();
+        if (link === null || this.disabled())
+            return false;
+        return this.routing?.isActive(link) ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerActive" }] : /* istanbul ignore next */ []));
+    /** Hand a click on this tab's anchor to the routing adapter. @internal */
+    navigate(event) {
+        const link = this.routerLink();
+        if (link === null || this.disabled())
+            return;
+        this.routing?.navigate(link, event);
+    }
     constructor() {
         if (this.parent) {
             // Both calls run with the input signals still on their defaults — a
@@ -67,10 +121,10 @@ class WrTab {
             this.destroyRef.onDestroy(() => this.parent?.unregister(this.key()));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.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: { properties: { "style.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.1.5", ngImport: i0, type: WrTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", 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: { properties: { "style.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.1.4", ngImport: i0, type: WrTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-tab',
@@ -122,7 +176,10 @@ function idFragment(key) {
  *   active-tab panel automatically.
  * - **Router** — any child with `routerLink` switches the whole strip
  *   into router mode; the parent skips its panel so the consumer can
- *   drop a `<router-outlet>` after it.
+ *   drop a `<router-outlet>` after it. That mode needs the `WrTabsRouting`
+ *   directive from `ngwr/tabs/router` alongside `WrTabs` in `imports: []`
+ *   — the strip itself names no `@angular/router` symbol, which is what
+ *   keeps a content-only strip free of the router.
  *
  * @example
  * ```html
@@ -132,7 +189,7 @@ function idFragment(key) {
  *   <wr-tab key="two" title="Two">Second panel</wr-tab>
  * </wr-tabs>
  *
- * <!-- router tabs -->
+ * <!-- router tabs: imports: [WrTabs, WrTab, WrTabsRouting] -->
  * <wr-tabs>
  *   <wr-tab title="Overview" routerLink="overview" />
  *   <wr-tab title="Details" routerLink="details" />
@@ -161,8 +218,31 @@ class WrTabs {
      */
     isRtl = computed(() => this.dir?.valueSignal() === 'rtl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
-    /** When any child has a routerLink, the whole strip switches to router mode. */
-    isRouter = computed(() => this.tabs().some(t => t.routerLink() !== null), /* @ts-ignore */
+    /**
+     * The routing adapter, when `WrTabsRouting` from `ngwr/tabs/router` is in the
+     * consumer's `imports`. `null` is the default and the whole point: the strip
+     * has no `@angular/router` import of its own, so a content-only tab strip
+     * costs no router bytes.
+     */
+    routing = inject(WR_TABS_ROUTING, { optional: true });
+    /**
+     * When any child has a routerLink, the whole strip switches to router mode.
+     *
+     * Throws rather than degrading when the adapter is missing. Falling back to
+     * content mode would render the tabs as `<button>`s that navigate nowhere and
+     * open an empty panel — a strip that looks right and does nothing, with the
+     * one missing import unnamed. The route is what selects a tab here, so there
+     * is no half of this that still works.
+     */
+    isRouter = computed(() => {
+        const isRouter = this.tabs().some(t => t.routerLink() !== null);
+        if (isRouter && !this.routing) {
+            throw new Error('<wr-tabs>: a <wr-tab> sets `routerLink`, but no routing adapter is provided. ' +
+                "Add `WrTabsRouting` from 'ngwr/tabs/router' to the `imports` of the component that " +
+                'declares this strip.');
+        }
+        return isRouter;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRouter" }] : /* istanbul ignore next */ []));
     /** Content-mode: the tab whose key matches `active()` (or the first tab if none yet). */
     activeTab = computed(() => {
@@ -246,6 +326,14 @@ class WrTabs {
         if (!this.isRouter())
             this.activate(tab.key());
     }
+    /**
+     * Click on a router tab's anchor. The anchor carries a real `href`, so a
+     * modified or middle click is left alone and the browser opens it the way it
+     * opens any link; only a plain left click is turned into a navigation.
+     */
+    onRouterTabClick(tab, event) {
+        tab.navigate(event);
+    }
     /** Per-instance prefix, so keys only have to be unique within one group. */
     uid = ++tabsUid;
     /** Header id for `aria-labelledby` on the panel. @internal */
@@ -311,16 +399,16 @@ 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.1.4", ngImport: i0, type: WrTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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\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      <!--\n        `aria-selected` comes off the SAME `routerLinkActive` that paints `--active`,\n        exported as `rla`, so the announced state and the painted one can never\n        disagree. Without it a `role=\"tablist\"` shipped with no tab selected in any of\n        them: the route decides here, and the class it paints is invisible to\n        assistive tech.\n      -->\n      <a\n        #rla=\"routerLinkActive\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"tab.disabled() ? null : link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"rla.isActive\"\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() && !tab.disabled() ? 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() !== null) {\n      <!--\n        `aria-selected` and `--active` come off the SAME `tab.routerActive()`, so the\n        announced state and the painted one can never disagree. Without it a\n        `role=\"tablist\"` shipped with no tab selected in any of them: the route decides\n        here, and the class it paints is invisible to assistive tech.\n\n        A real `href` rather than a `[routerLink]`: the directive would drag\n        `@angular/router` into every content-only strip as well (see `WR_TABS_ROUTING`).\n        The href, the active match and the click all come from the adapter the\n        `ngwr/tabs/router` directive publishes, which is `RouterLink` doing the work.\n      -->\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.href]=\"tab.routerHref()\"\n        [class.wr-tabs__tab--active]=\"tab.routerActive()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"tab.routerActive()\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n        (click)=\"onRouterTabClick(tab, $event)\"\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() && !tab.disabled() ? 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTabs, decorators: [{
             type: Component,
             args: [{ selector: 'wr-tabs', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-tabs',
@@ -328,18 +416,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.wr-tabs--fade-end]': 'canScrollEnd()',
                         '[class.wr-tabs--sm]': "size() === 'sm'",
                         '[class.wr-tabs--lg]': "size() === 'lg'",
-                    }, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive], providers: [
+                    }, imports: [NgTemplateOutlet], 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\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      <!--\n        `aria-selected` comes off the SAME `routerLinkActive` that paints `--active`,\n        exported as `rla`, so the announced state and the painted one can never\n        disagree. Without it a `role=\"tablist\"` shipped with no tab selected in any of\n        them: the route decides here, and the class it paints is invisible to\n        assistive tech.\n      -->\n      <a\n        #rla=\"routerLinkActive\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"tab.disabled() ? null : link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"rla.isActive\"\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() && !tab.disabled() ? 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" }]
+                    ], 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() !== null) {\n      <!--\n        `aria-selected` and `--active` come off the SAME `tab.routerActive()`, so the\n        announced state and the painted one can never disagree. Without it a\n        `role=\"tablist\"` shipped with no tab selected in any of them: the route decides\n        here, and the class it paints is invisible to assistive tech.\n\n        A real `href` rather than a `[routerLink]`: the directive would drag\n        `@angular/router` into every content-only strip as well (see `WR_TABS_ROUTING`).\n        The href, the active match and the click all come from the adapter the\n        `ngwr/tabs/router` directive publishes, which is `RouterLink` doing the work.\n      -->\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.href]=\"tab.routerHref()\"\n        [class.wr-tabs__tab--active]=\"tab.routerActive()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"tab.routerActive()\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n        (click)=\"onRouterTabClick(tab, $event)\"\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() && !tab.disabled() ? 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.
  */
 
-export { WR_TABS, WrTab, WrTabs };
+export { WR_TABS, WR_TABS_ROUTING, WrTab, WrTabs };
 //# sourceMappingURL=ngwr-tabs.mjs.map

package/fesm2022/ngwr-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-tabs.mjs","sources":["../../../projects/lib/tabs/tokens/tabs.token.ts","../../../projects/lib/tabs/tab.ts","../../../projects/lib/tabs/tabs.ts","../../../projects/lib/tabs/tabs.html","../../../projects/lib/tabs/ngwr-tabs.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a `<wr-tab>` uses to talk to its parent `<wr-tabs>`.\n *\n * @internal\n */\nexport interface WrTabsContext {\n  /** Currently active tab key (component-managed only). */\n  readonly active: Signal<string | null>;\n  /** Activate a tab by key (component-managed only). */\n  activate(key: string): void;\n  /** Register a child tab so the parent can pick a default. */\n  register(tab: { key: string; routerLink: unknown }): void;\n  /** Unregister on destroy. */\n  unregister(key: string): void;\n}\n\n/**\n * Token a `<wr-tab>` injects to register itself with — and read the active\n * key from — its parent `<wr-tabs>` host.\n *\n * @internal\n */\nexport const WR_TABS = new InjectionToken<WrTabsContext>('WR_TABS');\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 } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  TemplateRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_TABS } from './tokens';\n\n/**\n * Single tab. Two modes, decided by inputs:\n *\n * - **Content tab** — projected children render in the parent's content\n *   panel when this tab is active.\n * - **Router tab** — set `routerLink` and the tab becomes a link; the\n *   parent skips its content panel and the consumer drops a\n *   `<router-outlet>` below the tab strip.\n */\n@Component({\n  selector: 'wr-tab',\n  template: `<ng-template><ng-content /></ng-template>`,\n  encapsulation: ViewEncapsulation.None,\n  // A BOUND display rather than a static `style` attribute: Angular writes a\n  // binding through `style.setProperty`, which no CSP governs, while a real\n  // `style=\"…\"` attribute is refused under `style-src 'self'` — and this host\n  // would then lay out an empty box in the middle of the content.\n  host: { '[style.display]': \"'none'\" },\n})\nexport class WrTab {\n  /** Visible label on the tab strip. */\n  readonly title = input.required<string>();\n\n  /**\n   * Stable identifier used by the parent to track the active tab.\n   * Auto-generated if omitted.\n   */\n  readonly key = input<string>(randomId('wr-tab'));\n\n  /** Router target — when set, the tab becomes a `[routerLink]` link. */\n  readonly routerLink = input<string | readonly string[] | null>(null);\n\n  /** Disable the tab. */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Tab content template; portaled into the parent's panel area. @internal */\n  readonly contentTpl = viewChild.required(TemplateRef);\n\n  private readonly parent = inject(WR_TABS, { optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly isRouter = computed(() => this.routerLink() !== null);\n\n  constructor() {\n    if (this.parent) {\n      // Both calls run with the input signals still on their defaults — a\n      // constructor is too early for `key()` to be the consumer's value. The\n      // parent tracks tabs through `contentChildren` and seeds `active` from\n      // there; these stay as the declared lifecycle contract.\n      this.parent.register({ key: this.key(), routerLink: this.routerLink() });\n      this.destroyRef.onDestroy(() => this.parent?.unregister(this.key()));\n    }\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 { Directionality } from '@angular/cdk/bidi';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  contentChildren,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { WrTab } from './tab';\nimport { WR_TABS, type WrTabsContext } from './tokens';\n\n/**\n * Instance counter for the header / panel ids. Deterministic under prerender,\n * unlike `randomId()` — the same reason `wr-sidebar` and `wr-mention` count.\n *\n * The ids used to be built from the tab key alone, so two `<wr-tabs>` on one\n * page that both name a tab `key=\"overview\"` emitted the same\n * `wr-tab-overview-header` twice, and the second group's `aria-labelledby`\n * resolved to the FIRST group's tab. A key is documented as parent-scoped, so\n * it is the parent that has to make it unique document-wide.\n */\nlet tabsUid = 0;\n\n/**\n * A tab key as an id fragment: anything outside `[A-Za-z0-9_-]` becomes `-`.\n * These ids land in `aria-controls` / `aria-labelledby`, which are\n * space-separated IDREF lists — `key=\"my tab\"` emitted\n * `aria-controls=\"wr-tab-my tab-panel\"`, two tokens, neither of which resolves.\n *\n * Two keys differing only outside that set collapse to one fragment; the\n * instance counter keeps that inside a single group, where the keys are the\n * consumer's own to keep apart.\n */\nfunction idFragment(key: string): string {\n  return key.replace(/[^A-Za-z0-9_-]/g, '-');\n}\n\n/**\n * Tabbed container. Two modes depending on the child `<wr-tab>`\n * definitions:\n *\n * - **Content** — children project body content; the parent renders an\n *   active-tab panel automatically.\n * - **Router** — any child with `routerLink` switches the whole strip\n *   into router mode; the parent skips its panel so the consumer can\n *   drop a `<router-outlet>` after it.\n *\n * @example\n * ```html\n * <!-- content tabs -->\n * <wr-tabs [(active)]=\"key\">\n *   <wr-tab key=\"one\" title=\"One\">First panel</wr-tab>\n *   <wr-tab key=\"two\" title=\"Two\">Second panel</wr-tab>\n * </wr-tabs>\n *\n * <!-- router tabs -->\n * <wr-tabs>\n *   <wr-tab title=\"Overview\" routerLink=\"overview\" />\n *   <wr-tab title=\"Details\" routerLink=\"details\" />\n * </wr-tabs>\n * <router-outlet />\n * ```\n *\n * @see https://ngwr.dev/reference/components/tabs\n */\n@Component({\n  selector: 'wr-tabs',\n  templateUrl: './tabs.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-tabs',\n    '[class.wr-tabs--fade-start]': 'canScrollStart()',\n    '[class.wr-tabs--fade-end]': 'canScrollEnd()',\n    '[class.wr-tabs--sm]': \"size() === 'sm'\",\n    '[class.wr-tabs--lg]': \"size() === 'lg'\",\n  },\n  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive],\n  providers: [\n    {\n      provide: WR_TABS,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrTabs),\n    },\n  ],\n})\nexport class WrTabs implements WrTabsContext {\n  /** Two-way bindable active tab key (content mode). */\n  readonly active = model<string | null>(null);\n\n  /** Visual size variant. */\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n  protected readonly tabs = contentChildren(WrTab);\n\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction of the strip. `Directionality` is root-provided, so this\n   * always resolves — `optional` only guards a consumer who has deliberately\n   * torn the provider out. It reads the document once at construction; a\n   * subtree that overrides the direction does it with the CDK's `Dir`\n   * directive, which writes `valueSignal`, so the read stays reactive.\n   */\n  private readonly isRtl = computed(() => this.dir?.valueSignal() === 'rtl');\n\n  /** When any child has a routerLink, the whole strip switches to router mode. */\n  protected readonly isRouter = computed(() => this.tabs().some(t => t.routerLink() !== null));\n\n  /** Content-mode: the tab whose key matches `active()` (or the first tab if none yet). */\n  protected readonly activeTab = computed(() => {\n    const key = this.active();\n    const tabs = this.tabs();\n    if (tabs.length === 0) return null;\n    return tabs.find(t => t.key() === key) ?? tabs[0];\n  });\n\n  // WrTabsContext\n\n  activate(key: string): void {\n    this.active.set(key);\n  }\n\n  register(): void {\n    // Deliberately a no-op. A `WrTab` calls this from its own constructor,\n    // where its `key` signal input is not bound yet — so it would report the\n    // generated default and this parent would write THAT into `active`. The\n    // effect below seeds from `tabs()`, by which point the inputs are real.\n  }\n\n  unregister(): void {\n    // No-op: contentChildren handles removal.\n  }\n\n  // Template handlers\n\n  protected readonly stripRef = viewChild<ElementRef<HTMLElement>>('strip');\n\n  /** Whether the strip is scrolled away from its start / end — drives the edge fades. */\n  protected readonly canScrollStart = signal(false);\n  protected readonly canScrollEnd = signal(false);\n\n  constructor() {\n    // Seed `active` with the first tab's key, once the content children exist\n    // and their inputs are bound. Without this the model writes back a\n    // generated id like `wr-tab-b1crta5aix0v`: the strip still highlighted the\n    // right tab, because `activeTab()` falls back to `tabs[0]`, so the only\n    // visible symptom was a two-way binding holding a key the consumer had\n    // never heard of.\n    effect(() => {\n      const tabs = this.tabs();\n      if (tabs.length > 0 && this.active() === null) this.active.set(tabs[0].key());\n    });\n\n    const destroyRef = inject(DestroyRef);\n    afterNextRender(() => {\n      this.updateFades();\n      const el = this.stripRef()?.nativeElement;\n      if (!el || typeof ResizeObserver === 'undefined') return;\n      // Re-evaluate when the strip's width changes (e.g. the container narrows\n      // and the tabs start overflowing).\n      const ro = new ResizeObserver(() => this.updateFades());\n      ro.observe(el);\n      destroyRef.onDestroy(() => ro.disconnect());\n    });\n  }\n\n  /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */\n  protected updateFades(): void {\n    const el = this.stripRef()?.nativeElement;\n    if (!el) return;\n    const max = el.scrollWidth - el.clientWidth;\n    // Distance from the INLINE start, which is what the two fades mean.\n    // `scrollLeft` is 0 at the inline start in BOTH directions and counts away\n    // from it — up in LTR, DOWN into negatives under `dir=\"rtl\"` (the CSSOM\n    // model every engine Angular 22 supports now implements; the legacy\n    // \"reversed\"/\"normal\" RTL conventions are gone). Read raw, the RTL value\n    // said \"never scrolled from the start, always more to come\" at every\n    // position: the end fade was pinned on and the start fade never appeared.\n    //\n    // Clamped rather than `Math.abs`, because an elastic overscroll reports a\n    // value of the WRONG sign at the start edge — a rubber-band past the start\n    // is still the start, and `abs` would light the start fade there in LTR too.\n    const scrolled = this.isRtl() ? Math.max(-el.scrollLeft, 0) : Math.max(el.scrollLeft, 0);\n    this.canScrollStart.set(scrolled > 1);\n    this.canScrollEnd.set(max > 1 && scrolled < max - 1);\n  }\n\n  protected onTabClick(tab: WrTab): void {\n    if (tab.disabled()) return;\n    if (!this.isRouter()) this.activate(tab.key());\n  }\n\n  /** Per-instance prefix, so keys only have to be unique within one group. */\n  private readonly uid = ++tabsUid;\n\n  /** Header id for `aria-labelledby` on the panel. @internal */\n  headerId(key: string): string {\n    return `wr-tabs-${this.uid}-tab-${idFragment(key)}-header`;\n  }\n\n  /** Panel id for `aria-controls` on the tab header. @internal */\n  panelId(key: string): string {\n    return `wr-tabs-${this.uid}-tab-${idFragment(key)}-panel`;\n  }\n\n  /** ArrowLeft/Right/Home/End keyboard navigation on the tab strip. */\n  protected onStripKeydown(event: KeyboardEvent): void {\n    const tabs = this.tabs().filter(t => !t.disabled());\n    if (tabs.length === 0) return;\n\n    // Step from where FOCUS is, not from what is active.\n    //\n    // In router mode nothing ever moves `active` — `onTabClick` and this\n    // handler both gate `activate()` on `!isRouter()`, because the route is\n    // what selects a tab there. Reading the neighbour off `activeTab()`\n    // therefore recomputed the same `idx` on every press, and ArrowRight\n    // walked from the first tab to the second and stayed there for the rest of\n    // the session. In manual mode focus and activation move together, so the\n    // two readings agree and nothing changes.\n    const strip = this.stripRef()?.nativeElement;\n    const focused = strip?.ownerDocument.activeElement;\n    const focusedIdx =\n      focused instanceof HTMLElement && strip?.contains(focused)\n        ? tabs.findIndex(t => this.headerId(t.key()) === focused.id)\n        : -1;\n    const active = this.activeTab();\n    const idx = focusedIdx >= 0 ? focusedIdx : active ? tabs.indexOf(active) : -1;\n    // The two neighbours in DOM order, wrapping at the ends.\n    const forward = idx < tabs.length - 1 ? idx + 1 : 0;\n    const backward = idx > 0 ? idx - 1 : tabs.length - 1;\n    const rtl = this.isRtl();\n    let nextIdx: number;\n\n    switch (event.key) {\n      // Arrow keys follow VISUAL order (WAI-ARIA APG). The strip is mirrored\n      // under `dir=\"rtl\"`, so ArrowRight moves toward the visual right, which is\n      // the PREVIOUS tab there.\n      case 'ArrowRight':\n        nextIdx = rtl ? backward : forward;\n        break;\n      case 'ArrowLeft':\n        nextIdx = rtl ? forward : backward;\n        break;\n      // Home / End name a position in the tab list — first and last — not a\n      // physical edge, so they read the same in both directions.\n      case 'Home':\n        nextIdx = 0;\n        break;\n      case 'End':\n        nextIdx = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    const next = tabs[nextIdx];\n    if (!this.isRouter()) this.activate(next.key());\n    // Move focus to the corresponding header element.\n    const headerEl = this.stripRef()?.nativeElement.querySelector<HTMLElement>(\n      `#${CSS.escape(this.headerId(next.key()))}`\n    );\n    headerEl?.focus();\n  }\n}\n","<!-- 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      <!--\n        `aria-selected` comes off the SAME `routerLinkActive` that paints `--active`,\n        exported as `rla`, so the announced state and the painted one can never\n        disagree. Without it a `role=\"tablist\"` shipped with no tab selected in any of\n        them: the route decides here, and the class it paints is invisible to\n        assistive tech.\n      -->\n      <a\n        #rla=\"routerLinkActive\"\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        routerLinkActive=\"wr-tabs__tab--active\"\n        [attr.id]=\"headerId(tab.key())\"\n        [routerLink]=\"tab.disabled() ? null : link\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"rla.isActive\"\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() && !tab.disabled() ? 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;AAKG;AAoBH;;;;;AAKG;MACU,OAAO,GAAG,IAAI,cAAc,CAAgB,SAAS;;AC/BlE;;;;;AAKG;AAkBH;;;;;;;;AAQG;MAWU,KAAK,CAAA;;IAEP,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;AAEzC;;;AAGG;AACM,IAAA,GAAG,GAAG,KAAK,CAAS,QAAQ,CAAC,QAAQ,CAAC;4EAAC;;IAGvC,UAAU,GAAG,KAAK,CAAoC,IAAI;mFAAC;;IAG3D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;AAG7D,IAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW;mFAAC;IAEpC,MAAM,GAAG,MAAM,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC5C,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAE7B,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;iFAAC;AAExE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;;;;;YAKf,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YACxE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACtE;IACF;uGAjCW,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAL,KAAK,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,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,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAiByB,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzB1C,CAAA,yCAAA,CAA2C,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQ1C,KAAK,EAAA,UAAA,EAAA,CAAA;kBAVjB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,QAAQ,EAAE,CAAA,yCAAA,CAA2C;oBACrD,aAAa,EAAE,iBAAiB,CAAC,IAAI;;;;;AAKrC,oBAAA,IAAI,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE;AACtC,iBAAA;yeAkB0C,WAAW,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AC3DtD;;;;;AAKG;AAyBH;;;;;;;;;AASG;AACH,IAAI,OAAO,GAAG,CAAC;AAEf;;;;;;;;;AASG;AACH,SAAS,UAAU,CAAC,GAAW,EAAA;IAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAqBU,MAAM,CAAA;;IAER,MAAM,GAAG,KAAK,CAAgB,IAAI;+EAAC;;IAGnC,IAAI,GAAG,KAAK,CAAqB,IAAI;6EAAC;IAE5B,IAAI,GAAG,eAAe,CAAC,KAAK;6EAAC;IAE/B,GAAG,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEjE;;;;;;AAMG;AACc,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,KAAK;8EAAC;;IAGvD,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC;iFAAC;;AAGzE,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;QAClC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;IACnD,CAAC;kFAAC;;AAIF,IAAA,QAAQ,CAAC,GAAW,EAAA;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;IACtB;IAEA,QAAQ,GAAA;;;;;IAKR;IAEA,UAAU,GAAA;;IAEV;;IAImB,QAAQ,GAAG,SAAS,CAA0B,OAAO;iFAAC;;IAGtD,cAAc,GAAG,MAAM,CAAC,KAAK;uFAAC;IAC9B,YAAY,GAAG,MAAM,CAAC,KAAK;qFAAC;AAE/C,IAAA,WAAA,GAAA;;;;;;;QAOE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;YACxB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AAC/E,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QACrC,eAAe,CAAC,MAAK;YACnB,IAAI,CAAC,WAAW,EAAE;YAClB,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa;AACzC,YAAA,IAAI,CAAC,EAAE,IAAI,OAAO,cAAc,KAAK,WAAW;gBAAE;;;AAGlD,YAAA,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;AACvD,YAAA,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;YACd,UAAU,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC;AAC7C,QAAA,CAAC,CAAC;IACJ;;IAGU,WAAW,GAAA;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa;AACzC,QAAA,IAAI,CAAC,EAAE;YAAE;QACT,MAAM,GAAG,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW;;;;;;;;;;;;AAY3C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;QACxF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC;AACrC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;IACtD;AAEU,IAAA,UAAU,CAAC,GAAU,EAAA;QAC7B,IAAI,GAAG,CAAC,QAAQ,EAAE;YAAE;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAChD;;IAGiB,GAAG,GAAG,EAAE,OAAO;;AAGhC,IAAA,QAAQ,CAAC,GAAW,EAAA;QAClB,OAAO,CAAA,QAAA,EAAW,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,UAAU,CAAC,GAAG,CAAC,CAAA,OAAA,CAAS;IAC5D;;AAGA,IAAA,OAAO,CAAC,GAAW,EAAA;QACjB,OAAO,CAAA,QAAA,EAAW,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,UAAU,CAAC,GAAG,CAAC,CAAA,MAAA,CAAQ;IAC3D;;AAGU,IAAA,cAAc,CAAC,KAAoB,EAAA;AAC3C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;AACnD,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE;;;;;;;;;;QAWvB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa;AAC5C,QAAA,MAAM,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC,aAAa;QAClD,MAAM,UAAU,GACd,OAAO,YAAY,WAAW,IAAI,KAAK,EAAE,QAAQ,CAAC,OAAO;cACrD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,EAAE;cACzD,CAAC,CAAC;AACR,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;QAC/B,MAAM,GAAG,GAAG,UAAU,IAAI,CAAC,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;;AAE7E,QAAA,MAAM,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;AACnD,QAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;AACpD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;AACxB,QAAA,IAAI,OAAe;AAEnB,QAAA,QAAQ,KAAK,CAAC,GAAG;;;;AAIf,YAAA,KAAK,YAAY;gBACf,OAAO,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO;gBAClC;AACF,YAAA,KAAK,WAAW;gBACd,OAAO,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ;gBAClC;;;AAGF,YAAA,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC;gBACX;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBACzB;AACF,YAAA;gBACE;;QAGJ,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;;AAE/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,aAAa,CAC3D,CAAA,CAAA,EAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA,CAAE,CAC5C;QACD,QAAQ,EAAE,KAAK,EAAE;IACnB;uGAlLW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,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,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,kBAAA,EAAA,yBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,EAAA,cAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EARN;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,OAAO;;AAEhB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,MAAM,CAAC;AACtC,aAAA;SACF,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EASyC,KAAK,gKC/GjD,qmEA+DA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDgCY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,kPAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAS7C,MAAM,EAAA,UAAA,EAAA,CAAA;kBApBlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,aAAA,EAEJ,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,6BAA6B,EAAE,kBAAkB;AACjD,wBAAA,2BAA2B,EAAE,gBAAgB;AAC7C,wBAAA,qBAAqB,EAAE,iBAAiB;AACxC,wBAAA,qBAAqB,EAAE,iBAAiB;AACzC,qBAAA,EAAA,OAAA,EACQ,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,SAAA,EAC9C;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,OAAO;;AAEhB,4BAAA,WAAW,EAAE,UAAU,CAAC,YAAY,CAAC;AACtC,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,qmEAAA,EAAA;AASyC,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAAA,KAAK,mEA2CkB,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE1J1E;;AAEG;;;;"}
+{"version":3,"file":"ngwr-tabs.mjs","sources":["../../../projects/lib/tabs/tokens/tabs.token.ts","../../../projects/lib/tabs/tokens/tabs-routing.token.ts","../../../projects/lib/tabs/tab.ts","../../../projects/lib/tabs/tabs.ts","../../../projects/lib/tabs/tabs.html","../../../projects/lib/tabs/ngwr-tabs.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a `<wr-tab>` uses to talk to its parent `<wr-tabs>`.\n *\n * @internal\n */\nexport interface WrTabsContext {\n  /** Currently active tab key (component-managed only). */\n  readonly active: Signal<string | null>;\n  /** Activate a tab by key (component-managed only). */\n  activate(key: string): void;\n  /** Register a child tab so the parent can pick a default. */\n  register(tab: { key: string; routerLink: unknown }): void;\n  /** Unregister on destroy. */\n  unregister(key: string): void;\n}\n\n/**\n * Token a `<wr-tab>` injects to register itself with — and read the active\n * key from — its parent `<wr-tabs>` host.\n *\n * @internal\n */\nexport const WR_TABS = new InjectionToken<WrTabsContext>('WR_TABS');\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 { InjectionToken } from '@angular/core';\n\n/**\n * What a `<wr-tabs>` needs from a router in order to render a router tab, and\n * nothing more. Three questions — the href to put on the anchor, whether the\n * current URL selects it, and what a click should do.\n *\n * It exists so that `ngwr/tabs` can name the capability without naming\n * `@angular/router`: a directive listed in `imports: []` lands in the compiled\n * component's `dependencies` whether or not its branch of the template ever\n * runs, so `RouterLink` + `RouterLinkActive` on the strip charged every content\n * tab strip the whole router — 73.9 kB of a 144.8 kB component. The\n * implementation lives at `ngwr/tabs/router`, which a consumer imports only\n * when they use router tabs.\n *\n * `href` and `isActive` are read from computeds and must both be reactive to\n * navigation: a RELATIVE `routerLink` resolves against the active route, so its\n * href changes when the route does, exactly as `RouterLink` recomputes its own.\n */\nexport interface WrTabsRoutingAdapter {\n  /**\n   * Serialized href for a tab's `routerLink`, or `null` when the adapter cannot\n   * build one.\n   */\n  href(commands: string | readonly string[]): string | null;\n\n  /**\n   * Whether the current URL selects this tab. Matched the way `routerLinkActive`\n   * matches without `[routerLinkActiveOptions]`: a path prefix, not an exact URL.\n   */\n  isActive(commands: string | readonly string[]): boolean;\n\n  /**\n   * Handle a click on a tab anchor. A modified or non-primary click is left to\n   * the browser, so ctrl/cmd-click still opens the tab in a new window.\n   */\n  navigate(commands: string | readonly string[], event: MouseEvent): void;\n}\n\n/**\n * Token a `<wr-tabs>` reads to find out whether router tabs are usable. Provided\n * by the `WrTabsRouting` directive from `ngwr/tabs/router`; absent by default,\n * which is what keeps `@angular/router` out of a content-only strip.\n */\nexport const WR_TABS_ROUTING = new InjectionToken<WrTabsRoutingAdapter>('WR_TABS_ROUTING');\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 } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  TemplateRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_TABS, WR_TABS_ROUTING } from './tokens';\n\n/**\n * Single tab. Two modes, decided by inputs:\n *\n * - **Content tab** — projected children render in the parent's content\n *   panel when this tab is active.\n * - **Router tab** — set `routerLink` and the tab becomes a link; the\n *   parent skips its content panel and the consumer drops a\n *   `<router-outlet>` below the tab strip. Router mode needs the\n *   `WrTabsRouting` directive from `ngwr/tabs/router` in the same\n *   `imports: []`; without it a strip carrying a `routerLink` throws.\n */\n@Component({\n  selector: 'wr-tab',\n  template: `<ng-template><ng-content /></ng-template>`,\n  encapsulation: ViewEncapsulation.None,\n  // A BOUND display rather than a static `style` attribute: Angular writes a\n  // binding through `style.setProperty`, which no CSP governs, while a real\n  // `style=\"…\"` attribute is refused under `style-src 'self'` — and this host\n  // would then lay out an empty box in the middle of the content.\n  host: { '[style.display]': \"'none'\" },\n})\nexport class WrTab {\n  /** Visible label on the tab strip. */\n  readonly title = input.required<string>();\n\n  /**\n   * Stable identifier used by the parent to track the active tab.\n   * Auto-generated if omitted.\n   */\n  readonly key = input<string>(randomId('wr-tab'));\n\n  /** Router target — when set, the tab becomes a `[routerLink]` link. */\n  readonly routerLink = input<string | readonly string[] | null>(null);\n\n  /** Disable the tab. */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Tab content template; portaled into the parent's panel area. @internal */\n  readonly contentTpl = viewChild.required(TemplateRef);\n\n  private readonly parent = inject(WR_TABS, { optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  /**\n   * The routing adapter published by `WrTabsRouting` on the parent `<wr-tabs>`\n   * element. A `<wr-tab>` is DECLARED inside `<wr-tabs>` in the consumer's\n   * template — content projection moves where it renders, not where it injects\n   * — so the parent's element injector is this one's, the same walk that\n   * resolves `WR_TABS` above.\n   */\n  private readonly routing = inject(WR_TABS_ROUTING, { optional: true });\n\n  protected readonly isRouter = computed(() => this.routerLink() !== null);\n\n  /**\n   * Resolved href for a router tab — `null` for a content tab, and for a\n   * disabled one, which is how the anchor stops navigating at all.\n   * @internal\n   */\n  readonly routerHref = computed(() => {\n    const link = this.routerLink();\n    if (link === null || this.disabled()) return null;\n    return this.routing?.href(link) ?? null;\n  });\n\n  /**\n   * Whether the current route selects this tab. The strip publishes it as BOTH\n   * `aria-selected` and the `--active` class, off this one read, so the\n   * announced selection and the painted one cannot drift apart.\n   * @internal\n   */\n  readonly routerActive = computed(() => {\n    const link = this.routerLink();\n    if (link === null || this.disabled()) return false;\n    return this.routing?.isActive(link) ?? false;\n  });\n\n  /** Hand a click on this tab's anchor to the routing adapter. @internal */\n  navigate(event: MouseEvent): void {\n    const link = this.routerLink();\n    if (link === null || this.disabled()) return;\n    this.routing?.navigate(link, event);\n  }\n\n  constructor() {\n    if (this.parent) {\n      // Both calls run with the input signals still on their defaults — a\n      // constructor is too early for `key()` to be the consumer's value. The\n      // parent tracks tabs through `contentChildren` and seeds `active` from\n      // there; these stay as the declared lifecycle contract.\n      this.parent.register({ key: this.key(), routerLink: this.routerLink() });\n      this.destroyRef.onDestroy(() => this.parent?.unregister(this.key()));\n    }\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 { Directionality } from '@angular/cdk/bidi';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  contentChildren,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { WrTab } from './tab';\nimport { WR_TABS, WR_TABS_ROUTING, type WrTabsContext } from './tokens';\n\n/**\n * Instance counter for the header / panel ids. Deterministic under prerender,\n * unlike `randomId()` — the same reason `wr-sidebar` and `wr-mention` count.\n *\n * The ids used to be built from the tab key alone, so two `<wr-tabs>` on one\n * page that both name a tab `key=\"overview\"` emitted the same\n * `wr-tab-overview-header` twice, and the second group's `aria-labelledby`\n * resolved to the FIRST group's tab. A key is documented as parent-scoped, so\n * it is the parent that has to make it unique document-wide.\n */\nlet tabsUid = 0;\n\n/**\n * A tab key as an id fragment: anything outside `[A-Za-z0-9_-]` becomes `-`.\n * These ids land in `aria-controls` / `aria-labelledby`, which are\n * space-separated IDREF lists — `key=\"my tab\"` emitted\n * `aria-controls=\"wr-tab-my tab-panel\"`, two tokens, neither of which resolves.\n *\n * Two keys differing only outside that set collapse to one fragment; the\n * instance counter keeps that inside a single group, where the keys are the\n * consumer's own to keep apart.\n */\nfunction idFragment(key: string): string {\n  return key.replace(/[^A-Za-z0-9_-]/g, '-');\n}\n\n/**\n * Tabbed container. Two modes depending on the child `<wr-tab>`\n * definitions:\n *\n * - **Content** — children project body content; the parent renders an\n *   active-tab panel automatically.\n * - **Router** — any child with `routerLink` switches the whole strip\n *   into router mode; the parent skips its panel so the consumer can\n *   drop a `<router-outlet>` after it. That mode needs the `WrTabsRouting`\n *   directive from `ngwr/tabs/router` alongside `WrTabs` in `imports: []`\n *   — the strip itself names no `@angular/router` symbol, which is what\n *   keeps a content-only strip free of the router.\n *\n * @example\n * ```html\n * <!-- content tabs -->\n * <wr-tabs [(active)]=\"key\">\n *   <wr-tab key=\"one\" title=\"One\">First panel</wr-tab>\n *   <wr-tab key=\"two\" title=\"Two\">Second panel</wr-tab>\n * </wr-tabs>\n *\n * <!-- router tabs: imports: [WrTabs, WrTab, WrTabsRouting] -->\n * <wr-tabs>\n *   <wr-tab title=\"Overview\" routerLink=\"overview\" />\n *   <wr-tab title=\"Details\" routerLink=\"details\" />\n * </wr-tabs>\n * <router-outlet />\n * ```\n *\n * @see https://ngwr.dev/reference/components/tabs\n */\n@Component({\n  selector: 'wr-tabs',\n  templateUrl: './tabs.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-tabs',\n    '[class.wr-tabs--fade-start]': 'canScrollStart()',\n    '[class.wr-tabs--fade-end]': 'canScrollEnd()',\n    '[class.wr-tabs--sm]': \"size() === 'sm'\",\n    '[class.wr-tabs--lg]': \"size() === 'lg'\",\n  },\n  imports: [NgTemplateOutlet],\n  providers: [\n    {\n      provide: WR_TABS,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrTabs),\n    },\n  ],\n})\nexport class WrTabs implements WrTabsContext {\n  /** Two-way bindable active tab key (content mode). */\n  readonly active = model<string | null>(null);\n\n  /** Visual size variant. */\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n  protected readonly tabs = contentChildren(WrTab);\n\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction of the strip. `Directionality` is root-provided, so this\n   * always resolves — `optional` only guards a consumer who has deliberately\n   * torn the provider out. It reads the document once at construction; a\n   * subtree that overrides the direction does it with the CDK's `Dir`\n   * directive, which writes `valueSignal`, so the read stays reactive.\n   */\n  private readonly isRtl = computed(() => this.dir?.valueSignal() === 'rtl');\n\n  /**\n   * The routing adapter, when `WrTabsRouting` from `ngwr/tabs/router` is in the\n   * consumer's `imports`. `null` is the default and the whole point: the strip\n   * has no `@angular/router` import of its own, so a content-only tab strip\n   * costs no router bytes.\n   */\n  private readonly routing = inject(WR_TABS_ROUTING, { optional: true });\n\n  /**\n   * When any child has a routerLink, the whole strip switches to router mode.\n   *\n   * Throws rather than degrading when the adapter is missing. Falling back to\n   * content mode would render the tabs as `<button>`s that navigate nowhere and\n   * open an empty panel — a strip that looks right and does nothing, with the\n   * one missing import unnamed. The route is what selects a tab here, so there\n   * is no half of this that still works.\n   */\n  protected readonly isRouter = computed(() => {\n    const isRouter = this.tabs().some(t => t.routerLink() !== null);\n    if (isRouter && !this.routing) {\n      throw new Error(\n        '<wr-tabs>: a <wr-tab> sets `routerLink`, but no routing adapter is provided. ' +\n          \"Add `WrTabsRouting` from 'ngwr/tabs/router' to the `imports` of the component that \" +\n          'declares this strip.'\n      );\n    }\n    return isRouter;\n  });\n\n  /** Content-mode: the tab whose key matches `active()` (or the first tab if none yet). */\n  protected readonly activeTab = computed(() => {\n    const key = this.active();\n    const tabs = this.tabs();\n    if (tabs.length === 0) return null;\n    return tabs.find(t => t.key() === key) ?? tabs[0];\n  });\n\n  // WrTabsContext\n\n  activate(key: string): void {\n    this.active.set(key);\n  }\n\n  register(): void {\n    // Deliberately a no-op. A `WrTab` calls this from its own constructor,\n    // where its `key` signal input is not bound yet — so it would report the\n    // generated default and this parent would write THAT into `active`. The\n    // effect below seeds from `tabs()`, by which point the inputs are real.\n  }\n\n  unregister(): void {\n    // No-op: contentChildren handles removal.\n  }\n\n  // Template handlers\n\n  protected readonly stripRef = viewChild<ElementRef<HTMLElement>>('strip');\n\n  /** Whether the strip is scrolled away from its start / end — drives the edge fades. */\n  protected readonly canScrollStart = signal(false);\n  protected readonly canScrollEnd = signal(false);\n\n  constructor() {\n    // Seed `active` with the first tab's key, once the content children exist\n    // and their inputs are bound. Without this the model writes back a\n    // generated id like `wr-tab-b1crta5aix0v`: the strip still highlighted the\n    // right tab, because `activeTab()` falls back to `tabs[0]`, so the only\n    // visible symptom was a two-way binding holding a key the consumer had\n    // never heard of.\n    effect(() => {\n      const tabs = this.tabs();\n      if (tabs.length > 0 && this.active() === null) this.active.set(tabs[0].key());\n    });\n\n    const destroyRef = inject(DestroyRef);\n    afterNextRender(() => {\n      this.updateFades();\n      const el = this.stripRef()?.nativeElement;\n      if (!el || typeof ResizeObserver === 'undefined') return;\n      // Re-evaluate when the strip's width changes (e.g. the container narrows\n      // and the tabs start overflowing).\n      const ro = new ResizeObserver(() => this.updateFades());\n      ro.observe(el);\n      destroyRef.onDestroy(() => ro.disconnect());\n    });\n  }\n\n  /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */\n  protected updateFades(): void {\n    const el = this.stripRef()?.nativeElement;\n    if (!el) return;\n    const max = el.scrollWidth - el.clientWidth;\n    // Distance from the INLINE start, which is what the two fades mean.\n    // `scrollLeft` is 0 at the inline start in BOTH directions and counts away\n    // from it — up in LTR, DOWN into negatives under `dir=\"rtl\"` (the CSSOM\n    // model every engine Angular 22 supports now implements; the legacy\n    // \"reversed\"/\"normal\" RTL conventions are gone). Read raw, the RTL value\n    // said \"never scrolled from the start, always more to come\" at every\n    // position: the end fade was pinned on and the start fade never appeared.\n    //\n    // Clamped rather than `Math.abs`, because an elastic overscroll reports a\n    // value of the WRONG sign at the start edge — a rubber-band past the start\n    // is still the start, and `abs` would light the start fade there in LTR too.\n    const scrolled = this.isRtl() ? Math.max(-el.scrollLeft, 0) : Math.max(el.scrollLeft, 0);\n    this.canScrollStart.set(scrolled > 1);\n    this.canScrollEnd.set(max > 1 && scrolled < max - 1);\n  }\n\n  protected onTabClick(tab: WrTab): void {\n    if (tab.disabled()) return;\n    if (!this.isRouter()) this.activate(tab.key());\n  }\n\n  /**\n   * Click on a router tab's anchor. The anchor carries a real `href`, so a\n   * modified or middle click is left alone and the browser opens it the way it\n   * opens any link; only a plain left click is turned into a navigation.\n   */\n  protected onRouterTabClick(tab: WrTab, event: MouseEvent): void {\n    tab.navigate(event);\n  }\n\n  /** Per-instance prefix, so keys only have to be unique within one group. */\n  private readonly uid = ++tabsUid;\n\n  /** Header id for `aria-labelledby` on the panel. @internal */\n  headerId(key: string): string {\n    return `wr-tabs-${this.uid}-tab-${idFragment(key)}-header`;\n  }\n\n  /** Panel id for `aria-controls` on the tab header. @internal */\n  panelId(key: string): string {\n    return `wr-tabs-${this.uid}-tab-${idFragment(key)}-panel`;\n  }\n\n  /** ArrowLeft/Right/Home/End keyboard navigation on the tab strip. */\n  protected onStripKeydown(event: KeyboardEvent): void {\n    const tabs = this.tabs().filter(t => !t.disabled());\n    if (tabs.length === 0) return;\n\n    // Step from where FOCUS is, not from what is active.\n    //\n    // In router mode nothing ever moves `active` — `onTabClick` and this\n    // handler both gate `activate()` on `!isRouter()`, because the route is\n    // what selects a tab there. Reading the neighbour off `activeTab()`\n    // therefore recomputed the same `idx` on every press, and ArrowRight\n    // walked from the first tab to the second and stayed there for the rest of\n    // the session. In manual mode focus and activation move together, so the\n    // two readings agree and nothing changes.\n    const strip = this.stripRef()?.nativeElement;\n    const focused = strip?.ownerDocument.activeElement;\n    const focusedIdx =\n      focused instanceof HTMLElement && strip?.contains(focused)\n        ? tabs.findIndex(t => this.headerId(t.key()) === focused.id)\n        : -1;\n    const active = this.activeTab();\n    const idx = focusedIdx >= 0 ? focusedIdx : active ? tabs.indexOf(active) : -1;\n    // The two neighbours in DOM order, wrapping at the ends.\n    const forward = idx < tabs.length - 1 ? idx + 1 : 0;\n    const backward = idx > 0 ? idx - 1 : tabs.length - 1;\n    const rtl = this.isRtl();\n    let nextIdx: number;\n\n    switch (event.key) {\n      // Arrow keys follow VISUAL order (WAI-ARIA APG). The strip is mirrored\n      // under `dir=\"rtl\"`, so ArrowRight moves toward the visual right, which is\n      // the PREVIOUS tab there.\n      case 'ArrowRight':\n        nextIdx = rtl ? backward : forward;\n        break;\n      case 'ArrowLeft':\n        nextIdx = rtl ? forward : backward;\n        break;\n      // Home / End name a position in the tab list — first and last — not a\n      // physical edge, so they read the same in both directions.\n      case 'Home':\n        nextIdx = 0;\n        break;\n      case 'End':\n        nextIdx = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    const next = tabs[nextIdx];\n    if (!this.isRouter()) this.activate(next.key());\n    // Move focus to the corresponding header element.\n    const headerEl = this.stripRef()?.nativeElement.querySelector<HTMLElement>(\n      `#${CSS.escape(this.headerId(next.key()))}`\n    );\n    headerEl?.focus();\n  }\n}\n","<!-- 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() !== null) {\n      <!--\n        `aria-selected` and `--active` come off the SAME `tab.routerActive()`, so the\n        announced state and the painted one can never disagree. Without it a\n        `role=\"tablist\"` shipped with no tab selected in any of them: the route decides\n        here, and the class it paints is invisible to assistive tech.\n\n        A real `href` rather than a `[routerLink]`: the directive would drag\n        `@angular/router` into every content-only strip as well (see `WR_TABS_ROUTING`).\n        The href, the active match and the click all come from the adapter the\n        `ngwr/tabs/router` directive publishes, which is `RouterLink` doing the work.\n      -->\n      <a\n        class=\"wr-tabs__tab\"\n        role=\"tab\"\n        [attr.id]=\"headerId(tab.key())\"\n        [attr.href]=\"tab.routerHref()\"\n        [class.wr-tabs__tab--active]=\"tab.routerActive()\"\n        [class.wr-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-disabled]=\"tab.disabled() ? true : null\"\n        [attr.aria-selected]=\"tab.routerActive()\"\n        [attr.tabindex]=\"tab.disabled() ? -1 : 0\"\n        (click)=\"onRouterTabClick(tab, $event)\"\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() && !tab.disabled() ? 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-textarea.mjs

@@ -1,9 +1,10 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, computed, model, output, signal, viewChild, inject, PLATFORM_ID, ElementRef, effect, ViewEncapsulation, Component } from '@angular/core';
 import { useConfigValue } from 'ngwr/config';
-import { useFormFieldAria } from 'ngwr/form';
+import { useFormFieldAria, WR_FORM_FIELD } from 'ngwr/form';
 
 /**
  * @license
@@ -77,6 +78,27 @@ class WrTextarea {
     ...(ngDevMode ? [{ debugName: "effectiveResize" }] : /* istanbul ignore next */ []));
     /** The surrounding `<wr-form-field>`'s error state. @internal */
     fieldAria = useFormFieldAria();
+    field = inject(WR_FORM_FIELD, { optional: true });
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at.
+     *
+     * The field renders its label before it can see what was projected into it, so
+     * the id travels the other way and the control adopts it, exactly as
+     * `[wrInput]` and `wr-select` do. Without it the `for` named an element that
+     * was nowhere in the document: clicking the label did nothing, and the field
+     * was, to a screen reader, an unlabelled block.
+     *
+     * It lands on the native `<textarea>` rather than on the host, because only a
+     * labelable element can be a label's target and `<wr-textarea>` is not one.
+     *
+     * What it does NOT change is the NAME: `aria-label` outranks a `<label>` in
+     * the accname order and `resolvedAriaLabel()` still wins, the same call
+     * `wr-select` and `wr-slider` make — the field renders a label only when its
+     * `label` input is set, so it cannot promise a name to fall back on. Set
+     * `[ariaLabel]` to the field's label where the two should read alike.
+     */
+    controlId = computed(() => this.field?.controlId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-textarea'];
         const size = this.resolvedSize();
@@ -100,6 +122,15 @@ class WrTextarea {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     hostEl = inject(ElementRef);
+    /**
+     * Ambient reading direction, read by the horizontal half of the resize drag.
+     *
+     * Optional so a bare `TestBed` — or any consumer that never set a direction —
+     * needs no provider; `Directionality` is root-provided, so `null` only ever
+     * means "nobody asked", which is LTR. Read inside the handler rather than
+     * cached, so a runtime flip needs no subscription to `Directionality.change`.
+     */
+    dir = inject(Directionality, { optional: true });
     // Custom resize-grip drag state (replaces the native corner handle).
     resizing = false;
     resizeStartY = 0;
@@ -169,7 +200,16 @@ class WrTextarea {
             el.style.height = `${h}px`;
         }
         if (dir === 'horizontal' || dir === 'both') {
-            const w = Math.min(this.resizeMaxWidth, Math.max(64, this.resizeStartWidth + (event.clientX - this.resizeStartX)));
+            // The grip sits at the field's INLINE END — physically bottom-right in LTR,
+            // bottom-left in RTL, where a block-level box grows because it is anchored
+            // at the right edge of its containing block. So the pointer's physical
+            // delta means "wider" in one direction and "narrower" in the other, and the
+            // sign has to follow the reading direction. It did not, so under `dir="rtl"`
+            // the grip sat on the corner the box does NOT extend toward and dragging it
+            // outward shrank the field.
+            const dx = event.clientX - this.resizeStartX;
+            const inline = this.dir?.value === 'rtl' ? -dx : dx;
+            const w = Math.min(this.resizeMaxWidth, Math.max(64, this.resizeStartWidth + inline));
             this.hostEl.nativeElement.style.width = `${w}px`;
         }
     }
@@ -210,12 +250,12 @@ class WrTextarea {
             el.style.overflowY = 'hidden';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTextarea, isStandalone: true, selector: "wr-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, isSignal: true }], ngImport: i0, template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (showHandle()) {\n  <!-- Custom corner grip \u2014 the lucide icon + cursor follow the `resize`\n       direction. Icons inlined so no icon registration is required. -->\n  <span\n    [class]=\"`wr-textarea__resize wr-textarea__resize--${effectiveResize()}`\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"startResize($event)\"\n    (pointermove)=\"onResize($event)\"\n    (pointerup)=\"endResize($event)\"\n    (pointercancel)=\"endResize($event)\"\n  >\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (effectiveResize()) {\n        @case ('vertical') {\n          <path d=\"M12 2v20\" />\n          <path d=\"m8 18 4 4 4-4\" />\n          <path d=\"m8 6 4-4 4 4\" />\n        }\n        @case ('horizontal') {\n          <path d=\"M2 12h20\" />\n          <path d=\"m18 8 4 4-4 4\" />\n          <path d=\"m6 8-4 4 4 4\" />\n        }\n        @default {\n          <path d=\"M19 13v6h-6\" />\n          <path d=\"M5 11V5h6\" />\n          <path d=\"m5 5 14 14\" />\n        }\n      }\n    </svg>\n  </span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrTextarea, isStandalone: true, selector: "wr-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, isSignal: true }], ngImport: i0, template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [attr.id]=\"controlId()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (showHandle()) {\n  <!-- Custom corner grip \u2014 the lucide icon + cursor follow the `resize`\n       direction. Icons inlined so no icon registration is required. -->\n  <span\n    [class]=\"`wr-textarea__resize wr-textarea__resize--${effectiveResize()}`\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"startResize($event)\"\n    (pointermove)=\"onResize($event)\"\n    (pointerup)=\"endResize($event)\"\n    (pointercancel)=\"endResize($event)\"\n  >\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (effectiveResize()) {\n        @case ('vertical') {\n          <path d=\"M12 2v20\" />\n          <path d=\"m8 18 4 4 4-4\" />\n          <path d=\"m8 6 4-4 4 4\" />\n        }\n        @case ('horizontal') {\n          <path d=\"M2 12h20\" />\n          <path d=\"m18 8 4 4-4 4\" />\n          <path d=\"m6 8-4 4 4 4\" />\n        }\n        @default {\n          <path d=\"M19 13v6h-6\" />\n          <path d=\"M5 11V5h6\" />\n          <path d=\"m5 5 14 14\" />\n        }\n      }\n    </svg>\n  </span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-textarea', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (showHandle()) {\n  <!-- Custom corner grip \u2014 the lucide icon + cursor follow the `resize`\n       direction. Icons inlined so no icon registration is required. -->\n  <span\n    [class]=\"`wr-textarea__resize wr-textarea__resize--${effectiveResize()}`\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"startResize($event)\"\n    (pointermove)=\"onResize($event)\"\n    (pointerup)=\"endResize($event)\"\n    (pointercancel)=\"endResize($event)\"\n  >\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (effectiveResize()) {\n        @case ('vertical') {\n          <path d=\"M12 2v20\" />\n          <path d=\"m8 18 4 4 4-4\" />\n          <path d=\"m8 6 4-4 4 4\" />\n        }\n        @case ('horizontal') {\n          <path d=\"M2 12h20\" />\n          <path d=\"m18 8 4 4-4 4\" />\n          <path d=\"m6 8-4 4 4 4\" />\n        }\n        @default {\n          <path d=\"M19 13v6h-6\" />\n          <path d=\"M5 11V5h6\" />\n          <path d=\"m5 5 14 14\" />\n        }\n      }\n    </svg>\n  </span>\n}\n" }]
+            args: [{ selector: 'wr-textarea', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [attr.id]=\"controlId()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (showHandle()) {\n  <!-- Custom corner grip \u2014 the lucide icon + cursor follow the `resize`\n       direction. Icons inlined so no icon registration is required. -->\n  <span\n    [class]=\"`wr-textarea__resize wr-textarea__resize--${effectiveResize()}`\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"startResize($event)\"\n    (pointermove)=\"onResize($event)\"\n    (pointerup)=\"endResize($event)\"\n    (pointercancel)=\"endResize($event)\"\n  >\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (effectiveResize()) {\n        @case ('vertical') {\n          <path d=\"M12 2v20\" />\n          <path d=\"m8 18 4 4 4-4\" />\n          <path d=\"m8 6 4-4 4 4\" />\n        }\n        @case ('horizontal') {\n          <path d=\"M2 12h20\" />\n          <path d=\"m18 8 4 4-4 4\" />\n          <path d=\"m6 8-4 4 4 4\" />\n        }\n        @default {\n          <path d=\"M19 13v6h-6\" />\n          <path d=\"M5 11V5h6\" />\n          <path d=\"m5 5 14 14\" />\n        }\n      }\n    </svg>\n  </span>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autosize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosize", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }] } });
 
 /**