How to use the @material/mwc-base/base-element.property function in @material/mwc-base

To help you get started, we’ve selected a few @material/mwc-base 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 material-components / material-components-web-components / packages / top-app-bar / src / mwc-top-app-bar-base-base.ts View on Github external
export abstract class TopAppBarBaseBase extends BaseElement {
  protected abstract mdcFoundation: MDCTopAppBarBaseFoundation;

  protected abstract mdcFoundationClass = MDCTopAppBarBaseFoundation;

  @query('.mdc-top-app-bar') protected mdcRoot!: HTMLElement;

  // _actionItemsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot[name="actionItems"]') private _actionItemsSlot!: HTMLElement;

  private _scrollTarget!: HTMLElement|Window;

  @property()
  get scrollTarget() {
    return this._scrollTarget || window;
  }

  set scrollTarget(value) {
    const old = this.scrollTarget;
    this._scrollTarget = value;
    this.updateRootPosition();
    this.requestUpdate('scrollTarget', old);
  }

  private updateRootPosition() {
    if (this.mdcRoot) {
      const windowScroller = this.scrollTarget === window;
      // we add support for top-app-bar's tied to an element scroller.
      this.mdcRoot.style.position = windowScroller ? '' : 'absolute';