import { Directive } from '@angular/core';
import { CdkListbox } from '@angular/cdk/listbox';

/**
 * Directive that adds UI styling to an Angular CDK listbox
 * Simplifies listbox creation by exposing common CDK listbox inputs/outputs
 * with more intuitive names for the application design system.
 *
 * Usage:
 * ```html
 * <div uiList [value]="selected" (valueChange)="handleChange($event)"
 *      [compareWith]="compareItems" [disabled]="isDisabled">
 *   <!-- List items go here -->
 * </div>
 * ```
 */
@Directive({
  selector: '[uiListbox]',
  host: {
    class: 'ui-listbox',
  },
  hostDirectives: [
    {
      directive: CdkListbox,
      inputs: [
        'cdkListboxValue: value',
        'cdkListboxCompareWith: compareWith',
        'cdkListboxDisabled: disabled',
      ],
      outputs: ['cdkListboxValueChange: valueChange'],
    },
  ],
})
export class ListboxDirective {}
