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

CanDisable,
  Constructor,
  HasElementRef,
  mixinColor,
  mixinDisabled,
  replaceCssClass,
} from '@dynatrace/barista-components/core';
import { DtIcon } from '@dynatrace/barista-components/icon';

export type DtButtonThemePalette = 'main' | 'warning' | 'cta';

// Boilerplate for applying mixins to DtButton.
export class DtButtonBase {
  constructor(public _elementRef: ElementRef) {}
}
export const _DtButtonMixinBase = mixinDisabled(
  mixinColor, DtButtonThemePalette>(
    DtButtonBase,
    'main',
  ),
);

export type ButtonVariant = 'primary' | 'secondary' | 'nested';
const defaultVariant = 'primary';

/**
 * Dynatrace design button.
 */
@Component({
  selector: `button[dt-button], button[dt-icon-button]`,
  exportAs: 'dtButton',
  host: {

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',
    '[class.dt-tile-small]': '!_subTitle',

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,
})

},
];

/**
 * @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',
  },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,

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)',
  },
  inputs: ['tabIndex'],

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',
    '[class.dt-select-disabled]': 'disabled',

provide: NG_VALUE_ACCESSOR,
  // tslint:disable-next-line: no-use-before-declare no-forward-ref
  useExisting: forwardRef(() => DtCheckbox),
  multi: true,
};

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

// Boilerplate for applying mixins to DtCheckbox.
export class DtCheckboxBase {}
export const _DtCheckboxMixinBase = mixinTabIndex(
  mixinDisabled(DtCheckboxBase),
);

@Component({
  selector: 'dt-checkbox',
  templateUrl: 'checkbox.html',
  styleUrls: ['checkbox.scss'],
  exportAs: 'dtCheckbox',
  host: {
    '[id]': 'id',
    class: 'dt-checkbox',
    '[class.dt-checkbox-checked]': 'checked',
    '[class.dt-checkbox-indeterminate]': 'indeterminate',
    '[class.dt-checkbox-disabled]': 'disabled',
    '(focus)': '_inputElement.nativeElement.focus()',
  },
  inputs: ['disabled', 'tabIndex'],

import { DtTab, DtTabChange } from './tab/tab';

export const DT_TABGROUP_SINGLE_TAB_ERROR =
  'Only one single tab is not allowed inside a tabgroup';

export const DT_TABGROUP_NO_ENABLED_TABS_ERROR =
  'At least one tab must be enabled at all times';

const LOG: DtLogger = DtLoggerFactory.create('DtTabGroup');

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

export class DtTabGroupBase {
  constructor(public _elementRef: ElementRef) {}
}
export const _DtTabGroupMixinBase = mixinDisabled(
  mixinColor, DtTabGroupThemePalette>(
    DtTabGroupBase,
    'main',
  ),
);

/** Used to generate unique ID's for each tab component */
let nextId = 0;

@Component({
  selector: 'dt-tab-group',
  exportAs: 'dtTabGroup',
  templateUrl: 'tab-group.html',
  styleUrls: ['tab-group.scss'],
  host: {
    class: 'dt-tab-group',

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',
    '[attr.aria-pressed]': 'selected',

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'],
})
export class DtOverlayTrigger extends _DtOverlayTriggerMixin