feat: Add Grid Lite Angular wrapper

[mddragnev]

Related #16700

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[damyanpetev]

Just a note:
The current template renders inside the Web Component Shadow DOM, so global styles (other than CSS vars) may not react elements inside. That affect templates with other igx- components that rely on the global theme in styles.css (igc- web components should be fine though). So if such component should be used in the template currently it should also bring the theme styles in as well:

  <igx-grid-lite-column field="active" dataType="boolean" header="Active">
    <ng-template igxGridLiteCell let-value>
      <link rel="stylesheet" href="/styles.css">
      <igx-checkbox [checked]="value"></igx-checkbox>
    </ng-template>
  </igx-grid-lite-column>

The example <link rel="stylesheet" href="/styles.css"> is the same as in the index.html and contains the Ignite UI theme; the link is heavily cached/optimized by the browser so it's roughly equivalent to adopting the root styles in the shadow root.

We're likely to address this further, but it will on the web component level to bake in functionality to automatically adopt the root styles for templated cells in a future release.

Edit: will be resolved by integrating IgniteUI/igniteui-grid-lite#46

[damyanpetev]

Additional issue, if a class or any other rule targeting the Angular host with some size modifications:

<igx-grid-lite class="grid"

.grid {
    width: 50%;
}

That obviously doesn't work as the host is display: inline with browser defaults. Even if adjusted to say 'block' I somewhat doubt it'll behave like the wrapped component anyway. An option would be setting :host { display: contents; } and transfer class to the wrapped element which works for most cases. Except you can't write rules targeting the host by element selector for much else than CSS variables as other stuff won't apply. And any CSS part items will always need to be applied to the inner igc-grid-lite anyway. Might end up a documented quirk of the wrapper.

Edit: Eh, forgot about view encapsulation on the parent component that we can't control :/ So even if the class is transferred, it's not guaranteed to do anything for the component below.

Edit 2: Two options #16896 and #16898 with the first one winning out for simplicity.