@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/fesm2022/updevs-components-calendar.mjs

@@ -0,0 +1,582 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, output, signal, computed, Component, NgModule } from '@angular/core';
+import { DateService } from '@updevs/sdk/core';
+import { CommonModule } from '@angular/common';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdIconsModule } from '@updevs/icons';
+import * as i1 from '@jsverse/transloco';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+/**
+ * A class representing a range of dates.
+ */
+class DateRangeModel {
+    constructor(
+    /**
+     * The start date of the range.
+     */
+    start, 
+    /**
+     * The end date of the range.
+     */
+    end) {
+        this.start = start;
+        this.end = end;
+    }
+}
+
+var CalendarViewEnum;
+(function (CalendarViewEnum) {
+    CalendarViewEnum["Days"] = "days";
+    CalendarViewEnum["Months"] = "months";
+    CalendarViewEnum["Years"] = "years";
+})(CalendarViewEnum || (CalendarViewEnum = {}));
+
+/**
+ * Provides the default date range selection behavior.
+ */
+class CalendarRangeStrategyService {
+    constructor() {
+        this.dateService = inject(DateService);
+    }
+    /**
+     * Called when the user has finished selecting a value.
+     * @param date Date that was selected. Will be null if the user cleared the selection.
+     * @param currentRange Range that is currently show in the calendar.
+     */
+    selectionFinished(date, currentRange) {
+        let { start, end } = currentRange;
+        if (start === undefined) {
+            start = date;
+        }
+        else if (end === undefined && date && this.dateService.compare(date, start) >= 0) {
+            end = date;
+        }
+        else {
+            start = date;
+            end = undefined;
+        }
+        return new DateRangeModel(start, end);
+    }
+    /**
+     * Called when the user has activated a new date (e.g. by hovering over
+     * it or moving focus) and the calendar tries to display a date range.
+     *
+     * @param activeDate Date that the user has activated. Will be null if the user moved
+     *    focus to an element that's no a calendar cell.
+     * @param currentRange Range that is currently shown in the calendar.
+     */
+    createPreview(activeDate, currentRange) {
+        let start;
+        let end;
+        if (!!currentRange.start && !currentRange.end && !!activeDate) {
+            start = currentRange.start;
+            end = activeDate;
+        }
+        return new DateRangeModel(start, end);
+    }
+    /**
+     * Called when the user has dragged a date in the currently selected range to another
+     * date. Returns the date updated range that should result from this interaction.
+     *
+     * @param dragOrigin The date the user started dragging from.
+     * @param originalRange The originally selected date range.
+     * @param newDate The currently targeted date in the drag operation.
+     */
+    createDrag(dragOrigin, originalRange, newDate) {
+        let start = originalRange.start;
+        let end = originalRange.end;
+        if (!start || !end) {
+            // Can't drag from an incomplete range.
+            return undefined;
+        }
+        const isRange = this.dateService.compare(start, end) !== 0;
+        const diffYears = newDate.getFullYear() - dragOrigin.getFullYear();
+        const diffMonths = newDate.getMonth() - dragOrigin.getMonth();
+        const diffDays = newDate.getDate() - dragOrigin.getDate();
+        if (isRange && this.dateService.areEqual(dragOrigin, originalRange.start)) {
+            start = newDate;
+            if (this.dateService.compare(newDate, end) > 0) {
+                end = this.dateService.addYears(end, diffYears);
+                end = this.dateService.addMonths(end, diffMonths);
+                end = this.dateService.addDays(end, diffDays);
+            }
+        }
+        else if (isRange && this.dateService.areEqual(dragOrigin, originalRange.end)) {
+            end = newDate;
+            if (this.dateService.compare(newDate, start) < 0) {
+                start = this.dateService.addYears(start, diffYears);
+                start = this.dateService.addMonths(start, diffMonths);
+                start = this.dateService.addDays(start, diffDays);
+            }
+        }
+        else {
+            start = this.dateService.addYears(start, diffYears);
+            start = this.dateService.addMonths(start, diffMonths);
+            start = this.dateService.addDays(start, diffDays);
+            end = this.dateService.addYears(end, diffYears);
+            end = this.dateService.addMonths(end, diffMonths);
+            end = this.dateService.addDays(end, diffDays);
+        }
+        return new DateRangeModel(start, end);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarRangeStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarRangeStrategyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarRangeStrategyService, decorators: [{
+            type: Injectable
+        }] });
+
+class CalendarComponent {
+    constructor() {
+        this.selectedDate = input(...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : []));
+        this.selectedStartDate = input(...(ngDevMode ? [undefined, { debugName: "selectedStartDate" }] : []));
+        this.selectedEndDate = input(...(ngDevMode ? [undefined, { debugName: "selectedEndDate" }] : []));
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+        this.disabledDatesFilter = input(...(ngDevMode ? [undefined, { debugName: "disabledDatesFilter" }] : []));
+        this.isRange = input(false, ...(ngDevMode ? [{ debugName: "isRange" }] : []));
+        this.shouldRemoveExternalBorder = input(false, ...(ngDevMode ? [{ debugName: "shouldRemoveExternalBorder" }] : []));
+        this.selected = output();
+        this.monthChanged = output();
+        this.CalendarViewEnum = CalendarViewEnum;
+        this.currentView = signal(CalendarViewEnum.Days, ...(ngDevMode ? [{ debugName: "currentView" }] : []));
+        this.currentDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+        this.yearRange = signal({ start: 2020, end: 2030 }, ...(ngDevMode ? [{ debugName: "yearRange" }] : []));
+        this.currentYear = computed(() => this.currentDate().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
+        this.currentMonth = computed(() => this.currentDate().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
+        this.currentMonthName = computed(() => this.dateService.format(this.currentDate(), { month: 'short', year: 'numeric' }).toUpperCase(), ...(ngDevMode ? [{ debugName: "currentMonthName" }] : []));
+        this.calendarDays = computed(() => this.generateCalendarDays(), ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
+        this.calendarMonths = computed(() => this.generateCalendarMonths(), ...(ngDevMode ? [{ debugName: "calendarMonths" }] : []));
+        this.calendarYears = computed(() => this.generateCalendarYears(), ...(ngDevMode ? [{ debugName: "calendarYears" }] : []));
+        this.weekDayNames = computed(() => this.dateService.getDayOfWeekNames('narrow'), ...(ngDevMode ? [{ debugName: "weekDayNames" }] : []));
+        this.internalSelectedDate = signal(undefined, ...(ngDevMode ? [{ debugName: "internalSelectedDate" }] : []));
+        this.internalSelectedStartDate = signal(undefined, ...(ngDevMode ? [{ debugName: "internalSelectedStartDate" }] : []));
+        this.internalSelectedEndDate = signal(undefined, ...(ngDevMode ? [{ debugName: "internalSelectedEndDate" }] : []));
+        this.dateService = inject(DateService);
+        this.rangeSelectionState = 'start';
+    }
+    ngOnInit() {
+        this.syncInternalState();
+        if (this.selectedDate()) {
+            this.currentDate.set(new Date(this.selectedDate()));
+        }
+        else if (this.selectedStartDate()) {
+            this.currentDate.set(new Date(this.selectedStartDate()));
+        }
+        this.updateYearRange();
+    }
+    onHeaderClick() {
+        switch (this.currentView()) {
+            case CalendarViewEnum.Days:
+                this.currentView.set(CalendarViewEnum.Months);
+                break;
+            case CalendarViewEnum.Months:
+                this.currentView.set(CalendarViewEnum.Years);
+                break;
+        }
+    }
+    onPreviousClick() {
+        const current = this.currentDate();
+        switch (this.currentView()) {
+            case CalendarViewEnum.Days:
+                this.currentDate.set(this.dateService.addMonths(current, -1));
+                this.monthChanged.emit(this.currentDate());
+                break;
+            case CalendarViewEnum.Months:
+                this.currentDate.set(this.dateService.addYears(current, -1));
+                break;
+            case CalendarViewEnum.Years:
+                this.moveYearRange(-12);
+                break;
+        }
+    }
+    onNextClick() {
+        const current = this.currentDate();
+        switch (this.currentView()) {
+            case CalendarViewEnum.Days:
+                this.currentDate.set(this.dateService.addMonths(current, 1));
+                this.monthChanged.emit(this.currentDate());
+                break;
+            case CalendarViewEnum.Months:
+                this.currentDate.set(this.dateService.addYears(current, 1));
+                break;
+            case CalendarViewEnum.Years:
+                this.moveYearRange(12);
+                break;
+        }
+    }
+    onDateClick(dateModel) {
+        if (!dateModel.isCurrentMonth) {
+            return;
+        }
+        if (dateModel.isDisabled) {
+            return;
+        }
+        if (this.isRange()) {
+            this.handleRangeSelection(dateModel.date);
+        }
+        else {
+            this.internalSelectedDate.set(dateModel.date);
+            this.selected.emit({ selectedDate: dateModel.date });
+        }
+    }
+    onMonthClick(monthModel) {
+        if (monthModel.isDisabled) {
+            return;
+        }
+        const newDate = new Date(this.currentYear(), monthModel.monthIndex, 1);
+        this.currentDate.set(newDate);
+        this.currentView.set(CalendarViewEnum.Days);
+        this.monthChanged.emit(newDate);
+    }
+    onYearClick(yearModel) {
+        if (yearModel.isDisabled) {
+            return;
+        }
+        const newDate = new Date(yearModel.year, this.currentMonth(), 1);
+        this.currentDate.set(newDate);
+        this.currentView.set(CalendarViewEnum.Months);
+    }
+    clearSelection() {
+        this.internalSelectedDate.set(undefined);
+        this.internalSelectedStartDate.set(undefined);
+        this.internalSelectedEndDate.set(undefined);
+        this.rangeSelectionState = 'start';
+        this.selected.emit(undefined);
+    }
+    syncInternalState() {
+        this.internalSelectedDate.set(this.selectedDate());
+        this.internalSelectedStartDate.set(this.selectedStartDate());
+        this.internalSelectedEndDate.set(this.selectedEndDate());
+    }
+    handleRangeSelection(selectedDate) {
+        if (this.rangeSelectionState === 'start' || !this.internalSelectedStartDate()) {
+            this.internalSelectedStartDate.set(selectedDate);
+            this.internalSelectedEndDate.set(undefined);
+            this.rangeSelectionState = 'end';
+            this.selected.emit({ startDate: selectedDate });
+        }
+        else {
+            const startDate = this.internalSelectedStartDate();
+            const endDate = selectedDate;
+            if (this.dateService.compare(selectedDate, startDate) < 0) {
+                this.internalSelectedStartDate.set(selectedDate);
+                this.internalSelectedEndDate.set(startDate);
+                this.selected.emit({
+                    startDate: selectedDate,
+                    endDate: startDate
+                });
+            }
+            else {
+                this.internalSelectedEndDate.set(endDate);
+                this.selected.emit({
+                    startDate: startDate,
+                    endDate: endDate
+                });
+            }
+            this.rangeSelectionState = 'start';
+        }
+    }
+    generateCalendarDays() {
+        const current = this.currentDate();
+        const year = current.getFullYear();
+        const month = current.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        const firstDayOfWeek = firstDayOfMonth.getDay();
+        const days = [];
+        const today = new Date();
+        if (firstDayOfWeek > 0) {
+            const prevMonthLastDay = new Date(year, month, 0);
+            const startDate = prevMonthLastDay.getDate() - firstDayOfWeek + 1;
+            for (let day = startDate; day <= prevMonthLastDay.getDate(); day++) {
+                const date = new Date(year, month - 1, day);
+                days.push({
+                    date,
+                    isCurrentMonth: false,
+                    isToday: this.dateService.areEqual(date, today),
+                    isSelected: false,
+                    isDisabled: true,
+                    isInRange: false,
+                    isRangeStart: false,
+                    isRangeEnd: false
+                });
+            }
+        }
+        for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
+            const date = new Date(year, month, day);
+            days.push({
+                date,
+                isCurrentMonth: true,
+                isToday: this.dateService.areEqual(date, today),
+                isSelected: this.isDateSelected(date),
+                isDisabled: this.isDateDisabled(date),
+                isInRange: this.isDateInRange(date),
+                isRangeStart: this.isDateRangeStart(date),
+                isRangeEnd: this.isDateRangeEnd(date)
+            });
+        }
+        const totalCells = Math.ceil(days.length / 7) * 7;
+        const nextMonthDays = totalCells - days.length;
+        for (let day = 1; day <= nextMonthDays; day++) {
+            const date = new Date(year, month + 1, day);
+            days.push({
+                date,
+                isCurrentMonth: false,
+                isToday: this.dateService.areEqual(date, today),
+                isSelected: false,
+                isDisabled: true,
+                isInRange: false,
+                isRangeStart: false,
+                isRangeEnd: false
+            });
+        }
+        return days;
+    }
+    generateCalendarMonths() {
+        const currentYear = this.currentYear();
+        const currentMonth = this.currentMonth();
+        const today = new Date();
+        const monthNames = this.dateService.getMonthNames('short');
+        return monthNames.map((name, index) => ({
+            monthIndex: index,
+            name: name.toUpperCase(),
+            isCurrentMonth: today.getFullYear() === currentYear && today.getMonth() === index,
+            isSelected: currentMonth === index,
+            isDisabled: this.isMonthDisabled(currentYear, index)
+        }));
+    }
+    generateCalendarYears() {
+        const range = this.yearRange();
+        const currentYear = this.currentYear();
+        const today = new Date();
+        const years = [];
+        for (let year = range.start; year <= range.end; year++) {
+            years.push({
+                year,
+                isCurrentYear: today.getFullYear() === year,
+                isSelected: currentYear === year,
+                isDisabled: this.isYearDisabled(year)
+            });
+        }
+        return years;
+    }
+    isDateSelected(date) {
+        if (this.isRange()) {
+            if (this.internalSelectedStartDate() && this.dateService.areEqual(date, this.internalSelectedStartDate())) {
+                return true;
+            }
+            return !!(this.internalSelectedEndDate() && this.dateService.areEqual(date, this.internalSelectedEndDate()));
+        }
+        else {
+            return this.internalSelectedDate() ? this.dateService.areEqual(date, this.internalSelectedDate()) : false;
+        }
+    }
+    isDateInRange(date) {
+        if (!this.isRange() || !this.internalSelectedStartDate() || !this.internalSelectedEndDate()) {
+            return false;
+        }
+        return this.dateService.compare(date, this.internalSelectedStartDate()) > 0
+            && this.dateService.compare(date, this.internalSelectedEndDate()) < 0;
+    }
+    isDateRangeStart(date) {
+        return this.isRange() && this.internalSelectedStartDate()
+            ? this.dateService.areEqual(date, this.internalSelectedStartDate())
+            : false;
+    }
+    isDateRangeEnd(date) {
+        return this.isRange() && this.internalSelectedEndDate()
+            ? this.dateService.areEqual(date, this.internalSelectedEndDate())
+            : false;
+    }
+    isDateDisabled(date) {
+        if (this.minDate() && this.dateService.compare(date, this.minDate()) < 0) {
+            return true;
+        }
+        if (this.maxDate() && this.dateService.compare(date, this.maxDate()) > 0) {
+            return true;
+        }
+        const filterFn = this.disabledDatesFilter();
+        if (!!filterFn) {
+            return !filterFn(date);
+        }
+        return false;
+    }
+    isMonthDisabled(year, month) {
+        const firstDayOfMonth = new Date(year, month, 1);
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        if (this.minDate() && this.dateService.compare(lastDayOfMonth, this.minDate()) < 0) {
+            return true;
+        }
+        return !!(this.maxDate() && this.dateService.compare(firstDayOfMonth, this.maxDate()) > 0);
+    }
+    isYearDisabled(year) {
+        const firstDayOfYear = new Date(year, 0, 1);
+        const lastDayOfYear = new Date(year, 11, 31);
+        if (this.minDate() && this.dateService.compare(lastDayOfYear, this.minDate()) < 0) {
+            return true;
+        }
+        return !!(this.maxDate() && this.dateService.compare(firstDayOfYear, this.maxDate()) > 0);
+    }
+    updateYearRange() {
+        const currentYear = this.currentYear();
+        this.yearRange.set({
+            start: currentYear - 6,
+            end: currentYear + 5
+        });
+    }
+    moveYearRange(offset) {
+        const current = this.yearRange();
+        this.yearRange.set({
+            start: current.start + offset,
+            end: current.end + offset
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CalendarComponent, isStandalone: false, selector: "upd-calendar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedStartDate: { classPropertyName: "selectedStartDate", publicName: "selectedStartDate", isSignal: true, isRequired: false, transformFunction: null }, selectedEndDate: { classPropertyName: "selectedEndDate", publicName: "selectedEndDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDatesFilter: { classPropertyName: "disabledDatesFilter", publicName: "disabledDatesFilter", isSignal: true, isRequired: false, transformFunction: null }, isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, shouldRemoveExternalBorder: { classPropertyName: "shouldRemoveExternalBorder", publicName: "shouldRemoveExternalBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", monthChanged: "monthChanged" }, ngImport: i0, template: "<div class=\"calendar\" [class.calendar-border]=\"!shouldRemoveExternalBorder()\">\n    <div class=\"calendar-header\">\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary\" (click)=\"onPreviousClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m15 6-6 6 6 6\" />\n            </svg>\n        </button>\n\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary calendar-title\" (click)=\"onHeaderClick()\">\n            @switch (currentView()) {\n                @case (CalendarViewEnum.Days) {\n                    {{ currentMonthName() }}\n                }\n                @case (CalendarViewEnum.Months) {\n                    {{ currentYear() }}\n                }\n                @case (CalendarViewEnum.Years) {\n                    {{ yearRange().start }} - {{ yearRange().end }}\n                }\n            }\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon ms-1\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n        </button>\n\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary\" (click)=\"onNextClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m9 6 6 6-6 6\" />\n            </svg>\n        </button>\n    </div>\n\n    @if (currentView() === CalendarViewEnum.Days) {\n        <div class=\"calendar-weekdays\">\n            @for (dayName of weekDayNames(); track dayName) {\n                <div class=\"calendar-weekday\">{{ dayName }}</div>\n            }\n        </div>\n\n        <div class=\"calendar-days\">\n            @for (day of calendarDays(); track day.date.getTime()) {\n                <button type=\"button\" class=\"calendar-day\" [class.calendar-day-other-month]=\"!day.isCurrentMonth\"\n                    [class.calendar-day-today]=\"day.isToday\" [class.calendar-day-selected]=\"day.isSelected\"\n                    [class.calendar-day-in-range]=\"day.isInRange\" [class.calendar-day-range-start]=\"day.isRangeStart\"\n                    [class.calendar-day-range-end]=\"day.isRangeEnd\" [disabled]=\"day.isDisabled\" (click)=\"onDateClick(day)\">\n                    {{ day.date.getDate() }}\n                </button>\n            }\n        </div>\n    }\n\n    @if (currentView() === CalendarViewEnum.Months) {\n        <div class=\"calendar-months\">\n            @for (month of calendarMonths(); track month.monthIndex) {\n                <button type=\"button\" class=\"calendar-month\" [class.calendar-month-current]=\"month.isCurrentMonth\"\n                    [class.calendar-month-selected]=\"month.isSelected\" [disabled]=\"month.isDisabled\" (click)=\"onMonthClick(month)\">\n                    {{ month.name }}\n                </button>\n            }\n        </div>\n    }\n\n    @if (currentView() === CalendarViewEnum.Years) {\n        <div class=\"calendar-years\">\n            @for (year of calendarYears(); track year.year) {\n                <button type=\"button\" class=\"calendar-year\" [class.calendar-year-current]=\"year.isCurrentYear\"\n                    [class.calendar-year-selected]=\"year.isSelected\" [disabled]=\"year.isDisabled\" (click)=\"onYearClick(year)\">\n                    {{ year.year }}\n                </button>\n            }\n        </div>\n    }\n</div>\n", styles: [".calendar{background:var(--bs-body-bg);padding:1rem;width:100%;height:100%;border:0!important}.calendar-border{border:1px solid var(--bs-border-color)!important;border-radius:var(--bs-border-radius, .375rem);box-shadow:var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-header .calendar-title{font-weight:600;flex:1;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.calendar-header .calendar-title:hover{color:var(--bs-primary)}.calendar-header button{background:transparent;border:none;padding:.25rem;border-radius:var(--bs-border-radius-sm, .25rem);cursor:pointer;color:var(--bs-secondary)}.calendar-header button:hover{background-color:var(--bs-gray-100);color:var(--bs-gray-700)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-bottom:.5rem}.calendar-weekday{text-align:center;font-size:.75rem;font-weight:600;color:var(--bs-secondary);padding:.25rem;text-transform:uppercase}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem}.calendar-day{aspect-ratio:1;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;cursor:pointer;transition:all .15s ease-in-out;display:flex;align-items:center;justify-content:center;min-height:32px;font-weight:400;position:relative}.calendar-day:hover:not(:disabled):not(.calendar-day-other-month){background-color:var(--bs-gray-100)}.calendar-day:disabled{cursor:not-allowed}.calendar-day.calendar-day-other-month{color:var(--bs-gray-400, #adb5bd);cursor:default;pointer-events:none}.calendar-day.calendar-day-other-month:hover{background-color:transparent}.calendar-day.calendar-day-today{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-day.calendar-day-today:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-border-subtle, rgba(13, 110, 253, .2))}.calendar-day.calendar-day-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-day.calendar-day-selected:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-in-range{border-radius:0;background-color:var(--bs-secondary-bg-subtle, rgba(108, 117, 125, .1));color:var(--bs-secondary-emphasis, #495057)}.calendar-day.calendar-day-in-range:hover:not(.calendar-day-other-month){background-color:var(--bs-secondary-border-subtle, rgba(108, 117, 125, .2))}.calendar-day.calendar-day-range-start{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-day.calendar-day-range-start:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-range-end{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-day.calendar-day-range-end:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-range-start.calendar-day-range-end{border-radius:var(--bs-border-radius-sm, .25rem)}.calendar-day.calendar-day-other-month.calendar-day-selected{background-color:transparent;color:var(--bs-gray-400, #adb5bd);font-weight:400}.calendar-months{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.calendar-month{padding:.75rem .5rem;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.calendar-month:hover:not(:disabled){background-color:var(--bs-gray-100, #f8f9fa)}.calendar-month:disabled{color:var(--bs-gray-400, #adb5bd);cursor:not-allowed}.calendar-month.calendar-month-current{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-month.calendar-month-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-month.calendar-month-selected:hover{background-color:var(--bs-primary-dark, #0a58ca)}.calendar-years{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.calendar-year{padding:.75rem .5rem;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.calendar-year:hover:not(:disabled){background-color:var(--bs-gray-100, #f8f9fa)}.calendar-year:disabled{color:var(--bs-gray-400, #adb5bd);cursor:not-allowed}.calendar-year.calendar-year-current{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-year.calendar-year-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-year.calendar-year-selected:hover{background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day-not-selectable{pointer-events:none;opacity:.5}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'upd-calendar', template: "<div class=\"calendar\" [class.calendar-border]=\"!shouldRemoveExternalBorder()\">\n    <div class=\"calendar-header\">\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary\" (click)=\"onPreviousClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m15 6-6 6 6 6\" />\n            </svg>\n        </button>\n\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary calendar-title\" (click)=\"onHeaderClick()\">\n            @switch (currentView()) {\n                @case (CalendarViewEnum.Days) {\n                    {{ currentMonthName() }}\n                }\n                @case (CalendarViewEnum.Months) {\n                    {{ currentYear() }}\n                }\n                @case (CalendarViewEnum.Years) {\n                    {{ yearRange().start }} - {{ yearRange().end }}\n                }\n            }\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon ms-1\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n        </button>\n\n        <button type=\"button\" class=\"btn btn-sm btn-ghost-secondary\" (click)=\"onNextClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                stroke=\"currentColor\" fill=\"none\">\n                <path stroke=\"none\" d=\"m0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"m9 6 6 6-6 6\" />\n            </svg>\n        </button>\n    </div>\n\n    @if (currentView() === CalendarViewEnum.Days) {\n        <div class=\"calendar-weekdays\">\n            @for (dayName of weekDayNames(); track dayName) {\n                <div class=\"calendar-weekday\">{{ dayName }}</div>\n            }\n        </div>\n\n        <div class=\"calendar-days\">\n            @for (day of calendarDays(); track day.date.getTime()) {\n                <button type=\"button\" class=\"calendar-day\" [class.calendar-day-other-month]=\"!day.isCurrentMonth\"\n                    [class.calendar-day-today]=\"day.isToday\" [class.calendar-day-selected]=\"day.isSelected\"\n                    [class.calendar-day-in-range]=\"day.isInRange\" [class.calendar-day-range-start]=\"day.isRangeStart\"\n                    [class.calendar-day-range-end]=\"day.isRangeEnd\" [disabled]=\"day.isDisabled\" (click)=\"onDateClick(day)\">\n                    {{ day.date.getDate() }}\n                </button>\n            }\n        </div>\n    }\n\n    @if (currentView() === CalendarViewEnum.Months) {\n        <div class=\"calendar-months\">\n            @for (month of calendarMonths(); track month.monthIndex) {\n                <button type=\"button\" class=\"calendar-month\" [class.calendar-month-current]=\"month.isCurrentMonth\"\n                    [class.calendar-month-selected]=\"month.isSelected\" [disabled]=\"month.isDisabled\" (click)=\"onMonthClick(month)\">\n                    {{ month.name }}\n                </button>\n            }\n        </div>\n    }\n\n    @if (currentView() === CalendarViewEnum.Years) {\n        <div class=\"calendar-years\">\n            @for (year of calendarYears(); track year.year) {\n                <button type=\"button\" class=\"calendar-year\" [class.calendar-year-current]=\"year.isCurrentYear\"\n                    [class.calendar-year-selected]=\"year.isSelected\" [disabled]=\"year.isDisabled\" (click)=\"onYearClick(year)\">\n                    {{ year.year }}\n                </button>\n            }\n        </div>\n    }\n</div>\n", styles: [".calendar{background:var(--bs-body-bg);padding:1rem;width:100%;height:100%;border:0!important}.calendar-border{border:1px solid var(--bs-border-color)!important;border-radius:var(--bs-border-radius, .375rem);box-shadow:var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-header .calendar-title{font-weight:600;flex:1;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.calendar-header .calendar-title:hover{color:var(--bs-primary)}.calendar-header button{background:transparent;border:none;padding:.25rem;border-radius:var(--bs-border-radius-sm, .25rem);cursor:pointer;color:var(--bs-secondary)}.calendar-header button:hover{background-color:var(--bs-gray-100);color:var(--bs-gray-700)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-bottom:.5rem}.calendar-weekday{text-align:center;font-size:.75rem;font-weight:600;color:var(--bs-secondary);padding:.25rem;text-transform:uppercase}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem}.calendar-day{aspect-ratio:1;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;cursor:pointer;transition:all .15s ease-in-out;display:flex;align-items:center;justify-content:center;min-height:32px;font-weight:400;position:relative}.calendar-day:hover:not(:disabled):not(.calendar-day-other-month){background-color:var(--bs-gray-100)}.calendar-day:disabled{cursor:not-allowed}.calendar-day.calendar-day-other-month{color:var(--bs-gray-400, #adb5bd);cursor:default;pointer-events:none}.calendar-day.calendar-day-other-month:hover{background-color:transparent}.calendar-day.calendar-day-today{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-day.calendar-day-today:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-border-subtle, rgba(13, 110, 253, .2))}.calendar-day.calendar-day-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-day.calendar-day-selected:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-in-range{border-radius:0;background-color:var(--bs-secondary-bg-subtle, rgba(108, 117, 125, .1));color:var(--bs-secondary-emphasis, #495057)}.calendar-day.calendar-day-in-range:hover:not(.calendar-day-other-month){background-color:var(--bs-secondary-border-subtle, rgba(108, 117, 125, .2))}.calendar-day.calendar-day-range-start{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-day.calendar-day-range-start:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-range-end{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-day.calendar-day-range-end:hover:not(.calendar-day-other-month){background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day.calendar-day-range-start.calendar-day-range-end{border-radius:var(--bs-border-radius-sm, .25rem)}.calendar-day.calendar-day-other-month.calendar-day-selected{background-color:transparent;color:var(--bs-gray-400, #adb5bd);font-weight:400}.calendar-months{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.calendar-month{padding:.75rem .5rem;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.calendar-month:hover:not(:disabled){background-color:var(--bs-gray-100, #f8f9fa)}.calendar-month:disabled{color:var(--bs-gray-400, #adb5bd);cursor:not-allowed}.calendar-month.calendar-month-current{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-month.calendar-month-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-month.calendar-month-selected:hover{background-color:var(--bs-primary-dark, #0a58ca)}.calendar-years{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.calendar-year{padding:.75rem .5rem;border:none;background:transparent;border-radius:var(--bs-border-radius-sm, .25rem);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.calendar-year:hover:not(:disabled){background-color:var(--bs-gray-100, #f8f9fa)}.calendar-year:disabled{color:var(--bs-gray-400, #adb5bd);cursor:not-allowed}.calendar-year.calendar-year-current{background-color:var(--bs-primary-bg-subtle, rgba(13, 110, 253, .1));color:var(--bs-primary, #0d6efd);font-weight:600}.calendar-year.calendar-year-selected{background-color:var(--bs-primary, #0d6efd);color:var(--bs-white, white);font-weight:600}.calendar-year.calendar-year-selected:hover{background-color:var(--bs-primary-dark, #0a58ca)}.calendar-day-not-selectable{pointer-events:none;opacity:.5}\n"] }]
+        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedStartDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedStartDate", required: false }] }], selectedEndDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEndDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDatesFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDatesFilter", required: false }] }], isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], shouldRemoveExternalBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRemoveExternalBorder", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], monthChanged: [{ type: i0.Output, args: ["monthChanged"] }] } });
+
+var UpDevs$1 = {
+	Calendar: {
+		PreviousMonth: "Previous month",
+		PreviousYear: "Previous year",
+		PreviousMultiYear: "Previous 24 years",
+		NextMonth: "Next month",
+		NextYear: "Next year",
+		NextMultiYear: "Next 24 years",
+		SwitchToMultiYearView: "Choose month and year",
+		SwitchToMonthView: "Choose date",
+		YearRange: "{{start}} – {{end}}",
+		YearRangeLabel: "{{start}} to {{end}}"
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	Calendar: {
+		PreviousMonth: "Mês anterior",
+		PreviousYear: "Ano anterior",
+		PreviousMultiYear: "24 anos anteriores",
+		NextMonth: "Próximo mês",
+		NextYear: "Próximo ano",
+		NextMultiYear: "Próximos 24 anos",
+		SwitchToMultiYearView: "Escolha mês e ano",
+		SwitchToMonthView: "Escolha uma data",
+		YearRange: "{{start}} – {{end}}",
+		YearRangeLabel: "{{start}} até {{end}}"
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+class CalendarSignalsService {
+    constructor() {
+        this.minDateSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "minDateSignal" }] : []));
+        this.maxDateSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "maxDateSignal" }] : []));
+        this.activeDateSignal = signal(new Date(), ...(ngDevMode ? [{ debugName: "activeDateSignal" }] : []));
+        this.selectedDateSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedDateSignal" }] : []));
+        this.currentViewSignal = signal('month', ...(ngDevMode ? [{ debugName: "currentViewSignal" }] : []));
+    }
+    get minDate() {
+        return this.minDateSignal.asReadonly();
+    }
+    set minDate(value) {
+        this.minDateSignal.set(value);
+    }
+    get maxDate() {
+        return this.maxDateSignal.asReadonly();
+    }
+    set maxDate(value) {
+        this.maxDateSignal.set(value);
+    }
+    get activeDate() {
+        return this.activeDateSignal.asReadonly();
+    }
+    set activeDate(value) {
+        this.activeDateSignal.set(value);
+    }
+    get selectedDate() {
+        return this.selectedDateSignal.asReadonly();
+    }
+    set selectedDate(value) {
+        this.selectedDateSignal.set(value);
+    }
+    get currentView() {
+        return this.currentViewSignal.asReadonly();
+    }
+    set currentView(value) {
+        this.currentViewSignal.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarSignalsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarSignalsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarSignalsService, decorators: [{
+            type: Injectable
+        }] });
+
+class UpdCalendarModule {
+    constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
+        translocoService.setTranslation(en$1, 'en');
+        translocoService.setTranslation(pt$1, 'pt');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCalendarModule, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdCalendarModule, declarations: [CalendarComponent], imports: [CommonModule,
+            UpdButtonModule,
+            TranslocoDirective,
+            UpdIconsModule], exports: [CalendarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCalendarModule, providers: [
+            CalendarSignalsService,
+            CalendarRangeStrategyService
+        ], imports: [CommonModule,
+            UpdButtonModule,
+            UpdIconsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdButtonModule,
+                        TranslocoDirective,
+                        UpdIconsModule
+                    ],
+                    declarations: [
+                        CalendarComponent
+                    ],
+                    exports: [
+                        CalendarComponent
+                    ],
+                    providers: [
+                        CalendarSignalsService,
+                        CalendarRangeStrategyService
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarComponent, CalendarRangeStrategyService, CalendarViewEnum, DateRangeModel, UpdCalendarModule };
+//# sourceMappingURL=updevs-components-calendar.mjs.map