@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-tag-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-tag-input.mjs","names":[],"sources":["../../../projects/ui/tag-input/src/core/tags.ts","../../../projects/ui/tag-input/src/tag-input.ts"],"sourcesContent":["/** Canonical display/editing identity without discarding accents or internal whitespace. */\nexport function vdTagKey(tag: string): string {\n  return tag.trim().normalize('NFC').toLowerCase();\n}\n\nexport function vdNormalizeTags(value: readonly string[] | null | undefined): string[] {\n  const seen = new Set<string>();\n  return (value ?? [])\n    .filter((tag) => {\n      if (typeof tag !== 'string') return false;\n      const key = vdTagKey(tag);\n      if (!key || seen.has(key)) return false;\n      seen.add(key);\n      return true;\n    })\n    .map((tag) => tag.trim().normalize('NFC'));\n}\n\nexport function vdAddTag(\n  value: readonly string[],\n  draft: string,\n):\n  | { kind: 'empty'; tag: string }\n  | { kind: 'duplicate'; tag: string }\n  | { kind: 'added'; tag: string; value: string[] } {\n  const tag = draft.trim().normalize('NFC');\n  if (!tag) return { kind: 'empty', tag };\n  const tags = vdNormalizeTags(value);\n  if (tags.some((item) => vdTagKey(item) === vdTagKey(tag))) return { kind: 'duplicate', tag };\n  return { kind: 'added', tag, value: [...tags, tag] };\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  Injector,\n  OnInit,\n  Signal,\n  ViewEncapsulation,\n  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n  viewChildren,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { FormField, FormValueControl } from '@angular/forms/signals';\nimport {\n  VD_FIELD,\n  VdFieldControl,\n  VdNgControlState,\n  vdNgControlState,\n  vdUniqueId,\n} from '@vadem/ui/field';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { vdAddTag, vdNormalizeTags, vdTagKey } from './core/tags';\nimport { vdTexts } from '@vadem/ui/locale';\n\nexport type VdTagInputSize = 'sm' | 'md' | 'lg';\n\n/** User-defined tags with explicit editing actions. Spec: specs/tag-input.md. */\n@Component({\n  selector: 'vd-tag-input',\n  imports: [VdIcon],\n  template: `\n    <div class=\"vd-input-group vd-tag-input__field\" (pointerdown)=\"onFieldPointerDown($event)\">\n      @if (tags().length) {\n        <ul class=\"vd-tag-input__tags\" role=\"list\" [attr.aria-label]=\"t().tagsLabel\">\n          @for (tag of tags(); track tagKey(tag)) {\n            <li class=\"vd-tag-input__tag\">\n              <span class=\"vd-tag-input__label\">{{ tag }}</span>\n              <button\n                #removeButton\n                class=\"vd-tag-input__remove\"\n                type=\"button\"\n                [disabled]=\"locked()\"\n                [attr.aria-label]=\"t().removeLabel(tag)\"\n                (click)=\"remove(tag)\"\n                (keydown.escape)=\"returnToInput($event)\"\n              >\n                <vd-icon name=\"x\" />\n              </button>\n            </li>\n          }\n        </ul>\n      }\n      <input\n        #draftInput\n        type=\"text\"\n        class=\"vd-input vd-tag-input__input\"\n        autocomplete=\"off\"\n        [id]=\"controlId\"\n        [attr.data-size]=\"size()\"\n        [value]=\"draft()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.data-invalid]=\"showInvalid() ? '' : null\"\n        [attr.aria-invalid]=\"showInvalid() || null\"\n        [attr.aria-required]=\"isRequired() || null\"\n        [attr.aria-describedby]=\"descriptionIds()\"\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (compositionstart)=\"composing = true\"\n        (compositionend)=\"composing = false\"\n      />\n      <button\n        class=\"vd-button vd-tag-input__add\"\n        type=\"button\"\n        data-variant=\"ghost\"\n        [attr.data-size]=\"size()\"\n        [disabled]=\"locked() || !draft().trim()\"\n        (click)=\"add()\"\n      >\n        {{ t().addLabel }}\n      </button>\n    </div>\n    <p\n      class=\"vd-tag-input__feedback\"\n      [id]=\"feedbackId\"\n      role=\"status\"\n      aria-atomic=\"true\"\n      [textContent]=\"feedback()\"\n    ></p>\n  `,\n  host: {\n    class: 'vd-tag-input',\n    '[attr.data-size]': 'size()',\n    '[attr.data-invalid]': 'showInvalid() ? \"\" : null',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.data-readonly]': 'readonly() ? \"\" : null',\n    '[attr.aria-label]': 'null',\n    '[attr.aria-labelledby]': 'null',\n    '(focusout)': 'onFocusOut($event)',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdTagInput implements FormValueControl<string[]>, OnInit {\n  readonly value = model<string[]>([]);\n  readonly size = input<VdTagInputSize>('md');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly placeholder = input('');\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n  readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n  readonly addLabel = input<string>();\n  readonly tagsLabel = input<string>();\n  readonly removeLabel = input<(tag: string) => string>();\n  readonly addedMessage = input<(tag: string) => string>();\n  readonly removedMessage = input<(tag: string) => string>();\n  readonly duplicateMessage = input<(tag: string) => string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('tagInput', {\n    addLabel: this.addLabel,\n    tagsLabel: this.tagsLabel,\n    removeLabel: this.removeLabel,\n    addedMessage: this.addedMessage,\n    removedMessage: this.removedMessage,\n    duplicateMessage: this.duplicateMessage,\n  });\n  readonly touch = output<void>();\n\n  readonly controlId = vdUniqueId('vd-tags');\n  protected readonly feedbackId = vdUniqueId('vd-tags-feedback');\n  protected readonly tagKey = vdTagKey;\n  protected readonly tags = computed(() => vdNormalizeTags(this.value()));\n  protected readonly draft = signal('');\n  protected readonly feedback = signal('');\n  protected composing = false;\n  private readonly pendingFeedback = signal<string | null>(null);\n  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('draftInput');\n  private readonly removeButtons = viewChildren<ElementRef<HTMLButtonElement>>('removeButton');\n  private readonly hostEl: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly field = inject(VD_FIELD, { optional: true });\n  private readonly injector = inject(Injector);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly formBound = signal(false);\n  private readonly ngSource = signal<Signal<VdNgControlState> | null>(null);\n  private readonly ngState = computed(\n    () =>\n      this.ngSource()?.() ?? { invalid: false, touched: false, disabled: false, required: false },\n  );\n  protected readonly isDisabled = computed(() => this.disabled() || this.ngState().disabled);\n  protected readonly locked = computed(() => this.isDisabled() || this.readonly());\n  protected readonly showInvalid = computed(\n    () =>\n      (this.invalid() && (!this.formBound() || this.touched())) ||\n      (this.ngState().invalid && this.ngState().touched),\n  );\n  protected readonly isRequired = computed(() => this.required() || this.ngState().required);\n  protected readonly descriptionIds = computed(\n    () =>\n      [this.field?.describedBy(), this.feedback() ? this.feedbackId : null]\n        .filter(Boolean)\n        .join(' ') || null,\n  );\n  private lastValue: string[] | null = null;\n\n  constructor() {\n    const control: VdFieldControl = {\n      id: signal(this.controlId),\n      invalid: this.showInvalid,\n      required: this.isRequired,\n      disabled: this.isDisabled,\n    };\n    this.field?.register(control);\n    this.destroyRef.onDestroy(() => this.field?.unregister(control));\n    // All form APIs bind the model directly. External replacements clear pending editing.\n    afterRenderEffect(() => {\n      const value = this.value();\n      if (value !== this.lastValue) {\n        this.lastValue = value;\n        untracked(() => this.reset());\n      }\n    });\n    // An empty render separates repeated identical status messages; no timers or SSR DOM access.\n    afterRenderEffect(() => {\n      const message = this.pendingFeedback();\n      if (message !== null) {\n        this.pendingFeedback.set(null);\n        this.feedback.set(message);\n      }\n    });\n  }\n\n  ngOnInit(): void {\n    const ng = this.injector.get(NgControl, null, { self: true, optional: true });\n    this.formBound.set(\n      !!ng || !!this.injector.get(FormField, null, { self: true, optional: true }),\n    );\n    this.ngSource.set(vdNgControlState(ng, this.destroyRef));\n  }\n\n  focus(options?: FocusOptions): void {\n    this.inputRef()?.nativeElement.focus(options);\n  }\n  reset(): void {\n    this.draft.set('');\n    // Reset the native draft even if input and reset happened before a binding render.\n    const input = this.inputRef()?.nativeElement;\n    if (input) input.value = '';\n    this.feedback.set('');\n    this.pendingFeedback.set(null);\n    this.composing = false;\n  }\n  protected onInput(event: Event): void {\n    this.draft.set((event.target as HTMLInputElement).value);\n    this.feedback.set('');\n    this.pendingFeedback.set(null);\n  }\n  protected add(): void {\n    if (this.locked() || this.composing) return;\n    const result = vdAddTag(this.tags(), this.draft());\n    if (result.kind === 'empty') return;\n    if (result.kind === 'duplicate') this.announce(this.t().duplicateMessage(result.tag));\n    else {\n      this.commit(result.value);\n      this.draft.set('');\n      this.announce(this.t().addedMessage(result.tag));\n    }\n    this.focus();\n  }\n  protected remove(tag: string): void {\n    if (this.locked() || !this.tags().includes(tag)) return;\n    this.commit(this.tags().filter((item) => item !== tag));\n    this.focus();\n    this.announce(this.t().removedMessage(tag));\n  }\n  protected returnToInput(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.focus();\n  }\n  protected onKeydown(event: KeyboardEvent): void {\n    if (\n      event.isComposing ||\n      this.composing ||\n      this.locked() ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey\n    )\n      return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.add();\n    } else if (event.key === 'Backspace' && this.draft() === '') {\n      const last = this.removeButtons().at(-1);\n      if (last) {\n        event.preventDefault();\n        last.nativeElement.focus();\n      }\n    }\n  }\n  protected onFocusOut(event: FocusEvent): void {\n    if (event.relatedTarget && this.hostEl.contains(event.relatedTarget as Node)) return;\n    this.touch.emit();\n  }\n  protected onFieldPointerDown(event: PointerEvent): void {\n    if (!this.isDisabled() && event.target === event.currentTarget) {\n      event.preventDefault();\n      this.focus();\n    }\n  }\n  private commit(value: string[]): void {\n    this.lastValue = value;\n    this.value.set(value);\n  }\n  private announce(message: string): void {\n    this.feedback.set('');\n    this.pendingFeedback.set(message);\n  }\n}\n"],"mappings":"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"}

package/fesm2022/vadem-ui-text-highlight.mjs

@@ -0,0 +1,126 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+function vdTextHighlightParts(text, query) {
+	if (!text) return [];
+	if (!query) return [{
+		text,
+		matched: false
+	}];
+	const pattern = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "giu");
+	const parts = [];
+	let cursor = 0;
+	for (const match of text.matchAll(pattern)) {
+		if (match.index > cursor) parts.push({
+			text: text.slice(cursor, match.index),
+			matched: false
+		});
+		parts.push({
+			text: match[0],
+			matched: true
+		});
+		cursor = match.index + match[0].length;
+	}
+	if (cursor < text.length) parts.push({
+		text: text.slice(cursor),
+		matched: false
+	});
+	return parts;
+}
+var VdTextHighlight = class VdTextHighlight {
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	query = input("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	parts = computed(() => vdTextHighlightParts(this.text(), this.query()), ...ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []);
+	matched = computed(() => this.parts().some((part) => part.matched), ...ngDevMode ? [{ debugName: "matched" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTextHighlight,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdTextHighlight,
+		isStandalone: true,
+		selector: "vd-text-highlight",
+		inputs: {
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			query: {
+				classPropertyName: "query",
+				publicName: "query",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-state": "!text() ? \"empty\" : matched() ? \"matched\" : \"plain\"" },
+			classAttribute: "vd-text-highlight"
+		},
+		ngImport: i0,
+		template: `@for (part of parts(); track $index) {
+    @if (part.matched) {
+      <mark class="vd-text-highlight__match">{{ part.text }}</mark>
+    } @else {
+      <ng-container>{{ part.text }}</ng-container>
+    }
+  }`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTextHighlight,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-text-highlight",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "vd-text-highlight",
+				"[attr.data-state]": "!text() ? \"empty\" : matched() ? \"matched\" : \"plain\""
+			},
+			template: `@for (part of parts(); track $index) {
+    @if (part.matched) {
+      <mark class="vd-text-highlight__match">{{ part.text }}</mark>
+    } @else {
+      <ng-container>{{ part.text }}</ng-container>
+    }
+  }`
+		}]
+	}],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}],
+		query: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "query",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdTextHighlight };
+
+//# sourceMappingURL=vadem-ui-text-highlight.mjs.map

