demo site improvements and lib fix

pkovzz · Jul 7, 2024 · acc425a · acc425a
1 parent cfdb858
commit acc425a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 13 deletions.
diff --git a/projects/ngx-otp-input/src/lib/directives/inputNavigations.directive.ts b/projects/ngx-otp-input/src/lib/directives/inputNavigations.directive.ts
@@ -64,7 +64,7 @@ export class InputNavigationsDirective implements AfterContentInit {
   @HostListener('keydown.backspace', ['$event'])
   onBackspace(event: KeyboardEvent): void {
     const index = this.findInputIndex(event.target as HTMLElement);
-    if (index > 0) {
+    if (index >= 0) {
       this.valueChange.emit([index, '']);
       this.setFocus(index - 1);
       event.preventDefault();

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -14,11 +14,19 @@ <h1>ngx-otp-input</h1>
   </div>
   <div class="info">
     <span class="material-symbols-rounded"> description </span>
-    <p>
-      This quick demo showcases the ngx-otp-input component. You can configure
-      the component options below and see the changes in the preview. For more
-      information, check out the <a href="/">documentation</a>.
-    </p>
+    <div>
+      <b>About this site</b>
+      <p>
+        This quick demo showcases the ngx-otp-input component. You can configure
+        the component options below and see the changes in the preview. For more
+        information, check out the
+        <a
+          href="https://github.com/pkovzz/ngx-otp-input"
+          target="_blank"
+          >documentation</a
+        >.
+      </p>
+    </div>
   </div>
   <div class="component-wrapper">
     <div class="component-options">
@@ -104,10 +112,18 @@ <h3>Component Preview</h3>
         (otpComplete)="onOtpComplete($event)"
         (otpChange)="onOtpChange($event)"
       ></ngx-otp-input>
-      <div class="results">
+      <div class="results-container">
         <h4>Results</h4>
-        <div><b>On changes</b>: [{{ otpChangeValue }}]</div>
-        <div><b>On complete</b>: {{ otpCompleteValue }}</div>
+        <div class="results">
+          <div class="result-box">
+            <b>On changes</b>:
+            <div>{{ otpChangeValue }}</div>
+          </div>
+          <div class="result-box">
+            <b>On complete</b>:
+            <div>{{ otpCompleteValue }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -21,7 +21,9 @@
   margin: 2rem 0;
   padding: 1rem;
   background-color: #f3f3f3;
+  border: 1px solid #c7c6c6;
   border-radius: 0.5rem;
+  color: #3d3d3d;
 }
 
 .component-wrapper {
@@ -58,9 +60,25 @@ mat-checkbox {
   display: block;
 }
 
-.results {
+.results-container {
   margin-top: 2rem;
   h4 {
     font-size: 1.5rem;
   }
 }
+
+.results {
+  display: flex;
+  gap: 1rem;
+}
+
+.result-box {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid #c7c6c6;
+  border-radius: 0.5rem;
+  div {
+    margin-top: 1rem;
+    font-size: 1.5rem;
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -42,15 +42,20 @@ export class AppComponent implements OnInit {
   };
   ariaLabels = '';
   disabled = false;
-  otpChangeValue = '…';
+  otpChangeValue = '-';
   otpCompleteValue = '-';
 
   ngOnInit(): void {
     this.formatAriaLabelsForDisplay();
   }
 
   onOtpChange(otp: string[]) {
-    this.otpChangeValue = otp.join(', ');
+    const hasValue = otp.some((value) => value !== '');
+    if (hasValue) {
+      this.otpChangeValue = otp.join(', ');
+    } else {
+      this.otpChangeValue = '-';
+    }
   }
 
   onOtpComplete(otp: string) {

diff --git a/src/styles.scss b/src/styles.scss
@@ -7,5 +7,5 @@ body {
 body {
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
-  padding-bottom: 3rem;
+  padding-bottom: 6rem;
 }