components(Image, Grid): components initialization

[Stradivario]

Issue

Description

Introducing rx-grid and rx-image components

Screenshots (optional)

<div style="max-width: 200px; background-color: white">
  <rx-image
    image="https://getuikit.com/images/icon-clipboard.svg"
  ></rx-image>
  <rx-image image=${glyph} @onLoad=${this.onLoad}></rx-image>
</div>

Image Component

Basic Usage

<rx-image image="https://getuikit.com/images/icon-clipboard.svg"></rx-image>

Advanced usage

Require svg files is done by ParcelJS only typings.d.ts needs to be defined for linters in order to work correct without throwing Cannot find module './app.component.cdss'.

import { html, Component, LitElement } from '@rxdi/lit-html';
import glyph from '@rxdi/ui-kit/images/glyph.svg';

/**
 * @customElement image-view-component
 */
@Component({
  selector: 'image-view-component',
  template(this: ImageViewComponent) {
    return html`
      <rx-image image=${glyph} @onLoad=${this.onLoad}></rx-image>
      <rx-image image="https://graphql-server.com/assets/images/logo.png" @onLoad=${this.onLoad}></rx-image>
    `;
  }
})
export class ImageViewComponent extends LitElement {
  onLoad = (event: CustomEvent<HTMLImageElement>) => {
    console.log(event.target);
  }
}

Grid Component

Usage

import { html, Component, LitElement } from '@rxdi/lit-html';
import glyph from '@rxdi/ui-kit/images/glyph.svg';

/**
 * @customElement image-view-component
 */
@Component({
  selector: 'image-view-component',
  template(this: ImageViewComponent) {
    return html`
      <flex-grid
        .$items=${[
          html`
            <div>
              <h1 style="font-size: 2.75em; font-weight: 700; width: 400px; line-height: 1.25em;">
                Your Open-Source Scalable Cloud Solution
              </h1>
              <div style="height:20px;"></div>
              <h2>Get the latest from Graphql Server</h2>
              <p>Receive news, announcements, and more.</p>
            </div>
          `,
          html`
            <div style="width: 596px;">Working</div>
          `,
        ]}
      >
      </flex-grid>
    `;
  }
})
export class ImageViewComponent extends LitElement {}

Iterate over Observable or Promise items

Inside .template callback you will have ability to put your template. This callback will stop for every item provided inside .$items attribute

import { html, Component, LitElement } from '@rxdi/lit-html';

/**
 * @customElement flex-grid-view-component
 */
@Component({
  selector: 'flex-grid-view-component',
  template(this: FlexGridViewComponent) {
    return html`
      <flex-grid .$items=${[]} .template=${item => html``}></flex-grid>
    `;
  }
})
export class FlexGridViewComponent extends LitElement {}