How to use the @material/icon-toggle.MDCIconToggleFoundation function in @material/icon-toggle

To help you get started, we’ve selected a few @material/icon-toggle 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 / icon-toggle / mdc.icon-toggle.directive.ts View on Github external
rmAttr: (name: string) => { this.renderer.removeAttribute(this._elm.nativeElement, name); },
        notifyChange: (evtData: {isOn: boolean}) => {
            this._onChange(evtData.isOn);
            this.onChange.emit(evtData.isOn);
        }
    };
    private foundation: {
        init(),
        destroy(),
        setDisabled(disabled: boolean),
        isDisabled(): boolean,
        isOn(): boolean,
        toggle(isOn?: boolean)
        refreshToggleData(),
        isKeyboardActivated(): boolean
    } = new MDCIconToggleFoundation(this.mdcAdapter);

    constructor(_elm: ElementRef, private renderer: Renderer2, private registry: MdcEventRegistry) {
        super(_elm, renderer, registry);
    }
  
    ngAfterContentInit() {
        this.initDefaultAttributes();
        this.initializeData();
        this.foundation.init();
        // run all deferred foundation interactions:
        for (let fun of this._beforeInitQueu)
            fun();
        this._beforeInitQueu = [];
        // the foundation doesn't initialize the iconOn/iconOff and labelOn/labelOff until
        // toggle is called for the first time,
        // also, this will ensure 'aria-pressed' and 'aria-label' attributes are initialized:
github fintechstudios / angularjs-mdc / src / mdc-icon-toggle / mdc-icon-toggle.js View on Github external
getDefaultFoundation() {
    return new MDCIconToggleFoundation({
      addClass: (className) => this.iconEl_.addClass(className),
      removeClass: (className) => this.iconEl_.removeClass(className),
      registerInteractionHandler: (type, handler) => this.$element.on(type, handler),
      deregisterInteractionHandler: (type, handler) => this.$element.off(type, handler),
      setText: (text) => this.iconEl_.text(text),
      getTabIndex: () => /* number */ this.$element.attr('tabindex'),
      setTabIndex: (tabIndex) => this.$element.attr('tabindex', tabIndex),
      getAttr: (name, value) => this[directiveNormalize(name)],
      setAttr: (name, value) => {
        this[directiveNormalize(name)] = value;
        this.$element.attr(name, value);
      },
      rmAttr: (name) => {
        this[directiveNormalize(name)] = undefined;
        this.$element.removeAttr(name);
      },
github material-components / material-components-web / framework-examples / vue / src / v-mdc-icon-toggle / IconToggle.vue View on Github external
mounted () {
    // TODO: add the ripple
    let vm = this;
    this.foundation = new MDCIconToggleFoundation({
      addClass (className) {
        vm.$set(vm.classes, className, true);
      },
      removeClass (className) {
        vm.$delete(vm.classes, className);
      },
      registerInteractionHandler (type, handler) {
        vm.$el.addEventListener(type, handler);
      },
      deregisterInteractionHandler (type, handler) {
        vm.$el.removeEventListener(type, handler);
      },
      setText (text) {
        vm.text = text;
      },
      getTabIndex () {
github trimox / angular-mdc-web / packages / icon-toggle / icon-toggle.ts View on Github external
notifyChange: (evtData: { isOn: boolean }) => {
      this.change.emit(evtData.isOn);
      this.onChange(this._foundation.isOn());
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    setDisabled(isDisabled: boolean): void,
    isDisabled(): boolean,
    toggle(isOn?: boolean): void,
    refreshToggleData(): void,
    isKeyboardActivated(): boolean,
    isOn(): boolean
  } = new MDCIconToggleFoundation(this._mdcAdapter);

  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _renderer: Renderer2,
    public elementRef: ElementRef,
    public ripple: MdcRipple,
    private _registry: EventRegistry) { }

  ngAfterViewInit(): void {
    this._foundation.init();
    this._foundation.refreshToggleData();
    this._foundation.toggle(this._on || this._foundation.isOn());

    this.ripple.attachTo(this._getHostElement(), true);

    this._changeDetectorRef.detectChanges();