fixup! build: create angular aria package

Author: wagnermaciel

src/aria/accordion/accordion.spec.ts

@@ -381,7 +381,7 @@ describe('AccordionGroup', () => {
 @Component({
   template: `
     <div
-      accordionGroup
+      ngAccordionGroup
       [(value)]="value"
       [multiExpandable]="multiExpandable()"
       [disabled]="disabledGroup()"
@@ -391,15 +391,15 @@ describe('AccordionGroup', () => {
       @for (item of items(); track item.value) {
         <div class="item-container">
           <button
-            accordionTrigger
+            ngAccordionTrigger
             [value]="item.value"
             [disabled]="item.disabled"
           >{{ item.header }}</button>
           <div
-            accordionPanel
+            ngAccordionPanel
             [value]="item.value"
           >
-            <ng-template accordionContent>
+            <ng-template ngAccordionContent>
               {{ item.content }}
             </ng-template>
           </div>

src/aria/accordion/accordion.ts

@@ -33,16 +33,16 @@ import {
  * associated `AccordionTrigger`.
  */
 @Directive({
-  selector: '[accordionPanel]',
-  exportAs: 'accordionPanel',
+  selector: '[ngAccordionPanel]',
+  exportAs: 'ngAccordionPanel',
   hostDirectives: [
     {
       directive: DeferredContentAware,
       inputs: ['preserveContent'],
     },
   ],
   host: {
-    'class': 'accordion-panel',
+    'class': 'ng-accordion-panel',
     'role': 'region',
     '[attr.id]': 'pattern.id()',
     '[attr.aria-labelledby]': 'pattern.accordionTrigger()?.id()',
@@ -83,10 +83,10 @@ export class AccordionPanel {
  * state of an associated `AccordionPanel`.
  */
 @Directive({
-  selector: '[accordionTrigger]',
-  exportAs: 'accordionTrigger',
+  selector: '[ngAccordionTrigger]',
+  exportAs: 'ngAccordionTrigger',
   host: {
-    'class': 'accordion-trigger',
+    'class': 'ng-accordion-trigger',
     '[attr.data-active]': 'pattern.active()',
     'role': 'button',
     '[id]': 'pattern.id()',
@@ -102,7 +102,7 @@ export class AccordionPanel {
 })
 export class AccordionTrigger {
   /** A global unique identifier for the trigger. */
-  private readonly _id = inject(_IdGenerator).getId('accordion-trigger-');
+  private readonly _id = inject(_IdGenerator).getId('ng-accordion-trigger-');
 
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
@@ -142,10 +142,10 @@ export class AccordionTrigger {
  * interactions of the accordion, such as keyboard navigation and expansion mode.
  */
 @Directive({
-  selector: '[accordionGroup]',
-  exportAs: 'accordionGroup',
+  selector: '[ngAccordionGroup]',
+  exportAs: 'ngAccordionGroup',
   host: {
-    'class': 'accordion-group',
+    'class': 'ng-accordion-group',
   },
 })
 export class AccordionGroup {
@@ -211,7 +211,7 @@ export class AccordionGroup {
  * for a `AccordionPanel`. This content can be lazily loaded.
  */
 @Directive({
-  selector: 'ng-template[accordionContent]',
+  selector: 'ng-template[ngAccordionContent]',
   hostDirectives: [DeferredContent],
 })
 export class AccordionContent {}

src/aria/combobox/combobox.spec.ts

@@ -1008,17 +1008,17 @@ describe('Combobox', () => {
 @Component({
   template: `
 <div
-  combobox
-  #combobox="combobox"
+  ngCombobox
+  #combobox="ngCombobox"
   [filterMode]="filterMode()"
 >
   <input
-    comboboxInput
+    ngComboboxInput
     placeholder="Search..."
     [(value)]="searchString"
   />
 
-  <ng-template comboboxPopupContainer>
+  <ng-template ngComboboxPopupContainer>
     <div listbox [(value)]="value">
       @for (option of options(); track option) {
         <div
@@ -1050,18 +1050,18 @@ class ComboboxListboxExample {
 @Component({
   template: `
 <div
-  #combobox="combobox"
-  combobox
+  ngCombobox
+  #combobox="ngCombobox"
   [firstMatch]="firstMatch()"
   [filterMode]="filterMode()"
 >
   <input
-    comboboxInput
+    ngComboboxInput
     placeholder="Search..."
     [(value)]="searchString"
   />
 
-  <ng-template comboboxPopupContainer>
+  <ng-template ngComboboxPopupContainer>
     <ul tree #tree="tree" [(value)]="value">
       <ng-template
         [ngTemplateOutlet]="treeNodes"

src/aria/combobox/combobox.ts

@@ -26,8 +26,8 @@ import {
 } from '@angular/aria/ui-patterns';
 
 @Directive({
-  selector: '[combobox]',
-  exportAs: 'combobox',
+  selector: '[ngCombobox]',
+  exportAs: 'ngCombobox',
   hostDirectives: [
     {
       directive: DeferredContentAware,
@@ -90,8 +90,8 @@ export class Combobox<V> {
 }
 
 @Directive({
-  selector: 'input[comboboxInput]',
-  exportAs: 'comboboxInput',
+  selector: 'input[ngComboboxInput]',
+  exportAs: 'ngComboboxInput',
   host: {
     'role': 'combobox',
     '[value]': 'value()',
@@ -127,15 +127,15 @@ export class ComboboxInput {
 }
 
 @Directive({
-  selector: 'ng-template[comboboxPopupContainer]',
-  exportAs: 'comboboxPopupContainer',
+  selector: 'ng-template[ngComboboxPopupContainer]',
+  exportAs: 'ngComboboxPopupContainer',
   hostDirectives: [DeferredContent],
 })
 export class ComboboxPopupContainer {}
 
 @Directive({
-  selector: '[comboboxPopup]',
-  exportAs: 'comboboxPopup',
+  selector: '[ngComboboxPopup]',
+  exportAs: 'ngComboboxPopup',
 })
 export class ComboboxPopup<V> {
   /** The combobox that the popup belongs to. */

src/aria/listbox/listbox.spec.ts

@@ -742,7 +742,7 @@ interface TestOption {
 @Component({
   template: `
     <ul
-      listbox
+      ngListbox
       aria-label="Test Listbox"
       [(value)]="value"
       [disabled]="disabled"
@@ -755,7 +755,7 @@ interface TestOption {
       [selectionMode]="selectionMode"
       [typeaheadDelay]="typeaheadDelay">
       @for (option of options(); track option.value) {
-        <li option [value]="option.value" [disabled]="option.disabled" [label]="option.label">{{ option.label }}</li>
+        <li ngOption [value]="option.value" [disabled]="option.disabled" [label]="option.label">{{ option.label }}</li>
       }
     </ul>
   `,
@@ -784,10 +784,10 @@ class ListboxExample {
 
 @Component({
   template: `
-    <ul aria-label="Test Listbox" listbox>
-      <li option [value]="0">0</li>
-      <li option [value]="1">1</li>
-      <li option [value]="2">2</li>
+    <ul aria-label="Test Listbox" ngListbox>
+      <li ngOption [value]="0">0</li>
+      <li ngOption [value]="1">1</li>
+      <li ngOption [value]="2">2</li>
     </ul>
   `,
   imports: [Listbox, Option],

src/aria/listbox/listbox.ts

@@ -32,19 +32,19 @@ import {ComboboxPopup} from '../combobox';
  * to be used in conjunction with Option as follows:
  *
  * ```html
- * <ul listbox>
- *   <li [value]="1" option>Item 1</li>
- *   <li [value]="2" option>Item 2</li>
- *   <li [value]="3" option>Item 3</li>
+ * <ul ngListbox>
+ *   <li [value]="1" ngOption>Item 1</li>
+ *   <li [value]="2" ngOption>Item 2</li>
+ *   <li [value]="3" ngOption>Item 3</li>
  * </ul>
  * ```
  */
 @Directive({
-  selector: '[listbox]',
-  exportAs: 'listbox',
+  selector: '[ngListbox]',
+  exportAs: 'ngListbox',
   host: {
     'role': 'listbox',
-    'class': 'listbox',
+    'class': 'ng-listbox',
     '[attr.id]': 'id()',
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-readonly]': 'pattern.readonly()',
@@ -60,7 +60,7 @@ import {ComboboxPopup} from '../combobox';
 })
 export class Listbox<V> {
   /** A unique identifier for the listbox. */
-  private readonly _generatedId = inject(_IdGenerator).getId('listbox-');
+  private readonly _generatedId = inject(_IdGenerator).getId('ng-listbox-');
 
   // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
   /** A unique identifier for the listbox. */
@@ -78,15 +78,15 @@ export class Listbox<V> {
   private readonly _directionality = inject(Directionality);
 
   /** The Options nested inside of the Listbox. */
-  private readonly _Options = contentChildren(Option, {descendants: true});
+  private readonly _options = contentChildren(Option, {descendants: true});
 
   /** A signal wrapper for directionality. */
   protected textDirection = toSignal(this._directionality.change, {
     initialValue: this._directionality.value,
   });
 
   /** The Option UIPatterns of the child Options. */
-  protected items = computed(() => this._Options().map(option => option.pattern));
+  protected items = computed(() => this._options().map(option => option.pattern));
 
   /** Whether the list is vertically or horizontally oriented. */
   orientation = input<'vertical' | 'horizontal'>('vertical');
@@ -187,11 +187,11 @@ export class Listbox<V> {
 
 /** A selectable option in a Listbox. */
 @Directive({
-  selector: '[option]',
-  exportAs: 'option',
+  selector: '[ngOption]',
+  exportAs: 'ngOption',
   host: {
     'role': 'option',
-    'class': 'option',
+    'class': 'ng-option',
     '[attr.data-active]': 'pattern.active()',
     '[attr.id]': 'pattern.id()',
     '[attr.tabindex]': 'pattern.tabindex()',
@@ -204,10 +204,10 @@ export class Option<V> {
   private readonly _elementRef = inject(ElementRef);
 
   /** The parent Listbox. */
-  private readonly _Listbox = inject(Listbox);
+  private readonly _listbox = inject(Listbox);
 
   /** A unique identifier for the option. */
-  private readonly _generatedId = inject(_IdGenerator).getId('option-');
+  private readonly _generatedId = inject(_IdGenerator).getId('ng-option-');
 
   // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
   /** A unique identifier for the option. */
@@ -219,7 +219,7 @@ export class Option<V> {
   protected searchTerm = computed(() => this.label() ?? this.element().textContent);
 
   /** The parent Listbox UIPattern. */
-  protected listbox = computed(() => this._Listbox.pattern);
+  protected listbox = computed(() => this._listbox.pattern);
 
   /** A reference to the option element to be focused on navigation. */
   protected element = computed(() => this._elementRef.nativeElement);

src/aria/radio-group/radio-group.spec.ts

@@ -532,9 +532,9 @@ interface TestOption {
       [focusMode]="focusMode"
       [orientation]="orientation"
       [skipDisabled]="skipDisabled"
-      radioGroup>
+      ngRadioGroup>
       @for (option of options(); track option.value) {
-        <div radioButton [value]="option.value" [disabled]="option.disabled">{{ option.label }}</div>
+        <div ngRadioButton [value]="option.value" [disabled]="option.disabled">{{ option.label }}</div>
       }
     </div>
   `,
@@ -559,10 +559,10 @@ class RadioGroupExample {
 
 @Component({
   template: `
-  <div radioGroup>
-    <div radioButton [value]="0">0</div>
-    <div radioButton [value]="1">1</div>
-    <div radioButton [value]="2">2</div>
+  <div ngRadioGroup>
+    <div ngRadioButton [value]="0">0</div>
+    <div ngRadioButton [value]="1">1</div>
+    <div ngRadioButton [value]="2">2</div>
   </div>
   `,
   imports: [RadioGroup, RadioButton],