General: Map Component's attributes available

[fabiojpoli]

Is your feature request related to a problem or use case? Please describe. We are building a designer to allow user to add IDS component to the form by dragging and drop, and set attributes on the fly. However we need to let user know what are all the attributes he has available for each component, what is the default value and what are the available values for that attribute.

Describe the solution you'd like Put the map on IdsGlobal like this:

IdsGlobal.componentsAttributes = [
    {
      name: 'ids-button',
      attributes: {
         appearance: {
            value: 'default',
            options: ['default', 'primary', ...]
         },
         'css-class': {
            value: null
         },
         icon: {
            value: null
         },
         'icon-align': {
            value: 'start'
         },
         'tab-index': {
            value: 0
         },
         text: {
            value: null
         },
         type: {
            value: null
         },
         square: {
            value: false,
            type: 'boolean'
         },
         width: {
            value: null
         },
         'badge-position': {
            value: null
         },
         'badge-color': {
            value: null
         }
      }
   },
   {...},
   {...}
]

Describe alternatives you've considered For now we are populating our metadata object manually based on the documentation.

Additional context

[tmcconechy]

The files vscode.html-custom-data.json and custom-elements.json are meant for this purpose. Not sure we want to hook everything on in the API or the code might get too big for some people.