ms-design-system 0.0.39 → 0.0.40

package/fesm2022/ms-design-system.mjs

@@ -3609,24 +3609,657 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class MsDesignSystemModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [i1$2.InlineSVGModule, MsButton, MsDropdown, MsCheckbox, MsBadge, MsToggle, MsRadioButton, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsTooltipDirective, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
-            MsCommentBox, MsToaster], exports: [InlineSVGModule$1, MsButton, MsDropdown, MsCheckbox, MsBadge, MsToggle, MsRadioButton, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
-            MsCommentBox, MsToaster] });
+            MsCommentBox, MsToaster, MsDatePicker], exports: [InlineSVGModule$1, MsButton, MsDropdown, MsCheckbox, MsBadge, MsToggle, MsRadioButton, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
+            MsCommentBox, MsToaster, MsDatePicker] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, providers: [TopbarService], imports: [InlineSVGModule$1.forRoot(), MsButton, MsDropdown, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
-            MsToaster, InlineSVGModule$1] });
+            MsToaster, MsDatePicker, InlineSVGModule$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [InlineSVGModule$1.forRoot(), MsButton, MsDropdown, MsCheckbox, MsBadge, MsToggle, MsRadioButton, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsTooltipDirective, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
-                        MsCommentBox, MsToaster
+                        MsCommentBox, MsToaster, MsDatePicker
                     ], // standalone components can be imported
                     exports: [InlineSVGModule$1, MsButton, MsDropdown, MsCheckbox, MsBadge, MsToggle, MsRadioButton, MsInputField, MsTextArea, MsAvatar, MsSidebar, MsTooltip, MsPagination, MsSpinner, MsFileUploader, MsIcon, MsTopbar, MsTabs, MsBreadcrumb, MsFlagIcon,
-                        MsCommentBox, MsToaster
+                        MsCommentBox, MsToaster, MsDatePicker
                     ],
                     providers: [TopbarService],
                 }]
         }] });
 