package/fesm2022/vadem-ui-text-highlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-text-highlight.mjs","names":[],"sources":["../../../projects/ui/text-highlight/src/core/text-highlight.ts","../../../projects/ui/text-highlight/src/text-highlight.ts"],"sourcesContent":["export interface VdTextHighlightPart {\n  readonly text: string;\n  readonly matched: boolean;\n}\n\n/** Unicode simple case folding keeps match indices tied to the original source. */\nexport function vdTextHighlightParts(text: string, query: string): readonly VdTextHighlightPart[] {\n  if (!text) return [];\n  if (!query) return [{ text, matched: false }];\n  const pattern = new RegExp(query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'giu');\n  const parts: VdTextHighlightPart[] = [];\n  let cursor = 0;\n  for (const match of text.matchAll(pattern)) {\n    if (match.index > cursor) parts.push({ text: text.slice(cursor, match.index), matched: false });\n    parts.push({ text: match[0], matched: true });\n    cursor = match.index + match[0].length;\n  }\n  if (cursor < text.length) parts.push({ text: text.slice(cursor), matched: false });\n  return parts;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { vdTextHighlightParts } from './core/text-highlight';\n\n/** Preserves plain text while marking every literal, case-insensitive query match. */\n@Component({\n  selector: 'vd-text-highlight',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'vd-text-highlight',\n    '[attr.data-state]': '!text() ? \"empty\" : matched() ? \"matched\" : \"plain\"',\n  },\n  template: `@for (part of parts(); track $index) {\n    @if (part.matched) {\n      <mark class=\"vd-text-highlight__match\">{{ part.text }}</mark>\n    } @else {\n      <ng-container>{{ part.text }}</ng-container>\n    }\n  }`,\n})\nexport class VdTextHighlight {\n  readonly text = input.required<string>();\n  readonly query = input('');\n  protected readonly parts = computed(() => vdTextHighlightParts(this.text(), this.query()));\n  protected readonly matched = computed(() => this.parts().some((part) => part.matched));\n}\n"],"mappings":";;AAMA,SAAgB,qBAAqB,MAAc,OAAa;CAC9D,IAAI,CAAC,MAAM,OAAO,CAAA;CAClB,IAAI,CAAC,OAAO,OAAO,CAAC;EAAE;EAAM,SAAS;CAAK,CAAE;CAC5C,MAAM,UAAU,IAAI,OAAO,MAAM,QAAQ,uBAAuB,MAAM,GAAG,KAAK;CAC9E,MAAM,QAA+B,CAAA;CACrC,IAAI,SAAS;CACb,KAAK,MAAM,SAAS,KAAK,SAAS,OAAO,GAAG;EAC1C,IAAI,MAAM,QAAQ,QAAQ,MAAM,KAAK;GAAE,MAAM,KAAK,MAAM,QAAQ,MAAM,KAAK;GAAG,SAAS;EAAK,CAAE;EAC9F,MAAM,KAAK;GAAE,MAAM,MAAM;GAAI,SAAS;EAAI,CAAE;EAC5C,SAAS,MAAM,QAAQ,MAAM,EAAE,CAAC;CAClC;CACA,IAAI,SAAS,KAAK,QAAQ,MAAM,KAAK;EAAE,MAAM,KAAK,MAAM,MAAM;EAAG,SAAS;CAAK,CAAE;CACjF,OAAO;AACT;ACOA,IAAa,kBAAb,MAAa,gBAAe;CACjB,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACP,QAAQ,eAAe,qBAAqB,KAAK,KAAI,GAAI,KAAK,MAAK,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvE,UAAU,eAAe,KAAK,MAAK,CAAE,CAAC,MAAM,SAAS,KAAK,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAJ3E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,mBAAA,4DAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UARhB;;;;;;;EAMR,UAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAES,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAhB3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,eAAe,kBAAkB;GACjC,MAAM;IACJ,OAAO;IACP,qBAAqB;GACtB;GACD,UAAU;;;;;;;EAOX,CAAA"}

