pdm-ui-kit 0.1.21 → 0.1.22

package/fesm2020/pdm-ui-kit.mjs

@@ -4,6 +4,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, ViewChild, NgModule } from '@angular/core';
 import { icons } from 'lucide';
 import * as i1$1 from '@angular/platform-browser';
+import { format } from 'date-fns';
 
 class PdmAccordionComponent {
     constructor() {
@@ -472,71 +473,472 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+const DEFAULT_VIEW_MONTH = new Date(2025, 5, 1); // June 2025 (Figma default)
+const DAY_MS = 24 * 60 * 60 * 1000;
 class PdmCalendarComponent {
-    constructor() {
-        this.mode = 'single';
-        this.month = 6;
-        this.year = 2025;
-        this.selectedDay = 25;
-        this.rangeStartDay = 25;
-        this.rangeEndDay = 9;
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._value = null;
+        this._rangeValue = null;
+        this._month = null;
+        this.variant = 'single';
         this.className = '';
+        this.disabledDates = [];
+        this.minDate = null;
+        this.maxDate = null;
+        this.isDateDisabled = null;
+        this.allowSameDayRange = true;
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+        this.rangeValueChange = new EventEmitter();
+        this.monthChange = new EventEmitter();
+        this.dateClick = new EventEmitter();
+        this.disabledDateClick = new EventEmitter();
         this.weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+        this.monthOptions = [
+            { value: 0, label: 'Jan' },
+            { value: 1, label: 'Feb' },
+            { value: 2, label: 'Mar' },
+            { value: 3, label: 'Apr' },
+            { value: 4, label: 'May' },
+            { value: 5, label: 'Jun' },
+            { value: 6, label: 'Jul' },
+            { value: 7, label: 'Aug' },
+            { value: 8, label: 'Sep' },
+            { value: 9, label: 'Oct' },
+            { value: 10, label: 'Nov' },
+            { value: 11, label: 'Dec' }
+        ];
+        this.trackByIndex = (index) => {
+            return index;
+        };
+        this.trackByDate = (_index, cell) => {
+            return this.dateKey(cell.date);
+        };
+    }
+    set value(value) {
+        this._value = this.normalizeDate(value);
+    }
+    get value() {
+        return this._value;
+    }
+    set rangeValue(value) {
+        this._rangeValue = value
+            ? {
+                start: this.normalizeDate(value.start),
+                end: this.normalizeDate(value.end)
+            }
+            : null;
+    }
+    get rangeValue() {
+        return this._rangeValue;
+    }
+    set month(value) {
+        this._month = value ? this.startOfMonth(value) : null;
+    }
+    get month() {
+        return this._month;
+    }
+    get resolvedVariant() {
+        return this.variant === 'range' ? 'range' : 'single';
+    }
+    get visibleMonths() {
+        const baseMonth = this.getAnchorMonth();
+        if (this.resolvedVariant === 'single') {
+            return [
+                {
+                    date: baseMonth,
+                    title: this.formatMonthYear(baseMonth),
+                    titleStyle: 'dropdowns',
+                    dropdownMonth: this.formatMonthShort(baseMonth),
+                    dropdownYear: String(baseMonth.getFullYear()),
+                    showPrevButton: true,
+                    showNextButton: true,
+                    weeks: this.buildMonthWeeks(baseMonth, false)
+                }
+            ];
+        }
+        const nextMonth = this.addMonths(baseMonth, 1);
+        return [
+            {
+                date: baseMonth,
+                title: this.formatMonthYear(baseMonth),
+                titleStyle: 'plain',
+                showPrevButton: true,
+                showNextButton: false,
+                weeks: this.buildMonthWeeks(baseMonth, true)
+            },
+            {
+                date: nextMonth,
+                title: this.formatMonthYear(nextMonth),
+                titleStyle: 'plain',
+                showPrevButton: false,
+                showNextButton: true,
+                weeks: this.buildMonthWeeks(nextMonth, true)
+            }
+        ];
+    }
+    get singleHeaderMonth() {
+        return this.getAnchorMonth().getMonth();
+    }
+    get singleHeaderYear() {
+        return this.getAnchorMonth().getFullYear();
+    }
+    get yearOptions() {
+        const currentYear = this.singleHeaderYear;
+        const minYear = this.minDate ? this.minDate.getFullYear() : currentYear - 100;
+        const maxYear = this.maxDate ? this.maxDate.getFullYear() : currentYear + 100;
+        const years = [];
+        for (let year = minYear; year <= maxYear; year += 1) {
+            years.push(year);
+        }
+        return years;
+    }
+    get rootClasses() {
+        return [
+            'border-border bg-background relative rounded-[10px] border p-3 shadow-sm',
+            this.resolvedVariant === 'range'
+                ? 'inline-flex items-start justify-center gap-4 shrink-0 grow-0 basis-auto'
+                : 'inline-flex flex-col gap-4 shrink-0 grow-0 basis-auto',
+            this.className
+        ];
+    }
+    get rootStyle() {
+        const width = this.resolvedVariant === 'range' ? '488px' : '250px';
+        return {
+            width,
+            minWidth: width,
+            maxWidth: width,
+            minHeight: '293px',
+            flex: '0 0 auto',
+            alignSelf: 'flex-start'
+        };
+    }
+    monthPanelClasses(_index) {
+        return ['flex flex-col items-start', this.resolvedVariant === 'range' ? 'w-[224px] gap-4' : 'w-full gap-0'];
+    }
+    headerClasses(month) {
+        return ['flex w-full items-center justify-between', month.titleStyle === 'dropdowns' ? '' : 'mb-4'];
     }
-    get leftMonthName() {
-        return this.monthName(this.month - 1);
-    }
-    get rightMonthName() {
-        const rightMonth = this.month % 12;
-        return this.monthName(rightMonth);
-    }
-    get leftCells() {
-        return this.buildMonthCells(this.year, this.month - 1, this.selectedDay, this.mode === 'range' ? this.rangeStartDay : undefined, this.mode === 'range' ? 31 : undefined);
-    }
-    get rightCells() {
-        const rightMonth = this.month % 12;
-        const rightYear = this.month === 12 ? this.year + 1 : this.year;
-        return this.buildMonthCells(rightYear, rightMonth, this.mode === 'range' ? this.rangeEndDay : undefined, 1, this.mode === 'range' ? this.rangeEndDay : undefined);
-    }
-    monthName(monthIndex) {
-        const safe = ((monthIndex % 12) + 12) % 12;
-        return new Date(this.year, safe, 1).toLocaleString('en-US', { month: 'long' });
-    }
-    buildMonthCells(year, monthIndex, selectedDay, rangeStartDay, rangeEndDay) {
-        const firstDay = new Date(year, monthIndex, 1);
-        const startWeekday = firstDay.getDay();
-        const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
-        const cells = [];
-        for (let i = 0; i < 42; i += 1) {
-            const dayNumber = i - startWeekday + 1;
-            const date = new Date(year, monthIndex, dayNumber);
-            const outside = dayNumber < 1 || dayNumber > daysInMonth;
-            const day = date.getDate();
-            const selected = !outside && !!selectedDay && day === selectedDay;
-            const inRange = !outside && !!rangeStartDay && !!rangeEndDay && day >= rangeStartDay && day <= rangeEndDay;
-            cells.push({ date, day, outside, selected, inRange });
-        }
-        return cells;
+    navButtonClasses() {
+        return [
+            'flex h-8 w-8 items-center justify-center rounded-md text-foreground',
+            'disabled:pointer-events-none disabled:opacity-40'
+        ];
+    }
+    navPlaceholderClasses() {
+        return ['h-7 w-7 shrink-0'];
+    }
+    dropdownWrapClasses() {
+        return ['flex w-40 items-center justify-center gap-2'];
+    }
+    dropdownClasses(widthClass) {
+        return ['flex h-8 items-center justify-center gap-1 px-1', widthClass];
+    }
+    dropdownSelectClasses() {
+        return [
+            'text-foreground h-full bg-transparent text-sm font-medium leading-5',
+            'appearance-none border-0 outline-none ring-0 focus:outline-none focus:ring-0 text-center cursor-pointer'
+        ];
+    }
+    get dropdownSelectStyle() {
+        return {
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            MozAppearance: 'none',
+            background: 'transparent',
+            border: '0',
+            boxShadow: 'none',
+            outline: '0',
+            padding: '0',
+            margin: '0'
+        };
+    }
+    calendarGridWrapClasses() {
+        return ['flex w-full flex-col items-start'];
+    }
+    weekdayRowClasses() {
+        return ['flex w-full items-center'];
+    }
+    weekdayCellClasses() {
+        return ['text-muted-foreground flex h-[21px] w-8 items-center justify-center rounded-md text-xs leading-4'];
+    }
+    weekRowClasses() {
+        return ['flex w-full items-start pt-2'];
+    }
+    dayCellClasses(cell) {
+        return [
+            'relative flex h-8 w-8 shrink-0 items-center justify-center',
+            cell.rangeFill ? 'bg-accent' : '',
+            cell.rangeLeftCap ? 'rounded-l-md' : '',
+            cell.rangeRightCap ? 'rounded-r-md' : ''
+        ];
+    }
+    dayButtonClasses(cell) {
+        return [
+            'relative z-10 flex h-8 w-8 items-center justify-center rounded-md text-sm leading-5',
+            cell.selected ? 'bg-primary text-primary-foreground' : cell.rangeFill ? 'text-accent-foreground' : 'text-foreground',
+            cell.muted && !cell.rangeFill ? 'opacity-50' : '',
+            cell.disabled ? 'cursor-not-allowed opacity-40' : '',
+            !cell.disabled && !this.readonly && !cell.selected ? 'hover:bg-accent/70' : ''
+        ];
+    }
+    dayLabelClasses(_cell) {
+        return ['font-normal'];
+    }
+    goToPreviousMonth() {
+        this.setAnchorMonth(this.addMonths(this.getAnchorMonth(), -1));
+    }
+    goToNextMonth() {
+        this.setAnchorMonth(this.addMonths(this.getAnchorMonth(), 1));
+    }
+    onSingleMonthChange(monthValue) {
+        const month = Number(monthValue);
+        if (Number.isNaN(month) || month < 0 || month > 11) {
+            return;
+        }
+        const anchor = this.getAnchorMonth();
+        this.setAnchorMonth(new Date(anchor.getFullYear(), month, 1));
+    }
+    onSingleYearChange(yearValue) {
+        const year = Number(yearValue);
+        if (Number.isNaN(year)) {
+            return;
+        }
+        const anchor = this.getAnchorMonth();
+        this.setAnchorMonth(new Date(year, anchor.getMonth(), 1));
+    }
+    onDatePressed(cell) {
+        const date = this.cloneDate(cell.date);
+        if (cell.disabled) {
+            this.disabledDateClick.emit(date);
+            return;
+        }
+        if (this.readonly) {
+            return;
+        }
+        this.dateClick.emit(date);
+        if (this.resolvedVariant === 'single') {
+            this._value = date;
+            this.valueChange.emit(this.cloneDate(date));
+            this.syncVisibleMonthToDate(date);
+            this.cdr.markForCheck();
+            return;
+        }
+        this.handleRangeSelection(date);
+        this.cdr.markForCheck();
+    }
+    handleRangeSelection(date) {
+        const current = this._rangeValue;
+        const currentStart = current?.start ? this.cloneDate(current.start) : null;
+        const currentEnd = current?.end ? this.cloneDate(current.end) : null;
+        if (!currentStart || (currentStart && currentEnd)) {
+            this._rangeValue = { start: date, end: null };
+            this.rangeValueChange.emit({ start: this.cloneDate(date), end: null });
+            this.syncVisibleMonthToDate(date);
+            return;
+        }
+        if (this.isSameDay(currentStart, date) && !this.allowSameDayRange) {
+            this._rangeValue = { start: date, end: null };
+            this.rangeValueChange.emit({ start: this.cloneDate(date), end: null });
+            return;
+        }
+        const start = this.compareDate(date, currentStart) < 0 ? date : currentStart;
+        const end = this.compareDate(date, currentStart) < 0 ? currentStart : date;
+        if (this.rangeContainsBlockedDate(start, end)) {
+            this.disabledDateClick.emit(this.cloneDate(date));
+            return;
+        }
+        this._rangeValue = { start, end };
+        this.rangeValueChange.emit({ start: this.cloneDate(start), end: this.cloneDate(end) });
+        this.syncVisibleMonthToDate(start);
+    }
+    buildMonthWeeks(month, includeRange) {
+        const firstOfMonth = this.startOfMonth(month);
+        const start = this.startOfWeek(firstOfMonth);
+        const end = this.endOfWeek(this.endOfMonth(firstOfMonth));
+        const weeks = [];
+        let cursor = this.cloneDate(start);
+        while (this.compareDate(cursor, end) <= 0) {
+            const row = [];
+            for (let col = 0; col < 7; col += 1) {
+                row.push(this.buildCell(cursor, month, includeRange));
+                cursor = this.addDays(cursor, 1);
+            }
+            weeks.push(row);
+        }
+        for (const row of weeks) {
+            for (let col = 0; col < row.length; col += 1) {
+                const cell = row[col];
+                if (!cell.inRange) {
+                    continue;
+                }
+                const leftInRow = col > 0 ? row[col - 1].inRange : false;
+                const rightInRow = col < row.length - 1 ? row[col + 1].inRange : false;
+                cell.rangeLeftCap = !leftInRow;
+                cell.rangeRightCap = !rightInRow;
+            }
+        }
+        return weeks;
+    }
+    buildCell(date, visibleMonth, includeRange) {
+        const normalized = this.cloneDate(date);
+        const inCurrentMonth = normalized.getMonth() === visibleMonth.getMonth() && normalized.getFullYear() === visibleMonth.getFullYear();
+        const disabled = this.isBlocked(normalized);
+        const selectedSingle = this.resolvedVariant === 'single' && !!this._value && this.isSameDay(normalized, this._value);
+        const rangeStart = includeRange && !!this._rangeValue?.start && this.isSameDay(normalized, this._rangeValue.start);
+        const rangeEnd = includeRange && !!this._rangeValue?.end && this.isSameDay(normalized, this._rangeValue.end);
+        const inRange = includeRange &&
+            !!this._rangeValue?.start &&
+            !!this._rangeValue?.end &&
+            this.compareDate(normalized, this._rangeValue.start) >= 0 &&
+            this.compareDate(normalized, this._rangeValue.end) <= 0;
+        return {
+            date: normalized,
+            label: normalized.getDate(),
+            muted: !inCurrentMonth,
+            disabled,
+            selected: selectedSingle || rangeStart || rangeEnd,
+            inRange,
+            rangeFill: inRange,
+            rangeLeftCap: false,
+            rangeRightCap: false
+        };
+    }
+    getAnchorMonth() {
+        if (this._month) {
+            return this.cloneDate(this._month);
+        }
+        if (this.resolvedVariant === 'single' && this._value) {
+            return this.startOfMonth(this._value);
+        }
+        if (this.resolvedVariant === 'range' && this._rangeValue?.start) {
+            return this.startOfMonth(this._rangeValue.start);
+        }
+        return this.startOfMonth(DEFAULT_VIEW_MONTH);
+    }
+    setAnchorMonth(month) {
+        this._month = this.startOfMonth(month);
+        this.monthChange.emit(this.cloneDate(this._month));
+    }
+    syncVisibleMonthToDate(date) {
+        const nextMonth = this.startOfMonth(date);
+        if (!this._month || !this.isSameMonth(this._month, nextMonth)) {
+            this._month = nextMonth;
+            this.monthChange.emit(this.cloneDate(nextMonth));
+        }
+    }
+    isBlocked(date) {
+        if (this.minDate && this.compareDate(date, this.minDate) < 0) {
+            return true;
+        }
+        if (this.maxDate && this.compareDate(date, this.maxDate) > 0) {
+            return true;
+        }
+        const blockedSet = new Set((this.disabledDates || []).map((item) => this.dateKey(item)));
+        if (blockedSet.has(this.dateKey(date))) {
+            return true;
+        }
+        return !!this.isDateDisabled?.(this.cloneDate(date));
+    }
+    rangeContainsBlockedDate(start, end) {
+        let cursor = this.cloneDate(start);
+        while (this.compareDate(cursor, end) <= 0) {
+            if (this.isBlocked(cursor)) {
+                return true;
+            }
+            cursor = this.addDays(cursor, 1);
+        }
+        return false;
+    }
+    normalizeDate(value) {
+        if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+            return null;
+        }
+        return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+    }
+    cloneDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    endOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    }
+    startOfWeek(date) {
+        return this.addDays(date, -date.getDay());
+    }
+    endOfWeek(date) {
+        return this.addDays(date, 6 - date.getDay());
+    }
+    addMonths(date, months) {
+        return new Date(date.getFullYear(), date.getMonth() + months, 1);
+    }
+    addDays(date, days) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+    }
+    compareDate(a, b) {
+        return this.dateValue(a) - this.dateValue(b);
+    }
+    dateValue(date) {
+        return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY_MS;
+    }
+    isSameDay(a, b) {
+        return this.compareDate(a, b) === 0;
+    }
+    isSameMonth(a, b) {
+        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+    }
+    dateKey(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }
+    formatMonthShort(date) {
+        return date.toLocaleString('en-US', { month: 'short' });
+    }
+    formatMonthYear(date) {
+        return date.toLocaleString('en-US', { month: 'long', year: 'numeric' });
     }
 }
-PdmCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: { mode: "mode", month: "month", year: "year", selectedDay: "selectedDay", rangeStartDay: "rangeStartDay", rangeEndDay: "rangeEndDay", className: "className" }, ngImport: i0, template: "<section\n  [ngClass]=\"[\n    'rounded-lg border border-border bg-background p-3 shadow-sm',\n    mode === 'range' ? 'w-full max-w-2xl' : 'w-full max-w-sm',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['grid gap-4', mode === 'range' ? 'grid-cols-2' : 'grid-cols-1']\">\n    <div class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u2039</button>\n        <div [ngClass]=\"['flex items-center justify-center gap-1', mode === 'range' ? 'w-full' : 'w-full']\">\n          <ng-container *ngIf=\"mode === 'single'; else monthText\">\n            <span class=\"inline-flex h-8 items-center rounded-md border border-border px-2 text-sm font-medium text-foreground shadow-sm\">Jun</span>\n            <span class=\"inline-flex h-8 items-center rounded-md border border-border px-2 text-sm font-medium text-foreground shadow-sm\">2025</span>\n          </ng-container>\n          <ng-template #monthText>\n            <span class=\"text-sm font-medium text-foreground\">{{ leftMonthName }} {{ year }}</span>\n          </ng-template>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">{{ mode === 'range' ? '' : '\u203A' }}</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-5 items-center justify-center text-xs font-normal text-muted-foreground\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of leftCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground',\n              cell.outside ? 'text-muted-foreground opacity-50' : 'text-foreground',\n              cell.inRange ? 'bg-accent text-accent-foreground' : '',\n              cell.selected ? 'bg-primary text-primary-foreground' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'range'\" class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <span class=\"text-sm font-medium text-foreground\">{{ rightMonthName }} {{ month === 12 ? year + 1 : year }}</span>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u203A</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-5 items-center justify-center text-xs font-normal text-muted-foreground\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of rightCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground',\n              cell.outside ? 'text-muted-foreground opacity-50' : 'text-foreground',\n              cell.inRange ? 'bg-accent text-accent-foreground' : '',\n              cell.selected ? 'bg-primary text-primary-foreground' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: { variant: "variant", className: "className", disabledDates: "disabledDates", minDate: "minDate", maxDate: "maxDate", isDateDisabled: "isDateDisabled", allowSameDayRange: "allowSameDayRange", readonly: "readonly", value: "value", rangeValue: "rangeValue", month: "month" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", monthChange: "monthChange", dateClick: "dateClick", disabledDateClick: "disabledDateClick" }, ngImport: i0, template: "<div [ngClass]=\"rootClasses\" [ngStyle]=\"rootStyle\">\n  <div *ngFor=\"let month of visibleMonths; let monthIndex = index; trackBy: trackByIndex\" [ngClass]=\"monthPanelClasses(monthIndex)\">\n    <div [ngClass]=\"headerClasses(month)\">\n      <button\n        *ngIf=\"month.showPrevButton; else prevPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Previous month\"\n        (click)=\"goToPreviousMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m15 18-6-6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #prevPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n\n      <ng-container *ngIf=\"month.titleStyle === 'dropdowns'; else plainTitle\">\n        <div [ngClass]=\"dropdownWrapClasses()\">\n          <div [ngClass]=\"dropdownClasses('w-[72px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderMonth\"\n              aria-label=\"Month\"\n              (change)=\"onSingleMonthChange($any($event.target).value)\"\n            >\n              <option *ngFor=\"let monthOption of monthOptions\" [value]=\"monthOption.value\">{{ monthOption.label }}</option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n          <div [ngClass]=\"dropdownClasses('w-[82px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderYear\"\n              aria-label=\"Year\"\n              (change)=\"onSingleYearChange($any($event.target).value)\"\n            >\n              <option *ngFor=\"let year of yearOptions\" [value]=\"year\">{{ year }}</option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #plainTitle>\n        <div class=\"flex min-w-0 flex-1 items-center justify-center\">\n          <p class=\"text-foreground text-center text-sm font-medium leading-5\">\n            {{ month.title }}\n          </p>\n        </div>\n      </ng-template>\n\n      <button\n        *ngIf=\"month.showNextButton; else nextPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Next month\"\n        (click)=\"goToNextMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #nextPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n    </div>\n\n    <div [ngClass]=\"calendarGridWrapClasses()\">\n      <div [ngClass]=\"weekdayRowClasses()\">\n        <div *ngFor=\"let day of weekdays; trackBy: trackByIndex\" [ngClass]=\"weekdayCellClasses()\">\n          <span>{{ day }}</span>\n        </div>\n      </div>\n\n      <div *ngFor=\"let week of month.weeks; trackBy: trackByIndex\" [ngClass]=\"weekRowClasses()\">\n        <div *ngFor=\"let cell of week; trackBy: trackByDate\" [ngClass]=\"dayCellClasses(cell)\">\n          <button\n            type=\"button\"\n            [ngClass]=\"dayButtonClasses(cell)\"\n            [disabled]=\"readonly\"\n            [attr.aria-selected]=\"cell.selected\"\n            [attr.aria-disabled]=\"cell.disabled || readonly\"\n            [attr.title]=\"cell.date | date : 'yyyy-MM-dd'\"\n            (click)=\"onDatePressed(cell)\"\n          >\n            <span [ngClass]=\"dayLabelClasses(cell)\">{{ cell.label }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [ngClass]=\"[\n    'rounded-lg border border-border bg-background p-3 shadow-sm',\n    mode === 'range' ? 'w-full max-w-2xl' : 'w-full max-w-sm',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['grid gap-4', mode === 'range' ? 'grid-cols-2' : 'grid-cols-1']\">\n    <div class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u2039</button>\n        <div [ngClass]=\"['flex items-center justify-center gap-1', mode === 'range' ? 'w-full' : 'w-full']\">\n          <ng-container *ngIf=\"mode === 'single'; else monthText\">\n            <span class=\"inline-flex h-8 items-center rounded-md border border-border px-2 text-sm font-medium text-foreground shadow-sm\">Jun</span>\n            <span class=\"inline-flex h-8 items-center rounded-md border border-border px-2 text-sm font-medium text-foreground shadow-sm\">2025</span>\n          </ng-container>\n          <ng-template #monthText>\n            <span class=\"text-sm font-medium text-foreground\">{{ leftMonthName }} {{ year }}</span>\n          </ng-template>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">{{ mode === 'range' ? '' : '\u203A' }}</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-5 items-center justify-center text-xs font-normal text-muted-foreground\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of leftCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground',\n              cell.outside ? 'text-muted-foreground opacity-50' : 'text-foreground',\n              cell.inRange ? 'bg-accent text-accent-foreground' : '',\n              cell.selected ? 'bg-primary text-primary-foreground' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'range'\" class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <span class=\"text-sm font-medium text-foreground\">{{ rightMonthName }} {{ month === 12 ? year + 1 : year }}</span>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u203A</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-5 items-center justify-center text-xs font-normal text-muted-foreground\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of rightCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground',\n              cell.outside ? 'text-muted-foreground opacity-50' : 'text-foreground',\n              cell.inRange ? 'bg-accent text-accent-foreground' : '',\n              cell.selected ? 'bg-primary text-primary-foreground' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n" }]
-        }], propDecorators: { mode: [{
+            args: [{ selector: 'pdm-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\" [ngStyle]=\"rootStyle\">\n  <div *ngFor=\"let month of visibleMonths; let monthIndex = index; trackBy: trackByIndex\" [ngClass]=\"monthPanelClasses(monthIndex)\">\n    <div [ngClass]=\"headerClasses(month)\">\n      <button\n        *ngIf=\"month.showPrevButton; else prevPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Previous month\"\n        (click)=\"goToPreviousMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m15 18-6-6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #prevPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n\n      <ng-container *ngIf=\"month.titleStyle === 'dropdowns'; else plainTitle\">\n        <div [ngClass]=\"dropdownWrapClasses()\">\n          <div [ngClass]=\"dropdownClasses('w-[72px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderMonth\"\n              aria-label=\"Month\"\n              (change)=\"onSingleMonthChange($any($event.target).value)\"\n            >\n              <option *ngFor=\"let monthOption of monthOptions\" [value]=\"monthOption.value\">{{ monthOption.label }}</option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n          <div [ngClass]=\"dropdownClasses('w-[82px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderYear\"\n              aria-label=\"Year\"\n              (change)=\"onSingleYearChange($any($event.target).value)\"\n            >\n              <option *ngFor=\"let year of yearOptions\" [value]=\"year\">{{ year }}</option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #plainTitle>\n        <div class=\"flex min-w-0 flex-1 items-center justify-center\">\n          <p class=\"text-foreground text-center text-sm font-medium leading-5\">\n            {{ month.title }}\n          </p>\n        </div>\n      </ng-template>\n\n      <button\n        *ngIf=\"month.showNextButton; else nextPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Next month\"\n        (click)=\"goToNextMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #nextPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n    </div>\n\n    <div [ngClass]=\"calendarGridWrapClasses()\">\n      <div [ngClass]=\"weekdayRowClasses()\">\n        <div *ngFor=\"let day of weekdays; trackBy: trackByIndex\" [ngClass]=\"weekdayCellClasses()\">\n          <span>{{ day }}</span>\n        </div>\n      </div>\n\n      <div *ngFor=\"let week of month.weeks; trackBy: trackByIndex\" [ngClass]=\"weekRowClasses()\">\n        <div *ngFor=\"let cell of week; trackBy: trackByDate\" [ngClass]=\"dayCellClasses(cell)\">\n          <button\n            type=\"button\"\n            [ngClass]=\"dayButtonClasses(cell)\"\n            [disabled]=\"readonly\"\n            [attr.aria-selected]=\"cell.selected\"\n            [attr.aria-disabled]=\"cell.disabled || readonly\"\n            [attr.title]=\"cell.date | date : 'yyyy-MM-dd'\"\n            (click)=\"onDatePressed(cell)\"\n          >\n            <span [ngClass]=\"dayLabelClasses(cell)\">{{ cell.label }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { variant: [{
                 type: Input
-            }], month: [{
+            }], className: [{
                 type: Input
-            }], year: [{
+            }], disabledDates: [{
                 type: Input
-            }], selectedDay: [{
+            }], minDate: [{
                 type: Input
-            }], rangeStartDay: [{
+            }], maxDate: [{
                 type: Input
-            }], rangeEndDay: [{
+            }], isDateDisabled: [{
                 type: Input
-            }], className: [{
+            }], allowSameDayRange: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], rangeValueChange: [{
+                type: Output
+            }], monthChange: [{
+                type: Output
+            }], dateClick: [{
+                type: Output
+            }], disabledDateClick: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], rangeValue: [{
+                type: Input
+            }], month: [{
                 type: Input
             }] } });
 
