feature(Divider): added initial divider component

develop/src/app/app.component.ts

@@ -22,6 +22,7 @@ import { style } from './app.component.css';
  <a href="/modal"><button class="button">Modal</button> </a>
  <a href="/button"><button class="button">Button</button> </a>
  <a href="/article"><button class="button">Article</button> </a>
+ <a href="/divider"><button class="button">Divider</button> </a>
  </div>
  <router-outlet></router-outlet>
  `,

develop/src/app/app.module.ts

@@ -22,6 +22,8 @@ import { BadgeViewComponent } from './badge-view/badge-vew.component';
 import { ModalViewComponent } from './modal/modal-view.component';
 import { ButtonViewComponent } from './button-view/button-view.component';
 import { ArticleViewComponent } from './article-view/article-view.component';
+import { DividerViewComponent } from './divider-view/divider-view.component';
+import { DividerComponent } from '../../../src/divider/divider.component';
 
 @Module({
  components: [
@@ -32,7 +34,8 @@ import { ArticleViewComponent } from './article-view/article-view.component';
  GridComponent,
  BadgeComponent,
  ButtonComponent,
- ArticleComponent
+ ArticleComponent,
+ DividerComponent
  ],
  imports: [
  ModalModule.forRoot({
@@ -78,6 +81,10 @@ import { ArticleViewComponent } from './article-view/article-view.component';
  path: '/article',
  component: ArticleViewComponent
  },
+ {
+ path: '/divider',
+ component: DividerViewComponent
+ },
  ],
  { log: true }
  )

develop/src/app/article-view/article-view.component.ts

@@ -3,6 +3,9 @@ import { ModalService } from '../../../../src/modal/modal.service';
 import { Inject } from '@rxdi/core';
 import { ArticleData } from './data';
 
+/**
+ * @customElement article-view-component
+ */
 @Component({
  selector: 'article-view-component',
  style: css`

develop/src/app/button-view/button-view.component.ts

@@ -1,5 +1,8 @@
 import { Component, LitElement, html, css } from '@rxdi/lit-html';
 
+/**
+ * @customElement button-view-component
+ */
 @Component({
  selector: 'button-view-component',
  style: css`

develop/src/app/divider-view/divider-view.component.ts

@@ -0,0 +1,27 @@
+import { Component, html, LitElement, css } from '@rxdi/lit-html';
+
+/**
+ * @customElement divider-view-component
+ */
+@Component({
+ selector: 'divider-view-component',
+ style: css`
+ .container {
+ padding: 50px;
+ background: white;
+ color: #666;
+ }
+ `,
+ template(this: DividerViewComponent) {
+ return html`
+ <div class="container">
+ <h1>Regular Divider</h1>
+ <rx-divider></rx-divider>
+
+ <h1>Icon Divider</h1>
+ <rx-divider type="icon"></rx-divider>
+ </div>
+ `;
+ }
+})
+export class DividerViewComponent extends LitElement {}

develop/src/app/markdown-reader/markdown-regular.component.ts

@@ -4,6 +4,9 @@ import { of } from 'rxjs';
 import { map, tap, debounceTime } from 'rxjs/operators';
 import { style } from './markdown-regular.css';
 
+/**
+ * @customElement regular-markdown-component
+ */
 @Component({
  selector: 'regular-markdown-component',
  style: css`
@@ -12,7 +15,7 @@ import { style } from './markdown-regular.css';
  `,
  template(this: RegularMarkdownComponent) {
  return html`
- <div class="input-container">
+  <div class="input-container">
  <div class="input-group ${this.error ? 'error' : ''}">
  <label>Password *</label>
  <input
@@ -34,7 +37,7 @@ import { style } from './markdown-regular.css';
 export class RegularMarkdownComponent extends LitElement {
  @property() inputLink =
  'https://raw.githubusercontent.com/rxdi/starter-client-lit-html/master/README.md';
- @property() error: boolean;
+ @property({ type: Boolean }) error: boolean;
 
  changeText(event) {
  this.error = false;

develop/src/app/modal/modal-view.component.ts

@@ -6,6 +6,9 @@ import { switchMap } from 'rxjs/operators';
 import { ModalViewService } from './modal-view.service';
 import { TestModal } from './test-modal.component';
 
+/**
+ * @customElement modal-view-component
+ */
 @Component({
  selector: 'modal-view-component',
  style: css`

src/divider/README.md

@@ -0,0 +1,22 @@
+
+# Divider Component
+
+##### Usage
+
+```typescript
+import { ButtonComponent } from '@rxdi/ui-kit/button';
+
+@Module({
+ components: [
+ ButtonComponent
+ ],
+})
+export class AppModule {}
+```
+
+
+```html
+<rx-divider></rx-divider>
+<rx-divider type="icon"></rx-divider>
+```
+

src/divider/divider.component.ts

@@ -0,0 +1,30 @@
+import {
+ unsafeCSS,
+ Component,
+ LitElement,
+ html,
+ css,
+ property
+} from '@rxdi/lit-html';
+import { style } from './style';
+/**
+ * @customElement rx-divider
+ */
+@Component({
+ selector: 'rx-divider',
+ style,
+ template(this: DividerComponent) {
+ if (this.type === 'icon') {
+ return html`
+ <hr class="icon" />
+ `;
+ }
+
+ return html`
+ <hr class="default" />
+ `;
+ }
+})
+export class DividerComponent extends LitElement {
+ @property({ type: String }) type: 'default' | 'icon' = 'default';
+}

src/divider/index.ts

@@ -0,0 +1,9 @@
+import { DividerComponent } from './divider.component';
+
+export * from './divider.component';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'rx-divider': DividerComponent;
+ }
+}

src/divider/style.ts

@@ -0,0 +1,40 @@
+import { css } from '@rxdi/lit-html';
+
+export const style = css`
+ .icon {
+ margin-bottom: 0;
+ position: relative;
+ height: 20px;
+ background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ }
+ hr {
+ border: 0;
+ }
+ .default {
+ overflow: visible;
+ text-align: inherit;
+ margin: 0 0 20px 0;
+ border: 0;
+ border-top: 1px solid #e5e5e5;
+ }
+ .icon::before {
+ right: calc(50% + (50px / 2));
+ width: 100%;
+ content: '';
+ position: absolute;
+ top: 50%;
+ max-width: calc(50% - (50px / 2));
+ border-bottom: 1px solid #e5e5e5;
+ }
+ .icon::after {
+ left: calc(50% + (50px / 2));
+ width: 100%;
+ content: '';
+ position: absolute;
+ top: 50%;
+ max-width: calc(50% - (50px / 2));
+ border-bottom: 1px solid #e5e5e5;
+ }
+`;