Merge pull request #30 from rxdi/29-component-dotnav-initialization

feature(Dotnav): added first dotnav component

develop/src/app/app.components.module.ts

@@ -12,6 +12,7 @@ import { IfComponent } from '../../../src/if/if.component';
 import { DividerComponent } from '../../../src/divider/divider.component';
 import { ProgressComponent } from '../../../src/progress/progress.component';
 import { CloseComponent } from '../../../src/close/close.component';
+import { DotnavComponent } from '../../../src/dotnav/dotnav.component';
 
 import { AlertComponent } from '../../../src/alert/alert.component';
 import { DescriptionListComponent } from '../../../src/description-list/description-list.component';
@@ -39,7 +40,8 @@ import { NavComponent } from './nav-view/nav-component';
  IfComponent,
  CloseComponent,
  AlertComponent,
- DescriptionListComponent
+ DescriptionListComponent,
+ DotnavComponent
  ]
 })
 export class AppComponentsModule {}

develop/src/app/app.routing.module.ts

@@ -23,6 +23,7 @@ import { ProgressViewComponent } from './progress-view/progress-view.component';
 import { MarkdownReaderComponent } from '../../../src/markdown-reader';
 import { AlertViewComponent } from './alert-view/alert-view.component';
 import { DescriptionListViewComponent } from './description-list-view/description-list-view.component';
+import { DotnavViewComponent } from './dotnav-view/dotnav-view.component';
 
 @Module({
  imports: [
@@ -104,6 +105,10 @@ import { DescriptionListViewComponent } from './description-list-view/descriptio
  path: '/ui-kit/description',
  component: DescriptionListViewComponent
  },
+ {
+ path: '/ui-kit/dotnav',
+ component: DotnavViewComponent
+ },
  ],
  { log: true, baseUrl: '/ui-kit' }
  )

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

@@ -0,0 +1,33 @@
+import { LitElement, Component, html, css } from '@rxdi/lit-html';
+
+@Component({
+ selector: 'dotnav-view-component',
+ style: css`
+ .container {
+ padding: 50px;
+ background: white;
+ color: #666;
+ }
+ `,
+ template(this: DotnavViewComponent) {
+ return html`
+ <div class="container">
+ <h1>Horizontal</h1>
+ <rx-dotnav orientation="row">
+ <a></a>
+ <a></a>
+ <a></a>
+ <a></a>
+ </rx-dotnav>
+ <h1>Vertical</h1>
+ <rx-dotnav orientation="column">
+ <a></a>
+ <a></a>
+ <a></a>
+ <a></a>
+ </rx-dotnav>
+ </div>
+ `;
+ }
+})
+export class DotnavViewComponent extends LitElement {}

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

@@ -38,6 +38,7 @@ import { Nav } from '../../../../src/nav';
  <a href="/ui-kit/progress"><rx-button palette="primary">Progress</rx-button> </a>
  <a href="/ui-kit/alert"><rx-button palette="primary">Alert</rx-button> </a>
  <a href="/ui-kit/description"><rx-button palette="primary">Description List</rx-button> </a>
+ <a href="/ui-kit/dotnav"><rx-button palette="primary">Dotnav</rx-button> </a>
 
  <!-- <rx-button
  palette="danger"

src/divider/divider.component.ts

@@ -1,9 +1,7 @@
 import {
- unsafeCSS,
  Component,
  LitElement,
  html,
- css,
  property
 } from '@rxdi/lit-html';
 import { style } from './style';

src/dotnav/README.md

@@ -0,0 +1,33 @@
+
+# Divider Component
+
+Pull request: https://github.com/rxdi/ui-kit/pull/30
+
+
+##### Usage
+
+```typescript
+import { DotnavComponent } from '@rxdi/ui-kit/dotnav';
+
+@Module({
+ components: [DotnavComponent],
+})
+export class AppModule {}
+```
+
+
+```html
+<rx-dotnav orientation="row">
+ <a></a>
+ <a></a>
+ <a></a>
+ <a></a>
+</rx-dotnav>
+<rx-dotnav orientation="column">
+ <a></a>
+ <a></a>
+ <a></a>
+ <a></a>
+</rx-dotnav>
+```
+

src/dotnav/dotnav.component.ts

@@ -0,0 +1,95 @@
+import {
+ Component,
+ LitElement,
+ html,
+ property,
+ css,
+ styleMap
+} from '@rxdi/lit-html';
+
+/**
+ * @customElement rx-dotnav
+ */
+@Component({
+ selector: 'rx-dotnav',
+ style: css`
+ a {
+ display: block;
+ cursor: pointer;
+ box-sizing: border-box;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: transparent;
+ text-indent: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ border: 1px solid rgba(102, 102, 102, 0.4);
+ transition: 0.2s ease-in-out;
+ transition-property: background-color, border-color;
+ }
+ .focus {
+ background-color: rgba(102, 102, 102, 0.6);
+ outline: none;
+ border-color: transparent;
+ }
+ `,
+ template(this: DotnavComponent) {
+ return html`
+ ${this.orientation === 'row'
+ ? html`
+ <style>
+ a {
+ margin-top: 0px;
+ margin-right: 12px;
+ }
+ </style>
+ `
+ : html`
+ <style>
+ a {
+ margin-top: 12px;
+ margin-right: 0px;
+ }
+ </style>
+ `}
+ <div
+ style=${styleMap({
+ display: 'flex',
+ 'flex-direction': this.orientation
+ })}
+ >
+ ${this.dots}
+ </div>
+ `;
+ }
+})
+export class DotnavComponent extends LitElement {
+ @property({ type: String })
+ public orientation: 'row' | 'column' = 'row';
+
+ @property({ type: Array })
+ private dots: HTMLAnchorElement[];
+
+ OnUpdateFirst() {
+ this.dots = this.selectAllHrefs();
+ this.attachListeners();
+ }
+
+ private selectAllHrefs() {
+ return [...Array.from(this.querySelectorAll('a'))];
+ }
+
+ private attachListeners() {
+ this.dots.forEach(el => this.attachListener(el));
+ }
+
+ private attachListener(el: HTMLElement) {
+ el.addEventListener('click', () => this.focusElement(el));
+ }
+
+ private focusElement(el: HTMLElement) {
+ this.dots.forEach(d => d.classList.remove('focus'));
+ el.classList.add('focus');
+ }
+}

src/dotnav/index.ts

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