@@ -1390,63 +1792,299 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-class PdmDatePickerComponent {
+class PdmLabelComponent {
     constructor() {
-        this.variant = 'default';
+        this.forId = '';
+        this.required = false;
         this.className = '';
-        this.open = false;
-        this.label = 'Date of Birth';
-        this.value = 'Select a date';
-        this.month = 6;
-        this.year = 2025;
-        this.selectedDay = 25;
-        this.time = '10:30:00';
-        this.naturalLanguageValue = 'In 2 days';
-        this.naturalLanguageHint = 'Your post will be published on June 21, 2025.';
-        this.openChange = new EventEmitter();
+    }
+}
+PdmLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmLabelComponent, selector: "pdm-label", inputs: { forId: "forId", required: "required", className: "className" }, ngImport: i0, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n" }]
+        }], propDecorators: { forId: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+let nextDatePickerId = 0;
+class PdmDatePickerComponent {
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this._value = null;
+        this._rangeValue = null;
+        this._open = false;
+        this.instanceId = `pdm-date-picker-${++nextDatePickerId}`;
+        this.triggerFocused = false;
+        this.id = '';
+        this.variant = 'single';
+        this.label = '';
+        this.labelClassName = '';
+        this.className = '';
+        this.triggerClassName = '';
+        this.panelClassName = '';
+        this.placeholder = 'Pick a date';
+        this.rangePlaceholder = 'Pick a date range';
+        this.format = 'MMM d, yyyy';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.invalid = false;
+        this.allowSameDayRange = true;
+        this.closeOnSelect = true;
+        this.minDate = null;
+        this.maxDate = null;
+        this.disabledDates = [];
+        this.isDateDisabled = null;
         this.valueChange = new EventEmitter();
+        this.rangeValueChange = new EventEmitter();
+        this.openChange = new EventEmitter();
+        this.monthChange = new EventEmitter();
     }
-    toggle() {
-        this.openChange.emit(!this.open);
+    set open(value) {
+        this._open = !!value;
+        this.cdr.markForCheck();
     }
-    selectPreset(value) {
-        this.valueChange.emit(value);
+    get open() {
+        return this._open;
+    }
+    set value(value) {
+        this._value = this.normalizeDate(value);
+        this.cdr.markForCheck();
+    }
+    get value() {
+        return this._value;
+    }
+    set rangeValue(value) {
+        this._rangeValue = value
+            ? {
+                start: this.normalizeDate(value.start),
+                end: this.normalizeDate(value.end)
+            }
+            : null;
+        this.cdr.markForCheck();
+    }
+    get rangeValue() {
+        return this._rangeValue;
+    }
+    get resolvedVariant() {
+        return this.variant === 'range' ? 'range' : 'single';
+    }
+    get triggerId() {
+        return this.id || `${this.instanceId}-trigger`;
+    }
+    get panelId() {
+        return `${this.id || this.instanceId}-panel`;
+    }
+    get hasSingleValue() {
+        return this.resolvedVariant === 'single' && !!this._value;
+    }
+    get hasRangeValue() {
+        return this.resolvedVariant === 'range' && !!this._rangeValue?.start;
+    }
+    get displayText() {
+        if (this.resolvedVariant === 'single') {
+            return this._value ? this.formatDate(this._value) : this.placeholder;
+        }
+        const start = this._rangeValue?.start ?? null;
+        const end = this._rangeValue?.end ?? null;
+        if (!start) {
+            return this.rangePlaceholder;
+        }
+        if (!end) {
+            return `${this.formatDate(start)} -`;
+        }
+        return `${this.formatDate(start)} - ${this.formatDate(end)}`;
+    }
+    get textClasses() {
+        const hasValue = this.resolvedVariant === 'single' ? this.hasSingleValue : this.hasRangeValue;
+        return [
+            'min-w-0 flex-1 truncate text-left text-sm leading-5',
+            hasValue ? 'text-foreground' : 'text-muted-foreground'
+        ];
+    }
+    get rootClasses() {
+        return [
+            'grid gap-2',
+            this.resolvedVariant === 'range' ? 'w-[280px]' : 'w-[197px]',
+            this.className
+        ];
+    }
+    get triggerClasses() {
+        const focusStyle = this.open || this.triggerFocused;
+        return [
+            'relative flex w-full items-center gap-2 overflow-hidden rounded-lg border px-3 py-[7.5px] text-left shadow-xs outline-none transition-colors',
+            'min-h-[36px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+            focusStyle
+                ? 'bg-accent border-neutral-400 ring-3 ring-neutral-300'
+                : 'bg-input border-input',
+            this.invalid ? 'border-destructive ring-destructive/20' : '',
+            this.triggerClassName
+        ];
+    }
+    get panelClasses() {
+        return [
+            'absolute left-0 top-full z-30 mt-2',
+            this.panelClassName
+        ];
+    }
+    toggleOpen() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.setOpen(!this.open);
+    }
+    onTriggerFocus() {
+        this.triggerFocused = true;
+        this.cdr.markForCheck();
+    }
+    onTriggerBlur() {
+        this.triggerFocused = false;
+        this.cdr.markForCheck();
+    }
+    onCalendarValueChange(value) {
+        this._value = this.normalizeDate(value);
+        this.valueChange.emit(this._value ? this.cloneDate(this._value) : null);
+        if (this.closeOnSelect && this._value) {
+            this.setOpen(false);
+        }
+        else {
+            this.cdr.markForCheck();
+        }
     }
-    get monthLabel() {
-        return new Date(this.year, this.month - 1, 1).toLocaleString('en-US', { month: 'short' });
+    onCalendarRangeValueChange(value) {
+        this._rangeValue = value
+            ? {
+                start: this.normalizeDate(value.start),
+                end: this.normalizeDate(value.end)
+            }
+            : null;
+        this.rangeValueChange.emit(this._rangeValue
+            ? {
+                start: this._rangeValue.start ? this.cloneDate(this._rangeValue.start) : null,
+                end: this._rangeValue.end ? this.cloneDate(this._rangeValue.end) : null
+            }
+            : null);
+        if (this.closeOnSelect && this._rangeValue?.start && this._rangeValue?.end) {
+            this.setOpen(false);
+            return;
+        }
+        this.cdr.markForCheck();
+    }
+    onCalendarMonthChange(month) {
+        this.monthChange.emit(this.cloneDate(month));
+    }
+    onEscape() {
+        if (this.open) {
+            this.setOpen(false);
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.open) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.elementRef.nativeElement.contains(target)) {
+            this.setOpen(false);
+        }
+    }
+    setOpen(nextOpen) {
+        if (this._open === nextOpen) {
+            return;
+        }
+        this._open = nextOpen;
+        this.openChange.emit(this._open);
+        this.cdr.markForCheck();
+    }
+    formatDate(date) {
+        try {
+            return format(date, this.format || 'MMM d, yyyy');
+        }
+        catch {
+            return format(date, 'MMM d, yyyy');
+        }
+    }
+    normalizeDate(value) {
+        if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+            return null;
+        }
+        return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+    }
+    cloneDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
 }
-PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { variant: "variant", className: "className", open: "open", label: "label", value: "value", month: "month", year: "year", selectedDay: "selectedDay", time: "time", naturalLanguageValue: "naturalLanguageValue", naturalLanguageHint: "naturalLanguageHint" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col gap-3', className]\" class=\"w-full max-w-sm\">\n  <label class=\"text-sm font-medium text-foreground\">{{ label }}</label>\n\n  <div class=\"flex items-center gap-2\" *ngIf=\"variant === 'date-time'\">\n    <button type=\"button\" class=\"flex h-9 flex-1 items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm\" (click)=\"toggle()\">\n      <span class=\"truncate text-xs text-foreground\">{{ value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n    <div class=\"flex h-9 w-24 items-center rounded-md border border-input bg-transparent px-3 py-1 text-xs text-foreground shadow-sm\">{{ time }}</div>\n  </div>\n\n  <div *ngIf=\"variant !== 'date-time'\" class=\"flex flex-col gap-2\">\n    <button type=\"button\" class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm\" (click)=\"toggle()\">\n      <span class=\"truncate text-sm text-foreground\">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n\n    <p *ngIf=\"variant === 'natural-language'\" class=\"text-xs text-muted-foreground\">{{ naturalLanguageHint }}</p>\n  </div>\n\n  <div *ngIf=\"open\" class=\"w-full rounded-lg border border-border bg-background p-3 shadow-sm\">\n    <div class=\"mb-4 flex items-center justify-between\">\n      <button type=\"button\" class=\"h-8 w-8 rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u2039</button>\n      <div class=\"flex items-center gap-1.5\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-md border border-input px-2 text-sm font-medium text-foreground shadow-sm\">{{ monthLabel }} <span>\u02C5</span></button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-md border border-input px-2 text-sm font-medium text-foreground shadow-sm\">{{ year }} <span>\u02C5</span></button>\n      </div>\n      <button type=\"button\" class=\"h-8 w-8 rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u203A</button>\n    </div>\n\n    <pdm-calendar [month]=\"month\" [year]=\"year\" [selectedDay]=\"selectedDay\" mode=\"single\"></pdm-calendar>\n\n    <div *ngIf=\"variant === 'with-input' || variant === 'natural-language'\" class=\"mt-3 flex gap-2\">\n      <button type=\"button\" class=\"h-8 rounded-md border border-input px-3 text-xs text-foreground\" (click)=\"selectPreset('Today')\">Today</button>\n      <button type=\"button\" class=\"h-8 rounded-md border border-input px-3 text-xs text-foreground\" (click)=\"selectPreset('Tomorrow')\">Tomorrow</button>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["mode", "month", "year", "selectedDay", "rangeStartDay", "rangeEndDay", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <div class=\"relative inline-block w-full\">\n    <button\n      type=\"button\"\n      [id]=\"triggerId\"\n      [disabled]=\"disabled\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"triggerClasses\"\n      [attr.title]=\"displayText\"\n      (click)=\"toggleOpen()\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur()\"\n    >\n      <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n          <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n          <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </span>\n\n      <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n    </button>\n\n    <div *ngIf=\"open\" [id]=\"panelId\" [ngClass]=\"panelClasses\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n      <pdm-calendar\n        [variant]=\"resolvedVariant\"\n        [value]=\"value\"\n        [rangeValue]=\"rangeValue\"\n        [readonly]=\"readonly\"\n        [allowSameDayRange]=\"allowSameDayRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [disabledDates]=\"disabledDates\"\n        [isDateDisabled]=\"isDateDisabled\"\n        (valueChange)=\"onCalendarValueChange($event)\"\n        (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n        (monthChange)=\"onCalendarMonthChange($event)\"\n      ></pdm-calendar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }, { kind: "component", type: PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex flex-col gap-3', className]\" class=\"w-full max-w-sm\">\n  <label class=\"text-sm font-medium text-foreground\">{{ label }}</label>\n\n  <div class=\"flex items-center gap-2\" *ngIf=\"variant === 'date-time'\">\n    <button type=\"button\" class=\"flex h-9 flex-1 items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm\" (click)=\"toggle()\">\n      <span class=\"truncate text-xs text-foreground\">{{ value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n    <div class=\"flex h-9 w-24 items-center rounded-md border border-input bg-transparent px-3 py-1 text-xs text-foreground shadow-sm\">{{ time }}</div>\n  </div>\n\n  <div *ngIf=\"variant !== 'date-time'\" class=\"flex flex-col gap-2\">\n    <button type=\"button\" class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm\" (click)=\"toggle()\">\n      <span class=\"truncate text-sm text-foreground\">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n\n    <p *ngIf=\"variant === 'natural-language'\" class=\"text-xs text-muted-foreground\">{{ naturalLanguageHint }}</p>\n  </div>\n\n  <div *ngIf=\"open\" class=\"w-full rounded-lg border border-border bg-background p-3 shadow-sm\">\n    <div class=\"mb-4 flex items-center justify-between\">\n      <button type=\"button\" class=\"h-8 w-8 rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u2039</button>\n      <div class=\"flex items-center gap-1.5\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-md border border-input px-2 text-sm font-medium text-foreground shadow-sm\">{{ monthLabel }} <span>\u02C5</span></button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-md border border-input px-2 text-sm font-medium text-foreground shadow-sm\">{{ year }} <span>\u02C5</span></button>\n      </div>\n      <button type=\"button\" class=\"h-8 w-8 rounded-md text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\">\u203A</button>\n    </div>\n\n    <pdm-calendar [month]=\"month\" [year]=\"year\" [selectedDay]=\"selectedDay\" mode=\"single\"></pdm-calendar>\n\n    <div *ngIf=\"variant === 'with-input' || variant === 'natural-language'\" class=\"mt-3 flex gap-2\">\n      <button type=\"button\" class=\"h-8 rounded-md border border-input px-3 text-xs text-foreground\" (click)=\"selectPreset('Today')\">Today</button>\n      <button type=\"button\" class=\"h-8 rounded-md border border-input px-3 text-xs text-foreground\" (click)=\"selectPreset('Tomorrow')\">Tomorrow</button>\n    </div>\n  </div>\n</section>\n" }]
-        }], propDecorators: { variant: [{
+            args: [{ selector: 'pdm-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <div class=\"relative inline-block w-full\">\n    <button\n      type=\"button\"\n      [id]=\"triggerId\"\n      [disabled]=\"disabled\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"triggerClasses\"\n      [attr.title]=\"displayText\"\n      (click)=\"toggleOpen()\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur()\"\n    >\n      <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n          <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n          <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </span>\n\n      <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n    </button>\n\n    <div *ngIf=\"open\" [id]=\"panelId\" [ngClass]=\"panelClasses\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n      <pdm-calendar\n        [variant]=\"resolvedVariant\"\n        [value]=\"value\"\n        [rangeValue]=\"rangeValue\"\n        [readonly]=\"readonly\"\n        [allowSameDayRange]=\"allowSameDayRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [disabledDates]=\"disabledDates\"\n        [isDateDisabled]=\"isDateDisabled\"\n        (valueChange)=\"onCalendarValueChange($event)\"\n        (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n        (monthChange)=\"onCalendarMonthChange($event)\"\n      ></pdm-calendar>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClassName: [{
                 type: Input
             }], className: [{
                 type: Input
-            }], open: [{
+            }], triggerClassName: [{
                 type: Input
-            }], label: [{
+            }], panelClassName: [{
                 type: Input
-            }], value: [{
+            }], placeholder: [{
                 type: Input
-            }], month: [{
+            }], rangePlaceholder: [{
                 type: Input
-            }], year: [{
+            }], format: [{
                 type: Input
-            }], selectedDay: [{
+            }], disabled: [{
                 type: Input
-            }], time: [{
+            }], readonly: [{
+                type: Input
+            }], required: [{
                 type: Input
-            }], naturalLanguageValue: [{
+            }], invalid: [{
+                type: Input
+            }], allowSameDayRange: [{
+                type: Input
+            }], closeOnSelect: [{
                 type: Input
-            }], naturalLanguageHint: [{
+            }], minDate: [{
                 type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], isDateDisabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], rangeValueChange: [{
+                type: Output
             }], openChange: [{
                 type: Output
-            }], valueChange: [{
+            }], monthChange: [{
                 type: Output
+            }], open: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], rangeValue: [{
+                type: Input
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class PdmDialogComponent {
@@ -2267,26 +2905,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class PdmLabelComponent {
-    constructor() {
-        this.forId = '';
-        this.required = false;
-        this.className = '';
-    }
-}
-PdmLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmLabelComponent, selector: "pdm-label", inputs: { forId: "forId", required: "required", className: "className" }, ngImport: i0, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n" }]
-        }], propDecorators: { forId: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
 class PdmMenubarComponent {
     constructor() {
         this.menus = [];