fix: remove consoles, docs, fix examples

Author: shhdharmen

README.md

@@ -20,9 +20,9 @@ import { InputOTPComponent } from '@ngxpert/input-otp';
 @Component({
   selector: 'app-my-component',
   template: `
-    <input-otp [maxLength]="6" [(ngModel)]="otpValue">
+    <input-otp [maxLength]="6" [(ngModel)]="otpValue" #otpInput>
       <div style="display: flex;">
-        @for (slot of otp.slots(); track $index) {
+        @for (slot of otpInput.slots(); track $index) {
           <div>{{ slot.char }}</div>
         }
       </div>
@@ -43,11 +43,11 @@ export class MyComponent {
 
 ## Default example
 
-The example below uses `tailwindcss` `tailwind-merge` `clsx`:
+The example below uses `tailwindcss` `tailwind-merge` `clsx`. You can see it online [here](https://ngxpert.github.io/input-otp/examples), code available [here](https://github.com/ngxpert/input-otp/tree/main/src/app/pages/examples/main).
 
 ### main.component
 
-```tsx
+```ts
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { InputOTPComponent } from '@ngxpert/input-otp';
@@ -64,23 +64,37 @@ import { FakeDashComponent } from './fake-components';
       #otp="inputOtp"
     >
       <div class="flex">
-        @for (slot of otp.slots().slice(0, 3); track $index) {
+        @for (
+          slot of otp.slots().slice(0, 3);
+          track $index;
+          let first = $first;
+          let last = $last
+        ) {
           <app-slot
             [isActive]="slot.isActive"
             [char]="slot.char"
             [placeholderChar]="slot.placeholderChar"
             [hasFakeCaret]="slot.hasFakeCaret"
+            [first]="first"
+            [last]="last"
           />
         }
       </div>
       <app-fake-dash />
       <div class="flex">
-        @for (slot of otp.slots().slice(3, 6); track $index + 3) {
+        @for (
+          slot of otp.slots().slice(3, 6);
+          track $index + 3;
+          let last = $last;
+          let first = $first
+        ) {
           <app-slot
             [isActive]="slot.isActive"
             [char]="slot.char"
             [placeholderChar]="slot.placeholderChar"
             [hasFakeCaret]="slot.hasFakeCaret"
+            [first]="first"
+            [last]="last"
           />
         }
       </div>
@@ -110,10 +124,12 @@ import { cn } from './utils';
           'relative w-10 h-14 text-[2rem]',
           'flex items-center justify-center',
           'transition-all duration-300',
-          'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',
+          'border-y border-r',
           'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
           'outline outline-0 outline-accent-foreground/20',
-          { 'outline-4 outline-accent-foreground': isActive }
+          { 'outline-4 outline-accent-foreground': isActive },
+          { 'border-l rounded-l-md': first },
+          { 'rounded-r-md': last }
         )
       "
     >
@@ -134,6 +150,8 @@ export class SlotComponent {
   @Input() char: string | null = null;
   @Input() placeholderChar: string | null = null;
   @Input() hasFakeCaret = false;
+  @Input() first = false;
+  @Input() last = false;
   cn = cn;
 }
 
@@ -148,7 +166,7 @@ import { Component } from '@angular/core';
   selector: 'app-fake-dash',
   template: `
     <div class="flex w-10 justify-center items-center">
-      <div class="w-3 h-1 rounded-full bg-border"></div>
+      <div class="w-3 h-1 rounded-full bg-black/75"></div>
     </div>
   `,
 })
@@ -160,7 +178,7 @@ export class FakeDashComponent {}
     <div
       class="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink"
     >
-      <div class="w-px h-8 bg-white"></div>
+      <div class="w-[2px] h-8 bg-black/75"></div>
     </div>
   `,
 })
@@ -171,7 +189,6 @@ export class FakeCaretComponent {}
 ### utils
 
 ```ts
-// Small utility to merge class names.
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -183,6 +200,27 @@ export function cn(...inputs: ClassValue[]) {
 
 ```
 
