@ship-ui/core 0.19.5 → 0.22.2

package/fesm2022/ship-ui-core-ship-datepicker.mjs

@@ -0,0 +1,951 @@
+import { DatePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { model, input, output, viewChild, signal, computed, effect, inject, ElementRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { ShipFormFieldPopover } from '@ship-ui/core/ship-form-field';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { classMutationSignal, contentProjectionSignal } from '@ship-ui/core';
+
+class ShipDatepicker {
+    constructor() {
+        this.#INIT_DATE = new Date(new Date().setHours(0, 0, 0, 0));
+        this.date = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        this.endDate = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+        this.asRange = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asRange" }] : /* istanbul ignore next */ []));
+        this.activeRangeSelection = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeRangeSelection" }] : /* istanbul ignore next */ []));
+        this.monthsToShow = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.tabbedOut = output();
+        this.startOfWeek = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startOfWeek" }] : /* istanbul ignore next */ []));
+        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+        this.daysRef = viewChild('daysRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "daysRef" }] : /* istanbul ignore next */ []));
+        this.currentDate = signal(this.date() ?? this.#INIT_DATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
+        this.monthOffsets = computed(() => {
+            return Array.from({ length: this.monthsToShow() }, (_, i) => i);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthOffsets" }] : /* istanbul ignore next */ []));
+        this.selectedDateStylePosition = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDateStylePosition" }] : /* istanbul ignore next */ []));
+        this.weekdays = computed(() => {
+            const startOfWeek = this.startOfWeek();
+            const weekdayLabels = this.weekdayLabels();
+            return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+        this.currentClasses = classMutationSignal();
+        this.someEffect = effect(() => {
+            const _ = this.currentClasses();
+            this.#findSelectedAndCalc();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "someEffect" }] : /* istanbul ignore next */ []));
+        this.#newDateEffect = effect(() => {
+            if (this.monthsToShow() > 1)
+                return;
+            this.#setDateAsCurrent();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : /* istanbul ignore next */ []));
+        this.focusedDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+        this.#selfRef = inject(ElementRef);
+    }
+    #INIT_DATE;
+    getLastVisibleMonth() {
+        const lastMonthOffset = this.monthsToShow() - 1;
+        return this.getOffsetDate(lastMonthOffset);
+    }
+    getOffsetDate(monthOffset) {
+        const date = new Date(this.currentDate());
+        date.setMonth(date.getMonth() + monthOffset);
+        return date;
+    }
+    getMonthDates(monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return this.#generateMonthDates(offsetDate, this.startOfWeek());
+    }
+    #newDateEffect;
+    ngOnInit() {
+        if (this.monthsToShow() === 1)
+            return;
+        this.#setDateAsCurrent();
+    }
+    #setDateAsCurrent() {
+        const newDate = this.date();
+        if (newDate && !isNaN(newDate.getTime())) {
+            this.currentDate.set(newDate);
+        }
+        this.#findSelectedAndCalc();
+    }
+    #findSelectedAndCalc() {
+        setTimeout(() => {
+            const selectedElement = this.daysRef()?.nativeElement.querySelector('.sel');
+            if (!selectedElement) {
+                return this.selectedDateStylePosition.update((x) => (x ? { ...x, opacity: '0' } : null));
+            }
+            this.setSelectedDateStylePosition(selectedElement);
+        });
+    }
+    #generateMonthDates(date, startOfWeek) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const dates = [];
+        let offset = firstDay - startOfWeek;
+        if (offset < 0) {
+            offset += 7;
+        }
+        const lastDayOfPrevMonth = new Date(year, month, 0).getDate();
+        for (let i = offset - 1; i >= 0; i--) {
+            dates.push(new Date(year, month - 1, lastDayOfPrevMonth - i, 0, 0, 0, 0));
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            dates.push(new Date(year, month, i, 0, 0, 0, 0));
+        }
+        let nextMonthDay = 1;
+        while (dates.length % 7 !== 0) {
+            dates.push(new Date(year, month + 1, nextMonthDay++, 0, 0, 0, 0));
+        }
+        return dates;
+    }
+    nextMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() + 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
+    }
+    previousMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() - 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
+    }
+    setDate(newDate, selectedElement) {
+        this.focusedDate.set(newDate);
+        const createDateWithExistingTime = (newDate, existingDate) => {
+            let hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+            if (existingDate) {
+                if (typeof existingDate === 'string' || typeof existingDate === 'number') {
+                    existingDate = new Date(existingDate);
+                }
+                if (existingDate instanceof Date && !isNaN(existingDate.getTime())) {
+                    hours = existingDate.getHours();
+                    minutes = existingDate.getMinutes();
+                    seconds = existingDate.getSeconds();
+                    milliseconds = existingDate.getMilliseconds();
+                }
+            }
+            return new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), hours, minutes, seconds, milliseconds);
+        };
+        if (!this.asRange()) {
+            this.date.set(createDateWithExistingTime(newDate, this.date()));
+            this.endDate.set(null);
+        }
+        else {
+            const startDate = this.date();
+            const endDate = this.endDate();
+            const selectionMode = this.activeRangeSelection();
+            if (selectionMode === 'start') {
+                const utcDate = createDateWithExistingTime(newDate, startDate);
+                this.date.set(utcDate);
+                if (endDate && utcDate > endDate) {
+                    this.endDate.set(null);
+                }
+            }
+            else if (selectionMode === 'end') {
+                if (!startDate || newDate < startDate) {
+                    const newStart = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(newStart);
+                    this.endDate.set(null);
+                }
+                else {
+                    const utcDate = createDateWithExistingTime(newDate, endDate);
+                    this.endDate.set(utcDate);
+                }
+            }
+            else {
+                if (!startDate) {
+                    const utcDate = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(utcDate);
+                }
+                else if (!endDate) {
+                    if (newDate < startDate) {
+                        const newStart = createDateWithExistingTime(newDate, startDate);
+                        this.date.set(newStart);
+                        this.endDate.set(null);
+                    }
+                    else {
+                        const utcDate = createDateWithExistingTime(newDate, endDate);
+                        this.endDate.set(utcDate);
+                    }
+                }
+                else {
+                    const utcDate = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(utcDate);
+                    this.endDate.set(null);
+                }
+            }
+        }
+        if (this.asRange())
+            return;
+        this.setSelectedDateStylePosition(selectedElement);
+    }
+    isDateSelected(date) {
+        let startDate = this.date();
+        let endDate = this.endDate();
+        if (typeof startDate === 'string' || typeof startDate === 'number')
+            startDate = new Date(startDate);
+        if (typeof endDate === 'string' || typeof endDate === 'number')
+            endDate = new Date(endDate);
+        if (!startDate || !(startDate instanceof Date) || isNaN(startDate.getTime()))
+            return null;
+        const startOfDay = (date) => {
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        };
+        const endOfDay = (date) => {
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        };
+        const currentDate = startOfDay(date);
+        const rangeStart = startOfDay(startDate);
+        const rangeEnd = endDate ? endOfDay(endDate) : null;
+        let classes = [];
+        if (this.asRange()) {
+            if (rangeEnd === null) {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('sel first last');
+                }
+            }
+            else {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('first');
+                }
+                if (currentDate.getTime() === startOfDay(rangeEnd).getTime()) {
+                    classes.push('last');
+                }
+                if (currentDate >= rangeStart && currentDate <= rangeEnd) {
+                    classes.push('sel');
+                    const dayOfWeek = currentDate.getDay();
+                    const startOfWeek = this.startOfWeek();
+                    if (dayOfWeek === startOfWeek) {
+                        classes.push('week-start');
+                    }
+                    const endOfWeek = (startOfWeek + 6) % 7;
+                    if (dayOfWeek === endOfWeek) {
+                        classes.push('week-end');
+                    }
+                }
+                const nextDate = new Date(currentDate);
+                nextDate.setDate(currentDate.getDate() + 1);
+                const prevDate = new Date(currentDate);
+                prevDate.setDate(currentDate.getDate() - 1);
+                const isFirstOfMonth = currentDate.getDate() === 1;
+                const isLastOfMonth = nextDate.getMonth() !== currentDate.getMonth();
+                if (isFirstOfMonth) {
+                    classes.push('month-start');
+                }
+                if (isLastOfMonth) {
+                    classes.push('month-end');
+                }
+            }
+        }
+        else {
+            if (currentDate.getTime() === rangeStart.getTime()) {
+                classes.push('sel');
+            }
+        }
+        return classes.join(' ') || null;
+    }
+    setSelectedDateStylePosition(selectedElement) {
+        this.selectedDateStylePosition.set({
+            transform: `translate(${selectedElement.offsetLeft}px, ${selectedElement.offsetTop}px)`,
+            opacity: '1',
+        });
+    }
+    getMonthName(date) {
+        return date.toLocaleString('default', { month: 'long' });
+    }
+    getFullYear(date) {
+        return date.getFullYear();
+    }
+    // Rest of the component methods remain the same, but update isCurrentMonth:
+    isCurrentMonth(date, monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return date.getMonth() === offsetDate.getMonth();
+    }
+    #selfRef;
+    isSameDay(d1, d2) {
+        if (!d1 || !d2)
+            return false;
+        return d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate();
+    }
+    getAriaLabel(date) {
+        return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    }
+    getTabIndex(date) {
+        const focused = this.focusedDate();
+        const selected = this.date();
+        const today = new Date();
+        if (focused) {
+            return this.isSameDay(date, focused) ? 0 : -1;
+        }
+        if (selected) {
+            return this.isSameDay(date, selected) ? 0 : -1;
+        }
+        return this.isSameDay(date, today) ? 0 : -1;
+    }
+    isDateSelectedBool(date) {
+        const classes = this.isDateSelected(date);
+        return classes ? classes.includes('sel') : false;
+    }
+    onKeydown(event, date) {
+        let newDate = new Date(date);
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+                newDate.setDate(date.getDate() + 1);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+                newDate.setDate(date.getDate() - 1);
+                handled = true;
+                break;
+            case 'ArrowDown':
+                newDate.setDate(date.getDate() + 7);
+                handled = true;
+                break;
+            case 'ArrowUp':
+                newDate.setDate(date.getDate() - 7);
+                handled = true;
+                break;
+            case 'PageDown':
+                newDate.setMonth(date.getMonth() + 1);
+                handled = true;
+                break;
+            case 'PageUp':
+                newDate.setMonth(date.getMonth() - 1);
+                handled = true;
+                break;
+            // Space and Enter are natively handled by the button's click event
+        }
+        if (handled) {
+            event.preventDefault();
+            this.ensureDateVisible(newDate);
+            this.focusedDate.set(newDate);
+            setTimeout(() => {
+                const buttons = this.#selfRef.nativeElement.querySelectorAll('button');
+                if (buttons) {
+                    const targetAria = this.getAriaLabel(newDate);
+                    for (let i = 0; i < buttons.length; i++) {
+                        if (buttons[i].getAttribute('aria-label') === targetAria) {
+                            buttons[i].focus();
+                            break;
+                        }
+                    }
+                }
+            });
+        }
+    }
+    ensureDateVisible(date) {
+        const start = this.currentDate();
+        const end = this.getLastVisibleMonth();
+        if (date < new Date(start.getFullYear(), start.getMonth(), 1)) {
+            this.currentDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
+            this.#findSelectedAndCalc();
+        }
+        else if (date > new Date(end.getFullYear(), end.getMonth() + 1, 0)) {
+            const newStart = new Date(date);
+            newStart.setMonth(newStart.getMonth() - this.monthsToShow() + 1);
+            newStart.setDate(1);
+            this.currentDate.set(newStart);
+            this.#findSelectedAndCalc();
+        }
+    }
+    focusActiveDate() {
+        setTimeout(() => {
+            const activeBtn = this.#selfRef.nativeElement.querySelector('button[tabindex="0"]');
+            if (activeBtn)
+                activeBtn.focus();
+        }, 50);
+    }
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.tabbedOut.emit();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipDatepicker, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, activeRangeSelection: { classPropertyName: "activeRangeSelection", publicName: "activeRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange", tabbedOut: "tabbedOut" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <header>
+      <button tabindex="-1" (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
+      </div>
+      <button tabindex="-1" (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
+
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
+
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <button
+                type="button"
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                [attr.aria-label]="getAriaLabel(calDate)"
+                [attr.tabindex]="getTabIndex(calDate)"
+                [attr.aria-selected]="isDateSelectedBool(calDate)"
+                (keydown)="onKeydown($event, calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </button>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"], dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDatepicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-datepicker', encapsulation: ViewEncapsulation.None, imports: [ShipIcon], template: `
+    <header>
+      <button tabindex="-1" (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
+      </div>
+      <button tabindex="-1" (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
+
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
+
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <button
+                type="button"
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                [attr.aria-label]="getAriaLabel(calDate)"
+                [attr.tabindex]="getTabIndex(calDate)"
+                [attr.aria-selected]="isDateSelectedBool(calDate)"
+                (keydown)="onKeydown($event, calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </button>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
+        </div>
+      }
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.as-range]': 'asRange()',
+                        '[class]': '"columns-" + monthsToShow()',
+                        '[class.disabled]': 'disabled()',
+                    }, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], activeRangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRangeSelection", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabbedOut: [{ type: i0.Output, args: ["tabbedOut"] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+
+class ShipDatepickerInput {
+    constructor() {
+        // #INIT_DATE = this.#getUTCDate(new Date());
+        this.#selfRef = inject(ElementRef);
+        this.ngControl = contentChild(NgControl, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+        this.#datePipe = inject(DatePipe);
+        this.#inputRef = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#inputRef" }] : /* istanbul ignore next */ []));
+        this.masking = input('mediumDate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "masking" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this._maskedDate = computed(() => {
+            const date = this.internalDate();
+            const mask = this.masking();
+            if (!mask)
+                return date;
+            if (!date)
+                return null;
+            return this.#datePipe.transform(date, mask);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_maskedDate" }] : /* istanbul ignore next */ []));
+        this.internalDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalDate" }] : /* istanbul ignore next */ []));
+        this.isOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.currentClass = classMutationSignal();
+        this.#inputObserver = contentProjectionSignal('#input-wrap input');
+        this.datepicker = viewChild(ShipDatepicker, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
+        this.#isOpenEffect = effect(() => {
+            if (this.isOpen()) {
+                setTimeout(() => {
+                    this.datepicker()?.focusActiveDate();
+                }, 50);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isOpenEffect" }] : /* istanbul ignore next */ []));
+        this.#inputRefEffect = effect(() => {
+            const inputs = this.#inputObserver();
+            if (!inputs.length)
+                return;
+            const input = inputs[0];
+            if (!input)
+                return;
+            this.#createCustomInputEventListener(input);
+            input.addEventListener('inputValueChanged', (event) => {
+                const val = event.detail.value;
+                if (!val) {
+                    this.internalDate.set(null);
+                    return;
+                }
+                let newD = new Date(val);
+                if (isNaN(newD.getTime())) {
+                    // If it's a time-only string like "14:30" or "14:30:00"
+                    if (typeof val === 'string' && /^(\d{2}):(\d{2})/.test(val)) {
+                        const match = val.match(/^(\d{2}):(\d{2})(?::(\d{2}))?/);
+                        if (match) {
+                            const current = this.internalDate() || new Date();
+                            newD = new Date(current);
+                            newD.setHours(parseInt(match[1], 10), parseInt(match[2], 10), match[3] ? parseInt(match[3], 10) : 0, 0);
+                        }
+                    }
+                }
+                if (!isNaN(newD.getTime())) {
+                    this.internalDate.set(newD);
+                }
+            });
+            input.addEventListener('focus', () => {
+                this.isOpen.set(true);
+                // Removed input.blur() so users can actually type or use Shift+Tab to navigate backward
+            });
+            this.#inputRef.set(input);
+            input.autocomplete = 'off';
+            if (typeof input.value === 'string') {
+                this.internalDate.set(input.value ? new Date(input.value) : null);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
+    }
+    // #INIT_DATE = this.#getUTCDate(new Date());
+    #selfRef;
+    #datePipe;
+    #inputRef;
+    #inputObserver;
+    #isOpenEffect;
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.isOpen.set(false);
+            }
+        });
+    }
+    onDateChange(date) {
+        this.internalDate.set(date);
+        const control = this.ngControl()?.control;
+        if (control) {
+            control.setValue(date);
+        }
+        else {
+            const input = this.#inputRef();
+            if (input) {
+                input.value = date ? date.toString() : '';
+                input.dispatchEvent(new Event('input'));
+            }
+        }
+    }
+    close() {
+        this.closed.emit(this.internalDate());
+    }
+    #inputRefEffect;
+    #createCustomInputEventListener(input) {
+        Object.defineProperty(input, 'value', {
+            configurable: true,
+            get() {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                return descriptor.get.call(this);
+            },
+            set(newVal) {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                descriptor.set.call(this, newVal);
+                const inputEvent = new CustomEvent('inputValueChanged', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: newVal,
+                    },
+                });
+                this.dispatchEvent(inputEvent);
+                return newVal;
+            },
+        });
+        return input;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipDatepickerInput, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [DatePipe], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ShipDatepicker, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input" ngProjectAs="input">
+        @if (this.masking()) {
+          <div class="masked-value">
+            {{ _maskedDate() }}
+          </div>
+        }
+        <ng-content select="input" />
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+      <sh-icon class="default-indicator" suffix>calendar</sh-icon>
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" (tabbedOut)="isOpen.set(false)" [class]="currentClass()" />
+        }
+      </div>
+    </sh-form-field-popover>
+
+    <ng-template #defaultIndicator></ng-template>
+  `, isInline: true, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"], dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "activeRangeSelection", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange", "tabbedOut"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDatepickerInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-datepicker-input', encapsulation: ViewEncapsulation.None, imports: [ShipDatepicker, ShipFormFieldPopover, ShipIcon], providers: [DatePipe], template: `
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input" ngProjectAs="input">
+        @if (this.masking()) {
+          <div class="masked-value">
+            {{ _maskedDate() }}
+          </div>
+        }
+        <ng-content select="input" />
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+      <sh-icon class="default-indicator" suffix>calendar</sh-icon>
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" (tabbedOut)="isOpen.set(false)" [class]="currentClass()" />
+        }
+      </div>
+    </sh-form-field-popover>
+
+    <ng-template #defaultIndicator></ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"] }]
+        }], propDecorators: { ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ShipDatepicker), { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+
+class ShipDaterangeInput {
+    #selfRef;
+    #inputObserver;
+    #datePipe;
+    #isOpenEffect;
+    get classes() {
+        return `${this.#selfRef.nativeElement.classList.value}`;
+    }
+    constructor() {
+        this.#selfRef = inject(ElementRef);
+        this.#inputObserver = contentProjectionSignal('input', {
+            childList: true,
+            subtree: true,
+        });
+        this.#datePipe = inject(DatePipe);
+        this.monthsToShow = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
+        this.masking = input('mediumDate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "masking" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this.startDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
+        this.endDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+        this.activeInput = signal('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeInput" }] : /* istanbul ignore next */ []));
+        this.isOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.datepicker = viewChild(ShipDatepicker, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
+        this.#isOpenEffect = effect(() => {
+            if (this.isOpen()) {
+                setTimeout(() => {
+                    this.datepicker()?.focusActiveDate();
+                }, 50);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isOpenEffect" }] : /* istanbul ignore next */ []));
+        this._maskedStartDate = computed(() => {
+            const date = this.startDate();
+            const mask = this.masking();
+            if (!mask || !date)
+                return null;
+            return this.#datePipe.transform(date, mask);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_maskedStartDate" }] : /* istanbul ignore next */ []));
+        this._maskedEndDate = computed(() => {
+            const date = this.endDate();
+            const mask = this.masking();
+            if (!mask || !date)
+                return null;
+            return this.#datePipe.transform(date, mask);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_maskedEndDate" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const inputs = this.#inputObserver();
+            if (inputs.length === 0)
+                return;
+            if (inputs[0])
+                this.setupInput(inputs[0], true);
+            if (inputs[1])
+                this.setupInput(inputs[1], false);
+        });
+    }
+    setupInput(element, isStart) {
+        if (element._hasCustomFocusEvent)
+            return;
+        element._hasCustomFocusEvent = true;
+        element.autocomplete = 'off';
+        // Set tabindex -1 on the second input to prevent users from having to Shift+Tab 
+        // multiple times to exit the component when masking is enabled.
+        if (!isStart) {
+            element.tabIndex = -1;
+        }
+        element.addEventListener('focus', () => {
+            this.activeInput.set(isStart ? 'start' : 'end');
+            if (element._ignoreNextFocus) {
+                element._ignoreNextFocus = false;
+                return;
+            }
+            this.isOpen.set(true);
+        });
+        // Handle initial value
+        if (element.value) {
+            try {
+                const date = new Date(element.value);
+                if (!isNaN(date.getTime())) {
+                    if (isStart) {
+                        this.startDate.set(date);
+                    }
+                    else {
+                        this.endDate.set(date);
+                    }
+                }
+            }
+            catch (e) {
+                console.warn('Invalid date value:', element.value);
+            }
+        }
+    }
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.isOpen.set(false);
+            }
+        });
+    }
+    onStartDateChange(date) {
+        this.startDate.set(date);
+        const inputs = this.#inputObserver();
+        if (inputs[0])
+            this.updateInputValue([inputs[0]], date);
+        // Automatically switch to end date selection
+        this.activeInput.set('end');
+    }
+    onEndDateChange(date) {
+        this.endDate.set(date);
+        const inputs = this.#inputObserver();
+        if (inputs[1])
+            this.updateInputValue([inputs[1]], date);
+        if (this.startDate() && date) {
+            this.isOpen.set(false);
+            const inputs = this.#inputObserver();
+            if (inputs[0] && document.activeElement !== inputs[0]) {
+                inputs[0]._ignoreNextFocus = true;
+                inputs[0].focus();
+            }
+        }
+    }
+    updateInputValue(inputs, date) {
+        inputs.forEach((input) => {
+            if (this.masking()) {
+                input.value = this.#datePipe.transform(date, this.masking()) ?? '';
+            }
+            else {
+                input.value = date ? date.toUTCString() : '';
+            }
+            this.dispatchInputEvent(input);
+        });
+    }
+    dispatchInputEvent(input) {
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    close() {
+        this.closed.emit({
+            start: this.startDate(),
+            end: this.endDate(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDaterangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipDaterangeInput, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ShipDatepicker, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div class="input" ngProjectAs="input" #inputWrap [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+        @if (this.masking()) {
+          <div class="masked-value" [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+            <span class="start-val">{{ _maskedStartDate() ?? 'N/A' }}</span>
+            <span class="separator">-</span>
+            <span class="end-val">{{ _maskedEndDate() ?? 'N/A' }}</span>
+          </div>
+        }
+        <ng-content select="input" />
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+      <sh-icon class="default-indicator" suffix>calendar</sh-icon>
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-datepicker
+            [date]="startDate()"
+            [endDate]="endDate()"
+            [activeRangeSelection]="activeInput()"
+            [class]="classes"
+            (dateChange)="onStartDateChange($event)"
+            (endDateChange)="onEndDateChange($event)"
+            (tabbedOut)="isOpen.set(false)"
+            [monthsToShow]="monthsToShow()"
+            [asRange]="true" />
+        }
+      </div>
+    </sh-form-field-popover>
+  `, isInline: true, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"], dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "activeRangeSelection", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange", "tabbedOut"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipDaterangeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-daterange-input', encapsulation: ViewEncapsulation.None, imports: [ShipDatepicker, ShipFormFieldPopover, ShipIcon], providers: [DatePipe], template: `
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div class="input" ngProjectAs="input" #inputWrap [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+        @if (this.masking()) {
+          <div class="masked-value" [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+            <span class="start-val">{{ _maskedStartDate() ?? 'N/A' }}</span>
+            <span class="separator">-</span>
+            <span class="end-val">{{ _maskedEndDate() ?? 'N/A' }}</span>
+          </div>
+        }
+        <ng-content select="input" />
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+      <sh-icon class="default-indicator" suffix>calendar</sh-icon>
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-datepicker
+            [date]="startDate()"
+            [endDate]="endDate()"
+            [activeRangeSelection]="activeInput()"
+            [class]="classes"
+            (dateChange)="onStartDateChange($event)"
+            (endDateChange)="onEndDateChange($event)"
+            (tabbedOut)="isOpen.set(false)"
+            [monthsToShow]="monthsToShow()"
+            [asRange]="true" />
+        }
+      </div>
+    </sh-form-field-popover>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-daterange-input sh-form-field-popover .input-wrap .input,sh-datepicker-input sh-form-field-popover .input-wrap .input{display:grid;grid-template-columns:1fr auto auto;align-items:center}sh-daterange-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-start input:first-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type,sh-datepicker-input sh-form-field-popover .input-wrap .input.active-end input:last-of-type{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .input-wrap [suffix],sh-datepicker-input sh-form-field-popover .input-wrap [suffix]{margin-right:.75rem}sh-daterange-input sh-form-field-popover .masked-value,sh-datepicker-input sh-form-field-popover .masked-value{font:var(--paragraph-30B);color:var(--base-8);display:flex;gap:.25rem}sh-daterange-input sh-form-field-popover .masked-value.active-start .start-val,sh-datepicker-input sh-form-field-popover .masked-value.active-start .start-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value.active-end .end-val,sh-datepicker-input sh-form-field-popover .masked-value.active-end .end-val{color:var(--primary-8)}sh-daterange-input sh-form-field-popover .masked-value+input+input,sh-daterange-input sh-form-field-popover .masked-value+input,sh-datepicker-input sh-form-field-popover .masked-value+input+input,sh-datepicker-input sh-form-field-popover .masked-value+input{opacity:0;height:0;width:0;margin:0}sh-daterange-input sh-form-field-popover [suffix]+[suffix].default-indicator,sh-datepicker-input sh-form-field-popover [suffix]+[suffix].default-indicator{display:none}sh-daterange-input sh-datepicker,sh-datepicker-input sh-datepicker{z-index:10000;position:relative;--dp-width: 15rem}sh-daterange-input sh-popover .popover-content{--dp-width: 18.75rem;min-width:var(--dp-width)}sh-daterange-input sh-form-field-popover.columns-1 sh-popover .popover-content{--dp-width: 18.75rem }sh-daterange-input sh-form-field-popover.columns-2 sh-popover .popover-content{--dp-width: 38.5rem }sh-daterange-input sh-form-field-popover.columns-3 sh-popover .popover-content{--dp-width: 58.25rem }sh-datepicker-input.sharp sh-datepicker,sh-daterange-input.sharp sh-datepicker,sh-datepicker.sharp{--dp-sel-s: var(--shape-1);--dp-ar: 1/.8;--dp-day-g: .5rem 0}sh-datepicker{--dp-sel-bg: var(--base-8);--dp-sel-bw: 0;--dp-sel-bc: transparent;--dp-sel-s: 50%;--dp-sel-c: #fff;--dp-day-c: var(--base-8);--dp-day-g: .25rem 0;--dp-day-f: var(--paragraph-20);--dp-width: 18.75rem;--dp-ar: 1/1;width:100%;padding:.5rem;max-width:var(--dp-width);display:flex;flex-direction:column}sh-datepicker.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-datepicker.columns-1{--dp-width: 18.75rem }sh-datepicker.columns-2{--dp-width: 38.5rem }sh-datepicker.columns-3{--dp-width: 58.25rem }sh-datepicker.columns-4{--dp-width: 78rem }sh-datepicker.columns-5{--dp-width: 97.75rem }sh-datepicker.columns-6{--dp-width: 117.5rem }sh-datepicker.columns-7{--dp-width: 137.25rem }sh-datepicker.columns-8{--dp-width: 157rem }sh-datepicker.columns-9{--dp-width: 176.75rem }sh-datepicker.columns-10{--dp-width: 196.5rem }sh-datepicker.columns-11{--dp-width: 216.25rem }sh-datepicker.columns-12{--dp-width: 236rem }sh-datepicker.as-range section .days>div.sel,sh-datepicker.as-range section .days>button.sel{background:var(--dp-sel-bg);opacity:.5;border-radius:0}sh-datepicker.as-range section .days>div.month-start,sh-datepicker.as-range section .days>div.week-start,sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>button.month-start,sh-datepicker.as-range section .days>button.week-start,sh-datepicker.as-range section .days>button.first{border-top-left-radius:var(--dp-sel-s);border-bottom-left-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.month-end,sh-datepicker.as-range section .days>div.week-end,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.month-end,sh-datepicker.as-range section .days>button.week-end,sh-datepicker.as-range section .days>button.last{border-top-right-radius:var(--dp-sel-s);border-bottom-right-radius:var(--dp-sel-s)}sh-datepicker.as-range section .days>div.first,sh-datepicker.as-range section .days>div.last,sh-datepicker.as-range section .days>button.first,sh-datepicker.as-range section .days>button.last{opacity:1}sh-datepicker.as-range .month .days>div.out-of-scope,sh-datepicker.as-range .month .days>button.out-of-scope{opacity:0;pointer-events:none}sh-datepicker header{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;gap:0}sh-datepicker header .title{font:var(--paragraph-20)}sh-datepicker header button{appearance:none;background-color:transparent;border:0;cursor:pointer;height:2rem;color:var(--base-8)}sh-datepicker header button:focus{outline:none}sh-datepicker .months-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}sh-datepicker .month{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr 6fr;gap:var(--dp-day-g);align-items:flex-start}sh-datepicker .month .days,sh-datepicker .month .weekdays{display:grid;grid-column:1/-1;gap:var(--dp-day-g);grid-template-columns:subgrid;position:relative}sh-datepicker .month .days>.days,sh-datepicker .month .weekdays>.days{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--dp-day-g);z-index:0}sh-datepicker .month .days>div,sh-datepicker .month .days>button,sh-datepicker .month .weekdays>div,sh-datepicker .month .weekdays>button{appearance:none;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--dp-ar);cursor:pointer;position:relative;z-index:1;color:var(--dp-day-c);font:var(--dp-day-f);-webkit-user-select:none;user-select:none;border-radius:var(--dp-sel-s)}sh-datepicker .month .days>div:focus-visible,sh-datepicker .month .days>button:focus-visible,sh-datepicker .month .weekdays>div:focus-visible,sh-datepicker .month .weekdays>button:focus-visible{outline:2px solid var(--primary-10, #005fcc);outline-offset:-2px}sh-datepicker .month .days>div.sel,sh-datepicker .month .days>button.sel,sh-datepicker .month .weekdays>div.sel,sh-datepicker .month .weekdays>button.sel{color:var(--dp-sel-c);transition:color 75ms linear}sh-datepicker .month .days>div.out-of-scope,sh-datepicker .month .days>button.out-of-scope,sh-datepicker .month .weekdays>div.out-of-scope,sh-datepicker .month .weekdays>button.out-of-scope{opacity:.4}sh-datepicker .month .days>div.sel-el,sh-datepicker .month .days>button.sel-el,sh-datepicker .month .weekdays>div.sel-el,sh-datepicker .month .weekdays>button.sel-el{position:relative;top:0;left:0;transition:transform 75ms linear,opacity 75ms linear;background:var(--dp-sel-bg);border-radius:var(--dp-sel-s);border:var(--dp-sel-bw) solid var(--dp-sel-bc);opacity:0;box-sizing:border-box}sh-datepicker .month .weekdays>div{color:var(--base-12)}sh-datepicker.primary{--dp-sel-bg: var(--primary-8)}sh-datepicker.accent{--dp-sel-bg: var(--accent-8)}sh-datepicker.warn{--dp-sel-bg: var(--warn-8)}sh-datepicker.error{--dp-sel-bg: var(--error-8)}sh-datepicker.success{--dp-sel-bg: var(--success-8)}sh-datepicker.raised{--dp-sel-bg: var(--base-g2)}sh-datepicker.raised.primary{--dp-sel-bg: var(--primary-g2)}sh-datepicker.raised.accent{--dp-sel-bg: var(--accent-g2)}sh-datepicker.raised.warn{--dp-sel-bg: var(--warn-g2)}sh-datepicker.raised.error{--dp-sel-bg: var(--error-g2)}sh-datepicker.raised.success{--dp-sel-bg: var(--success-g2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ShipDatepicker), { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput };
+//# sourceMappingURL=ship-ui-core-ship-datepicker.mjs.map