Align prop-attr sync scheme for all components

[nizniz187]

Followed by the MR (issue #95), the rest of the components should align with the new scheme.
The revise steps are advised as the following:

1. Add component attributes as the static property.

  static attributes = {
    disabled: {
      name: 'disabled', defaultValue: false,  // Add observed: false if it is not intended to be observed for change
      parser: (value, attr) => AttributeParser.parseBoolAttr(
        value, attr.defaultValue
      )
    },
    name: { name: 'name' },  // Basic setting for simple as-is sync (no default value, set prop the same as attribute)
    ...
  };

2. Add static getter observedAttributes.

  static get observedAttributes() {
    return this.getObservedAttributes(this.attributes);
  }

3. Add custom attributeChangedCallback to update component if needed.

  attributeChangedCallback(name, oldValue, newValue) {
    ...
  }

4. Remove the initial property settings because it will be done righter after the getters & setters bound dynamically.

  render() {
    this.checked = this.getAttribute('checked');  // This should be removed
  }

---

Todo list:

• Nav / NavPart - @cwpeng
• SPALink / SPAPage - @cwpeng
• Button - @cwpeng
• Calendar - @cwpeng
• Code - @nizniz187
• Dialog - @cwpeng
• Heading / DisplayHeading - @nizniz187
• List / ListItem - @cwpeng
• Quote - @nizniz187

[nizniz187]

Add prop-attr sync for Dialog & Quote components @ 7417149