@tolle_/tolle-ui 18.2.24 → 18.2.25

package/registry/r/otp-slot.json

@@ -0,0 +1,21 @@
+{
+  "name": "otp-slot",
+  "type": "registry:ui",
+  "title": "Otp Slot",
+  "description": "Otp Slot component.",
+  "category": "forms",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "otp-slot.component.ts",
+      "target": "ui/otp-slot.component.ts",
+      "content": "import { Component, Input } from '@angular/core';\nimport { cn } from \"./utils/cn\";\nimport { NgIf } from '@angular/common';\n\n@Component({\n  selector: 'tolle-otp-slot',\n  standalone: true,\n  imports: [NgIf],\n  template: `\n    <div [class]=\"computedClass\">\n      <span class=\"text-lg font-medium\">{{ char || '' }}</span>\n      <div *ngIf=\"isActive && !char\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n        <div class=\"h-6 w-0.5 animate-caret-blink bg-foreground\"></div>\n      </div>\n    </div>\n  `\n})\nexport class OtpSlotComponent {\n  @Input() char: string | undefined = '';\n  @Input() isActive: boolean = false;\n  @Input() isFirst: boolean = false;\n  @Input() isLast: boolean = false;\n  @Input() class: string = '';\n  protected cn = cn;\n\n  get computedClass() {\n    return cn(\n      // Base styles (matching input container)\n      'relative flex h-10 w-10 items-center justify-center',\n      'transition-all duration-200',\n      'text-center font-medium select-none',\n\n      // Border styling - exactly like input\n      'border border-input shadow-sm bg-background',\n\n      // FOCUS STYLING - EXACTLY LIKE INPUT COMPONENT\n      this.isActive && [\n        // Darker border on focus\n        'border-primary/80',\n        // Remove shadow on focus\n        'shadow-none',\n        // Focus ring with same styling as input\n        'ring-4',\n        'ring-ring/30',\n        'ring-offset-0',\n        // Ensure it's above other slots\n        'z-10'\n      ],\n\n      // Filled state\n      this.char && !this.isActive && 'border-primary/60',\n\n      // Border radius\n      this.isFirst && 'rounded-l-md',\n      this.isLast && 'rounded-r-md',\n\n      // Remove left border for all but first slot\n      !this.isFirst && '-ml-px',\n\n      this.class\n    );\n  }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}

package/registry/r/otp.json

@@ -0,0 +1,21 @@
+{
+  "name": "otp",
+  "type": "registry:ui",
+  "title": "Otp",
+  "description": "Otp component.",
+  "category": "forms",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "otp.component.ts",
+      "target": "ui/otp.component.ts",
+      "content": "import { Component, Input, forwardRef, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { cn } from './utils/cn';\n\n@Component({\n  selector: 'tolle-otp',\n  standalone: true,\n  imports: [CommonModule, FormsModule],\n  providers: [{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => OtpComponent),\n    multi: true\n  }],\n  template: `\n    <div class=\"relative flex items-center gap-2\">\n      <input\n        #hiddenInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        aria-label=\"One-time code\"\n        [maxLength]=\"length\"\n        class=\"absolute inset-0 opacity-0 cursor-default z-20\"\n        [(ngModel)]=\"value\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"isFocused = true\"\n        (blur)=\"isFocused = false; onTouched()\"\n        [disabled]=\"disabled\"\n      />\n\n      <div *ngIf=\"auto\" class=\"flex items-center gap-2 pointer-events-none\">\n        <div class=\"flex items-center\">\n          <div *ngFor=\"let _ of slots; let i = index\"\n               [class]=\"getSlotClass(i)\"\n          >\n            {{ value[i] || '' }}\n            <div *ngIf=\"isFocused && value.length === i\" class=\"absolute inset-0 flex items-center justify-center\">\n              <div class=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"!auto\" class=\"flex items-center gap-2 pointer-events-none\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  `\n})\nexport class OtpComponent implements ControlValueAccessor {\n  @Input()\n  set length(val: number) {\n    const numericVal = Number(val);\n    this._length = numericVal;\n    this.slots = Array(numericVal).fill(0);\n  }\n  get length() { return this._length; }\n  private _length = 6;\n\n  @Input() disabled = false;\n  @Input() auto = false;\n\n  protected slots: number[] = Array(6).fill(0);\n\n  value: string = '';\n  isFocused = false;\n\n  onChange: any = () => { };\n  onTouched: any = () => { };\n\n  constructor(private cdr: ChangeDetectorRef) { }\n\n  onInputChange(event: any) {\n    const val = event.target.value.replace(/\\D/g, '');\n    this.value = val;\n    this.onChange(val);\n    this.cdr.markForCheck();\n  }\n\n  // Visual logic for the automated slots\n  getSlotClass(index: number) {\n    const isActive = this.isFocused && this.value.length === index;\n\n    return cn(\n      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all bg-background',\n      index === 0 && 'rounded-l-md border-l',\n      index === this.length - 1 && 'rounded-r-md',\n      isActive && 'z-30 ring-2 ring-ring ring-offset-background'\n    );\n  }\n\n  writeValue(value: any): void { this.value = value || ''; this.cdr.markForCheck(); }\n  registerOnChange(fn: any): void { this.onChange = fn; }\n  registerOnTouched(fn: any): void { this.onTouched = fn; }\n  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; this.cdr.markForCheck(); }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}

package/registry/r/pagination.json

@@ -0,0 +1,32 @@
+{
+  "name": "pagination",
+  "type": "registry:ui",
+  "title": "Pagination",
+  "description": "Pagination component.",
+  "category": "navigation",
+  "registryDependencies": [
+    "input",
+    "select",
+    "select-item"
+  ],
+  "dependencies": [
+    "@floating-ui/dom"
+  ],
+  "files": [
+    {
+      "path": "pagination.component.ts",
+      "target": "ui/pagination.component.ts",
+      "content": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  inject,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cn } from './utils/cn';\nimport {FormsModule} from '@angular/forms';\nimport {SelectComponent} from './select.component';\nimport {SelectItemComponent} from './select-item.component';\n\n@Component({\n  selector: 'tolle-pagination',\n  standalone: true,\n  imports: [CommonModule, FormsModule, SelectComponent, SelectItemComponent],\n  template: `\n    <nav role=\"navigation\" aria-label=\"pagination\">\n    <div [class]=\"cn('flex items-center justify-between px-2 py-4', class)\">\n\n      <div *ngIf=\"showCurrentPageInfo\" class=\"text-sm text-muted-foreground\">\n        <ng-container *ngIf=\"currentPageInfoTemplate; else defaultReport\">\n          {{ pageReport }}\n        </ng-container>\n        <ng-template #defaultReport>\n          Showing {{ first }} to {{ last }} of {{ totalRecords }} entries\n        </ng-template>\n      </div>\n\n      <div class=\"flex items-center space-x-6 lg:space-x-8\">\n\n        <div *ngIf=\"showPageOptions\" class=\"flex items-center space-x-2\">\n          <p class=\"text-sm font-medium\">Rows per page</p>\n          <tolle-select\n            class=\"w-[70px]\"\n            size=\"sm\"\n            [ngModel]=\"currentPageSize\"\n            (ngModelChange)=\"sizeChange($event)\"\n          >\n            <tolle-select-item *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">\n              {{ opt }}\n            </tolle-select-item>\n          </tolle-select>\n        </div>\n\n        <div class=\"flex items-center space-x-2\">\n          <div *ngIf=\"!showPageLinks\" class=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n            Page {{ currentPage }} of {{ totalPages }}\n          </div>\n\n          <div *ngIf=\"showPageLinks\" class=\"flex items-center space-x-1\">\n            <button\n              (click)=\"previousPage()\"\n              [disabled]=\"currentPage === 1\"\n              aria-label=\"Go to previous page\"\n              [class]=\"navBtnClass\"\n            >\n              <i aria-hidden=\"true\" class=\"ri-arrow-left-s-line\"></i>\n            </button>\n\n            <button\n              *ngFor=\"let page of displayPageIndex\"\n              (click)=\"selectPage(page)\"\n              [attr.aria-current]=\"currentPage === page ? 'page' : null\"\n              [class]=\"cn(\n                'h-8 w-8 text-sm rounded-md flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer',\n                currentPage === page\n                  ? 'bg-primary text-primary-foreground font-medium'\n                  : 'hover:bg-accent hover:text-accent-foreground'\n              )\"\n            >\n              {{ page }}\n            </button>\n\n            <button\n              (click)=\"nextPage()\"\n              [disabled]=\"currentPage === totalPages || totalPages === 0\"\n              aria-label=\"Go to next page\"\n              [class]=\"navBtnClass\"\n            >\n              <i aria-hidden=\"true\" class=\"ri-arrow-right-s-line\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    </nav>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PaginationComponent implements OnInit, OnChanges {\n  @Input() class = '';\n  @Input() showPageLinks = true;\n  @Input() showPageOptions = true;\n  @Input() showCurrentPageInfo = true;\n  @Input() currentPageInfoTemplate?: string;\n\n  @Input() totalRecords = 0;\n  @Input() currentPageSize = 10;\n  @Input() currentPage = 1;\n  @Input() pageSizeOptions: number[] = [10, 20, 30, 50];\n\n  @Output() onPageNumberChange = new EventEmitter<number>();\n  @Output() onPageSizeChange = new EventEmitter<number>();\n\n  totalPages = 0;\n  first = 0;\n  last = 0;\n  displayPageIndex: number[] = [];\n  pageReport = '';\n\n  private initialized = false;\n  private cd = inject(ChangeDetectorRef);\n  protected cn = cn;\n\n  navBtnClass = 'h-8 w-8 p-0 flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer';\n\n  ngOnInit(): void {\n    if (this.pageSizeOptions.length === 0) {\n      this.pageSizeOptions = [10, 20, 30, 50];\n    }\n    this.initializePagination();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    // Only re-init if meaningful data changes\n    if (changes['totalRecords'] || changes['currentPage'] || changes['currentPageSize']) {\n      this.initializePagination();\n    }\n  }\n\n  private initializePagination(): void {\n    this.calcPagination();\n    if (!this.initialized) {\n      this.initialized = true;\n    }\n    this.cd.detectChanges();\n  }\n\n  nextPage() {\n    if (this.totalPages > this.currentPage) {\n      this.currentPage++;\n      this.emitChange();\n    }\n  }\n\n  previousPage() {\n    if (this.currentPage > 1) {\n      this.currentPage--;\n      this.emitChange();\n    }\n  }\n\n  selectPage(page: number) {\n    if (this.currentPage === page) return;\n    this.currentPage = page;\n    this.emitChange();\n  }\n\n  sizeChange(size: number) {\n    this.currentPageSize = size;\n    this.currentPage = 1; // Reset to page 1 on size change\n    this.emitChange();\n  }\n\n  private emitChange(): void {\n    this.calcPagination();\n    this.onPageNumberChange.emit(this.currentPage);\n    this.onPageSizeChange.emit(this.currentPageSize);\n    this.cd.detectChanges();\n  }\n\n  private calcPagination(): void {\n    this.totalPages = Math.ceil(this.totalRecords / this.currentPageSize) || 0;\n\n    // Bounds check\n    if (this.currentPage > this.totalPages && this.totalPages > 0) {\n      this.currentPage = this.totalPages;\n    }\n\n    this.first = this.totalRecords === 0 ? 0 : (this.currentPage - 1) * this.currentPageSize + 1;\n    this.last = Math.min(this.totalRecords, this.currentPage * this.currentPageSize);\n\n    // Calculate Sliding Window for Page Numbers (Max 5 visible)\n    const pages: number[] = Array.from({ length: this.totalPages }, (_, i) => i + 1);\n\n    if (this.totalPages <= 5) {\n      this.displayPageIndex = pages;\n    } else {\n      let start = Math.max(0, this.currentPage - 3);\n      let end = start + 5;\n\n      if (end > this.totalPages) {\n        end = this.totalPages;\n        start = end - 5;\n      }\n      this.displayPageIndex = pages.slice(start, end);\n    }\n\n    // Template Parsing\n    if (this.currentPageInfoTemplate) {\n      this.pageReport = this.currentPageInfoTemplate.replace(\n        /{first}|{last}|{totalRecords}|{currentPage}|{currentPageSize}|{totalPages}/g,\n        (match) => {\n          switch (match) {\n            case '{first}': return `${this.first}`;\n            case '{last}': return `${this.last}`;\n            case '{totalRecords}': return `${this.totalRecords}`;\n            case '{totalPages}': return `${this.totalPages}`;\n            case '{currentPage}': return `${this.currentPage}`;\n            case '{currentPageSize}': return `${this.currentPageSize}`;\n            default: return match;\n          }\n        }\n      );\n    }\n  }\n}\n"
+    },
+    {
+      "path": "select.service.ts",
+      "target": "ui/select.service.ts",
+      "content": "import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable()\nexport class SelectService {\n  // Emits the value of the clicked item\n  private selectedValueSource = new Subject<any>();\n  selectedValue$ = this.selectedValueSource.asObservable();\n\n  // Emits the label/text of the clicked item\n  private selectedLabelSource = new Subject<string>();\n  selectedLabel$ = this.selectedLabelSource.asObservable();\n\n  registerClick(value: any, label: string) {\n    this.selectedValueSource.next(value);\n    this.selectedLabelSource.next(label);\n  }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}