How to use the @dynatrace/barista-components/core.mixinTabIndex function in @dynatrace/barista-components

import { DtRadioGroup } from './radio-group';

let nextUniqueId = 0;

/** Change event object emitted by DtRadioButton */
export interface DtRadioChange {
  source: DtRadioButton;
  value: T | null;
}

// Boilerplate for applying mixins to DtRadioButton.
export class DtRadioButtonBase {
  /** Whether the radio button is disabled */
  disabled: boolean;
}
export const _DtRadioButtonMixinBase = mixinTabIndex(DtRadioButtonBase);

@Component({
  selector: 'dt-radio-button',
  exportAs: 'dtRadioButton',
  templateUrl: 'radio.html',
  styleUrls: ['radio.scss'],
  inputs: ['tabIndex'],
  host: {
    class: 'dt-radio-button',
    '[class.dt-radio-checked]': 'checked',
    '[class.dt-radio-disabled]': 'disabled',
    '[attr.id]': 'id',
    '(focus)': '_inputElement.nativeElement.focus()',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.Emulated,

/** Current value of the select that emitted the event. */
    public value: T,
  ) {}
}

// Boilerplate for applying mixins to DtSelect.
export class DtSelectBase {
  constructor(
    public _elementRef: ElementRef,
    public _defaultErrorStateMatcher: ErrorStateMatcher,
    public _parentForm: NgForm,
    public _parentFormGroup: FormGroupDirective,
    public ngControl: NgControl,
  ) {}
}
export const _DtSelectMixinBase = mixinTabIndex(
  mixinDisabled(mixinErrorState(DtSelectBase)),
);

export function getDtSelectNonFunctionValueError(): Error {
  return Error('`compareWith` must be a function.');
}

@Component({
  selector: 'dt-select',
  exportAs: 'dtSelect',
  templateUrl: 'select.html',
  styleUrls: ['select.scss'],
  inputs: ['disabled', 'tabIndex'],
  host: {
    role: 'listbox',
    class: 'dt-select',

export const DT_SWITCH_CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  // tslint:disable-next-line: no-use-before-declare no-forward-ref
  useExisting: forwardRef(() => DtSwitch),
  multi: true,
};

/** Change event object emitted by DtSwitch */
export interface DtSwitchChange {
  source: DtSwitch;
  checked: boolean;
}

// Boilerplate for applying mixins to DtSwitch.
export class DtSwitchBase {}
export const _DtSwitchMixinBase = mixinTabIndex(mixinDisabled(DtSwitchBase));

@Component({
  selector: 'dt-switch',
  templateUrl: 'switch.html',
  styleUrls: ['switch.scss'],
  exportAs: 'dtSwitch',
  inputs: ['disabled', 'tabIndex'],
  host: {
    class: 'dt-switch',
    '[id]': 'id',
    '[class.dt-switch-checked]': 'checked',
    '[class.dt-switch-disabled]': 'disabled',
    '(focus)': '_inputElement.nativeElement.focus()',
  },
  providers: [DT_SWITCH_CONTROL_VALUE_ACCESSOR],
  preserveWhitespaces: false,

overlayY: 'top',
    offsetY: DT_SELECTION_AREA_OVERLAY_SPACING,
  },
];

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
export class DtSelectionAreaContainerBase {}

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
export const _DtSelectionAreaContainerMixin = mixinTabIndex(
  // tslint:disable-next-line: deprecation
  mixinDisabled(DtSelectionAreaContainerBase),
);

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
@Component({
  selector: 'dt-selection-area-container',
  exportAs: 'dtSelectionAreaContainer',
  templateUrl: 'selection-area-container.html',
  styleUrls: ['selection-area-container.scss'],
  host: {
    class: 'dt-selection-area-container, dt-no-pointer',
  },

removeCssClass,
} from '@dynatrace/barista-components/core';

import { DtSelectionArea } from './selection-area';

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
export class DtSelectionAreaOriginBase {}

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
export const _DtSelectionAreaOriginMixin = mixinTabIndex(
  // tslint:disable-next-line: deprecation
  mixinDisabled(DtSelectionAreaOriginBase),
);

/**
 * @deprecated The selection area will be replaced with the chart selection area
 * @breaking-change To be removed with 5.0.0.
 */
@Directive({
  selector: '[dtSelectionArea]',
  exportAs: 'dtSelectionAreaOrigin',
  host: {
    class: 'dt-selection-area-origin',
    '[attr.tabindex]': 'tabIndex',
    '(mousedown)': '_handleMousedown($event)',
    '(keydown)': '_handleKeyDown($event)',

@Directive({
  selector: `dt-tile-subtitle, [dt-tile-subtitle], [dtTileSubtitle]`,
  exportAs: 'dtTileSubtitle',
  host: {
    class: 'dt-tile-subtitle',
  },
})
export class DtTileSubtitle {}

export type DtTileThemePalette = 'main' | 'error' | 'recovered';

// Boilerplate for applying mixins to DtTile.
export class DtTileBase {
  constructor(public _elementRef: ElementRef) {}
}
export const _DtTileMixinBase = mixinTabIndex(
  mixinDisabled(
    mixinColor, DtTileThemePalette>(DtTileBase),
  ),
);

@Component({
  selector: 'dt-tile',
  exportAs: 'dtTile',
  templateUrl: 'tile.html',
  styleUrls: ['tile.scss'],
  inputs: ['disabled', 'tabIndex', 'color'],
  host: {
    role: 'button',
    '[attr.tabindex]': 'tabIndex',
    '[attr.aria-disabled]': 'disabled.toString()',
    class: 'dt-tile',

overlayX: 'start',
    overlayY: 'bottom',
    offsetX: DT_CONTEXT_DIALOG_OVERLAY_CONFIG,
  },
  {
    originX: 'end',
    originY: 'center',
    overlayX: 'start',
    overlayY: 'center',
    offsetX: DT_CONTEXT_DIALOG_OVERLAY_CONFIG,
  },
];

// Boilerplate for applying mixins to DtContextDialog.
export class DtContextDialogBase {}
export const _DtContextDialogMixinBase = mixinTabIndex(
  mixinDisabled(DtContextDialogBase),
);

@Component({
  selector: 'dt-context-dialog',
  templateUrl: 'context-dialog.html',
  styleUrls: ['context-dialog.scss'],
  host: {
    class: 'dt-context-dialog',
    '[attr.aria-disabled]': 'disabled.toString()',
    'attr.aria-hidden': 'true',
  },
  inputs: ['disabled', 'tabIndex'],
  encapsulation: ViewEncapsulation.Emulated,
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,

CanDisable,
  HasTabIndex,
  mixinDisabled,
  mixinTabIndex,
} from '@dynatrace/barista-components/core';

/** Change event emitted for a change in the DtToggleButton. */
export interface DtToggleButtonChange {
  source: DtToggleButtonItem;
  value: T | null;
  isUserInput: boolean;
}

export class DtToggleButtonBase {}

export const _DtToggleButtonMixinBase = mixinTabIndex(
  mixinDisabled(DtToggleButtonBase),
);

/** ToggleButtonItem as a building part of the DtToggleButtonGroup */
@Component({
  selector: 'button[dt-toggle-button-item]',
  exportAs: 'dtToggleButtonItem',
  templateUrl: 'toggle-button-item.html',
  styleUrls: ['toggle-button-item.scss'],
  inputs: ['disabled', 'tabIndex'],
  host: {
    class: 'dt-toggle-button-item',
    role: 'radio',
    '[class.dt-toggle-button-item-selected]': 'selected',
    '[class.dt-toggle-button-item-disabled]': 'disabled',
    '[attr.disabled]': 'disabled === true ? true : null',

} from '@angular/core';

import {
  CanColor,
  CanDisable,
  Constructor,
  HasTabIndex,
  mixinColor,
  mixinTabIndex,
  readKeyCode,
} from '@dynatrace/barista-components/core';

export class DtButtonGroupBase {
  disabled: boolean;
}
export const _DtButtonGroup = mixinTabIndex(DtButtonGroupBase);

@Component({
  selector: 'dt-button-group',
  exportAs: 'dtButtonGroup',
  template: '',
  styleUrls: ['button-group.scss'],
  inputs: ['tabIndex'],
  host: {
    class: 'dt-button-group',
    '[attr.aria-disabled]': 'disabled.toString()',
    role: 'radiogroup',
  },
  encapsulation: ViewEncapsulation.Emulated,
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

import { Subscription, fromEvent } from 'rxjs';

import {
  CanDisable,
  HasTabIndex,
  mixinDisabled,
  mixinTabIndex,
  readKeyCode,
} from '@dynatrace/barista-components/core';

import { DtOverlay } from './overlay';
import { DtOverlayConfig } from './overlay-config';
import { DtOverlayRef } from './overlay-ref';

export class DtOverlayTriggerBase {}
export const _DtOverlayTriggerMixin = mixinTabIndex(
  mixinDisabled(DtOverlayTriggerBase),
);

@Directive({
  selector: '[dtOverlay]',
  exportAs: 'dtOverlayTrigger',
  host: {
    '(mouseenter)': '_handleMouseEnter($event)',
    '(mouseleave)': '_handleMouseLeave($event)',
    '(keydown)': '_handleKeydown($event)',
    '(click)': '_handleClick()',
    class: 'dt-overlay-trigger',
    '[attr.tabindex]': 'tabIndex',
  },
  inputs: ['disabled', 'tabIndex'],
})