@spartan-ng/brain 1.0.5 → 1.1.0-alpha.1

package/fesm2022/spartan-ng-brain-calendar.mjs

@@ -4,10 +4,10 @@ import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BrnSelect } from '@spartan-ng/brain/select';
 
-let uniqueId = 0;
+let uniqueId$1 = 0;
 class BrnCalendarHeader {
     /** The unique id for the header */
-    id = input(`brn-calendar-header-${++uniqueId}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = input(`brn-calendar-header-${++uniqueId$1}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnCalendarHeader, isStandalone: true, selector: "[brnCalendarHeader]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite", "role": "presentation" }, properties: { "id": "id()" } }, ngImport: i0 });
 }
@@ -1207,6 +1207,461 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { highlightDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightDays", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnCalendarHeader), { isSignal: true }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }] } });
 
+const BrnMonthYearCalendarToken = new InjectionToken('BrnMonthYearCalendarToken');
+function provideBrnMonthYearCalendar(instance) {
+    return { provide: BrnMonthYearCalendarToken, useExisting: instance };
+}
+/**
+ * Inject the month/year selector.
+ */
+function injectBrnMonthYearCalendar() {
+    return inject(BrnMonthYearCalendarToken);
+}
+
+let uniqueId = 0;
+class BrnMonthYearCalendarHeader {
+    /** The unique id for the header */
+    id = input(`brn-month-year-header-${++uniqueId}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    _monthYear = injectBrnMonthYearCalendar();
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnMonthYearCalendarHeader, isStandalone: true, selector: "button[brnMonthYearCalendarHeader]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_monthYear.view.set(\"year\")" }, properties: { "id": "id()", "disabled": "_monthYear.disabled() || _monthYear.view() === \"year\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnMonthYearCalendarHeader]',
+                    host: {
+                        '[id]': 'id()',
+                        '[disabled]': '_monthYear.disabled() || _monthYear.view() === "year"',
+                        '(click)': '_monthYear.view.set("year")',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/** The number of years shown per page (4 columns x 3 rows). */
+const YEARS_PER_PAGE = 12;
+/** Positive modulo. */
+function floorMod(value, modulo) {
+    return ((value % modulo) + modulo) % modulo;
+}
+class BrnMonthYearCalendar {
+    /** Access the date adapter */
+    _dateAdapter = injectDateAdapter();
+    /** Access the change detector */
+    _changeDetector = inject(ChangeDetectorRef);
+    /** Access the injector */
+    _injector = inject(Injector);
+    /** The minimum date that can be selected. */
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Whether the month/year selector is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The selected month. Represented by the first day of the month. */
+    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
+    /** The default focused date. */
+    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : /* istanbul ignore next */ []));
+    /** The current view. The year view is shown first. */
+    viewInput = input('year', { ...(ngDevMode ? { debugName: "viewInput" } : /* istanbul ignore next */ {}), alias: 'view' });
+    /** The current view mutable. The year view is shown first. */
+    view = linkedSignal(this.viewInput, ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** @internal Access the header */
+    header = contentChild(BrnMonthYearCalendarHeader, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    /** The focused date. */
+    focusedDate = linkedSignal(() => this.constrainDate(this.defaultFocusedDate() ?? this.date() ?? this._dateAdapter.now()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    _cells = [];
+    /** The 12 months of the currently focused year. */
+    months = computed(() => {
+        const focused = this.focusedDate();
+        return Array.from({ length: 12 }, (_, month) => this._dateAdapter.startOfMonth(this._dateAdapter.set(focused, { month, day: 1 })));
+    }, ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    /** The first and last year of the current page. */
+    yearRange = computed(() => {
+        const year = this._dateAdapter.getYear(this.focusedDate());
+        const start = year - floorMod(year, YEARS_PER_PAGE);
+        return { start, end: start + YEARS_PER_PAGE - 1 };
+    }, ...(ngDevMode ? [{ debugName: "yearRange" }] : /* istanbul ignore next */ []));
+    /** The years of the current page. */
+    years = computed(() => {
+        const focused = this.focusedDate();
+        const { start } = this.yearRange();
+        return Array.from({ length: YEARS_PER_PAGE }, (_, i) => this._dateAdapter.startOfMonth(this._dateAdapter.set(focused, { year: start + i, month: 0, day: 1 })));
+    }, ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    /** @internal Constrain a date to the min and max boundaries. */
+    constrainDate(date) {
+        const min = this.min();
+        const max = this.max();
+        if (min && this._dateAdapter.isBefore(date, this._dateAdapter.startOfDay(min))) {
+            return min;
+        }
+        if (max && this._dateAdapter.isAfter(date, this._dateAdapter.endOfDay(max))) {
+            return max;
+        }
+        return date;
+    }
+    selectMonth(date) {
+        if (this.isMonthDisabled(date)) {
+            return;
+        }
+        const month = this._dateAdapter.startOfDay(this._dateAdapter.startOfMonth(date));
+        if (this.isMonthSelected(date)) {
+            this.date.set(undefined);
+        }
+        else {
+            this.date.set(month);
+        }
+        this.focusedDate.set(month);
+    }
+    selectYear(date) {
+        if (this.isYearDisabled(date)) {
+            return;
+        }
+        const year = this._dateAdapter.getYear(date);
+        let target = this._dateAdapter.set(this.focusedDate(), { year });
+        if (this.isMonthDisabled(target)) {
+            target = this._dateAdapter.set(target, { month: 0, day: 1 });
+        }
+        this.focusedDate.set(target);
+        this.view.set('month');
+        // focus the first available month once the month view is rendered.
+        this._focusCell((cell) => !this.isMonthDisabled(cell));
+    }
+    isMonthSelected(date) {
+        const selected = this.date();
+        return !!selected && this._dateAdapter.isSameMonth(date, selected) && this._dateAdapter.isSameYear(date, selected);
+    }
+    isYearSelected(date) {
+        const selected = this.date();
+        return !!selected && this._dateAdapter.isSameYear(date, selected);
+    }
+    isMonthToday(date) {
+        const now = this._dateAdapter.now();
+        return this._dateAdapter.isSameMonth(date, now) && this._dateAdapter.isSameYear(date, now);
+    }
+    isYearToday(date) {
+        return this._dateAdapter.isSameYear(date, this._dateAdapter.now());
+    }
+    isMonthDisabled(date) {
+        if (this.disabled()) {
+            return true;
+        }
+        const min = this.min();
+        const max = this.max();
+        if (min && this._dateAdapter.isBefore(this._dateAdapter.endOfMonth(date), this._dateAdapter.startOfDay(min))) {
+            return true;
+        }
+        if (max && this._dateAdapter.isAfter(this._dateAdapter.startOfMonth(date), this._dateAdapter.endOfDay(max))) {
+            return true;
+        }
+        return false;
+    }
+    isYearDisabled(date) {
+        if (this.disabled()) {
+            return true;
+        }
+        const year = this._dateAdapter.getYear(date);
+        const min = this.min();
+        const max = this.max();
+        if (min && year < this._dateAdapter.getYear(min)) {
+            return true;
+        }
+        if (max && year > this._dateAdapter.getYear(max)) {
+            return true;
+        }
+        return false;
+    }
+    setFocusedMonth(date) {
+        if (this.isMonthDisabled(date)) {
+            return;
+        }
+        this.focusedDate.set(this._dateAdapter.startOfMonth(date));
+        this._focusCell((cell) => this._dateAdapter.isSameMonth(cell, date) && this._dateAdapter.isSameYear(cell, date));
+    }
+    setFocusedYear(date) {
+        if (this.isYearDisabled(date)) {
+            return;
+        }
+        const year = this._dateAdapter.getYear(date);
+        this.focusedDate.set(this._dateAdapter.set(this.focusedDate(), { year }));
+        this._focusCell((cell) => this._dateAdapter.isSameYear(cell, date));
+    }
+    goToPrevious() {
+        if (this.isPreviousDisabled()) {
+            return;
+        }
+        const amount = this.view() === 'month' ? 1 : YEARS_PER_PAGE;
+        this.focusedDate.set(this._dateAdapter.subtract(this.focusedDate(), { years: amount }));
+    }
+    goToNext() {
+        if (this.isNextDisabled()) {
+            return;
+        }
+        const amount = this.view() === 'month' ? 1 : YEARS_PER_PAGE;
+        this.focusedDate.set(this._dateAdapter.add(this.focusedDate(), { years: amount }));
+    }
+    isPreviousDisabled() {
+        if (this.disabled()) {
+            return true;
+        }
+        const min = this.min();
+        if (!min) {
+            return false;
+        }
+        const minYear = this._dateAdapter.getYear(min);
+        if (this.view() === 'month') {
+            return this._dateAdapter.getYear(this.focusedDate()) - 1 < minYear;
+        }
+        return this.yearRange().start - 1 < minYear;
+    }
+    isNextDisabled() {
+        if (this.disabled()) {
+            return true;
+        }
+        const max = this.max();
+        if (!max) {
+            return false;
+        }
+        const maxYear = this._dateAdapter.getYear(max);
+        if (this.view() === 'month') {
+            return this._dateAdapter.getYear(this.focusedDate()) + 1 > maxYear;
+        }
+        return this.yearRange().end + 1 > maxYear;
+    }
+    _focusCell(predicate) {
+        afterNextRender({
+            write: () => {
+                const cell = this._cells.find((c) => predicate(c.value()));
+                if (cell) {
+                    cell.focus();
+                }
+            },
+        }, { injector: this._injector });
+        this._changeDetector.detectChanges();
+    }
+    registerCell(cell) {
+        this._cells.push(cell);
+    }
+    unregisterCell(cell) {
+        const index = this._cells.indexOf(cell);
+        if (index !== -1) {
+            this._cells.splice(index, 1);
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnMonthYearCalendar, isStandalone: true, selector: "[brnMonthYearCalendar]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, viewInput: { classPropertyName: "viewInput", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [provideBrnMonthYearCalendar(BrnMonthYearCalendar)], queries: [{ propertyName: "header", first: true, predicate: BrnMonthYearCalendarHeader, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnMonthYearCalendar]',
+                    providers: [provideBrnMonthYearCalendar(BrnMonthYearCalendar)],
+                }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], viewInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnMonthYearCalendarHeader), { isSignal: true }] }] } });
+
+class BrnMonthYearCalendarGrid {
+    /** Access the month/year selector */
+    _monthYear = injectBrnMonthYearCalendar();
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnMonthYearCalendarGrid, isStandalone: true, selector: "[brnMonthYearCalendarGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "_monthYear.header()?.id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnMonthYearCalendarGrid]',
+                    host: {
+                        role: 'grid',
+                        '[attr.aria-labelledby]': '_monthYear.header()?.id()',
+                    },
+                }]
+        }] });
+
+class BrnMonthYearCalendarMonthButton {
+    /** Access the date adapter */
+    _dateAdapter = injectDateAdapter();
+    /** Access the month/year selector */
+    _monthYear = injectBrnMonthYearCalendar();
+    /** Access the element ref */
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** The month this cell represents. */
+    date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Expose the value for the month/year selector's focus tracking. */
+    value = this.date;
+    selected = computed(() => this._monthYear.isMonthSelected(this.date()), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    today = computed(() => this._monthYear.isMonthToday(this.date()), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this._monthYear.isMonthDisabled(this.date()), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    focusable = computed(() => this._dateAdapter.isSameMonth(this._monthYear.focusedDate(), this.date()) &&
+        this._dateAdapter.isSameYear(this._monthYear.focusedDate(), this.date()), ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._monthYear.registerCell(this);
+        this._destroyRef.onDestroy(() => this._monthYear.unregisterCell(this));
+    }
+    focusOffset(event, offset) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._monthYear.setFocusedMonth(this._dateAdapter.add(this._monthYear.focusedDate(), { months: offset }));
+    }
+    focusMonth(event, month) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._monthYear.setFocusedMonth(this._dateAdapter.set(this._monthYear.focusedDate(), { month, day: 1 }));
+    }
+    focusYearOffset(event, offset) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._monthYear.setFocusedMonth(this._dateAdapter.add(this._monthYear.focusedDate(), { years: offset }));
+    }
+    getDirection() {
+        return getComputedStyle(this._elementRef.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarMonthButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnMonthYearCalendarMonthButton, isStandalone: true, selector: "button[brnMonthYearCalendarMonthButton]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell", "type": "button" }, listeners: { "click": "_monthYear.selectMonth(date())", "keydown.arrowLeft": "focusOffset($event, getDirection() === \"rtl\" ? 1 : -1)", "keydown.arrowRight": "focusOffset($event, getDirection() === \"rtl\" ? -1 : 1)", "keydown.arrowUp": "focusOffset($event, -4)", "keydown.arrowDown": "focusOffset($event, 4)", "keydown.home": "focusMonth($event, 0)", "keydown.end": "focusMonth($event, 11)", "keydown.pageUp": "focusYearOffset($event, -1)", "keydown.pageDown": "focusYearOffset($event, 1)" }, properties: { "tabindex": "focusable() ? 0 : -1", "attr.data-selected": "selected() ? true : null", "attr.data-today": "today() && !selected() ? true : null", "attr.data-focused": "focusable() ? true : null", "attr.data-disabled": "disabled() ? true : null", "attr.aria-selected": "selected() ? true : null", "attr.aria-disabled": "disabled() ? true : null", "disabled": "disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarMonthButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnMonthYearCalendarMonthButton]',
+                    host: {
+                        role: 'gridcell',
+                        type: 'button',
+                        '[tabindex]': 'focusable() ? 0 : -1',
+                        '[attr.data-selected]': 'selected() ? true : null',
+                        '[attr.data-today]': 'today() && !selected() ? true : null',
+                        '[attr.data-focused]': 'focusable() ? true : null',
+                        '[attr.data-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-selected]': 'selected() ? true : null',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[disabled]': 'disabled()',
+                        '(click)': '_monthYear.selectMonth(date())',
+                        '(keydown.arrowLeft)': 'focusOffset($event, getDirection() === "rtl" ? 1 : -1)',
+                        '(keydown.arrowRight)': 'focusOffset($event, getDirection() === "rtl" ? -1 : 1)',
+                        '(keydown.arrowUp)': 'focusOffset($event, -4)',
+                        '(keydown.arrowDown)': 'focusOffset($event, 4)',
+                        '(keydown.home)': 'focusMonth($event, 0)',
+                        '(keydown.end)': 'focusMonth($event, 11)',
+                        '(keydown.pageUp)': 'focusYearOffset($event, -1)',
+                        '(keydown.pageDown)': 'focusYearOffset($event, 1)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }] } });
+
+class BrnMonthYearCalendarNextButton {
+    /** Access the month/year selector */
+    _monthYear = injectBrnMonthYearCalendar();
+    _disabled = computed(() => this._monthYear.isNextDisabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _label = computed(() => this._monthYear.view() === 'month' ? 'Go to the next year' : 'Go to the next years', ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarNextButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnMonthYearCalendarNextButton, isStandalone: true, selector: "button[brnMonthYearCalendarNextButton]", host: { attributes: { "type": "button", "data-slot": "month-year-next-button" }, listeners: { "click": "_monthYear.goToNext()" }, properties: { "attr.aria-label": "_label()", "attr.aria-disabled": "_disabled() ? true : null", "disabled": "_disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarNextButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnMonthYearCalendarNextButton]',
+                    host: {
+                        type: 'button',
+                        'data-slot': 'month-year-next-button',
+                        '[attr.aria-label]': '_label()',
+                        '[attr.aria-disabled]': '_disabled() ? true : null',
+                        '[disabled]': '_disabled()',
+                        '(click)': '_monthYear.goToNext()',
+                    },
+                }]
+        }] });
+
+class BrnMonthYearCalendarPreviousButton {
+    /** Access the month/year selector */
+    _monthYear = injectBrnMonthYearCalendar();
+    _disabled = computed(() => this._monthYear.isPreviousDisabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _label = computed(() => this._monthYear.view() === 'month' ? 'Go to the previous year' : 'Go to the previous years', ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarPreviousButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnMonthYearCalendarPreviousButton, isStandalone: true, selector: "button[brnMonthYearCalendarPreviousButton]", host: { attributes: { "type": "button", "data-slot": "month-year-previous-button" }, listeners: { "click": "_monthYear.goToPrevious()" }, properties: { "attr.aria-label": "_label()", "attr.aria-disabled": "_disabled() ? true : null", "disabled": "_disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarPreviousButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnMonthYearCalendarPreviousButton]',
+                    host: {
+                        type: 'button',
+                        'data-slot': 'month-year-previous-button',
+                        '[attr.aria-label]': '_label()',
+                        '[attr.aria-disabled]': '_disabled() ? true : null',
+                        '[disabled]': '_disabled()',
+                        '(click)': '_monthYear.goToPrevious()',
+                    },
+                }]
+        }] });
+
+class BrnMonthYearCalendarYearButton {
+    /** Access the date adapter */
+    _dateAdapter = injectDateAdapter();
+    /** Access the month/year selector */
+    _monthYear = injectBrnMonthYearCalendar();
+    /** Access the element ref */
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** The year this cell represents. */
+    date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Expose the value for the month/year selector's focus tracking. */
+    value = this.date;
+    selected = computed(() => this._monthYear.isYearSelected(this.date()), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    today = computed(() => this._monthYear.isYearToday(this.date()), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this._monthYear.isYearDisabled(this.date()), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    focusable = computed(() => this._dateAdapter.isSameYear(this._monthYear.focusedDate(), this.date()), ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    _yearsPerPage = YEARS_PER_PAGE;
+    constructor() {
+        this._monthYear.registerCell(this);
+        this._destroyRef.onDestroy(() => this._monthYear.unregisterCell(this));
+    }
+    focusOffset(event, offset) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._monthYear.setFocusedYear(this._dateAdapter.add(this._monthYear.focusedDate(), { years: offset }));
+    }
+    focusYear(event, year) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._monthYear.setFocusedYear(this._dateAdapter.set(this._monthYear.focusedDate(), { year }));
+    }
+    getDirection() {
+        return getComputedStyle(this._elementRef.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarYearButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnMonthYearCalendarYearButton, isStandalone: true, selector: "button[brnMonthYearCalendarYearButton]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell", "type": "button" }, listeners: { "click": "_monthYear.selectYear(date())", "keydown.arrowLeft": "focusOffset($event, getDirection() === \"rtl\" ? 1 : -1)", "keydown.arrowRight": "focusOffset($event, getDirection() === \"rtl\" ? -1 : 1)", "keydown.arrowUp": "focusOffset($event, -4)", "keydown.arrowDown": "focusOffset($event, 4)", "keydown.home": "focusYear($event, _monthYear.yearRange().start)", "keydown.end": "focusYear($event, _monthYear.yearRange().end)", "keydown.pageUp": "focusOffset($event, -_yearsPerPage)", "keydown.pageDown": "focusOffset($event, _yearsPerPage)" }, properties: { "tabindex": "focusable() ? 0 : -1", "attr.data-selected": "selected() ? true : null", "attr.data-today": "today() && !selected() ? true : null", "attr.data-focused": "focusable() ? true : null", "attr.data-disabled": "disabled() ? true : null", "attr.aria-selected": "selected() ? true : null", "attr.aria-disabled": "disabled() ? true : null", "disabled": "disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnMonthYearCalendarYearButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnMonthYearCalendarYearButton]',
+                    host: {
+                        role: 'gridcell',
+                        type: 'button',
+                        '[tabindex]': 'focusable() ? 0 : -1',
+                        '[attr.data-selected]': 'selected() ? true : null',
+                        '[attr.data-today]': 'today() && !selected() ? true : null',
+                        '[attr.data-focused]': 'focusable() ? true : null',
+                        '[attr.data-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-selected]': 'selected() ? true : null',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[disabled]': 'disabled()',
+                        '(click)': '_monthYear.selectYear(date())',
+                        '(keydown.arrowLeft)': 'focusOffset($event, getDirection() === "rtl" ? 1 : -1)',
+                        '(keydown.arrowRight)': 'focusOffset($event, getDirection() === "rtl" ? -1 : 1)',
+                        '(keydown.arrowUp)': 'focusOffset($event, -4)',
+                        '(keydown.arrowDown)': 'focusOffset($event, 4)',
+                        '(keydown.home)': 'focusYear($event, _monthYear.yearRange().start)',
+                        '(keydown.end)': 'focusYear($event, _monthYear.yearRange().end)',
+                        '(keydown.pageUp)': 'focusOffset($event, -_yearsPerPage)',
+                        '(keydown.pageDown)': 'focusOffset($event, _yearsPerPage)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }] } });
+
 const BrnCalendarImports = [
     BrnCalendarCellButton,
     BrnCalendarGrid,
@@ -1221,11 +1676,18 @@ const BrnCalendarImports = [
     BrnCalendarRange,
     BrnCalendarMonthSelect,
     BrnCalendarYearSelect,
+    BrnMonthYearCalendar,
+    BrnMonthYearCalendarGrid,
+    BrnMonthYearCalendarHeader,
+    BrnMonthYearCalendarMonthButton,
+    BrnMonthYearCalendarNextButton,
+    BrnMonthYearCalendarPreviousButton,
+    BrnMonthYearCalendarYearButton,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BrnCalendar, BrnCalendarCell, BrnCalendarCellButton, BrnCalendarGrid, BrnCalendarHeader, BrnCalendarI18nService, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarMonthSelect, BrnCalendarMulti, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarRange, BrnCalendarToken, BrnCalendarWeek, BrnCalendarWeekday, BrnCalendarYearSelect, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
+export { BrnCalendar, BrnCalendarCell, BrnCalendarCellButton, BrnCalendarGrid, BrnCalendarHeader, BrnCalendarI18nService, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarMonthSelect, BrnCalendarMulti, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarRange, BrnCalendarToken, BrnCalendarWeek, BrnCalendarWeekday, BrnCalendarYearSelect, BrnMonthYearCalendar, BrnMonthYearCalendarGrid, BrnMonthYearCalendarHeader, BrnMonthYearCalendarMonthButton, BrnMonthYearCalendarNextButton, BrnMonthYearCalendarPreviousButton, BrnMonthYearCalendarYearButton, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
 //# sourceMappingURL=spartan-ng-brain-calendar.mjs.map