@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-time-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-time-picker.mjs","sources":["../../../../libs/core/time-picker/src/lib/time-picker-column/time-picker-column.ts","../../../../libs/core/time-picker/src/lib/time-picker-column/time-picker-column.html","../../../../libs/core/time-picker/src/lib/time-picker/time-picker.ts","../../../../libs/core/time-picker/src/lib/time-picker/time-picker.html","../../../../libs/core/time-picker/src/malva-ui-core-time-picker.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  untracked,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n  type AfterViewInit,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Listbox, Option } from '@angular/aria/listbox';\nimport { clamp } from '@malva-ui/cdk/utils';\n\n/**\n * A single scrollable column for the time picker (hours, minutes, seconds).\n *\n * Renders a `<ul>` backed by `@angular/aria`'s headless `ngListbox`/`ngOption`\n * pattern in **`focusMode=\"activedescendant\"`** — focus stays on the `<ul>`\n * container while `aria-activedescendant` tracks the active item. aria owns the\n * roles (`listbox`/`option`), `aria-selected`, `aria-activedescendant`, roving\n * `aria-activedescendant`, and all keyboard navigation (ArrowUp/Down wrap,\n * Home/End, Enter/Space, and additive type-ahead).\n *\n * The CSS scroll-snap **drum-roll** UX is retained on top of aria: in\n * `activedescendant` mode aria never moves DOM focus and never scrolls (its\n * `scrollActiveItemIntoView()` is opt-in and is not called here), so it cannot\n * fight the snap scrolling. Programmatic scroll (on external value change) and\n * pointer/wheel scroll-to-select stay component-owned; on a scroll-driven change\n * the aria active item is re-synced via {@link Listbox.gotoIndex} so a following\n * Arrow key moves from the centered value rather than a stale one.\n *\n * @internal This component is not part of the public API and should not be used directly.\n */\n@Component({\n  selector: 'mlv-time-picker-column',\n  templateUrl: './time-picker-column.html',\n  styleUrl: './time-picker-column.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [Listbox, Option],\n  host: {\n    class: 'mlv-time-picker-column',\n  },\n})\nexport class MlvTimePickerColumn implements AfterViewInit {\n  /** The accessible label for the column (e.g. \"Hours\", \"Minutes\"). */\n  readonly label = input.required<string>();\n\n  /** The list of numeric values to display in the column. */\n  readonly items = input.required<number[]>();\n\n  /** The currently selected value in this column. */\n  readonly selectedValue = input.required<number>();\n\n  /** Whether the column is disabled. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Emitted when the user selects a new value via scroll, click, or keyboard. */\n  readonly valueChange = output<number>();\n\n  /** @private Reference to the scrollable list element. */\n  private readonly _listRef =\n    viewChild<ElementRef<HTMLUListElement>>('listRef');\n\n  /**\n   * @private The component's own `@for`-rendered `<li>` option elements, in DOM\n   * order. Replaces `querySelectorAll('.mlv-time-picker-column__item')` over the\n   * host — the items belong to this component's template, so a signal view query\n   * is the correct mechanism.\n   */\n  private readonly _itemEls = viewChildren('itemRef', { read: ElementRef });\n\n  /**\n   * @private The aria `Listbox` instance on the `<ul>`. Used to keep aria's\n   * internal active item aligned with the drum-roll scroll position.\n   */\n  private readonly _ariaListbox = viewChild(Listbox);\n\n  /** @private DestroyRef for cleanup. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** @protected Sanitized label key for use in element IDs (spaces replaced with hyphens). */\n  protected readonly _labelKey = computed(() =>\n    this.label().toLowerCase().replace(/\\s+/g, '-'),\n  );\n\n  /** @protected Formatted display items (zero-padded two digits). */\n  protected readonly _displayItems = computed(() =>\n    this.items().map((v) => ({ value: v, label: String(v).padStart(2, '0') })),\n  );\n\n  /**\n   * @protected Bridges the scalar `selectedValue` input into aria's array-based\n   * (`V[]`) single-select value model. Single-select always holds ≤1 entry.\n   */\n  protected readonly _ariaValue = computed(() => [this.selectedValue()]);\n\n  /**\n   * @protected Listbox tabindex. Forced to `-1` when disabled to preserve the\n   * historical contract; otherwise `undefined` so aria's pattern manages it\n   * (`0` in activedescendant mode — the container is the tab stop).\n   */\n  protected readonly _listboxTabIndex = computed(() =>\n    this.disabled() ? -1 : undefined,\n  );\n\n  /** @private Timer ID for scroll debounce. */\n  private _scrollTimer: ReturnType<typeof setTimeout> | null = null;\n\n  constructor() {\n    // Sync the drum scroll AND aria's active item when selectedValue changes\n    // externally (forms value write, mode switch). gotoIndex only moves the active\n    // descendant (no selection), so it never re-emits valueChange. Without it,\n    // aria's active item would drift from the centered value once the user has\n    // interacted (setDefaultState no longer re-syncs post-interaction).\n    effect(() => {\n      const items = this.items();\n      const selected = this.selectedValue();\n      const idx = items.indexOf(selected);\n      const newIdx = idx >= 0 ? idx : 0;\n      untracked(() => {\n        this._ariaListbox()?.gotoIndex(newIdx);\n        this._scrollToIndex(newIdx, true);\n      });\n    });\n\n    this._destroyRef.onDestroy(() => {\n      if (this._scrollTimer) clearTimeout(this._scrollTimer);\n    });\n  }\n\n  ngAfterViewInit(): void {\n    const items = this.items();\n    const idx = items.indexOf(this.selectedValue());\n    const startIdx = idx >= 0 ? idx : 0;\n    // Seed aria's active item to the selected value now that the options are\n    // registered. aria's own `setDefaultState` is defeated once the popup's\n    // open handler focuses the list (focusin → hasBeenInteracted), so we can't\n    // rely on it — without this, the active item stays `undefined` and the\n    // first Arrow key navigates from index -1.\n    this._ariaListbox()?.gotoIndex(startIdx);\n    this._scrollToIndex(startIdx, false);\n  }\n\n  /**\n   * Focus the column's listbox element.\n   * Used by the parent component for inter-column keyboard navigation.\n   */\n  focusList(): void {\n    this._listRef()?.nativeElement.focus();\n  }\n\n  /**\n   * The column's scrollable `<ul>` listbox element, or `null` before view init.\n   * Exposed so the parent time picker can identify which column currently holds\n   * focus (comparing against `document.activeElement`) when moving focus between\n   * columns, without reaching into child DOM by class name.\n   */\n  get listElement(): HTMLElement | null {\n    return this._listRef()?.nativeElement ?? null;\n  }\n\n  /**\n   * @protected Bridge aria's array `valueChange` back to the scalar output.\n   * Guards against no-op echoes so the parent form control is only touched on\n   * genuine changes.\n   */\n  protected _onAriaValueChange(values: number[]): void {\n    if (this.disabled()) return;\n    const next = values[0];\n    if (next === undefined) return;\n    if (next !== this.selectedValue()) {\n      this.valueChange.emit(next);\n    }\n  }\n\n  /**\n   * @protected Handle scroll events — debounced to avoid fighting with CSS\n   * scroll-snap during large swipes. aria attaches no scroll listener of its\n   * own, so this remains the sole owner of scroll-driven selection.\n   */\n  protected _onScroll(): void {\n    if (this.disabled()) return;\n    if (this._scrollTimer) clearTimeout(this._scrollTimer);\n    this._scrollTimer = setTimeout(() => {\n      this._syncIndexFromScroll();\n    }, 150);\n  }\n\n  /**\n   * @private Read the current scroll position and update the selected value.\n   * Also re-aligns aria's active item so a subsequent Arrow key moves from the\n   * centered value.\n   */\n  private _syncIndexFromScroll(): void {\n    const listEl = this._listRef()?.nativeElement;\n    if (!listEl) return;\n\n    const items = this._itemEls();\n    if (!items.length) return;\n\n    const itemHeight = items[0].nativeElement.offsetHeight;\n    if (itemHeight === 0) return;\n\n    const scrollTop = listEl.scrollTop;\n    const closestIndex = Math.round(scrollTop / itemHeight);\n    const clampedIndex = clamp(closestIndex, 0, this.items().length - 1);\n    const newValue = this.items()[clampedIndex];\n\n    if (newValue !== this.selectedValue()) {\n      // Keep aria's active item aligned with the scrolled position first, then\n      // emit — selection flows back through selectedValue → _ariaValue.\n      this._ariaListbox()?.gotoIndex(clampedIndex);\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * @private Scroll the list to bring item at the given index into view.\n   * @param index - The index to scroll to.\n   * @param smooth - Whether to use smooth scroll behavior.\n   */\n  private _scrollToIndex(index: number, smooth: boolean): void {\n    const listEl = this._listRef()?.nativeElement;\n    if (!listEl) return;\n\n    const targetItem = this._itemEls()[index]?.nativeElement;\n    if (!targetItem) return;\n\n    const itemHeight = targetItem.offsetHeight;\n    const scrollTop = index * itemHeight;\n\n    if (typeof listEl.scrollTo === 'function') {\n      listEl.scrollTo({\n        top: scrollTop,\n        behavior: smooth ? 'smooth' : 'instant',\n      });\n    } else {\n      listEl.scrollTop = scrollTop;\n    }\n  }\n}\n","<div class=\"mlv-time-picker-column__track\">\n  <ul\n    #listRef\n    ngListbox\n    class=\"mlv-time-picker-column__list\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"follow\"\n    [wrap]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"_listboxTabIndex()\"\n    [value]=\"_ariaValue()\"\n    (valueChange)=\"_onAriaValueChange($event)\"\n    [attr.aria-label]=\"label()\"\n    (scroll)=\"_onScroll()\"\n  >\n    @for (item of _displayItems(); track item.value) {\n    <li\n      ngOption\n      #itemRef\n      [id]=\"'tp-col-item-' + _labelKey() + '-' + item.value\"\n      [value]=\"item.value\"\n      [label]=\"item.label\"\n      class=\"mlv-time-picker-column__item\"\n      [class.mlv-time-picker-column__item--selected]=\"\n          item.value === selectedValue()\n        \"\n    >\n      {{ item.label }}\n    </li>\n    }\n  </ul>\n</div>\n","import type { ElementRef, Signal } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';\nimport {\n  MlvDensityDirective,\n  MLV_DENSITY_ELEMENT,\n} from '@malva-ui/cdk/density';\nimport type { MlvFormState, MlvFormControl } from '@malva-ui/core/form-utils';\nimport {\n  MlvFormControlWrapper,\n  MlvFormControlWrapperControl,\n  MlvHint,\n  MlvDescription,\n  MlvLabel,\n  MLV_FORM_CONTROL,\n  MlvMessage,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupContainer,\n} from '@malva-ui/core/popup';\nimport { LucideClock } from '@lucide/angular';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { MlvRtlService } from '@malva-ui/cdk/utils';\nimport { MlvTimePickerColumn } from '../time-picker-column/time-picker-column';\nimport { MLV_TIME_PICKER_I18N } from '@malva-ui/i18n';\n\n/**\n * Clock mode — 24-hour or 12-hour (AM/PM).\n */\nexport type MlvTimeMode = '24h' | '12h';\n\n/**\n * Visual/validation state of the time picker. Mirrors {@link MlvFormState}.\n */\nexport type MlvTimePickerState = MlvFormState;\n\n/** @private Generates a range array [start, end) */\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start }, (_, i) => i + start);\n}\n\n/**\n * Time picker component (`mlv-time-picker`) that allows users to select a time\n * value using a compact trigger that opens a floating popup with scrollable\n * drum-roll columns. Supports 24h and 12h (AM/PM) modes, optional seconds\n * display, and integrates with signal, reactive, and template-driven forms.\n *\n * Emits values as `HH:mm` (24h format) or `HH:mm:ss` when `showSeconds` is true.\n * In 12h mode the emitted value is still in 24h format internally.\n */\n@Component({\n  selector: 'mlv-time-picker',\n  templateUrl: './time-picker.html',\n  styleUrl: './time-picker.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvFormControlWrapper,\n    MlvFormControlWrapperControl,\n    MlvMessage,\n    MlvPopup,\n    MlvPopupContent,\n    MlvPopupContainer,\n    LucideClock,\n    MlvButton,\n    MlvTimePickerColumn,\n  ],\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvTimePicker),\n    },\n    { provide: MLV_DENSITY_ELEMENT, useValue: 'time-picker' },\n  ],\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity'],\n    },\n  ],\n  host: {\n    class: 'mlv-time-picker',\n    '[class]': '\"mlv-time-picker--\" + resolvedState()',\n    '[class.mlv-time-picker--disabled]': 'computedDisabled()',\n    '[class.mlv-time-picker--open]': 'isOpen()',\n    '[class.mlv-time-picker--12h]': 'mode() === \"12h\"',\n    '[class.mlv-time-picker--with-seconds]': 'showSeconds()',\n  },\n})\nexport class MlvTimePicker\n  extends MlvSignalFormControlBase<string>\n  implements MlvFormControl\n{\n  /** The `HH:mm`/`HH:mm:ss` value used by all Angular forms APIs. */\n  readonly value = model<string>('');\n  /**\n   * Clock mode — `'24h'` for 24-hour display (default) or `'12h'` for AM/PM.\n   */\n  readonly mode = input<MlvTimeMode>('24h');\n\n  /**\n   * When `true`, shows a seconds column in addition to hours and minutes.\n   */\n  readonly showSeconds = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_TIME_PICKER_I18N);\n\n  /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */\n  protected readonly _resolvedAriaLabel = computed(\n    () => this.ariaLabel() ?? this._i18n().timePicker,\n  );\n\n  /** @private Whether the time selection popup is open. */\n  readonly isOpen = signal(false);\n\n  /** @private Internal signal for the selected hour (0–23 in 24h mode; 1–12 in 12h mode). */\n  protected readonly _hour = signal(0);\n\n  /** @private Internal signal for the selected minute (0–59). */\n  protected readonly _minute = signal(0);\n\n  /** @private Internal signal for the selected second (0–59). */\n  protected readonly _second = signal(0);\n\n  /** @private AM/PM period — `'AM'` or `'PM'`. Only relevant in 12h mode. */\n  protected readonly _period = signal<'AM' | 'PM'>('AM');\n\n  /** Unique ID for the message element, used for aria-describedby linking. */\n\n  /** Unique ID for the popup panel, used for aria-controls linking. */\n  readonly panelId = computed(() => `${this.id()}-panel`);\n\n  /** Override focused to also be true when the popup is open. */\n  override readonly focused: Signal<boolean> = computed(\n    () => this._focused() || this.isOpen(),\n  );\n\n  /** @protected Formatted display value shown in the trigger. */\n  protected readonly _displayValue = computed(() => {\n    const is12h = this.mode() === '12h';\n    const hour = is12h ? this._displayHour() : this._hour();\n    const hh = String(hour).padStart(2, '0');\n    const mm = String(this._minute()).padStart(2, '0');\n    const ss = String(this._second()).padStart(2, '0');\n    let base = `${hh}:${mm}`;\n    if (this.showSeconds()) base += `:${ss}`;\n    if (is12h) base += ` ${this._period()}`;\n    return base;\n  });\n\n  /** @protected Hour items for the column — depends on mode. */\n  protected readonly _hourItems = computed(() =>\n    this.mode() === '12h' ? range(1, 13) : range(0, 24),\n  );\n\n  /** @protected Minute items for the column (0–59). */\n  protected readonly _minuteItems = computed(() => range(0, 60));\n\n  /** @protected Second items for the column (0–59). */\n  protected readonly _secondItems = computed(() => range(0, 60));\n\n  /** @protected The hour value shown in the column (1–12 in 12h mode, 0–23 in 24h). */\n  protected readonly _displayHour = computed(() => {\n    if (this.mode() !== '12h') return this._hour();\n    const h = this._hour() % 12;\n    return h === 0 ? 12 : h;\n  });\n\n  /** @private Reference to the trigger element for focus restoration after popup close. */\n  private readonly _triggerRef =\n    viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n  /**\n   * @private The rendered drum-roll columns (hours, minutes, optional seconds),\n   * in DOM order. They are `mlv-time-picker-column` children declared in this\n   * component's own template (inside `mlvPopupContent`), so a signal view query\n   * resolves them — even though the popup content renders in a detached overlay.\n   * Used for focus-on-open and inter-column Arrow navigation instead of reaching\n   * into the overlay DOM by class name.\n   */\n  private readonly _columns = viewChildren(MlvTimePickerColumn);\n\n  /** @private Normalizes horizontal column navigation for RTL layouts. */\n  private readonly _rtlService = inject(MlvRtlService);\n\n  /** @private Density directive instance for reading the resolved density level. */\n  private readonly _densityDirective = inject(MlvDensityDirective);\n\n  /** @protected Effective density to pass to the detached popup panel. */\n  protected readonly _effectiveDensity = computed(() =>\n    this._densityDirective.effectiveDensity(),\n  );\n\n  constructor() {\n    super();\n    effect(() => this._applyValue(this.value()));\n  }\n\n  /**\n   * @protected Toggle the popup open/closed state.\n   */\n  protected _toggleDropdown(): void {\n    if (this.computedDisabled()) return;\n    this.isOpen.set(!this.isOpen());\n  }\n\n  /**\n   * @private Build the time string from internal signals.\n   * Always returns 24h format: `HH:mm` or `HH:mm:ss`.\n   */\n  private _buildValue(): string {\n    let hour = this._hour();\n\n    if (this.mode() === '12h') {\n      const displayHour = this._displayHour();\n      if (this._period() === 'AM') {\n        hour = displayHour === 12 ? 0 : displayHour;\n      } else {\n        hour = displayHour === 12 ? 12 : displayHour + 12;\n      }\n    }\n\n    const hh = String(hour).padStart(2, '0');\n    const mm = String(this._minute()).padStart(2, '0');\n    const ss = String(this._second()).padStart(2, '0');\n\n    return this.showSeconds() ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;\n  }\n\n  /**\n   * @private Parse a time string (`HH:mm` or `HH:mm:ss`) into internal signals.\n   */\n  private _parseValue(value: string): void {\n    if (!value) return;\n    const parts = value.split(':').map(Number);\n    const totalHour = parts[0] ?? 0;\n    const minute = parts[1] ?? 0;\n    const second = parts[2] ?? 0;\n\n    this._minute.set(minute);\n    this._second.set(second);\n\n    if (this.mode() === '12h') {\n      this._period.set(totalHour >= 12 ? 'PM' : 'AM');\n      const h12 = totalHour % 12;\n      this._hour.set(h12 === 0 ? 0 : h12); // store 0–11, display as 12 or 1–11\n    } else {\n      this._hour.set(totalHour);\n    }\n  }\n\n  /** Whether the control holds a clearable value — The drum always shows a time, so there is always a value. */\n  readonly hasValue = computed(() => true);\n\n  /** @private Synchronizes drum columns from an external model value. */\n  private _applyValue(value: string): void {\n    if (value) {\n      this._parseValue(value);\n    } else {\n      // Default to current time on null/empty\n      const now = new Date();\n      this._hour.set(now.getHours());\n      this._minute.set(now.getMinutes());\n      this._second.set(now.getSeconds());\n      if (this.mode() === '12h') {\n        this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');\n      }\n    }\n  }\n\n  /**\n   * @protected Called when the popup opens. Focuses the first column listbox\n   * so keyboard navigation is immediately available.\n   */\n  protected _onPopupOpened(): void {\n    this._columns()[0]?.focusList();\n  }\n\n  /**\n   * @protected Called when the popup closes. Restores focus to the trigger element.\n   */\n  protected _onPopupClosed(): void {\n    this.setFocused(false);\n    this._markTouched();\n    this._triggerRef()?.nativeElement.focus();\n  }\n\n  /** @protected Marks the control touched when the trigger loses focus. */\n  protected _onTriggerBlur(): void {\n    this.setFocused(false);\n    this._markTouched();\n  }\n\n  /**\n   * @protected Handle hour column value change.\n   */\n  protected _onHourChange(value: number): void {\n    if (this.mode() === '12h') {\n      // Store 0-based: 12 → 0, 1 → 1, … 11 → 11\n      this._hour.set(value === 12 ? 0 : value);\n    } else {\n      this._hour.set(value);\n    }\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle minute column value change.\n   */\n  protected _onMinuteChange(value: number): void {\n    this._minute.set(value);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle second column value change.\n   */\n  protected _onSecondChange(value: number): void {\n    this._second.set(value);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Toggle the AM/PM period in 12h mode.\n   */\n  protected _onPeriodChange(period: 'AM' | 'PM'): void {\n    this._period.set(period);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle ArrowLeft/ArrowRight on the columns container to move\n   * focus between column listboxes.\n   */\n  protected _onPanelKeydown(event: KeyboardEvent): void {\n    const key = this._rtlService.normalizeArrowKey(event);\n    if (key !== LEFT_ARROW && key !== RIGHT_ARROW) return;\n\n    const columns = this._columns();\n    if (!columns.length) return;\n\n    const focusedIdx = columns.findIndex(\n      (column) => column.listElement === document.activeElement,\n    );\n    if (focusedIdx === -1) return;\n\n    event.preventDefault();\n\n    const nextIdx = key === LEFT_ARROW ? focusedIdx - 1 : focusedIdx + 1;\n    if (nextIdx < 0 || nextIdx >= columns.length) return;\n\n    columns[nextIdx].focusList();\n  }\n\n  /**\n   * @private Write the current value to the forms model.\n   */\n  private _emitValue(): void {\n    this.value.set(this._buildValue());\n  }\n}\n","<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-time-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-time-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-label]=\"_resolvedAriaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled()\"\n        [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"_toggleDropdown()\"\n        (keydown.enter)=\"_toggleDropdown()\"\n        (keydown.space)=\"_toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"isOpen.set(false)\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-time-picker__value\">{{ _displayValue() }}</span>\n        <span class=\"mlv-time-picker__icon\">\n          <svg lucideClock></svg>\n        </span>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [modal]=\"true\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _resolvedAriaLabel()\"\n        [ariaLabel]=\"_resolvedAriaLabel()\"\n        class=\"mlv-time-picker__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            [id]=\"panelId()\"\n            class=\"mlv-time-picker__panel\"\n            [class]=\"'mlv-time-picker__panel--' + _effectiveDensity()\"\n            role=\"group\"\n            [attr.aria-label]=\"_resolvedAriaLabel()\"\n          >\n            <div\n              class=\"mlv-time-picker__columns\"\n              tabindex=\"-1\"\n              (keydown)=\"_onPanelKeydown($event)\"\n            >\n              <!-- Hours column -->\n              <mlv-time-picker-column\n                label=\"Hours\"\n                [items]=\"_hourItems()\"\n                [selectedValue]=\"_displayHour()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onHourChange($event)\"\n              />\n\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Minutes column -->\n              <mlv-time-picker-column\n                label=\"Minutes\"\n                [items]=\"_minuteItems()\"\n                [selectedValue]=\"_minute()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onMinuteChange($event)\"\n              />\n\n              @if (showSeconds()) {\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Seconds column -->\n              <mlv-time-picker-column\n                label=\"Seconds\"\n                [items]=\"_secondItems()\"\n                [selectedValue]=\"_second()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onSecondChange($event)\"\n              />\n              } @if (mode() === '12h') {\n              <!-- AM/PM toggle -->\n              <div\n                class=\"mlv-time-picker__ampm\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().period\"\n              >\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'AM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'AM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('AM')\"\n                >\n                  AM\n                </button>\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'PM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'PM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('PM')\"\n                >\n                  PM\n                </button>\n              </div>\n              }\n            </div>\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-timeline.mjs

@@ -0,0 +1,216 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, computed } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Slot directive for the icon or avatar displayed inside the timeline item node.
+ *
+ * Use with `<ng-template mlvTimelineItemIcon>` inside a `mlv-timeline-item` element.
+ * When provided, the projected content replaces the default circle node indicator.
+ *
+ * @example
+ * ```html
+ * <mlv-timeline-item title="Deployed">
+ *   <ng-template mlvTimelineItemIcon>
+ *     <svg lucideRocket [size]="16" />
+ *   </ng-template>
+ *   Deployment completed successfully.
+ * </mlv-timeline-item>
+ * ```
+ */
+class MlvTimelineItemIcon {
+    /** The template reference for this icon slot. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTimelineItemIcon, isStandalone: true, selector: "[mlvTimelineItemIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTimelineItemIcon]',
+                }]
+        }] });
+
+/**
+ * Slot directive for supplementary metadata content displayed in the timeline item.
+ *
+ * Use with `<ng-template mlvTimelineItemMeta>` inside a `mlv-timeline-item` element.
+ * Intended for badges, chips, status indicators, or other compact metadata.
+ *
+ * @example
+ * ```html
+ * <mlv-timeline-item title="Review">
+ *   <ng-template mlvTimelineItemMeta>
+ *     <mlv-badge tone="warning">Pending</mlv-badge>
+ *   </ng-template>
+ *   Awaiting code review.
+ * </mlv-timeline-item>
+ * ```
+ */
+class MlvTimelineItemMeta {
+    /** The template reference for this meta slot. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTimelineItemMeta, isStandalone: true, selector: "[mlvTimelineItemMeta]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItemMeta, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTimelineItemMeta]',
+                }]
+        }] });
+
+/**
+ * A single event entry within a `mlv-timeline`.
+ *
+ * Renders a node circle (or projected icon), a connector line segment, a title,
+ * an optional timestamp in a `<time>` element, optional meta slot content
+ * (badges, chips), and a default content slot for the event description.
+ *
+ * The `tone` input drives the icon node accent color via BEM modifier.
+ *
+ * @example
+ * ```html
+ * <mlv-timeline-item title="Deployed" timestamp="2025-03-26T10:00:00" tone="success">
+ *   <ng-template mlvTimelineItemIcon>
+ *     <svg lucideRocket [size]="16" />
+ *   </ng-template>
+ *   Release v2.0.0 was deployed to production.
+ * </mlv-timeline-item>
+ * ```
+ */
+class MlvTimelineItem {
+    /** The heading text for this timeline event. Required. */
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * The timestamp string for this event.
+     * Rendered inside a `<time>` element. Should be a human-readable date/time string;
+     * for machine-readable precision, use a full ISO 8601 string.
+     */
+    timestamp = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    /**
+     * Semantic tone controlling the icon node accent color.
+     * Defaults to `'default'` (neutral).
+     */
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * MlvLayout direction for this item.
+     * - `'right'` (default): node circle on the left, content on the right.
+     * - `'left'`: content on the left, node circle on the right.
+     *
+     * Allows alternating left-right layouts within a single timeline.
+     */
+    direction = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot for the icon or avatar inside the node circle. */
+    _iconRef = contentChild(MlvTimelineItemIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconRef" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot for supplementary metadata (badges, chips, etc.). */
+    _metaRef = contentChild(MlvTimelineItemMeta, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_metaRef" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTimelineItem, isStandalone: true, selector: "mlv-timeline-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "\"mlv-timeline-item--\" + tone()", "class.mlv-timeline-item--direction-left": "direction() === \"left\"" }, classAttribute: "mlv-timeline-item" }, queries: [{ propertyName: "_iconRef", first: true, predicate: MlvTimelineItemIcon, descendants: true, isSignal: true }, { propertyName: "_metaRef", first: true, predicate: MlvTimelineItemMeta, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mlv-timeline-item__col\"\n  [class.mlv-timeline-item__col--left]=\"direction() === 'left'\"\n  [class.mlv-timeline-item__col--right]=\"direction() === 'right'\"\n>\n  <div\n    class=\"mlv-timeline-item__content\"\n    [class.mlv-timeline-item__content--left]=\"direction() === 'left'\"\n  >\n    <div class=\"mlv-timeline-item__header\">\n      <span class=\"mlv-timeline-item__title\">{{ title() }}</span>\n      @if (timestamp()) {\n      <time class=\"mlv-timeline-item__timestamp\">{{ timestamp() }}</time>\n      } @if (_metaRef()) {\n      <span class=\"mlv-timeline-item__meta\">\n        <ng-container [ngTemplateOutlet]=\"_metaRef()!.templateRef\" />\n      </span>\n      }\n    </div>\n    <div class=\"mlv-timeline-item__description\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n\n<div class=\"mlv-timeline-item__spine\">\n  <div class=\"mlv-timeline-item__node-circle\">\n    @if (_iconRef()) {\n    <span class=\"mlv-timeline-item__node-icon\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"_iconRef()!.templateRef\" />\n    </span>\n    }\n  </div>\n  <div class=\"mlv-timeline-item__connector\" aria-hidden=\"true\"></div>\n</div>\n", styles: ["@layer mlv.components{.mlv-timeline-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-timeline-item *{box-sizing:border-box}.mlv-timeline-item{--mlv-tli-node-bg: var(--mlv-border-normal);--mlv-tli-node-size: 2.5rem;--mlv-tli-connector-width: .125rem;display:grid;grid-template-columns:1fr var(--mlv-tli-node-size) 1fr;gap:0 1.5rem;position:relative}.mlv-timeline-item__col{grid-row:1;min-width:0}.mlv-timeline-item__col--left{grid-column:1;text-align:end}.mlv-timeline-item__col--right{grid-column:3;text-align:start}.mlv-timeline-item__spine{grid-row:1;grid-column:2;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.mlv-timeline-item__node-circle{width:var(--mlv-tli-node-size);height:var(--mlv-tli-node-size);border-radius:var(--mlv-radius-full);background-color:var(--mlv-tli-node-bg);border:var(--mlv-stroke-width) solid var(--mlv-tli-node-bg);display:flex;align-items:center;justify-content:center;color:var(--mlv-text-primary-on-accent-1);flex-shrink:0;z-index:1;overflow:hidden}.mlv-timeline-item__node-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.mlv-timeline-item__connector{flex:1;width:var(--mlv-tli-connector-width);background-color:var(--mlv-border-subtle);min-height:var(--mlv-spacing-8)}.mlv-timeline-item:last-child .mlv-timeline-item__connector{display:none}.mlv-timeline-item__content{padding-bottom:var(--mlv-spacing-8);min-width:0}.mlv-timeline-item__content--left{text-align:end}.mlv-timeline-item:last-child .mlv-timeline-item__content{padding-bottom:0}.mlv-timeline-item__header{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.375rem}.mlv-timeline-item--direction-left .mlv-timeline-item__header{flex-direction:row-reverse;justify-content:flex-end}.mlv-timeline-item__title{font-weight:var(--mlv-font-weight-semibold);color:var(--mlv-text-primary);font-size:var(--mlv-font-size-m);line-height:var(--mlv-line-height-normal)}.mlv-timeline-item__timestamp{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-secondary);white-space:nowrap}.mlv-timeline-item__meta{display:inline-flex;align-items:center;gap:.25rem}.mlv-timeline-item__description{font-size:var(--mlv-font-size-m);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-normal)}.mlv-timeline-item--default{--mlv-tli-node-bg: var(--mlv-border-normal)}.mlv-timeline-item--success{--mlv-tli-node-bg: var(--mlv-background-success-1)}.mlv-timeline-item--warning{--mlv-tli-node-bg: var(--mlv-background-warning-1)}.mlv-timeline-item--danger{--mlv-tli-node-bg: var(--mlv-background-danger-1)}.mlv-timeline-item--info{--mlv-tli-node-bg: var(--mlv-background-info-1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimelineItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-timeline-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'mlv-timeline-item',
+                        role: 'listitem',
+                        '[class]': '"mlv-timeline-item--" + tone()',
+                        '[class.mlv-timeline-item--direction-left]': 'direction() === "left"',
+                    }, template: "<div\n  class=\"mlv-timeline-item__col\"\n  [class.mlv-timeline-item__col--left]=\"direction() === 'left'\"\n  [class.mlv-timeline-item__col--right]=\"direction() === 'right'\"\n>\n  <div\n    class=\"mlv-timeline-item__content\"\n    [class.mlv-timeline-item__content--left]=\"direction() === 'left'\"\n  >\n    <div class=\"mlv-timeline-item__header\">\n      <span class=\"mlv-timeline-item__title\">{{ title() }}</span>\n      @if (timestamp()) {\n      <time class=\"mlv-timeline-item__timestamp\">{{ timestamp() }}</time>\n      } @if (_metaRef()) {\n      <span class=\"mlv-timeline-item__meta\">\n        <ng-container [ngTemplateOutlet]=\"_metaRef()!.templateRef\" />\n      </span>\n      }\n    </div>\n    <div class=\"mlv-timeline-item__description\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n\n<div class=\"mlv-timeline-item__spine\">\n  <div class=\"mlv-timeline-item__node-circle\">\n    @if (_iconRef()) {\n    <span class=\"mlv-timeline-item__node-icon\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"_iconRef()!.templateRef\" />\n    </span>\n    }\n  </div>\n  <div class=\"mlv-timeline-item__connector\" aria-hidden=\"true\"></div>\n</div>\n", styles: ["@layer mlv.components{.mlv-timeline-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-timeline-item *{box-sizing:border-box}.mlv-timeline-item{--mlv-tli-node-bg: var(--mlv-border-normal);--mlv-tli-node-size: 2.5rem;--mlv-tli-connector-width: .125rem;display:grid;grid-template-columns:1fr var(--mlv-tli-node-size) 1fr;gap:0 1.5rem;position:relative}.mlv-timeline-item__col{grid-row:1;min-width:0}.mlv-timeline-item__col--left{grid-column:1;text-align:end}.mlv-timeline-item__col--right{grid-column:3;text-align:start}.mlv-timeline-item__spine{grid-row:1;grid-column:2;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.mlv-timeline-item__node-circle{width:var(--mlv-tli-node-size);height:var(--mlv-tli-node-size);border-radius:var(--mlv-radius-full);background-color:var(--mlv-tli-node-bg);border:var(--mlv-stroke-width) solid var(--mlv-tli-node-bg);display:flex;align-items:center;justify-content:center;color:var(--mlv-text-primary-on-accent-1);flex-shrink:0;z-index:1;overflow:hidden}.mlv-timeline-item__node-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.mlv-timeline-item__connector{flex:1;width:var(--mlv-tli-connector-width);background-color:var(--mlv-border-subtle);min-height:var(--mlv-spacing-8)}.mlv-timeline-item:last-child .mlv-timeline-item__connector{display:none}.mlv-timeline-item__content{padding-bottom:var(--mlv-spacing-8);min-width:0}.mlv-timeline-item__content--left{text-align:end}.mlv-timeline-item:last-child .mlv-timeline-item__content{padding-bottom:0}.mlv-timeline-item__header{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.375rem}.mlv-timeline-item--direction-left .mlv-timeline-item__header{flex-direction:row-reverse;justify-content:flex-end}.mlv-timeline-item__title{font-weight:var(--mlv-font-weight-semibold);color:var(--mlv-text-primary);font-size:var(--mlv-font-size-m);line-height:var(--mlv-line-height-normal)}.mlv-timeline-item__timestamp{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-secondary);white-space:nowrap}.mlv-timeline-item__meta{display:inline-flex;align-items:center;gap:.25rem}.mlv-timeline-item__description{font-size:var(--mlv-font-size-m);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-normal)}.mlv-timeline-item--default{--mlv-tli-node-bg: var(--mlv-border-normal)}.mlv-timeline-item--success{--mlv-tli-node-bg: var(--mlv-background-success-1)}.mlv-timeline-item--warning{--mlv-tli-node-bg: var(--mlv-background-warning-1)}.mlv-timeline-item--danger{--mlv-tli-node-bg: var(--mlv-background-danger-1)}.mlv-timeline-item--info{--mlv-tli-node-bg: var(--mlv-background-info-1)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], _iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTimelineItemIcon), { isSignal: true }] }], _metaRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTimelineItemMeta), { isSignal: true }] }] } });
+
+/**
+ * Container component for a vertical timeline of events.
+ *
+ * Renders an ordered list (`<ol>`) that manages the vertical connector line
+ * between `mlv-timeline-item` children via CSS. Each child handles its own
+ * connector segment; the last child hides its connector automatically.
+ *
+ * ## Single-sided collapse
+ *
+ * A timeline item is a three-column grid — `[content-left] [spine]
+ * [content-right]` — so that items can alternate sides. When every projected
+ * item shares the same `direction`, the opposite column carries nothing, and
+ * the timeline collapses its items to a two-column grid instead of reserving
+ * (and gapping) half the available width for an empty track. This is driven by
+ * the `mlv-timeline--single-left` / `mlv-timeline--single-right` host classes
+ * and requires no consumer opt-in. A timeline that mixes both directions keeps
+ * the full three-column layout.
+ *
+ * @example
+ * ```html
+ * <mlv-timeline>
+ *   <mlv-timeline-item title="Submitted" timestamp="Mar 24, 2025" tone="info">
+ *     Form submitted by user.
+ *   </mlv-timeline-item>
+ *   <mlv-timeline-item title="Approved" timestamp="Mar 25, 2025" tone="success">
+ *     Approved by manager.
+ *   </mlv-timeline-item>
+ *   <mlv-timeline-item title="Completed" timestamp="Mar 26, 2025" tone="success">
+ *     Process completed.
+ *   </mlv-timeline-item>
+ * </mlv-timeline>
+ * ```
+ */
+class MlvTimeline {
+    /**
+     * @protected The projected timeline items.
+     *
+     * Queried with `descendants: true` so items wrapped in `@for`/`@if` blocks or
+     * re-projected through an intermediate component are still seen. The query is
+     * a signal, so the collapse modifiers below re-evaluate when items are added
+     * or removed.
+     */
+    _items = contentChildren(MlvTimelineItem, { ...(ngDevMode ? { debugName: "_items" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * @protected Whether at least one projected item renders its content on the
+     * left of the spine. `direction` is a signal input, so this stays correct when
+     * a consumer flips an item's direction at runtime.
+     */
+    _hasLeft = computed(() => this._items().some((item) => item.direction() === 'left'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether at least one projected item renders its content on the
+     * right of the spine.
+     */
+    _hasRight = computed(() => this._items().some((item) => item.direction() === 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasRight" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected True when the timeline has items and every one of them sits on
+     * the left, so the right column can be dropped. False for an empty timeline
+     * and for a timeline that mixes directions.
+     */
+    _isSingleLeft = computed(() => this._hasLeft() && !this._hasRight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isSingleLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected True when the timeline has items and every one of them sits on
+     * the right (the default), so the left column can be dropped.
+     */
+    _isSingleRight = computed(() => this._hasRight() && !this._hasLeft(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isSingleRight" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvTimeline, isStandalone: true, selector: "mlv-timeline", host: { attributes: { "role": "list" }, properties: { "class.mlv-timeline--single-left": "_isSingleLeft()", "class.mlv-timeline--single-right": "_isSingleRight()" }, classAttribute: "mlv-timeline" }, queries: [{ propertyName: "_items", predicate: MlvTimelineItem, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer mlv.components{.mlv-timeline{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-timeline *{box-sizing:border-box}.mlv-timeline{display:flex;flex-direction:column;list-style:none}.mlv-timeline--single-right .mlv-timeline-item{grid-template-columns:var(--mlv-tli-node-size) 1fr}.mlv-timeline--single-right .mlv-timeline-item .mlv-timeline-item__spine{grid-column:1}.mlv-timeline--single-right .mlv-timeline-item .mlv-timeline-item__col--right{grid-column:2}.mlv-timeline--single-left .mlv-timeline-item{grid-template-columns:1fr var(--mlv-tli-node-size)}.mlv-timeline--single-left .mlv-timeline-item .mlv-timeline-item__col--left{grid-column:1}.mlv-timeline--single-left .mlv-timeline-item .mlv-timeline-item__spine{grid-column:2}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimeline, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-timeline', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-timeline',
+                        role: 'list',
+                        '[class.mlv-timeline--single-left]': '_isSingleLeft()',
+                        '[class.mlv-timeline--single-right]': '_isSingleRight()',
+                    }, styles: ["@layer mlv.components{.mlv-timeline{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-timeline *{box-sizing:border-box}.mlv-timeline{display:flex;flex-direction:column;list-style:none}.mlv-timeline--single-right .mlv-timeline-item{grid-template-columns:var(--mlv-tli-node-size) 1fr}.mlv-timeline--single-right .mlv-timeline-item .mlv-timeline-item__spine{grid-column:1}.mlv-timeline--single-right .mlv-timeline-item .mlv-timeline-item__col--right{grid-column:2}.mlv-timeline--single-left .mlv-timeline-item{grid-template-columns:1fr var(--mlv-tli-node-size)}.mlv-timeline--single-left .mlv-timeline-item .mlv-timeline-item__col--left{grid-column:1}.mlv-timeline--single-left .mlv-timeline-item .mlv-timeline-item__spine{grid-column:2}}\n"] }]
+        }], propDecorators: { _items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvTimelineItem), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvTimeline, MlvTimelineItem, MlvTimelineItemIcon, MlvTimelineItemMeta };
+//# sourceMappingURL=malva-ui-core-timeline.mjs.map

package/fesm2022/malva-ui-core-timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-timeline.mjs","sources":["../../../../libs/core/timeline/src/lib/timeline/timeline-item-icon.ts","../../../../libs/core/timeline/src/lib/timeline/timeline-item-meta.ts","../../../../libs/core/timeline/src/lib/timeline/timeline-item.ts","../../../../libs/core/timeline/src/lib/timeline/timeline-item.html","../../../../libs/core/timeline/src/lib/timeline/timeline.ts","../../../../libs/core/timeline/src/malva-ui-core-timeline.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Slot directive for the icon or avatar displayed inside the timeline item node.\n *\n * Use with `<ng-template mlvTimelineItemIcon>` inside a `mlv-timeline-item` element.\n * When provided, the projected content replaces the default circle node indicator.\n *\n * @example\n * ```html\n * <mlv-timeline-item title=\"Deployed\">\n *   <ng-template mlvTimelineItemIcon>\n *     <svg lucideRocket [size]=\"16\" />\n *   </ng-template>\n *   Deployment completed successfully.\n * </mlv-timeline-item>\n * ```\n */\n@Directive({\n  selector: '[mlvTimelineItemIcon]',\n})\nexport class MlvTimelineItemIcon {\n  /** The template reference for this icon slot. */\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Slot directive for supplementary metadata content displayed in the timeline item.\n *\n * Use with `<ng-template mlvTimelineItemMeta>` inside a `mlv-timeline-item` element.\n * Intended for badges, chips, status indicators, or other compact metadata.\n *\n * @example\n * ```html\n * <mlv-timeline-item title=\"Review\">\n *   <ng-template mlvTimelineItemMeta>\n *     <mlv-badge tone=\"warning\">Pending</mlv-badge>\n *   </ng-template>\n *   Awaiting code review.\n * </mlv-timeline-item>\n * ```\n */\n@Directive({\n  selector: '[mlvTimelineItemMeta]',\n})\nexport class MlvTimelineItemMeta {\n  /** The template reference for this meta slot. */\n  readonly templateRef = inject(TemplateRef);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MlvTimelineItemIcon } from './timeline-item-icon';\nimport { MlvTimelineItemMeta } from './timeline-item-meta';\nimport type {\n  MlvTimelineItemDirection,\n  MlvTimelineItemTone,\n} from './timeline.types';\n\n/**\n * A single event entry within a `mlv-timeline`.\n *\n * Renders a node circle (or projected icon), a connector line segment, a title,\n * an optional timestamp in a `<time>` element, optional meta slot content\n * (badges, chips), and a default content slot for the event description.\n *\n * The `tone` input drives the icon node accent color via BEM modifier.\n *\n * @example\n * ```html\n * <mlv-timeline-item title=\"Deployed\" timestamp=\"2025-03-26T10:00:00\" tone=\"success\">\n *   <ng-template mlvTimelineItemIcon>\n *     <svg lucideRocket [size]=\"16\" />\n *   </ng-template>\n *   Release v2.0.0 was deployed to production.\n * </mlv-timeline-item>\n * ```\n */\n@Component({\n  selector: 'mlv-timeline-item',\n  templateUrl: './timeline-item.html',\n  styleUrl: './timeline-item.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet],\n  host: {\n    class: 'mlv-timeline-item',\n    role: 'listitem',\n    '[class]': '\"mlv-timeline-item--\" + tone()',\n    '[class.mlv-timeline-item--direction-left]': 'direction() === \"left\"',\n  },\n})\nexport class MlvTimelineItem {\n  /** The heading text for this timeline event. Required. */\n  readonly title = input.required<string>();\n\n  /**\n   * The timestamp string for this event.\n   * Rendered inside a `<time>` element. Should be a human-readable date/time string;\n   * for machine-readable precision, use a full ISO 8601 string.\n   */\n  readonly timestamp = input<string>('');\n\n  /**\n   * Semantic tone controlling the icon node accent color.\n   * Defaults to `'default'` (neutral).\n   */\n  readonly tone = input<MlvTimelineItemTone>('default');\n\n  /**\n   * MlvLayout direction for this item.\n   * - `'right'` (default): node circle on the left, content on the right.\n   * - `'left'`: content on the left, node circle on the right.\n   *\n   * Allows alternating left-right layouts within a single timeline.\n   */\n  readonly direction = input<MlvTimelineItemDirection>('right');\n\n  /** @protected Template slot for the icon or avatar inside the node circle. */\n  protected readonly _iconRef = contentChild(MlvTimelineItemIcon);\n\n  /** @protected Template slot for supplementary metadata (badges, chips, etc.). */\n  protected readonly _metaRef = contentChild(MlvTimelineItemMeta);\n}\n","<div\n  class=\"mlv-timeline-item__col\"\n  [class.mlv-timeline-item__col--left]=\"direction() === 'left'\"\n  [class.mlv-timeline-item__col--right]=\"direction() === 'right'\"\n>\n  <div\n    class=\"mlv-timeline-item__content\"\n    [class.mlv-timeline-item__content--left]=\"direction() === 'left'\"\n  >\n    <div class=\"mlv-timeline-item__header\">\n      <span class=\"mlv-timeline-item__title\">{{ title() }}</span>\n      @if (timestamp()) {\n      <time class=\"mlv-timeline-item__timestamp\">{{ timestamp() }}</time>\n      } @if (_metaRef()) {\n      <span class=\"mlv-timeline-item__meta\">\n        <ng-container [ngTemplateOutlet]=\"_metaRef()!.templateRef\" />\n      </span>\n      }\n    </div>\n    <div class=\"mlv-timeline-item__description\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n\n<div class=\"mlv-timeline-item__spine\">\n  <div class=\"mlv-timeline-item__node-circle\">\n    @if (_iconRef()) {\n    <span class=\"mlv-timeline-item__node-icon\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"_iconRef()!.templateRef\" />\n    </span>\n    }\n  </div>\n  <div class=\"mlv-timeline-item__connector\" aria-hidden=\"true\"></div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvTimelineItem } from './timeline-item';\n\n/**\n * Container component for a vertical timeline of events.\n *\n * Renders an ordered list (`<ol>`) that manages the vertical connector line\n * between `mlv-timeline-item` children via CSS. Each child handles its own\n * connector segment; the last child hides its connector automatically.\n *\n * ## Single-sided collapse\n *\n * A timeline item is a three-column grid — `[content-left] [spine]\n * [content-right]` — so that items can alternate sides. When every projected\n * item shares the same `direction`, the opposite column carries nothing, and\n * the timeline collapses its items to a two-column grid instead of reserving\n * (and gapping) half the available width for an empty track. This is driven by\n * the `mlv-timeline--single-left` / `mlv-timeline--single-right` host classes\n * and requires no consumer opt-in. A timeline that mixes both directions keeps\n * the full three-column layout.\n *\n * @example\n * ```html\n * <mlv-timeline>\n *   <mlv-timeline-item title=\"Submitted\" timestamp=\"Mar 24, 2025\" tone=\"info\">\n *     Form submitted by user.\n *   </mlv-timeline-item>\n *   <mlv-timeline-item title=\"Approved\" timestamp=\"Mar 25, 2025\" tone=\"success\">\n *     Approved by manager.\n *   </mlv-timeline-item>\n *   <mlv-timeline-item title=\"Completed\" timestamp=\"Mar 26, 2025\" tone=\"success\">\n *     Process completed.\n *   </mlv-timeline-item>\n * </mlv-timeline>\n * ```\n */\n@Component({\n  selector: 'mlv-timeline',\n  template: `<ng-content />`,\n  styleUrl: './timeline.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-timeline',\n    role: 'list',\n    '[class.mlv-timeline--single-left]': '_isSingleLeft()',\n    '[class.mlv-timeline--single-right]': '_isSingleRight()',\n  },\n})\nexport class MlvTimeline {\n  /**\n   * @protected The projected timeline items.\n   *\n   * Queried with `descendants: true` so items wrapped in `@for`/`@if` blocks or\n   * re-projected through an intermediate component are still seen. The query is\n   * a signal, so the collapse modifiers below re-evaluate when items are added\n   * or removed.\n   */\n  protected readonly _items = contentChildren(MlvTimelineItem, {\n    descendants: true,\n  });\n\n  /**\n   * @protected Whether at least one projected item renders its content on the\n   * left of the spine. `direction` is a signal input, so this stays correct when\n   * a consumer flips an item's direction at runtime.\n   */\n  protected readonly _hasLeft = computed(() =>\n    this._items().some((item) => item.direction() === 'left'),\n  );\n\n  /**\n   * @protected Whether at least one projected item renders its content on the\n   * right of the spine.\n   */\n  protected readonly _hasRight = computed(() =>\n    this._items().some((item) => item.direction() === 'right'),\n  );\n\n  /**\n   * @protected True when the timeline has items and every one of them sits on\n   * the left, so the right column can be dropped. False for an empty timeline\n   * and for a timeline that mixes directions.\n   */\n  protected readonly _isSingleLeft = computed(\n    () => this._hasLeft() && !this._hasRight(),\n  );\n\n  /**\n   * @protected True when the timeline has items and every one of them sits on\n   * the right (the default), so the left column can be dropped.\n   */\n  protected readonly _isSingleRight = computed(\n    () => this._hasRight() && !this._hasLeft(),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-title.mjs

@@ -0,0 +1,178 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, model, inject, ElementRef, viewChild, signal, computed, effect, afterNextRender, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { MlvSignalFormControlBase, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+
+function coerceTitleLevel(value) {
+    if (value === null || value === undefined || value === '') {
+        return undefined;
+    }
+    const parsed = Number(value);
+    if (!Number.isInteger(parsed) || parsed < 1 || parsed > 6) {
+        return undefined;
+    }
+    return parsed;
+}
+function inferTitleLevel(tagName) {
+    const match = /^h([1-6])$/.exec(tagName.toLowerCase());
+    return match ? Number(match[1]) : 2;
+}
+/**
+ * Inline title component that decorates the host element with Malva UI heading
+ * typography. It can render projected content, bind to a model, or act as an
+ * editable control through signal, reactive, and template-driven forms.
+ */
+class MlvTitle extends MlvSignalFormControlBase {
+    /** Explicit visual title level. Falls back to the host heading tag. */
+    level = input(undefined, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: coerceTitleLevel });
+    /** Enables the auto-sizing editable textarea overlay. */
+    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Placeholder displayed when the editable field is empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Signal-model API for directly binding the title text. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @private Host element ref, used to read the host tag name for level inference. */
+    _hostElement = inject(ElementRef);
+    /** @private Reference to the projected-content span, used to hydrate text from projected content. */
+    _projectionElement = viewChild('projectionContent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectionElement" }] : /* istanbul ignore next */ []));
+    /** @private Trimmed text extracted from projected content. */
+    _projectedText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedText" }] : /* istanbul ignore next */ []));
+    /** @private Whether the component is currently driven by its internal editable value. */
+    _usesInternalValue = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_usesInternalValue" }] : /* istanbul ignore next */ []));
+    /** @private Tracks whether internal state was last synced from an external `value`. */
+    _syncedFromExternalValue = false;
+    /** @protected Whether the host element is a native `h1`–`h6` heading. */
+    _isNativeHeading = computed(() => /^h[1-6]$/.test(this._hostTagName), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isNativeHeading" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved visual heading level — explicit `level` input or inferred from the host tag. */
+    _resolvedLevel = computed(() => this.level() ?? inferTitleLevel(this._hostTagName), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedLevel" }] : /* istanbul ignore next */ []));
+    /** @protected The effective title text: bound `value`, internal editable value, or projected content. */
+    currentText = computed(() => {
+        const explicitValue = this.value();
+        if (explicitValue !== null && explicitValue !== undefined) {
+            return explicitValue;
+        }
+        if (this._usesInternalValue()) {
+            return this.internalValue();
+        }
+        return this._projectedText();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentText" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the projected `<ng-content>` should be shown (no value, not editable). */
+    showProjectedContent = computed(() => !this.editable() &&
+        !this._usesInternalValue() &&
+        (this.value() === null || this.value() === undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showProjectedContent" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the bound value text should be shown (not editable, not projected). */
+    showValueText = computed(() => !this.editable() && !this.showProjectedContent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueText" }] : /* istanbul ignore next */ []));
+    /** @protected Sizing text for the editable `<pre>` mirror (trailing newline keeps a blank line tall). */
+    editorMeasureText = computed(() => {
+        const text = this.currentText() || this.placeholder();
+        return text ? `${text}\n` : ' ';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorMeasureText" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the editable field is empty and a placeholder should be shown. */
+    editorShowsPlaceholder = computed(() => !this.currentText() && !!this.placeholder(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorShowsPlaceholder" }] : /* istanbul ignore next */ []));
+    /** @protected Current value bound to the editable `<textarea>`. */
+    textareaValue = computed(() => this.currentText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textareaValue" }] : /* istanbul ignore next */ []));
+    /** Internal text state used by editable mode and forms APIs. */
+    internalValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @private The lowercased tag name of the host element (e.g. `h2`, `div`). */
+    get _hostTagName() {
+        return this._hostElement.nativeElement.tagName.toLowerCase();
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const externalValue = this.value();
+            if (externalValue === null || externalValue === undefined) {
+                if (this._syncedFromExternalValue) {
+                    this.internalValue.set('');
+                    this._usesInternalValue.set(false);
+                }
+                this._syncedFromExternalValue = false;
+                return;
+            }
+            this._syncedFromExternalValue = true;
+            this.internalValue.set(externalValue);
+            this._usesInternalValue.set(true);
+        });
+        afterNextRender(() => {
+            this._hydrateProjectedText();
+        });
+    }
+    /** Handles interactive edits from the textarea overlay. */
+    onInput(event) {
+        const value = event.target.value;
+        this.internalValue.set(value);
+        this._usesInternalValue.set(true);
+        // The `value` model is the signal-forms transport: setting it propagates
+        // the edit to the bound field ([formField]/[formControl]/ngModel).
+        this.value.set(value);
+    }
+    /** Tracks focus state for form-field styling. */
+    onFocus() {
+        this.setFocused(true);
+    }
+    /** Tracks blur state for form-field styling and touched state. */
+    onBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    /** Whether the control holds a clearable value — Non-empty text present. */
+    hasValue = computed(() => this.internalValue().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @private Reads projected text after render and seeds the editable value from it when appropriate. */
+    _hydrateProjectedText() {
+        const projectedText = this._projectionElement()?.nativeElement.textContent?.trim() ?? '';
+        this._projectedText.set(projectedText);
+        if (this.editable() &&
+            !this._usesInternalValue() &&
+            (this.value() === null || this.value() === undefined) &&
+            projectedText) {
+            this.internalValue.set(projectedText);
+            this._usesInternalValue.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTitle, isStandalone: true, selector: "[mlvTitle]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-level": "_resolvedLevel()", "attr.role": "_isNativeHeading() ? null : \"heading\"", "attr.aria-level": "_isNativeHeading() ? null : _resolvedLevel()", "class.mlv-title--editable": "editable()", "class.mlv-title--disabled": "computedDisabled()", "class.mlv-title--focused": "focused()" }, classAttribute: "mlv-title" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvTitle),
+            },
+        ], viewQueries: [{ propertyName: "_projectionElement", first: true, predicate: ["projectionContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span\n  #projectionContent\n  class=\"mlv-title__projection\"\n  [class.mlv-title__projection--hidden]=\"!showProjectedContent()\"\n  [attr.aria-hidden]=\"showProjectedContent() ? null : 'true'\"\n>\n  <ng-content />\n</span>\n\n@if (showValueText()) {\n<span class=\"mlv-title__value\">{{ currentText() }}</span>\n} @if (editable()) {\n<span class=\"mlv-title__editor\">\n  <pre\n    class=\"mlv-title__pre\"\n    [class.mlv-title__pre--placeholder]=\"editorShowsPlaceholder()\"\n    aria-hidden=\"true\"\n  >\n{{ editorMeasureText() }}</pre\n  >\n  <textarea\n    class=\"mlv-title__textarea\"\n    rows=\"1\"\n    [value]=\"textareaValue()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"computedDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-required]=\"required() || null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n</span>\n}\n", styles: ["@layer mlv.components{.mlv-title{margin:0;color:var(--mlv-text-primary)}.mlv-title[data-level=\"1\"]{font-size:var(--mlv-typography-heading-h1-size);font-weight:var(--mlv-typography-heading-h1-weight);line-height:var(--mlv-typography-heading-h1-line-height);letter-spacing:var(--mlv-typography-heading-h1-letter-spacing)}.mlv-title[data-level=\"2\"]{font-size:var(--mlv-typography-heading-h2-size);font-weight:var(--mlv-typography-heading-h2-weight);line-height:var(--mlv-typography-heading-h2-line-height);letter-spacing:var(--mlv-typography-heading-h2-letter-spacing)}.mlv-title[data-level=\"3\"]{font-size:var(--mlv-typography-heading-h3-size);font-weight:var(--mlv-typography-heading-h3-weight);line-height:var(--mlv-typography-heading-h3-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"4\"]{font-size:var(--mlv-typography-heading-h4-size);font-weight:var(--mlv-typography-heading-h4-weight);line-height:var(--mlv-typography-heading-h4-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"5\"]{font-size:var(--mlv-typography-heading-h5-size);font-weight:var(--mlv-typography-heading-h5-weight);line-height:var(--mlv-typography-heading-h5-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"6\"]{font-size:var(--mlv-typography-heading-h6-size);font-weight:var(--mlv-typography-heading-h6-weight);line-height:var(--mlv-typography-heading-h6-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title--editable{display:block}.mlv-title__projection--hidden{display:none}.mlv-title__value,.mlv-title__projection,.mlv-title__editor,.mlv-title__pre,.mlv-title__textarea{font:inherit;letter-spacing:inherit;line-height:inherit}.mlv-title__value,.mlv-title__projection{white-space:pre-wrap;overflow-wrap:anywhere}.mlv-title__editor{display:grid;align-items:start}.mlv-title__pre,.mlv-title__textarea{grid-area:1/1;margin:0;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}.mlv-title__pre{pointer-events:none;color:var(--mlv-text-primary)}.mlv-title__pre--placeholder{color:var(--mlv-text-secondary)}.mlv-title__textarea{width:100%;min-height:1lh;padding:0;border:0;background:transparent;color:transparent;caret-color:var(--mlv-text-primary);border-radius:0;resize:none;overflow:hidden;outline:none;box-shadow:none;field-sizing:content;appearance:none;transition:outline-color var(--mlv-duration-slow) var(--mlv-ease-out),outline-offset var(--mlv-duration-slow) var(--mlv-ease-out)}.mlv-title__textarea::placeholder{color:var(--mlv-text-tertiary)}.mlv-title__textarea:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-title,.mlv-title *,.mlv-title:before,.mlv-title:after,[class^=mlv-title__],[class*=\" mlv-title__\"],[class^=mlv-title--],[class*=\" mlv-title--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTitle, decorators: [{
+            type: Component,
+            args: [{ selector: '[mlvTitle]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvTitle),
+                        },
+                    ], host: {
+                        class: 'mlv-title',
+                        '[attr.data-level]': '_resolvedLevel()',
+                        '[attr.role]': '_isNativeHeading() ? null : "heading"',
+                        '[attr.aria-level]': '_isNativeHeading() ? null : _resolvedLevel()',
+                        '[class.mlv-title--editable]': 'editable()',
+                        '[class.mlv-title--disabled]': 'computedDisabled()',
+                        '[class.mlv-title--focused]': 'focused()',
+                    }, template: "<span\n  #projectionContent\n  class=\"mlv-title__projection\"\n  [class.mlv-title__projection--hidden]=\"!showProjectedContent()\"\n  [attr.aria-hidden]=\"showProjectedContent() ? null : 'true'\"\n>\n  <ng-content />\n</span>\n\n@if (showValueText()) {\n<span class=\"mlv-title__value\">{{ currentText() }}</span>\n} @if (editable()) {\n<span class=\"mlv-title__editor\">\n  <pre\n    class=\"mlv-title__pre\"\n    [class.mlv-title__pre--placeholder]=\"editorShowsPlaceholder()\"\n    aria-hidden=\"true\"\n  >\n{{ editorMeasureText() }}</pre\n  >\n  <textarea\n    class=\"mlv-title__textarea\"\n    rows=\"1\"\n    [value]=\"textareaValue()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"computedDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-required]=\"required() || null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n</span>\n}\n", styles: ["@layer mlv.components{.mlv-title{margin:0;color:var(--mlv-text-primary)}.mlv-title[data-level=\"1\"]{font-size:var(--mlv-typography-heading-h1-size);font-weight:var(--mlv-typography-heading-h1-weight);line-height:var(--mlv-typography-heading-h1-line-height);letter-spacing:var(--mlv-typography-heading-h1-letter-spacing)}.mlv-title[data-level=\"2\"]{font-size:var(--mlv-typography-heading-h2-size);font-weight:var(--mlv-typography-heading-h2-weight);line-height:var(--mlv-typography-heading-h2-line-height);letter-spacing:var(--mlv-typography-heading-h2-letter-spacing)}.mlv-title[data-level=\"3\"]{font-size:var(--mlv-typography-heading-h3-size);font-weight:var(--mlv-typography-heading-h3-weight);line-height:var(--mlv-typography-heading-h3-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"4\"]{font-size:var(--mlv-typography-heading-h4-size);font-weight:var(--mlv-typography-heading-h4-weight);line-height:var(--mlv-typography-heading-h4-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"5\"]{font-size:var(--mlv-typography-heading-h5-size);font-weight:var(--mlv-typography-heading-h5-weight);line-height:var(--mlv-typography-heading-h5-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title[data-level=\"6\"]{font-size:var(--mlv-typography-heading-h6-size);font-weight:var(--mlv-typography-heading-h6-weight);line-height:var(--mlv-typography-heading-h6-line-height);letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-title--editable{display:block}.mlv-title__projection--hidden{display:none}.mlv-title__value,.mlv-title__projection,.mlv-title__editor,.mlv-title__pre,.mlv-title__textarea{font:inherit;letter-spacing:inherit;line-height:inherit}.mlv-title__value,.mlv-title__projection{white-space:pre-wrap;overflow-wrap:anywhere}.mlv-title__editor{display:grid;align-items:start}.mlv-title__pre,.mlv-title__textarea{grid-area:1/1;margin:0;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}.mlv-title__pre{pointer-events:none;color:var(--mlv-text-primary)}.mlv-title__pre--placeholder{color:var(--mlv-text-secondary)}.mlv-title__textarea{width:100%;min-height:1lh;padding:0;border:0;background:transparent;color:transparent;caret-color:var(--mlv-text-primary);border-radius:0;resize:none;overflow:hidden;outline:none;box-shadow:none;field-sizing:content;appearance:none;transition:outline-color var(--mlv-duration-slow) var(--mlv-ease-out),outline-offset var(--mlv-duration-slow) var(--mlv-ease-out)}.mlv-title__textarea::placeholder{color:var(--mlv-text-tertiary)}.mlv-title__textarea:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-title,.mlv-title *,.mlv-title:before,.mlv-title:after,[class^=mlv-title__],[class*=\" mlv-title__\"],[class^=mlv-title--],[class*=\" mlv-title--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _projectionElement: [{ type: i0.ViewChild, args: ['projectionContent', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvTitle };
+//# sourceMappingURL=malva-ui-core-title.mjs.map