feat(docs-infra): disable "status" selector in API list when displaying only packages (#25718)

Closes #25708

PR Close #25718

aio/src/app/custom-elements/api/api-list.component.html

@@ -10,6 +10,7 @@
   <aio-select (change)="setStatus($event.option)"
               [options]="statuses"
               [selected]="status"
+              [disabled]="type.value === 'package'"
               label="Status:">
   </aio-select>
 

aio/src/app/shared/select/select.component.html

@@ -1,5 +1,5 @@
 <div class="form-select-menu">
-  <button class="form-select-button" (click)="toggleOptions()">
+  <button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled">
     <strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
   </button>
   <ul class="form-select-dropdown" *ngIf="showOptions">

aio/src/app/shared/select/select.component.spec.ts

@@ -67,6 +67,28 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(getOptionContainer()).toEqual(null);
     });
+
+    it('should be disabled if the component is disabled', () => {
+      host.options = options;
+      fixture.detectChanges();
+      expect(getButton().disabled).toBe(false);
+      expect(getButton().getAttribute('disabled')).toBe(null);
+
+      host.disabled = true;
+      fixture.detectChanges();
+      expect(getButton().disabled).toBe(true);
+      expect(getButton().getAttribute('disabled')).toBeDefined();
+    });
+
+    it('should not toggle the visibility of the options list if disabled', () => {
+      host.options = options;
+      host.disabled = true;
+
+      fixture.detectChanges();
+      getButton().click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
   });
 
   describe('options list', () => {
@@ -138,7 +160,8 @@ describe('SelectComponent', () => {
               [options]="options"
               [selected]="selected"
               [label]="label"
-              [showSymbol]="showSymbol">
+              [showSymbol]="showSymbol"
+              [disabled]="disabled">
     </aio-select>`
 })
 class HostComponent {
@@ -147,6 +170,7 @@ class HostComponent {
   selected: Option;
   label: string;
   showSymbol: boolean;
+  disabled: boolean;
 }
 
 function getButton(): HTMLButtonElement {

aio/src/app/shared/select/select.component.ts

@@ -25,6 +25,9 @@ export class SelectComponent implements OnInit {
   @Input()
   label: string;
 
+  @Input()
+  disabled: boolean;
+
   showOptions = false;
 
   constructor(private hostElement: ElementRef) {}

aio/src/styles/2-modules/_select-menu.scss

@@ -30,6 +30,11 @@
     border: 1px solid $blue-400;
     box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
   }
+
+  &[disabled] {
+    color: lightgrey;
+    cursor: not-allowed;
+  }
 }
 
 .form-select-dropdown {