How to use the @material/linear-progress.MDCLinearProgressFoundation function in @material/linear-progress

To help you get started, we’ve selected a few @material/linear-progress 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-progress-bar / progress-bar.ts View on Github external
ngAfterViewInit() {
    const element = this._elementRef.nativeElement;

    this._rootElement = element.querySelector('.mdc-linear-progress') as HTMLElement;
    this._primaryBar = element.querySelector('.mdc-linear-progress__primary-bar') as HTMLElement;
    this._bufferBar = element.querySelector('.mdc-linear-progress__buffer') as HTMLElement;

    this._foundation = new MDCLinearProgressFoundation(this._adapter);
    this._foundation.init();
    this._syncFoundation();

    if (!this._isNoopAnimation) {
      // Run outside angular so change detection didn't get triggered on every transition end
      // instead only on the animation that we care about (primary value bar's transitionend)
      this._ngZone.runOutsideAngular((() => {
        this._animationEndSubscription =
            (fromEvent(this._primaryBar, 'transitionend') as Observable)
              .pipe(filter(((e: TransitionEvent) => e.target === this._primaryBar)))
              .subscribe(() => this._ngZone.run(() => this._emitAnimationEnd()));
      }));
    }
  }
github src-zone / material / bundle / src / components / linear-progress / mdc.linear-progress.directive.ts View on Github external
hasClass: (className: string) => {
            if (className === CLASS_INDETERMINATE)
                return this._indeterminate;
            if (className === CLASS_REVERSED)
                return this._reverse;
            return this._root.nativeElement.classList.contains(className);
        },
        removeClass: (className: string) => {
            if (className !== CLASS_INDETERMINATE && className != CLASS_REVERSED)
                this._rndr.removeClass(this._root.nativeElement, className);
        },
        setStyle: (el: Element, styleProperty: string, value: number) => {
            this._rndr.setStyle(el, styleProperty, value);
        }
    };
    private foundation: MdcLinearProgressFoundationInterface = new MDCLinearProgressFoundation(this.mdcAdapter);

    constructor(private _rndr: Renderer2, private _root: ElementRef, private _registry: MdcEventRegistry) {
    }

    ngAfterContentInit() {
        this.initElements();
        this.foundation.init();
        this._initialized = true;
        this.foundation.setProgress(this._progress);
        this.foundation.setBuffer(this._buffer);
        if (this._closed)
            this.foundation.close();
    }

    ngOnDestroy() {
        this.foundation.destroy();
github jamesmfriedman / rmwc / src / linear-progress / index.tsx View on Github external
getDefaultFoundation() {
    return new MDCLinearProgressFoundation({
      addClass: (className: string) => this.root.addClass(className),
      getPrimaryBar: () =>
        this.root.ref &&
        this.root.ref.querySelector(
          MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR
        ),
      getBuffer: () =>
        this.root.ref &&
        this.root.ref.querySelector(
          MDCLinearProgressFoundation.strings.BUFFER_SELECTOR
        ),
      hasClass: (className: string) => this.root.hasClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      setStyle: (
        el: HTMLElement,
        styleProperty: string,
github trimox / angular-mdc-web / packages / linear-progress / linear-progress.ts View on Github external
getDefaultFoundation() {
    const adapter: MDCLinearProgressAdapter = {
      addClass: (className: string) => this._getHostElement().classList.add(className),
      getPrimaryBar: () => this._getHostElement().querySelector('.mdc-linear-progress__primary-bar'),
      getBuffer: () => this._getHostElement().querySelector('.mdc-linear-progress__buffer'),
      hasClass: (className: string) => this._getHostElement().classList.contains(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      setStyle: (el: HTMLElement, styleProperty: string, value: string) => el.style.setProperty(styleProperty, value)
    };
    return new MDCLinearProgressFoundation(adapter);
  }