From 81f43f43e2cb73742b88514dd5a83654a61824ef Mon Sep 17 00:00:00 2001
From: Kristiyan Tachev <kristiqn.tachev@gmail.com>
Date: Tue, 29 Oct 2019 18:27:42 +0200
Subject: [PATCH] feature(Dotnav): added first dotnav component

---
 develop/src/app/app.components.module.ts      |  4 +-
 develop/src/app/app.routing.module.ts         |  5 +
 .../app/dotnav-view/dotnav-view.component.ts  | 33 +++++++
 develop/src/app/nav-view/nav-component.ts     |  1 +
 src/divider/divider.component.ts              |  2 -
 src/dotnav/README.md                          | 33 +++++++
 src/dotnav/dotnav.component.ts                | 95 +++++++++++++++++++
 src/dotnav/index.ts                           |  9 ++
 8 files changed, 179 insertions(+), 3 deletions(-)
 create mode 100644 develop/src/app/dotnav-view/dotnav-view.component.ts
 create mode 100644 src/dotnav/README.md
 create mode 100644 src/dotnav/dotnav.component.ts
 create mode 100644 src/dotnav/index.ts

diff --git a/develop/src/app/app.components.module.ts b/develop/src/app/app.components.module.ts
index 9564b4a..b073f56 100644
--- a/develop/src/app/app.components.module.ts
+++ b/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 {}
diff --git a/develop/src/app/app.routing.module.ts b/develop/src/app/app.routing.module.ts
index ed1692d..028e735 100644
--- a/develop/src/app/app.routing.module.ts
+++ b/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' }
     )
diff --git a/develop/src/app/dotnav-view/dotnav-view.component.ts b/develop/src/app/dotnav-view/dotnav-view.component.ts
new file mode 100644
index 0000000..6e03c44
--- /dev/null
+++ b/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 {}
diff --git a/develop/src/app/nav-view/nav-component.ts b/develop/src/app/nav-view/nav-component.ts
index c7660fa..80ebdbd 100644
--- a/develop/src/app/nav-view/nav-component.ts
+++ b/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"
diff --git a/src/divider/divider.component.ts b/src/divider/divider.component.ts
index 566f5ac..83154f7 100644
--- a/src/divider/divider.component.ts
+++ b/src/divider/divider.component.ts
@@ -1,9 +1,7 @@
 import {
-  unsafeCSS,
   Component,
   LitElement,
   html,
-  css,
   property
 } from '@rxdi/lit-html';
 import { style } from './style';
diff --git a/src/dotnav/README.md b/src/dotnav/README.md
new file mode 100644
index 0000000..28e7af0
--- /dev/null
+++ b/src/dotnav/README.md
@@ -0,0 +1,33 @@
+
+# Divider Component
+
+Pull request: https://github.com/rxdi/ui-kit/pull/14
+
+
+##### 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>
+```
+
diff --git a/src/dotnav/dotnav.component.ts b/src/dotnav/dotnav.component.ts
new file mode 100644
index 0000000..2b4b86b
--- /dev/null
+++ b/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');
+  }
+}
diff --git a/src/dotnav/index.ts b/src/dotnav/index.ts
new file mode 100644
index 0000000..b632312
--- /dev/null
+++ b/src/dotnav/index.ts
@@ -0,0 +1,9 @@
+import { DotnavComponent } from './dotnav.component';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rx-dotnet': DotnavComponent;
+  }
+}
+
+export * from './dotnav.component';