@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-date-range-picker.mjs

@@ -0,0 +1,276 @@
+import * as i0 from '@angular/core';
+import { model, inject, signal, input, viewChild, DOCUMENT, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { MlvTabbableElementService } from '@malva-ui/cdk/accessibility';
+import { MLV_DATE_ADAPTER, MlvNativeDateAdapter, MlvCalendar } from '@malva-ui/core/calendar';
+import { MlvPopup, MlvPopupContent, MlvPopupContainer } from '@malva-ui/core/popup';
+import { MlvSignalFormControlBase, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvDescription, MlvLabel, MlvHint, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { LucideCalendarDays } from '@lucide/angular';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { MlvButton } from '@malva-ui/core/button';
+import { MLV_DATE_RANGE_PICKER_I18N } from '@malva-ui/i18n';
+
+/** Accepts signal-form range constraints without changing the public date-boundary API. */
+function coerceBoundaryDate(value, edge) {
+    if (value == null)
+        return null;
+    if (typeof value === 'object' && 'start' in value && 'end' in value) {
+        return value[edge];
+    }
+    return value;
+}
+class MlvDateRangePicker extends MlvSignalFormControlBase {
+    /** The committed date range used by all Angular forms APIs. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @private The active date adapter — a provided `MLV_DATE_ADAPTER`, or the native fallback. */
+    _dateAdapter = inject(MLV_DATE_ADAPTER, {
+        optional: true,
+    }) ??
+        inject(MlvNativeDateAdapter);
+    /**
+     * The pending range being assembled during selection.
+     * Committed to the form control only when the user clicks Apply.
+     */
+    _pendingRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pendingRange" }] : /* istanbul ignore next */ []));
+    /**
+     * The last committed range value (reflects the form control value).
+     */
+    rangeValue = this.value;
+    /** Custom placeholder override. Falls back to the i18n-provided placeholder. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date, passed to both calendars. */
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => coerceBoundaryDate(value, 'start') });
+    /** Maximum selectable date, passed to both calendars. */
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => coerceBoundaryDate(value, 'end') });
+    /** Optional callback for disabling arbitrary dates, passed to both calendars. */
+    disabledDates = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_DATE_RANGE_PICKER_I18N);
+    /**
+     * @private Reference to the trigger element, used to restore focus when the
+     * popup closes. It is declared in this component's own template, so a signal
+     * view query is the correct mechanism (was a host `querySelector`).
+     */
+    _triggerRef = viewChild('triggerRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerRef" }] : /* istanbul ignore next */ []));
+    /** @private Locates the first tabbable element inside the popup panel. */
+    _tabbable = inject(MlvTabbableElementService);
+    /** @private Document ref for locating the rendered popup panel by id. */
+    _document = inject(DOCUMENT);
+    /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether the picker popup is currently open.
+     */
+    _isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether a range selection is in progress (start chosen, awaiting end click).
+     */
+    _isSelecting = computed(() => !!this._pendingRange()?.start && !this._pendingRange()?.end, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isSelecting" }] : /* istanbul ignore next */ []));
+    /**
+     * Override focused to also be true when the calendar popup is open.
+     */
+    focused = computed(() => this._focused() || this._isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Unique ID for the optional message element used by aria-describedby. */
+    /** Unique ID for the popup panel element used by aria-controls. */
+    panelId = computed(() => `${this.id()}-panel`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    /**
+     * The initial date for the left (earlier-month) calendar panel.
+     * Defaults to today when no range is selected.
+     */
+    leftCalendarActiveDate = computed(() => {
+        const pending = this._pendingRange();
+        const val = this.rangeValue();
+        const anchor = pending?.start ?? val?.start ?? null;
+        return anchor ? this._dateAdapter.clone(anchor) : this._dateAdapter.today();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftCalendarActiveDate" }] : /* istanbul ignore next */ []));
+    /**
+     * The initial date for the right (later-month) calendar panel.
+     * Always one month ahead of the left panel's month.
+     */
+    rightCalendarActiveDate = computed(() => {
+        return this._dateAdapter.addCalendarMonths(this.leftCalendarActiveDate(), 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightCalendarActiveDate" }] : /* istanbul ignore next */ []));
+    /**
+     * The formatted start date display string.
+     * Returns an empty string when no start date is selected.
+     */
+    get startDisplayValue() {
+        const val = this.rangeValue();
+        if (!val?.start)
+            return '';
+        return this._formatDate(val.start);
+    }
+    /**
+     * The formatted end date display string.
+     * Returns an empty string when no end date is selected.
+     */
+    get endDisplayValue() {
+        const val = this.rangeValue();
+        if (!val?.end)
+            return '';
+        return this._formatDate(val.end);
+    }
+    /**
+     * Whether the Apply button should be enabled.
+     * Requires both start and end dates to be set in the pending range.
+     */
+    canApply = computed(() => !!this._pendingRange()?.start && !!this._pendingRange()?.end, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canApply" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the clear button should be shown.
+     */
+    hasClearableValue = computed(() => this.clearable() &&
+        !this.computedDisabled() &&
+        (!!this.rangeValue()?.start || !!this.rangeValue()?.end), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasClearableValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Toggles the popup open/closed.
+     * No-op when the picker is disabled.
+     */
+    toggleDropdown() {
+        if (this.computedDisabled())
+            return;
+        const wasOpen = this._isOpen();
+        if (wasOpen) {
+            this.closeDropdown();
+        }
+        else {
+            // Initialize pending range from committed value when opening
+            const val = this.rangeValue();
+            this._pendingRange.set(val ? { start: val.start, end: val.end } : null);
+            this._isOpen.set(true);
+        }
+    }
+    /**
+     * @protected Moves focus into the popup panel when it opens.
+     * Focuses the first tabbable element, falling back to the panel container
+     * (which carries `tabindex="-1"`) so focus always lands inside the modal.
+     */
+    _onPanelOpened() {
+        const panel = this._document.getElementById(this.panelId());
+        if (!panel)
+            return;
+        const first = this._tabbable.getTabbableElement(panel, false, true);
+        (first ?? panel).focus();
+    }
+    /**
+     * @protected Handles popup close: clears the focused state and returns focus
+     * to the trigger, matching the overlay focus-restore pattern.
+     */
+    _onPanelClosed() {
+        this.setFocused(false);
+        this._markTouched();
+        this._triggerRef()?.nativeElement.focus();
+    }
+    /** @protected Marks the control touched when its trigger loses focus. */
+    _onTriggerBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    /**
+     * Closes the popup and resets the pending selection to the committed value.
+     */
+    closeDropdown() {
+        this._isOpen.set(false);
+        // Reset pending range to committed value
+        const val = this.rangeValue();
+        this._pendingRange.set(val ? { start: val.start, end: val.end } : null);
+    }
+    /**
+     * Handles range value changes from either calendar.
+     * Updates the pending (uncommitted) range.
+     *
+     * @param range - The updated range value from the calendar.
+     */
+    onRangeChanged(range) {
+        this._pendingRange.set(range);
+    }
+    /**
+     * Applies the pending range selection and closes the popup.
+     * Commits the value to the form control.
+     */
+    applySelection() {
+        const pending = this._pendingRange();
+        const newValue = pending?.start
+            ? { start: pending.start, end: pending.end }
+            : null;
+        this.rangeValue.set(newValue);
+        this._isOpen.set(false);
+    }
+    /**
+     * Clears the selected range and resets the picker.
+     */
+    clearSelection() {
+        this.rangeValue.set(null);
+        this._pendingRange.set(null);
+    }
+    /** Whether the control holds a clearable value — A committed range is set. */
+    hasValue = computed(() => this.rangeValue() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Formats a single date for display.
+     */
+    _formatDate(date) {
+        return this._dateAdapter.format(date, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDateRangePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDateRangePicker, isStandalone: true, selector: "mlv-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "\"mlv-date-range-picker--state-\" + resolvedState()", "class.mlv-date-range-picker--disabled": "computedDisabled()", "class.mlv-date-range-picker--focused": "focused()", "class.mlv-date-range-picker--open": "_isOpen()", "class.mlv-date-range-picker--selecting": "_isSelecting()" }, classAttribute: "mlv-date-range-picker" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvDateRangePicker),
+            },
+        ], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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-date-range-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-date-range-picker__trigger\"\n        [id]=\"id()\"\n        role=\"button\"\n        [attr.aria-expanded]=\"_isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-disabled]=\"computedDisabled() || null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"toggleDropdown()\"\n        (keydown.enter)=\"!computedDisabled() && toggleDropdown()\"\n        (keydown.space)=\"!computedDisabled() && toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"closeDropdown()\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-date-range-picker__trigger-icon\" aria-hidden=\"true\">\n          <svg lucideCalendarDays [size]=\"18\" />\n        </span>\n\n        @if (startDisplayValue || endDisplayValue) {\n        <span class=\"mlv-date-range-picker__value\">\n          <span class=\"mlv-date-range-picker__value-start\"\n            >{{ startDisplayValue || '...' }}</span\n          >\n          <span class=\"mlv-date-range-picker__separator\" aria-hidden=\"true\"\n            >\u2014</span\n          >\n          <span class=\"mlv-date-range-picker__value-end\"\n            >{{ endDisplayValue || '...' }}</span\n          >\n        </span>\n        } @else {\n        <span class=\"mlv-date-range-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n      </div>\n\n      <mlv-popup\n        #rangePopup\n        [(opened)]=\"_isOpen\"\n        [hasShadow]=\"true\"\n        [position]=\"['bottom-start', 'top-start', 'bottom-end', 'top-end']\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _i18n().selectDateRange\"\n        [ariaLabel]=\"_i18n().selectDateRange\"\n        (afterOpened)=\"_onPanelOpened()\"\n        (afterClosed)=\"_onPanelClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            class=\"mlv-date-range-picker__panel\"\n            [id]=\"panelId()\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            [cdkTrapFocus]=\"!rangePopup.isFullscreen()\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"_i18n().selectDateRange\"\n            (keydown.escape)=\"closeDropdown()\"\n          >\n            <div class=\"mlv-date-range-picker__calendars\">\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().startMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n\n              <div\n                class=\"mlv-date-range-picker__divider\"\n                aria-hidden=\"true\"\n              ></div>\n\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().endMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n            </div>\n\n            <div class=\"mlv-date-range-picker__footer\">\n              <button\n                mlvButton\n                variant=\"transparent\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__clear-btn\"\n                (click)=\"clearSelection()\"\n                [attr.aria-label]=\"_i18n().clearDateRange\"\n              >\n                Clear\n              </button>\n\n              <button\n                mlvButton\n                variant=\"primary\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__apply-btn\"\n                [attr.disabled]=\"canApply() ? null : true\"\n                (click)=\"applySelection()\"\n                [attr.aria-label]=\"_i18n().applyDateRange\"\n              >\n                Apply\n              </button>\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", styles: ["@layer mlv.components{.mlv-date-range-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-date-range-picker *{box-sizing:border-box}.mlv-date-range-picker{display:block}.mlv-date-range-picker__popup-container{width:100%}.mlv-date-range-picker__trigger{display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;outline:none;min-height:1.5rem;border-radius:var(--mlv-radius-s)}.mlv-date-range-picker__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-date-range-picker__trigger-icon{display:flex;align-items:center;color:var(--mlv-text-secondary);line-height:1;flex-shrink:0}.mlv-date-range-picker__value{display:flex;align-items:center;gap:.375rem;flex:1;color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-date-range-picker__value-start,.mlv-date-range-picker__value-end{white-space:nowrap}.mlv-date-range-picker__separator{color:var(--mlv-text-secondary);flex-shrink:0}.mlv-date-range-picker__placeholder{flex:1;color:var(--mlv-text-secondary)}.mlv-date-range-picker__panel{display:flex;flex-direction:column;background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-l);box-shadow:var(--mlv-shadow-floating);overflow:hidden}.mlv-date-range-picker__calendars{display:flex;align-items:flex-start;padding:1rem;gap:0}.mlv-date-range-picker__calendar{flex:0 0 auto}.mlv-date-range-picker__divider{width:1px;align-self:stretch;background-color:var(--mlv-border-subtle);margin:0 1rem;flex-shrink:0}.mlv-date-range-picker__footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);background-color:var(--mlv-background-base)}.mlv-date-range-picker__clear-btn{margin-inline-end:auto}.mlv-date-range-picker--state-success .mlv-date-range-picker__trigger{color:var(--mlv-text-positive)}.mlv-date-range-picker--state-warning .mlv-date-range-picker__trigger{color:var(--mlv-text-warning)}.mlv-date-range-picker--state-error .mlv-date-range-picker__trigger{color:var(--mlv-text-negative)}.mlv-date-range-picker--state-info .mlv-date-range-picker__trigger{color:var(--mlv-text-info)}.mlv-date-range-picker--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-date-range-picker--disabled .mlv-date-range-picker__trigger{cursor:not-allowed}.mlv-date-range-picker--selecting .mlv-date-range-picker__trigger-icon{color:var(--mlv-text-action)}}\n"], dependencies: [{ kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "component", type: MlvCalendar, selector: "mlv-calendar", inputs: ["value", "rangeValue", "min", "max", "disabledDates", "startView", "firstDayOfWeek", "range", "embedded", "activeDate"], outputs: ["valueChange", "rangeValueChange", "activeDateChange"] }, { kind: "component", type: LucideCalendarDays, selector: "svg[lucideCalendarDays]" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDateRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-date-range-picker', imports: [
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupContainer,
+                        MlvCalendar,
+                        LucideCalendarDays,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvHint,
+                        MlvMessage,
+                        MlvButton,
+                        A11yModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvDateRangePicker),
+                        },
+                    ], host: {
+                        class: 'mlv-date-range-picker',
+                        '[class]': '"mlv-date-range-picker--state-" + resolvedState()',
+                        '[class.mlv-date-range-picker--disabled]': 'computedDisabled()',
+                        '[class.mlv-date-range-picker--focused]': 'focused()',
+                        '[class.mlv-date-range-picker--open]': '_isOpen()',
+                        '[class.mlv-date-range-picker--selecting]': '_isSelecting()',
+                    }, template: "<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-date-range-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-date-range-picker__trigger\"\n        [id]=\"id()\"\n        role=\"button\"\n        [attr.aria-expanded]=\"_isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-disabled]=\"computedDisabled() || null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"toggleDropdown()\"\n        (keydown.enter)=\"!computedDisabled() && toggleDropdown()\"\n        (keydown.space)=\"!computedDisabled() && toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"closeDropdown()\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-date-range-picker__trigger-icon\" aria-hidden=\"true\">\n          <svg lucideCalendarDays [size]=\"18\" />\n        </span>\n\n        @if (startDisplayValue || endDisplayValue) {\n        <span class=\"mlv-date-range-picker__value\">\n          <span class=\"mlv-date-range-picker__value-start\"\n            >{{ startDisplayValue || '...' }}</span\n          >\n          <span class=\"mlv-date-range-picker__separator\" aria-hidden=\"true\"\n            >\u2014</span\n          >\n          <span class=\"mlv-date-range-picker__value-end\"\n            >{{ endDisplayValue || '...' }}</span\n          >\n        </span>\n        } @else {\n        <span class=\"mlv-date-range-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n      </div>\n\n      <mlv-popup\n        #rangePopup\n        [(opened)]=\"_isOpen\"\n        [hasShadow]=\"true\"\n        [position]=\"['bottom-start', 'top-start', 'bottom-end', 'top-end']\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _i18n().selectDateRange\"\n        [ariaLabel]=\"_i18n().selectDateRange\"\n        (afterOpened)=\"_onPanelOpened()\"\n        (afterClosed)=\"_onPanelClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            class=\"mlv-date-range-picker__panel\"\n            [id]=\"panelId()\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            [cdkTrapFocus]=\"!rangePopup.isFullscreen()\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"_i18n().selectDateRange\"\n            (keydown.escape)=\"closeDropdown()\"\n          >\n            <div class=\"mlv-date-range-picker__calendars\">\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().startMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n\n              <div\n                class=\"mlv-date-range-picker__divider\"\n                aria-hidden=\"true\"\n              ></div>\n\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().endMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n            </div>\n\n            <div class=\"mlv-date-range-picker__footer\">\n              <button\n                mlvButton\n                variant=\"transparent\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__clear-btn\"\n                (click)=\"clearSelection()\"\n                [attr.aria-label]=\"_i18n().clearDateRange\"\n              >\n                Clear\n              </button>\n\n              <button\n                mlvButton\n                variant=\"primary\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__apply-btn\"\n                [attr.disabled]=\"canApply() ? null : true\"\n                (click)=\"applySelection()\"\n                [attr.aria-label]=\"_i18n().applyDateRange\"\n              >\n                Apply\n              </button>\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", styles: ["@layer mlv.components{.mlv-date-range-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-date-range-picker *{box-sizing:border-box}.mlv-date-range-picker{display:block}.mlv-date-range-picker__popup-container{width:100%}.mlv-date-range-picker__trigger{display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;outline:none;min-height:1.5rem;border-radius:var(--mlv-radius-s)}.mlv-date-range-picker__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-date-range-picker__trigger-icon{display:flex;align-items:center;color:var(--mlv-text-secondary);line-height:1;flex-shrink:0}.mlv-date-range-picker__value{display:flex;align-items:center;gap:.375rem;flex:1;color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-date-range-picker__value-start,.mlv-date-range-picker__value-end{white-space:nowrap}.mlv-date-range-picker__separator{color:var(--mlv-text-secondary);flex-shrink:0}.mlv-date-range-picker__placeholder{flex:1;color:var(--mlv-text-secondary)}.mlv-date-range-picker__panel{display:flex;flex-direction:column;background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-l);box-shadow:var(--mlv-shadow-floating);overflow:hidden}.mlv-date-range-picker__calendars{display:flex;align-items:flex-start;padding:1rem;gap:0}.mlv-date-range-picker__calendar{flex:0 0 auto}.mlv-date-range-picker__divider{width:1px;align-self:stretch;background-color:var(--mlv-border-subtle);margin:0 1rem;flex-shrink:0}.mlv-date-range-picker__footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);background-color:var(--mlv-background-base)}.mlv-date-range-picker__clear-btn{margin-inline-end:auto}.mlv-date-range-picker--state-success .mlv-date-range-picker__trigger{color:var(--mlv-text-positive)}.mlv-date-range-picker--state-warning .mlv-date-range-picker__trigger{color:var(--mlv-text-warning)}.mlv-date-range-picker--state-error .mlv-date-range-picker__trigger{color:var(--mlv-text-negative)}.mlv-date-range-picker--state-info .mlv-date-range-picker__trigger{color:var(--mlv-text-info)}.mlv-date-range-picker--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-date-range-picker--disabled .mlv-date-range-picker__trigger{cursor:not-allowed}.mlv-date-range-picker--selecting .mlv-date-range-picker__trigger-icon{color:var(--mlv-text-action)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], _triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvDateRangePicker };
+//# sourceMappingURL=malva-ui-core-date-range-picker.mjs.map

package/fesm2022/malva-ui-core-date-range-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-date-range-picker.mjs","sources":["../../../../libs/core/date-range-picker/src/lib/date-range-picker/date-range-picker.ts","../../../../libs/core/date-range-picker/src/lib/date-range-picker/date-range-picker.html","../../../../libs/core/date-range-picker/src/malva-ui-core-date-range-picker.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DOCUMENT,\n  type ElementRef,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvTabbableElementService } from '@malva-ui/cdk/accessibility';\nimport {\n  MlvCalendar,\n  type MlvCalendarRangeValue,\n  MLV_DATE_ADAPTER,\n  MlvNativeDateAdapter,\n  type MlvDateAdapter,\n} from '@malva-ui/core/calendar';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupContainer,\n} from '@malva-ui/core/popup';\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 type { MlvFormState, MlvFormControl } from '@malva-ui/core/form-utils';\nimport { LucideCalendarDays } from '@lucide/angular';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { MLV_DATE_RANGE_PICKER_I18N } from '@malva-ui/i18n';\n\n/**\n * Visual/validation state of the date range picker. Mirrors {@link MlvFormState}.\n */\nexport type MlvDateRangePickerState = MlvFormState;\n\n/**\n * Value shape for the date range picker.\n * Both `start` and `end` can be `null` when not yet selected.\n */\nexport interface MlvDateRangePickerValue<D = Date> {\n  /** The start date of the selected range. */\n  start: D | null;\n  /** The end date of the selected range. */\n  end: D | null;\n}\n\n/** Accepts signal-form range constraints without changing the public date-boundary API. */\nfunction coerceBoundaryDate<D>(\n  value: D | MlvDateRangePickerValue<D> | null | undefined,\n  edge: 'start' | 'end',\n): D | null {\n  if (value == null) return null;\n  if (typeof value === 'object' && 'start' in value && 'end' in value) {\n    return (value as MlvDateRangePickerValue<D>)[edge];\n  }\n  return value as D;\n}\n\n@Component({\n  selector: 'mlv-date-range-picker',\n  imports: [\n    MlvPopup,\n    MlvPopupContent,\n    MlvPopupContainer,\n    MlvCalendar,\n    LucideCalendarDays,\n    MlvFormControlWrapper,\n    MlvFormControlWrapperControl,\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvMessage,\n    MlvButton,\n    A11yModule,\n  ],\n  templateUrl: './date-range-picker.html',\n  styleUrl: './date-range-picker.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvDateRangePicker),\n    },\n  ],\n  host: {\n    class: 'mlv-date-range-picker',\n    '[class]': '\"mlv-date-range-picker--state-\" + resolvedState()',\n    '[class.mlv-date-range-picker--disabled]': 'computedDisabled()',\n    '[class.mlv-date-range-picker--focused]': 'focused()',\n    '[class.mlv-date-range-picker--open]': '_isOpen()',\n    '[class.mlv-date-range-picker--selecting]': '_isSelecting()',\n  },\n})\nexport class MlvDateRangePicker<D = Date>\n  extends MlvSignalFormControlBase<MlvDateRangePickerValue<D> | null>\n  implements MlvFormControl\n{\n  /** The committed date range used by all Angular forms APIs. */\n  readonly value = model<MlvDateRangePickerValue<D> | null>(null);\n  /** @private The active date adapter — a provided `MLV_DATE_ADAPTER`, or the native fallback. */\n  private readonly _dateAdapter =\n    (inject(MLV_DATE_ADAPTER, {\n      optional: true,\n    }) as MlvDateAdapter<D> | null) ??\n    (inject(MlvNativeDateAdapter) as unknown as MlvDateAdapter<D>);\n\n  /**\n   * The pending range being assembled during selection.\n   * Committed to the form control only when the user clicks Apply.\n   */\n  protected readonly _pendingRange = signal<MlvCalendarRangeValue<D> | null>(\n    null,\n  );\n\n  /**\n   * The last committed range value (reflects the form control value).\n   */\n  readonly rangeValue = this.value;\n\n  /** Custom placeholder override. Falls back to the i18n-provided placeholder. */\n  readonly placeholder = input<string | undefined>(undefined);\n\n  /** Minimum selectable date, passed to both calendars. */\n  readonly min = input<\n    D | null,\n    D | MlvDateRangePickerValue<D> | null | undefined\n  >(null, {\n    transform: (value) => coerceBoundaryDate(value, 'start'),\n  });\n\n  /** Maximum selectable date, passed to both calendars. */\n  readonly max = input<\n    D | null,\n    D | MlvDateRangePickerValue<D> | null | undefined\n  >(null, {\n    transform: (value) => coerceBoundaryDate(value, 'end'),\n  });\n\n  /** Optional callback for disabling arbitrary dates, passed to both calendars. */\n  readonly disabledDates = input<((date: D) => boolean) | null>(null);\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_DATE_RANGE_PICKER_I18N);\n\n  /**\n   * @private Reference to the trigger element, used to restore focus when the\n   * popup closes. It is declared in this component's own template, so a signal\n   * view query is the correct mechanism (was a host `querySelector`).\n   */\n  private readonly _triggerRef =\n    viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n  /** @private Locates the first tabbable element inside the popup panel. */\n  private readonly _tabbable = inject(MlvTabbableElementService);\n\n  /** @private Document ref for locating the rendered popup panel by id. */\n  private readonly _document = inject(DOCUMENT);\n\n  /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */\n  protected readonly _resolvedPlaceholder = computed(\n    () => this.placeholder() ?? this._i18n().placeholder,\n  );\n\n  /**\n   * @internal Whether the picker popup is currently open.\n   */\n  protected readonly _isOpen = signal(false);\n\n  /**\n   * @internal Whether a range selection is in progress (start chosen, awaiting end click).\n   */\n  protected readonly _isSelecting = computed(\n    () => !!this._pendingRange()?.start && !this._pendingRange()?.end,\n  );\n\n  /**\n   * Override focused to also be true when the calendar popup is open.\n   */\n  override readonly focused = computed(() => this._focused() || this._isOpen());\n\n  /** Unique ID for the optional message element used by aria-describedby. */\n\n  /** Unique ID for the popup panel element used by aria-controls. */\n  readonly panelId = computed(() => `${this.id()}-panel`);\n\n  /**\n   * The initial date for the left (earlier-month) calendar panel.\n   * Defaults to today when no range is selected.\n   */\n  readonly leftCalendarActiveDate = computed<D>(() => {\n    const pending = this._pendingRange();\n    const val = this.rangeValue();\n    const anchor = pending?.start ?? val?.start ?? null;\n    return anchor ? this._dateAdapter.clone(anchor) : this._dateAdapter.today();\n  });\n\n  /**\n   * The initial date for the right (later-month) calendar panel.\n   * Always one month ahead of the left panel's month.\n   */\n  readonly rightCalendarActiveDate = computed<D>(() => {\n    return this._dateAdapter.addCalendarMonths(\n      this.leftCalendarActiveDate(),\n      1,\n    );\n  });\n\n  /**\n   * The formatted start date display string.\n   * Returns an empty string when no start date is selected.\n   */\n  get startDisplayValue(): string {\n    const val = this.rangeValue();\n    if (!val?.start) return '';\n    return this._formatDate(val.start);\n  }\n\n  /**\n   * The formatted end date display string.\n   * Returns an empty string when no end date is selected.\n   */\n  get endDisplayValue(): string {\n    const val = this.rangeValue();\n    if (!val?.end) return '';\n    return this._formatDate(val.end);\n  }\n\n  /**\n   * Whether the Apply button should be enabled.\n   * Requires both start and end dates to be set in the pending range.\n   */\n  readonly canApply = computed(\n    () => !!this._pendingRange()?.start && !!this._pendingRange()?.end,\n  );\n\n  /**\n   * Whether the clear button should be shown.\n   */\n  readonly hasClearableValue = computed(\n    () =>\n      this.clearable() &&\n      !this.computedDisabled() &&\n      (!!this.rangeValue()?.start || !!this.rangeValue()?.end),\n  );\n\n  /**\n   * Toggles the popup open/closed.\n   * No-op when the picker is disabled.\n   */\n  toggleDropdown(): void {\n    if (this.computedDisabled()) return;\n    const wasOpen = this._isOpen();\n    if (wasOpen) {\n      this.closeDropdown();\n    } else {\n      // Initialize pending range from committed value when opening\n      const val = this.rangeValue();\n      this._pendingRange.set(val ? { start: val.start, end: val.end } : null);\n      this._isOpen.set(true);\n    }\n  }\n\n  /**\n   * @protected Moves focus into the popup panel when it opens.\n   * Focuses the first tabbable element, falling back to the panel container\n   * (which carries `tabindex=\"-1\"`) so focus always lands inside the modal.\n   */\n  protected _onPanelOpened(): void {\n    const panel = this._document.getElementById(this.panelId());\n    if (!panel) return;\n    const first = this._tabbable.getTabbableElement(panel, false, true);\n    (first ?? panel).focus();\n  }\n\n  /**\n   * @protected Handles popup close: clears the focused state and returns focus\n   * to the trigger, matching the overlay focus-restore pattern.\n   */\n  protected _onPanelClosed(): void {\n    this.setFocused(false);\n    this._markTouched();\n    this._triggerRef()?.nativeElement.focus();\n  }\n\n  /** @protected Marks the control touched when its trigger loses focus. */\n  protected _onTriggerBlur(): void {\n    this.setFocused(false);\n    this._markTouched();\n  }\n\n  /**\n   * Closes the popup and resets the pending selection to the committed value.\n   */\n  closeDropdown(): void {\n    this._isOpen.set(false);\n    // Reset pending range to committed value\n    const val = this.rangeValue();\n    this._pendingRange.set(val ? { start: val.start, end: val.end } : null);\n  }\n\n  /**\n   * Handles range value changes from either calendar.\n   * Updates the pending (uncommitted) range.\n   *\n   * @param range - The updated range value from the calendar.\n   */\n  onRangeChanged(range: MlvCalendarRangeValue<D> | null): void {\n    this._pendingRange.set(range);\n  }\n\n  /**\n   * Applies the pending range selection and closes the popup.\n   * Commits the value to the form control.\n   */\n  applySelection(): void {\n    const pending = this._pendingRange();\n    const newValue: MlvDateRangePickerValue<D> | null = pending?.start\n      ? { start: pending.start, end: pending.end }\n      : null;\n\n    this.rangeValue.set(newValue);\n    this._isOpen.set(false);\n  }\n\n  /**\n   * Clears the selected range and resets the picker.\n   */\n  clearSelection(): void {\n    this.rangeValue.set(null);\n    this._pendingRange.set(null);\n  }\n\n  /** Whether the control holds a clearable value — A committed range is set. */\n  readonly hasValue = computed(() => this.rangeValue() != null);\n\n  /**\n   * @private Formats a single date for display.\n   */\n  private _formatDate(date: D): string {\n    return this._dateAdapter.format(date, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\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-date-range-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-date-range-picker__trigger\"\n        [id]=\"id()\"\n        role=\"button\"\n        [attr.aria-expanded]=\"_isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-disabled]=\"computedDisabled() || null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"toggleDropdown()\"\n        (keydown.enter)=\"!computedDisabled() && toggleDropdown()\"\n        (keydown.space)=\"!computedDisabled() && toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"closeDropdown()\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-date-range-picker__trigger-icon\" aria-hidden=\"true\">\n          <svg lucideCalendarDays [size]=\"18\" />\n        </span>\n\n        @if (startDisplayValue || endDisplayValue) {\n        <span class=\"mlv-date-range-picker__value\">\n          <span class=\"mlv-date-range-picker__value-start\"\n            >{{ startDisplayValue || '...' }}</span\n          >\n          <span class=\"mlv-date-range-picker__separator\" aria-hidden=\"true\"\n            >—</span\n          >\n          <span class=\"mlv-date-range-picker__value-end\"\n            >{{ endDisplayValue || '...' }}</span\n          >\n        </span>\n        } @else {\n        <span class=\"mlv-date-range-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n      </div>\n\n      <mlv-popup\n        #rangePopup\n        [(opened)]=\"_isOpen\"\n        [hasShadow]=\"true\"\n        [position]=\"['bottom-start', 'top-start', 'bottom-end', 'top-end']\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _i18n().selectDateRange\"\n        [ariaLabel]=\"_i18n().selectDateRange\"\n        (afterOpened)=\"_onPanelOpened()\"\n        (afterClosed)=\"_onPanelClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            class=\"mlv-date-range-picker__panel\"\n            [id]=\"panelId()\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            [cdkTrapFocus]=\"!rangePopup.isFullscreen()\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"_i18n().selectDateRange\"\n            (keydown.escape)=\"closeDropdown()\"\n          >\n            <div class=\"mlv-date-range-picker__calendars\">\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().startMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n\n              <div\n                class=\"mlv-date-range-picker__divider\"\n                aria-hidden=\"true\"\n              ></div>\n\n              <div\n                class=\"mlv-date-range-picker__calendar\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().endMonth\"\n              >\n                <mlv-calendar\n                  embedded\n                  [range]=\"true\"\n                  [rangeValue]=\"_pendingRange()\"\n                  [min]=\"min()\"\n                  [max]=\"max()\"\n                  [disabledDates]=\"disabledDates()\"\n                  (rangeValueChange)=\"onRangeChanged($event)\"\n                />\n              </div>\n            </div>\n\n            <div class=\"mlv-date-range-picker__footer\">\n              <button\n                mlvButton\n                variant=\"transparent\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__clear-btn\"\n                (click)=\"clearSelection()\"\n                [attr.aria-label]=\"_i18n().clearDateRange\"\n              >\n                Clear\n              </button>\n\n              <button\n                mlvButton\n                variant=\"primary\"\n                size=\"s\"\n                type=\"button\"\n                class=\"mlv-date-range-picker__apply-btn\"\n                [attr.disabled]=\"canApply() ? null : true\"\n                (click)=\"applySelection()\"\n                [attr.aria-label]=\"_i18n().applyDateRange\"\n              >\n                Apply\n              </button>\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-day-picker.mjs

@@ -0,0 +1,131 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, computed, signal, viewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { MlvPopup, MlvPopupContent, MlvPopupContainer } from '@malva-ui/core/popup';
+import { MLV_DATE_ADAPTER, MlvNativeDateAdapter, MlvCalendar } from '@malva-ui/core/calendar';
+import { LucideCalendar } from '@lucide/angular';
+import { MlvSignalFormControlBase, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvDescription, MlvLabel, MlvHint, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { MLV_DAY_PICKER_I18N } from '@malva-ui/i18n';
+
+class MlvDayPicker extends MlvSignalFormControlBase {
+    /** @private Active date adapter — injected token, falling back to the native adapter. */
+    _dateAdapter = inject(MLV_DATE_ADAPTER, {
+        optional: true,
+    }) ??
+        inject(MlvNativeDateAdapter);
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Custom placeholder override. Falls back to the i18n-provided placeholder. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    dateFormat = input('yyyy-MM-dd', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_DAY_PICKER_I18N);
+    /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    // Override focused to also be true when the calendar popup is open
+    focused = computed(() => this._focused() || this.isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML `id` assigned to the visible `<mlv-label>` element. The trigger
+     * references it via `aria-labelledby` (a `<label for>` cannot name a `<div>`).
+     */
+    labelId = computed(() => `${this.id()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    /** The HTML `id` of the calendar dialog region, for `aria-controls` linking. */
+    popupId = computed(() => `${this.id()}-popup`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupId" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the trigger element for focus restoration on close. */
+    _triggerRef = viewChild('triggerRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerRef" }] : /* istanbul ignore next */ []));
+    get displayValue() {
+        const val = this.value();
+        if (!val)
+            return '';
+        return this._dateAdapter.format(val, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    toggleDropdown() {
+        if (this.computedDisabled())
+            return;
+        this.isOpen.set(!this.isOpen());
+    }
+    onDateSelected(date) {
+        this.value.set(date);
+        this.isOpen.set(false);
+    }
+    /** @protected Marks the control touched when the trigger loses focus. */
+    _onTriggerBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    /**
+     * @protected Called after the calendar popup opens. Moves focus into the
+     * calendar dialog so keyboard users land inside the modal surface.
+     */
+    _onPopupOpened() {
+        const panel = document.getElementById(this.popupId());
+        const target = panel?.querySelector('[tabindex="0"], button, [tabindex]');
+        target?.focus();
+    }
+    /**
+     * @protected Called after the calendar popup closes. Restores focus to the
+     * trigger element and clears the focused flag.
+     */
+    _onPopupClosed() {
+        this.setFocused(false);
+        this._markTouched();
+        this._triggerRef()?.nativeElement.focus();
+    }
+    /** Whether the control holds a clearable value — A date is set. */
+    hasValue = computed(() => this.value() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDayPicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDayPicker, isStandalone: true, selector: "mlv-day-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "\"mlv-day-picker--\" + resolvedState()", "class.mlv-day-picker--disabled": "computedDisabled()", "class.mlv-day-picker--open": "isOpen()" }, classAttribute: "mlv-day-picker" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvDayPicker),
+            },
+        ], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [id]=\"labelId()\" [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-day-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-day-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popupId() : null\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled() || 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        @if (displayValue) {\n        <span class=\"mlv-day-picker__value\">{{ displayValue }}</span>\n        } @else {\n        <span class=\"mlv-day-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n        <span class=\"mlv-day-picker__icon\">\n          <svg lucideCalendar></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() || _resolvedPlaceholder()\"\n        [ariaLabel]=\"label() || _resolvedPlaceholder()\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div [id]=\"popupId()\" class=\"mlv-day-picker__popup\">\n            <mlv-calendar\n              embedded\n              [value]=\"value()\"\n              (valueChange)=\"onDateSelected($event)\"\n              [min]=\"min()\"\n              [max]=\"max()\"\n            />\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", styles: ["@layer mlv.components{.mlv-day-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-day-picker *{box-sizing:border-box}.mlv-day-picker{display:block}.mlv-day-picker__popup-container{width:100%}.mlv-day-picker__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;outline:none;min-height:1.5rem}.mlv-day-picker__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-day-picker__value{flex:1;color:var(--mlv-text-primary)}.mlv-day-picker__placeholder{flex:1;color:var(--mlv-text-secondary)}.mlv-day-picker__icon{display:flex;align-items:center;color:var(--mlv-text-tertiary);margin-inline-start:.5rem;line-height:1;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-day-picker__icon svg{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem)}.mlv-day-picker--open .mlv-day-picker__icon,.mlv-day-picker:hover .mlv-day-picker__icon,.mlv-form-control-wrapper--focused .mlv-day-picker__icon{color:var(--mlv-text-primary)}.mlv-day-picker__popup{padding:var(--mlv-popover-inset)}}\n"], dependencies: [{ kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "component", type: MlvCalendar, selector: "mlv-calendar", inputs: ["value", "rangeValue", "min", "max", "disabledDates", "startView", "firstDayOfWeek", "range", "embedded", "activeDate"], outputs: ["valueChange", "rangeValueChange", "activeDateChange"] }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDayPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-day-picker', imports: [
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupContainer,
+                        MlvCalendar,
+                        LucideCalendar,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvHint,
+                        MlvMessage,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvDayPicker),
+                        },
+                    ], host: {
+                        class: 'mlv-day-picker',
+                        '[class]': '"mlv-day-picker--" + resolvedState()',
+                        '[class.mlv-day-picker--disabled]': 'computedDisabled()',
+                        '[class.mlv-day-picker--open]': 'isOpen()',
+                    }, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [id]=\"labelId()\" [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-day-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-day-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popupId() : null\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled() || 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        @if (displayValue) {\n        <span class=\"mlv-day-picker__value\">{{ displayValue }}</span>\n        } @else {\n        <span class=\"mlv-day-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n        <span class=\"mlv-day-picker__icon\">\n          <svg lucideCalendar></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() || _resolvedPlaceholder()\"\n        [ariaLabel]=\"label() || _resolvedPlaceholder()\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div [id]=\"popupId()\" class=\"mlv-day-picker__popup\">\n            <mlv-calendar\n              embedded\n              [value]=\"value()\"\n              (valueChange)=\"onDateSelected($event)\"\n              [min]=\"min()\"\n              [max]=\"max()\"\n            />\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", styles: ["@layer mlv.components{.mlv-day-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-day-picker *{box-sizing:border-box}.mlv-day-picker{display:block}.mlv-day-picker__popup-container{width:100%}.mlv-day-picker__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;outline:none;min-height:1.5rem}.mlv-day-picker__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-day-picker__value{flex:1;color:var(--mlv-text-primary)}.mlv-day-picker__placeholder{flex:1;color:var(--mlv-text-secondary)}.mlv-day-picker__icon{display:flex;align-items:center;color:var(--mlv-text-tertiary);margin-inline-start:.5rem;line-height:1;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-day-picker__icon svg{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem)}.mlv-day-picker--open .mlv-day-picker__icon,.mlv-day-picker:hover .mlv-day-picker__icon,.mlv-form-control-wrapper--focused .mlv-day-picker__icon{color:var(--mlv-text-primary)}.mlv-day-picker__popup{padding:var(--mlv-popover-inset)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], _triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvDayPicker };
+//# sourceMappingURL=malva-ui-core-day-picker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-day-picker.mjs","sources":["../../../../libs/core/day-picker/src/lib/day-picker/day-picker.ts","../../../../libs/core/day-picker/src/lib/day-picker/day-picker.html","../../../../libs/core/day-picker/src/malva-ui-core-day-picker.ts"],"sourcesContent":["import type { ElementRef } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupContainer,\n} from '@malva-ui/core/popup';\nimport {\n  MlvCalendar,\n  MLV_DATE_ADAPTER,\n  MlvNativeDateAdapter,\n  type MlvDateAdapter,\n} from '@malva-ui/core/calendar';\nimport { LucideCalendar } from '@lucide/angular';\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 { MLV_DAY_PICKER_I18N } from '@malva-ui/i18n';\n\n/**\n * Visual/validation state of the day picker. Mirrors {@link MlvFormState}.\n */\nexport type MlvDayPickerState = MlvFormState;\n\n@Component({\n  selector: 'mlv-day-picker',\n  imports: [\n    MlvPopup,\n    MlvPopupContent,\n    MlvPopupContainer,\n    MlvCalendar,\n    LucideCalendar,\n    MlvFormControlWrapper,\n    MlvFormControlWrapperControl,\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvMessage,\n  ],\n  templateUrl: './day-picker.html',\n  styleUrl: './day-picker.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvDayPicker),\n    },\n  ],\n  host: {\n    class: 'mlv-day-picker',\n    '[class]': '\"mlv-day-picker--\" + resolvedState()',\n    '[class.mlv-day-picker--disabled]': 'computedDisabled()',\n    '[class.mlv-day-picker--open]': 'isOpen()',\n  },\n})\nexport class MlvDayPicker<D = Date>\n  extends MlvSignalFormControlBase<D | null>\n  implements MlvFormControl\n{\n  /** @private Active date adapter — injected token, falling back to the native adapter. */\n  private readonly _dateAdapter =\n    (inject(MLV_DATE_ADAPTER, {\n      optional: true,\n    }) as MlvDateAdapter<D> | null) ??\n    (inject(MlvNativeDateAdapter) as unknown as MlvDateAdapter<D>);\n\n  readonly value = model<D | null>(null);\n  /** Custom placeholder override. Falls back to the i18n-provided placeholder. */\n  readonly placeholder = input<string | undefined>(undefined);\n  readonly min = input<D | null, D | null | undefined>(null, {\n    transform: (value) => value ?? null,\n  });\n  readonly max = input<D | null, D | null | undefined>(null, {\n    transform: (value) => value ?? null,\n  });\n  readonly dateFormat = input<string>('yyyy-MM-dd');\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_DAY_PICKER_I18N);\n\n  /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */\n  protected readonly _resolvedPlaceholder = computed(\n    () => this.placeholder() ?? this._i18n().placeholder,\n  );\n\n  // Override focused to also be true when the calendar popup is open\n  override readonly focused = computed(() => this._focused() || this.isOpen());\n\n  readonly isOpen = signal(false);\n\n  /**\n   * The HTML `id` assigned to the visible `<mlv-label>` element. The trigger\n   * references it via `aria-labelledby` (a `<label for>` cannot name a `<div>`).\n   */\n  readonly labelId = computed(() => `${this.id()}-label`);\n\n  /** The HTML `id` of the calendar dialog region, for `aria-controls` linking. */\n  readonly popupId = computed(() => `${this.id()}-popup`);\n\n  /** @private Reference to the trigger element for focus restoration on close. */\n  private readonly _triggerRef =\n    viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n  get displayValue(): string {\n    const val = this.value();\n    if (!val) return '';\n    return this._dateAdapter.format(val, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  }\n\n  toggleDropdown(): void {\n    if (this.computedDisabled()) return;\n    this.isOpen.set(!this.isOpen());\n  }\n\n  onDateSelected(date: D | null): void {\n    this.value.set(date);\n    this.isOpen.set(false);\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 Called after the calendar popup opens. Moves focus into the\n   * calendar dialog so keyboard users land inside the modal surface.\n   */\n  protected _onPopupOpened(): void {\n    const panel = document.getElementById(this.popupId());\n    const target = panel?.querySelector<HTMLElement>(\n      '[tabindex=\"0\"], button, [tabindex]',\n    );\n    target?.focus();\n  }\n\n  /**\n   * @protected Called after the calendar popup closes. Restores focus to the\n   * trigger element and clears the focused flag.\n   */\n  protected _onPopupClosed(): void {\n    this.setFocused(false);\n    this._markTouched();\n    this._triggerRef()?.nativeElement.focus();\n  }\n\n  /** Whether the control holds a clearable value — A date is set. */\n  readonly hasValue = computed(() => this.value() != null);\n}\n","<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [id]=\"labelId()\" [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-day-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-day-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popupId() : null\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled() || 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        @if (displayValue) {\n        <span class=\"mlv-day-picker__value\">{{ displayValue }}</span>\n        } @else {\n        <span class=\"mlv-day-picker__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n        <span class=\"mlv-day-picker__icon\">\n          <svg lucideCalendar></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() || _resolvedPlaceholder()\"\n        [ariaLabel]=\"label() || _resolvedPlaceholder()\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div [id]=\"popupId()\" class=\"mlv-day-picker__popup\">\n            <mlv-calendar\n              embedded\n              [value]=\"value()\"\n              (valueChange)=\"onDateSelected($event)\"\n              [min]=\"min()\"\n              [max]=\"max()\"\n            />\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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"}