@malva-ui/core 0.1.12

package/esm2022/time-picker/lib/time-picker-column/time-picker-column.js

@@ -0,0 +1,216 @@
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, input, output, untracked, viewChild, viewChildren, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Listbox, Option } from '@angular/aria/listbox';
+import { clamp } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * A single scrollable column for the time picker (hours, minutes, seconds).
+ *
+ * Renders a `<ul>` backed by `@angular/aria`'s headless `ngListbox`/`ngOption`
+ * pattern in **`focusMode="activedescendant"`** — focus stays on the `<ul>`
+ * container while `aria-activedescendant` tracks the active item. aria owns the
+ * roles (`listbox`/`option`), `aria-selected`, `aria-activedescendant`, roving
+ * `aria-activedescendant`, and all keyboard navigation (ArrowUp/Down wrap,
+ * Home/End, Enter/Space, and additive type-ahead).
+ *
+ * The CSS scroll-snap **drum-roll** UX is retained on top of aria: in
+ * `activedescendant` mode aria never moves DOM focus and never scrolls (its
+ * `scrollActiveItemIntoView()` is opt-in and is not called here), so it cannot
+ * fight the snap scrolling. Programmatic scroll (on external value change) and
+ * pointer/wheel scroll-to-select stay component-owned; on a scroll-driven change
+ * the aria active item is re-synced via {@link Listbox.gotoIndex} so a following
+ * Arrow key moves from the centered value rather than a stale one.
+ *
+ * @internal This component is not part of the public API and should not be used directly.
+ */
+export class MlvTimePickerColumn {
+    /** The accessible label for the column (e.g. "Hours", "Minutes"). */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The list of numeric values to display in the column. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** The currently selected value in this column. */
+    selectedValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    /** Whether the column is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emitted when the user selects a new value via scroll, click, or keyboard. */
+    valueChange = output();
+    /** @private Reference to the scrollable list element. */
+    _listRef = viewChild('listRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_listRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The component's own `@for`-rendered `<li>` option elements, in DOM
+     * order. Replaces `querySelectorAll('.mlv-time-picker-column__item')` over the
+     * host — the items belong to this component's template, so a signal view query
+     * is the correct mechanism.
+     */
+    _itemEls = viewChildren('itemRef', { ...(ngDevMode ? { debugName: "_itemEls" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * @private The aria `Listbox` instance on the `<ul>`. Used to keep aria's
+     * internal active item aligned with the drum-roll scroll position.
+     */
+    _ariaListbox = viewChild(Listbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaListbox" }] : /* istanbul ignore next */ []));
+    /** @private DestroyRef for cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @protected Sanitized label key for use in element IDs (spaces replaced with hyphens). */
+    _labelKey = computed(() => this.label().toLowerCase().replace(/\s+/g, '-'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelKey" }] : /* istanbul ignore next */ []));
+    /** @protected Formatted display items (zero-padded two digits). */
+    _displayItems = computed(() => this.items().map((v) => ({ value: v, label: String(v).padStart(2, '0') })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Bridges the scalar `selectedValue` input into aria's array-based
+     * (`V[]`) single-select value model. Single-select always holds ≤1 entry.
+     */
+    _ariaValue = computed(() => [this.selectedValue()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaValue" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Listbox tabindex. Forced to `-1` when disabled to preserve the
+     * historical contract; otherwise `undefined` so aria's pattern manages it
+     * (`0` in activedescendant mode — the container is the tab stop).
+     */
+    _listboxTabIndex = computed(() => this.disabled() ? -1 : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_listboxTabIndex" }] : /* istanbul ignore next */ []));
+    /** @private Timer ID for scroll debounce. */
+    _scrollTimer = null;
+    constructor() {
+        // Sync the drum scroll AND aria's active item when selectedValue changes
+        // externally (forms value write, mode switch). gotoIndex only moves the active
+        // descendant (no selection), so it never re-emits valueChange. Without it,
+        // aria's active item would drift from the centered value once the user has
+        // interacted (setDefaultState no longer re-syncs post-interaction).
+        effect(() => {
+            const items = this.items();
+            const selected = this.selectedValue();
+            const idx = items.indexOf(selected);
+            const newIdx = idx >= 0 ? idx : 0;
+            untracked(() => {
+                this._ariaListbox()?.gotoIndex(newIdx);
+                this._scrollToIndex(newIdx, true);
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            if (this._scrollTimer)
+                clearTimeout(this._scrollTimer);
+        });
+    }
+    ngAfterViewInit() {
+        const items = this.items();
+        const idx = items.indexOf(this.selectedValue());
+        const startIdx = idx >= 0 ? idx : 0;
+        // Seed aria's active item to the selected value now that the options are
+        // registered. aria's own `setDefaultState` is defeated once the popup's
+        // open handler focuses the list (focusin → hasBeenInteracted), so we can't
+        // rely on it — without this, the active item stays `undefined` and the
+        // first Arrow key navigates from index -1.
+        this._ariaListbox()?.gotoIndex(startIdx);
+        this._scrollToIndex(startIdx, false);
+    }
+    /**
+     * Focus the column's listbox element.
+     * Used by the parent component for inter-column keyboard navigation.
+     */
+    focusList() {
+        this._listRef()?.nativeElement.focus();
+    }
+    /**
+     * The column's scrollable `<ul>` listbox element, or `null` before view init.
+     * Exposed so the parent time picker can identify which column currently holds
+     * focus (comparing against `document.activeElement`) when moving focus between
+     * columns, without reaching into child DOM by class name.
+     */
+    get listElement() {
+        return this._listRef()?.nativeElement ?? null;
+    }
+    /**
+     * @protected Bridge aria's array `valueChange` back to the scalar output.
+     * Guards against no-op echoes so the parent form control is only touched on
+     * genuine changes.
+     */
+    _onAriaValueChange(values) {
+        if (this.disabled())
+            return;
+        const next = values[0];
+        if (next === undefined)
+            return;
+        if (next !== this.selectedValue()) {
+            this.valueChange.emit(next);
+        }
+    }
+    /**
+     * @protected Handle scroll events — debounced to avoid fighting with CSS
+     * scroll-snap during large swipes. aria attaches no scroll listener of its
+     * own, so this remains the sole owner of scroll-driven selection.
+     */
+    _onScroll() {
+        if (this.disabled())
+            return;
+        if (this._scrollTimer)
+            clearTimeout(this._scrollTimer);
+        this._scrollTimer = setTimeout(() => {
+            this._syncIndexFromScroll();
+        }, 150);
+    }
+    /**
+     * @private Read the current scroll position and update the selected value.
+     * Also re-aligns aria's active item so a subsequent Arrow key moves from the
+     * centered value.
+     */
+    _syncIndexFromScroll() {
+        const listEl = this._listRef()?.nativeElement;
+        if (!listEl)
+            return;
+        const items = this._itemEls();
+        if (!items.length)
+            return;
+        const itemHeight = items[0].nativeElement.offsetHeight;
+        if (itemHeight === 0)
+            return;
+        const scrollTop = listEl.scrollTop;
+        const closestIndex = Math.round(scrollTop / itemHeight);
+        const clampedIndex = clamp(closestIndex, 0, this.items().length - 1);
+        const newValue = this.items()[clampedIndex];
+        if (newValue !== this.selectedValue()) {
+            // Keep aria's active item aligned with the scrolled position first, then
+            // emit — selection flows back through selectedValue → _ariaValue.
+            this._ariaListbox()?.gotoIndex(clampedIndex);
+            this.valueChange.emit(newValue);
+        }
+    }
+    /**
+     * @private Scroll the list to bring item at the given index into view.
+     * @param index - The index to scroll to.
+     * @param smooth - Whether to use smooth scroll behavior.
+     */
+    _scrollToIndex(index, smooth) {
+        const listEl = this._listRef()?.nativeElement;
+        if (!listEl)
+            return;
+        const targetItem = this._itemEls()[index]?.nativeElement;
+        if (!targetItem)
+            return;
+        const itemHeight = targetItem.offsetHeight;
+        const scrollTop = index * itemHeight;
+        if (typeof listEl.scrollTo === 'function') {
+            listEl.scrollTo({
+                top: scrollTop,
+                behavior: smooth ? 'smooth' : 'instant',
+            });
+        }
+        else {
+            listEl.scrollTop = scrollTop;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePickerColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTimePickerColumn, isStandalone: true, selector: "mlv-time-picker-column", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "mlv-time-picker-column" }, viewQueries: [{ propertyName: "_listRef", first: true, predicate: ["listRef"], descendants: true, isSignal: true }, { propertyName: "_itemEls", predicate: ["itemRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_ariaListbox", first: true, predicate: Listbox, descendants: true, isSignal: true }], ngImport: i0, template: "<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", styles: [".mlv-time-picker-column{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column *{box-sizing:border-box}.mlv-time-picker-column{display:flex;flex-direction:column;align-items:center;width:var(--mlv-tp-column-width, 3.5rem)}.mlv-time-picker-column__track{position:relative;width:100%;height:var(--mlv-tp-track-height, calc(var(--mlv-tp-item-height, 2.25rem) * 5));overflow:hidden}.mlv-time-picker-column__track:before{content:\"\";position:absolute;inset-inline:.25rem;top:calc(var(--mlv-tp-item-height, 2.25rem) * 2);height:var(--mlv-tp-item-height, 2.25rem);background-color:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-s);pointer-events:none;z-index:0}.mlv-time-picker-column__track{mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%)}.mlv-time-picker-column__list{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__list *{box-sizing:border-box}.mlv-time-picker-column__list{list-style:none;width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);position:relative;z-index:1;padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);scrollbar-width:none}.mlv-time-picker-column__list::-webkit-scrollbar{display:none}.mlv-time-picker-column__list:focus-visible{outline:var(--mlv-stroke-width, 2px) solid var(--mlv-border-focus);outline-offset:-.125rem;border-radius:var(--mlv-radius-s)}.mlv-time-picker-column__item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__item *{box-sizing:border-box}.mlv-time-picker-column__item{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-item-height, 2.25rem);width:100%;scroll-snap-align:start;cursor:pointer;color:var(--mlv-text-tertiary);font-weight:var(--mlv-font-weight-normal);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-time-picker-column__item--selected{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-semibold)}.mlv-time-picker-column__item:hover:not(.mlv-time-picker-column__item--selected){color:var(--mlv-text-secondary)}\n"], dependencies: [{ kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePickerColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-time-picker-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Listbox, Option], host: {
+                        class: 'mlv-time-picker-column',
+                    }, template: "<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", styles: [".mlv-time-picker-column{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column *{box-sizing:border-box}.mlv-time-picker-column{display:flex;flex-direction:column;align-items:center;width:var(--mlv-tp-column-width, 3.5rem)}.mlv-time-picker-column__track{position:relative;width:100%;height:var(--mlv-tp-track-height, calc(var(--mlv-tp-item-height, 2.25rem) * 5));overflow:hidden}.mlv-time-picker-column__track:before{content:\"\";position:absolute;inset-inline:.25rem;top:calc(var(--mlv-tp-item-height, 2.25rem) * 2);height:var(--mlv-tp-item-height, 2.25rem);background-color:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-s);pointer-events:none;z-index:0}.mlv-time-picker-column__track{mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%)}.mlv-time-picker-column__list{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__list *{box-sizing:border-box}.mlv-time-picker-column__list{list-style:none;width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);position:relative;z-index:1;padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);scrollbar-width:none}.mlv-time-picker-column__list::-webkit-scrollbar{display:none}.mlv-time-picker-column__list:focus-visible{outline:var(--mlv-stroke-width, 2px) solid var(--mlv-border-focus);outline-offset:-.125rem;border-radius:var(--mlv-radius-s)}.mlv-time-picker-column__item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__item *{box-sizing:border-box}.mlv-time-picker-column__item{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-item-height, 2.25rem);width:100%;scroll-snap-align:start;cursor:pointer;color:var(--mlv-text-tertiary);font-weight:var(--mlv-font-weight-normal);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-time-picker-column__item--selected{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-semibold)}.mlv-time-picker-column__item:hover:not(.mlv-time-picker-column__item--selected){color:var(--mlv-text-secondary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], _listRef: [{ type: i0.ViewChild, args: ['listRef', { isSignal: true }] }], _itemEls: [{ type: i0.ViewChildren, args: ['itemRef', { ...{ read: ElementRef }, isSignal: true }] }], _ariaListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }] } });
+//# sourceMappingURL=time-picker-column.js.map

package/esm2022/time-picker/lib/time-picker-column/time-picker-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-column.js","sourceRoot":"","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"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,SAAS,EACT,YAAY,EACZ,iBAAiB,GAElB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;;AAE5C;;;;;;;;;;;;;;;;;;;GAmBG;AAYH,MAAM,OAAO,mBAAmB;IAC9B,qEAAqE;IAC5D,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU,CAAC;IAE1C,2DAA2D;IAClD,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAY,CAAC;IAE5C,mDAAmD;IAC1C,aAAa,GAAG,KAAK,CAAC,QAAQ;sFAAU,CAAC;IAElD,sCAAsC;IAC7B,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,gFAAgF;IACvE,WAAW,GAAG,MAAM,EAAU,CAAC;IAExC,yDAAyD;IACxC,QAAQ,GACvB,SAAS,CAA+B,SAAS;iFAAC,CAAC;IAErD;;;;;OAKG;IACc,QAAQ,GAAG,YAAY,CAAC,SAAS,gFAAI,IAAI,EAAE,UAAU,GAAG,CAAC;IAE1E;;;OAGG;IACc,YAAY,GAAG,SAAS,CAAC,OAAO;qFAAC,CAAC;IAEnD,uCAAuC;IACtB,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAElD,4FAA4F;IACzE,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;kFAChD,CAAC;IAEF,mEAAmE;IAChD,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/C,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;sFAC3E,CAAC;IAEF;;;OAGG;IACgB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;mFAAC,CAAC;IAEvE;;;;OAIG;IACgB,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClD,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;yFACjC,CAAC;IAEF,6CAA6C;IACrC,YAAY,GAAyC,IAAI,CAAC;IAElE;QACE,yEAAyE;QACzE,+EAA+E;QAC/E,2EAA2E;QAC3E,2EAA2E;QAC3E,oEAAoE;QACpE,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACpC,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,SAAS,CAAC,GAAG,EAAE;gBACb,IAAI,CAAC,YAAY,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;gBACvC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACpC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,YAAY;gBAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpC,yEAAyE;QACzE,wEAAwE;QACxE,2EAA2E;QAC3E,uEAAuE;QACvE,2CAA2C;QAC3C,IAAI,CAAC,YAAY,EAAE,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,SAAS;QACP,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;IACzC,CAAC;IAED;;;;;OAKG;IACH,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,IAAI,IAAI,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACO,kBAAkB,CAAC,MAAgB;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACvB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO;QAC/B,IAAI,IAAI,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;OAIG;IACO,SAAS;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,IAAI,CAAC,YAAY;YAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;YAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED;;;;OAIG;IACK,oBAAoB;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC;QAC9C,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;QACvD,IAAI,UAAU,KAAK,CAAC;YAAE,OAAO;QAE7B,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;QACxD,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC;QAE5C,IAAI,QAAQ,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACtC,yEAAyE;YACzE,kEAAkE;YAClE,IAAI,CAAC,YAAY,EAAE,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,cAAc,CAAC,KAAa,EAAE,MAAe;QACnD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC;QAC9C,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;QACzD,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,CAAC;QAC3C,MAAM,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;QAErC,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YAC1C,MAAM,CAAC,QAAQ,CAAC;gBACd,GAAG,EAAE,SAAS;gBACd,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aACxC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;QAC/B,CAAC;IACH,CAAC;uGAtMU,mBAAmB;2FAAnB,mBAAmB,k2BA4B8B,UAAU,4EAM5B,OAAO,gECtFnD,g3BAgCA,2hFDeY,OAAO,wQAAE,MAAM;;2FAKd,mBAAmB;kBAX/B,SAAS;+BACE,wBAAwB,iBAGnB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC,CAAC,OAAO,EAAE,MAAM,CAAC,QACpB;wBACJ,KAAK,EAAE,wBAAwB;qBAChC;shBAsByC,SAAS,qEAQV,SAAS,OAAE,EAAE,IAAI,EAAE,UAAU,EAAE,wFAM9B,OAAO","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"]}

package/esm2022/time-picker/malva-ui-core-time-picker.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-time-picker.js.map

package/esm2022/time-picker/malva-ui-core-time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-time-picker.js","sourceRoot":"","sources":["../../../../../libs/core/time-picker/src/malva-ui-core-time-picker.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/timeline/index.js

@@ -0,0 +1,6 @@
+export * from './lib/timeline/timeline';
+export * from './lib/timeline/timeline-item';
+export * from './lib/timeline/timeline-item-icon';
+export * from './lib/timeline/timeline-item-meta';
+export * from './lib/timeline/timeline.types';
+//# sourceMappingURL=index.js.map

package/esm2022/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/timeline/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './lib/timeline/timeline';\nexport * from './lib/timeline/timeline-item';\nexport * from './lib/timeline/timeline-item-icon';\nexport * from './lib/timeline/timeline-item-meta';\nexport * from './lib/timeline/timeline.types';\n"]}

package/esm2022/timeline/lib/timeline/timeline-item-icon.js

@@ -0,0 +1,31 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ */
+export 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]',
+                }]
+        }] });
+//# sourceMappingURL=timeline-item-icon.js.map

package/esm2022/timeline/lib/timeline/timeline-item-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item-icon.js","sourceRoot":"","sources":["../../../../../../../libs/core/timeline/src/lib/timeline/timeline-item-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;;;;;;;;;;;;;;GAeG;AAIH,MAAM,OAAO,mBAAmB;IAC9B,iDAAiD;IACxC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGAFhC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAH/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;iBAClC","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"]}

package/esm2022/timeline/lib/timeline/timeline-item-meta.js

@@ -0,0 +1,31 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ */
+export 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]',
+                }]
+        }] });
+//# sourceMappingURL=timeline-item-meta.js.map

package/esm2022/timeline/lib/timeline/timeline-item-meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item-meta.js","sourceRoot":"","sources":["../../../../../../../libs/core/timeline/src/lib/timeline/timeline-item-meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;;;;;;;;;;;;;;GAeG;AAIH,MAAM,OAAO,mBAAmB;IAC9B,iDAAiD;IACxC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGAFhC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAH/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;iBAClC","sourcesContent":["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"]}

package/esm2022/timeline/lib/timeline/timeline-item.js

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, contentChild, input, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvTimelineItemIcon } from './timeline-item-icon';
+import { MlvTimelineItemMeta } from './timeline-item-meta';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ */
+export 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 class=\"mlv-timeline-item__col mlv-timeline-item__col--left\">\n  @if (direction() === 'left') {\n  <div class=\"mlv-timeline-item__content mlv-timeline-item__content--left\">\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  }\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\n<div class=\"mlv-timeline-item__col mlv-timeline-item__col--right\">\n  @if (direction() === 'right') {\n  <div class=\"mlv-timeline-item__content\">\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  }\n</div>\n", styles: [".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{min-width:0}.mlv-timeline-item__col--left{text-align:right}.mlv-timeline-item__col--right{text-align:left}.mlv-timeline-item__spine{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:50%;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:right}.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 class=\"mlv-timeline-item__col mlv-timeline-item__col--left\">\n  @if (direction() === 'left') {\n  <div class=\"mlv-timeline-item__content mlv-timeline-item__content--left\">\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  }\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\n<div class=\"mlv-timeline-item__col mlv-timeline-item__col--right\">\n  @if (direction() === 'right') {\n  <div class=\"mlv-timeline-item__content\">\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  }\n</div>\n", styles: [".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{min-width:0}.mlv-timeline-item__col--left{text-align:right}.mlv-timeline-item__col--right{text-align:left}.mlv-timeline-item__spine{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:50%;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:right}.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 }] }] } });
+//# sourceMappingURL=timeline-item.js.map

package/esm2022/timeline/lib/timeline/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","sourceRoot":"","sources":["../../../../../../../libs/core/timeline/src/lib/timeline/timeline-item.ts","../../../../../../../libs/core/timeline/src/lib/timeline/timeline-item.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;;AAM3D;;;;;;;;;;;;;;;;;;GAkBG;AAeH,MAAM,OAAO,eAAe;IAC1B,0DAA0D;IACjD,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU,CAAC;IAE1C;;;;OAIG;IACM,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC,CAAC;IAEvC;;;OAGG;IACM,IAAI,GAAG,KAAK,CAAsB,SAAS;6EAAC,CAAC;IAEtD;;;;;;OAMG;IACM,SAAS,GAAG,KAAK,CAA2B,OAAO;kFAAC,CAAC;IAE9D,8EAA8E;IAC3D,QAAQ,GAAG,YAAY,CAAC,mBAAmB;iFAAC,CAAC;IAEhE,iFAAiF;IAC9D,QAAQ,GAAG,YAAY,CAAC,mBAAmB;iFAAC,CAAC;uGA9BrD,eAAe;2FAAf,eAAe,00BA2BiB,mBAAmB,2FAGnB,mBAAmB,gEC9EhE,2sDAkDA,ipFDVY,gBAAgB;;2FAQf,eAAe;kBAd3B,SAAS;+BACE,mBAAmB,iBAGd,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC,CAAC,gBAAgB,CAAC,QACrB;wBACJ,KAAK,EAAE,mBAAmB;wBAC1B,IAAI,EAAE,UAAU;wBAChB,SAAS,EAAE,gCAAgC;wBAC3C,2CAA2C,EAAE,wBAAwB;qBACtE;kdA6B0C,mBAAmB,0FAGnB,mBAAmB","sourcesContent":["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 class=\"mlv-timeline-item__col mlv-timeline-item__col--left\">\n  @if (direction() === 'left') {\n  <div class=\"mlv-timeline-item__content mlv-timeline-item__content--left\">\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  }\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\n<div class=\"mlv-timeline-item__col mlv-timeline-item__col--right\">\n  @if (direction() === 'right') {\n  <div class=\"mlv-timeline-item__content\">\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  }\n</div>\n"]}

package/esm2022/timeline/lib/timeline/timeline.js

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+export class MlvTimeline {
+    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: "14.0.0", version: "22.0.7", type: MlvTimeline, isStandalone: true, selector: "mlv-timeline", host: { attributes: { "role": "list" }, classAttribute: "mlv-timeline" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".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}\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',
+                    }, styles: [".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}\n"] }]
+        }] });
+//# sourceMappingURL=timeline.js.map

