How to use the @material/checkbox.MDCCheckboxFoundation function in @material/checkbox

To help you get started, we’ve selected a few @material/checkbox 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 src-zone / material / bundle / src / components / checkbox / mdc.checkbox.directive.ts View on Github external
deregisterAnimationEndHandler: (handler: EventListener) => {
            this.registry.unlisten('animationend', handler);
        },
        registerChangeHandler: (handler: EventListener) => {
            if (this._input)
                this.registry.listen(this.renderer, 'change', handler, this._input._elm);
        },
        deregisterChangeHandler: (handler: EventListener) => {
            if (this._input)
                this.registry.unlisten('change', handler);
        },
        getNativeControl: () => this._input ? this._input._elm.nativeElement : null,
        forceLayout: () => this.root.nativeElement.offsetWidth, // force layout
        isAttachedToDOM: () => !!this._input,
    };
    private foundation: { init: Function, destroy: Function } = new MDCCheckboxFoundation(this.mdcAdapter);

    constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry) {
        super(root, renderer, registry);
    }

    ngAfterContentInit() {
        this.addBackground();
        this.initRipple();
        this.foundation.init();
    }

    ngOnDestroy() {
        this.foundation.destroy();
        this.destroyRipple();
    }
github angular / components / src / material-experimental / mdc-checkbox / checkbox.ts View on Github external
private _changeDetectorRef: ChangeDetectorRef,
      private _platform: Platform,
      @Attribute('tabindex') tabIndex: string,
      /**
       * @deprecated `_clickAction` parameter to be removed, use
       * `MAT_CHECKBOX_DEFAULT_OPTIONS`
       * @breaking-change 10.0.0
       */
      @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction,
      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
      @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
          private _options?: MatCheckboxDefaultOptions) {
    // Note: We don't need to set up the MDCFormFieldFoundation. Its only purpose is to manage the
    // ripple, which we do ourselves instead.
    this.tabIndex = parseInt(tabIndex) || 0;
    this._checkboxFoundation = new MDCCheckboxFoundation(this._checkboxAdapter);

    this._options = this._options || {};

    if (this._options.color) {
      this.color = this._options.color;
    }

    // @breaking-change 10.0.0: Remove this after the `_clickAction` parameter is removed as an
    // injection parameter.
    this._clickAction = this._clickAction || this._options.clickAction;
  }
github material-components / material-components-web / framework-examples / vue / src / v-mdc-checkbox / Checkbox.vue View on Github external
mounted () {
    let vm = this;
    this.foundation = new MDCCheckboxFoundation({
      addClass (className) {
        vm.$set(vm.classes, className, true);
      },
      removeClass (className) {
        vm.$delete(vm.classes, className);
      },
      registerChangeHandler (handler) {
        vm.changeHandlers.push(handler);
      },
      deregisterChangeHandler (handler) {
        let index = vm.changeHandlers.indexOf(handler);
        if (index >= 0) {
          vm.changeHandlers.splice(index, 1)
        }
      },
      registerAnimationEndHandler (handler) {
github jamesmfriedman / rmwc / src / checkbox / index.tsx View on Github external
getDefaultFoundation() {
    return new MDCCheckboxFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      setNativeControlAttr: (attr: string, value: any) =>
        this.nativeCb.setProp(attr as any, value),
      removeNativeControlAttr: (attr: string) =>
        this.nativeCb.removeProp(attr as any),
      isIndeterminate: () => !!this.props.indeterminate,
      isChecked: () =>
        this.props.checked !== undefined
          ? !!this.props.checked
          : !!this.nativeCb.ref && this.nativeCb.ref.checked,
      hasNativeControl: () => !!this.nativeCb.ref,
      setNativeControlDisabled: (disabled: boolean) =>
        this.nativeCb.setProp('disabled', disabled),
      forceLayout: () => this.root.ref && this.root.ref.offsetWidth,
      isAttachedToDOM: () => true
github trimox / angular-mdc-web / packages / checkbox / checkbox.ts View on Github external
const adapter: MDCCheckboxAdapter = {
      addClass: (className: string) => this._getHostElement().classList.add(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      setNativeControlAttr: (attr: string, value: string) =>
        this._inputElement.nativeElement.setAttribute(attr, value),
      removeNativeControlAttr: (attr: string) =>
        this._inputElement.nativeElement.removeAttribute(attr),
      isIndeterminate: () => this.indeterminate,
      isChecked: () => this.checked,
      hasNativeControl: () => true,
      setNativeControlDisabled: (disabled: boolean) =>
        this._inputElement.nativeElement.disabled = disabled,
      forceLayout: () => this._getHostElement().offsetWidth,
      isAttachedToDOM: () => true
    };
    return new MDCCheckboxFoundation(adapter);
  }