@angular/aria 22.0.0-next.6 → 22.0.0-next.8

package/fesm2022/tabs.mjs

@@ -1,32 +1,119 @@
 import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, signal, computed, input, booleanAttribute, model, afterRenderEffect, Directive } from '@angular/core';
-import { Directionality } from '@angular/cdk/bidi';
-import { TabListPattern, TabPanelPattern, TabPattern } from './_tabs-chunk.mjs';
-import { sortDirectives } from './_element-chunk.mjs';
+import { InjectionToken, inject, ElementRef, signal, computed, afterNextRender, Directive, input, booleanAttribute, model, linkedSignal, afterRenderEffect } from '@angular/core';
+import { TabListPattern, TabPattern, TabPanelPattern } from './_tabs-chunk.mjs';
 import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.mjs';
+import { Directionality } from '@angular/cdk/bidi';
+import { SortedCollection } from './_collection-chunk.mjs';
 import './_expansion-chunk.mjs';
-import './_signal-like-chunk.mjs';
-import '@angular/core/primitives/signals';
 import './_list-navigation-chunk.mjs';
 import './_click-event-manager-chunk.mjs';
+import '@angular/core/primitives/signals';
 
 const TABS = new InjectionToken('TABS');
+const TAB_LIST = new InjectionToken('TAB_LIST');
 
