How to use the @ptsecurity/mosaic/core.mixinColor function in @ptsecurity/mosaic

this.renderer.addClass(secondIconElement, 'mc-icon_right');
        }
    }
}

export class McButtonBase {
    // tslint:disable-next-line:naming-convention
    constructor(public _elementRef: ElementRef) {}
}

// tslint:disable-next-line:naming-convention
export const McButtonMixinBase:
    CanDisableCtor &
    CanColorCtor &
    typeof McButtonBase =
        mixinColor(mixinDisabled(McButtonBase));


@Component({
    selector: 'button[mc-button]',
    templateUrl: './button.component.html',
    styleUrls: ['./button.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    inputs: ['disabled', 'color'],
    host: {
        '[disabled]': 'disabled || null'
    }
})
export class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
    constructor(elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
        super(elementRef);

import { McFormFieldControl } from './form-field-control';
import { getMcFormFieldMissingControlError } from './form-field-errors';
import { McFormFieldNumberControl } from './form-field-number-control';
import { McHint } from './hint';
import { McPrefix } from './prefix';
import { McStepper } from './stepper';
import { McSuffix } from './suffix';


let nextUniqueId = 0;

export class McFormFieldBase {
    constructor(public _elementRef: ElementRef) {}
}

export const _McFormFieldMixinBase: CanColorCtor & typeof McFormFieldBase = mixinColor(McFormFieldBase);

@Component({
    selector: 'mc-form-field',
    exportAs: 'mcFormField',
    templateUrl: 'form-field.html',
    // McInput is a directive and can't have styles, so we need to include its styles here.
    // The McInput styles are fairly minimal so it shouldn't be a big deal for people who
    // aren't using McInput.
    styleUrls: [
        'form-field.css',
        '../input/input.css',
        '../textarea/textarea.css'
    ],
    host: {
        class: 'mc-form-field',
        '[class.mc-form-field_invalid]': '_control.errorState',

secondIconElement.classList.add('mc-icon_right');
        }
    }
}

export class McButtonBase {
    // tslint:disable-next-line:naming-convention
    constructor(public _elementRef: ElementRef) {}
}

// tslint:disable-next-line:naming-convention
export const McButtonMixinBase:
    CanDisableCtor &
    CanColorCtor &
    typeof McButtonBase =
        mixinColor(mixinDisabled(McButtonBase));


@Component({
    selector: 'button[mc-button]',
    templateUrl: './button.component.html',
    styleUrls: ['./button.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    inputs: ['disabled', 'color'],
    host: {
        '[disabled]': 'disabled || null'
    }
})
export class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
    constructor(elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
        super(elementRef);

// Boilerplate for applying mixins to McCheckbox.
/** @docs-private */
export class McCheckboxBase {
    // tslint:disable-next-line:naming-convention
    constructor(public _elementRef: ElementRef) {
    }
}

// tslint:disable-next-line:naming-convention
export const McCheckboxMixinBase:
    HasTabIndexCtor &
    CanColorCtor &
    CanDisableCtor &
    typeof McCheckboxBase =
        mixinTabIndex(mixinColor(mixinDisabled(McCheckboxBase)));


/**
 * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
 * and exposes a similar API. A McCheckbox can be either checked, unchecked, indeterminate, or
 * disabled. Note that all additional accessibility attributes are taken care of by the component,
 * so there is no need to provide them yourself. However, if you want to omit a label and still
 * have the checkbox be accessible, you may supply an [aria-label] input.
 */
@Component({
    selector: 'mc-checkbox',
    templateUrl: 'checkbox.html',
    styleUrls: ['checkbox.css'],
    exportAs: 'mcCheckbox',
    host: {
        class: 'mc-checkbox',

import {
    mixinColor,
    CanColor,
    CanColorCtor,
    CanDisable,
    CanDisableCtor,
    mixinDisabled
} from '@ptsecurity/mosaic/core';
import { McIcon } from '@ptsecurity/mosaic/icon';


export class McTagBase {
    constructor(public _elementRef: ElementRef) {}
}

export const _McTagMixinBase: CanColorCtor & CanDisableCtor & typeof McTagBase = mixinColor(mixinDisabled(McTagBase));


@Component({
    selector: 'mc-tag',
    templateUrl: 'tag.partial.html',
    styleUrls: ['./tag.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'mc-tag',
        '[class.mc-disabled]': 'disabled'
    },
    inputs: ['color', 'disabled']
})
export class McTag extends _McTagMixinBase implements CanColor, CanDisable {
    @ContentChildren(McIcon) contentChildren: QueryList;

export type ProgressSpinnerMode = 'determinate' | 'indeterminate';

let idIterator = 0;

const MIN_PERCENT = 0;
const MAX_PERCENT = 100;

export class McProgressSpinnerBase {
    constructor(public _elementRef: ElementRef) {}
}

export const _McProgressSpinnerMixinBase:
    CanColorCtor &
    typeof McProgressSpinnerBase =
        mixinColor(McProgressSpinnerBase);

const MAX_DASH_ARRAY = 273;

@Component({
    selector: 'mc-progress-spinner',
    templateUrl: './progress-spinner.component.html',
    styleUrls: ['./progress-spinner.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'mc-progress-spinner',
        '[attr.id]': 'id'
    }
})
export class McProgressSpinner extends _McProgressSpinnerMixinBase implements CanColor {
    @Input() id: string = `mc-progress-spinner-${idIterator++}`;

export type ProgressBarMode = 'determinate' | 'indeterminate';

let idIterator = 0;

const MIN_PERCENT = 0;
const MAX_PERCENT = 100;

export class McProgressBarBase {
    constructor(public _elementRef: ElementRef) {}
}

export const _McProgressBarMixinBase:
    CanColorCtor &
    typeof McProgressBarBase =
        mixinColor(McProgressBarBase);

@Component({
    selector: 'mc-progress-bar',
    templateUrl: './progress-bar.component.html',
    styleUrls: ['./progress-bar.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'mc-progress-bar',
        '[attr.id]': 'id'
    }
})
export class McProgressBar extends _McProgressBarMixinBase implements CanColor {
    @Input() id: string = `mc-progress-bar-${idIterator++}`;
    @Input() value: number = 0;
    @Input() mode: ProgressBarMode = 'determinate';