How to use @ptsecurity/mosaic - 10 common examples

ngAfterContentInit(): void {
        this.horizontal = toBoolean(this.horizontal);

        this._keyManager = new FocusKeyManager(this.options)
            .withTypeAhead()
            .withVerticalOrientation(!this.horizontal)
            .withHorizontalOrientation(this.horizontal ? 'ltr' : null);

        if (this._tempValues) {
            this._setOptionsFromValues(this._tempValues);
            this._tempValues = null;
        }

        // Sync external changes to the model back to the options.
        this._modelChanges = this.selectedOptions.onChange!.subscribe((event) => {
            for (const item of event.added) {
                item.selected = true;
            }

set checked(value: boolean) {
        const newCheckedState = toBoolean(value);

        if (this._checked !== newCheckedState) {
            this._checked = newCheckedState;

            if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
                this.radioGroup.selected = this;
            } else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) {
                // When unchecking the selected radio button, update the selected radio
                // property on the group.
                this.radioGroup.selected = null;
            }

            if (newCheckedState) {
                // Notify all radio buttons with the same name to un-check.
                this._radioDispatcher.notify(this.id, this.name);
            }

host: { class: 'mc-tab-nav-bar' },
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class McTabNav extends McTabNavMixinBase
    implements CanColor {
        constructor(elementRef: ElementRef) {
            super(elementRef);
        }
     }

// Boilerplate for applying mixins to McTabLink.
export class McTabLinkBase {}
// tslint:disable-next-line:naming-convention
export const McTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor &
    typeof McTabLinkBase = mixinTabIndex(mixinDisabled(McTabLinkBase));

/**
 * Link inside of a `mc-tab-nav-bar`.
 */
@Directive({
    selector: '[mc-tab-link], [mcTabLink]',
    exportAs: 'mcTabLink',
    inputs: ['disabled', 'tabIndex'],
    host: {
        class: 'mc-tab-link',
        '[attr.aria-current]': 'active',
        '[attr.aria-disabled]': 'disabled.toString()',
        '[attr.tabIndex]': 'tabIndex',
        '[class.mc-disabled]': 'disabled',
        '[class.mc-active]': 'active'
    }

styleUrls: ['tab-nav-bar.css'],
    host: { class: 'mc-tab-nav-bar' },
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class McTabNav extends mcTabNavMixinBase
    implements CanColor {
        constructor(elementRef: ElementRef) {
            super(elementRef);
        }
     }

// Boilerplate for applying mixins to McTabLink.
export class McTabLinkBase {}
export const mcTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor &
    typeof McTabLinkBase = mixinTabIndex(mixinDisabled(McTabLinkBase));

/**
 * Link inside of a `mc-tab-nav-bar`.
 */
@Directive({
    selector: '[mc-tab-link], [mcTabLink]',
    exportAs: 'mcTabLink',
    inputs: ['disabled', 'tabIndex'],
    host: {
        class: 'mc-tab-link',
        '[attr.aria-current]': 'active',
        '[attr.aria-disabled]': 'disabled.toString()',
        '[attr.tabIndex]': 'tabIndex',
        '[class.mc-disabled]': 'disabled',
        '[class.mc-active]': 'active'
    }

}

/** Injection token that can be used to provide the default options the tabs module. */
export const MC_TABS_CONFIG = new InjectionToken('MC_TABS_CONFIG');

// Boilerplate for applying mixins to McTabGroup.
/** @docs-private */
export class McTabGroupBase {
    // tslint:disable-next-line:naming-convention
    constructor(public _elementRef: ElementRef) { }
}
// tslint:disable-next-line:naming-convention
export const McTabGroupMixinBase:
    CanColorCtor &
    typeof McTabGroupBase =
    mixinColor(mixinDisabled(McTabGroupBase));

/**
 * Tab-group component.  Supports basic tab pairs (label + content) and includes
 * keyboard navigation.
 */
@Component({
    selector: 'mc-tab-group',
    exportAs: 'mcTabGroup',
    templateUrl: 'tab-group.html',
    styleUrls: ['tab-group.css'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    inputs: ['color'],
    host: {
        class: 'mc-tab-group',
        '[class.mc-tab-group_dynamic-height]': 'dynamicHeight',

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);

Optional,
    Input,
    ViewChild
} from '@angular/core';
import { IFocusableOption, FocusMonitor, FocusOrigin } from '@ptsecurity/cdk/a11y';
import { CanDisable, CanDisableCtor, mixinDisabled } from '@ptsecurity/mosaic/core';
import { Subject } from 'rxjs';

import { MC_DROPDOWN_PANEL, McDropdownPanel } from './dropdown-panel';


// Boilerplate for applying mixins to McDropdownItem.
/** @docs-private */
export class McDropdownItemBase {}
export const _McDropdownItemMixinBase: CanDisableCtor & typeof McDropdownItemBase =
    mixinDisabled(McDropdownItemBase);

/**
 * This directive is intended to be used inside an mc-dropdown tag.
 * It exists mostly to set the role attribute.
 */
@Component({
    selector: 'mc-dropdown-item, [mc-dropdown-item]',
    exportAs: 'mcDropdownItem',
    inputs: ['disabled'],
    host: {
        '[attr.role]': 'role',
        class: 'mc-dropdown__item',
        '[class.mc-dropdown__item_highlighted]': '_highlighted',
        '[attr.tabindex]': '_getTabIndex()',
        '[attr.aria-disabled]': 'disabled.toString()',
        '[attr.disabled]': 'disabled || null',

animationDuration?: string;
}

/** Injection token that can be used to provide the default options the tabs module. */
export const MC_TABS_CONFIG = new InjectionToken('MC_TABS_CONFIG');

// Boilerplate for applying mixins to McTabGroup.
/** @docs-private */
export class McTabGroupBase {
    // tslint:disable-next-line:naming-convention
    constructor(public _elementRef: ElementRef) { }
}
export const mcTabGroupMixinBase:
    CanColorCtor &
    typeof McTabGroupBase =
    mixinColor(mixinDisabled(McTabGroupBase));

/**
 * Tab-group component.  Supports basic tab pairs (label + content) and includes
 * keyboard navigation.
 */
@Component({
    selector: 'mc-tab-group',
    exportAs: 'mcTabGroup',
    templateUrl: 'tab-group.html',
    styleUrls: ['tab-group.css'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    inputs: ['color'],
    host: {
        class: 'mc-tab-group',
        '[class.mc-tab-group_dynamic-height]': 'dynamicHeight',

import {
    CanDisable, CanDisableCtor,
    HasTabIndex, HasTabIndexCtor,
    mixinDisabled,
    mixinTabIndex,
    toBoolean
} from '@ptsecurity/mosaic/core';


export class McLinkBase {
    constructor(public elementRef: ElementRef) {}
}

// tslint:disable-next-line: naming-convention
export const McLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof McLinkBase
    = mixinTabIndex(mixinDisabled(McLinkBase));

@Directive({
    selector: 'a.mc-link',
    exportAs: 'mcLink',
    inputs: ['disabled'],
    host: {
        '[attr.disabled]': 'disabled || null',
        '[attr.tabindex]': 'tabIndex'
    }
})

export class McLink extends McLinkMixinBase implements OnDestroy, HasTabIndex, CanDisable {

    @Input()
    get disabled() {
        return this._disabled;

let nextUniqueId = 0;

type ToggleLabelPositionType = 'left' | 'right';

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

// tslint:disable-next-line: naming-convention
export const McToggleMixinBase:
    HasTabIndexCtor &
    CanDisableCtor &
    CanColorCtor &
    typeof McToggleBase = mixinTabIndex(mixinColor(mixinDisabled(McToggleBase), ThemePalette.Primary));

export class McToggleChange {
    source: McToggleComponent;
    checked: boolean;
}

@Component({
    selector: 'mc-toggle',
    exportAs: 'mcToggle',
    templateUrl: './toggle.component.html',
    styleUrls: ['./toggle.css'],
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => McToggleComponent), multi: true}
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,