-class TabList {
+class Tabs {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _tabs = inject(TABS);
-  _unorderedTabs = signal(new Set(), ...(ngDevMode ? [{
-    debugName: "_unorderedTabs"
+  _tabList = signal(undefined, ...(ngDevMode ? [{
+    debugName: "_tabList"
   }] : []));
-  textDirection = inject(Directionality).valueSignal;
-  _tabPatterns = computed(() => [...this._unorderedTabs()].sort(sortDirectives).map(tab => tab._pattern), ...(ngDevMode ? [{
+  _collection = new SortedCollection();
+  _tabPatterns = computed(() => this._tabList()?._tabPatterns(), ...(ngDevMode ? [{
+    debugName: "_tabPatterns"
+  }] : []));
+  _tabPanelPatterns = computed(() => this._collection.orderedItems().map(tabpanel => tabpanel._pattern), ...(ngDevMode ? [{
+    debugName: "_tabPanelPatterns"
+  }] : []));
+  _panelMap = computed(() => {
+    const map = new Map();
+    for (const panel of this._collection.orderedItems()) {
+      map.set(panel.value(), panel._pattern);
+    }
+    return map;
+  }, ...(ngDevMode ? [{
+    debugName: "_panelMap"
+  }] : []));
+  _tabMap = computed(() => {
+    const map = new Map();
+    const tabList = this._tabList();
+    if (tabList) {
+      for (const tab of tabList._collection.orderedItems()) {
+        map.set(tab.value(), tab._pattern);
+      }
+    }
+    return map;
+  }, ...(ngDevMode ? [{
+    debugName: "_tabMap"
+  }] : []));
+  constructor() {
+    afterNextRender(() => {
+      this._collection.startObserving(this.element);
+    });
+  }
+  ngOnDestroy() {
+    this._collection.stopObserving();
+  }
+  _register(child) {
+    this._tabList.set(child);
+  }
+  _unregister() {
+    this._tabList.set(undefined);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.10",
+    ngImport: i0,
+    type: Tabs,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "22.0.0-next.10",
+    type: Tabs,
+    isStandalone: true,
+    selector: "[ngTabs]",
+    providers: [{
+      provide: TABS,
+      useExisting: Tabs
+    }],
+    exportAs: ["ngTabs"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "22.0.0-next.10",
+  ngImport: i0,
+  type: Tabs,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngTabs]',
+      exportAs: 'ngTabs',
+      providers: [{
+        provide: TABS,
+        useExisting: Tabs
+      }]
+    }]
+  }],
+  ctorParameters: () => []
+});
+
+class TabList {
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
+  _tabsParent = inject(TABS);
+  _collection = new SortedCollection();
+  _tabPatterns = computed(() => this._collection.orderedItems().map(tab => tab._pattern), ...(ngDevMode ? [{
     debugName: "_tabPatterns"
   }] : []));
   orientation = input('horizontal', ...(ngDevMode ? [{
     debugName: "orientation"
   }] : []));
+  textDirection = inject(Directionality).valueSignal;
   wrap = input(true, {
     ...(ngDevMode ? {
       debugName: "wrap"
@@ -48,6 +135,12 @@ class TabList {
   selectedTab = model(...(ngDevMode ? [undefined, {
     debugName: "selectedTab"
   }] : []));
+  _selectedTabPattern = linkedSignal(() => {
+    const tab = this.findTab(this.selectedTab());
+    return tab?._pattern;
+  }, ...(ngDevMode ? [{
+    debugName: "_selectedTabPattern"
+  }] : []));
   disabled = input(false, {
     ...(ngDevMode ? {
       debugName: "disabled"
@@ -56,50 +149,42 @@ class TabList {
   });
   _pattern = new TabListPattern({
     ...this,
-    items: this._tabPatterns,
+    element: () => this._elementRef.nativeElement,
     activeItem: signal(undefined),
-    element: () => this._elementRef.nativeElement
+    items: this._tabPatterns,
+    selectedTab: this._selectedTabPattern
   });
   constructor() {
+    afterNextRender(() => {
+      this._collection.startObserving(this.element);
+    });
     afterRenderEffect(() => {
       this._pattern.setDefaultStateEffect();
     });
-    afterRenderEffect(() => {
-      const tab = this._pattern.selectedTab();
-      if (tab) {
-        this.selectedTab.set(tab.value());
-      }
-    });
-    afterRenderEffect(() => {
-      const value = this.selectedTab();
-      if (value) {
-        this._tabPatterns().forEach(tab => tab.expanded.set(false));
-        const tab = this._tabPatterns().find(t => t.value() === value);
-        this._pattern.selectedTab.set(tab);
-        tab?.expanded.set(true);
+    afterRenderEffect({
+      write: () => {
+        const pattern = this._selectedTabPattern();
+        const tab = this._collection.orderedItems().find(tab => tab._pattern == pattern);
+        this.selectedTab.set(tab?.value());
       }
     });
   }
   ngOnInit() {
-    this._tabs._register(this);
+    this._tabsParent._register(this);
   }
   ngOnDestroy() {
-    this._tabs._unregister(this);
-  }
-  _register(child) {
-    this._unorderedTabs().add(child);
-    this._unorderedTabs.set(new Set(this._unorderedTabs()));
-  }
-  _unregister(child) {
-    this._unorderedTabs().delete(child);
-    this._unorderedTabs.set(new Set(this._unorderedTabs()));
+    this._tabsParent._unregister();
+    this._collection.stopObserving();
   }
   open(value) {
-    return this._pattern.open(value);
+    return this._pattern.open(this.findTab(value)?._pattern);
+  }
+  findTab(value) {
+    return value ? this._collection.orderedItems().find(tab => tab.value() === value) : undefined;
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     ngImport: i0,
     type: TabList,
     deps: [],
@@ -107,7 +192,7 @@ class TabList {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     type: TabList,
     isStandalone: true,
     selector: "[ngTabList]",
@@ -181,13 +266,17 @@ class TabList {
         "attr.aria-activedescendant": "_pattern.activeDescendant()"
       }
     },
+    providers: [{
+      provide: TAB_LIST,
+      useExisting: TabList
+    }],
     exportAs: ["ngTabList"],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.10",
   ngImport: i0,
   type: TabList,
   decorators: [{
@@ -204,7 +293,11 @@ i0.ɵɵngDeclareClassMetadata({
         '(keydown)': '_pattern.onKeydown($event)',
         '(click)': '_pattern.onClick($event)',
         '(focusin)': '_pattern.onFocusIn()'
-      }
+      },
+      providers: [{
+        provide: TAB_LIST,
+        useExisting: TabList
+      }]
     }]
   }],
   ctorParameters: () => [],
@@ -271,50 +364,62 @@ i0.ɵɵngDeclareClassMetadata({
   }
 });
 
-class TabPanel {
+class Tab {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _deferredContentAware = inject(DeferredContentAware);
-  _tabs = inject(TABS);
-  id = input(inject(_IdGenerator).getId('ng-tabpanel-', true), ...(ngDevMode ? [{
+  _tabList = inject(TAB_LIST);
+  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"
+  _tabpanelPattern = computed(() => {
+    return this._tabList._tabsParent._panelMap().get(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
+    element: () => this.element,
+    tabList: () => this._tabList._pattern,
+    tabPanel: this._tabpanelPattern
   });
-  constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
+  open() {
+    this._pattern.open();
   }
   ngOnInit() {
-    this._tabs._register(this);
+    this._tabList._collection.register(this);
   }
   ngOnDestroy() {
-    this._tabs._unregister(this);
+    this._tabList._collection.unregister(this);
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     ngImport: i0,
-    type: TabPanel,
+    type: Tab,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.6",
-    type: TabPanel,
+    version: "22.0.0-next.10",
+    type: Tab,
     isStandalone: true,
-    selector: "[ngTabPanel]",
+    selector: "[ngTab]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -323,6 +428,13 @@ class TabPanel {
         isRequired: false,
         transformFunction: null
       },
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
       value: {
         classPropertyName: "value",
         publicName: "value",
@@ -333,47 +445,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: DeferredContentAware,
-      inputs: ["preserveContent", "preserveContent"]
-    }],
+    exportAs: ["ngTab"],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.10",
   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,
@@ -383,6 +490,14 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
+    disabled: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "disabled",
+        required: false
+      }]
+    }],
     value: [{
       type: i0.Input,
       args: [{
@@ -394,138 +509,52 @@ i0.ɵɵngDeclareClassMetadata({
   }
 });
 
-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: "22.0.0-next.6",
-    ngImport: i0,
-    type: Tabs,
-    deps: [],
-    target: i0.ɵɵFactoryTarget.Directive
-  });
-  static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "14.0.0",
-    version: "22.0.0-next.6",
-    type: Tabs,
-    isStandalone: true,
-    selector: "[ngTabs]",
-    providers: [{
-      provide: TABS,
-      useExisting: Tabs
-    }],
-    exportAs: ["ngTabs"],
-    ngImport: i0
-  });
-}
-i0.ɵɵngDeclareClassMetadata({
-  minVersion: "12.0.0",
-  version: "22.0.0-next.6",
-  ngImport: i0,
-  type: Tabs,
-  decorators: [{
-    type: Directive,
-    args: [{
-      selector: '[ngTabs]',
-      exportAs: 'ngTabs',
-      providers: [{
-        provide: TABS,
-        useExisting: Tabs
-      }]
-    }]
-  }]
-});
-
-class Tab {
+class TabPanel {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
+  _deferredContentAware = inject(DeferredContentAware);
   _tabs = inject(TABS);
-  _tabList = inject(TabList);
-  id = input(inject(_IdGenerator).getId('ng-tab-', true), ...(ngDevMode ? [{
+  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(() => {
+    return this._tabs._tabMap().get(this.value());
+  }, ...(ngDevMode ? [{
+    debugName: "_tabPattern"
   }] : []));
-  disabled = input(false, {
-    ...(ngDevMode ? {
-      debugName: "disabled"
-    } : {}),
-    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._collection.register(this);
   }
   ngOnDestroy() {
-    this._tabList._unregister(this);
+    this._tabs._collection.unregister(this);
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     ngImport: i0,
-    type: Tab,
+    type: TabPanel,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "22.0.0-next.6",
-    type: Tab,
+    version: "22.0.0-next.10",
+    type: TabPanel,
     isStandalone: true,
-    selector: "[ngTab]",
+    selector: "[ngTabPanel]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -534,13 +563,6 @@ class Tab {
         isRequired: false,
         transformFunction: null
       },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
       value: {
         classPropertyName: "value",
         publicName: "value",
@@ -551,42 +573,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: DeferredContentAware,
+      inputs: ["preserveContent", "preserveContent"]
+    }],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.10",
   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,
@@ -596,14 +623,6 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
-    disabled: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "disabled",
-        required: false
-      }]
-    }],
     value: [{
       type: i0.Input,
       args: [{
@@ -618,7 +637,7 @@ i0.ɵɵngDeclareClassMetadata({
 class TabContent {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     ngImport: i0,
     type: TabContent,
     deps: [],
@@ -626,7 +645,7 @@ class TabContent {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     type: TabContent,
     isStandalone: true,
     selector: "ng-template[ngTabContent]",
@@ -639,7 +658,7 @@ class TabContent {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.10",
   ngImport: i0,
   type: TabContent,
   decorators: [{