Skip to content

Commit

Permalink
refactor(material/slide-toggle): remove mixin class usages
Browse files Browse the repository at this point in the history 
Replaces mixin class usages in the slide toggle with input transforms.
  • Loading branch information
@crisbeto
crisbeto committed Aug 31, 2023
1 parent b4f24e7 commit 8d608d2
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 76 deletions.
1 change: 0 additions & 1 deletion src/material/slide-toggle/BUILD.bazel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ ng_module(
),
assets = [":slide_toggle_scss"] + glob(["**/*.html"]),
deps = [
"//src/cdk/coercion",
"//src/material/core",
"@npm//@angular/animations",
"@npm//@angular/common",
Expand Down
2 changes: 1 addition & 1 deletion src/material/slide-toggle/slide-toggle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[class.mdc-switch--unselected]="!checked"
[class.mdc-switch--checked]="checked"
[class.mdc-switch--disabled]="disabled"
[tabIndex]="tabIndex"
[tabIndex]="disabled ? -1 : tabIndex"
[disabled]="disabled"
[attr.id]="buttonId"
[attr.name]="name"
Expand Down
86 changes: 26 additions & 60 deletions src/material/slide-toggle/slide-toggle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import {
AfterContentInit,
Attribute,
booleanAttribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Expand All @@ -17,6 +18,7 @@ import {
forwardRef,
Inject,
Input,
numberAttribute,
OnDestroy,
Optional,
Output,
Expand All @@ -30,17 +32,6 @@ import {
MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
MatSlideToggleDefaultOptions,
} from './slide-toggle-config';
import {
CanColor,
CanDisable,
CanDisableRipple,
HasTabIndex,
mixinColor,
mixinDisabled,
mixinDisableRipple,
mixinTabIndex,
} from '@angular/material/core';
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';

/** @docs-private */
export const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = {
Expand All @@ -62,20 +53,6 @@ export class MatSlideToggleChange {
// Increasing integer for generating unique ids for slide-toggle components.
let nextUniqueId = 0;

// Boilerplate for applying mixins to MatSlideToggle.
/** @docs-private */
const _MatSlideToggleMixinBase = mixinTabIndex(
mixinColor(
mixinDisableRipple(
mixinDisabled(
class {
constructor(public _elementRef: ElementRef) {}
},
),
),
),
);

@Component({
selector: 'mat-slide-toggle',
templateUrl: 'slide-toggle.html',
Expand All @@ -92,28 +69,18 @@ const _MatSlideToggleMixinBase = mixinTabIndex(
'[class.mat-mdc-slide-toggle-focused]': '_focused',
'[class.mat-mdc-slide-toggle-checked]': 'checked',
'[class._mat-animation-noopable]': '_noopAnimations',
'[class]': 'color ? "mat-" + color : ""',
},
exportAs: 'matSlideToggle',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [MAT_SLIDE_TOGGLE_VALUE_ACCESSOR],
})
export class MatSlideToggle
extends _MatSlideToggleMixinBase
implements
OnDestroy,
AfterContentInit,
ControlValueAccessor,
CanDisable,
CanColor,
HasTabIndex,
CanDisableRipple
{
export class MatSlideToggle implements OnDestroy, AfterContentInit, ControlValueAccessor {
private _onChange = (_: any) => {};
private _onTouched = () => {};

private _uniqueId: string;
private _required: boolean = false;
private _checked: boolean = false;

private _createChangeEvent(isChecked: boolean) {
Expand Down Expand Up @@ -160,35 +127,35 @@ export class MatSlideToggle
@Input('aria-describedby') ariaDescribedby: string;

/** Whether the slide-toggle is required. */
@Input()
get required(): boolean {
return this._required;
}
@Input({transform: booleanAttribute}) required: boolean;

set required(value: BooleanInput) {
this._required = coerceBooleanProperty(value);
}
// TODO(crisbeto): this should be a ThemePalette, but some internal apps were abusing
// the lack of type checking previously and assigning random strings.
/** Palette color of slide toggle. */
@Input() color: string | undefined;

/** Whether the slide toggle is disabled. */
@Input({transform: booleanAttribute}) disabled: boolean;

/** Whether the slide toggle has a ripple. */
@Input({transform: booleanAttribute}) disableRipple: boolean;

/** Tabindex of slide toggle. */
@Input({transform: (value: unknown) => (value == null ? 0 : numberAttribute(value))})
tabIndex: number = 0;

/** Whether the slide-toggle element is checked or not. */
@Input()
@Input({transform: booleanAttribute})
get checked(): boolean {
return this._checked;
}

set checked(value: BooleanInput) {
this._checked = coerceBooleanProperty(value);
set checked(value: boolean) {
this._checked = value;
this._changeDetectorRef.markForCheck();
}

/** Whether to hide the icon inside of the slide toggle. */
@Input()
get hideIcon(): boolean {
return this._hideIcon;
}
set hideIcon(value: BooleanInput) {
this._hideIcon = coerceBooleanProperty(value);
}
private _hideIcon = false;
@Input({transform: booleanAttribute}) hideIcon: boolean;

/** An event will be dispatched each time the slide-toggle changes its value. */
@Output() readonly change = new EventEmitter<MatSlideToggleChange>();
Expand All @@ -206,19 +173,18 @@ export class MatSlideToggle
}

constructor(
elementRef: ElementRef,
private _elementRef: ElementRef,
protected _focusMonitor: FocusMonitor,
protected _changeDetectorRef: ChangeDetectorRef,
@Attribute('tabindex') tabIndex: string,
@Inject(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS) public defaults: MatSlideToggleDefaultOptions,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
) {
super(elementRef);
this.tabIndex = parseInt(tabIndex) || 0;
this.color = this.defaultColor = defaults.color || 'accent';
this.color = defaults.color || 'accent';
this._noopAnimations = animationMode === 'NoopAnimations';
this.id = this._uniqueId = `mat-mdc-slide-toggle-${++nextUniqueId}`;
this._hideIcon = defaults.hideIcon ?? false;
this.hideIcon = defaults.hideIcon ?? false;
this._labelId = this._uniqueId + '-label';
}

Expand Down
35 changes: 21 additions & 14 deletions tools/public_api_guard/material/slide-toggle.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,13 @@
```ts

import { _AbstractConstructor } from '@angular/material/core';
import { AfterContentInit } from '@angular/core';
import { BooleanInput } from '@angular/cdk/coercion';
import { CanColor } from '@angular/material/core';
import { CanDisable } from '@angular/material/core';
import { CanDisableRipple } from '@angular/material/core';
import { ChangeDetectorRef } from '@angular/core';
import { CheckboxRequiredValidator } from '@angular/forms';
import { _Constructor } from '@angular/material/core';
import { ControlValueAccessor } from '@angular/forms';
import { ElementRef } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { HasTabIndex } from '@angular/material/core';
import * as i0 from '@angular/core';
import * as i3 from '@angular/material/core';
import * as i4 from '@angular/common';
Expand All @@ -41,8 +34,8 @@ export const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: {
};

// @public (undocumented)
export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple {
constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, tabIndex: string, defaults: MatSlideToggleDefaultOptions, animationMode?: string);
export class MatSlideToggle implements OnDestroy, AfterContentInit, ControlValueAccessor {
constructor(_elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, tabIndex: string, defaults: MatSlideToggleDefaultOptions, animationMode?: string);
ariaDescribedby: string;
ariaLabel: string | null;
ariaLabelledby: string | null;
Expand All @@ -51,9 +44,12 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
// (undocumented)
protected _changeDetectorRef: ChangeDetectorRef;
get checked(): boolean;
set checked(value: BooleanInput);
set checked(value: boolean);
color: string | undefined;
// (undocumented)
defaults: MatSlideToggleDefaultOptions;
disabled: boolean;
disableRipple: boolean;
protected _emitChangeEvent(): void;
focus(): void;
_focused: boolean;
Expand All @@ -62,24 +58,35 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
// (undocumented)
_getAriaLabelledBy(): string | null;
_handleClick(): void;
get hideIcon(): boolean;
set hideIcon(value: BooleanInput);
hideIcon: boolean;
id: string;
get inputId(): string;
_labelId: string;
labelPosition: 'before' | 'after';
name: string | null;
// (undocumented)
static ngAcceptInputType_checked: unknown;
// (undocumented)
static ngAcceptInputType_disabled: unknown;
// (undocumented)
static ngAcceptInputType_disableRipple: unknown;
// (undocumented)
static ngAcceptInputType_hideIcon: unknown;
// (undocumented)
static ngAcceptInputType_required: unknown;
// (undocumented)
static ngAcceptInputType_tabIndex: unknown;
// (undocumented)
ngAfterContentInit(): void;
// (undocumented)
ngOnDestroy(): void;
_noopAnimations: boolean;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
get required(): boolean;
set required(value: BooleanInput);
required: boolean;
setDisabledState(isDisabled: boolean): void;
_switchElement: ElementRef<HTMLElement>;
tabIndex: number;
toggle(): void;
readonly toggleChange: EventEmitter<void>;
writeValue(value: any): void;
Expand Down

0 comments on commit 8d608d2

Please sign in to comment.