+class Calendar {
+    mode = 'single';
+    dateChange = new EventEmitter();
+    selectedDate = null;
+    fromDate = null;
+    toDate = null;
+    leftMonth = new Date().getMonth();
+    leftYear = new Date().getFullYear();
+    rightMonth = new Date().getMonth();
+    rightYear = new Date().getFullYear();
+    monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    today = new Date();
+    ngOnInit() { }
+    prevMonth(side) {
+        if (this.mode === 'single') {
+            if (this.leftMonth === 0) {
+                this.leftMonth = 11;
+                this.leftYear--;
+            }
+            else
+                this.leftMonth--;
+        }
+        else {
+            if (side === 'left') {
+                if (this.leftMonth === 0) {
+                    this.leftMonth = 11;
+                    this.leftYear--;
+                }
+                else
+                    this.leftMonth--;
+            }
+            else {
+                if (this.rightMonth === 0) {
+                    this.rightMonth = 11;
+                    this.rightYear--;
+                }
+                else
+                    this.rightMonth--;
+            }
+        }
+    }
+    nextMonth(side) {
+        if (this.mode === 'single') {
+            if (this.leftMonth === 11) {
+                this.leftMonth = 0;
+                this.leftYear++;
+            }
+            else
+                this.leftMonth++;
+        }
+        else {
+            if (side === 'left') {
+                if (this.leftMonth === 11) {
+                    this.leftMonth = 0;
+                    this.leftYear++;
+                }
+                else
+                    this.leftMonth++;
+            }
+            else {
+                if (this.rightMonth === 11) {
+                    this.rightMonth = 0;
+                    this.rightYear++;
+                }
+                else
+                    this.rightMonth++;
+            }
+        }
+    }
+    // Select date
+    select(date) {
+        if (this.mode === 'single') {
+            this.selectedDate = date;
+            this.dateChange.emit(date);
+        }
+        else {
+            if (!this.fromDate || this.toDate) {
+                this.fromDate = date;
+                this.toDate = null;
+            }
+            else {
+                this.toDate = date;
+                if (this.fromDate.getTime() > this.toDate.getTime()) {
+                    // [this.fromDate, this.toDate] = [this.toDate, this.fromDate];
+                    this.fromDate = date;
+                    this.toDate = null;
+                }
+                // this.dateChange.emit({ from: this.fromDate, to: this.toDate });
+                // if (this.fromDate && this.toDate) this.dateChange.emit({ from: this.fromDate, to: this.toDate });
+                // else if (this.fromDate) this.dateChange.emit({ from: this.fromDate, to: this.fromDate });
+            }
+        }
+    }
+    getDayClasses(day, index, allDays) {
+        let classes = '';
+        if (this.isInRange(day.date))
+            classes += ' range';
+        if (this.isToday(day.date))
+            classes += ' today';
+        if (day.type !== 'current')
+            classes += ' disabled';
+        const rowStartIndex = Math.floor(index / 7) * 7;
+        const rowEndIndex = rowStartIndex + 6;
+        const rowDays = allDays.slice(rowStartIndex, rowEndIndex + 1);
+        const firstInRange = rowDays.find(d => this.isInRange(d.date));
+        const lastInRange = [...rowDays].reverse().find(d => this.isInRange(d.date));
+        if (firstInRange && day.date.getTime() === firstInRange.date.getTime()) {
+            classes += ' range-start';
+        }
+        if (lastInRange && day.date.getTime() === lastInRange.date.getTime()) {
+            classes += ' range-end';
+        }
+        if (this.fromDate && day.date.getTime() === this.fromDate.getTime()) {
+            classes += ' range-first';
+        }
+        if (this.toDate && day.date.getTime() === this.toDate.getTime()) {
+            classes += ' range-last';
+        }
+        return classes;
+    }
+    onCancel() {
+        this.fromDate = null;
+        this.toDate = null;
+        this.dateChange.emit({ from: null, to: null });
+    }
+    onApply() {
+        if (this.fromDate && this.toDate) {
+            this.dateChange.emit({ from: this.fromDate, to: this.toDate });
+        }
+        else if (this.fromDate) {
+            this.dateChange.emit({ from: this.fromDate, to: this.fromDate });
+        }
+    }
+    isSameDate(d1, d2) {
+        if (!d1 || !d2)
+            return false;
+        return d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate();
+    }
+    isToday(date) {
+        return this.isSameDate(date, this.today);
+    }
+    isInRange(date) {
+        if (!this.fromDate || !this.toDate)
+            return false;
+        return date >= this.fromDate && date <= this.toDate;
+    }
+    isRowRangeStart(index, allDays) {
+        const rowStartIndex = Math.floor(index / 7) * 7;
+        const rowEndIndex = rowStartIndex + 6;
+        const rowDays = allDays.slice(rowStartIndex, rowEndIndex + 1);
+        const firstInRange = rowDays.find(d => this.isInRange(d.date));
+        return firstInRange ? firstInRange.date.getTime() === allDays[index].date.getTime() : false;
+    }
+    // Get last in-range day of the row
+    isRowRangeEnd(index, allDays) {
+        const rowStartIndex = Math.floor(index / 7) * 7;
+        const rowEndIndex = rowStartIndex + 6;
+        const rowDays = allDays.slice(rowStartIndex, rowEndIndex + 1);
+        const lastInRange = [...rowDays].reverse().find(d => this.isInRange(d.date));
+        return lastInRange ? lastInRange.date.getTime() === allDays[index].date.getTime() : false;
+    }
+    getDays(month, year) {
+        const days = [];
+        const firstDay = new Date(year, month, 1).getDay();
+        const lastDate = new Date(year, month + 1, 0).getDate();
+        const prevMonth = month === 0 ? 11 : month - 1;
+        const prevYear = month === 0 ? year - 1 : year;
+        const prevLastDate = new Date(year, month, 0).getDate();
+        // Previous month padding
+        for (let i = firstDay - 1; i >= 0; i--) {
+            days.push({ date: new Date(prevYear, prevMonth, prevLastDate - i), type: 'prev' });
+        }
+        // Current month
+        for (let d = 1; d <= lastDate; d++) {
+            days.push({ date: new Date(year, month, d), type: 'current' });
+        }
+        // const totalCellsNeeded = 5 * 7; // 5 rows × 7 columns = 35 cells
+        const totalCellsNeeded = 6 * 7; // 6 rows × 7 columns = 42 cells
+        const nextMonth = month === 11 ? 0 : month + 1;
+        const nextYear = month === 11 ? year + 1 : year;
+        const nextDaysCount = totalCellsNeeded - days.length;
+        for (let i = 1; i <= nextDaysCount; i++) {
+            days.push({ date: new Date(nextYear, nextMonth, i), type: 'next' });
+        }
+        return days;
+    }
+    get leftDays() { return this.getDays(this.leftMonth, this.leftYear); }
+    get rightDays() { return this.getDays(this.rightMonth, this.rightYear); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Calendar, isStandalone: true, selector: "app-calendar", inputs: { mode: "mode", selectedDate: "selectedDate", fromDate: "fromDate", toDate: "toDate", leftMonth: "leftMonth", leftYear: "leftYear", rightMonth: "rightMonth", rightYear: "rightYear" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"calendar-wrapper\">\n\n    <!-- SINGLE MODE -->\n    <ng-container *ngIf=\"mode==='single'\">\n        <div class=\"calendar single-calendar\">\n            <div class=\"header\">\n                <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n                <div class=\"icons\">\n                    <!-- <span class=\"icon\" (click)=\"prevMonth()\">&lt;</span> -->\n                    <!-- <span class=\"icon\" (click)=\"nextMonth()\">&gt;</span> -->\n                    <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n                    <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n                </div>\n            </div>\n            <div class=\"grid\">\n                <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n                </div>\n                <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n                    [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n                    [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n                    {{ d.date.getDate() }}\n                    <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                        [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"mode === 'range'\">\n        <div class=\"range-calendar\">\n\n            <div class=\"calendars\">\n\n                <!-- LEFT CALENDAR -->\n                <div class=\"calendar\">\n                    <div class=\"header\">\n                        <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n                        <div class=\"icons\">\n                            <!-- <span class=\"icon\" (click)=\"prevMonth('left')\">&lt;</span>\n                            <span class=\"icon\" (click)=\"nextMonth('left')\">&gt;</span> -->\n                            <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n                            <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"grid\">\n                        <!-- Day names -->\n                        <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n                            <strong>{{ d }}</strong>\n                        </div>\n\n                        <!-- Days -->\n                        <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n                            'is-in-range': isInRange(d.date),\n                            'range-start': isRowRangeStart(i, leftDays),\n                            'range-end': isRowRangeEnd(i, leftDays)\n                        }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n                            <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n                                <span>{{ d.date.getDate() }}</span>\n                                <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                                    [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n\n                <!-- RIGHT CALENDAR -->\n                <div class=\"calendar\">\n                    <div class=\"header\">\n                        <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n                        <div class=\"icons\">\n                            <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n                            <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n                            <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n                            <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"grid\">\n                        <!-- Day names -->\n                        <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n                            <strong>{{ d }}</strong>\n                        </div>\n\n                        <!-- Days -->\n                        <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n                            'is-in-range': isInRange(d.date),\n                            'range-start': isRowRangeStart(i, rightDays),\n                            'range-end': isRowRangeEnd(i, rightDays)\n                        }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n                            <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n                                <span>{{ d.date.getDate() }}</span>\n                                <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                                    [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n\n            <!-- RANGE ACTIONS -->\n            <div class=\"range-actions\">\n                <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n                <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n            </div>\n\n        </div>\n    </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar', imports: [CommonModule, MsDesignSystemModule], template: "<div class=\"calendar-wrapper\">\n\n    <!-- SINGLE MODE -->\n    <ng-container *ngIf=\"mode==='single'\">\n        <div class=\"calendar single-calendar\">\n            <div class=\"header\">\n                <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n                <div class=\"icons\">\n                    <!-- <span class=\"icon\" (click)=\"prevMonth()\">&lt;</span> -->\n                    <!-- <span class=\"icon\" (click)=\"nextMonth()\">&gt;</span> -->\n                    <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n                    <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n                </div>\n            </div>\n            <div class=\"grid\">\n                <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n                </div>\n                <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n                    [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n                    [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n                    {{ d.date.getDate() }}\n                    <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                        [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"mode === 'range'\">\n        <div class=\"range-calendar\">\n\n            <div class=\"calendars\">\n\n                <!-- LEFT CALENDAR -->\n                <div class=\"calendar\">\n                    <div class=\"header\">\n                        <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n                        <div class=\"icons\">\n                            <!-- <span class=\"icon\" (click)=\"prevMonth('left')\">&lt;</span>\n                            <span class=\"icon\" (click)=\"nextMonth('left')\">&gt;</span> -->\n                            <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n                            <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"grid\">\n                        <!-- Day names -->\n                        <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n                            <strong>{{ d }}</strong>\n                        </div>\n\n                        <!-- Days -->\n                        <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n                            'is-in-range': isInRange(d.date),\n                            'range-start': isRowRangeStart(i, leftDays),\n                            'range-end': isRowRangeEnd(i, leftDays)\n                        }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n                            <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n                                <span>{{ d.date.getDate() }}</span>\n                                <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                                    [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n\n                <!-- RIGHT CALENDAR -->\n                <div class=\"calendar\">\n                    <div class=\"header\">\n                        <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n                        <div class=\"icons\">\n                            <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n                            <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n                            <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n                            <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"grid\">\n                        <!-- Day names -->\n                        <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n                            <strong>{{ d }}</strong>\n                        </div>\n\n                        <!-- Days -->\n                        <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n                            'is-in-range': isInRange(d.date),\n                            'range-start': isRowRangeStart(i, rightDays),\n                            'range-end': isRowRangeEnd(i, rightDays)\n                        }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n                            <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n                                <span>{{ d.date.getDate() }}</span>\n                                <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n                                    [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n\n            <!-- RANGE ACTIONS -->\n            <div class=\"range-actions\">\n                <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n                <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n            </div>\n\n        </div>\n    </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], selectedDate: [{
+                type: Input
+            }], fromDate: [{
+                type: Input
+            }], toDate: [{
+                type: Input
+            }], leftMonth: [{
+                type: Input
+            }], leftYear: [{
+                type: Input
+            }], rightMonth: [{
+                type: Input
+            }], rightYear: [{
+                type: Input
+            }] } });
+
+class MsDatePicker {
+    _value = ['', ''];
+    container;
+    required = false;
+    readonly = false;
+    pattern = '';
+    skeleton = false;
+    prefix = '';
+    dateType = 'datepicker';
+    disabled = false;
+    invalid = false;
+    selectedSate = '';
+    minDate = '';
+    maxDate = '';
+    mode = 'single';
+    dateChange = new EventEmitter();
+    isCalendarOpen = false;
+    hoveredDate = null;
+    showCalendar = false;
+    leftMonth = new Date().getMonth();
+    leftYear = new Date().getFullYear();
+    rightMonth = new Date().getMonth();
+    rightYear = new Date().getFullYear();
+    onInputClick(event) {
+        event.stopPropagation();
+        this.open('single');
+    }
+    open(mode, field) {
+        if (this.mode !== mode) {
+            this.mode = mode;
+            this.showCalendar = true;
+            return;
+        }
+        this.showCalendar = !this.showCalendar;
+    }
+    field = 'from';
+    singleDateValue = '';
+    // singleDate: string = '';
+    rangeDate = '';
+    fromDateInput = '';
+    toDateInput = '';
+    onDateChange(value) {
+        if (this.mode === 'single' && value instanceof Date) {
+            this.singleDateValue = this.formatDate(value);
+            this.dateChange.emit(this.singleDateValue);
+        }
+        if (this.mode === 'range') {
+            if (this.dateType === 'daterange') {
+                // single input range
+                if (value?.from && value?.to) {
+                    this.rangeDate = `${this.formatDate(value.from)} - ${this.formatDate(value.to)}`;
+                    this.dateChange.emit(this.rangeDate);
+                }
+                else {
+                    this.rangeDate = '';
+                }
+            }
+            else if (this.dateType === 'daterange-dual') {
+                // dual input range
+                if (this.field === 'from' && value instanceof Date)
+                    this.fromDateInput = this.formatDate(value);
+                if (this.field === 'to' && value instanceof Date)
+                    this.toDateInput = this.formatDate(value);
+            }
+        }
+    }
+    get singleDate() {
+        return this.singleDateValue;
+    }
+    set singleDate(value) {
+        const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
+        this.singleDateValue = regex.test(value) ? value : '';
+    }
+    formatDate(date) {
+        const mm = String(date.getMonth() + 1).padStart(2, '0');
+        const dd = String(date.getDate()).padStart(2, '0');
+        const yyyy = date.getFullYear();
+        return `${mm}/${dd}/${yyyy}`;
+    }
+    onDocumentClick(event) {
+        if (!this.container.nativeElement.contains(event.target)) {
+            this.showCalendar = false;
+        }
+    }
+    selectedDate = null;
+    fromDate = null;
+    toDate = null;
+    onSingleDateInput(event) {
+        const input = event.target;
+        const rawValue = input.value;
+        // Format the typed value leniently
+        input.value = this.formatTypingDate(rawValue);
+        this.singleDate = input.value;
+        // Only update calendar if input has at least month and day
+        if (this.singleDate.length >= 5) { // MM/DD at least
+            const date = this.parseDateString(this.singleDate);
+            if (date) {
+                this.selectedDate = date;
+                this.leftMonth = date.getMonth();
+                this.leftYear = date.getFullYear();
+            }
+        }
+    }
+    onRangeDateInput(event) {
+        const input = event.target;
+        input.value = this.formatTypingRangeDate(input.value);
+        this.rangeDate = input.value;
+        const parts = input.value.split('-');
+        if (parts[0]) {
+            const from = this.parseDateString(parts[0].trim());
+            if (from) {
+                this.fromDate = from;
+                this.leftMonth = from.getMonth();
+                this.leftYear = from.getFullYear();
+            }
+        }
+        if (parts[1]) {
+            const to = this.parseDateString(parts[1].trim());
+            if (to) {
+                this.toDate = to;
+                this.rightMonth = to.getMonth();
+                this.rightYear = to.getFullYear();
+            }
+        }
+    }
+    onDualDateInput(event, field) {
+        const formatted = this.formatTypingDate(event.target.value);
+        if (field === 'from')
+            this.fromDateInput = formatted;
+        else
+            this.toDateInput = formatted;
+    }
+    // onSingleDateBlur() {
+    // if (!this.isValidDate(this.singleDate)) {
+    //   this.singleDate = '';
+    //   this.selectedDate = null;
+    // }
+    // if (this.singleDate && !this.isValidDate(this.singleDate)) {
+    //   this.selectedDate = null;
+    // }
+    // }
+    // onRangeDateBlur() {
+    //   if (!this.isValidDate(this.rangeDate)) this.rangeDate = '';
+    // }
+    onDualDateBlur(field) {
+        if (field === 'from' && !this.isValidDate(this.fromDateInput))
+            this.fromDateInput = '';
+        if (field === 'to' && !this.isValidDate(this.toDateInput))
+            this.toDateInput = '';
+    }
+    formatTypingRangeDate(value) {
+        let cleanValue = value.replace(/[^0-9-]/g, '');
+        // Ensure only one dash exists (prevent multiple)
+        const dashIndex = cleanValue.indexOf('-');
+        let firstPart = '';
+        let secondPart = '';
+        if (dashIndex >= 0) {
+            firstPart = cleanValue.substring(0, dashIndex).trim();
+            secondPart = cleanValue.substring(dashIndex + 1).trim();
+        }
+        else {
+            firstPart = cleanValue;
+        }
+        const first = this.formatTypingDateForRange(firstPart);
+        const second = secondPart ? this.formatTypingDateForRange(secondPart) : '';
+        return second ? `${first} - ${second}` : first;
+    }
+    formatTypingDateForRange(value) {
+        // Keep only digits and dash
+        let clean = value.replace(/[^0-9-]/g, '');
+        // Split by the first dash
+        const dashIndex = clean.indexOf('-');
+        let firstPart = '';
+        let secondPart = '';
+        if (dashIndex >= 0) {
+            firstPart = clean.substring(0, dashIndex).trim();
+            secondPart = clean.substring(dashIndex + 1).trim();
+        }
+        else {
+            firstPart = clean;
+        }
+        // Format each part independently
+        const first = this.formatTypingDatePart(firstPart);
+        const second = secondPart ? this.formatTypingDatePart(secondPart) : '';
+        // Join with dash if second exists
+        return second ? `${first} - ${second}` : first;
+    }
+    // private formatTypingDatePart(value: string): string {
+    //   let digits = value.replace(/\D/g, '').substring(0, 8); // MMDDYYYY max
+    //   let mm = '';
+    //   let dd = '';
+    //   let yyyy = '';
+    //   // Month
+    //   if (digits.length >= 1) {
+    //     mm = digits.substring(0, 2);
+    //     if (parseInt(mm) > 12) mm = '12';
+    //   }
+    //   // Day
+    //   if (digits.length >= 3) {
+    //     dd = digits.substring(2, 4);
+    //     if (parseInt(dd) > 31) dd = '31';
+    //   } else if (digits.length > 2) {
+    //     dd = digits.substring(2);
+    //   }
+    //   // Year
+    //   if (digits.length > 4) {
+    //     yyyy = digits.substring(4, 8);
+    //     if (yyyy.length === 4) {
+    //       let yearNum = parseInt(yyyy);
+    //       if (yearNum < 1900) yearNum = 1900;
+    //       if (yearNum > 2099) yearNum = 2099;
+    //       yyyy = yearNum.toString();
+    //     }
+    //   }
+    //   let formatted = mm;
+    //   if (dd) formatted += '/' + dd;
+    //   if (yyyy) formatted += '/' + yyyy;
+    //   // Limit to 10 characters
+    //   return formatted.substring(0, 10);
+    // }
+    formatTypingDatePart(value) {
+        let digits = value.replace(/\D/g, '').substring(0, 8); // MMDDYYYY
+        let mm = '';
+        let dd = '';
+        let yyyy = '';
+        // Helpers
+        const isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        const getMaxDays = (month, year) => {
+            if (month === 2)
+                return isLeapYear(year) ? 29 : 28;
+            if ([4, 6, 9, 11].includes(month))
+                return 30;
+            return 31;
+        };
+        // Month
+        if (digits.length >= 1) {
+            mm = digits.substring(0, 2);
+            if (parseInt(mm) > 12)
+                mm = '12';
+        }
+        // Year (needed for Feb validation)
+        if (digits.length > 4) {
+            yyyy = digits.substring(4, 8);
+            if (yyyy.length === 4) {
+                let yearNum = parseInt(yyyy);
+                if (yearNum < 1900)
+                    yearNum = 1900;
+                if (yearNum > 2099)
+                    yearNum = 2099;
+                yyyy = yearNum.toString();
+            }
+        }
+        const monthNum = parseInt(mm);
+        const yearNum = yyyy.length === 4 ? parseInt(yyyy) : new Date().getFullYear();
+        // Day (month-wise validation)
+        if (digits.length >= 3) {
+            dd = digits.substring(2, 4);
+            if (!isNaN(monthNum)) {
+                const maxDays = getMaxDays(monthNum, yearNum);
+                if (parseInt(dd) > maxDays) {
+                    dd = maxDays.toString().padStart(2, '0');
+                }
+            }
+        }
+        else if (digits.length > 2) {
+            dd = digits.substring(2);
+        }
+        // Format output
+        let formatted = mm;
+        if (dd)
+            formatted += '/' + dd;
+        if (yyyy)
+            formatted += '/' + yyyy;
+        return formatted.substring(0, 10); // MM/DD/YYYY
+    }
+    formatTypingDate(value) {
+        let digits = value.replace(/\D/g, '').substring(0, 8); // MMDDYYYY
+        let mm = '';
+        let dd = '';
+        let yyyy = '';
+        // Helpers
+        const isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        const getMaxDays = (month, year) => {
+            if (month === 2)
+                return isLeapYear(year) ? 29 : 28;
+            if ([4, 6, 9, 11].includes(month))
+                return 30;
+            return 31;
+        };
+        // Month
+        if (digits.length >= 1) {
+            mm = digits.substring(0, 2);
+            if (parseInt(mm) > 12)
+                mm = '12';
+        }
+        // Year (needed for Feb validation)
+        if (digits.length > 4) {
+            yyyy = digits.substring(4, 8);
+            if (yyyy.length === 4) {
+                let yearNum = parseInt(yyyy);
+                if (yearNum < 1900)
+                    yearNum = 1900;
+                if (yearNum > 2099)
+                    yearNum = 2099;
+                yyyy = yearNum.toString();
+            }
+        }
+        const monthNum = parseInt(mm);
+        const yearNum = yyyy.length === 4 ? parseInt(yyyy) : new Date().getFullYear();
+        // Day (month-wise validation)
+        if (digits.length >= 3) {
+            dd = digits.substring(2, 4);
+            if (!isNaN(monthNum)) {
+                const maxDays = getMaxDays(monthNum, yearNum);
+                if (parseInt(dd) > maxDays) {
+                    dd = maxDays.toString().padStart(2, '0');
+                }
+            }
+        }
+        else if (digits.length > 2) {
+            dd = digits.substring(2);
+        }
+        // Format output
+        let formatted = mm;
+        if (dd)
+            formatted += '/' + dd;
+        if (yyyy)
+            formatted += '/' + yyyy;
+        return formatted.substring(0, 10); // MM/DD/YYYY
+    }
+    // private formatTypingDate(value: string): string {
+    //   let digits = value.replace(/\D/g, '').substring(0, 8);
+    //   let mm = '';
+    //   let dd = '';
+    //   let yyyy = '';
+    //   if (digits.length >= 1) {
+    //     mm = digits.substring(0, 2);
+    //     if (parseInt(mm) > 12) mm = '12';
+    //   }
+    //   if (digits.length >= 3) {
+    //     dd = digits.substring(2, 4);
+    //     if (parseInt(dd) > 31) dd = '31';
+    //   } else if (digits.length > 2) {
+    //     dd = digits.substring(2);
+    //   }
+    //   // Year
+    //   if (digits.length > 4) {
+    //     yyyy = digits.substring(4, 8);
+    //     if (yyyy.length === 4) {
+    //       let yearNum = parseInt(yyyy);
+    //       if (yearNum < 1900) yearNum = 1900;
+    //       if (yearNum > 2099) yearNum = 2099;
+    //       yyyy = yearNum.toString();
+    //     }
+    //   }
+    //   let formatted = mm;
+    //   if (dd) formatted += '/' + dd;
+    //   if (yyyy) formatted += '/' + yyyy;
+    //   // Limit to 10 chars
+    //   return formatted.substring(0, 10);
+    // }
+    parseDateString(value) {
+        const parts = value.split('/');
+        if (parts.length === 3) {
+            const mm = parseInt(parts[0], 10) - 1;
+            const dd = parseInt(parts[1], 10);
+            const yyyy = parseInt(parts[2], 10);
+            if (!isNaN(mm) && !isNaN(dd) && !isNaN(yyyy))
+                return new Date(yyyy, mm, dd);
+        }
+        return null;
+    }
+    /** Validate final date */
+    isValidDate(value) {
+        const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
+        return regex.test(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n  <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n    [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n      (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n      [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n  </div>\n  <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n      [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n      (input)=\"onSingleDateInput($event)\">\n    <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n      <ms-icon [name]=\"'calender'\"></ms-icon>\n    </span>\n  </div>\n  <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n      [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n      (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n    <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n      <ms-icon [name]=\"'calender'\"></ms-icon>\n    </span>\n  </div>\n  <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n    <div>\n      <label>From</label>\n      <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n        <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n          [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n          [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n        <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n          <ms-icon [name]=\"'calender'\"></ms-icon>\n        </span>\n      </div>\n    </div>\n\n    <div>\n      <label>To</label>\n      <!-- TO DATE -->\n      <div class=\"ms-date-wrapper ms-mt-2\">\n\n        <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n          [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n          [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n        <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n          <ms-icon [name]=\"'calender'\"></ms-icon>\n        </span>\n      </div>\n    </div>\n\n\n  </div>\n\n\n  <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n    [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n    [rightYear]=\"rightYear\">\n  </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'ms-date-picker', imports: [CommonModule, Calendar, FormsModule, MsDesignSystemModule], template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n  <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n    [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n      (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n      [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n  </div>\n  <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n      [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n      (input)=\"onSingleDateInput($event)\">\n    <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n      <ms-icon [name]=\"'calender'\"></ms-icon>\n    </span>\n  </div>\n  <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n    <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n      [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n      [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n      (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n    <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n      <ms-icon [name]=\"'calender'\"></ms-icon>\n    </span>\n  </div>\n  <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n    <div>\n      <label>From</label>\n      <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n        <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n          [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n          [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n        <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n          <ms-icon [name]=\"'calender'\"></ms-icon>\n        </span>\n      </div>\n    </div>\n\n    <div>\n      <label>To</label>\n      <!-- TO DATE -->\n      <div class=\"ms-date-wrapper ms-mt-2\">\n\n        <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n          [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n          [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n        <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n          <ms-icon [name]=\"'calender'\"></ms-icon>\n        </span>\n      </div>\n    </div>\n\n\n  </div>\n\n\n  <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n    [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n    [rightYear]=\"rightYear\">\n  </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"] }]
+        }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container']
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], skeleton: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], dateType: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], selectedSate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 function provideMsDesignSystem() {
     return makeEnvironmentProviders([]);
 }
@@ -3700,5 +4333,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FLAGICONS, ICONS, MS_SVG_PATH, MsAvatar, MsBadge, MsBreadcrumb, MsButton, MsCheckbox, MsCommentBox, MsDesignSystemModule, MsDropdown, MsFileUploader, MsFlagIcon, MsIcon, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTabs, MsTextArea, MsToaster, MsToasterService, MsToggle, MsTooltip, MsTooltipDirective, MsTopbar, TopbarService, provideMsDesignSystem };
+export { FLAGICONS, ICONS, MS_SVG_PATH, MsAvatar, MsBadge, MsBreadcrumb, MsButton, MsCheckbox, MsCommentBox, MsDatePicker, MsDesignSystemModule, MsDropdown, MsFileUploader, MsFlagIcon, MsIcon, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTabs, MsTextArea, MsToaster, MsToasterService, MsToggle, MsTooltip, MsTooltipDirective, MsTopbar, TopbarService, provideMsDesignSystem };
 //# sourceMappingURL=ms-design-system.mjs.map