{"_id":"@avoraui/av-time-picker","name":"@avoraui/av-time-picker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@avoraui/av-time-picker","version":"1.0.0","description":"A premium Angular time picker component with Arc Dial and Numpad entry.","keywords":["angular","time-picker","time-input","arc-dial","numpad"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","peerDependencies":{"@angular/common":"^20.1.0","@angular/core":"^20.1.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/avoraui-av-time-picker.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-time-picker.mjs"}},"_id":"@avoraui/av-time-picker@1.0.0","gitHead":"a2e109e7b38560dda7020bcce8af22dc93c040ba","_nodeVersion":"22.12.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-tU56JWttx8Zn8HDT+lw5azDtWwd50iTWusWOSqwoRIsA4mH1ad47mWKssjlD7PhxHXlm8Em+Aqlhplc7CQeDyg==","shasum":"ce39734efdd50edd227c95e5aec7c6f9c730e0d6","tarball":"https://registry.npmjs.org/@avoraui/av-time-picker/-/av-time-picker-1.0.0.tgz","fileCount":5,"unpackedSize":135862,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDfIUgspIbPgO7FusxGXz77VXyaOV8K3HJoJpSYyLXRAwIgF0yCDw1RndRKWErJDOBT0LvYy2YhqLY1DGgJfUC+5gM="}]},"_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"directories":{},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/av-time-picker_1.0.0_1771949655589_0.8541276826994053"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-24T16:14:15.523Z","1.0.0":"2026-02-24T16:14:15.747Z","modified":"2026-02-24T16:14:15.937Z"},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"description":"A premium Angular time picker component with Arc Dial and Numpad entry.","keywords":["angular","time-picker","time-input","arc-dial","numpad"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","readme":"# AvTimePicker\r\n\r\n`AvTimePicker` is a premium, neon-styled Angular time picker component featuring a dual-view interface with an Arc Dial and a Numpad entry. It supports multiple neon themes, a clean light/white theme, and is fully compatible with any timezone.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- **Dual View** — Seamlessly switch between a circular Arc Dial and a numeric Numpad entry.\r\n- **Neon Themes** — Choose from vibrant themes: `green`, `blue`, `yellow`, `pink`, `red`, and `white`.\r\n- **Timezone Support** — Set any valid IANA timezone; the picker initialises with the correct local time.\r\n- **Reactive Forms** — Implements `ControlValueAccessor` for full Angular Reactive Forms support.\r\n- **Template-Driven Forms** — Also works with `[(ngModel)]` for simpler bindings.\r\n- **Popup Input** — `AvTimePickerInput` wraps the picker in a styled text field with a popup panel.\r\n- **Smart Value Normalisation** — Accepts `\"HH:MM\"`, `\"HH:MM AM/PM\"`, and `\"HH:MM\"` in 24-hour format.\r\n- **Responsive Design** — Works on both desktop and touch devices; popup repositions on small screens.\r\n- **Premium Aesthetics** — High-quality SVG animations, arc glow effects, and micro-interactions.\r\n\r\n---\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @avoraui/av-time-picker\r\n```\r\n\r\n---\r\n\r\n## Components\r\n\r\nThis package exports two components:\r\n\r\n| Component | Selector | Description |\r\n|-----------|----------|-------------|\r\n| `AvTimePicker` | `av-time-picker` | The standalone dial/numpad picker card. |\r\n| `AvTimePickerInput` | `av-time-picker-input` | A styled text input that opens the picker in a popup. |\r\n\r\n---\r\n\r\n## Usage\r\n\r\n### Basic Picker (`av-time-picker`)\r\n\r\nImport in your standalone component or `NgModule`:\r\n\r\n```typescript\r\nimport { AvTimePicker } from '@avoraui/av-time-picker';\r\n\r\n@Component({\r\n  standalone: true,\r\n  imports: [AvTimePicker],\r\n})\r\nexport class MyComponent {}\r\n```\r\n\r\n```html\r\n<av-time-picker\r\n  [theme]=\"'blue'\"\r\n  [timeZone]=\"'America/New_York'\"\r\n  [formControl]=\"timeControl\">\r\n</av-time-picker>\r\n```\r\n\r\n---\r\n\r\n### Input Field with Popup (`av-time-picker-input`)\r\n\r\nFor a text field that opens the picker in a floating popup:\r\n\r\n```typescript\r\nimport { AvTimePickerInput } from '@avoraui/av-time-picker';\r\n\r\n@Component({\r\n  standalone: true,\r\n  imports: [AvTimePickerInput],\r\n})\r\nexport class MyComponent {}\r\n```\r\n\r\n```html\r\n<av-time-picker-input\r\n  theme=\"green\"\r\n  placeholder=\"Select time\"\r\n  [timeZone]=\"'Asia/Colombo'\"\r\n  [(ngModel)]=\"selectedTime\">\r\n</av-time-picker-input>\r\n```\r\n\r\n---\r\n\r\n### Reactive Forms Integration\r\n\r\n```typescript\r\nimport { FormBuilder } from '@angular/forms';\r\n\r\nexport class MyComponent {\r\n  form = this.fb.group({\r\n    time: ['']\r\n  });\r\n\r\n  constructor(private fb: FormBuilder) {}\r\n\r\n  ngOnInit() {\r\n    // Set a value programmatically — accepts HH:MM or HH:MM AM/PM\r\n    this.form.get('time')?.setValue('14:30');     // → \"02:30 PM\"\r\n    this.form.get('time')?.setValue('07:00 AM'); // → \"07:00 AM\"\r\n\r\n    // Listen for changes\r\n    this.form.get('time')?.valueChanges.subscribe(value => {\r\n      console.log('Time changed:', value); // \"07:00 AM\"\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n```html\r\n<form [formGroup]=\"form\">\r\n  <av-time-picker-input\r\n    theme=\"blue\"\r\n    placeholder=\"Select time\"\r\n    formControlName=\"time\">\r\n  </av-time-picker-input>\r\n  <p>Selected: {{ form.get('time')?.value }}</p>\r\n</form>\r\n```\r\n\r\n> **Note:** Do not mix `formControlName` and `[(ngModel)]` on the same element. Use one binding approach per field.\r\n\r\n---\r\n\r\n## API\r\n\r\n### `AvTimePicker` Inputs\r\n\r\n| Input | Type | Default | Description |\r\n|-------|------|---------|-------------|\r\n| `theme` | `'green' \\| 'blue' \\| 'yellow' \\| 'pink' \\| 'red' \\| 'white'` | `'green'` | Sets the colour theme. |\r\n| `timeZone` | `string` | System timezone | Any valid IANA timezone string (e.g. `'Asia/Tokyo'`). |\r\n| `defaultView` | `'dial' \\| 'numpad'` | `'dial'` | The initial view shown when the picker opens. |\r\n\r\n### `AvTimePickerInput` Inputs\r\n\r\n| Input | Type | Default | Description |\r\n|-------|------|---------|-------------|\r\n| `theme` | `'green' \\| 'blue' \\| 'yellow' \\| 'pink' \\| 'red' \\| 'white'` | `'green'` | Sets the colour theme of both the input and popup. |\r\n| `timeZone` | `string` | System timezone | Any valid IANA timezone string. |\r\n| `placeholder` | `string` | `'Select time'` | Placeholder text shown when no value is set. |\r\n| `label` | `string` | `''` | Optional label rendered above the input field. |\r\n\r\n---\r\n\r\n## Value Format\r\n\r\nThe component emits and accepts time values as a string.\r\n\r\n| Input format | Normalised output |\r\n|---|---|\r\n| `\"07:30 AM\"` | `\"07:30 AM\"` |\r\n| `\"07:30\"` | `\"07:30 AM\"` |\r\n| `\"14:30\"` | `\"02:30 PM\"` |\r\n| `\"12:00\"` | `\"12:00 PM\"` |\r\n| `\"00:00\"` | `\"12:00 AM\"` |\r\n\r\n---\r\n\r\n## Themes Preview\r\n\r\n| Theme | Accent | Best for |\r\n|-------|--------|----------|\r\n| `green` | `#00f5c4` | Dark dashboards, dev tools |\r\n| `blue` | `#38bdf8` | Admin panels, analytics |\r\n| `yellow` | `#fde047` | Alerts, calendars |\r\n| `pink` | `#f472b6` | Lifestyle, social apps |\r\n| `red` | `#f87171` | Urgent actions, alerts |\r\n| `white` | `#000000` | Light-themed applications |\r\n\r\n---\r\n\r\n## Examples\r\n\r\n### Multiple timezones\r\n\r\n```html\r\n<av-time-picker-input theme=\"blue\"   timeZone=\"Asia/Colombo\"   placeholder=\"Sri Lanka\" [(ngModel)]=\"time1\"></av-time-picker-input>\r\n<av-time-picker-input theme=\"yellow\" timeZone=\"Asia/Tokyo\"     placeholder=\"Tokyo\"     [(ngModel)]=\"time2\"></av-time-picker-input>\r\n<av-time-picker-input theme=\"pink\"   timeZone=\"Europe/London\"  placeholder=\"London\"    [(ngModel)]=\"time3\"></av-time-picker-input>\r\n<av-time-picker-input theme=\"white\"  timeZone=\"America/New_York\" placeholder=\"New York\" [(ngModel)]=\"time4\"></av-time-picker-input>\r\n```\r\n\r\n### Disabled state\r\n\r\n```html\r\n<av-time-picker-input theme=\"green\" [disabled]=\"true\" [(ngModel)]=\"time\"></av-time-picker-input>\r\n```\r\n\r\n### Start in numpad view\r\n\r\n```html\r\n<av-time-picker theme=\"red\" defaultView=\"numpad\" [formControl]=\"timeControl\"></av-time-picker>\r\n```\r\n\r\n---\r\n\r\n## Requirements\r\n\r\n- Angular 17+\r\n- Modern browser with CSS Grid support\r\n\r\n## Browser Support\r\n\r\n| Browser | Support |\r\n|---------|---------|\r\n| Chrome 90+ | ✅ |\r\n| Firefox 88+ | ✅ |\r\n| Safari 14+ | ✅ |\r\n| Edge 90+ | ✅ |\r\n\r\n---\r\n\r\n### 1.0.0\r\n- Added `white` light theme for `AvTimePicker` and `AvTimePickerInput`\r\n- Fixed `setValue()` not displaying in the text field (now accepts `\"HH:MM\"` without AM/PM)\r\n- Fixed theme CSS variables now set on `:host(.theme-*)` to ensure correct cascade in Angular's emulated encapsulation\r\n- Fixed `ngOnInit` race condition overwriting values set via `writeValue`\r\n- Added `AvTimePickerInput` popup input component with click-outside close, animations, and form integration\r\n- Fixed SVG filter ID collisions when multiple picker instances are on the same page\r\n\r\n---\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## Authorship\r\n\r\n| Field | Details |\r\n|-------|---------|\r\n| **Author** | Dileesha Ekanayake |\r\n| **Email** | dileesha.r.ekanayake@gmail.com |\r\n| **Year** | 2026 |\r\n| **Version** | 1.0.0 |\r\n| **License** | MIT |","readmeFilename":"README.md","_rev":"1-776dfb7ca628134d96cfad6f55de7f68"}