package/fesm2022/vadem-ui-time-input.mjs

@@ -0,0 +1,430 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, ViewContainerRef, ViewEncapsulation, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { VdInput } from "@vadem/ui/input";
+import { VdIcon } from "@vadem/ui/icon";
+import { VdPopover } from "@vadem/ui/popover";
+import { vdTexts } from "@vadem/ui/locale";
+function timeOptions(min, max, step, initial) {
+	const seconds = (value) => {
+		if (!/^\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?$/.test(value)) return void 0;
+		const [h, m, s = 0] = value.split(":").map(Number);
+		return h < 24 && m < 60 && s < 60 ? h * 3600 + m * 60 + s : void 0;
+	};
+	const low = seconds(min), high = seconds(max), base = low ?? seconds(initial) ?? 0;
+	const increment = step === "any" ? 0 : Number(step) > 0 ? Number(step) : 60;
+	const result = [];
+	for (let minute = 0; minute < 1440; minute++) {
+		const value = minute * 60;
+		const inRange = low !== void 0 && high !== void 0 && low > high ? value >= low || value <= high : (low === void 0 || value >= low) && (high === void 0 || value <= high);
+		const quotient = increment ? (value - base) / increment : 0;
+		if (inRange && Math.abs(quotient - Math.round(quotient)) < 1e-7) result.push(`${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`);
+	}
+	return result;
+}
+var VdTimePicker = class VdTimePicker {
+	label = signal("Choose time", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	emptyLabel = signal("No available times", ...ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []);
+	options = signal([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	selected = signal("", ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	hoursLabel = signal("Hours", ...ngDevMode ? [{ debugName: "hoursLabel" }] : /* istanbul ignore next */ []);
+	minutesLabel = signal("Minutes", ...ngDevMode ? [{ debugName: "minutesLabel" }] : /* istanbul ignore next */ []);
+	hour = signal("", ...ngDevMode ? [{ debugName: "hour" }] : /* istanbul ignore next */ []);
+	minute = signal("", ...ngDevMode ? [{ debugName: "minute" }] : /* istanbul ignore next */ []);
+	activeHour = signal(0, ...ngDevMode ? [{ debugName: "activeHour" }] : /* istanbul ignore next */ []);
+	activeMinute = signal(0, ...ngDevMode ? [{ debugName: "activeMinute" }] : /* istanbul ignore next */ []);
+	hours = computed(() => [...new Set(this.options().map((time) => time.slice(0, 2)))], ...ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []);
+	minutes = computed(() => this.options().filter((time) => time.startsWith(this.hour() + ":")).map((time) => time.slice(3)), ...ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []);
+	changeDetector = inject(ChangeDetectorRef);
+	host = inject(ElementRef).nativeElement;
+	target;
+	onState;
+	get panel() {
+		return this.host.querySelector(".vd-time-picker");
+	}
+	open(target, label, emptyLabel, hoursLabel, minutesLabel) {
+		this.target = target;
+		this.label.set(label);
+		this.hoursLabel.set(hoursLabel);
+		this.minutesLabel.set(minutesLabel);
+		this.emptyLabel.set(emptyLabel);
+		this.options.set(timeOptions(target.min, target.max, target.step, target.getAttribute("value") ?? ""));
+		this.selected.set(target.value);
+		const initial = this.options().includes(target.value) ? target.value : this.options()[0] ?? "";
+		this.hour.set(initial.slice(0, 2));
+		this.minute.set(initial.slice(3));
+		this.activeHour.set(Math.max(0, this.hours().indexOf(this.hour())));
+		this.activeMinute.set(Math.max(0, this.minutes().indexOf(this.minute())));
+	}
+	show() {
+		if (!this.target || this.panel.matches(":popover-open")) return;
+		this.panel.showPopover({ source: this.target });
+		this.focusActive("hours");
+	}
+	toggled(event) {
+		this.onState?.(event.newState === "open");
+	}
+	leave(event) {
+		const next = event.relatedTarget;
+		if (next && next !== this.target && !this.panel.contains(next) && this.panel.matches(":popover-open")) this.panel.hidePopover();
+	}
+	choose(time) {
+		const target = this.target;
+		if (!target || target.disabled || target.readOnly || !timeOptions(target.min, target.max, target.step, target.getAttribute("value") ?? "").includes(time)) return;
+		target.value = time;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		target.dispatchEvent(new Event("change", { bubbles: true }));
+		this.panel.hidePopover();
+		target.focus();
+	}
+	parts(column) {
+		return column === "hours" ? this.hours() : this.minutes();
+	}
+	activeIndex(column) {
+		return column === "hours" ? this.activeHour() : this.activeMinute();
+	}
+	setActive(column, index) {
+		(column === "hours" ? this.activeHour : this.activeMinute).set(index);
+	}
+	pick(part, column) {
+		if (column === "minutes") {
+			this.choose(`${this.hour()}:${part}`);
+			return;
+		}
+		this.hour.set(part);
+		if (!this.minutes().includes(this.minute())) this.minute.set(this.minutes()[0] ?? "");
+		this.activeMinute.set(Math.max(0, this.minutes().indexOf(this.minute())));
+		this.changeDetector.detectChanges();
+		this.focusActive("minutes");
+	}
+	navigate(event, column) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.pick(this.parts(column)[this.activeIndex(column)], column);
+			return;
+		}
+		const size = this.parts(column).length;
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = Math.min(size - 1, this.activeIndex(column) + 1);
+				break;
+			case "ArrowUp":
+				next = Math.max(0, this.activeIndex(column) - 1);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = size - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		this.setActive(column, next);
+		this.focusActive(column);
+	}
+	focusActive(column) {
+		const option = this.panel.querySelectorAll(`[data-column=${column}] [role=option]`)[this.activeIndex(column)];
+		if (option) {
+			option.focus({ preventScroll: true });
+			option.scrollIntoView({
+				block: "nearest",
+				behavior: "instant"
+			});
+		} else this.panel.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdTimePicker,
+		isStandalone: true,
+		selector: "vd-time-picker",
+		ngImport: i0,
+		template: `
+    <div
+      vdPopover
+      class="vd-time-picker"
+      [attr.aria-label]="label()"
+      (toggle)="toggled($event)"
+      (focusout)="leave($event)"
+    >
+      <div class="vd-time-picker__heading">{{ label() }}</div>
+      @if (options().length) {
+        <div class="vd-time-picker__columns">
+          @for (column of ['hours', 'minutes']; track column) {
+            <div class="vd-time-picker__column">
+              <div class="vd-time-picker__column-label">
+                {{ column === 'hours' ? hoursLabel() : minutesLabel() }}
+              </div>
+              <div
+                class="vd-time-picker__list"
+                role="listbox"
+                [attr.data-column]="column"
+                [attr.aria-label]="column === 'hours' ? hoursLabel() : minutesLabel()"
+              >
+                @for (part of parts(column); track part; let i = $index) {
+                  <div
+                    class="vd-time-picker__option"
+                    role="option"
+                    [attr.aria-selected]="part === (column === 'hours' ? hour() : minute())"
+                    [attr.tabindex]="i === activeIndex(column) ? 0 : -1"
+                    (keydown)="navigate($event, column)"
+                    (focus)="setActive(column, i)"
+                    (click)="pick(part, column)"
+                  >
+                    <span>{{ part }}</span
+                    ><vd-icon class="vd-time-picker__mark" name="check" />
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      } @else {
+        <p class="vd-time-picker__empty" role="status">{{ emptyLabel() }}</p>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: VdPopover,
+			selector: "[vdPopover]",
+			inputs: ["placement"],
+			exportAs: ["vdPopover"]
+		}, {
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-time-picker",
+			imports: [VdPopover, VdIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			template: `
+    <div
+      vdPopover
+      class="vd-time-picker"
+      [attr.aria-label]="label()"
+      (toggle)="toggled($event)"
+      (focusout)="leave($event)"
+    >
+      <div class="vd-time-picker__heading">{{ label() }}</div>
+      @if (options().length) {
+        <div class="vd-time-picker__columns">
+          @for (column of ['hours', 'minutes']; track column) {
+            <div class="vd-time-picker__column">
+              <div class="vd-time-picker__column-label">
+                {{ column === 'hours' ? hoursLabel() : minutesLabel() }}
+              </div>
+              <div
+                class="vd-time-picker__list"
+                role="listbox"
+                [attr.data-column]="column"
+                [attr.aria-label]="column === 'hours' ? hoursLabel() : minutesLabel()"
+              >
+                @for (part of parts(column); track part; let i = $index) {
+                  <div
+                    class="vd-time-picker__option"
+                    role="option"
+                    [attr.aria-selected]="part === (column === 'hours' ? hour() : minute())"
+                    [attr.tabindex]="i === activeIndex(column) ? 0 : -1"
+                    (keydown)="navigate($event, column)"
+                    (focus)="setActive(column, i)"
+                    (click)="pick(part, column)"
+                  >
+                    <span>{{ part }}</span
+                    ><vd-icon class="vd-time-picker__mark" name="check" />
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      } @else {
+        <p class="vd-time-picker__empty" role="status">{{ emptyLabel() }}</p>
+      }
+    </div>
+  `
+		}]
+	}]
+});
+var VdTimeInput = class VdTimeInput extends VdInput {
+	pickerLabel = input(...ngDevMode ? [void 0, { debugName: "pickerLabel" }] : /* istanbul ignore next */ []);
+	hoursLabel = input(...ngDevMode ? [void 0, { debugName: "hoursLabel" }] : /* istanbul ignore next */ []);
+	minutesLabel = input(...ngDevMode ? [void 0, { debugName: "minutesLabel" }] : /* istanbul ignore next */ []);
+	emptyLabel = input(...ngDevMode ? [void 0, { debugName: "emptyLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("timeInput", {
+		pickerLabel: this.pickerLabel,
+		hoursLabel: this.hoursLabel,
+		minutesLabel: this.minutesLabel,
+		emptyLabel: this.emptyLabel
+	});
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	panelId = signal(null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	element = inject(ElementRef).nativeElement;
+	container = inject(ViewContainerRef);
+	picker;
+	constructor() {
+		super();
+		afterNextRender(() => {
+			this.picker = this.container.createComponent(VdTimePicker);
+			this.picker.changeDetectorRef.detectChanges();
+			const panel = this.picker.instance.panel;
+			const anchor = `--${panel.id}`;
+			this.element.style.setProperty("anchor-name", anchor);
+			panel.style.setProperty("position-anchor", anchor);
+			panel.setAttribute("tabindex", "-1");
+			this.panelId.set(panel.id);
+			this.picker.instance.onState = (open) => this.open.set(open);
+		});
+	}
+	showPicker(event) {
+		if (this.element.disabled || this.element.readOnly || !this.picker) return;
+		event.preventDefault();
+		this.picker.instance.open(this.element, this.t().pickerLabel, this.t().emptyLabel, this.t().hoursLabel, this.t().minutesLabel);
+		this.picker.changeDetectorRef.detectChanges();
+		this.picker.instance.show();
+	}
+	onKeydown(event) {
+		if (event.altKey && event.key === "ArrowDown") this.showPicker(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimeInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdTimeInput,
+		isStandalone: true,
+		selector: "input[type=time][vdTimeInput]",
+		inputs: {
+			pickerLabel: {
+				classPropertyName: "pickerLabel",
+				publicName: "pickerLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hoursLabel: {
+				classPropertyName: "hoursLabel",
+				publicName: "hoursLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minutesLabel: {
+				classPropertyName: "minutesLabel",
+				publicName: "minutesLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyLabel: {
+				classPropertyName: "emptyLabel",
+				publicName: "emptyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-haspopup": "dialog" },
+			listeners: {
+				"click": "showPicker($event)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.data-state": "open() ? \"open\" : \"closed\"",
+				"attr.aria-controls": "panelId()"
+			},
+			classAttribute: "vd-time-input"
+		},
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimeInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[type=time][vdTimeInput]",
+			host: {
+				class: "vd-time-input",
+				"aria-haspopup": "dialog",
+				"[attr.data-state]": "open() ? \"open\" : \"closed\"",
+				"[attr.aria-controls]": "panelId()",
+				"(click)": "showPicker($event)",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		pickerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pickerLabel",
+				required: false
+			}]
+		}],
+		hoursLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hoursLabel",
+				required: false
+			}]
+		}],
+		minutesLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minutesLabel",
+				required: false
+			}]
+		}],
+		emptyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdTimeInput };
+
+//# sourceMappingURL=vadem-ui-time-input.mjs.map

package/fesm2022/vadem-ui-time-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-time-input.mjs","names":[],"sources":["../../../projects/ui/time-input/src/core/time-options.ts","../../../projects/ui/time-input/src/time-picker.ts","../../../projects/ui/time-input/src/time-input.ts"],"sourcesContent":["/** Minute-resolution choices matching the native time input's periodic range and step base. */\nexport function timeOptions(min: string, max: string, step: string, initial: string): string[] {\n  const seconds = (value: string): number | undefined => {\n    if (!/^\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d{1,3})?)?$/.test(value)) return undefined;\n    const [h, m, s = 0] = value.split(':').map(Number);\n    return h < 24 && m < 60 && s < 60 ? h * 3600 + m * 60 + s : undefined;\n  };\n  const low = seconds(min),\n    high = seconds(max),\n    base = low ?? seconds(initial) ?? 0;\n  const increment = step === 'any' ? 0 : Number(step) > 0 ? Number(step) : 60;\n  const result: string[] = [];\n  for (let minute = 0; minute < 1440; minute++) {\n    const value = minute * 60;\n    const inRange =\n      low !== undefined && high !== undefined && low > high\n        ? value >= low || value <= high\n        : (low === undefined || value >= low) && (high === undefined || value <= high);\n    const quotient = increment ? (value - base) / increment : 0;\n    if (inRange && Math.abs(quotient - Math.round(quotient)) < 1e-7)\n      result.push(\n        `${String(Math.floor(minute / 60)).padStart(2, '0')}:${String(minute % 60).padStart(2, '0')}`,\n      );\n  }\n  return result;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  inject,\n  computed,\n  ChangeDetectorRef,\n  signal,\n} from '@angular/core';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { VdPopover } from '@vadem/ui/popover';\nimport { timeOptions } from './core/time-options';\n\n/** Internal view; the input remains the sole form control and value owner. */\n@Component({\n  selector: 'vd-time-picker',\n  imports: [VdPopover, VdIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div\n      vdPopover\n      class=\"vd-time-picker\"\n      [attr.aria-label]=\"label()\"\n      (toggle)=\"toggled($event)\"\n      (focusout)=\"leave($event)\"\n    >\n      <div class=\"vd-time-picker__heading\">{{ label() }}</div>\n      @if (options().length) {\n        <div class=\"vd-time-picker__columns\">\n          @for (column of ['hours', 'minutes']; track column) {\n            <div class=\"vd-time-picker__column\">\n              <div class=\"vd-time-picker__column-label\">\n                {{ column === 'hours' ? hoursLabel() : minutesLabel() }}\n              </div>\n              <div\n                class=\"vd-time-picker__list\"\n                role=\"listbox\"\n                [attr.data-column]=\"column\"\n                [attr.aria-label]=\"column === 'hours' ? hoursLabel() : minutesLabel()\"\n              >\n                @for (part of parts(column); track part; let i = $index) {\n                  <div\n                    class=\"vd-time-picker__option\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"part === (column === 'hours' ? hour() : minute())\"\n                    [attr.tabindex]=\"i === activeIndex(column) ? 0 : -1\"\n                    (keydown)=\"navigate($event, column)\"\n                    (focus)=\"setActive(column, i)\"\n                    (click)=\"pick(part, column)\"\n                  >\n                    <span>{{ part }}</span\n                    ><vd-icon class=\"vd-time-picker__mark\" name=\"check\" />\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <p class=\"vd-time-picker__empty\" role=\"status\">{{ emptyLabel() }}</p>\n      }\n    </div>\n  `,\n})\nexport class VdTimePicker {\n  readonly label = signal('Choose time');\n  readonly emptyLabel = signal('No available times');\n  readonly options = signal<string[]>([]);\n  readonly selected = signal('');\n  readonly hoursLabel = signal('Hours');\n  readonly minutesLabel = signal('Minutes');\n  readonly hour = signal('');\n  readonly minute = signal('');\n  readonly activeHour = signal(0);\n  readonly activeMinute = signal(0);\n  readonly hours = computed(() => [...new Set(this.options().map((time) => time.slice(0, 2)))]);\n  readonly minutes = computed(() =>\n    this.options()\n      .filter((time) => time.startsWith(this.hour() + ':'))\n      .map((time) => time.slice(3)),\n  );\n  private readonly changeDetector = inject(ChangeDetectorRef);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private target?: HTMLInputElement;\n  onState?: (open: boolean) => void;\n  get panel(): HTMLElement {\n    return this.host.querySelector('.vd-time-picker')!;\n  }\n\n  open(\n    target: HTMLInputElement,\n    label: string,\n    emptyLabel: string,\n    hoursLabel: string,\n    minutesLabel: string,\n  ): void {\n    this.target = target;\n    this.label.set(label);\n    this.hoursLabel.set(hoursLabel);\n    this.minutesLabel.set(minutesLabel);\n    this.emptyLabel.set(emptyLabel);\n    this.options.set(\n      timeOptions(target.min, target.max, target.step, target.getAttribute('value') ?? ''),\n    );\n    this.selected.set(target.value);\n    const initial = this.options().includes(target.value)\n      ? target.value\n      : (this.options()[0] ?? '');\n    this.hour.set(initial.slice(0, 2));\n    this.minute.set(initial.slice(3));\n    this.activeHour.set(Math.max(0, this.hours().indexOf(this.hour())));\n    this.activeMinute.set(Math.max(0, this.minutes().indexOf(this.minute())));\n  }\n  show(): void {\n    if (!this.target || this.panel.matches(':popover-open')) return;\n    this.panel.showPopover({ source: this.target } as ShowPopoverOptions);\n    this.focusActive('hours');\n  }\n  toggled(event: Event): void {\n    this.onState?.((event as ToggleEvent).newState === 'open');\n  }\n  leave(event: FocusEvent): void {\n    const next = event.relatedTarget as Node | null;\n    if (\n      next &&\n      next !== this.target &&\n      !this.panel.contains(next) &&\n      this.panel.matches(':popover-open')\n    )\n      this.panel.hidePopover();\n  }\n  choose(time: string): void {\n    const target = this.target;\n    // Recheck live properties and constraints in case the form changed while open.\n    if (\n      !target ||\n      target.disabled ||\n      target.readOnly ||\n      !timeOptions(\n        target.min,\n        target.max,\n        target.step,\n        target.getAttribute('value') ?? '',\n      ).includes(time)\n    )\n      return;\n    target.value = time;\n    target.dispatchEvent(new Event('input', { bubbles: true }));\n    target.dispatchEvent(new Event('change', { bubbles: true }));\n    this.panel.hidePopover();\n    target.focus();\n  }\n  parts(column: string): string[] {\n    return column === 'hours' ? this.hours() : this.minutes();\n  }\n  activeIndex(column: string): number {\n    return column === 'hours' ? this.activeHour() : this.activeMinute();\n  }\n  setActive(column: string, index: number): void {\n    (column === 'hours' ? this.activeHour : this.activeMinute).set(index);\n  }\n  pick(part: string, column: string): void {\n    if (column === 'minutes') {\n      this.choose(`${this.hour()}:${part}`);\n      return;\n    }\n    this.hour.set(part);\n    if (!this.minutes().includes(this.minute())) this.minute.set(this.minutes()[0] ?? '');\n    this.activeMinute.set(Math.max(0, this.minutes().indexOf(this.minute())));\n    this.changeDetector.detectChanges();\n    this.focusActive('minutes');\n  }\n  navigate(event: KeyboardEvent, column: string): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.pick(this.parts(column)[this.activeIndex(column)], column);\n      return;\n    }\n    const size = this.parts(column).length;\n    let next: number;\n    switch (event.key) {\n      case 'ArrowDown':\n        next = Math.min(size - 1, this.activeIndex(column) + 1);\n        break;\n      case 'ArrowUp':\n        next = Math.max(0, this.activeIndex(column) - 1);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = size - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.setActive(column, next);\n    this.focusActive(column);\n  }\n  private focusActive(column: string): void {\n    const option = this.panel.querySelectorAll<HTMLElement>(\n      `[data-column=${column}] [role=option]`,\n    )[this.activeIndex(column)];\n    if (option) {\n      option.focus({ preventScroll: true });\n      option.scrollIntoView({ block: 'nearest', behavior: 'instant' });\n    } else this.panel.focus();\n  }\n}\n","import {\n  ComponentRef,\n  Directive,\n  ElementRef,\n  ViewContainerRef,\n  afterNextRender,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { VdInput } from '@vadem/ui/input';\nimport { VdTimePicker } from './time-picker';\nimport { vdTexts } from '@vadem/ui/locale';\n\n/** Native editor and accessors with a themed, minute-resolution selection popover. */\n@Directive({\n  selector: 'input[type=time][vdTimeInput]',\n  host: {\n    class: 'vd-time-input',\n    'aria-haspopup': 'dialog',\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n    '[attr.aria-controls]': 'panelId()',\n    '(click)': 'showPicker($event)',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class VdTimeInput extends VdInput {\n  readonly pickerLabel = input<string>();\n  readonly hoursLabel = input<string>();\n  readonly minutesLabel = input<string>();\n  readonly emptyLabel = input<string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('timeInput', {\n    pickerLabel: this.pickerLabel,\n    hoursLabel: this.hoursLabel,\n    minutesLabel: this.minutesLabel,\n    emptyLabel: this.emptyLabel,\n  });\n  protected readonly open = signal(false);\n  protected readonly panelId = signal<string | null>(null);\n  private readonly element = inject<ElementRef<HTMLInputElement>>(ElementRef).nativeElement;\n  private readonly container = inject(ViewContainerRef);\n  private picker?: ComponentRef<VdTimePicker>;\n\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.picker = this.container.createComponent(VdTimePicker);\n      this.picker.changeDetectorRef.detectChanges();\n      const panel = this.picker.instance.panel;\n      const anchor = `--${panel.id}`;\n      this.element.style.setProperty('anchor-name', anchor);\n      panel.style.setProperty('position-anchor', anchor);\n      panel.setAttribute('tabindex', '-1');\n      this.panelId.set(panel.id);\n      this.picker.instance.onState = (open) => this.open.set(open);\n    });\n  }\n  protected showPicker(event: Event): void {\n    if (this.element.disabled || this.element.readOnly || !this.picker) return;\n    event.preventDefault();\n    this.picker.instance.open(\n      this.element,\n      this.t().pickerLabel,\n      this.t().emptyLabel,\n      this.t().hoursLabel,\n      this.t().minutesLabel,\n    );\n    this.picker.changeDetectorRef.detectChanges();\n    this.picker.instance.show();\n  }\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.altKey && event.key === 'ArrowDown') this.showPicker(event);\n  }\n}\n"],"mappings":"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"}