package/esm2022/timeline/lib/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../../../../libs/core/timeline/src/lib/timeline/timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,GAClB,MAAM,eAAe,CAAC;;AAEvB;;;;;;;;;;;;;;;;;;;;;GAqBG;AAYH,MAAM,OAAO,WAAW;uGAAX,WAAW;2FAAX,WAAW,kJATZ,gBAAgB;;2FASf,WAAW;kBAXvB,SAAS;+BACE,cAAc,YACd,gBAAgB,iBAEX,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,cAAc;wBACrB,IAAI,EAAE,MAAM;qBACb","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\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 * @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  },\n})\nexport class MlvTimeline {}\n"]}

package/esm2022/timeline/lib/timeline/timeline.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=timeline.types.js.map

package/esm2022/timeline/lib/timeline/timeline.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.types.js","sourceRoot":"","sources":["../../../../../../../libs/core/timeline/src/lib/timeline/timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MlvTone } from '@malva-ui/cdk/utils';\n\n/**\n * Semantic tone for a timeline item.\n * Drives the icon node accent color and status indicator.\n *\n * Extends the shared {@link MlvTone} vocabulary\n * (`'info' | 'success' | 'warning' | 'danger'`) with:\n *\n * - `'default'` — neutral/gray (no semantic meaning)\n */\nexport type MlvTimelineItemTone = MlvTone | 'default';\n\n/**\n * MlvLayout direction for a timeline item.\n *\n * - `'right'` — node on the left, content on the right (default)\n * - `'left'` — node on the right, content on the left\n */\nexport type MlvTimelineItemDirection = 'left' | 'right';\n"]}

package/esm2022/timeline/malva-ui-core-timeline.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-timeline.js.map

package/esm2022/timeline/malva-ui-core-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-timeline.js","sourceRoot":"","sources":["../../../../../libs/core/timeline/src/malva-ui-core-timeline.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/title/index.js

@@ -0,0 +1,2 @@
+export * from './lib/title/title';
+//# sourceMappingURL=index.js.map

package/esm2022/title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/title/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './lib/title/title';\n"]}