How to use @polymer/polymer - 10 common examples

_observeSelectedValues() {
    this._debounceSelect = Debouncer.debounce(
      this._debounceSelect, // initially undefined
      microTask,
      () => {
        this.log && console.log('brush selection', this.selectedValues);
        this.dispatchEvent(new CustomEvent('multi-select', {
          detail: {
            isRange: this.isRange,
            selection: this.selectedValues
          },
          bubbles: true,
          composed: true
        }));
      });
  }

debounceDraw() {
      this.log && console.info('debounce',  this)
      this._debounceDraw = Debouncer.debounce(
        this._debounceDraw, // initially undefined
        timeOut.after(10),
        () => {
          this.log && console.info('debounced',  this)
          const isDrawn = this.draw();
          this._isDrawn = !!isDrawn;
          this.dispatchEvent(new CustomEvent('multi-drawn', {detail: {}, bubbles: true, composed: true})); 
        });
    }

haxToContent: function() {
    // remove from the body area so we can generate a legit html structure
    this.hideContextMenus();
    var __active = this.activeNode;
    // null this to drop hax based classes
    Polymer.HaxStore.write("activeNode", null, this);
    Polymer.HaxStore.write("activeContainerNode", null, this);
    let children = Polymer.dom(this.$.body).getDistributedNodes();
    if (this.globalPreferences.haxDeveloperMode) {
      console.log(children);
    }
    var content = "";
    for (var i = 0, len = children.length; i < len; i++) {
      // see if this is a valid element or not, providing
      // some mild front-end sanitization
      if (this._haxElementTest(children[i])) {
        children[i].removeAttribute("data-editable");
        children[i].removeAttribute("data-hax-ray");
        children[i].contentEditable = false;
        content += Polymer.HaxStore.haxNodeToContent(children[i]);
        if (children[i].tagName.toLowerCase() === "grid-plate") {
          this._applyContentEditable(this.editMode, children[i]);
        }
      }

value: function() {
        var custom = dom(this).querySelector("template[is=header]");

        if (custom && custom.parentElement) {
          // set dataHost to the context where template has been defined
          var column = custom.parentElement;
          custom._rootDataHost =
            column.dataHost._rootDataHost || column.dataHost;
          return custom;
        }

        return dom(this.root).querySelector("#header");
      }
    },

get target() {
      const parentNode = dom(this).parentNode;
      // If the parentNode is a document fragment, then we need to use the host.
      const ownerRoot = dom(this).getOwnerRoot();
      let target;
      if (this.for) {
        target = dom(ownerRoot).querySelector(`#${this.for}`);
      } else {
        target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ?
          ownerRoot.host : parentNode;
      }
      return target;
    }
  }

"resource"
        );
      } else {
        let uuid = this.generateResourceID();
        this.relatedResource = uuid;
        dom(this).previousElementSibling.setAttribute("resource", uuid);
      }
      // set prefix on the main element itself
      dom(this).previousElementSibling.setAttribute(
        "prefix",
        this.getAttribute("prefix")
      );
    } else if (newValue === "parent") {
      // find the parent and associate to it's resource ID, if it doesn't have one
      // then let's make one dynamically
      if (dom(this).parentNode.getAttribute("resource")) {
        this.relatedResource = dom(this).parentNode.getAttribute("resource");
      } else {
        let uuid = this.generateResourceID();
        this.relatedResource = uuid;
        dom(this).parentNode.setAttribute("resource", uuid);
      }
      // set prefix on the main element itself
      dom(this).parentNode.setAttribute("prefix", this.getAttribute("prefix"));
    }
  },

_updateListScroller(_list) {
    var _sl = dom(_list.root).querySelector("#items");
    var _slh = _sl.getBoundingClientRect().height || 12863.994140625;
    var _sli = Math.floor(_slh / (2100 - 1900 + 1) * (this._activeYear - 1900 - 2)) + 1;

    // Adjust center position when datepickers has no buttons and in landscape mode.
    if (!this.$.dp.classList.contains("with-buttons") &&
      window.matchMedia("(orientation: landscape)").matches) {
      _sli = Math.floor(_slh / (2100 - 1900 + 1) * (this._activeYear - 1900 - 1)) + 1;
    }

    // Scroll to selected year.
    this.async(function () {
      _list.scroll(0, _sli);
      // Select initial item for the list.
      _list.selectItem(this._activeYear - 1900);
    }, 17); // wait for at least 17ms to update the scroller position.

_onCellClick: function(e) {
    // Prevent item selection if row itself is not focused. This means that
    // an element inside the row has been focused.
    // Mobile devices don't move focus from body unless it's an input element that is focused, so this element will never get focused.
    if (this._isFocusable(dom(e).localTarget)) {
      return;
    } else {
      if (this.rowDetail && this.detailsEnabled) {
        if (this._isExpanded(e.model.item, this._expandedItems)) {
          this._fireEvent("collapsing-item", e.model.item, this.collapseItem);
        } else {
          this._fireEvent("expanding-item", e.model.item, this.expandItem);
        }
      }

      if (this.selectionEnabled) {
        if (this._isSelected(e.model.item, this.selectedItems)) {
          this._fireEvent("deselecting-item", e.model.item, this.deselectItem);
        } else {
          this._fireEvent("selecting-item", e.model.item, this.selectItem);
        }

import './token-ajax';
import './toast-feedback';
import './login-view.js';
import './user-options-menu';
import './shared-styles';
import './common/breadcrumb.js';

// Gesture events like tap and track generated from touch will not be
// preventable, allowing for better scrolling performance.
setPassiveTouchGestures(true);

// Set Polymer's root path to the same value we passed to our service worker
// in `index.html`.
setRootPath(MyAppGlobals.rootPath);

class MyApp extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
    static get template() {
        return html`
      <style>
        :host {
           display: block;
        };
        app-drawer-layout:not([narrow]) [drawer-toggle] {
          display: none;
        };
        app-header {
          color: #fff;
          background-color: var(--app-primary-color);
        };
        app-header paper-icon-button {
          --paper-icon-button-ink-color: white;
        };</style>

connectedCallback() {
    super.connectedCallback();
    autorun(reaction => {
      this.editMode = toJS(store.editMode);
      this.__disposer.push(reaction);
    });
    autorun(reaction => {
      this.manifest = toJS(store.manifest);
      this.__disposer.push(reaction);
    });
    afterNextRender(this, function() {
      // minor timing thing to ensure store has picked active
      // needed if routes set on first paint or lifecycles miss
      setTimeout(() => {
        autorun(reaction => {
          this.activeId = toJS(store.activeId);
          this.__disposer.push(reaction);
        });
      }, 250);
    });
  }
  disconnectedCallback() {