Class ToolbarWidget

src/aria/toolbar/toolbar-widget.ts:59–114

  },
})
export class ToolbarWidget<V> implements OnInit, OnDestroy {
  /** A reference to the host element. */
  private readonly _elementRef = inject(ElementRef);

  /** A reference to the host element. */
  readonly element = this._elementRef.nativeElement as HTMLElement;

  /** The parent Toolbar. */
  private readonly _toolbar = inject<Toolbar<V>>(Toolbar);

  /** A unique identifier for the widget. */
  readonly id = input(inject(_IdGenerator).getId('ng-toolbar-widget-', true));

  /** The parent Toolbar UIPattern. */
  readonly _toolbarPattern = computed<ToolbarPattern<V>>(() => this._toolbar._pattern);

  /** Whether the widget is disabled. */
  readonly disabled = input(false, {transform: booleanAttribute});

  /** Whether the widget is 'hard' disabled, which is different from `aria-disabled`. A hard disabled widget cannot receive focus. */
  readonly hardDisabled = computed(() => this._pattern.disabled() && !this._toolbar.softDisabled());

  /** The optional ToolbarWidgetGroup this widget belongs to. */
  readonly _group = inject<ToolbarWidgetGroup<V>>(TOOLBAR_WIDGET_GROUP, {optional: true});

  /** The value associated with the widget. */
  readonly value = input.required<V>();

  /** Whether the widget is currently active (focused). */
  readonly active = computed(() => this._pattern.active());

  /** Whether the widget is selected (only relevant in a selection group). */
  readonly selected = () => this._pattern.selected();

  private readonly _groupPattern: SignalLike<
    ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined
  > = () => this._group?._pattern;

  /** The ToolbarWidget UIPattern. */
  readonly _pattern = new ToolbarWidgetPattern<V>({
    ...this,
    group: this._groupPattern,
    toolbar: this._toolbarPattern,
    id: this.id,
    value: this.value,
    element: () => this.element,
  });

  ngOnInit() {
    this._toolbar._collection.register(this);
  }

  ngOnDestroy() {
    this._toolbar._collection.unregister(this);
  }
}