Class ToolbarWidget

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

  },
})
export class ToolbarWidget 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>(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>(() => 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>(TOOLBAR_WIDGET_GROUP, {optional: true});

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

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

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

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

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