+### styles
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --animate-caret-blink: caret-blink 1.2s ease-out infinite;
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+```
+
 ## How it works
 
 There's currently no native OTP/2FA/MFA input in HTML, which means people are either going with

projects/ngxpert/input-otp/src/lib/components/input-otp/input-otp.component.ts

@@ -217,7 +217,6 @@ export class InputOTPComponent
 
   private valueOrFocusedChanged() {
     // Forcefully remove :autofill state
-    console.log('valueOrFocusedChanged');
     this.inputRef()?.nativeElement?.dispatchEvent(new Event('input'));
 
     // Update the selection state
@@ -443,7 +442,6 @@ export class InputOTPComponent
   }
 
   private changeFocus(value: boolean) {
-    console.log('changeFocus', value);
     this.isFocused.set(value);
     this.valueOrFocusedChanged();
   }

src/app/components/code/code.component.html

@@ -9,11 +9,16 @@
     @for (file of files; track file.fileName) {
       <mat-tab [label]="file.fileName">
         <ng-template mat-tab-label>{{ file.fileName }}</ng-template>
-        <div
-          [innerHTML]="
-            file.content | codeHighlight: file.language | async | safeHtml
-          "
-        ></div>
+        <div class="relative">
+          <span class="absolute top-2 right-2">
+            <app-copy-button [textToCopy]="file.content" />
+          </span>
+          <div
+            [innerHTML]="
+              file.content | codeHighlight: file.language | async | safeHtml
+            "
+          ></div>
+        </div>
       </mat-tab>
     }
   </mat-tab-group>

src/app/components/code/code.component.ts

@@ -11,11 +11,17 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { AsyncPipe } from '@angular/common';
 import { CodeHighlightPipe } from '../../shared/pipes/code-highlight.pipe';
 import { SafeHtmlPipe } from '../../shared/pipes/safe-html.pipe';
-
+import { CopyButtonComponent } from '../copy-button/copy-button.component';
 @Component({
   selector: 'app-code',
   templateUrl: './code.component.html',
-  imports: [MatTabsModule, AsyncPipe, CodeHighlightPipe, SafeHtmlPipe],
+  imports: [
+    MatTabsModule,
+    AsyncPipe,
+    CodeHighlightPipe,
+    SafeHtmlPipe,
+    CopyButtonComponent,
+  ],
 })
 export class CodeComponent {
   readonly files: { fileName: string; content: string; language: string }[] = [
@@ -43,5 +49,26 @@ ${fakeComponentsContent}`,
 ${utilsContent}`,
       language: 'ts',
     },
+    {
+      fileName: 'styles.css',
+      content: `
+@import "tailwindcss";
+
+@theme {
+  --animate-caret-blink: caret-blink 1.2s ease-out infinite;
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}`,
+      language: 'css',
+    },
   ];
 }

src/app/components/copy-button/copy-button.component.html

@@ -0,0 +1,16 @@
+<button
+  appUiButton
+  size="icon"
+  variant="ghost"
+  [cdkCopyToClipboard]="textToCopy"
+  (cdkCopyToClipboardCopied)="copied()"
+>
+  @if (isCopied) {
+    <span class="text-muted-foreground material-symbols-outlined"> check </span>
+  } @else {
+    <span class="text-muted-foreground material-symbols-outlined">
+      content_copy
+    </span>
+  }
+  <span class="sr-only">Copy</span>
+</button>

src/app/components/copy-button/copy-button.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { ButtonDirective } from '../ui/button/button.component';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+@Component({
+  selector: 'app-copy-button',
+  templateUrl: './copy-button.component.html',
+  imports: [ButtonDirective, CdkCopyToClipboard],
+})
+export class CopyButtonComponent {
+  @Input() textToCopy = '';
+  isCopied = false;
+
+  copied() {
+    this.isCopied = true;
+    setTimeout(() => {
+      this.isCopied = false;
+    }, 2000);
+  }
+}

src/app/components/showcase/showcase.component.html

@@ -13,25 +13,39 @@
     name="otp"
     [disabled]="disabled()"
   >
-    <div class="flex gap-2">
-      @for (slot of otp.slots().slice(0, 3); track $index) {
+    <div class="flex">
+      @for (
+        slot of otp.slots().slice(0, 3);
+        track $index;
+        let first = $first;
+        let last = $last
+      ) {
         <app-slot
           [isActive]="slot.isActive"
           [char]="slot.char"
           [placeholderChar]="slot.placeholderChar"
           [hasFakeCaret]="slot.hasFakeCaret"
           [animateIdx]="$index"
+          [first]="first"
+          [last]="last"
         />
       }
 
       <app-fake-dash />
 
-      @for (slot of otp.slots().slice(3, 6); track $index + 3) {
+      @for (
+        slot of otp.slots().slice(3, 6);
+        track $index + 3;
+        let last = $last;
+        let first = $first
+      ) {
         <app-slot
           [isActive]="slot.isActive"
           [char]="slot.char"
           [placeholderChar]="slot.placeholderChar"
           [hasFakeCaret]="slot.hasFakeCaret"
+          [last]="last"
+          [first]="first"
         />
       }
     </div>

src/app/components/slot/slot.component.html

@@ -1,8 +1,10 @@
 <div
   [ngClass]="[
-    'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] md:text-[4rem] flex items-center justify-center border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all [transition-duration:300ms] outline outline-0 outline-accent-foreground/20',
+    'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] md:text-[4rem] flex items-center justify-center border-border border-y border-r transition-all [transition-duration:300ms] outline outline-0 outline-accent-foreground/20',
     'group-hover:border-accent-foreground/20 group-focus-within:!border-accent-foreground/50',
     isActive ? 'outline-4 outline-accent-foreground' : '',
+    first ? 'border-l rounded-l-md' : '',
+    last ? 'rounded-r-md' : '',
   ]"
 >
   <div

src/app/components/slot/slot.component.ts

@@ -13,6 +13,8 @@ export class SlotComponent implements SlotProps {
   @Input() char: string | null = null;
   @Input() placeholderChar: string | null = null;
   @Input() hasFakeCaret = false;
+  @Input() first = false;
+  @Input() last = false;
   private _animateIdx: number | undefined;
   willAnimateChar = false;
   willAnimateCaret = false;

src/app/pages/examples/main/fake-components.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-fake-dash',
   template: `
     <div class="flex w-10 justify-center items-center">
-      <div class="w-3 h-1 rounded-full bg-border"></div>
+      <div class="w-3 h-1 rounded-full bg-black/75"></div>
     </div>
   `,
 })
@@ -16,7 +16,7 @@ export class FakeDashComponent {}
     <div
       class="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink"
     >
-      <div class="w-px h-8 bg-white"></div>
+      <div class="w-[2px] h-8 bg-black/75"></div>
     </div>
   `,
 })