How to use the @material/ripple.numbers.FG_DEACTIVATION_MS function in @material/ripple

To help you get started, we’ve selected a few @material/ripple examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github angular / components / src / material-experimental / mdc-chips / chip.ts View on Github external
private _initRipple() {
    this.rippleConfig = this._globalRippleOptions || {};

    // Configure ripple animation to match MDC Ripple.
    this.rippleConfig.animation = {
      enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
      exitDuration: numbers.FG_DEACTIVATION_MS,
    };

    this._rippleRenderer =
      new RippleRenderer(this, this._ngZone, this._elementRef, this._platform);
    this._rippleRenderer.setupTriggerEvents(this._elementRef);
  }
github angular / components / src / material-experimental / mdc-button / button-base.ts View on Github external
/** @docs-private */
export class MatButtonMixinCore {
  constructor(public _elementRef: ElementRef) {}
}

export const _MatButtonBaseMixin: CanDisableRippleCtor&CanDisableCtor&CanColorCtor&
    typeof MatButtonMixinCore = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonMixinCore)));

/** Base class for all buttons.  */
@Directive()
export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, CanColor,
                                                                  CanDisableRipple {
  /** The ripple animation configuration to use for the buttons. */
  _rippleAnimation: RippleAnimationConfig = {
    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
    exitDuration: numbers.FG_DEACTIVATION_MS
  };

  /** Whether the ripple is centered on the button. */
  _isRippleCentered = false;

  /** Reference to the MatRipple instance of the button. */
  @ViewChild(MatRipple) ripple: MatRipple;

  constructor(
      elementRef: ElementRef, public _platform: Platform, public _ngZone: NgZone,
      // TODO(devversion): Injection can be removed if angular/angular#32981 is fixed.
      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
    super(elementRef);

    const classList = (elementRef.nativeElement as HTMLElement).classList;
github angular / components / src / material-experimental / mdc-checkbox / checkbox.ts View on Github external
/** Returns the unique id for the visual hidden input. */
  get inputId(): string {
    return `${this.id || this._uniqueId}-input`;
  }

  /** The `MDCCheckboxFoundation` instance for this checkbox. */
  _checkboxFoundation: MDCCheckboxFoundation;

  /** The set of classes that should be applied to the native input. */
  _classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};

  /** Animation config for the ripple. */
  _rippleAnimation = {
    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
    exitDuration: numbers.FG_DEACTIVATION_MS,
  };

  /** ControlValueAccessor onChange */
  private _cvaOnChange = (_: boolean) => {};

  /** ControlValueAccessor onTouch */
  private _cvaOnTouch = () => {};

  /**
   * A list of attributes that should not be modified by `MDCFoundation` classes.
   *
   * MDC uses animation events to determine when to update `aria-checked` which is unreliable.
   * Therefore we disable it and handle it ourselves.
   */
  private _attrBlacklist = new Set(['aria-checked']);
github angular / components / src / material-experimental / mdc-slide-toggle / slide-toggle.ts View on Github external
},
    setNativeControlDisabled: (disabled) => {
      this._disabled = disabled;
    },
  };

  /** Whether the slide toggle is currently focused. */
  _focused: boolean;

  /** The set of classes that should be applied to the native input. */
  _classes: {[key: string]: boolean} = {'mdc-switch': true};

  /** Configuration for the underlying ripple. */
  _rippleAnimation: RippleAnimationConfig = {
    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
    exitDuration: numbers.FG_DEACTIVATION_MS,
  };

  /** The color palette  for this slide toggle. */
  @Input() color: ThemePalette = 'accent';

  /** Name value will be applied to the input element if present. */
  @Input() name: string | null = null;

  /** A unique id for the slide-toggle input. If none is supplied, it will be auto-generated. */
  @Input() id: string = this._uniqueId;

  /** Tabindex for the input element. */
  @Input()
  get tabIndex(): number { return this._tabIndex; }
  set tabIndex(value: number) {
    this._tabIndex = coerceNumberProperty(value);