@angular/aria 21.1.0-next.1 → 21.1.0-next.2

package/fesm2022/tabs.mjs

@@ -1,81 +1,19 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, computed, Directive, input, booleanAttribute, model, afterRenderEffect } from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, computed, input, booleanAttribute, model, afterRenderEffect, Directive } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
 import * as i1 from '@angular/aria/private';
-import { TabListPattern, TabPattern, DeferredContentAware, TabPanelPattern, DeferredContent } from '@angular/aria/private';
+import { TabListPattern, DeferredContentAware, TabPanelPattern, TabPattern, DeferredContent } from '@angular/aria/private';
+import { _IdGenerator } from '@angular/cdk/a11y';
 
+const TABS = new InjectionToken('TABS');
 function sortDirectives(a, b) {
   return (a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_PRECEDING) > 0 ? 1 : -1;
 }
-class Tabs {
-  _elementRef = inject(ElementRef);
-  element = this._elementRef.nativeElement;
-  _tablist = signal(undefined, ...(ngDevMode ? [{
-    debugName: "_tablist"
-  }] : []));
-  _unorderedPanels = signal(new Set(), ...(ngDevMode ? [{
-    debugName: "_unorderedPanels"
-  }] : []));
-  _tabPatterns = computed(() => this._tablist()?._tabPatterns(), ...(ngDevMode ? [{
-    debugName: "_tabPatterns"
-  }] : []));
-  _unorderedTabpanelPatterns = computed(() => [...this._unorderedPanels()].map(tabpanel => tabpanel._pattern), ...(ngDevMode ? [{
-    debugName: "_unorderedTabpanelPatterns"
-  }] : []));
-  _register(child) {
-    if (child instanceof TabList) {
-      this._tablist.set(child);
-    }
-    if (child instanceof TabPanel) {
-      this._unorderedPanels().add(child);
-      this._unorderedPanels.set(new Set(this._unorderedPanels()));
-    }
-  }
-  _unregister(child) {
-    if (child instanceof TabList) {
-      this._tablist.set(undefined);
-    }
-    if (child instanceof TabPanel) {
-      this._unorderedPanels().delete(child);
-      this._unorderedPanels.set(new Set(this._unorderedPanels()));
-    }
-  }
-  static ɵfac = i0.ɵɵngDeclareFactory({
-    minVersion: "12.0.0",
-    version: "21.0.0",
-    ngImport: i0,
-    type: Tabs,
-    deps: [],
-    target: i0.ɵɵFactoryTarget.Directive
-  });
-  static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "14.0.0",
-    version: "21.0.0",
-    type: Tabs,
-    isStandalone: true,
-    selector: "[ngTabs]",
-    exportAs: ["ngTabs"],
-    ngImport: i0
-  });
-}
-i0.ɵɵngDeclareClassMetadata({
-  minVersion: "12.0.0",
-  version: "21.0.0",
-  ngImport: i0,
-  type: Tabs,
-  decorators: [{
-    type: Directive,
-    args: [{
-      selector: '[ngTabs]',
-      exportAs: 'ngTabs'
-    }]
-  }]
-});
+
 class TabList {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _tabs = inject(Tabs);
+  _tabs = inject(TABS);
   _unorderedTabs = signal(new Set(), ...(ngDevMode ? [{
     debugName: "_unorderedTabs"
   }] : []));
@@ -86,18 +24,18 @@ class TabList {
   orientation = input('horizontal', ...(ngDevMode ? [{
     debugName: "orientation"
   }] : []));
-  wrap = input(true, ...(ngDevMode ? [{
-    debugName: "wrap",
+  wrap = input(true, {
+    ...(ngDevMode ? {
+      debugName: "wrap"
+    } : {}),
     transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  softDisabled = input(true, ...(ngDevMode ? [{
-    debugName: "softDisabled",
-    transform: booleanAttribute
-  }] : [{
+  });
+  softDisabled = input(true, {
+    ...(ngDevMode ? {
+      debugName: "softDisabled"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   focusMode = input('roving', ...(ngDevMode ? [{
     debugName: "focusMode"
   }] : []));
@@ -107,12 +45,12 @@ class TabList {
   selectedTab = model(...(ngDevMode ? [undefined, {
     debugName: "selectedTab"
   }] : []));
-  disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
-    transform: booleanAttribute
-  }] : [{
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   _pattern = new TabListPattern({
     ...this,
     items: this._tabPatterns,
@@ -163,7 +101,7 @@ class TabList {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
     type: TabList,
     deps: [],
@@ -171,7 +109,7 @@ class TabList {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.0.0",
+    version: "21.0.3",
     type: TabList,
     isStandalone: true,
     selector: "[ngTabList]",
@@ -251,7 +189,7 @@ class TabList {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
   type: TabList,
   decorators: [{
@@ -334,65 +272,51 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-class Tab {
+
+class TabPanel {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _tabs = inject(Tabs);
-  _tabList = inject(TabList);
-  id = input(inject(_IdGenerator).getId('ng-tab-', true), ...(ngDevMode ? [{
+  _deferredContentAware = inject(DeferredContentAware);
+  _tabs = inject(TABS);
+  id = input(inject(_IdGenerator).getId('ng-tabpanel-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
-  _tablistPattern = computed(() => this._tabList._pattern, ...(ngDevMode ? [{
-    debugName: "_tablistPattern"
-  }] : []));
-  _tabpanelPattern = computed(() => this._tabs._unorderedTabpanelPatterns().find(tabpanel => tabpanel.value() === this.value()), ...(ngDevMode ? [{
-    debugName: "_tabpanelPattern"
+  _tabPattern = computed(() => this._tabs._tabPatterns()?.find(tab => tab.value() === this.value()), ...(ngDevMode ? [{
+    debugName: "_tabPattern"
   }] : []));
-  disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
-    transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
   value = input.required(...(ngDevMode ? [{
     debugName: "value"
   }] : []));
-  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
-    debugName: "active"
-  }] : []));
-  selected = computed(() => this._pattern.selected(), ...(ngDevMode ? [{
-    debugName: "selected"
+  visible = computed(() => !this._pattern.hidden(), ...(ngDevMode ? [{
+    debugName: "visible"
   }] : []));
-  _pattern = new TabPattern({
+  _pattern = new TabPanelPattern({
     ...this,
-    tablist: this._tablistPattern,
-    tabpanel: this._tabpanelPattern,
-    expanded: signal(false),
-    element: () => this.element
+    tab: this._tabPattern
   });
-  open() {
-    this._pattern.open();
+  constructor() {
+    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
   }
   ngOnInit() {
-    this._tabList._register(this);
+    this._tabs._register(this);
   }
   ngOnDestroy() {
-    this._tabList._unregister(this);
+    this._tabs._unregister(this);
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
-    type: Tab,
+    type: TabPanel,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.0.0",
-    type: Tab,
+    version: "21.0.3",
+    type: TabPanel,
     isStandalone: true,
-    selector: "[ngTab]",
+    selector: "[ngTabPanel]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -401,13 +325,6 @@ class Tab {
         isRequired: false,
         transformFunction: null
       },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
       value: {
         classPropertyName: "value",
         publicName: "value",
@@ -418,42 +335,47 @@ class Tab {
     },
     host: {
       attributes: {
-        "role": "tab"
+        "role": "tabpanel"
       },
       properties: {
-        "attr.data-active": "active()",
         "attr.id": "_pattern.id()",
         "attr.tabindex": "_pattern.tabIndex()",
-        "attr.aria-selected": "selected()",
-        "attr.aria-disabled": "_pattern.disabled()",
-        "attr.aria-controls": "_pattern.controls()"
+        "attr.inert": "!visible() ? true : null",
+        "attr.aria-labelledby": "_pattern.labelledBy()"
       }
     },
-    exportAs: ["ngTab"],
+    exportAs: ["ngTabPanel"],
+    hostDirectives: [{
+      directive: i1.DeferredContentAware,
+      inputs: ["preserveContent", "preserveContent"]
+    }],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
-  type: Tab,
+  type: TabPanel,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngTab]',
-      exportAs: 'ngTab',
+      selector: '[ngTabPanel]',
+      exportAs: 'ngTabPanel',
       host: {
-        'role': 'tab',
-        '[attr.data-active]': 'active()',
+        'role': 'tabpanel',
         '[attr.id]': '_pattern.id()',
         '[attr.tabindex]': '_pattern.tabIndex()',
-        '[attr.aria-selected]': 'selected()',
-        '[attr.aria-disabled]': '_pattern.disabled()',
-        '[attr.aria-controls]': '_pattern.controls()'
-      }
+        '[attr.inert]': '!visible() ? true : null',
+        '[attr.aria-labelledby]': '_pattern.labelledBy()'
+      },
+      hostDirectives: [{
+        directive: DeferredContentAware,
+        inputs: ['preserveContent']
+      }]
     }]
   }],
+  ctorParameters: () => [],
   propDecorators: {
     id: [{
       type: i0.Input,
@@ -463,14 +385,6 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
-    disabled: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "disabled",
-        required: false
-      }]
-    }],
     value: [{
       type: i0.Input,
       args: [{
@@ -481,50 +395,139 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-class TabPanel {
+
+class Tabs {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _deferredContentAware = inject(DeferredContentAware);
-  _Tabs = inject(Tabs);
-  id = input(inject(_IdGenerator).getId('ng-tabpanel-', true), ...(ngDevMode ? [{
+  _tablist = signal(undefined, ...(ngDevMode ? [{
+    debugName: "_tablist"
+  }] : []));
+  _unorderedPanels = signal(new Set(), ...(ngDevMode ? [{
+    debugName: "_unorderedPanels"
+  }] : []));
+  _tabPatterns = computed(() => this._tablist()?._tabPatterns(), ...(ngDevMode ? [{
+    debugName: "_tabPatterns"
+  }] : []));
+  _unorderedTabpanelPatterns = computed(() => [...this._unorderedPanels()].map(tabpanel => tabpanel._pattern), ...(ngDevMode ? [{
+    debugName: "_unorderedTabpanelPatterns"
+  }] : []));
+  _register(child) {
+    if (child instanceof TabList) {
+      this._tablist.set(child);
+    }
+    if (child instanceof TabPanel) {
+      this._unorderedPanels().add(child);
+      this._unorderedPanels.set(new Set(this._unorderedPanels()));
+    }
+  }
+  _unregister(child) {
+    if (child instanceof TabList) {
+      this._tablist.set(undefined);
+    }
+    if (child instanceof TabPanel) {
+      this._unorderedPanels().delete(child);
+      this._unorderedPanels.set(new Set(this._unorderedPanels()));
+    }
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.3",
+    ngImport: i0,
+    type: Tabs,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "21.0.3",
+    type: Tabs,
+    isStandalone: true,
+    selector: "[ngTabs]",
+    providers: [{
+      provide: TABS,
+      useExisting: Tabs
+    }],
+    exportAs: ["ngTabs"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.3",
+  ngImport: i0,
+  type: Tabs,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngTabs]',
+      exportAs: 'ngTabs',
+      providers: [{
+        provide: TABS,
+        useExisting: Tabs
+      }]
+    }]
+  }]
+});
+
+class Tab {
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
+  _tabs = inject(TABS);
+  _tabList = inject(TabList);
+  id = input(inject(_IdGenerator).getId('ng-tab-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
-  _tabPattern = computed(() => this._Tabs._tabPatterns()?.find(tab => tab.value() === this.value()), ...(ngDevMode ? [{
-    debugName: "_tabPattern"
+  _tablistPattern = computed(() => this._tabList._pattern, ...(ngDevMode ? [{
+    debugName: "_tablistPattern"
+  }] : []));
+  _tabpanelPattern = computed(() => this._tabs._unorderedTabpanelPatterns().find(tabpanel => tabpanel.value() === this.value()), ...(ngDevMode ? [{
+    debugName: "_tabpanelPattern"
   }] : []));
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
+    transform: booleanAttribute
+  });
   value = input.required(...(ngDevMode ? [{
     debugName: "value"
   }] : []));
-  visible = computed(() => !this._pattern.hidden(), ...(ngDevMode ? [{
-    debugName: "visible"
+  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
+    debugName: "active"
   }] : []));
-  _pattern = new TabPanelPattern({
+  selected = computed(() => this._pattern.selected(), ...(ngDevMode ? [{
+    debugName: "selected"
+  }] : []));
+  _pattern = new TabPattern({
     ...this,
-    tab: this._tabPattern
+    tablist: this._tablistPattern,
+    tabpanel: this._tabpanelPattern,
+    expanded: signal(false),
+    element: () => this.element
   });
-  constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
+  open() {
+    this._pattern.open();
   }
   ngOnInit() {
-    this._Tabs._register(this);
+    this._tabList._register(this);
   }
   ngOnDestroy() {
-    this._Tabs._unregister(this);
+    this._tabList._unregister(this);
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
-    type: TabPanel,
+    type: Tab,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.0.0",
-    type: TabPanel,
+    version: "21.0.3",
+    type: Tab,
     isStandalone: true,
-    selector: "[ngTabPanel]",
+    selector: "[ngTab]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -533,6 +536,13 @@ class TabPanel {
         isRequired: false,
         transformFunction: null
       },
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
       value: {
         classPropertyName: "value",
         publicName: "value",
@@ -543,47 +553,42 @@ class TabPanel {
     },
     host: {
       attributes: {
-        "role": "tabpanel"
+        "role": "tab"
       },
       properties: {
+        "attr.data-active": "active()",
         "attr.id": "_pattern.id()",
         "attr.tabindex": "_pattern.tabIndex()",
-        "attr.inert": "!visible() ? true : null",
-        "attr.aria-labelledby": "_pattern.labelledBy()"
+        "attr.aria-selected": "selected()",
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.aria-controls": "_pattern.controls()"
       }
     },
-    exportAs: ["ngTabPanel"],
-    hostDirectives: [{
-      directive: i1.DeferredContentAware,
-      inputs: ["preserveContent", "preserveContent"]
-    }],
+    exportAs: ["ngTab"],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
-  type: TabPanel,
+  type: Tab,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngTabPanel]',
-      exportAs: 'ngTabPanel',
+      selector: '[ngTab]',
+      exportAs: 'ngTab',
       host: {
-        'role': 'tabpanel',
+        'role': 'tab',
+        '[attr.data-active]': 'active()',
         '[attr.id]': '_pattern.id()',
         '[attr.tabindex]': '_pattern.tabIndex()',
-        '[attr.inert]': '!visible() ? true : null',
-        '[attr.aria-labelledby]': '_pattern.labelledBy()'
-      },
-      hostDirectives: [{
-        directive: DeferredContentAware,
-        inputs: ['preserveContent']
-      }]
+        '[attr.aria-selected]': 'selected()',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.aria-controls]': '_pattern.controls()'
+      }
     }]
   }],
-  ctorParameters: () => [],
   propDecorators: {
     id: [{
       type: i0.Input,
@@ -593,6 +598,14 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
+    disabled: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "disabled",
+        required: false
+      }]
+    }],
     value: [{
       type: i0.Input,
       args: [{
@@ -603,10 +616,11 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
+
 class TabContent {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
     type: TabContent,
     deps: [],
@@ -614,7 +628,7 @@ class TabContent {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     type: TabContent,
     isStandalone: true,
     selector: "ng-template[ngTabContent]",
@@ -627,7 +641,7 @@ class TabContent {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
   type: TabContent,
   decorators: [{